Course

How to Make a Website

If you’ve never built a website before and you have no coding or design experience, this is the place to start. In this project, we learn how to build a modern portfolio website for desktops, tablets, and mobile devices. We start with basic HTML and CSS syntax. Next, we learn how to build custom web pages with an image gallery and contact page. Finally, we walk through how to share a website live on the web.

How to Make a Website

10 Achievements

Beginning HTML and CSS

Beginning HTML and CSS

In this quick tutorial, we’ll check out an example of the final web project we’re aiming to build. Then, we’ll learn how to code our first HTML element, which will help form the structure of our website. Finally, we’ll finish up by styling our website with some simple CSS. These two languages, HTML and CSS, form the basic building blocks of any web project.

HTML First

HTML First

HTML is a special computer language that describes the structure of a document. With HTML, we can build web pages that contain text, images, and many other types of content. First, we’ll get started with a quick history lesson. Then we’ll dig into the latest advancements in HTML by creating a simple page structure.

Creating HTML Content

Creating HTML Content

When building websites, it's best to write as much of the HTML structure as possible before moving on to CSS. In practice, you'll move back and forth between HTML and CSS, but building most of the structure first will make it an easier process. First we will start by creating the navigation for our site. Then, we can move on to structuring the image gallery and other page content. Finally, we'll finish by including a CSS file into our HTML page.

CSS: Cascading Style Sheets

CSS: Cascading Style Sheets

CSS is a language that allows us to make designs that are well organized and beautiful. While HTML describes the structure of information, CSS describes how that information should be visually presented. Before we start coding the CSS for our site, we will spend some time learning about the syntax of CSS.

Customizing Colors and Fonts

Customizing Colors and Fonts

Colors in CSS require a special coded format called hexadecimal. We will first learn about hexadecimal numbers and then we can use them in our color values. Then, we’ll learn how to find licensed fonts as well as how to include fonts in a webpage.

Styling Web Pages and Navigation

Styling Web Pages and Navigation

The techniques necessary for styling an image gallery as well as horizontal navigation are actually quite similar. First, we will learn how to style a group of images and convert them into rows and columns for our image gallery. Then, we will use a similar CSS technique to create horizontal navigation from an unordered list.

Adding Pages to a Website

Adding Pages to a Website

When multiple web pages are linked together, the pages become collectively known as a website. The home page will serve as the template for both our contact page and about page. In both pages, we will learn some new CSS techniques.

Responsive Web Design and Testing

Responsive Web Design and Testing

Modern websites are built with mobile and desktop users in mind. By building our site with fluid percentages (instead of fixed pixels), we’re off to a good start. However, we can add special CSS rules called media queries to further enhance the experience. After adding responsive design, we will test the site on a few devices.

Sharing a Website

Sharing a Website

We're finished coding our website and now it's time to deploy it live to the web so that other people can see it. First, we will purchase our domain and hosting. Then, we will use the File Transfer Protocol (FTP) to put our files onto our server.

Debugging HTML and CSS Problems

Debugging HTML and CSS Problems

When creating websites, problem solving skills are essential. First, we will learn how to access the developer tools to find problems with our code. Then, we will walk through some common HTML and CSS issues and how to fix them quickly.

What you'll learn

  • How to write basic HTML
  • How to style web pages with CSS
  • How to purchase a domain and hosting
  • How to upload files

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
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">