What is HTML?

HTML Basic Introduction

Why we use HTML in a website?

Why use CSS in a website?

Why use JS in a website?

Basic HTML Structure

HTML Elements

Environmental Setup

Download VS Code

Download necessary extensions

Run our first program

Comments in HTML

HTML Attributes

Tags:

Heading

Paragraph

Preformatted Text (pre)

Line Break (br) & Horizontal Rule (hr)

All formatting tags

Tags:

Anchor (a)

Iframe

Image

Video

Audio

Embed

Base

Abbreviation (abbr)

Bidirectional Override (bdo)

Button

Meter & Progress

Project:

Create a small project using all tags

Semantic Tags:

Header

Footer

Main

Section

Article

Aside

Block & Inline Elements

Div vs Span

Lists:

Ordered List

Unordered List

Dropdown List

Datalist

Project:

Create a resume project using all previous tags

Tables:

Basic structure

Caption tag

Thead, Tbody, Tfoot tags

Colspan, Rowspan

Project:

Create different table layouts using table properties

What is a form?

Action attribute

Label tag

Input tag with main properties

Project:

Create a sign-up page using form tags

What is CSS?

CSS Basic Introduction

Basic syntax

How to include CSS in HTML (internal, external, inline)

Comments in CSS

Selectors (universal, ID, class, group, descendant)

Basic color properties with selectors

Color Properties:

Background color

RGB color model

Hex color model

Using Google color picker

Background Properties:

Image

Size

Position

Repeat

Text Properties:

Text-align

Text-decoration

Text-transform

Line-height

Font-size

Font-weight

Font-style

Font-family

Box Model:

Content

Padding

Margin

Border

Border-radius

Box-sizing

Display (block, inline, inline-block, none)

Visibility (hidden, visible)

Units:

Absolute units (px)

Relative units (%, em, rem, vw, vh)

Project:

Create a small project using all absolute & relative units

Position Property:

Static

Absolute

Relative

Fixed

Sticky

Z-Index Property

Float Property

Flexbox Model:

Flex-direction

Justify-content

Align-items

Flex-wrap

Align-content

Align-self

Flex-shrink

Flex-grow

Flex-order

Project:

Create a project using all Flexbox properties

Grid Model:

Grid-template-rows

Grid-template-columns

Grid-gap

Grid-template-areas

Grid-row

Grid-column

Justify-items

Align-items

Project:

Create a project using Grid properties

Media Queries:

Why use media queries?

Responsive web design

Project:

Create a responsive project using media queries

Pseudo-classes:

Introduction

Why use pseudo-classes?

Project:

Create a project using pseudo-classes and previous properties

Transitions Property

Project Included

Transform Property

Project Included

Animations Property

Project Included

JavaScript Basics:

What is JavaScript?

What is a programming language?

What is syntax?

Internal and external JS

Run our first JS code

Comments in JS

Variables:

Difference between var, let & const

Alert, confirm, prompt

Data Types:

Explained with examples

Operators:

Types and usage

Conditional Statements:

If, if-else, else-if

Ternary operator

Switch statement

Functions:

Functions with parameters

Functions with return statement

Global and local variables

Loops:

For loop, while loop, do-while loop

Examples

Break & continue statement

Nested loops

Arrays:

Array methods

For each loop

Multidimensional arrays

Objects:

Object methods

For in loop

String Methods:

Common string methods and usage

Number Methods:

Common number methods and usage

Math Methods:

Common math methods and usage

Date Methods:

Common date methods and usage

WHAT IS DOM IN JS ?

ALL DOM METHODS EXPLAINED

INNER HTML & INNER TEXT EXPLAINED

MANIPULATING ELEMENTS IN DOM

SET ATTRIBUTE IN DOM

CREATING AND APPENDING ELEMENTS

Events:

Mouse events, keyboard events

Template Strings

Arrow Functions

Rest and Spread Operators

Object Literals

Destructuring Arrays and Objects