Autoplay
Autocomplete
Previous Lesson
Complete and Continue
HTML, CSS, Sass, Bootstrap - Beginner to Expert Frontend Bootcamp
Introduction
Course Introduction (2:29)
HTML Basics
HTML Page structure (5:10)
The paragraph tag (3:57)
Tags, Empty tags & Elements (4:40)
Attributes (3:26)
< div > & < span > (3:34)
H1 to H6 (2:53)
The unordered list tag - < ul > (3:50)
The Ordered list tag (4:57)
Anchor tag (4:18)
Anchor tag - Advanced concept (#) (3:12)
< img > tag (5:22)
Relative path Vs. Absolute path (5:42)
The input tag - text, numeric & email (5:30)
input - checkbox & radio (4:33)
The select tag (4:45)
HTML vs XHTML (6:20)
Semantic Tags - address, footer, section, header (5:56)
Concept Of Accessibility In Web Applications (2:54)
ARIA - attribute (2:35)
Meta Tag (SEO friendly tags) (4:24)
Installing Google Analytics (4:27)
CSS Basics & Selectors
CSS introduction (1:24)
Inline Styling and basic CSS syntax (3:44)
Internal Styling with style tag (3:35)
External Styling - link tag (3:22)
Element selector (2:31)
Class selector (3:29)
Element.class selector (2:15)
ID selector (2:30)
Group selector (1:17)
Universal selector (2:47)
CSS Specificity (6:27)
Universal Selector and CSS Reset (3:15)
Combinators - Advanced Selectors Part 1
Combinators introduction (1:24)
Descendent selector/combinator (space) (3:49)
Child selector (>) (3:35)
Adjacent selector (+) (3:46)
Attribute selector - element[attribute] (4:08)
Attribute spaced selector (~) (3:37)
Attribute selector (^) - prefixed value (3:07)
Attribute selector ($) - suffixed value (2:07)
Attribute contains selector (*) (3:56)
Attribute hyphenated selector (|) (3:10)
Pseudo-classes & Elements - Advanced Selectors Part 2
Introduction to pseudo class (1:43)
Linguistic pseudo-classes (5:08)
Location pseudo-classes (9:51)
:hover - User action pseudo classes part 1 (5:23)
:active - User action pseudo classes part 2 (2:52)
:focus - User action pseudo classes part 3 (5:46)
:focus-within - User action pseudo classes part 4 (5:57)
:enabled/disabled - Input pseudo classes (4:14)
readonly/contenteditable attributes (4:46)
:read-only/read-write - Input pseudo classes (2:32)
:placeholder-shown - Input pseudo class (1:51)
:valid/:invalid & :required - Input pseudo class (9:12)
HTML/CSS Live Preview Extension (1:35)
:nth-child() selector - Tree structural pseudo class (9:35)
:nth-child() selector - complex arguments (6:10)
Pseudo Element (pseudo class vs. element) (1:34)
::first-line - pseudo element part 1 (3:30)
::first-letter - pseudo element part 2 (4:08)
::before/::after - pseudo element part 3 (7:38)
::before/::after - pseudo element part 4 (4:04)
Text Formatting
@font-face (5:09)
font-family (4:14)
font-weight (3:00)
line-height (3:58)
font-style (1:58)
text-transform (2:42)
font-variant (2:12)
text-decoration (5:36)
text-alignment (3:15)
Indenting text (2:32)
color property - Applying foreground color (1:35)
Using Colors and Gradients with CSS
Introduction - different ways to assign colors (1:08)
Using RGB Values (5:20)
Hexadecimal Notations (6:52)
Using HSL Values (6:58)
Working with Opacity (2:39)
CSS Gradients - linear-gradient() (6:28)
CSS Gradients - radial-gradient() (5:57)
CSS Gradients - conic-gradient() (8:11)
CSS Units
CSS Unit Introduction (1:33)
Absolute Units :- px (2:04)
Absolute Units :- pt (2:36)
Absolute Units :- cm (2:01)
Absolute Units :- mm (2:39)
Absolute Units :- in (1:38)
Absolute Units :- pica - pc (1:41)
Relative Units :- em (6:01)
Relative Units :- rem (4:49)
Relative Units :- % - percentage unit (4:12)
Relative Units :- ex - x height (2:41)
Relative Units :- ch - character (2:55)
Relative Units :- vw (4:02)
Relative Units :- vh (3:17)
Relative Units :- vmin/vmax (4:57)
Angle measurement units - deg, grad, rad & turn (2:54)
Time measurement units - ms/s (1:53)
CSS Page Layout Fundamentals
Introduction (1:24)
Box-model (4:52)
Applying Border in CSS (3:49)
Applying Padding in CSS (6:17)
Applying Margin in CSS (4:57)
Collapsing and Negative Margins (4:19)
Understanding Float (5:40)
Clearing Floats (4:27)
Container-Float Collapsing (4:33)
Clearfix - Modern way to clear floats (3:38)
Creating multiple columns floated layout (4:02)
Display Property (5:42)
Fix, Fluid & Responsive layout (4:49)
Understanding Grids (8:35)
Spanning Rows and Columns in Grid (7:06)
Introduction to CSS Flexbox (4:08)
Flex Container Properties (10:19)
Flex Item Properties (10:08)
Calculation of flex-grow (3:07)
@media query - Introduction (5:38)
Assignment - implementation of @media query (2:52)
media type - all (4:36)
media type - screen (2:05)
media type - print (3:14)
Creating a basic responsive form using media query with Breakpoint (4:27)
CSS Transform
Introduction to CSS Transform (2:10)
Move elements with translate() method (6:39)
rotate() Method (4:02)
Assignment - rotate() Method (3:24)
Resizing elements using the scale() function (4:28)
Transforming Elements Using skew() Function (2:15)
Assignment - Skew() on Text (1:41)
matrix() - The all in one method (6:22)
3D Card Flip Design Using transform Method (5:53)
CSS Transitions
Transitioning CSS Properties (5:00)
Introduction to CSS Transitions (4:32)
Specifying Speed & Curve with transition-timing-function (5:16)
Delaying the Transition with transition-delay (2:14)
Combining Transform with Transition (4:15)
CSS Animations
CSS Animation Introduction (1:58)
@keyframes rule (4:47)
Assignment - Creating A Bouncing Ball Animation (1:55)
animation-name & animation-duration - The First Step (2:27)
animation-delay (2:16)
Controlling Iterations with animation-iteration-count property (5:28)
Assignment - Controlling Iterations (1:59)
Changing Animation Direction with animation-direction property (3:08)
Defining Speed Curve with animation-timing-function property (3:45)
Assignment - Creating Background Animation (4:04)
animation-fill-mode property (4:32)
Assignment - Sunset Animation (3:41)
SASS
Introduction (2:20)
Configuring Sass in Project (2:48)
Sass Variables (3:13)
Nesting in Sass (2:41)
Sass Partials (3:35)
Sass Modules (5:36)
Sass Mixins (3:37)
Inheritance with Sass - @extend Rule (4:50)
Operators (3:34)
Assignment - Responsive Sidebar with Sass (7:22)
Bootstrap
Introduction (2:12)
Configuring Bootstrap (4:38)
Containers (2:24)
Utilities/Helper Classes (3:41)
Jumbotron (Not!) in Bootstrap 5 (2:15)
Buttons (3:27)
Grouped Buttons & Spinners (2:30)
Grid System Layout (4:00)
Login Form with Bootstrap (6:13)
Pagination With Bootstrap (8:11)
Modal (6:00)
Modal Assignment For Email Registration (3:26)
Breadcrumb (4:31)
Navigation bar (4:11)
Practical Implementation
Basic Menu - Top Navigation Bar (5:38)
Adding Split Menu Items (2:02)
Responsive Menu (13:19)
Vertical Accordion (7:21)
Horizontal Accordion (4:27)
CSS Hamburger Sidebar Menu (11:34)
Subscribe Form (3:25)
Vertical Carousel with SCSS (6:34)
Responsive Card Layout - CSS (7:58)
Responsive Shopping Cart (7:54)
CSS Parallax (4:00)
Responsive footer with bootstrap (5:40)
:hover - User action pseudo classes part 1
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock