Build a Website from Scratch with HTML & CSS

Go from "Zero to Hero" and Learn Web Designing Essentials in this HTML & CSS Tutorial for Complete Beginners
218 reviews
TAUGHT BY
  • Brad Hussey Pro Web Slinger at Code College

    A highly skilled professional, Brad Hussey is a passionate and experienced web designer, developer, blogger and digital entrepreneur. Hailing from North Of The Wall (Yellowknife, Canada), Brad made the trek to the Wet Coast (Vancouver, Canada) to educate and equip himself with the necessary skills to become a spearhead in his trade of solving problems on the web, crafting design solutions, and speaking in code.

    Brad's determination and love for what he does has landed him in some pretty interesting places with some neat people. He's had the privilege of working with, and providing solutions for, numerous businesses, big & small, across the Americas.

    Brad builds custom websites, and provides design solutions for a wide-array of clientele at his company, Brightside Studios. He regularly blogs about passive income, living your life to the fullest, and provides premium quality web design tutorials and courses for tens of thousands of amazing people desiring to master the craft.

    61,000 Students Don't Lie

    Join Brad and adventure into his world of web design, web development, and speaking in code. You won't regret it!

    What are people saying about Brad?

    "...Brad is amazing and I honestly think he's the best tutor of all the courses I have taken on Udemy. Will definitely be following him in the future. Thanks Brad!" — Brad's student

    "...Brad has an infectious enthusiasm, a great eye for detail, and expert-level knowledge of the material." — Brad's student

    "...These videos are well created, concise, fast-paced, easy to follow, and just funny enough to keep you chuckling as you're slamming out lines of code. I've taken 3 courses from this instructor. Whenever I have questions he is right there with a simple solution or a helpful suggestion to keep me going forward with the course work." — Brad's student

WHAT'S INSIDE
  • Lifetime access to 77 lectures and 9 quizzes
  • 8+ hours of high quality content
  • Closed captioning enabled
  • A community of 35700+ students learning together!
  • 320+ discussions
SHARE

Build a Website from Scratch with HTML & CSS

Go from "Zero to Hero" and Learn Web Designing Essentials in this HTML & CSS Tutorial for Complete Beginners
218 reviews

HOW UDEMY WORKS?

Discover courses made by experts from around the world.

Take your courses with you and learn anytime, anywhere.

Learn and practice real-world skills and achieve your goals.

COURSE DESCRIPTION

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 net is built using a language or 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 can benefit from learning some HTML and CSS. Learn to begin building your own dynamic webpages or manage the page 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.

    • Internet Connection
    • Willingness to Learn
    • A Text Editor (Free Resources Provided)
    • Over 77 lectures and 8 hours of content!
    • 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
    • Build a portfolio website, so you can highlight your best web work
    • Get the ball rolling for a career in web design
    • Total Beginners
    • Web Design Students
    • Web Design Beginners
    • Computer Programmers
    • Bloggers
    • Aspiring Web Designers
    • People who desire a new career path

THE UDEMY GUARANTEE

30 day money back guarantee
Lifetime access
Available on Desktop, iOs and Android
Certificate of completion

