Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Build Websites from Scratch with HTML & CSS

Learn Web Development Essentials and Become a Web Developer From Scratch in this Complete HTML & CSS Beginner's Course

Created byBrad Hussey, Code College

Last updated 3/2023

English

What you'll learn

By the end of this course, you will have a basic & thorough understanding of HTML & CSS
Upon completion, you will have coded a handful of useful HTML & CSS examples
In the last section of this course, you focus on building a beautiful, semantic, HTML & CSS web page
By the end of this course, you will have impressed yourself, and will be able to hit the ground running with your newly acquired skillset
Start building beautiful websites by hand
Build a portfolio website, so you can highlight your best web work
Get the ball rolling for a career in web design
Begin your career as a web developer

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

10 sections • 81 lectures • 8h 38m total length

Welcome & What We're Learning1:15
Welcome to Build a Website from Scratch with HTML & CSS! This very first lecture briefs you on the style in which we will be learning how to code HTML & CSS from scratch.
What is HTML & CSS?5:34
In this lesson, you'll learn an overview of HTML & CSS and why they are important.
HTML Tags, Attributes & Elements7:00
In this lecture, we learn about HTML Tags, Attributes & Elements.
Best Practices for Naming Files & Folders3:01
If you're designing a website, it's important to have the right file names for all your images and other media. In this video I share some best practices for naming files and folders in web design.
File & Folder Naming Conventions7:00
In this lecture, we learn about the typical file & folder naming conventions in most websites.
How to Organize Your Website Files & Folders4:24
In this video, we will show you the best practices for organizing your website files and folders.
We'll start by discussing some general tips for organizing your files and folders, then we'll take a look at some specific examples of how to organize your website's files. Finally, we'll provide a few tips on how to keep your website's files organized over time.
Typical Website File & Folder Structure17:00
In this lecture, we learn about the basic file & folder structure of a simple website.
Pro Tip: Keep Your Production Files!3:43
In this video I show why it's important to keep your production files in web design and how they can be used.
Managing Your Production Files4:00
In this lecture, we learn how to keep our production files neat & tidy using best practises of professional web designers.
Modern Tools for the Modern Web Developer6:01
Looking for the best web design tools? Look no further! In this video, we recommend some of our favorite tools and give you a quick overview of how each one works.
Tools of the Trade4:00
In this lecture, we learn about the right tools to use in your web design journey.

Please note:

In the external resources section of this lecture, I provide a number of links where you can download / purchase software to enhance your learning experience with me. Some of these links are my "affiliate" links, and should you decide to purchase software using these links, I will receive a small commission at no extra cost to you. Think of it as a free tip :)
HTML Quiz

Starting Your First Web Page1:13
In this lecture, we learn how to start building our very first web page! Amazing!
The Doctype1:30
What's a Doctype? In this lecture we learn what the heck a Doctype is, and why you need one :)
The Basic Structure of an HTML Document3:07
In this lecture, we learn how to hand code the basic structure of an HTML document.
Page Title2:34
In this lecture, we learn about how to add a Page Title to our web page with HTML.
Headings3:40
In this lecture, we learn how to code HTML headings 1 through 6. It's awesome.
Paragraphs2:23
In this lecture, we learn how to code HTML paragraphs.
Emphasis & Strong Emphasis2:47
In this lecture, we learn how to emphasize text using HTML emphasis and strong emphasis.
HTML Parent/Child Structure1:45
In this lecture, we learn about the HTML Parent/Child relationship and how HTML tags and elements are related. Kind of like a family tree.
Get Your Hands Dirty!6:33
In this lecture, we get our hands dirty and put everything we've learned from this section into practise by building a mini-website.
HTML Foundations Coding Excercise
HTML Foundations Quiz I

Hyperlinks4:28
In this lecture, we learn how to add links to web pages.
Lists4:05
In this lecture, we learn about the three types of HTML lists:

Unordered lists

Ordered lists

Description lists
Images10:27
In this lecture, we learn how to add images to our website!
Address2:39
In this lecture, we learn about the HTML5 address tag.
Get Your Hands Dirty!6:00
In this lecture, we get our hands dirty and build a mini-website using the skills we've learned so far in this section.
HTML Coding Excercise II
HTML Foundations Quiz II

