Build Website Scratch

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

Last updated 2022-01-10 | 4.6

- 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

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

* Requirements

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

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.

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

Course content

10 sections • 86 lectures

Getting Started 8 lectures

Welcome & What We're Learning Preview 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.

What is HTML & CSS? Preview 3 pages

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

HTML Tags, Attributes & Elements Preview 7 pages

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

File & Folder Naming Conventions Preview 7 pages

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

Typical Website File & Folder Structure Preview 17 pages

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

Managing Your Production Files Preview 4 pages

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

Tools of the Trade Preview 4 pages

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

What we've learned about HTML so far.

HTML Foundations: Part I 10 lectures

Starting Your First Web Page Preview 01:13

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

The Doctype Preview 01: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 Document Preview 03:07

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

Page Title Preview 02:34

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

Headings Preview 03:40

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

Paragraphs Preview 02:23

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

Emphasis & Strong Emphasis Preview 02:47

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

HTML Parent/Child Structure Preview 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.

Get Your Hands Dirty! Preview 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.

HTML Foundations Quiz I

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

HTML Foundations: Part II 6 lectures

Hyperlinks Preview 04:28

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

Lists Preview 04:05

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

Unordered lists
Ordered lists
Description lists

Images Preview 10:27

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

Address Preview 02:39

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

Get Your Hands Dirty! Preview 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.

HTML Foundations Quiz II

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

HTML Foundations: Part III 5 lectures

Tables Preview 04:45

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

Forms Preview 13:34

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

HTML Special Characters Preview 3 pages

In this lecture, we learn about HTML Special Characters.

Get Your Hands Dirty! Preview 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.

HTML Foundations Quiz III

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

HTML Foundations: Part IV 9 lectures

IDs & Classes Preview 04:50

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

Span & Div Preview 05:54

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

Header & Footer Preview 01:46

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

Nav, Section & Article Preview 06:09

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

Aside Preview 02:52

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

Time Preview 03:20

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

Abbreviations & Quotes Preview 04:02

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

Get Your Hands Dirty! Preview 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

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

CSS Foundations: Part I 9 lectures

The Style Rule Preview 3 pages

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

Inline styles Preview 02:21

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

Internal styles Preview 04:20

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

External styles Preview 09:45

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

CSS Selectors, Properties & Values Preview 3 pages

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

Inheritance of Styles Preview 3 pages

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

Pixels, Percentages, Points & Ems! Preview 2 pages

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

Get Your Hands Dirty! Preview 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

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

CSS Foundations: Part II 7 lectures

ID Selectors Preview 05:46

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

Class Selectors Preview 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!

Descendant Selectors Preview 07:25

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

Grouping Selectors Preview 07:18

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

Get Your Hands Dirty! Preview 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 Update Preview 02:18

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

CSS Foundations Quiz II

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

CSS Foundations: Part III 9 lectures

The Box Model Preview 16 pages

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

Colours (or Colors) Preview 03:24

In this lecture, we are introduced to CSS colours.

Text Styling & Formatting Preview 13:20

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

Sexy Typography Preview 6 pages

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

Borders Preview 10:54

In this lecture, we learn about CSS Borders.

Background Images Preview 09:13

In this lecture, we learn about CSS Background Images.

Styling Forms Preview 18:31

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

Get Your Hands Dirty! Preview 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

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

CSS Foundations: Part IV 8 lectures

Styling Links Preview 09:08

In this lecture, we learn how to style Hyperlinks.

Block & Inline Elements Preview 5 pages

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

Float & Clear Preview 01:21

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

CSS Positioning Preview 08:07

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

CSS Specificity Preview 11 pages

In this lecture, we learn about CSS specificity.

Get Your Hands Dirty! (Part1) Preview 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) Preview 16:58

This is part 2 of the previous lecture.

CSS Foundations Quiz IV

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

Putting It All Together 15 lectures

Final Website Walk Through Preview 01:54

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

About the Course Files Preview 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.

HTML: Coding the Header & Hero Preview 08:21

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

HTML: Coding the General Content Preview 03:05

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

HTML: Coding the News & Events Preview 05:41

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

HTML: Coding the Footer Preview 02:22

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

CSS: Adding Normalize.css Preview 01:54

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

CSS: General Styles & Typography Preview 14:29

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

CSS: Styling the Header Preview 06:07

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

CSS: Styling the Hero Preview 03:36

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

CSS: Styling the General Content Preview 02:41

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

CSS: Styling the News & Events Preview 05:54

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

CSS: Styling the Footer Preview 05:59

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

The Finished Product & Conclusion Preview 01:15

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

Bonus Lesson: Where Do I Go From Here? Preview 01:59

Now that we've finished the course, what's next?