Design and Code Your First Website

7/28/2019 Design and Code Your First Website

1/60

ry Tuts+ Premium, Get Cash Back!

Advertise Here

review

Design and Code Your First Website in

Easy to Understand Stepsessa Thornton on Aug 3rd 2009 with 350 Comments

Tutorial Details

Technology: HTML, CSS

Difficulty: Beginner

Completion Time: 2-4 hours

n this tutorial, were going to design and code our first website in simple, easy steps. This tutorial was written for the beginner with the ho

hat it will give you the tools to write your own standards-compliant websites! Its a brand new week; maybe its time to learn a new skill

Step 1 - What Were Making

Were going to design and code this very simple website. Spectacular design, its not, but itll be very effective for teaching basic coding

echniques.
http://d2o0t5hpnwv4c1.cloudfront.net/397_yourFirstdesign/mysite.psd.ziphttp://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/http://d2o0t5hpnwv4c1.cloudfront.net/397_yourFirstdesign/mysite.psd.ziphttp://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#disqus_threadhttp://net.tutsplus.com/author/tessathornton/http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/http://net.tutsplus.com/advertise/http://tutsplus.com/paypal-cash-back-offer/?utm_source=nettuts&utm_medium=banner&utm_campaign=paypal_cashback&wt.mc_id=paypal


2/60

Step 2 - Getting Ready

What you need

his tutorial was written assuming that youve never coded a website before, or have only done it a few times. Nevertheless, to complete

utorial, you will need the following:

Photoshop or a similar image editor

A code editor (more on that later)

Basic understanding of how html works, basic syntax and tags. To get up to speed, check out the official resource at w3 Schools,

you can learn all the basics needed for this tutorial.
http://www.w3schools.com/html/default.asp


3/60

Ditto for css, you should understand how selectors work and be familiar with basic properties. Again, the best resource here is w3

Schools

A browser, obviously. Im using Firefox, and if you want your site to look just like my screenshots in each step, you should too

Layout

Were making a very simple website here, with four basic elements: header, content, sidebar and footer, the layout is going to look somet

ke this:

s a good idea to block out the layout of your design before you start, either on paper or in Photoshop, to streamline your workflow and

rganize your ideas.
http://www.w3schools.com/css/default.asp


4/60

Step 3 - Getting Started

Open up a shiny, new Photoshop document, say, 1000px by 1200px. We can always crop it later. Im making it pretty narrow because working on a laptop here, but feel free to go wider if you like more space to work.

Now, Im not going to go into the debate about screen resolutions and optimal website width here. All you need to know is that the cont

ur page is going to be 800px wide, and that thats okay. So, on our 1000px wide document, were going to drag in guides at the 100 an

00px marks to set the width. Our design has a sidebar, and Ive decided to make it one third the width of the page. Two thirds of 800 is

bout 530, so lets put in one more guide at 630px. Well also set a nice background color of #ebe8e8.

Step 4 - Header

Grab the rectangle tool and draw a big, blue box at the top of the document, mine is about 170px high and the color is #23b6eb. Next dr


5/60

kinny, dark grey bar at the very top of the page, I used #5d5a5a

Step 5 - Highlight

Now were going to add a bit of a lighting effect on the blue header area. Create a clipping mask above the blue layer, then Grab a big, s

rush (400px wide) and pick a color a bit lighter than the blue background.

Now lightly click the tip of the brush right below the bar, around the centre of the document. Keep it subtle, and try not to let the lighter c

each the edges of the page (this will be clear later). And set the blending mode to screen.

Step 6 - Navigation Bar

Now were going to add another bar to the bottom of the blue one, we can make it grey, but were going to add a gradient overlay so it

oesnt really matter.

n the layer styles panel, add a gradient from #e2e3e4 to #bebdbd at 90degrees.


6/60

Step 7 - Footer

Next, lets draw a grey box at the bottom of the page, I picked a color a bit darker than the grey from the bar at the top.


7/60

Step 8 - Logo

Backgroundor the logo, were going to draw a rectangle and add another anchor point at the end, then drag it out to the side. To get rid of the round

ption-click on the point.


8/60

Next, add some layer styles: a gradient overlay and a 1px stroke: Gradient from #aec457 to # cdf399


9/60

Text

Now for the text: big and bold.

Font: Myriad Pro

Style: Bold

Size: 60px

Color: #36809a

o give it some depth, add an inner shadow:


10/60

Step 9 - Tagline

Next I just added in a short tagline:

Font: Arial

Style: Bold

Size: 30pt

Color: #e4dfdf


11/60

Step 10 - Navigation

Write in the navigation links nice and big, spread them out and space them about evenly.

Font: Arial