Tables4:45
In this lecture, we learn about good ol' HTML tables.
Forms13:34
In this lecture, we learn how to code a form in HTML.
HTML Special Characters3:00
In this lecture, we learn about HTML Special Characters.
Get Your Hands Dirty!6:59
In this lecture, we get our hands dirty and put everything we've learned in this section to practise by building a mini-website.
HTML Tables Excercise
HTML Foundations Quiz III

IDs & Classes4:50
In this lecture, we learn about HTML IDs and Classes.
Span & Div5:54
In this lecture, we learn about the Span and Div tags.
Header & Footer1:46
In this lecture, we learn about the HTML5 header and footer tags.
Nav, Section & Article6:09
In this lecture, we learn about the HTML5 nav, section & article tags, and how to use them properly.
Aside2:52
In this lecture, we learn about the HTML5 Aside Tag.
Time3:20
In this lecture, we learn about the HTML5 Time Tag.
Abbreviations & Quotes4:02
In this lecture, we learn about the HTML Abbreviation, Quote, and Blockquote tags.
Get Your Hands Dirty!10:59
In this lecture, we get our hands dirty and build a mini-website using the skills we've learned in this section of the course.
HTML Foundations Quiz IV
HTML Foundations Exercise IV

The Style Rule3:00
In this lecture, we learn what a CSS Style Rule is.
Inline styles2:21
In this lecture, we learn about one of the three ways of adding CSS to your website: Inline CSS.
Internal styles4:20
In this lecture, we learn about one of the three ways of adding CSS to your website: Internal CSS.
External styles9:45
In this lecture, we learn about the best way to add CSS to your website: External CSS.
CSS Selectors, Properties & Values3:00
In this lecture, we learn about CSS selectors, properties & values.
Inheritance of Styles3:00
In this lecture, we learn a little about the inheritance of styles in CSS.
Pixels, Percentages, Points & Ems!2:00
This is a short lecture about the most common measurements used in CSS.
Get Your Hands Dirty!11:46
In this lecture, we get our hands dirty and build a mini-website that contains everything we've learned in this section.
CSS Foundations Quiz I

ID Selectors5:46
In this lecture, we are introduced to the ID Selector in CSS.
Class Selectors6:07
In this lecture, we are introduced to the CSS Class Selectors and how we can use them to code CSS like a Ninja!
Descendant Selectors7:25
In this lecture, we take CSS a step further with Descendant Selectors.
Grouping Selectors7:18
In this lecture, we learn how to group selectors together in CSS for even more efficient coding!
Get Your Hands Dirty!13:59
In this lecture, we get our hands dirty and build a mini-website with the skills we've learned so far in this section.
Get Your Hands Dirty — Minor Update2:18
This is an update to the previous Get Your Hands Dirty lecture.
CSS Foundations Quiz II

The Box Model16:00
In this lecture, we learn about the CSS Box Model.
Colours (or Colors)3:24
In this lecture, we are introduced to CSS colours.
Text Styling & Formatting13:20
In this lecture, we learn about text-specific styles in CSS.
Sexy Typography6:00
In this lecture, we learn how to make our typography "sexy" with a couple simple CSS styles.
Borders10:54
In this lecture, we learn about CSS Borders.
Background Images9:13
In this lecture, we learn about CSS Background Images.
Styling Forms18:31
In this lecture, we learn how to make a plain ol' HTML form beautiful with CSS!
Get Your Hands Dirty!19:12
In this lecture, we build a beautiful mini-website with everything we've learned so far in this section.
CSS Foundations Quiz III

Styling Links9:08
In this lecture, we learn how to style Hyperlinks.
Block & Inline Elements5:00
In this lecture, we learn the difference between block & inline elements.
Float & Clear18:55
In this lesson, you'll learn all about CSS Floats and how to use them to create layouts.
CSS Positioning8:07
In this lecture, we learn about relative and absolute positioning.
CSS Specificity11:00
In this lecture, we learn about CSS specificity.
Get Your Hands Dirty! (Part1)18:55
In this lecture, we build a beautiful mini-website with the skills we've learned so far!
Get Your Hands Dirty! (Part 2)16:58
This is part 2 of the previous lecture.
CSS Foundations Quiz IV

Final Website Walk Through1:54
In this lecture, we walk through the final web page we will be building.
About the Course Files2:58
In this lecture, we learn about the course files provided as a download to aid in your learning experience.

To Download the Course Files:

