Sample HTML and CSS for starting web application

By | September 18, 2017

Many times I want to try out some thing new with HTML, CSS and jquery. But as soon as I start out doing some set up for my experiments for all of the three, it takes me lot of time to do the set up and have some initial UI on which I can do some experiments. That is why I have created a simple html page with basic layout on which I can play around in my free time.

Become an Expert in Programming and Web Development.View all courses!

If you also want to play around with HTML, CSS or Jquery you can always use my initial template and work on your cravings to try out some UI stuff. Please not that it is not a fully working web application but it can be helpful if you want to try out your hand in UI design.

Please have a look in the below screen shot the UI of the page.

html and css

Though it is not some super UI but there are three menu items on the left hand side of the page and and some data display part on the right of the page.

Now coming to the HTML part of the page. Below is the code for it.

To make the page look nice we always need some nice UI which can be achieved using CSS. Below is the CSS part of the application.

And last but not the least that is the jquery script. And that is mentioned below.

All these part will give you the UI which I have shown in the figure 1. Using all the three part at your end you can start learning about the basics of HTML, CSS and jquery. This can help you to give you an initial set up which you can modify and try hands on with UI.

Copy all the three file at your side and start playing around with it.

if you want to start with jquery below article can help you to start with.

How to start Jquery development

Jquery selectors: A quick reference