Learning How to Convert a Design into HTML/CSS

I have been designing blog themes in a program similar to Photoshop but now that I am trying to convert my designs to CSS/HTML & it’s not going well. Any tips, advice or tutorials would be very helpful.

Thanks,
Elizabeth

Hi Elizabeth!

Unfortunately it’s kind of impossible for me to put a whole “design to HTML/CSS” tutorial into one blog post. Learning HTML and CSS will take a lot of time and practice. You shouldn’t expect to be able to create a design and quickly learn how to code it. You need to start smaller than that. Small as in: boring, basics.

It took me years to learn how to properly code a design. Although, in my defense, I was like 13 and wasn’t actively trying to learn. I was making “pet pages” on Neopets (LOL) and just piecing bits together there and there. After years of “kind of” practice, it just clicked.

Start out with basic HTML and tutorials

First, you need to have the basics nailed down. If you don’t have basic tags and syntax memorized, work on that first. Know your paragraph tags, image tags, anchor tags, and all the other simple markup. Then practice styling those very simple tags. Add extra spacing in between paragraphs. Change the font colour, etc.

Then make sure you know what CSS classes and IDs are. Do you know how they’re used? What the difference is? There are loads of great articles out there about the difference between ID and class in CSS. If you don’t know, Google it.

Only once you have those basics really nailed down should you attempt to go any further.

Get to know divs… intimately

Divs are basically the most important tag for web design. That’s where your core layout and structure will come from. Start making some simple one-column designs and turning those into HTML/CSS. You can use very simple markup like this:

<div id="header">
	<nav id="navigation">
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
</div>

<div id="main">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum lectus venenatis est rutrum, non dictum lacus eleifend. Aliquam commodo purus ut gravida tempor. Vivamus nunc purus, ornare semper nunc non, facilisis fermentum ipsum. Pellentesque bibendum mauris non sapien molestie, sit amet convallis est elementum. Donec augue purus, rhoncus id diam ac, laoreet elementum metus. Suspendisse vulputate risus id tortor pretium egestas. Pellentesque sodales felis sit amet augue malesuada, ut sodales est interdum. In bibendum augue ac urna dapibus condimentum. Praesent pretium facilisis justo vel pellentesque. Donec sit amet risus velit. Nam dapibus in purus vel accumsan.</p>
	
	<p>Vestibulum quis turpis justo. Duis porttitor scelerisque velit, vel scelerisque velit pretium vitae. Sed sollicitudin dictum lacus at imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris lacinia massa lectus, vitae aliquam nunc egestas ac. Sed eget lobortis nisi, et fermentum tortor. Quisque tristique in lectus at pulvinar. Nullam interdum lacus id justo placerat tincidunt nec vitae turpis. Maecenas ornare eros tellus, a pulvinar odio scelerisque eu.</p>
</div>

<div id="footer">
	<p id="attribution">Copyright &copy; 2013 Ashley Evans.</p>
</div>

Can you add a background image to the header ID? Can you style the navigation menu so that it doesn’t look like a list, but looks like a real navigation menu? Can you change the font size of the footer?

Break it down into pieces

I think that’s the best piece of advice when you’re just starting out. Don’t try to tackle a whole design at once, it will just overwhelm you. Break it up as simply as possible like this:

• A header div
• A background image
• A navigation bar
• Another background image for the main content

Then work on it piece by piece.

If you don’t know how to do something, Google it

Google is your best resource. Web design is a huge topic on the internet and someone, somewhere will have an answer to your question. If you’re not sure how to add a background image, just pop this into Google:

How to add a background image to a div in CSS

Practice does make perfect

When web design finally clicked for me, in the sense that I could make my own designs from scratch, I still sucked. Yes, I could mostly make a web site, but they weren’t necessarily great websites. How did I get better? I practiced. At the time, I had a really lame portfolio website. Well, once a month or so, I’d redesign it. So even if I didn’t have clients or people to make websites for, I was still practicing. I was constantly making new websites or tweaking my existing one or going through tutorials.

Quick tips

Tutorials are great, but they are only training wheels

Tutorials are a great way to learn HTML and CSS, but they’re best if you’re only just starting out. At some point, you have to take off the training wheels and do it yourself. So don’t read tutorials forever.

Don’t buy a web design book

Maybe this is horrible of me to say, given that this is a book blog and all… but it’s true. You don’t need a web design book. (I’m mainly saying that because they’re like $20 – $40 bucks.) Think about it: HTML and CSS exist because of the internet. Therefore, the internet also contains a wealth of information on how to use HTML and CSS. Seriously, the best resources are online, and 99% of the time they’re free. You don’t have to buy a massive $40 book on HTML like web design teachers at university always suggest.

You can do it yourself

I’m completely self-taught. I have taken some web design classes, but they were always way below my level and I only took them because they were required as part of my degree. Everything I know, I learned myself or just by searching the internet.

I Google, I read articles, I read forums, I read help posts.. but I’ve never learned anything in a class. You can teach yourself! As I said before, there is plenty of information out there just waiting to be found. You can search for it, read it, and use trial and error.

Note: I’m NOT saying you shouldn’t ask for help, I just mean you don’t have to go out and take a physical class, or you don’t have to pay someone to teach you, or you don’t have to buy a book. Because of the nature of HTML/CSS (being internet-based), everything you need is right here on the internet for free! You just have to look (and with Google, looking is pretty easy :P).

Start from the bottom, work your way up, keep at it, and you’ll get there!