Click the link provided in the resources section.
HTML: Coding the Header & Hero8:21
In this lecture, we code the HTML for the Header & Hero sections.
HTML: Coding the General Content3:05
In this lecture, we code the HTML for the General Content section of our final website.
HTML: Coding the News & Events5:41
In this lecture, we code the HTML for the News & Events section of our final website.
HTML: Coding the Footer2:22
In this lecture, we code the HTML for the footer of our website.
CSS: Adding Normalize.css1:54
In this lecture, we learn how to add Normalize.css to our website.
CSS: General Styles & Typography14:29
In this lecture, we use CSS to clean up the look of our website.
CSS: Styling the Header6:07
In this lecture, we use CSS to style the header of our website.
CSS: Styling the Hero3:36
In this lecture, we style the Hero section of our website with CSS.
CSS: Styling the General Content2:41
In this lecture, we style the General Content section of our website with CSS.
CSS: Styling the News & Events5:54
In this lecture, we style the News & Events section of our website with CSS.
CSS: Styling the Footer5:59
In this lecture, we style the footer of our website using CSS.
The Finished Product & Conclusion1:15
In this lecture, we view the final website and conclude with some words of wisdom :)
Bonus Lesson: Where Do I Go From Here?1:13
Now that we've finished the course, what's next?

Requirements

Internet Connection
Willingness to Learn
A Text Editor (Free Resources Provided)

Description

Do you want to learn how to build websites from scratch?

With this online course—from one of Udemy's top web design instructors, Brad Hussey—you will learn HTML & CSS by building beautiful, modern and responsive websites! You will have a strong foundation in web development that will enable you to start creating any website you can imagine.

By the end of this course, you will be competent in HTML & CSS and be able to create your own professional-grade website from scratch – no prior experience required! You will also have the skillset necessary to continue learning about web development and advancing your career.

- - -

What is HTML & CSS?

HTML and CSS are the two most important languages for a new web developer to learn. They are also the easiest. If you’ve always wanted to build webpages, but were intimidated by the code, this course will help you learn your first two languages quickly and easily.

Taking a step-by-step approach, this course will have you learning by doing, building several mini-websites from scratch.

Learn the Two Most Important Languages to Web Design Quickly and Easily.

HTML Foundations
Parent/Child Structure
CSS Foundations
ID Selectors
Coding and Styling
What Web Pages are Built Of

Every webpage that you see on the internet is built using code. There are many different programming languages that can make your website do various things, but the two most important to learn are HTML and CSS. In fact, even people who plan on allowing someone else to build their website should have a basic grasp of both languages. This way you can tweak things behind the scenes, or change some of your formatting without having to always rely on others.

Contents and Overview

This course of more than 77 lectures and 8 hours of content gives you a basic, yet thorough understanding of both HTML and CSS. The course focuses on having you begin writing code right away so you can learn through doing, and build your own completely functional HTML and CSS webpage at the end.

You’ll begin by learning what HTML and CSS are, so you can get an understanding of what it is that they do. During the course you’ll build several mini-websites that take what it is that you’ve learned and apply it to real world exercises to help cement the skills.

Everyone from aspiring web designers to bloggers, programmers to business owners, company employees and tech hobbyists can benefit from learning some HTML and CSS! Learn to build your own dynamic and beautiful websites or manage the website that you already have.

If you plan on becoming a web programmer or a web designer yourself, HTML and CSS are the first two languages you’ll need to succeed. In fact HTML is required for anyone that wants to get into web development from any angle. Learning it simultaneously with CSS allows you to hit the ground running with page design.

Who this course is for:

Total Beginners
Web Design Students
Web Design Beginners
Computer Programmers
Bloggers
Aspiring Web Designers
People who desire a new career path

Build Websites from Scratch with HTML & CSS

What you'll learn

Explore related topics

Coding Exercises

Course content

Getting Started11 lectures • 1hr 3min

HTML Foundations: Part I9 lectures • 26min

HTML Foundations: Part II5 lectures • 28min

HTML Foundations: Part III4 lectures • 28min

HTML Foundations: Part IV8 lectures • 40min

CSS Foundations: Part I8 lectures • 39min

CSS Foundations: Part II6 lectures • 43min

CSS Foundations: Part III8 lectures • 1hr 37min

CSS Foundations: Part IV7 lectures • 1hr 28min

Putting It All Together15 lectures • 1hr 7min

Requirements

Description

Who this course is for: