Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

Coding a Beautiful Website From Scratch

by

As a sequel to the popular tutorial, "Design a Beautiful Website From Scratch", we will be converting our beautiful design into a valid HTML/CSS website. Even though we used the 960.gs template, we will not use its CSS framework to build the site. Instead, we will be coding this design from scratch!

It's always important to create strong and clean markup first, Why is that? One of the reasons is because, if we need to change our design or rearrange some things in our web site, we only need to make modifications to our CSS file and never touch our markup.


Introduction

Today we're going to learn how to prepare this design for coding and will code it to a valid (X)HTML/CSS, cross browser website. We will cover only the homepage of the website, and if you're interested in practicing more, the design is available at Themeforest.net. This is a very detailed tutorial; so you better prepare yourself with a huge cup of tea and some biscuits. We're starting in 3,2,1......


Step 1 - Organizing folders


Before we start our new project, we will need to create a new folder where we can save all our data. I usually create one folder for each project named after the website I'm designing. Inside, I create a set of folders for various purposes like "files", "PSD", "HTML", "pdf" etc.. We will need only one folder now and you can call it "HTML". Inside that folder, create 3 more folders and name them "css", "js" and "images". Then open the "css" folder and create another folder and call it simply "i" (which stands for images ). Why did we do that? Well...the reason I did this is because I want to separate my content images from those which create my web layout. This can come in handy if I would ever need to move my folders on the server, then the paths to my images will not be affected, and I would not need to modify my CSS file again to correct it.


Step 2 - Analyzing the design

So, we're done with organizing our folders. Now we can take a closer look at our design. Take a screenshot of Beautiful Website Design and try to think "behind the scenes", just like I did. Every element of our future web site will need to be coded and wrapped inside an HTML tag. We should also keep in mind that this is going to be a template that someone will use later and modify it to their needs, so we need to make it as flexible as possible for our users. We need to make sure that if a user want's to put a bigger logo instead of this one, that the placeholder (div) where the logo goes is expandable. Also other parts of the site need to stretch with the content. This is why we're going to have maybe few extra placeholders (div's) to accomplish this. If you were to code a site for a client you might not slice it this way because it would probably stay as is. Let's go step by step and see which elements goes in which tags.

First, the backgrounds. We need to break the top part into two smaller parts: top _top where the logo and search field goes, and top _bottom where the navigation is placed. Further, there is a big header holder, main content and footer. Notice that there is an extra box for footer nav. This is because we want the footer to be expandable too because someone might want to have 10 recent posts or comments instead of just 3, like I designed. This way footer content will push the footer navigation further down and there will always be more room for extra content.


Now the interface. The logo is usually wrapped inside an H1 tag, so we're gonna do the same thing here. The search form will be wrapped inside the "form" tag, which will be given a background image as seen on the screenshot. Before we move on I suggest that we see where we can use all our 6 Headings (H1 to H6). H1 is done, we said it will be our logo as it is the most important and comes always first. H2 is the second most important heading and we will use it to wrap our tag line image. Don't worry we will provide an alternative text for screen readers though. I decided that the third heading could be used to display our services descriptions or tag lines. So let's do it. Because what clients say about us is very important. I decided that it should go inside the H4 tag and not just a paragraph, even if it looks like a paragraph text. H5 are used for our footer headings and H6 for Latest Blog entries. Ok, so our H's are gone, we can move on. As you can see every element that has one sentence or more is put inside a paragraph and links are of course
"a"'s. Bulleted lists, like the one in the main content, is a simple unordered list "ul" where the bullet on "li" is replaced with a custom image. Also, all our navigation's, top, middle and bottom are placed inside unordered lists - just styled differently.


If you pay attention, you will notice that I've used only 5 HTML elements/tags to create our layout. For example, I have put the "Sign up" button directly inside the "a" tag because it is a link after all, no matter if it has a button graphic behind it. There's no reason to create a div with our button graphic first and then to put a link "a" inside. When we're done with our analyses we can open Photoshop and prepare our PSD for slicing.


Step 3 - Preparing the PSD

