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.