How to Make a Website

About this Course

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.

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

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.

• Introduction to HTML and the Portfolio Project
• Write an HTML Element2 objectives
• Follow Along with Workspaces
• Add Style to the Page
• Write a CSS Selector and Property
• Review: Beginning HTML and CSS

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.

• What is HTML?
• HTML History Lesson
• Draw Wireframes
• Build Structure
• Create the Content Containers
• Use HTML Elements
• Review: HTML First

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.

• Use the Navigation Element7:08
• Create Navigation with Lists3 objectives
• Structure the Image Gallery7:33
• Add Image Gallery Content6:49
• Organize with Unordered Lists2 objectives
• Build the Footer8:26
• Add Social Media Links2 objectives
• Include External CSS6:55
• Review: Creating HTML Content5 questions

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.

• What is CSS?11:32
• CSS Facts5 questions
• Use ID Selectors7:44
• Center the Wrapper6:03
• Take a Mobile-First Approach5:04
• Style the Basic Elements3 objectives
• Review: CSS: Cascading Style Sheets5 questions

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.

• Use Color in CSS10:36
• Use Classes in CSS5:40
• Write Hexadecimal Colors4 objectives
• Organize CSS with Comments8:09
• Pick Fonts and Set Relative Units7:41
• Resize Text6:33
• Add Fonts3 objectives
• Review: Customizing Colors and Fonts5 questions

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.

• Style the Portfolio9:10
• Style the Image Captions4:05
• Make a CSS Image Gallery4 objectives
• Build Navigation with Unordered Lists5:41
• Polish the Navigation and Footer5:01
• Create a Horizontal List of Links4 objectives
• Review: Styling Web Pages and Navigation5 questions

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.

• Add a New Page8:11
• Style New Pages5:08
• Make an About Page5 objectives
• Build the Contact Page10:18
• Add Iconography10:58
• Add and Style Icons5 objectives
• Review: Adding Pages to a Website5 questions

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.

• Responsive Web Design5:09
• Review: Responsive Web Design5 questions
• Adding Breakpoints for Devices7:50
• Write CSS Media Queries2 objectives
• Build a Three Column Layout11:16
• Adjust the Profile Page and Header9:52
• Refactor the Layout2 objectives
• Website Testing12:18
• Review: Website Testing5 questions

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.

• Find a Domain6:05
• Pick a Web Host8:03
• Upload the Website9:36
• Review: Sharing a Website5 questions

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.

• Use Developer Tools9:12
• How to Fix Problems with Code8:54
• Continue Learning6:24
• Review: Debugging HTML and CSS Problems5 questions