Style: Bold

Size: 30pt

Color: #676666

Step 11 - Main Content

ime to paste in some dummy content. I used one bit header, which will be h2 and the smaller one will be h3 link to html ipsum.

Make the text boxes about The width of the first 2 thirds of the page. Text styles:

2 Header:

Font: Arial

Style: Bold

Size: 36pt

Color: #0e5d7a

3 Header:

Font: Arial

Style: Bold


12/60

Size: 24pt

Color: #444444

aragraph:

Font: Arial

Style: Normal

Size: 14pt

Color: #595858

he dates under latest updates are going to be wrapped in a small tag, the font is the same as the paragraph, but 12pt. I copied the new

wice, cause Im lazy.

Step 12 - Sidebar


13/60

Links

Next draw a skinny rectangle over our sidebar region, color #d4d6d3, with a 1 px stroke of #bebdbd

ill up the sidebar with some more dummy content, you can get the free icons I used here. The fonts are:

3 Headers:

Font: Arial

Style: Normal

Size: 24pt

Color: #044055

ist items:

Font: Arial

Style: Normal

Size: 18/14pt

Color: #373737

Button


14/60

Next were going to add a join our team button beneath the contributors links. The button is just a rectangle with the same gradient as t

ogo, and a 1px stroke color c7c7c7. The text is:

Font: Arial

Style: NormalSize: 24pt

Color: #434343

Step 13 - Footer

o finish off the mockup, just add a bit of dummy copyright text, or whatever you want, to the footer. The font is:

Font: Arial

Style: Normal

Size: 14pt

Color: #e0e2e2

And thats it for the page design, its nothing special, but its simplicity will make it easier for you to follow the rest of the process.


15/60

Slicing the PSD

Now that we have our lovely completed psd, its time to chop it up into pieces we can use. The idea here is to use as few images as possnd to make them as small as possible. Okay, so lets start with the header. We want it to stretch out across the whole screen, no matter

wide it is. To do that, were going to grab a tiny little sliver of the header, and have it repeat across the screen again and again, no matter h

wide.

Step 14 - The Slice Tool

Now you probably havent had to use the slice tool before, but its really very simple. It just lets you slice your file into teeny tiny pieces w

an be exported for the web.

Header

o, lets go ahead and grab a little slice of our header. Click and drag to create the slice, just like the rectangular marquee tool. Be carefu

ake the slice from the side of the image, so you dont get any of the highlight.

Now that we have this little stripe, we can repeat it along the x-axis. The highlighted area, however, is non-repeating, so we have to cut o


16/60

whole thing. Slice the section of the header between the two guides that denote our 800px width.

Footer

We use the exact same process for slicing the footer, grab a skinny piece of the footer.

Everything Else

We just need a couple more images: the subscribe icons and the join our team button.

ecause the icons and the logo are irregularly shaped, were going to save them as transparent .png files, so were going to come back an

rab them separately.

Okay, so to slice the button, we can use the same technique as the header and footer, but this time we only need the one thin slice. When

make the slice, be sure to not include the 1px stroke, (were going to add that in later) you might need to zoom in really close for this.


17/60

Step 15 - Export for the Web

Now that we have our images all sliced up, lets save them as optimized jpegs and put them someplace useful.

Go to File/Save for web and devices In the popup window, hold down shift and click to select each of the slices (again, you might wan

oom in) Check that the preset drop-down menu is set to JPEG-High, uncheck the convert to srgb and click save


18/60

n the next window that pops up, pick a name and location for your images, Im just going to save to the desktop for now.

Make sure its set to images only, default settings, and selected slices only.

Next, check out the location you saved your files to. Instead of seeing the individual images, youll just find a folder labeled images whe

our pictures are located. The computer will give each image a number, which isnt very useful. Check that you have the right images, then

ame them appropriately.

Now, back to those pesky icons and the logo. Be sure to hide all the background layers, then take out the slice tool again and cut out nic

oxes around each icon and the logo.


19/60

Now we go through the same process of exporting for the web as we did with the jpegs, only this time be sure to select PNG-24 from th


20/60

preset dropdown menu, and that the transparency box is checkmarked. Rename these files too, and your images folder should look

omething like this:

Alright, thats it, were done cutting up our psd, and we have all the images we need. Dont close Photoshop just yet, though, well still n

ick out colors, fonts, dimensions, etc.

Part 3 HTML

Step 16 - Getting Started

Alright, time to dive into some html. The first thing youre going to need is a code editor of some kind. This is often an area of personal

reference,

ut I recommend starting off with a free one. For mac and PC, I highly recommend Komodo edit as a first code editor. It has a lot of fea

hat are ideal for beginners and advanced users.

One of the best features is the syntax-checker, which is like the spell-check in word processors, which will identify and explain little mista

or PC, there are a lot more options, none of which Im very familiar with, but check out Andrew Burgess article 22 Neat Code Editors

Windows

n this tutorial, were going to use Komodo edit, but the principles are the same in every editor.

Step 17 - Setting up our Folders

irst things first, we need to set up a place to hold all the files related to our site. Create a folder for your website, mine is called MySite

nside this folder, create another folder containing the images we just sliced.

Name this folder images. Now we open up our code editor, this part will be a bit different depending on what software youre using:

f youre following along in Komodo, select create new project and save/move the .kpf file to the MySite folder. When you open up t

le, the file browser at the side of Komodo should display the contents of the folder.
http://net.tutsplus.com/articles/web-roundups/22-neat-code-editors-for-windows/


21/60

Next right-click on the project file, and scroll to add and select new file. In the window that pops up, select html(xhtml) and name t

index.html.

f youre using another editor, the process should be similar, but the essentials are the same: you need to create an index.html file, and it n


22/60

o be in the MySite folder along with the images folder.

Step 18 - Setting up our index.html Filehe first thing we need to do is declare the doc type, character encoding, and create the tags. Many editors will do this for you, bu

ot, it should look something like this:

iew plaincopy to clipboardprint?

1.

2.

3.

4.

etween the html tags, we need a head section, which contains all sorts of important information about the site which isnt displayed witody of the site.

or us, at this point all its going to contain is the title of the page, like this:


1.

2. MySite

3.

elow the head, logically, we add the body, also contained within the tags. Okay, so far we have:


1.

2.

3.

4.

5. MySite

6.

7.

8.

9.

10.

his is a basic page setup, you might want to save this clip somewhere for future use.

o remember when we said wed have header, content, sidebar, and footer sections?

Good, now each of these is going to be within its own , and will be given an appropriate id.


1.

2.

3.

4.

5.
http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#


23/60

6.

7.

8.

9.

10.11.

12.

13.

14.

NOTE: its a good idea, especially when you first start, to add comments at every so you can keep track of the hierarchy of divs.

Now lets take another look at our psd remember how we want the footer and header slices to repeat indefinitely out to the sides?

Were going to need a way to let these elements stretch out, but at the same time, we need the main content (content sidebar)

o be contained within a specified width at the centre of the screen.

o handle this, we need a big div holding our expanding elements, and a div to contain the main content.We should also notice that the footer text is centered too, so we need to repeat the same process for the footer.

o do this, we need to wrap some divs around the ones we already have. We have two basic sections, the main section, and the footer s

ach is going to be contained within one big, unruly div with an unspecified width,

nd the content of each will be wrapped in individual divs that specify width and centering.

We want to use the same rules for the main and footer content, so instead of (or in addition to) specific ids, they will have specified class

which means you can create a set of rules to define all divs with the same class.

o the main content is going to be wrapped inside a div with the id main and our footer will be wrapped in a div with the id footer. If i

elps to visualize the structure, heres a diagram:


24/60

And the markup looks like this:


1.

2.

3.

4.

5.6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.
http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#


25/60

17.

Now we wrap each section in a containing div, with the class of container.


1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11. 12.

13.

14.

15.

16.

17.

18.

19.

know all these wrapping divs seem redundant, but they will become relevant when we start styling the page.

Step 19 - Adding Content

Now that the structure of our page is set, we can start adding content, from top to bottom. Heres an outline of the html elements that wil

p our page:


26/60

Header

At the very top we have our header, and within the header we have 3 main elements: a logo, a tagline, and a navigation menu.

o lets create a div for our header, and to keep things clean, well put the logo and tagline in their own divs.


1.

2.

3.

4.

5.

6.

7.

ecause its the most important heading of the page, the Logo is going inside an tag. We have more options for the tagline, dependi

ow relevant it is to your site. In this case, Im using an tag.

or the navigation, standard practice is to place menu items within an unordered list, with each list item containing an anchor tag.

o we have:


27/60


1.

2.

3. Logo4.

5.

6. And a little tagline, too.

7.

8.

9. Home

10. About

11. Portfolio

12. Contact

13.

14.

NOTE: the href value in the anchor tags would normally specify where the link goes, but in this case, the pound symbol just means link

op of page.

Main content

ooking at our main content area, we have 4 different styles of type: a big heading at the top, a smaller one,

nd an even smaller one heading for the news item titles, plus some paragraphs, and the small little dates on news items.

Were going to call these , ,,

, and , respectively. Now its just a matter of pasting in your content, which isn

much fun, but it is pretty easy.


1.

2. Lorem ipsum, Dolor sit

3. Nullam vulputate felis id odio interdum nec malesuada mi pretium.

4.

Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.

5. Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.

6. Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.

7. Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel.

8.

Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus

9. Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.10. Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium alique

11. gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet.

12.

13. Latest Updates

14. Vestibulum id nulla eu sapien pellentesque

15. June 1, 2009

16.

Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,

17. facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.

18. Etiam laoreet ante in purus laoreet id malesuada dui pretium. Read More

19. Vestibulum id nulla eu sapien pellentesque

20. June 1, 2009
http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#


28/60

21.

Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,

22. facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.

23. Etiam laoreet ante in purus laoreet id malesuada dui pretium. Read More

24.

25.

ve added anchor tags with the value Read More at the end of each news item.

Sidebar

On to the sidebar now. The sidebar has three elements, each of which will be wrapped in its own div.

ach div will contain an header, and an unordered list, and each list item will again contain an anchor tag.

o go ahead and copy and paste your text in, and it should look something like this:


1.

2.

3. Subscribe!

4.

5. Subscribe via RSS

6. Get Email Updates

7. Follow us on Twitter

8.

9.

10.

11. Popular Items

12.

13. Lorem ipsum dolor site amet

14. Ulvinar tincidunt, Mauris id

15. Lorem ipsum dolor site amet

16. Proin tempor erat sit tene

17.

18.

19.

20. Contributors

21.

22. John Smith, freelance writer23. Jack McCoy, designer

24. Lenny Briscoe, editor

25. John Smith, martketing

26.

27. Join Our Team

28.

29.

Footer


29/60

We may as well put the footer in before checking it in the browser, it should only take a second.

Worth noting is that any symbols you want to use in your text have special codes in html, for example, the copyright symbol is coded as


1.

2.

3.

Copyright 2009 MySite

4. All Rights Reserved

5.

6.

And thats about it for the markup, lets take a look:


30/60

ooks pretty good, no? Well, no, not yet. But it does contain all the information we need, and is ready for styling.


31/60

Part Four CSS

Step 20 - Adding CSS

Now, this is where the magic happens.

Create a new file in our site folder, and call it style.css.

Now we need a way to tell the browser that this css file belongs to our index.html file, so we link to it with the link href tag. Put this line

ode into your section, beneath the title.


1.

Now our html file can access our css file, so whatever changes we make to the css will affect the html file.

Step 21 - Basic Cleanup

here are a couple ugly things about our site that we can fix right away: we want to change the default font, we want the content to be 80

wide and centered, and we want to get rid of all those spaces between the elements.

irst, were going to pick a font for all text within the body of the page, which will be displayed unless otherwise specified:


1. body { font-family: Arial, Helvetica, sans-serif; }

Next, lets define the width and margins of our container class divs.


1. .container {

2. width: 800px;

3. margin: 0 auto;

4. }

he margin: 0 auto property is shorthand meaning that there is no margin at the top, and that it will be automatically centered horizontally.ets take a look.
http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#


32/60

Much better. The next step is going to make things look much worse, but stick with me.

CSS reset

All browsers use default padding and margin values for each element, which makes unstyled pages look nice, but for us they just get in th

f our own styles.


33/60

o get rid of all these messy margins, were going to use a very simple css reset, which is just a rule that gets rid of the default padding an

margins on the elements were using. Put this at the top of your css file:


1. '

2. body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

ow lets look:


34/60

Step 22 - Header

Okay, so everythings all squished up and ready for us to manipulate! Now we get to start adding our own styles, again, from top to bottoets get the tricky part out of the way first: setting the background images for the header.

Well star with the repeating slice we took of the header. The repeating image is going to be within the main div, which has an undefined

width. We need to let the browser know where the image is, and what to do with it (repeat, no-repeat) to set a background image, we us

roperty background and specify the location of the image or url: in our case, the image is in our images folder, so we specify the loca

ke this:


1.

2. url (images/header_slice.jpg)

hen specify that we want it to repeat along the x-axis:


1. #main {

2. background: url(images/header_slice.jpg) repeat-x;

3. }

Check it out:

wesome, right? Try stretching out your browser, it just goes on and on and on But were still missing the highlight on the blue bar, and

we cut out an 800px part of our header, we can put it inside our container div. Problem is, we have two of those (one for the main div,

or the footer) so we need to specify that we want the div with the class container that lies within the div with the id main

et the image the same way as before, but this time we need to specify no-repeat:



35/60

1. #main .container {

2. background: url(images/header.jpg) no-repeat;

3. }

ake a look:

reat! the highlight is sitting just where we want it, and blending in to the repeating sides.

Step 23 - Logo Image Replacement

Our logo is pretty complicated, right? were using an image background, and a non-html font with an inner shadow. We cant do that in c

we have to replace the text with an image.

why not just put the image in place of the line?

ou may ask. Well, on the internet, the header is basically the name of your page, and important, powerful robots (google) scan fo

roperty when searching for keywords. If you dont have an header, your site could be called kalamazoo, but it wouldnt turn up in

earch for that exact word.

here are various other techniques which have their advantages over this one, (see here, especially technique #8) but this is the simplest a

most appropriate technique for this situation.

o, to fix this problem, we use a devious little technique called image replacement to use the image that we want, while keeping the


36/60


1. #logo {

2. background: url(images/logo.png) no-repeat;

3. height: 84px;4. width: 235px;

5. }

etter, but we still have the original text in our way, but we can fix it! All were going to do is set the text-indent value to somethingdiculous, like -9999px, way off the page, so no one will ever see it, except the search engine robots.


1. #logo h1 {

2. text-indent: -9999px;

3. }

ow take a look, and our logo image is happily sitting where our text used to be. But it still looks pretty bad, all cramped up at the t

here. When we want to move an item from its original position on the page, we can use both the padding and the margin properties. We

oing to try both to see the difference

irst, lets try adding a margin to the top of the h1 tag. We can find out how big to make it with the ruler tool in Photoshop.


1. #logo h1 {


3. margin-top: 40px;

4. }


37/60

Oops! We managed to move the logo, but it took the whole page with it! Lets try adjusting the padding instead:


1. #logo h1 {


3. padding-top: 40px;

4. }

Now take a look, and the damn thing went back to where it started! This is because the margin property moves the whole element, but th

adding only moves the content of the element, leaving the background where it is. So, if our screen was, say , 19999px wide, we would

ur outcast header move down 40px, but this is not what we were going for.

o, to move the background image of the logo, we need to move the div above it, because the whole logo div is the content of the head

iv. lets try it out:


1. #logo h1 {


3. }4.

5. #header{


7. }


38/60

Much better! Now our logo looks just like it does in our psd, in exactly the right spot. If only we could fix that tagline

Step 24 - Floating the Tagline

o now we need to find a way to get that tagline out beside the logo. Problem is, html elements naturally stack vertically, pushing eachoth

nd down the page.

We have a few options to fix this, but Im going to use floats, which are a little tricky, but seriously useful once you get the hang of them.

Okay, so whats a float? Well, thats complicated. Basically, when you tell an element to float, it sticks it to the side of a page or elemen

lso takes it out of the normal flow of the page. Confused? Let me demonstrate.


1. #logo {

2. background: url(images/logo.png) no-repeat;

3. height: 84px;

4. width: 235px;

5. float: left;

6. }


39/60

Well, as you can see, we managed to get our tagline out to the side, but it took the navigation menu with it.

think of it this way: a normal element (for example, a div, or an h1 header, or an image), even if its really small, invisibly occupies all the

o the side of it, like one big long horizontal bar.

his is why all the other elements stay beneath it, instead of cozying up beside. When you float an element, You take away all the extra sp

he side, and restrict it to only the space it directly takes up, allowing other elements to wrap around it.

Now that you know how floats work, how can we fix our present situation? First, we have to isolate the tagline into a float of its own, so

es outside the normal flow of the page:


1. #tagline {


40/60

2. float: left;

3. }

ake a peek in the browser, and look at that, we made it worse. Now the menu items are wrapping around our tagline! What we need he

o restore the normal flow of the document after the floated elements. There are a couple ways to do this, but were using the most straighorward method. Go back to your index.html file, and add in a new div beneath our floated divs. Instead of adding a class or id to this div

were going to give it a style (yes its an inline style, but only a teeny little one) clear: both.


1.

2.

3. Logo

4.

5.

6. And a little tagline, too.

7. 8.

9.

Resave your html file and check in your browser: you should see the tagline out beside the logo, with the menu below. Now all we have t

et that tagline into shape, and put it where it belongs. Lets start by copying the font styles over from Photoshop:


1. #tagline h3 {font-size: 30px; color: #e4dfdf; }

nd then add a bit of padding at the top and left:


1. #tagline {

2. float: left;


4. padding-left: 20px;

5. }

ake a look: now were getting somewhere!


41/60

Step 25 - Navigation Bar

ow we need to get our navigation menu in a straight line. First things first, though, were going to style the font so we can space things ou

ccordingly. When you style the font of a list of anchor tags, you need to specify not only that you are referring to list items, but to the anc

within them. Were specifying our specific unordered list, so that we can deal with the other ones separately. We also need to get rid of th

nderlines and the bullet points.


1. ul#menu {

2. list-style: none;