In this tutorial, we will be using the Slice Tool to cut out our layout images. Yes, you heard me right, the Slice tool. I use it only when I create templates that are for someone else or for sale on Themeforest because not everybody has skills to change their logo image or other graphic and replace it without breaking the layout. Essentially everyone would also need to make some modifications inside the CSS file (change dimensions etc.).

Remember that we are talking about how to make it easier for someone to modify it later, well that's one of the ways to do it.

If you feel like you don't need to do that then just skip this step.
Since we have a lot of graphics in our design, we need to separate them to make it easier for us to slice. I usually hide all content and buttons etc. and leave just the backgrounds and save that file as backgrounds.psd. The same goes for buttons etc. just without the backgrounds. So, now we have two psd files. One with backgrounds and one with buttons, bullets, headings etc..


background.psd


content.psd


Step 4 - Slicing the images

Now we can start slicing our layout. We have the "background.psd" and "content.psd". We will first start with "background.psd". As said before, you can cut out your graphics from a single psd file, just like I do sometimes, but this time it's important to have it separated so it's easier for our client to make modifications later.

Open the "background.psd" file. From Tools panel on the left, choose Slice Tool.



Step 5


With the Slice Tool selected, draw a slice from the top of the document to the next stripe (navigation part). Make the slice about 20px wide. NOTE: sometimes it's better to make a repeated background image wider. The reason for this is because our browser will repeat the image to create the background, and browser rendering engine needs to calculate the background width and add images to create full background. If our image would be 1px, imagine how much calculation needs to be done and of course your CPU usage would rise a bit more. Having said that, it's wiser to make a wider background image with maybe larger file size (just a few kilobytes) to save us CPU usage.


Pull the slice just near the dark gray line as this is where our navigation background starts. Notice how we always leave a solid color at the bottom of every slice. This is because this way we make this area expandable. Later we will add a background color to the placeholder and this repeated image, and if our content would be bigger our site won't break!


Step 6


We don't need to draw in slices every time, we can just copy and resize existing ones. Hold Shift+Drag the slice from above further down. Adjust the height only! Make it so that the bottom part of the slice is light gray solid color.


Step 7


Header background is the only part that will stay fixed in height. That's how we're going to slice this background image. Copy the slice from above again and adjust the height to fit the whole blue header part, including the small shadows.


Step 8


Main content background does not need to be sliced in full height. We need to look for the last solid color that appears in the gradient, and that's #ffffff (white). Use the Color picker Tool to find that part of the gradient and adjust the height of the slice to that point.



Step 9


Footer. Copy the slice from above, shift it down and adjust the height to fit the dark gray footer background.


Step 10


Now we have left only the small bottom navigation background to cut out. Again, copy the slice from above and adjust the height until you reach the end of the document.


Step 11


We're not done with backgrounds yet. We have the picture frame and light effects left. To slice the picture frame, we need to disable all background layers so we end up having only the frame. Then draw in a slice and zoom in. Adjust the slice so that the whole image is placed inside that slice.


Step 12


Here's how the light effect would look like when all background layers are turned off. Make sure that you stay inside the 960 grid when creating slices. The top light (1) and bottom light (3) will be exported as transparent PNGs, and the middle part (2) as a JPEG. We could have sliced the whole light effect with the Background and saved as JPEG but I prefer to do it this way.



Step 13

Now open your "content.psd" file, as we will now be cutting out our buttons, images, navigation etc.


Create slices just the same way you have done it before. Make sure to zoom in a lot to precisely create a slice for every object. This is how it should look.


You can always enable the background to get a better contrast when slicing.


Step 14


Zoom in 100% the two buttons in the header to see where the shadow ends and draw a slice around it. It is important to be very precise here because we don't want our shadow to be cut off somewhere. It would look awkward in the browser.


Step 15


Time to export our slices as transparent PNGs. Go to File > Save for Web. From the drop down choose PNG 24 .


Step 16


Now hold Shift and select all slices we have created as we won't to export only those. Maybe you would need to select PNG 24 from the dropdown again. Click Save . When the dialog window opens, choose Save selected slices only, from the drop down at the bottom of the window. Make sure to specify the folder where to export the images.


Step 17