CURRICULUM

  • SECTION 1:
    Getting Started
  • 1
    Welcome & What We're Learning
    01: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.

  • 2
    What is HTML & CSS?
    3 slides

    In this lecture, we learn the purposes for HTML and CSS, and the difference between them.

  • 3
    HTML Tags, Attributes & Elements
    7 slides

    In this lecture, we learn about HTML Tags, Attributes & Elements.

  • 4
    File & Folder Naming Conventions
    7 slides

    In this lecture, we learn about the typical file & folder naming conventions in most websites.

  • 5
    Typical Website File & Folder Structure
    17 slides

    In this lecture, we learn about the basic file & folder structure of a simple website.

  • 6
    Managing Your Production Files
    4 slides

    In this lecture, we learn how to keep our production files neat & tidy using best practises of professional web designers.

  • 7
    Tools of the Trade
    4 slides

    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 :)

  • 8
    HTML Quiz
    9 questions
  • SECTION 2:
    HTML Foundations: Part I
  • 9
    Starting Your First Web Page
    01:13

    In this lecture, we learn how to start building our very first web page! Amazing!

  • 10
    The Doctype
    01:30

    What's a Doctype? In this lecture we learn what the heck a Doctype is, and why you need one :)

  • 11
    The Basic Structure of an HTML Document
    03:07

    In this lecture, we learn how to hand code the basic structure of an HTML document.

  • 12
    Page Title
    02:34

    In this lecture, we learn about how to add a Page Title to our web page with HTML.

  • 13
    Headings
    03:40

    In this lecture, we learn how to code HTML headings 1 through 6. It's awesome.

  • 14
    Paragraphs
    02:23

    In this lecture, we learn how to code HTML paragraphs.

  • 15
    Emphasis & Strong Emphasis
    02:47

    In this lecture, we learn how to emphasize text using HTML emphasis and strong emphasis.

  • 16
    HTML Parent/Child Structure
    01: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.

  • 17
    Get Your Hands Dirty!
    06: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.

  • 18
    HTML Foundations Quiz I
    4 questions
  • SECTION 3:
    HTML Foundations: Part II
  • 19
    Hyperlinks
    04:28

    In this lecture, we learn how to add links to web pages.

  • 20
    Lists
    04:05

    In this lecture, we learn about the three types of HTML lists:

    1. Unordered lists
    2. Ordered lists
    3. Description lists
  • 21
    Images
    10:27

    In this lecture, we learn how to add images to our website!

  • 22
    Address
    02:39

    In this lecture, we learn about the HTML5 address tag.

  • 23
    Get Your Hands Dirty!
    06: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.

  • 24
    HTML Foundations Quiz II
    5 questions
  • SECTION 4:
    HTML Foundations: Part III
  • 25
    Tables
    04:45

    In this lecture, we learn about good ol' HTML tables.

  • 26
    Forms
    13:34

    In this lecture, we learn how to code a form in HTML.

  • 27
    HTML Special Characters
    3 slides

    In this lecture, we learn about HTML Special Characters.

  • 28
    Get Your Hands Dirty!
    06: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.

  • 29
    HTML Foundations Quiz III
    4 questions
  • SECTION 5:
    HTML Foundations: Part IV
  • 30
    IDs & Classes
    04:50

    In this lecture, we learn about HTML IDs and Classes.

  • 31
    Span & Div
    05:54

    In this lecture, we learn about the Span and Div tags.

  • 32
    Header & Footer
    01:46

    In this lecture, we learn about the HTML5 header and footer tags.

  • 33
    Nav, Section & Article
    06:09

    In this lecture, we learn about the HTML5 nav, section & article tags, and how to use them properly.

  • 34
    Aside
    02:52

    In this lecture, we learn about the HTML5 Aside Tag.

  • 35
    Time
    03:20

    In this lecture, we learn about the HTML5 Time Tag.

  • 36
    Abbreviations & Quotes
    04:02

    In this lecture, we learn about the HTML Abbreviation, Quote, and Blockquote tags.

  • 37
    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.

  • 38
    HTML Foundations Quiz IV
    10 questions
  • SECTION 6:
    CSS Foundations: Part I
  • 39
    The Style Rule
    3 slides

    In this lecture, we learn what a CSS Style Rule is.

  • 40
    Inline styles
    02:21

    In this lecture, we learn about one of the three ways of adding CSS to your website: Inline CSS.

  • 41
    Internal styles
    04:20

    In this lecture, we learn about one of the three ways of adding CSS to your website: Internal CSS.

  • 42
    External styles
    09:45

    In this lecture, we learn about the best way to add CSS to your website: External CSS.

  • 43
    CSS Selectors, Properties & Values
    3 slides

    In this lecture, we learn about CSS selectors, properties & values.

  • 44
    Inheritance of Styles
    3 slides

    In this lecture, we learn a little about the inheritance of styles in CSS.

  • 45
    Pixels, Percentages, Points & Ems!
    2 slides

    This is a short lecture about the most common measurements used in CSS.

  • 46
    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.

  • 47
    CSS Foundations Quiz I
    10 questions
  • SECTION 7:
    CSS Foundations: Part II
  • 48
    ID Selectors
    05:46

    In this lecture, we are introduced to the ID Selector in CSS.

  • 49
    Class Selectors
    06:07

    In this lecture, we are introduced to the CSS Class Selectors and how we can use them to code CSS like a Ninja!

  • 50
    Descendant Selectors
    07:25

    In this lecture, we take CSS a step further with Descendant Selectors.

  • 51
    Grouping Selectors
    07:18

    In this lecture, we learn how to group selectors together in CSS for even more efficient coding!

  • 52
    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.

  • 53
    Get Your Hands Dirty — Minor Update
    02:18

    This is an update to the previous Get Your Hands Dirty lecture.

  • 54
    CSS Foundations Quiz II
    4 questions
  • SECTION 8:
    CSS Foundations: Part III
  • 55
    The Box Model
    16 slides

    In this lecture, we learn about the CSS Box Model.

  • 56
    Colours (or Colors)
    03:24

    In this lecture, we are introduced to CSS colours.

  • 57
    Text Styling & Formatting
    13:20

    In this lecture, we learn about text-specific styles in CSS.

  • 58
    Sexy Typography
    6 slides

    In this lecture, we learn how to make our typography "sexy" with a couple simple CSS styles.

  • 59
    Borders
    10:54

    In this lecture, we learn about CSS Borders.

  • 60
    Background Images
    09:13

    In this lecture, we learn about CSS Background Images.

  • 61
    Styling Forms
    18:31

    In this lecture, we learn how to make a plain ol' HTML form beautiful with CSS!

  • 62
    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.

  • 63
    CSS Foundations Quiz III
    12 questions
  • SECTION 9:
    CSS Foundations: Part IV
  • 64
    Styling Links
    09:08

    In this lecture, we learn how to style Hyperlinks.

  • 65
    Block & Inline Elements
    5 slides

    In this lecture, we learn the difference between block & inline elements.

  • 66
    Float & Clear
    01:21

    In this lecture, we provide you with a simple resource to wrap your head around the concept of CSS Floats.

  • 67
    CSS Positioning
    08:07

    In this lecture, we learn about relative and absolute positioning.

  • 68
    CSS Specificity
    11 slides

    In this lecture, we learn about CSS specificity.

  • 69
    Get Your Hands Dirty! (Part1)
    18:55

    In this lecture, we build a beautiful mini-website with the skills we've learned so far!

  • 70
    Get Your Hands Dirty! (Part 2)
    16:58

    This is part 2 of the previous lecture.

  • 71
    CSS Foundations Quiz IV
    6 questions
  • SECTION 10:
    Putting It All Together
  • 72
    Final Website Walk Through
    01:54

    In this lecture, we walk through the final web page we will be building.

  • 73
    About the Course Files
    02: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.

  • 74
    HTML: Coding the Header & Hero
    08:21

    In this lecture, we code the HTML for the Header & Hero sections.

  • 75
    HTML: Coding the General Content
    03:05

    In this lecture, we code the HTML for the General Content section of our final website.

  • 76
    HTML: Coding the News & Events
    05:41

    In this lecture, we code the HTML for the News & Events section of our final website.

  • 77
    HTML: Coding the Footer
    02:22

    In this lecture, we code the HTML for the footer of our website.

  • 78
    CSS: Adding Normalize.css
    01:54

    In this lecture, we learn how to add Normalize.css to our website.

  • 79
    CSS: General Styles & Typography
    14:29

    In this lecture, we use CSS to clean up the look of our website.

  • 80
    CSS: Styling the Header
    06:07

    In this lecture, we use CSS to style the header of our website.

  • 81
    CSS: Styling the Hero
    03:36

    In this lecture, we style the Hero section of our website with CSS.

  • 82
    CSS: Styling the General Content
    02:41

    In this lecture, we style the General Content section of our website with CSS.

  • 83
    CSS: Styling the News & Events
    05:54

    In this lecture, we style the News & Events section of our website with CSS.

  • 84
    CSS: Styling the Footer
    05:59

    In this lecture, we style the footer of our website using CSS.

  • 85
    The Finished Product & Conclusion
    01:15

    In this lecture, we view the final website and conclude with some words of wisdom :)

  • 86
    Where To Go From Here & Bonus Resources
    03:19

    In this lecture, we learn what steps to take next in our new web design journey!