3. }

4.

5. ul#menu li a {

6. font-size: 30px;

7. color: #676666;

8. text-decoration: none;

9. }

Great, now, we need to find a way to get all our links in a row. How? More Floats! Were going to set the list-items to float left, so that

em sticks to the one beside it.


1. ul#menu li {

2. float: left;

3. }

f you look in your browser, youll notice the same problem we had before with floated items: other elements are wrapping around it. Just

efore, we can insert our clearing div right after the unordered list.


42/60


1.

2. Home

3. About4. Portfolio

5. Contact

6.

7.

8.

All our list items should be in a line now, we just have to space them out and move the menu down a bit. So first measure the distance fro

ottom of our logo to the top of the menu text, and we get about 55px.

he first item is about 30px left of our guide, so lets set the list item padding to 30px left.


1. ul#menu {



4. }

5.

6. ul#menu li {

7. float: left;


9. }

We still need to put more space between each item, if we measure the space in our psd, its about 105px, but since we already have 30padding between each, we only need to add 75px padding to the right of each item.


1. ul#menu li {

2. float: left;


4. padding-right: 75px;

5. }

And finally, admire our work:


43/60

erfect! Our menu is just like the psd. On to the content!

Step 26 - Content

Top area

he first thing were going to do here is set all the fonts, so we can see the spacing we have to work with. just plug in the font info from

hotoshop:


1. #content h2 {

2. font-size: 36px;

3. color: #015878;

4. }

5.

6. #content h3 {

7. font-size: 24px;

8. color: #444444;

9. }

10.

11. #content h4 {

12. font-size: 18px;

13. color: #373737;

14. font-weight: normal;

15. }

16.

17. #content p {



44/60

19. color: #595858;

20. }

21.

22. #content small {

23. font-size: 12px;24. color: #373737;

25. }

26.

27. #content a {

28. color: #0f6c8d;

29. font-weight: bold;


31. }

We get something like this:

At this point you may notice that we havent set a background color for the content area yet. This is because I forgot. So lets just do t

ow, shall we?


1. body {

2. font-family: Arial, Helvetica, sans-serif;

3. background: #ebe8e8;

4. }

Alright, now were ready to add some padding to space everything out.

rst, the distance from the bottom of the nav menu to the top of the h2 heading is about 25px:


1. #content h2 {

2. font-size: 36px;

3. color: #015878;


45/60


5. }

Next, the distance from the bottom of the h2 heading to the top of the h3 heading is also around 25px, so repeat basically the same code


1. #content h3 {

2. font-size: 24px;

3. color: #444444;


5. }

Now, the distance from the bottom of the h3 heading to the top of the first paragraph is about 45px, but if we set the padding-top to 40p

will also end up with 40px of padding between the two paragraphs. Since the paragraphs are only about 20px apart, we need to split the

adding into top and bottom: add 20px of padding to the bottom of the h3 heading, and 20px of padding to the top of the paragraph.


1. #content h3 {

2. font-size: 24px;

3. color: #444444;


5. padding-bottom: 20px;

6. }

7.

8. #content p {

9. font-size: 14px;

10. color: #595858;


12. }

Check out the results:


46/60

News section

he spacing is a little different in the news section, first of all, we need to push it down the page a bit. Theres also too much padding benehe h3 heading, so were going to remove a bit.

We also need to reduce the padding above the paragraphs, and add some padding between the two news items.


1. #news {


3. }

4.

5. #news h3 {


7. }8.

9. #news p {



12. }

Which looks like this:

here, now all we need to do is get the sidebar out to the side, and were done the main content.

Step 27 - Floating the Sidebar

rst, we need to set the width for the content section:



47/60

1. #content {

2. width: 510px;

3. }

Now, to get the sidebar out there, we will once again be using floats, setting both the content area and sidebar to float left.


1. #content {

2. width: 510px;

3. float: left;

4. }

5.

6. #sidebar {

7. float: left;

8. }

f you take a look in your browser, you will notice that our footer text has wrapped around the sidebar. We know how to deal with this

roblem by now: we just need to add our little clearing div to the markup:


1.

2. Contributors

3.

4. John Smith, freelance writer

5. Jack McCoy, designer

6. Lenny Briscoe, editor

7. John Smith, martketing

8.

9. Join Our Team

10.

11.

12.

13.

14.

15.

16.

Alright, next step is to just copy over the font styles from our psd for the sidebar:


1. #sidebar h3 {

2. font-size: 24px;

3. color: #044055;

4. font-weight: normal;

5. }

6.

7. #sidebar ul li a {

8. font-size: 14px;


48/60

9. color: #393838;

10. }