We're using the sliding doors technique for our navigation buttons. If You want to learn more about it, make sure that you visit this article at A List Apart. We need to ensure that we have a long enough left part of our button to fit the longest word in menu (PORTFOLIO). This is why we had to expand the :hover/:active state in our design to fit that word. It's always better to make it few pixels wider than to have it sliced again if it doesn't fit.


Step 18


For our tabbed navigation, we will use CSS sprites. For more about CSS Sprites, read Exactly How to Use CSS Sprites . We need to create one button for the inactive and active state. This is done so that we can move the inactive tabs above the active and slice each tab with both states.


This is how one tab slice should look like. Make sure to leave 1px gap between tabs.


Step 19 - Naming images


It's time to give our exported images meaningful names. I've made a screenshot of all my images and their names so you can just follow my example. These images are all placed inside the "CSS/i" folder because they are part of our website layout. Other images like footer "Ads" or the "Featured work" image are placed inside the "/images" folder, which is in the root.


Step 20 - Preparing HTML and CSS templates

We are ready to close Photoshop and start coding this beautiful design. Before doing so, let's make a tiny preparation work. This is just an optional step, you may skip it if you like. I usually have prepared my HTML and CSS files for every project. Once you do that too you will only need to copy them to your working folder. I like to have my blank HTML file like this:

And inside the CSS file, I like to write something about the website I'm coding, so it would look something like this:


Step 21 - The Markup

First thing first. We will start with our markup. As said in the introduction, it's very important to create strong and clean markup. This is why we have first analyzed our design, made some notes and thought about our markup structure before we start coding. I suggest you do this every time before you start coding any project. If the site will be later adopted on some sort of CMS then it's also a good idea to sit next to your developer and go through the markup again and eventually make some changes if needed. Since we won't be adopting this to any CMS, we can just stick with our notes from Step 2.


Step 22

Let's start with backgrounds. To do this we need to create placeholders for our content. Place this code inside the body.

Remember how we sliced our images from the PSD file? First we sliced the top background, then the navigation background, then the main content background etc. Now when we create our markup, we will do it in the same order as we sliced our images. So I created "top_content" div first, then "nav_content", then "main_content", "footer_content" and "footer_nav". You will notice that I've immediately created some extra div's called "center". The reason I did this is because these "center" divs are our true content holders, so to speak. The "top_content" div is used to display our repeated background image and will be set 100% wide via the CSS file. We need to create an extra div that will be centered so our content also appears centered inside the browser.


Step 23

Now we have made all our main placeholders for the content. The next step is to go one by one and start putting some code for other elements. Inside the "top_content" div we have a logo and a search input field. Let's crate them.

