Build a Website with HTML, CSS and Javascript

Danny Florian, KIT | Digital Marketing Agency

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
22 Lessons (2h 44m)
    • 1. Trailer

      1:03
    • 2. Tools

      6:54
    • 3. File structure

      3:46
    • 4. HTML Markup

      10:17
    • 5. Add the logo

      16:03
    • 6. Navigation Menu Part 1

      8:36
    • 7. Navigation part 2

      11:16
    • 8. Prepare your CSS files

      9:19
    • 9. Header part 1

      9:02
    • 10. Header part 2

      6:18
    • 11. Call to Action Section part 1

      9:32
    • 12. Call to Action part 2

      8:19
    • 13. Works Section

      7:23
    • 14. Testimonials Section

      7:39
    • 15. Map and Footer Section

      7:30
    • 16. Adding CSS3 transitions

      8:28
    • 17. Important CSS Properties

      7:59
    • 18. Important CSS Properties 2

      5:35
    • 19. Learn Simple jQuery

      4:29
    • 20. Learn Simple jQuery part 2

      6:29
    • 21. Learn Simple jQuery part 3

      2:47
    • 22. Upload to a server

      5:32
41 students are watching this class

Project Description

Build a 3-4 page website from scratch

Tools & File Structure

  1. 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 

  2. 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.

  3. 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.

  4. 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

  1. 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.

  2. 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".

    where-your-image-lives

    Note that

    does not need an ending tag.

  3. Share your progress

    Show off your well structured HTML markup. Don't be shy and help each other out by leaving feedback.

  4. 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.
  5. 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

  6. Prepare your CSS files

    Our CSS is getting long! Move your code in between the