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. 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. 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 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 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 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 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 When multiple web pages are linked together, the pages become collectively known as a website. The homepage 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 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 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 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.
Nick Pettit Nick is a teacher at Treehouse and an independent game developer. His Twitter handle is @nickrp.
About the School
Learn from over 1000 videos created by expert teachers on web design, coding, business, and much more. Our library is continually refreshed with the latest on web technology so you'll never fall behin ... Read More