CSS Friday: Learn Up-to-Date CSS Styling Techniques (2022)

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Welcome To CSS Friday

Lecture 2: #E01- Mobile First Responsive Card Layout For Your Blog

Chapter 2: [NEW] This Friday

Lecture 1: #60- Exquisite Testimonials Cards UI Design

Chapter 3: 2022 Episodes- Posts, Timeline, Comments UI and more

Lecture 1: #E59- Instagram Post UI Design With Comments Section

Lecture 2: #E58- Image Gallery with Blur and Grey Overlay Hover Effect

Lecture 3: #E57 – Incredible Drag & Drop Card UI Design Project

Lecture 4: #E56 – Masonry Grid Layout in Pure CSS

Lecture 5: #E55 – Facebook's Verify Your Account UI Design

Lecture 6: #E54 – Gorgeous Animated Gradient Underline

Lecture 7: #E53 – Adaptive Timeline UI Design In Pure CSS – Part 1

Lecture 8: #E53 – Adaptive Timeline UI Design In Pure CSS – Part 2

Lecture 9: #E52 – Twitter Tweet Box and Feed UI Design Project – Part 1 (Styling Tweet Box)

Lecture 10: #E52 – Twitter Tweet Box and Feed UI Design Project – Part 2 (Validating Tweets)

Lecture 11: #E52 – Twitter Tweet Box and Feed UI Design Project – Part 3 (Feed UI Design)

Lecture 12: #E51 – Creative Dynamic Testimonials Slider With Progress Bar Indicator

Lecture 13: #E50 – Gorgeous Tooltip UI Design With Smooth Animation

Lecture 14: #E49 – Clean Multilevel Comments UI Design With Leave a Comment Form- Part 1

Lecture 15: #E49 – Clean Multilevel Comments UI Design With Leave a Comment Form- Part 2

Lecture 16: #E48 – Click (& Hover) To Copy in Clipboard Project UI

Lecture 17: #E47- Designing Stunning Image Boxes

Lecture 18: #E46- Medium Archive Posts Design

Lecture 19: #E45- Beautiful Testimonials Quotes UI Design (3 Different Types)

Lecture 20: #E44- Apple iPhone Like Switches/Sliders UI Design In Pure CSS (So Good)

Lecture 21: #E43- Creating Light & Dark Mode Feature (Google Home Page)

Lecture 22: #E42- Elegant Floating Input Signup Form With Social Media And Email

Lecture 23: #E41- Creating and Styling Beautiful Table

Chapter 4: 2021 Episodes- Navbar, Accordions, Tabs, Models and more.

Lecture 1: #E40- How To Create Beautiful Post Cards with "Tilt Effect"

Lecture 2: #E39- CSS Secrets: Selecting & Highlighting with CSS

Lecture 3: #E38- CSS Secrets: Smooth Scrolling without Javascript

Lecture 4: #E37- CSS Secrets: Customize Width & Height of ANY Font

Lecture 5: #E36- CSS Secrets: Modifying Color of the Blinking Cursor

Lecture 6: #E35- CSS Secrets: Unlimited Columns

Lecture 7: #E34- CSS Secrets: Modern Heading Divider

Lecture 8: #E33- CSS Secrets: Styling List Using List Marker

Lecture 9: #E32- CSS Secrets: Text Stroke

Lecture 10: #E31- CSS Secrets: Power of Ch Unit

Lecture 11: #E30- CSS Secrets: Display Statistics with Pure CSS Using Conic Gradient

Lecture 12: #E29- CSS Secrets: Disable ANY Clickable link with Only CSS

Lecture 13: #E28- CSS Secrets: Styling First Line

Lecture 14: #E27- CSS Secrets: Creating DropCap Effect

Lecture 15: #E26- Responsive Video In Text Background

Lecture 16: #E25- Epic Image Comparison Slider With Image Filters

Lecture 17: #E24- Stunning Play Video Button with Waves Animation

Lecture 18: #E23- Styling Engaging Links Of Your Websites With CSS

Lecture 19: #E22- Dead Sexy Material Design Login Form

Lecture 20: #E21- Stunning Shine Effect For Your Profile Picture

Lecture 21: #E20- Sexiest Blog Card (And Layout) Design

Lecture 22: #E19- Luxurious Navbar with Topbar- Designing For Large Devices- Part 1

Lecture 23: #E19- Luxurious Navbar with Topbar – Designing For Small Devices- Part 2

Lecture 24: #E18- Beautiful Tabs in Pure CSS

Lecture 25: #E17- Responsive Modal And FullScreen Overlay in Pure CSS

Lecture 26: #E16- Premium Accordion in Pure CSS

Lecture 27: #E15- Smooth Responsive Navigation- Sidebar And Bottom Bar (In Mobile)

Lecture 28: #E14- CSSTricks Like Card Carousel (Styling Cards) Part-1

Lecture 29: #E14- CSSTricks Like Card Carousel (Animation, Theming & Responsive) Part-2

Lecture 30: #E13- Stunning Animated Gradient and Image Text

Lecture 31: #E12- CSS-Tricks Like Comment Section Avatar

Lecture 32: #E11- Creative CSS Shapes Design

Chapter 5: First 10 (Amazing) UI Design Projects

Lecture 1: #E10- Building Lusty Animated Buttons

Lecture 2: #E09- Fascinating Gradient Progress Scrollbar

Lecture 3: #E08- Smooth Gooey Menu Buttons

Lecture 4: #E07- Creative Background Shape Divider

Lecture 5: #E06- Luxury Custom (CSS-Tricks Like) Scrollbar for Your Website (in Webkit)

Lecture 6: #E05- FullScreen Overlay Navbar With Circle Animation

Lecture 7: #E04- Breezy Typing Effect Animation For Your Headlines

Lecture 8: #E03- Facebook Post- The HTML Structure (Part-1)

Lecture 9: #E03- Facebook Post- Styling Main FB Post (Part-2)

Lecture 10: #E03- Facebook Post- Designing Comments Section (Part-3)

Lecture 11: #E02- Facebook Post And Youtube Video Like Loading Preview Animation