BrandRoots Academy/Intro to HTML & CSS

You're signing up to receive emails from BrandRoots Academy.

  • Waitlist

Intro to HTML & CSS

  • Course
  • 71 Lessons

If you want to dive into coding fast, learning the basics of HTML and CSS is the perfect place to start. In this course, you’ll get step-by-step guidance through the fundamentals of both languages—while building your own resume website that you can customize and reuse for anything. It’s a beginner-friendly path designed to grow your confidence and get you creating right away.

You're signing up to receive emails from BrandRoots Academy.

screenshots of code and website layout

Build a Website You Can Use & Repurpose

Learn thoroughly with lessons, code files and notes that walk you through step-by-step.

Contents

Introduction

Welcome to the course! Here’s what to expect.

Welcome

Project Setup

Let’s set up your development environment so we can start coding.

File Management (Lesson)
Dev Environment (Lesson)
Section Downloads

Base the Files

Let’s prepare your HTML and CSS files so a browser can see it.

What is HTML & CSS? (Lesson)
How to Read a URL (Lesson)
An Overview of HTML Markup (Lesson)
An Overview of CSS Markup (Lesson)
What Are We Coding? (Lesson)
Code the Base HTML & CSS Files (Activity)
Section Downloads

Page Layout Structure: HTML

Let’s create the page layout by coding the empty boxes outlined in our blueprint.

Review the Blueprint (Lesson)
Code the HTML Blueprint (Lesson)
What Are We Coding? (Lesson)
Code the HTML Div Structure (Activity)
Section Downloads

Page Layout Structure: CSS

Let’s visually see the page layout by coloring the empty boxes outlined in our blueprint.

Style the Div Boxes (Lesson)
What are CSS Floats? (Lesson)
What are We Coding? (Lesson)
Comment the CSS Sections (Activity)
Style the Body & Container (Activity)
Style the Div Boxes (Activity)
Responsive Check
Section Downloads

Background Images

Let's add in background images to the page layout.

Background Images (Lesson)
Add the Background Images (Activity)
Section Downloads

External Fonts

Let's add some cool web fonts to our website.

Google Fonts (Lesson)
Font Awesome Icons (Lesson)
Add External Fonts (Activity)
Section Downloads

Header

Let’s code the initial heading of our website and link it to the home page.

What are We Coding? (Lesson)
Headings (Lesson)
Linking (Lesson)
Color Codes (Lesson)
Padding vs Margin (Lesson)
Add the Site Name
Section Downloads

Navigation Menu

Let's code the main navigation menu.

What are We Coding? (Lesson)
Navigation Menu (Lesson)
Code the Navigation Menu (Activity)
Section Downloads

Home Page Headings

Let's code the headings on the home page.

What are We Coding? (Lesson)
Code the Page Headings (Activity)
Section Downloads

Buttons

Let's code the call-to-action button on the home page.

What are We Coding? (Lesson)
Id vs Class (Lesson)
Code the HTML Button (Activity)
Section Downloads

Images

Let's add the sidebar image to the page.

What are We Coding? (Lesson)
Add the Aside Image (Activity)
Section Downloads

Footer

Let's add the copyright to the website footer.

What are We Coding? (Lesson)
Code the Footer Copyright (Activity)
Section Downloads

Content: About Page

What are We Coding? (Lesson)
Add the Page Content (Activity)
Section Downloads

Content: Experience Page

Let's add body content to the Experience page.

What are We Coding? (Lesson)
Add the Page Content (Activity)
Section Downloads

Content: Contact Page

Let's add body content to the Contact page.

What are We Coding? (Activity)
Code the HTML Links (Activity)
Style the Links (Activity)
Section Downloads

Project Closing

Your project is complete, nice work!

Project Recap (Lesson)
Section Downloads

Course Includes

Lesson Notes for each section
Code Notes for each section
Code Start Files for each section
Code Completed Files for each section