So you want to make a website? Anyone can throw together a simple site using a WYSIWYG editor like Dreamweaver or Microsoft Expression Web, but that usually results in non-valid code and a very “cheap-looking” website. Taking a design and turning it into raw, standards-compliant code may seem like a daunting task, but after you get through this tutorial, you’ll be using “DIV”s and styling with CSS like you’ve known it your whole life! That’s right, I said DIVs, no tables here (don’t worry if you don’t know what a div is)! This is a massive 4-part tutorial that will teach you the very fundamentals of design and give you the tools you need to make professional, high-caliber websites. It will walk you through conceptualizing the website, designing it, turning it into valid XHTML/CSS and lastly coding it to the blogging software WordPress. We’ll make a web designer out of you yet!
In the previous part of this series, we created a design for a travel blog in Photoshop. Now it’s time to turn that design into code. Open up your web development application (I’ll be using Dreamweaver) and open up the design in Photoshop and let’s begin (if you skipped the design segment and would like to download the PSD click here).
This is my first post in over a week, but I’ve been pretty busy lately. That being said, I haven’t had much time to work on the coding portion of the website tutorial.
CSS pseudo-classes are used to add effects to selectors. In this article we’ll discuss the “hover” pseudo-class and how I used it to achieve the hover effect on my home page. The most common use of :hover is for hyperlinks. When you move your mouse over a link and the text color changes, it has a :hover pseudo-class acting on it. Pseudo-classes work in this form:
I found this article today discussing a handfull of ways to improve your CSS code. It’s mostly tips that help make your code more readable, but it also talks about “resets” and why you should write your XHTML before you touch a stylesheet. Considering I’ve got a website coding tutorial coming down the line (although I’m still working on the design part of that tutorial series), I encourage you to check out the article here. (more…)