UDEMY BY THE NUMBERS

5,200,000
Hours of video content
19,000,000
Course Enrollments
5,800,000
Students

RATING

  • 183
  • 31
  • 1
  • 0
  • 3
AVERAGE RATING
NUMBER OF RATINGS
218

REVIEWS

  • Jay
    Like a library of practical information...

    I'm glad this lesson is at my finger tips whenever I choose to go back to it... an abundance of useful tips that really work!

  • Bailey King
    Overall good

    It was a little slow paced at time and it seemed that each chapter could have been 2-3 videos if it were a bit more concise, but overall it's a good beginner tool.

  • Pj
    Fantastic course for beginners and a great refresher for the rest!

    What I liked about the course is Brad's teaching style and skills. He is just an awesome teacher. I wish I had found this course much much earlier. Nevertheless, barring a few glitches on quizzes no major complaints. The Audio and Video are of high quality and I wish many Udemy courses followed the same standard. I am going to revisit the videos many more times in the coming years. I Cannot recommend enough for learners. Thanks Brad!

  • Mattie
    Great Course! Could use a slightly faster pace.

    Full disclosure: I am well above the skill level of this class, but am taking many to brush up on basics and learn how to better explain things to others. I found this to be a great course to get the very basics of HTML & CSS. My only complaint would be the pacing in the beginning. The first unit could be condensed into a single lesson and consolidated into the following lesson as an Vocab intro rather than being it's own lesson of soundless slides.

  • David Wakeman
    Great Course for Beginners

    Brad has put together an easy to follow html course that will help you understand html & CSS within a couple of days. The one thing I like most is how responsive Brad. I sent him a few questions while I was taking the course and I got a response back the same day. That is unheard of. If you are looking to learn html & CSS or brush up on your skills, this is the course and Brad is the person you want to have teaching you. Many thanks Brad for a great course and the awesome support. I am taking more of your courses and look forward to growing my knowledge and putting it into action. David

  • 30 day money back guarantee!
  • Lifetime Access. No Limits!
  • Mobile Accessibility
  • Certificate of Completion