Learn CSS

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Explore a comprehensive series of CSS tutorials covering a wide range of topics, from creating visually appealing components to implementing beautiful animations and effects. Dive into practical projects like building a custom progress bar, implementing a light/dark theme toggle, crafting a Netflix-style mobile navigation, and designing a responsive animated navigation bar. Learn essential CSS techniques such as smooth scrolling, custom checkboxes, and image reflection effects. Develop interactive elements using JavaScript, including a traffic lights simulator, random picker visualizer, and PokeDex. Create engaging animations like kinetic loaders, rotating circles, and wave effects. Practice responsive design principles by building a newsletter and exploring full-page backgrounds. Challenge yourself with a coding project to convert 10 website designs into HTML and CSS implementations.

Syllabus

Line Through Effect - CSS and JavaScript - Day 05.
Custom Progress Bar with CSS and JavaScript - Day 02.
Light/Dark Theme Toggle with CSS and JavaScript.
Jumping Loading Animation with CSS.
CSS3 Pulse Effect.
Netflix Mobile Navigation Animation with CSS and JavaScript.
CSS Smooth Scroll - Only one line - Day 14.
Traffic Lights Simulator with CSS and JavaScript - Day 09.
JavaScript Random Picker Visualizer & 1000 Subs Giveaway .
CSS Custom Checkbox - Day 08.
Image Reflection - CSS effect - Day 10.
Mix Blend Loader - CSS Tutorial - Day 12.
Waves Animation with JavaScript - Day 18.
PokeDex - JavaScript Tutorial - Day 19.
Kinetic Loader Animation with CSS - Day 24.
HTML and CSS Newsletter Design - Day 25.
Setting Goals For 2020.
Rotating Circles Animation - Day 26.
Wave Animation on inputs - CSS and JavaScript Tutorial - Day 27.
CSS Triangle Shape - Day 28.
Zoom Effect - CSS and JavaScript tutorial - Day 30.
Animated Sidebar Menu - CSS and JavaScript tutorial - Day 31.
Responsive Navigation with Hamburger Menu - CSS And JavaScript Tutorial.
I "Hacked" YouTube's Homepage with a Chrome Extension .
Create a Modal (Popup) with HTML/CSS and JavaScript.
Responsive Animated Navigation Bar | HTML, CSS and JavaScript Tutorial.
CSS Only Heart Shape | CSS Beginner Tutorial.
CSS Only Heart Shape | CSS Beginner Tutorial.
Heart Pulse Effect | CSS Animation Tutorial.
Heart Pulse Effect | CSS Animation Tutorial.
Donate Card | Design to CSS Project.
Full Page Background | Simple CSS Tutorial.
Building 10 Websites - From Design to HTML and CSS - Coding Challenge .