Introduction
  • Complete Code Used in this course [ Including Project ]
  • More FREE Resources - Web Dev
  • Google Chrome Dev Tools
  • Syntax & Comments
  • BONUS tips - Inline - Internal - External style sheets
  • Quiz Buzz
Level 1 - Colors & background
  • Colors
  • Backgrounds & their attributes
  • Free Stock Photos
  • Quiz Bizz
Level 2 - Borders, Margins & Padding
  • Borders
  • Border-radius & Margin
  • Padding & Margin - [ Updated New Lecture Video ]
  • Ahem... Ahem....
Level 3 - Icons and Links
  • FontAwesome Icons vs Glyphicons vs Google Icons
  • Links and their states
  • Quiz Bizz
Level 4 - Display, Position, Overflow
  • Display - Inline, Inline-block, Block
  • Position - Absolute, Relative, Static, Sticky
  • Overflow - Visible, Hidden, Scroll, X, Y
  • Are you able to position the elements properly?
Level 5 - Pseudo-Elements & Combinators
  • Combinators - select any css elements you want
  • Pseudo-Elements :: I'm there, but not
  • Pseudo-Classes : I'm here, but not
  • BONUS: Additional resource ( optional )
  • Quiz Bizz
Level 6 - Text & Fonts : the stuff you never knew
  • Text Formatting : Exploring them all
  • Fonts - 1 Font-Family & using external Google Fonts in your website for FREE!
  • Fonts 2 - Font Sizes like px, em, rem, vw, vh - IMPORTANT!!
  • Float - The water you pour to make it float
  • BONUS: Opacity - make stuff transparent
Advanced Css3: Level 1 - Gradients
  • Gradients - 1 Linear Gradients
  • Gradients - 2 Radial Gradients
  • BONUS: Amazing way to create the perfect Gradient you want in Seconds
Advanced Css3: Level 2 - Animation using CSS Only
  • Transitions - 1 - create motion
  • Transitions - 2 - control the speed
  • Transform2D - 1 - translate()
  • Transform2D - 2 - rotate()
  • Transform2D - 3 - scale() & skew()
  • Transform2D - 4 - matrix()
  • Transform3D - 1 - rotateX(), rotateY(), rotateZ()
  • Transform3D - 2 - Perspective : woohoo!
  • BONUS: Media Queries [ COMPULSORY ]
  • Keyframes Animations - 1 - from and to
  • Keyframes Animations - 2 - percentages
  • Keyframes Animations - 3 - Iteration & Direction
  • Keyframes Animations - 4 - Speed & Fill Mode
BONUS: A Web dev Project
  • Mark-up of the nav-bar
  • Background Image & Container
  • Navbar Part 1 - Gradient & Sitename
  • Navbar Part 2 - Navigations & Box-shadow
  • The Glassy Side Hover
  • The Contact Form Part 1 - Markup
  • The Contact Form Part 2 - Styling the Form [ IMPORTANT ]
  • The Blog - In one video
  • The Blurry Background [ BONUS - OPTIONAL ]
  • Adding Responsiveness - Making it look great on All Devices & Animations
  • What's next?