All posts by “Syazwan Hakim

Beginner Web Developer Tools
comment 0

Beginner Web Developer Tools

In this post, I’ll share some beginner web developer tools.


This tool by Alexis Deveria provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

CSS3 Maker

This user-friendly tool helps with css3 properties. And it tells which browser is compatible with specific properties.

CSS Validator

Easy to use tool which helps check stylesheet for errors.

Link Checker

Use to check links on any web page.

Viewport Resizer

Will always comes in handy when building responsive or adaptive website. Thanks to @MalteWassermann

The best part is all of them are Free! Hope this small list will help you to be a better Web Developer someday :)

Tab Styles Inspiration
comment 0

Tab Styles Inspiration

Mary Lou from Codrops shared a couple of subtle modern tab styles and effects. The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Depending on your design, different tab layouts and looks can spice up your sections; think outside of the box (literally) and you’ll see how interesting the usually boring tabs can become. Inspired? Check out the demo page provided.

View More   View Demo

comment 0

Tips To Fix CSS Layout Issue

Pulling your hair dealing with CSS layout issue?

Here are some tips to fix common issues with CSS layout

View Source

Fix css layout issue - Unclosed Tags
Try to view source (CTRL+U on FF) on your browser. This is the best tools to check if all tags are properly close or if you have duplicate IDs on one same page. Most of the times, this is the culprit.

Inspect Elements

Fix css layout issue - Inspect Element
Another great tool. Try delete your suspected element that caused layout issue using inspect element. This way, you can focus to fix only that element.


Clear your floating container using clearfix. When you have floating elements, don’t forget to add clearfix for the container. View full explanation about floats and clearfix by Chris Coyier.

/* A clearfix is performed as follows: */
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;

/* Or, if you don't require IE<8 support, the following is fine too: */
.clearfix:after {
  content: "";
  display: table;
  clear: both;

/* HTML with clearfix */
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

Do you have other tips on fixing CSS layout issue? Comments are welcome!