10 years ago CSS or HTML was considered bland and only for the uber geeks. A lot of graphic designers wouldn’t even try to take on web design with a project, most of the time it would be passed off to another person who specialized in it. Now a days, the two go hand in hand, being just a graphic designer limits not only you as a designer, but also your wallet. Being able to take on the two simultaneously impresses a lot of people and that’s why you should get into coding.

When I first got into learning HTML it was entirely on my own and my first website was not the greatest by any means.

7upspot

Remember this guy? Yeah, I too was one of “those” people. But, as I continued learning my websites came together better than the first and have only gone up since the summer of 1999.

So don’t give up when you’re trying to figure out where the heck to start with CSS or HTML and continue on reading.

 

The HTML – The framework!

HTML is basically the structure of a website. Picture a house that has all the wood beams up, but no walls, that’s HTML. It sets up the structure or layout of a website and you go from there. wood house frameworkNow old school HTML used to be comprised of tables, lots and lots of table. This was incredibly annoying at times and everyone wished it would stop, thusly the DIV was formed. DIV’s are basically boxes that can have high & width adjustments made to it.  When you break down a website into DIV’s it doesn’t seem that confusing, you think “Hey I can do this! not so hard, it’s just boxes.”   Essentially yes, and it’s great that you believe you can achieve it, but once you get into a deep level of CSS then it can get confusing (more on that later).

Back to DIVs, many people have different explanations for DIV’s, I see them as boxes.  For example, this is the DIV break down of this website from a prior layout, each coloured box represents a DIV. (see image below)

The break down of this was: Main container, Header, Navigation, Content, Sidebar, Footer

That’s it, it just those fancy websites that are so well designed that fool you into thinking it’s a cryptic code of website coding that only a few people know that can throw you off. Don’t stress, we all get there with determination.

div_breakdown

The dark grey div in the back is the entire website container, it holds everything. All websites have this, if you didn’t have this it there’d be no structure and all your “walls” would collapse. This main structure will have no CSS styling done to it, or very, very minimal styling to it.

The header is the light grey box, this is holding the Logo, social media icons and search bar.

Navigation is the green box underneath. Here you will have your navigation to direct visitors to other areas of your website. (Navigation can also be found on the left side of the page, depending on the web designers preference.)

Content Area will house all your website context, articles, posts and then some.

In particular to this layout, I have three boxes that are comprised of widgets (WordPress) (aka modules for Joomla) I had chosen to use a gallery slider, current post widget and a tag cloud. I have chosen these to showcase what I want to be pertinent when a visitor lands on my page.

Lastly, the footer. Footer could/will house copyright info, contact information, privacy policy, or further social media exposure.

 

That is essentially the HTML structure of this site, not so complicated to breakdown was it?