Build Websites from Scratch with HTML & CSS

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.

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.

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

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.

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

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.

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.

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.

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.

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.

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.

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.