Course

Build a Simple Website

Smells Like Bakin' is a cupcake company in need of a website. This project will walk us through the basics of HTML and CSS from the very beginning. HTML and CSS are the structural and presentational building blocks of every website and will serve as the foundation for any web project.

Cover html bakin1

5 Achievements

Website Basics

Website Basics

In this first stage, we'll learn about HTML and CSS, which are the building blocks of every website.

Hide 7 Steps
Text Editors and HTML

Text Editors and HTML

One of the primary tools that web designers and developers use all the time is called a text editor. We'll use a text editor to write our HTML code, which will describe the structure of our content.

Show 8 Steps
Creating a Website Structure

Creating a Website Structure

HTML describes the structure of content on a web page, but it's also important to define visual structure. Using a CSS grid system, we'll rearrange page elements into an aesthetically pleasing layout.

  • 4:26

    CSS Reset
  • 1 objective

    CSS Reset
  • 3:15

    Adding Grid CSS
  • 10:58

    Working with Grids
  • 2 objectives

    Using Classes
  • Extra Credit

    CSS Grids and Frameworks

    We used a very basic pre-built CSS grid, but there are lots of options to choose from beyond our example. It's very common for web designers and developers to start with prebuilt code.

    Here are some projects and frameworks created by various individuals and companies in the web community that can help you get started on your next website:

    • HTML5 Boilerplate - HTML5 Boilerplate is a simple HTML template that gets the mundane setup out of the way.
    • Bootstrap - Bootstrap is a robust framework that includes a responsive CSS grid system, JavaScript plugins, and more.
    • Foundation - Zurb Foundation is similar to Bootstrap in that it provides a responsive CSS grid system. It also includes many other features and can help you prototype and build websites quickly.

    There are tons of free and open source front-end frameworks available to try; too many to include in a single list. Similar to text editors, personal preference and the project come into play. Try searching the web for more and see which ones work best for you and the project.

Show 5 Steps
Styling Content

Styling Content

Grid CSS can help layout webpages visually, but to add more customizations like fonts and background colors, we will need to write our own CSS code. CSS also allows for borders, margin, padding, and much more.

  • 12:05

    Fonts and Colors
  • 4 objectives

    Fonts and Colors
  • 10:20

    Writing CSS
  • 2 objectives

    Writing CSS
  • 9:16

    Finishing the CSS
  • 4 objectives

    Finishing the CSS
  • Extra Credit

    Margin and Padding

    Margin and padding are two concepts in CSS that are very easy to confuse. Try experimenting with both of these by adding them to some of the elements in our example website. First try adding margin, then add padding, and then add both together. Play with the values until you feel like you understand the difference.

    For a deeper understanding of margin and padding, be sure to read the W3C documentation that covers the "box model."

    Hexadecimal Colors

    Grasping hexadecimal values can be tricky. In this stage, we typed out some hex values and then tried guessing the color. Check out this hex guessing game where you have to do the opposite; guess the color of a given hex value.

    Practicing using both of these methods will allow you to use hex colors easily.

Show 6 Steps
Launching the Website

Launching the Website

Now that we're finished coding our website, it's time to deploy it live to the web. This involves several steps, including purchasing a domain and hosting. Then, we'll use the File Transfer Protocol (FTP) to put our files onto our server.

Show 6 Steps

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.

Download videos

You have to sign up for Treehouse in order to download course videos.

Sign up