Best Web Buzz

Last week our company had a skill test exam for front-end web developer vacancy. I sneak peek a couple designs and I found out some bad habits in their codes.

Here are the coding habits you would like to avoid.

Use the right tag for appropriate function.

vertical category list

Here is a bad vertical category list source code.
Example 1

Comment: overkill div tags

<div> Shop by Categories</div>

<div class=”business”>Business and Management</div>

<div class=”business”>Business and Management</div>

<div class=”business”>Business and Management</div>

<div class=”business”>Business and Management</div>

Example 2

Comment: dont use heading tags on your category list

<div class=”business_management”>

<a href=”#”><h2>Business and Management</h2></a>

</div>

<div class=”business_management”>

<a href=”#”><h2>Business and Management</h2></a>

</div>

<div class=”business_management”>

<a href=”#”><h2>Business and Management</h2></a>

</div>

Example 3

Comment: update your web development skills

<div class=”shopbycategories”><font class=”shopbycategoriesText”>Shop by Categories </font></div>

<div class=”greenleftBG”><font class=”businessmgtTEXT”>Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

</font><br>

Here is the correct way presenting your source code for vertical category list

Comment: your id=”category” will now take care of the styling

<div id=”category”>

<h2> Shop by Categories </h2>

<ul>

<li><a href=”#”> Business and Management</a></li>

<li><a href=”#”> Business and Management</a></li>

<li><a href=”#”> Business and Management</a></li>

</ul>

</div>

Remember you are coding for a vertical category “list” so you might as well use list tag and make use of li tags.