This course includes:
₹0
₹0.00
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
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
No prior programming knowledge required! Time, attention and dedication to learn & practice.
Course Rating
February 5, 2025
"I love this course"