First we have to create the "H1" and wrap our logo inside (we'll do this with CSS later). Then we have our search input field. We need to create a form because we will add a background image to it. Next comes the navigation. It is a simple unordered list which we will style with CSS later. Notice that I've added an extra "span" inside the "li"'s. This is because we will be using the sliding doors technique and it requires a span element to achieve the effect. After the navigation we have our Login or Sign up buttons. Since these two are going to be links I've put them inside the "a" .

The header is made from a heading, few paragraphs, two buttons and one big image.

The "main_content" will include a jQuery slider, but for now I left that empty and created just the testimonials part. I'm not very good with jQuery to write my own script and markup, so I would probably be using one of the free available scripts and make just few modifications to fit our needs.

Client testimonials are made from two divs. We have 4 borders to create and this is possible with these two divs. The outer div will have a 1px border, background color, and padding applied, and the inner div will also have a 1px border and background color. This way, we can create that effect.

All that is left now is the footer. We will create just empty columns and fill them later on the go. I suggest we should see how our website looks inside a browser.


Step 24

This is how our site looks currently. There's still no CSS styling applied so the browser renders it by default. This way we can also see how other screen readers will interpret our site, because screen readers have no CSS or JS enabled. Our site needs to be accessible and this is one way to test it.


And now to see how it will look like on mobile.


Nice!


Step 25 - The Fun part (CSS)

It's time to give our site more style! We've set the base, we have clean markup, almost all elements of our website are here. We will be touching the markup again because we will need to add some extra classes and id's to some elements so we can style them. I will go from top to bottom again and once and a while do the testing and present you with a screenshot. Let's bring it on!


Step 26

Open the main.css file. Add some basic CSS reset styles and body definitions, like this:


Step 27

Next we will style our Headings and add some browser fixes.


Step 28

I usually declare a few extra classes just in case I need them. Mainly they are for text formatting, floating elements and margins and padding.


Step 29 - The backgrounds

Now we're going to give color to our layout. Let's select all outer div's and attach repeated background images to them.

Now let's see how this looks like in the browser.



Step 30

We have our backgrounds set, now we only need to place the light effect overlay in each div. To do this we will create a set of id's with transparent png's set as backgrounds.

To avoid adding extra div's in our markup we will just add an id to the already defined div. For that we need to change our markup just a bit.

After modifying all the .center div's, let's preview the changes.



Step 31

Now we have set the base and we can go step by step styling all elements. First comes the logo and search form. For that just add this CSS code:

First we declare the heading "h" followed by the "a" tag. We specify the width and height and background image (which is our logo image). Because "a" is an inline element we need to convert it to a block level element and we do that by adding "display:block;" property. "text-indent:-9999px;" is used to move the text off the screen so only the image is visible. "overflow:hidden;" removes the big dotted border around the link and makes it the same width and height as declared earlier. With the search form we did a little trick. We gave our "form" a background image (the whole field with button). Then we said that our input field will be 109px wide and 17px high. Actually the image is 27px high but because we added 5px padding we need to subtract 10px from the width and 10px from the height (5px from every side) of the input field. This is something we will be doing a lot later so try to remember this. Next we added a button, gave it the same background image but made it only 27px wide and 27px high, like the "GO" button itself. Additionally we declared the :hover state of the button.


Step 32 - Navigation

Navigation is made with the sliding door technique. I will not explain that technique here in detail so you should read this article first. Here's the code for our navigation.

Before you test this in your browser make sure to make a small change to the markup.


Step 33

To the right of the navigation we have a "Sign up" button we need to style. Paste this code in your CSS file.

We floated both elements to the right and gave them top and right margin so they are centered and moved apart from each other.


Step 34 - The Header

Here we have to change the markup again a bit, but it all comes down to adding classes to existing elements and maybe adding something new. I've divided the header into two parts, the left side and the right side. For that I created two new classes in the CSS file:

The left column will be used to contain the tag line, paragraphs and buttons, and the right column will not be used here as we have a big image on the right that is big enough to hold the header together. This column will be used inside the main_content. Here is our new header markup:

And the CSS:

This is how our site should look like now.



Step 35 - Main content

Remember that we left the main content out when we were writing the markup? Well, the reason why I did this is because we're going to use the slider from Chris Coyier's article Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery. Now, read this article if you're interested in the whole process of creating this slider. I was not really interested in dynamic generated content with PHP so I downloaded the source code and copied it here. I made some modifications to the HTML, CSS and JS file to get the same effect but with my own design. To do the same first insert this code in the head of the document:

Next add this code inside the center div which is inside the main_content:

I found out that I mostly needed to change dimension and paths to images from the original Chris's CSS file for the slider. The new slider CSS:

Further we have updated the "right_column" with a few new classes so we need to style it in the CSS:

".featured" is the div on the left where our featured image goes. We set the background to be that image frame and used the "padding" property to center the content inside. "ul.listing" is the unordered list (bullet list) we have on the right. It's floated left and has some padding to separate it from surrounding content. Further we replaced default bullets on "ul.listing li" with our custom bullet image (blue) using the "list-style-image: none; background-image:url(i/ico_li.png);". With the "background-position: left center;" we aligned the bullet to the left and centered it with text. Finally add some padding to give everything more space. ".right_column .description" is a class for the paragraph that appears underneath the two bullet lists. It just tells the paragraph to be 100% wide so it doesn't wrap around the lists, since they are floated left.

And finally the JS file. I just deleted unnecessary code that we're not using here. New coda-slider.1.1.1.js file look like this:


Step 36

After we've made all these changes we just need to insert a tiny bit of code in the "head" of our document to trigger the slider. After that we can test our page.

This is how the main content area should now look. We still need to style the testimonials part.



Step 37

The testimonials box is made up of 2 individual divs. The outer div is given a background color and 1px solid border. Inner box is also given a background color, 1px border and margin of 10px. This margin ensures that the inner box will be 10px smaller on all sides then the outer div, creating a fat border effect of the outer div. Let's see the CSS.

"margin:0 auto;" is used to center the testimonial box within the main_content. "padding:20px;" for inner div is used to distance the content from the border. Notice how the width of the inner box got smaller? This is caused by adding margins and padding. Every time we add padding to an element, we need to lower the width or height of that element depending on which padding was given.


Step 38

Now we have to style the content of the testimonials box. I've made a few extra classes for every part of the content and it looks like this:

First I declared the paragraph font color, size and weight. Then the testimonial is wrapped inside the "h4" tag because I felt that it is an important part of the content and should be emphased this way. We could have wrapped it inside the "p" tag as well. The ".all" class is used for the "view more testimonials" button. You will notice that I used some CSS3 properties, like rounded corners. Most browser support it except IE of course. IE will render it as a square box. We can live with that :). Last thing to style is the signature and logo of the client, which will be a link to his homepage. I had to rearrange the markup a bit to get the "more button" and "signature" display in the right order, so this is how the new markup looks like:


