Learn HTML and CSS in 7 Days | Web Developer Bootcamp

Course Curriculum

Chapter 1: About the Course | Material | Downloads

Lecture 1: Welcome to DAY 1 | Course Outline

Lecture 2: Install Visual Studio Code

Lecture 3: Download Course Material

Chapter 2: DAY 1: HTML5 Fundamentals

Lecture 1: What is HTML?

Lecture 2: Create your first web page with HTML

Lecture 3: Tags and Attributes

Lecture 4: How to use the Code Editor Visual Studio Code

Lecture 5: The Basic HTML Structure

Lecture 6: Setting up a Live Server (Automatic Browser Refresh)

Lecture 7: Add Images to your website

Lecture 8: How to specify relative paths

Lecture 9: Understanding HTML Images (Attributes)

Lecture 10: Supplementary Lesson: Semantic HTML Tags

Lecture 11: Text Formatting Tags

Lecture 12: Add Hyperlinks to your website (anchor Tag)

Lecture 13: Create Bookmark Links

Lecture 14: Lists

Lecture 15: Comments

Lecture 16: HTML Beginner Project

Lecture 17: Solution Code for the HTML Beginner Project

Chapter 3: DAY 1: Advanced HTML Concepts

Lecture 1: What to expect

Lecture 2: Forms

Lecture 3: Input Types

Lecture 4: Developer Tools: How to Inspect a Website in the Browser

Lecture 5: How to create tables (<table> tag)

Lecture 6: Create a simple Layout with a table

Lecture 7: Add Videos to your web page

Lecture 8: Embed YouTube Videos

Lecture 9: Define Tooltips

Chapter 4: DAY 1: Introduction into CSS

Lecture 1: What is CSS?

Lecture 2: CSS Syntax

Lecture 3: How to implement CSS in your HTML Code

Lecture 4: Colors

Lecture 5: Classes and IDs

Chapter 5: DAY 2: CSS Basics Section

Lecture 1: Welcome to DAY 2 | Section Outline

Lecture 2: Control the Height and Width of Elements

Lecture 3: Add Borders to your elements

Lecture 4: The Border Shorthand

Lecture 5: Margins

Lecture 6: The Boxmodel

Lecture 7: Boxsizing Border Box

Lecture 8: Universal Selector

Lecture 9: Block-level vs. inline-level elements

Lecture 10: Display Property

Lecture 11: Rounded Corners (border-radius property)

Lecture 12: Text Styling Properties

Lecture 13: Font Settings

Lecture 14: font-family and font-weight

Lecture 15: Center Elements

Chapter 6: DAY 3: CSS Intermediate Section

Lecture 1: Welcome to DAY 3 | Section Outline

Lecture 2: Background Property (Add Images to your website)

Lecture 3: Transparent Colors, Alpha Values and Opacity

Lecture 4: Linear-Gradient and Radial-Gradient

Lecture 5: Shadows

Lecture 6: Combinators

Lecture 7: Attribute Selector

Lecture 8: Pseudo-Classes

Lecture 9: Transitions

Lecture 10: Positions

Lecture 11: Positions Mini Project: Create a Popup

Lecture 12: Pseudo-Elements

Lecture 13: CSS Variables | Custom Properties (Modern CSS Concept)

Chapter 7: DAY 4: Beginner Project | Create a multi-page website

Lecture 1: Welcome to DAY 4 | Section Outline

Lecture 2: Navigation Bar

Lecture 3: Homepage

Lecture 4: About Page

Lecture 5: min-width and max-width

Lecture 6: Products Page

Lecture 7: Login Page

Chapter 8: DAY 4: CSS Animations

Lecture 1: Animations

Lecture 2: Mini Project: Create a Loading Screen Animation

Chapter 9: DAY 5: CSS Flexbox & Responsive Web Design

Lecture 1: Welcome to DAY 5 | Section Outline

Lecture 2: Horizontal and Vertical Alignment

Lecture 3: flex-direction and gap

Lecture 4: space-between, space-around, space-evenly

Lecture 5: flex-wrap | align-content vs. align-items

Lecture 6: Nested Flexbox Layouts & column-gap vs. row-gap

Lecture 7: flex-grow vs. flex-shrink

Lecture 8: Combine Flexbox with min-width & max-width

Lecture 9: Media Queries

Lecture 10: Extra Tips and Summary

Lecture 11: PROJECT: Build a Responsive Flexbox Layout

Lecture 12: SOLUTION: Build a Responsive Flexbox Layout

Chapter 10: DAY 6: CSS Grid

Lecture 1: Welcome to DAY 6 | Section Outline

Lecture 2: Columns and Rows