Remember that to style the font of the links in an unordered list, we need to refer to the anchor tag, rather than the list item itself.

Now, if we look over at our psd again, well notice that the text for the list items in the subscribe widget is slightly larger than in the restdebar. To fix this, we need to target the specific unordered list, so we need to add an id value to the subscribe ul in our markup:


1.




5.

hen we can refer to it in our css:


1. ul#subscribe li a {

2. font-size: 18px;

3. }

Now we need to style our sidebar: add padding, margins, backgrounds and borders. First lets get rid of the bullets:


1. #sidebar ul {


3. }

OK so its still way in the wrong spot, so lets fix that by adding margins to the top and left. When measuring in your psd, measure to whe

order of the sidebar begins.


49/60


1. #sidebar {

2. float: left;

3. margin-left: 55px;4. margin-top: 35px;

5. }

Now for the background: underneath the margin-top property, add the background and border properties:


1. background: #d4d6d3;

2. border: 1px solid #BEBDBD;

Next well add 15 px of padding on all sides:


1. padding: 15px;

And then add the padding to our text styles to space out our menu:


1. #sidebar h3 {

2. font-size: 24px;

3. color: #044055;

4. font-weight: normal;5. padding-bottom: 20px;


7. }

8.

9. #sidebar ul {



12. }

13.

14. #sidebar ul li a {


16. color: #393838;

17. }

18.

19. ul#subscribe li {


21. }

22.

23. ul#subscribe li a {


25. }
http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#


50/60

Our sidebar already looks almost perfect, we just need to add in the icons in the subscribe section, and style that join us anchor tag.

Okay, so lets get those icons working. Adding images to an unordered list can seem confusing, but if you take things step by step, it mak

erfect sense. But it is a bit tedious.

o start, were going to have to make some room for the icons. Were going to set them as background images, so if we use the padding

roperty to move our list items over a bit, the images wont be affected. The icons are about 26px wide, so well add some padding to th

f the list items:





4. }

Now we need a way to target each separate list item, so well add some ids in the markup:


1.




5.

Now we add background images to each list item:


1. li#rss {

2. background: url(images/rss_icon.png) no-repeat;

3. }

4.


51/60

5. li#email {

6. background: url(images/email_icon.png) no-repeat;

7. }

8.

9. li#twitter {10. background: url(images/twitter_icon.png) no-repeat;

11. }

At this point it occurred to me that perhaps 18px was a bit too big for the links here, so I reduced it to a less dramatic 16px, which allow

o add in a teeny bit more padding on the left without stretching the sidebar out.





4. }

Our spartan little sidebar is almost complete! Now to style our button:

We need to target the button, so lets add a class to the markup: (im using a class instead of an id this time, which is common practice, as

ould hypothetically add more buttons later)


1. Join Our Team

o lets just fix up the text style and add in our repeating background slice:


1. a.button {

2. color: #393838;


52/60


4. background: url(images/button_slice.jpg) repeat-x;

5. }

s you can see, our background image is there, but it only appears directly behind the text, we need to give it space to spread out. First, le

ive it a margin to get it into the centre of the sidebar:


1. margin-left: 30px;

nd some padding on each side so our button spreads out:


1. padding: 13px 23px;

his is a short-hand way to write the padding properties, and is entirely acceptable, and even encouraged, since it saves space. In this ca

pecifies 13px of padding on the top AND bottom, and 23px of padding on the left and right.


53/60

he button looks great, but oops! it moved to the right 23px, so lets reduce our margin a bit to compensate:


1. margin-left: 14px;

Now lets just give it some space underneath by adding padding to the entire sidebar div:


1. #sidebar {

2. float: left;3. margin-left: 55px;


5. background: #d4d6d3;

6. border: 1px solid #BEBDBD;

7. padding: 15px 15px 30px 15px;

8. }

eres that shorthand property again: it goes in this order: top, left, bottom, right. So here it says 15px on all sides except the bottom, whic

hould be 30px.

nally, we just need to add that 1px border to the button class:


54/60


1. border: 1px solid #c7c7c7;

And there we have it, one sidebar!

Step 28 - The Footer

ast but not least, our simple little footer. Well set the footer the same way as we set the header:Using a repeating slice within an div of unspecified width, and then adding the content inside a fixed-width, centred div.

his is where our .container div comes in handy, because we dont need to specify the 800px or margin:auto this time, because its alread

one.

ets start with the repeating slice:


1. #footer{

2. background: url(images/footer_slice.jpg) repeat-x;

3. }


55/60

s a start, but its really tiny. lets add some padding, and make the text white:


1. #footer{

2. background: url(images/footer_slice.jpg) repeat-x;


4. padding-bottom:60px;


6. color: #fff;

7. }

nd the whole thing:


56/60

Step 29 - Little Changes

n a browser, stuff looks a bit different than in Photoshop, so we might want to make some minor changes. For example, Id like a bit mo

adding above the main content and sidebar. Well add it to the bottom of the menu.


1. ul#menu {padding-bottom: 50px}

also decided that I wanted the menu to align to the left, so Im going to remove the padding-left. Now the items are closer together, bec

we had padding of 75px on the right and 30px on the left, for a total of 105. Now that weve taken away the left padding, we need to ad

he right to make up the difference:


1. ul#menu li {


57/60

2. float: left;


4. width: 95px;

5. }

And the grand finale:

o next wait? what? were done?

Were done!

Now just some housekeeping to worry about: Validation.

Step 30 - Validation

Now validation is a crucial step in website design, Im not going to go into the endless reasons here because this article does it for me. H
http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/#


58/60

ust going to walk through the process:

HTML ValidationGo to the w3.org Validation Service, select validate by file upload, and select your index.html file, and click check.

Next The moment of truth:

RED (Red is bad!)

Dont worry, its not so bad; lets review what went wrong:

ooks like I only have one error:

hey caught me using the same id tag twice, which could cause serious confusion. Since we have lots of styles defined for the ul with the i

subscribe, were just going to change the name of the div instead: lets call it feeds

Now we need to check that we havent defined any styles for #subscribe, and we havent!

o be safe, lets reload our page to make sure there were no unintentional changes.

ooks good! Now lets run the validation again:

uccess! Our page is now valid XHTML. You can even download an icon if you want to brag.

Note: I was pleasantly surprised to find only one error, if youre not so lucky, read the suggested info at w3 shcools, or check out this art

Glen Stansberry.

seems were done! Ah, but if only it were that easy. We still have to validate our CSS!

CSS ValidationHead over to The w3 CSS Validatorand go through the same process as with the html, only this time select your style.css file. Checking

Were Valid!

However, we did get a couple warnings. To stay within the good graces of the church, we should certainly pay attention to them:
http://jigsaw.w3.org/css-validator/http://net.tutsplus.com/articles/web-roundups/10-reasons-why-your-code-wont-validate-and-how-to-fix-it/http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/validator.w3.org


59/60

s just a few little problems: we should have declared widths for all our floated items. Again, these suggestions are optional, but its best

sten to constructive criticisms.

Cleaning Up: our tagline, menu unordered list items, and sidebar all need to have widths declared. We also want to do this without changi

ppearance of the page.

irst up, the tagline. We can just make a rough guess on this one, its about 400px wide.


1. #tagline {

2. float: left;



5. width: 400px;

6. }

And reload: no change, excellent. Next, the menu list items. this is a little trickier: Our page is 800px wide, so thats the maximum total wi

ll the list items together. If we divide by the four list items, and set the width to 200px, the items get mixed up and list vertically. This is be

we have padding on either side of each list items: 30px on the left and 75px on the right. Subtract that 105 from 200, and the remaining w

5px.


1. ul#menu li {

2. float: left;



5. width: 95px;

6. }

ame idea with the sidebar: lets first take a look at the width of the content area: 510px. The remainder in our 800px page is 290px, but

we need to subtract all the padding on the left and right: 290-30=260. Next subtract the left margin, and were left with 205px. One last

roblem: our 1px border, so lets subtract another 2px, and set the width of the sidebar to 203px. Check it again, no change.

xcellent, if we validate again, no errors, not even a warning!

Our webpage, as far as w3c standards are concerned, is perfect.

Conclusion

o there you have it, one very simple, well-coded website. Throughout this tutorial, my hope is that you picked up some valuable skills to

o your own designs, and are now ready to get started coding your own sites.


60/60

Follow us on Twitter, or subscribe to theNettuts+ RSS Feed for more daily web development tuts and articles.

ags: CSSdesignhtmlpsd to html

By Tessa Thorntonm a University of Toronto student, majoring in philosophy. I recently took up web design as a hobby and have learned a great deal in a

me, largely thanks to the resources of the online community. I'd like to share what I've learned and contribute to the knowledge base ava

o new learners. Check out My Website!

Note: Want to add some source code? Type before it and after it. Find out more

Like 325 people like this.
http://help.disqus.com/customer/portal/articles/665057http://www.codealamode.net/http://net.tutsplus.com/author/tessathornton/http://net.tutsplus.com/tag/psd-to-html/http://net.tutsplus.com/tag/html/http://net.tutsplus.com/tag/design/http://net.tutsplus.com/tag/css/http://feeds.feedburner.com/nettutshttp://www.twitter.com/nettuts

Documents

Design and Code Your First Website