HTML & CSS Guide – Create your First Website in 2023

Course Curriculum

Chapter 1: Introduction

Lecture 1: Intro

Chapter 2: Getting Started With HTML

Lecture 1: Code Editor for easy hand coding

Lecture 2: HTML Document Structure

Lecture 3: HTML Elements

Lecture 4: HTML Attributes

Chapter 3: Create and Format Text

Lecture 1: Create Headings in your page

Lecture 2: Insert Paragraphs

Lecture 3: HTML Text Formatting

Chapter 4: Lists, Images, Hyperlinks and More

Lecture 1: HTML List

Lecture 2: HTML images

Lecture 3: HTML Tables

Lecture 4: HTML Hyperlinks

Chapter 5: Styles, Forms and Comments

Lecture 1: Code Comments

Lecture 2: HTML Styles

Lecture 3: HTML Forms I

Lecture 4: HTML Forms II

Chapter 6: HTML Multimedia Elements

Lecture 1: Introduction to Multimedia

Lecture 2: HTML Video Tag

Lecture 3: Insert Audio File in Your Webpage

Lecture 4: HTML Object Tag

Lecture 5: HTML Embed Tag

Lecture 6: Youtube Videos Using Iframe Tag

Lecture 7: Insert Youtube Playlist in Your Webpage

Chapter 7: Introduction to CSS

Lecture 1: Introduction

Lecture 2: CSS main Syntax

Lecture 3: Class and Id selectors to identify elements

Lecture 4: How to add a style sheet – Internal, external and inline CSS styles

Lecture 5: How CSS Box model works – Border, margin and padding properties

Lecture 6: CSS Font Properties

Lecture 7: Text Properties

Lecture 8: Block and Inline Elements (Div and Span elements)

Lecture 9: Position Property to change elements position in your layout

Lecture 10: Float and Clear properties to position layout elements

Lecture 11: Relative and Absolute Units

Lecture 12: Define elements size using Width and Height Properties

Chapter 8: CSS Projects

Lecture 1: Project – Web gallery using Float property

Lecture 2: Create a Form with HTML & CSS

Chapter 9: Responsive Web design

Lecture 1: Introduction to Responsive Web design

Lecture 2: Project presentation

Lecture 3: Img tag vs. background-image css property

Lecture 4: Responsive design using media queries

Lecture 5: Create header and main section for a landing page

Chapter 10: Css Evolution – Flexbox Model

Lecture 1: Flexbox properties

Lecture 2: Introduction to Flexbox Layout Model

Lecture 3: Display property and flexbox model default behavior

Lecture 4: Flex-direction and Wrap properties

Lecture 5: Shorthand property flex-flow

Lecture 6: Align Flex items with Justify-content / align-items / align-content properties

Lecture 7: Change flex items position using Order property

Lecture 8: Flex-grow property

Lecture 9: Flex-shrink

Lecture 10: Flex item initial lenght using Flex-basis property

Lecture 11: Flex (Shorthand property)

Lecture 12: Align-self

Chapter 11: CSS3 Flexbox Projects

Lecture 1: Project first webpage – introduction

Lecture 2: Project first webpage – first method

Lecture 3: Project first webpage – second method

Lecture 4: Webpage project – header

Lecture 5: Project first webpage – nav

Lecture 6: Project first webpage – article

Lecture 7: Project first webpage – aside

Lecture 8: Project first webpage – footer

Lecture 9: Flexbox project – Web gallery part 1

Lecture 10: Flexbox project – Web gallery part 2

Lecture 11: Web gallery -Version using background-image css property

Lecture 12: Flexbox project – Responsive form part 1

Lecture 13: Flexbox project – Responsive Form part 2

Lecture 14: Congratulations