Mastering CSS with Sass & Bootstrap + Interview Questions

Real-world responsive web-designing using flexbox & grid layouts. Front-end/UI/UX projects with assignments.

644 Learners

(354 ratings)

Created by

Init Tech Labs

This course includes:

on-demand video
Access on mobile and TV
Full lifetime access
Certificate of completion

0

0.00

What you'll learn

Practice HTML & CSS - the easy way

Sass and Bootstrap with real-world practical usage

Responsive web design using flexbox & grid layouts

Pseudo classes and elements, selectors, combinators, flexbox, grid, display property, media queries, transform and animation properties

100% practical course on HTML, CSS, Sass and Bootstrap

Real-world questions for interview preparation

Practical Assignments and hands-on projects

Course Content

15 sections

188 lectures

13 hr 22 min

Course Introduction

02:29

HTML Page structure

05:10

The paragraph tag <p>

03:57

Tags, Empty tags & Elements

04:40

Attributes

03:26

<div> & <span>

03:34

H1 to H6

02:53

The unordered list tag <ul>

03:50

The Ordered list tag <ol>

04:57

<a> - Anchor tag

04:18

<a> - Advanced concept (#)

03:12

<img> tag

05:22

Relative path Vs. Absolute path

05:42

The <input> tag - text, numeric & email

05:30

<input> - checkbox & radio

04:33

The <select> tag

04:44

HTML vs XHTML

06:20

Semantic Tags - address, footer, section, header

05:56

Concept Of Accessibility In Web Applications

02:54

ARIA - attribute

02:35

Meta Tag (SEO friendly tags)

04:24

Understanding DOM

07:16

Introduction

01:24

Inline Styling and basic CSS syntax

03:44

Internal Styling with <style> tag

03:35

External Styling - <link> tag

03:22

Element Selector

02:31

Class Selector

03:29

Element.class selector

02:15

ID Selector

02:30

Group Selector

01:17

Universal Selector

02:47

CSS Specificity

06:27

Universal Selector & CSS Reset

03:15

Combinators - Introduction

01:24

Descendent selector/combinator (space)

03:49

Child Selector (>)

03:35

Adjacent Selector (+)

03:46

Attribute Selector - element[attribute]

04:08

Attribute Spaced Selector (~)

03:37

Attribute Selector (^) - prefixed value

03:07

Attribute selector ($) - suffixed value

02:07

Attribute contains selector (*)

03:56

Attribute Hyphenated Selector (|)

03:09

Introduction to pseudo class

01:43

Linguistic pseudo-classes

05:08

Location pseudo-classes

09:51

:hover - User action pseudo classes part 1

05:23

:active - User action pseudo classes part 2

02:52

:focus - User action pseudo classes part 3

05:46

:focus-within - User action pseudo classes part 4

05:57

:enabled/disabled - Input pseudo classes

04:14

readonly/contenteditable attributes

04:46

:read-only/read-write - Input pseudo classes

02:32

:placeholder-shown - Input pseudo class

01:51

:valid/:invalid & :required - Input pseudo class

09:12

HTML/CSS Live Preview Extension

01:35

:nth-child() selector - Tree structural pseudo class

09:35

:nth-child() selector - complex arguments

06:10

Pseudo Element (diff pseudo class vs. element)

01:34

::first-line - pseudo element part 1

03:30

::first-letter - pseudo element part 2

04:08

::before/::after - pseudo element part 3

07:38

::before/::after - pseudo element part 4

04:04

font-family

04:14

@font-face

05:09

font-weight

03:00

line-height

03:58

font-style

01:58

text-transform

02:42

font-variant

02:12

text-decoration

05:36

text-alignment

03:15

Indenting text

02:32

color property - Applying foreground color

01:35

Introduction - diff. ways to assign colors

01:08

using RGB values

05:20

hexadecimal notations

06:52

using HSL values

06:58

working with opacity

02:39

CSS Gradients - linear-gradient()

06:28

CSS Gradients - radial-gradient()

05:57

CSS Gradients - conic-gradient()

08:11

Introduction

01:33

px

02:03

pt

02:36

cm

02:01

mm

02:39

in

01:38

pica - pc

01:41

em

06:01

rem

04:49

% - percentage

04:12

ex - x height

02:41

ch - character

02:55

vw

04:02

vh

03:17

vmin/vmax

04:57

Angle Measurement Units :- deg, grad, rad & turn

02:54

Time Measurement Units :- ms/s

01:53

Introduction

01:24

box-model

04:57

Applying Border

03:49

Applying Padding

06:17

Applying Margin

04:57

Collapsing Margins and Negative Margins

04:19

Understanding float

05:40

Clearing floats

04:27

Container/Float collapsing

04:33

Clearfix - Modern way to clear floats

03:38

Creating multiple columns floated layout

04:02

display property

05:42

fix, fluid & responsive layout

04:49

Understanding grids

08:35

Spanning Rows and Columns in Grid

07:06

Introduction to CSS Flexbox

04:08

Flex Container Properties

10:19

Flex Item Properties

10:08

Calculation of flex-grow

03:07

@media query - Introduction

05:38

Assignment - implementation of @media query

02:52

media type - all

04:36

media type - screen

02:05

media type - print

03:14

Creating a basic responsive form using media query with Breakpoint

04:27

"Introduction - 2D,3D, moving,rotating - various methods explanation 2D vs 3D"

02:10

Move elements with translate() method

06:39

rotate() Method

04:02

Assignment - rotate() Method

03:24

Resizing elements using the scale() function

04:28

Transforming Elements Using skew() Function

02:15

Assignment - Skew() on Text

01:41

matrix() - The all in one method

06:22

3D Card Flip Design Using transform Method

05:53

Introduction to CSS Transitions

04:32

Transitioning CSS Properties

05:00

Specifying Speed & Curve with transition-timing-function

05:16

Delaying the Transition with transition-delay

02:14

Combining Transform with Transition

04:15

Introduction

01:58

@keyframes Rule

04:47

Assignment - Creating A Bouncing Ball Animation

01:55

animation-name & animation-duration - The First Step

02:27

animation-delay

02:16

Controlling Iterations with animation-iteration-count property

01:59

Assignment - Controlling Iterations

05:28

Changing Animation Direction with animation-direction property

03:08

Defining Speed Curve with animation-timing-function property

03:45

Assignment - Creating Background Animation

04:04

animation-fill-mode property

04:32

Assignment - Sunset Animation

03:41

Introduction

02:20

Configuring Sass in Project

02:48

Sass Variables

03:13

Nesting with Sass

02:41

Sass Partials

03:35

Sass Modules - @use

05:36

Saas Mixins

03:37

Inheritance with Sass - @extend Rule

04:50

Operators

03:34

Assignment - Responsive Sidebar with Sass

07:22

Introduction

02:12

Configuring Bootstrap

04:38

Containers

02:24

Utilities/Helper Classes

03:41

Jumbotron (Not!) in Bootstrap 5

02:15

Buttons

03:27

Grouped Buttons and Spinners

02:30

Grid System Layout

04:00

Login Form Using Bootstrap

06:13

Pagination With Bootstrap

08:11

Modal

06:00

Modal Assignment For Email Registration

03:26

Breadcrumb

04:31

Navigation Bar

04:11

Basic Menu - Top Navigation Bar

05:38

Adding Split Menu Items

02:02

Responsive Menu

13:19

Vertical Accordion

07:21

Horizontal Accordions

04:27

CSS Hamburger Sidebar Menu

11:34

Subscribe Form

03:25

BS Horizontal Carousel

06:07

Vertical Carousel with SCSS

06:34

Responsive Card Layout - CSS

07:58

Responsive Shopping Cart

07:54

CSS Parallax

04:00

Responsive footer with bootstrap

05:40

Requirements

No prior programming knowledge required! Time, attention and dedication to learn & practice.

5.0

Course Rating

354 Reviews

Hemang Pavar
Hemang Pavar

February 5, 2025

"I love this course"