Step 39

We're almost done with this layout. All that is left is the footer area. Let's see how our markup for footer looks like.

Now we need to fill every column with some content. Let's do this.

First we added all headings in each column followed by the horizontal rule. The "Latest Blog" entry is made from a date, heading and lead text. Date is displayed with a background image (icon), and Heading is a link to the full article. I've added few extra classes to paragraphs and links so I can style them with CSS later. Recent comment is done almost the same way. The difference is that every comment is wrapped inside a "recent_comment" div. Advertising images have a fat border, so I made them the same way as I did the testimonials box. You should notice that one ad div has a class "ad_odd" and the other just "ad". This is because I've given a different margin to every add so they stay aligned and equally spaced. Last thing to note is the last column class "column_odd". The reason for doing this is the same as with ads earlier. We'll see that in CSS shortly. Twitter box has a simple background image with padding applied.


Step 40

Let see how the CSS for footer looks.

The width of the ".column" is calculated based on the grid and padding we added to each of them. "margin:30px 0;" gives the columns 30px space from top and bottom and 0px from left and right. As said before ".date" has a background image applied to it (orange icon). "h5" are column headings and "h6" are Latest Blog entries headings. We also defined the :hover state for "h6". The "column_odd" is the one with Twitter box. Notice that ".column" has a right padding of 15px set, whereas "column_odd" has padding of 0px set. This way, we get them all nicely aligned within our grid. The Twitter div is positioned relatively because, this way, we can easily absolutely position the "Follow us on Twitter" link to be displayed outside the Twitter balloon. We could have done this the other way round, but I thought this would be the best solution here.


Step 41

The bottom navigation is an easy task now. All we need to do is add the logo and some copyright notice and the small repeated navigation that is wrapped inside the unordered list. We have our markup ready, now we need the CSS for it. Here's the CSS code:


Step 42 - What about IE?

Yes, we need to fix some issues in IE7 and IE6. To do this, we first need to see which elements are not displayed correctly in both browsers. I won't explain much how to fix bugs in IE, but I can just say that it mainly comes down to adjusting the margins and padding. There are also few resources on common IE bugs and how to fix them:

First put this bit of code inside the head of our document.


Step 43

Create ie6.css and ie7.css and save them inside the "css" folder where the main.css is also saved. For ie7.css paste this code:

And this is the ie7.css :


Step 44 - What about transparency in IE6?

We have a medicine for that too ;) . There are several IE6 PNG fix scripts available on the internet but I like to use the "DD belated" PNG fix. It rarely messes up IE6 and is easy to implement. First go to this website and download the script. To make it work we need another Conditional Comment in the head of our document.

Next open the "png_fix_elements.js" and edit inside. You need to specify all id's and classes of elements that have a transparent PNG applied to it.


That's it!

Wow, it has been a long and exhausted tutorial in which you learned how to code a website from scratch. We touched almost every topic in this process. From organizing folders, analyzing the design, defining the markup structure, preparing the PSD's, slicing images, and coding. I hope you have enjoyed it just as I did.

If you're interested in coding the full website, the design is available at Themeforest.net

Advertisement