Preview Web Development Foundation: HTML5, CSS3, Bootstrap & SASS

Back

Course Introduction

Introduction & Curriculum Walkthrough

Resources & Setup

Resources [Important]

Resources [Important]

How Web Works? [Optional]

Environment Setup

HTML Fundamentals

HTML Introduction

Head Section

Common HTML Tags

Media Tags

Linking Page

Forms I

Forms II

Comments

List

Tables

Inline and Block

Id & Classes

HTML Semantics

Semantics I

Semantics II

HTML Entity

CSS Fundamentals 1.0

Introduction To CSS

CSS Types and Order

Selectors

Selector Game I

Selector Game II

Specificity / R029

Common Properties

CSS Fundamentals 2.0

Box Model

Box Sizing

Box Model Values

Unit Values

CSS Fundamentals 3.0 (Display & Positions)

Display

Display vs Visibility

Position / R041

Z Index

Pseudo Elements & Pseudo Classes / R042

CSS Fundamentals 4.0 (Responsive Web Design)

Responsiveness: Media Query / R043

Viewport Units: Height & Width / R044

Project 1 - Profile Card

Transform / R045

Position / R046

Google Font

Button Design

Margin Auto vs Text Align Center

Box Shadow

Icons

Color suggestion

CSS Sequence: Advise

Project 2 - Login Page

Background Gradient

Input fields

Forgot Password

Login Button

Min Max Width

Layout 1 - Flexbox

Flexbox Introduction

Parent Properties

Child Properties

Flexbox Tool

Flexbox Game / R063

Project 3 - Spotify Clone Using Flexbox

Flexbox Project / R075

Header I

Header II - Logo

Main I / R078

Main II / R079

Background Image / R080

Footer I / R081

Footer II / R082

Footer III

Footer IV / R084

Responsive Design: Main / R085

Responsive Design: Header / R086

Responsive Design: Footer / R087

Variables I / R088

Variables II / R089

CSS Advanced 1.0

Backgrounds

Background Clip / R091

Background Shorthand

Transform / R093

CSS Art: Border and Border Radius

CSS Art: Border Radius / R095

CSS Art: Designing Shapes / R096

CSS Advanced 2.0 (SVG - Scalable Vector Graphics)

SVG: Fundamentals / R098

SVG: Design & Tools

CSS Advanced 3.0 (Transition & Animation)

Transition / R101

Animations I

Animations II / R103

Layout 2 - CSS Grid

CSS Grid Introduction / R104

Row and Columns

Common Properties

Shorthand Property

Grid Template Area

Nested Grid

Align Properties

CSS Grid Game / R114

Autofit vs Autofill / R116

Browser Compatibility

Browser Compatibility - Vender Prefix Code

Project 4 - Testimonial Page Using CSS Grid

CSS Grid Project

Feedback Card

Utility CSS

Feedback Card

Mobile Responsive

SASS - CSS Preprocessor

SCSS/SASS Introduction

Concepts - Variables, Nesting

Concepts - Partials, Modules

Concepts - Extend/Inheritance

Concepts - Mixins and Operators / R129

Project 5 - Portfolio Website Using Bootstrap

Bootstrap Introduction - Project Demo

Utilities

Layouts - Container, Grid

Layouts - Container, Grid

Components

Portfolio Project: Main Section

Portfolio Project: About/Blog Section

Portfolio Project: Contact Section

Portfolio Project: Footer

Portfolio Project: Project Section

Project Completion

Project 6 - EdTech Startup Landing Page

EdTech Landing Page / R151

Initial Project Setup

Navigation

Banner Section I

Banner Section II

Transition, Transform, Animation / R157

Building Theme

Stats Section I / R159

Stats Section II (Flexbox)

Information Section / R161

Working Section (CSS Grid) / R162

Footer (SVG) / R163

Animate CSS (CSS Library)

Scroll Bars / R166

Responsiveness I - Media Queries / R167

Responsiveness II - Media Queries / R168

Hamburger Menu I

Hamburger Menu II / R170

Deployment - Your Website On Web

Project Deployment Using Netlify

What Next?

What Next?

Preview - Web Development Foundation: HTML5, CSS3, Bootstrap & SASS