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

Back

Course Introduction

Introduction & Curriculum Walkthrough

Resources & Setup

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?

Bonus: What Next?

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