Layout, YOU SHALL NOT BREAK!

Good practices for HTML/CSS

12/11/2014

This was a hard week for me, I always had a hard time with design and to make things worse I got really sick. ='( After spending some time on my website I finally finished it and I was really happy about it. So happy that I sent it to a friend and was expecting some good news! Unfortunately that's not what I got, after opening the site he told me the layout was a mess. That's when I learned the hard way that you have to consider a lot of things when styling your site. Then I took some classes on tutsplus.com(It's paid, but it's worth every penny) which helped me a lot and after some hours I finally had a layout that wouldn't break for no apparent reason! In fact I think this one won't break at all!

Enough blabbering, time to drop some knowledge! I'm going to tell you about Classes vs IDs and display inline vs inline blocks!

When it comes to classes versus IDs, you should use classes for styles that you plan to use multiple times and/or on multiple elements while IDs are for styles that should be used only once. You could do it differently, but just don't! It's a good practice!

Let's wrap this with the differences between inline and inline blocks. An inline element has no line break before or after it, doesn't have any white spaces above or below it and it accepts HTML elements next to it. A block element demands it own line, has some whitespace above and below it and does not accept any HTML elements next to it. An inline-block element is placed as an inline element, but it has borders (whitespace above and below).