We may earn an affiliate commission when you visit our partners.
Course image
Brad Hussey and Code College

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

Read more

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.

Sign up for this online course today and start building your very own websites.

- - -

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. 

Enroll now

Here's a deal for you

We found an offer that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

What's inside

Learning objectives

  • 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

Syllabus

Getting Started

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.

Read more

In this lesson, you'll learn an overview of HTML & CSS and why they are important.

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

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.

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

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.

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

In this video I show why it's important to keep your production files in web design and how they can be used.

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

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.

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

What we've learned about HTML so far.

HTML Foundations: Part I

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

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

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

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

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

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

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

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.

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

What we've learned in this section of HTML Foundations.

HTML Foundations: Part II

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

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

  1. Unordered lists
  2. Ordered lists
  3. Description lists

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

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

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

What we've learned in this section of HTML Foundations.

HTML Foundations: Part III

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

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

In this lecture, we learn about HTML Special Characters.

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: Part IV

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

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

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

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

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

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

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

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 Exercise IV
CSS Foundations: Part I

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

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

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

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

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

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

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

In this lecture, we get our hands dirty and build a mini-website that contains everything we've learned in this section.

What we've learned in this section of CSS Foundations.

CSS Foundations: Part II

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

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

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

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

In this lecture, we get our hands dirty and build a mini-website with the skills we've learned so far in this section.

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

What we've learned in this section of CSS Foundations.

CSS Foundations: Part III

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

In this lecture, we are introduced to CSS colours.

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

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

In this lecture, we learn about CSS Borders.

In this lecture, we learn about CSS Background Images.

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

In this lecture, we build a beautiful mini-website with everything we've learned so far in this section.

CSS Foundations: Part IV

In this lecture, we learn how to style Hyperlinks.

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

In this lesson, you'll learn all about CSS Floats and how to use them to create layouts.

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

In this lecture, we learn about CSS specificity.

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

This is part 2 of the previous lecture.

Putting It All Together

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

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.

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

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

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

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

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

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

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

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

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

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Employs a Color 2 caveat because the course uses HTML5, while there is HTML6 and the latest official version is HTML5.2
Employs a Color 1 positive remark because this course could be useful for web designers and web developers to learn new skills and build a portfolio
Employs a Color 1 positive remark because this course covers unique perspectives and ideas that could add color to other topics and subjects
Employs a Color 1 positive remark because this course takes a creative approach to an otherwise established topic, field, or subject
Employs a Color 1 positive remark because this course is multi-modal and includes a mix of media, such as videos, readings, discussions, etc
Employs a Color 1 positive remark because the course is taught by Brad Hussey, who is recognized for his work in web design

Save this course

Save Build Websites from Scratch with HTML & CSS to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Build Websites from Scratch with HTML & CSS with these activities:
Follow Video Tutorials on HTML and CSS
Following video tutorials on HTML and CSS will provide you with a visual and interactive way to learn the basics of web design.
Browse courses on HTML
Show steps
  • Find video tutorials on HTML and CSS on YouTube or other platforms
  • Watch the tutorials and follow along with the instructions
  • Practice the concepts covered in the tutorials
Join a Study Group or Online Forum for HTML and CSS
Joining a study group or online forum for HTML and CSS will provide you with a support system and the opportunity to collaborate with other learners.
Browse courses on HTML
Show steps
  • Find a study group or online forum for HTML and CSS
  • Join the group or forum and introduce yourself
  • Participate in discussions and ask questions
Read 'HTML and CSS: Design and Build Websites' by Jon Duckett
This book provides a comprehensive overview of the fundamentals of HTML and CSS, making it an excellent resource for building a strong foundation in web design.
Show steps
  • Read Chapter 1: Introduction to HTML and CSS
  • Read Chapter 2: Basic HTML Structure
  • Read Chapter 3: Basic CSS
Five other activities
Expand to see all activities and additional details
Show all eight activities
Attend a Workshop on HTML and CSS
Attending a workshop on HTML and CSS will provide you with the opportunity to learn from experienced instructors and connect with other learners.
Browse courses on HTML
Show steps
  • Find a workshop on HTML and CSS in your area
  • Register for the workshop
  • Attend the workshop and participate in the activities
Solve Coding Challenges on Codewars or LeetCode
Solving coding challenges on Codewars or LeetCode will test your understanding of HTML and CSS and help you develop your problem-solving skills.
Browse courses on HTML
Show steps
  • Create an account on Codewars or LeetCode
  • Choose a coding challenge to solve
  • Write code to solve the challenge
  • Submit your solution and review the feedback
Build a Personal Portfolio Website
Building a personal portfolio website will allow you to practice your HTML and CSS skills and create a tangible project to showcase your abilities.
Browse courses on Web Design
Show steps
  • Plan the structure and design of your website
  • Create the HTML framework for your website
  • Style your website using CSS
  • Add content to your website
  • Publish your website online
Create a Tutorial on a Specific HTML or CSS Technique
Creating a tutorial on a specific HTML or CSS technique will reinforce your understanding of the topic and help you develop your communication skills.
Browse courses on HTML
Show steps
  • Choose a specific HTML or CSS technique to focus on
  • Write a step-by-step guide on how to use the technique
  • Create visuals or examples to illustrate the steps
  • Publish your tutorial online or share it with others
Develop a Website for a Local Business or Organization
Developing a website for a local business or organization will provide you with real-world experience and the opportunity to apply your HTML and CSS skills to a practical project.
Browse courses on Web Design
Show steps
  • Contact local businesses or organizations to offer your services
  • Meet with the client to discuss their needs and goals for the website
  • Design and develop the website based on the client's requirements
  • Test and deploy the website
  • Maintain and update the website as needed

Career center

Learners who complete Build Websites from Scratch with HTML & CSS will develop knowledge and skills that may be useful to these careers:
Web Developer
Web Developers work to create and maintain the functionality, performance, and appearance of websites. Previous knowledge of HTML and CSS is a great way to get started in this industry. As a Web Developer, you'll be responsible for using HTML to design a site's content and structure, and using CSS to define the site's appearance and layout. This course gives you a great foundation in both skills.
Web Designer
Web Designers work to create and maintain the look and feel of websites. With this course, you'll learn the basics of HTML and CSS, the languages that make up the foundation of a website's structure and appearance. Even if you plan to hire someone to build your website, this course can help you understand how changes will impact the site's functionality.
Front-End Developer
Front-End Developers focus on the user-facing part of a website. With HTML and CSS, the skills you'll learn in this course, you'll be able to create a website that is both visually appealing and functional.
Graphic designer
Graphic Designers use their knowledge of design principles and software to create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course teaches you the foundation of those principles as they apply to web design.
UX Designer
UX Designers focus on how users interact with a website. With this course, you'll learn the basics of how to assemble a website, which can give you a foundation as you decide how to set up your website for best user experience.
Technical Writer
Technical Writers create instruction manuals, technical reports, and other documentation to explain complex technical information. As computers and web-based technologies are such a large part of business, having a basic understanding of HTML and CSS will help you to be a more effective technical writer.
Software Developer
Software Developers design, develop, and test software applications using a variety of programming languages. This course will give you a foundation in the basics of front-end development, which can help you decide if you want to learn more about software development and pursue it as a career.
Computer Programmer
Computer Programmers write and test code that allows computer applications and software programs to run. While this course focuses on front-end, web-based programming, it will give you a foundation in the skills and concepts you'll need to succeed in this role.
Software Engineer
Software Engineers analyze user needs and then design, develop, and test software applications that meet those needs. While this course focuses on the front-end of websites, not software itself, it will give you the foundation you need to start in the field and learn other aspects of software engineering.
IT Support Specialist
IT Support Specialists provide technical support to computer users. This course will provide you with foundational knowledge of HTML and CSS, which will help you better understand the web-based programs you'll be troubleshooting.
Quality Assurance Analyst
Quality Assurance Analysts test software to make sure it meets the needs of users. While this course focuses on the code that makes up the front-end of websites, knowing how that front-end code works can be helpful in your work as a Quality Assurance Analyst.
Computer Systems Analyst
Computer Systems Analysts study an organization's current computer systems and procedures, and design new systems that will meet the organization's needs using software and other information technology. A basic understanding of HTML and CSS can be helpful in gathering requirements from clients or other stakeholders that need to use the systems you will design.
Database Administrator
Database Administrators are responsible for the performance, integrity, and security of data managed by their organization. While HTML and CSS are not directly related to databases, having a basic understanding of the structure and organization of web pages can help you interact with web programs that use databases more effectively.
Network Administrator
Network Administrators manage and maintain computer networks. While HTML and CSS are not directly related to designing and maintaining computer networks, understanding how HTML and CSS are used in websites can help you understand and troubleshoot network usage.
Information Security Analyst
Information Security Analysts plan and implement security measures to protect an organization's computer networks and systems. While this course does not go into the security of websites, it does give you a foundational understanding of how websites are structured. This can help you as you learn more about web security.

Reading list

We've selected 11 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Build Websites from Scratch with HTML & CSS.
Takes a deep dive into CSS, covering advanced topics like CSS preprocessors, CSS frameworks, and responsive design. It valuable resource for web developers who want to improve their CSS skills.
Provides a practical guide to HTML5 and CSS3, focusing on how to use these technologies to build real-world websites. It covers topics like HTML5 semantics, CSS3 animations, and responsive design.
Gentle introduction to CSS, perfect for beginners who want to learn the basics. It covers topics like CSS selectors, properties, and values.
Beginner-friendly guide to HTML and CSS. It covers the basics of web design and development, and is perfect for those who are new to the field.
Provides a comprehensive overview of HTML5, covering topics like new elements, attributes, and APIs. It valuable resource for web developers who want to learn about the latest HTML5 features.
Collection of tips, tricks, and techniques for CSS. It provides creative solutions to common web design problems.
Provides a comprehensive overview of web design, covering HTML5, CSS3, and JavaScript. It valuable resource for beginners who want to learn the basics of web development.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Build Websites from Scratch with HTML & CSS.
Web Design Creating websites from scratch
Most relevant
Learn HTML and CSS together for Beginners
Most relevant
Introduction to Web Development with HTML, CSS, JavaScript
Most relevant
Introduction to HTML, CSS, & JavaScript
Most relevant
Building Websites with HTML and CSS
Most relevant
An Introduction to Web Development
Most relevant
Creating a Multi Page App using HTML & CSS
Most relevant
Build Responsive Real-World Websites with HTML and CSS
Most relevant
Try It: Intro to HTML
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser