HTML CSS and SASS Bootcamp

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: How to get the best from this course

Chapter 2: Environment Setup

Lecture 1: Environment setup – Installing necessary tools

Lecture 2: Visual Studio Code Setup

Lecture 3: Visual Studio Code Setup – EMMET Extension

Lecture 4: Emmet Solution

Lecture 5: RESOURCES AND COURSE FILES

Chapter 3: Introduction To HTML

Lecture 1: What is HTML?

Lecture 2: HTML Syntax – Tags, Elements and Attributes

Lecture 3: Structure of an HTML Page

Lecture 4: Comments

Lecture 5: Header Tags

Lecture 6: Paragraph Tags

Lecture 7: Formatting text

Lecture 8: Unordered List

Lecture 9: Ordered List

Lecture 10: Images and Favicon

Lecture 11: Adding Audio files to a webpage

Lecture 12: Adding Video files to a webpage

Lecture 13: Forms

Lecture 14: Table

Lecture 15: Links

Lecture 16: iFrames

Lecture 17: Entities and Emojis

Lecture 18: Icon Fonts

Lecture 19: Types of Elements

Lecture 20: How to layout HTML page semantically

Chapter 4: Introduction to CSS

Lecture 1: What is CSS?

Lecture 2: CSS Syntax

Lecture 3: Inline and Internal CSS

Lecture 4: External CSS

Lecture 5: CSS rule priority

Lecture 6: CSS Comments

Lecture 7: Colors

Lecture 8: Selectors – Classes and id

Lecture 9: Border

Lecture 10: Border – CSS Challenge

Lecture 11: Padding

Lecture 12: Margins

Lecture 13: Span Tag and Class

Lecture 14: Challenge 2 – Basic Web Page

Lecture 15: Challenge 2 – Basic Web Page – Solution Part 1

Lecture 16: Challenge 2 – Basic Web Page – Solution Part 2

Lecture 17: The Box Model – Part 1

Lecture 18: The Box Model – Part 2

Lecture 19: Universal selector

Lecture 20: Formatting Text

Lecture 21: Fonts

Lecture 22: Google Fonts

Lecture 23: Links and Pseudo-classes

Lecture 24: Buttons

Lecture 25: Absolute and Relative position

Lecture 26: Fixed Position

Lecture 27: Floats – We don't use them in modern CSS

Lecture 28: Replacing Floats with Flexbox

Lecture 29: Background image

Lecture 30: Units in CSS

Lecture 31: Media Queries for Responsive Design

Lecture 32: Debugging your code

Lecture 33: Code Faster with EMMET Extension

Chapter 5: PROJECT 1 – A Restaurant Website

Lecture 1: Project Overview – What we would create

Lecture 2: Project Environment Setup

Lecture 3: Building the Header section – Markup

Lecture 4: Adding some global styles

Lecture 5: Building the Header section – CSS

Lecture 6: Building the Intro section – Markup

Lecture 7: Building the Intro section – CSS

Lecture 8: Building the About section – Markup

Lecture 9: Building the About section – CSS

Lecture 10: Building the Menu section – Markup

Lecture 11: Building the Menu section – CSS

Lecture 12: Building the Testimonial section – Markup

Lecture 13: Building the Testimonial section – CSS

Lecture 14: Building the Order section – Markup

Lecture 15: Building the Order section – CSS

Lecture 16: Building the Footer section – Markup

Lecture 17: Building the Footer section – CSS

Chapter 6: FLEXBOX

Lecture 1: Flexbox Part 1

Lecture 2: Flexbox Part 2

Chapter 7: Grid System

Lecture 1: CSS Grid System – Part 1

Lecture 2: CSS Grid System – Part 2

Lecture 3: CSS Grid System – Part 3

Chapter 8: Advanced CSS Concepts

Lecture 1: Pseudo Classes

Lecture 2: Pseudo Elements

Lecture 3: Using the before Pseudo Elements

Lecture 4: Box Shadow

Lecture 5: CSS Variables

Lecture 6: Background

Chapter 9: CSS Animation

Lecture 1: Transition

Lecture 2: Transform – Translate Property

Lecture 3: Transform – Scale Property