Build a 3-4 page website from scratch

Tools & File Structure

Download a text editor
Download and install your choice of text editor from the list provided.

If you want to purchase a text editor at a later date download Sublime2 as they let you try before you buy.

Espresso
Coda2
Sublime2
Create a folder on your desktop
Create a folder on your desktop. In this video lesson I named my folder "Skillshare". This is where your website will live until you send the files to a server.
Create subfolders within the main folder
Now that you have created the folder on your desktop lets open it and create subfolders. In the class we are going to be working with the typical setup for simple websites.

Create a folder called "assets". Remember this is case sensitive so keep it all lowercase to make it easier when trying to remember what you named the folder.

Within this folder "assets" we just created we will create 3 more folders. Create a "css", "images" and "js" folder.
Download Photoshop and Images
Use the Photoshop file as a reference. You can use the images I extracted with the zip file I provided below.

If you want to work on a different Photoshop template, you can click on one of the resources below and download a template. You will obviously have to extract the images yourself if you choose this route.

PSD Templates

PSD Templates 2

PSD Templates 3

HTML Markup

HTML Markup
Using what you have learned in the video lesson, go ahead and create an index.html file within the root of the folder you created on your desktop.

Begin the file with the correct DOCTYPE.

For HTML5 use:

If you want to use HTML4 use:

Add your tags. Remember that tags do not require an ending tag.

Add the title of the page using the Enter Title

Title always shows on the browser tab and shows up on search engine results.

Add style sheet links:

Close the head tag with and finish adding the body tags then close the body and html tags at the end of your document.
Add the logo
Make sure you have the images saved within your "images" folder.

Begin be adding tags if you are using HTML5 or a tag for HTML4.

Within the add a and make sure to properly indent. Always close the tag right after you create it just in case you forget to close it! Give the div the class "container".

Within the container we nest another div that encloses the image and give it the class "logo".

Note that
does not need an ending tag.
Share your progress
Show off your well structured HTML markup. Don't be shy and help each other out by leaving feedback.
Add the menu
Style the "container" so that it never exeeds the width of 960px. Remember to make margin: auto; so that it is always centered on the page.

Nest a
- within your "container" after the logo div. UL stands for unordered list. Within the
  - we need to add list items using
  - . Add the names of all tha pages you plan on creating within your list.
Style the menu
In order to override the standard browser styling to
- elements add style-list, margin and padding to ul.
Target the menu class in your style and add the color: #fff; white. To target the list items in our menu class you can use:

.menu > li or .menu li in your styling then add display: inline-block; to make the list items line up.

When adding padding or margin you can specify which corner you want the padding or margin to go with padding-left, padding-right and so on. A shorter hand method is using:

padding: 0 10px 0 0; the values read from top to right to bottom to left, and in this example we are just adding padding to the right only and 0 padding on the other corners. DO NOT use px after a zero! Good rule to remember.

Add float:right; to the menu
Prepare your CSS files
Our CSS is getting long! Move your code in between the

Daniela Salgado

Founder at Cameo Mx

6

35