mediocritee.biz

by

Your IT in a Box
Striving for mediocrity ∴ Inevitable failure.

How to Start with HTML Coding

HTML-Coding.jpg

 

Hello Friends,

Anything that can speed up your website development process is good! Getting bootstrapping templates, boosting your straps etc. all work well with developers. You, as developers, would have seen a massive progress in the way frameworks have developed them to provide you with excellent and speedy procedures to develop prototypes. Bootstraps and templates are basically the most useful features to develop prototypes easily.

 

 

Of course, in case of an evolved project requirement, you will need to work on a refreshed style of template. You won’t be able to work with the existing frameworks. You just need to use HTML kickstart in case you wish to work on a recent framework that will solve all your issues.

 

Grid for Response

 

You will see that flexible grid is the base for your responsive site. With HTML kickstart, you can a working option for the flexible or any sort of grid that you wish to have on the site. You may not really use a non-flexible or standard grid, given that flexible is how you need to work. Here’s how you create a flexible grid.

 

<div class =”grid flex”>
<div class=”col_6 column”>content here </div>
<div class=”col_6 column”>Content Here</div>

 

Here you have added three divs using simple classes. You can always convert them to standard grids by removing the flex classname from the outer div. You will need to work with the helper classes too while you are working on the classes. Here are a few examples of the helper class

 

• You can make the grid visible/invisible on your desktop using the show/hide desktop helper class
• Similarly you can use the concept of show/hide tablet or show/hide phone to make the grid visible/invisible on either devices

 

To show/hide the two column grid on smart phone, here’s your code
Class=”grid flex hide-phone”>..</div>

 

Navigation

 

As a developer, you get three navigation options: the vertical left and right as well as the horizontal option.

 

You will be looking at the horizontal menu in most cases, and to code it you will need to make use of the following code:

 

<ulclass=”menu”>
<liclass=”current”><ahref=””>Item 1</a></li>
<li><ahref=”#”>Item 2</a>
<ul>
<li><ahref=”#”>Sub Item</a></li>
<li><ahref=”#”>Sub Item</a></li>
</ul>
</li>
<li><ahref=”#”>Item 3</a></li>
</ul>
In case you are looking at a vertical menu, here’s your code
<ulclass=”menu vertical”>…</ul>
<ulclass=”menu vertical right”>…</ul>

 

Styles in HTML

 

You obviously need some default styles using which you can work over your coding. This will help when you are looking to prototype. You will find a range of default styles including fonts and settings in here.

 

Button styles have gained a lot of attention in the recent times. You can add button style to the anchor text by adding button class as mentioned below

 

<ahref=”http://www.webdesignerdepot.com/”class=”button”>WDD</a>

 

To change color you can use the following code
<buttonclass=”blue”>Blue</button>

 

Change to various different styles using the following code

 

<!– Pill Style –>
<buttonclass=”pill”>Pill</button>
<!– Pop –>
<aclass=”button pop”href=”#”>Pop</a>
<!– Inset Button–>
<buttonclass=”inset”>Inset</button>
<!– Square Button–>
<buttonclass=”square”>Square</button>
Isn’t it easy to change and define styles on HTML kickstart?

 

The Many Images

 

Images are very important in case you are planning to enhance the user interface or user experience on your website. You can create image pop ups that will help enhance the feature. Here’s how you code the pop up

 

<divclass=”gallery”>
<ahref=”img/image1.jpg”>
<imgsrc=”img/thumb1.jpg”width=”100″height=”100″ />
</a>
<ahref=”img/image2.png”>
<imgsrc=”img/thumb2.png”width=”100″height=”100″ />
</a>
</div>

 

You don’t need JavaScript to create image popups. You can even add captions using the helper class. Here’s how you do that

 

<imgclass=”caption”title=”My Caption”src=”img/image.png”/>
To align the image, use the following code
<imgclass=”align-left”src=”img/align.jpg”/>
You can even create slideshows using your HTML coding of the images you have just inserted to your website
<ulclass=”slideshow”>
<li><imgsrc=”img/image1.png”/></li>
<li><imgsrc=”img/image2.png”/></li>
<li>
<h3>A Content Slider</h3>
<p>This slider handles HTML content as well as images.</p>
</li>
</ul>

 

Just imagine having to do all this without a single word of JavaScript. Cool isn’t it?

 

Creating Forms

 

You would need to create form, whatever be the framework you are using. Creating forms on HTML kickstart is going to be easy and interesting for you. Add a vertical form to your website using the following code

 

<formclass=”vertical”>
<labelfor=”name”>Name</label>
<inputid=”name”type=”text”placeholder=”YourName” />
<labelfor=”age”>Age</label>
<selectid=”age”>
<optionvalue=”0″>– Choose –</option>
<optionvalue=”18″>18</option>
<optionvalue=”19″>19</option>
<optionvalue=”20″>20</option>
</select>
<textareaid=”notes”placeholder=”Some Notes”></textarea>
</form>

 

You can add the error that you want to popup while filling in the form using the following code

 

<!– Error –>
<divclass=”notice error”>Error Notice <ahref=”#close”class=”icon-remove”></a></div>
<!– Warning –>
<divclass=”notice warning”>Warning Notice <ahref=”#close”class=”icon-remove”></a></div>
<!– Success –>
<divclass=”notice success”>Success Notice <ahref=”#close”class=”icon-remove”></a></div>

 

So, you are ready to get started with the HTML kickstart. Just go ahead and build your own prototype. Isn’t that going to be an interesting journey for you?

 

 

 

 

 

 

 

 

 

 

 
 
 
Share4
 

 

Learn How to Use Layer Fonts in CSS

Log in or Sign up