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.
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.
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.
<!DOCTYPE html>
<html>
<head>
<title>The World</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/site.js" ></script>
<link rel="stylesheet" href="css/site.css" />
</head>
<body>
<div id="sidebar">
<span>Vikram Crumblings</span>
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<h1>Dot Net World</h1>
<p>Hello to my world!</p>
<form>
<div>
<label>Date</label>
<input />
</div>
<div>
<label>Location</label>
<input />
</div>
<div><input type="submit" value="Add" /></div>
</form>
</div>
<div id="footer">
© 2017 Dot Net For All Ltd:
</div>
</div>
</body>
</html>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.
/* site.css */
html{
height:100%
}
body {
font-family: sans-serif;
font-size: 14px;
margin: 0;
height:100%
}
label {
font-weight: bold;
display: block;
}
input[type=text], input[type=password], textarea {
width: 150px;
}
#main {
background-color: #eee;
padding: 4px;
margin: 0;
height:100%
}
#footer {
background-color: #222;
color: #eee;
padding: 8px 5px;
position: fixed;
bottom: 0;
width: 100%;
}
.menu {
font-size: 12px;
}
.menu li {
list-style-type: none;
background: #A9A9A9;
width:250px;
height:20px;
padding:10px;
margin: 0px 0px 0px -40px;
}
.menu li.active {
font-weight: bold;
background:#696969
}
#sidebar {
background: #708090;
color: #eee;
position: fixed;
height: 100%;
width: 250px;
overflow: hidden;
left: 0;
margin: 0;
}
#wrapper {
margin: 0 0 0 250px;
height:100%
}
And last but not the least that is the jquery script. And that is mentioned below.
$(document).ready(function() {
$(".menu li").mouseenter(function(){
$(this).css('background-color', '#dcdcdc')
})
$(".menu li").mouseleave(function(){
$(this).css('background-color', '#A9A9A9')
if($(this).hasClass("active"))
{
$(this).css('background','#696969')
}
})
$(".menu li").click(function(){
if($(".menu li").hasClass("active"))
{
$(".menu li").removeClass('active')
$(".menu li").css('background-color', '#A9A9A9')
}
$(this).toggleClass("active")
})
});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