πŸš€ The Complete Web Developer in 2024

πŸ“Ί 40 hours of video
πŸ“š 401+ lessons
πŸ’» 10 projects
πŸŽ‰ Code FRIENDS10 for 10% off
Christmas elm illustration made with CSS gradients, masks, and clip-path

CSS christmas elf

A CodePen showcasing a Christmas elm illustration created entirely with CSS using multiple gradients, masks, and clip-path techniques.

Made with:

HTML
CSS

Dependencies:

Pug
Stylus
View Code and Demo
CSS illustration of a functional stopwatch

Pure CSS working stopwatch

An illustration of a functional stopwatch made solely with CSS, demonstrating the impressive capabilities of CSS.

Made with:

HTML
CSS

Dependencies:

Pug
Stylus
View Code and Demo
Colorful curved illustration with infinite animation made with HTML and CSS

Infinity curves

A vibrant, curved illustration featuring infinite animation created using only HTML and CSS.

Made with:

HTML
CSS

Dependencies:

Pug
Sass
View Code and Demo
Enchanted library illustration with CSS animations, no JavaScript

Haunted library

A detailed CSS illustration of an enchanted library, featuring subtle animations and crafted without JavaScript.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS PokΓ©mon illustration grid with type filtering

Pokemon quest icon sorter

A CodePen displaying a grid of PokΓ©mon illustrations with filter options by type, all created using only CSS.

Made with:

HTML
CSS

Dependencies:

HAML
SCSS
View Code and Demo
Animated cartoon sailor illustration made with HTML and CSS

The happy sailor

A charming animated illustration of a happy cartoon sailor made with only HTML and CSS.

Made with:

HTML
CSS

Dependencies:

Less
View Code and Demo
CSS illustration of an iris door with smooth hover closing effect

Iris door with pure CSS

A pure CSS illustration of an iris door that features a smooth closing effect on hover.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS doodle illustration view generator

Views CSS doodle

A random CSS doodle generator that creates various illustrations purely with CSS.

Made with:

HTML
CSS
Javascript

Dependencies:

SCSS
CSS Doodle
View Code and Demo
CSS illustration of Queen's Gambit

Pure CSS Queen's Gambit

A responsive pure CSS drawing inspired by the popular Netflix series Queen's Gambit.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo
CSS illustration with parallax hover effect

Mouse-based parallax hero illustration

A beautiful illustration featuring an appealing parallax effect on hover, created with CSS.

Made with:

HTML
CSS
Javascript

Dependencies:

Pug
SCSS
View Code and Demo
Animated sewing machine illustration made with CSS

Pure CSS sewing machine

A CSS-only illustration of a sewing machine with smooth animation effects.

Made with:

HTML
CSS

Dependencies:

Pug
SCSS
View Code and Demo
CSS animated illustration based on The Turin Horse

The Turin horse CSS illustration

An animated illustration inspired by the movie The Turin Horse, created entirely with CSS.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS illustration of anime character Komi with multiple hover effects

Komi-san CSS illustration

A CSS drawing of the anime character Komi with different hover effects depending on the hover zone.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo
Animated cartoon illustration made with CSS

Pure CSS cartoon

A complex CSS-only illustration of a cartoon with beautiful animation effects.

Made with:

HTML
CSS

Dependencies:

PostCSS
View Code and Demo
CSS illustration of an elevated New York subway

NYC moment

A beautiful pure CSS illustration of an elevated New York subway, featured on CodePen.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo
CSS animated illustration of a monkey in an office

Monkey business

An animated illustration of a monkey in an office, created using only CSS.

Made with:

HTML
CSS
JavaScript

Dependencies:

SCSS
Pug
View Code and Demo
Colorful landscape illustration made with CSS

CSS scenery

A CodePen featuring a vibrant, friendly, and colorful landscape illustration made with CSS.

Made with:

HTML
CSS

Dependencies:

SCSS
Pug
View Code and Demo
CSS illustration of the original Nintendo Switch

Nintendo Switch

A realistic drawing of the original Nintendo Switch created purely with CSS.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS illustration of the BMW logo with 50 lines of code

BMW logo

A simple yet realistic illustration of the BMW logo, created with just 50 lines of CSS.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS illustration of Dragon Ball character Chaozu

Chaozu illustration in CSS

An HTML and CSS drawing of Chaozu, a character from Dragon Ball.

Made with:

HTML
CSS

Dependencies:

SCSS
Pug
View Code and Demo
CSS animated illustration of Avengers characters

The Avengers

A simple, animated drawing of the Avengers characters made using pure CSS.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo
CSS illustration of vintage VW Bug

Vintage VW bug

A detailed illustration of the vintage VW Bug created using only CSS.

Made with:

HTML
CSS

Dependencies:

SCSS
Pug
View Code and Demo
CSS seascape illustration with subtle water animation

Sea drawing

A colorful seascape drawing featuring a subtle water animation, made without JavaScript.

Made with:

HTML
CSS

Dependencies:

SCSS
Haml
View Code and Demo
CSS illustration of a functional Rolex watch

Realistic Rolex illustration

A realistic CSS illustration of a functional Rolex watch.

Made with:

HTML
CSS
JavaScript

Dependencies:

SCSS
Pug
View Code and Demo
Realistic CSS Polaroid camera illustration

Polaroid camera

An impressive realistic drawing of a Polaroid camera created with CSS.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS and HTML castle drawing

Magic castle

A beautiful castle drawing made with CSS and HTML.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS lighthouse illustration in a clean style

CSS lighthouse

A clean-style lighthouse illustration crafted with CSS.

Made with:

HTML
CSS

Dependencies:

SCSS
Pug
View Code and Demo
CSS illustration of a woman with an umbrella

Woman drawing

A simple illustration of a woman with an umbrella using CSS

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
Animated CSS and HTML landscape with a windmill

Pure CSS windmill

A beautiful animated landscape with a windmill, created solely with CSS and HTML.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS animated BB-8 illustration from Star Wars

Pure CSS BB-8

A striking animation of BB-8 from Star Wars, illustrated purely with CSS.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
Realistic CSS illustration of a Braun radio

Radio Braun in CSS

A detailed and realistic illustration of a Braun radio, showcasing beautiful craftsmanship.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS animated bicycle illustration

Bicycle illustration

An eye-catching animated bicycle illustration made entirely with CSS.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo
CSS animated happy alpaca illustration

Happy animated alpaca

An animated illustration of a happy alpaca in a cute, simple style.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo
Realistic HTML and CSS pink Nintendo Switch drawing

Switch in CSS

A realistic drawing of a pink Nintendo Switch.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS painter illustration with subtle animation

Painter

A simple illustration of a painter with subtle animation.

Made with:

HTML
CSS

Dependencies:

SCSS
Pug
View Code and Demo
Realistic CSS Amazon Fire remote control drawing

Amazon Fire remote control

A realistic drawing of an Amazon Fire remote control.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
Detailed CSS sunset illustration

A moment of pure CSS

A stunning detailed sunset illustration made entirely with CSS.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo
Elegant CSS dried flowers illustration

Flowers CSS illustration

An elegant dried flowers illustration using a beautiful color palette.

Made with:

HTML
CSS

Dependencies:

Stylus
View Code and Demo
CSS single div rotating haunted moon illustration

Haunted moon

A haunted moon illustration with rotating animation, created with a single div using CSS.

Made with:

HTML
CSS

Dependencies:

Stylus
View Code and Demo
CSS illustration of a woman wearing sunglasses

Woman wearing sunglasses

An illustration of a woman wearing sunglasses, featuring a gorgeous color palette and made with CSS.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo
CSS single div animated hamburger illustration

Burger illustration

An illustration of a hamburger with a cool animation, made with a single div using CSS.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo
CSS single div sword in stone illustration

CSS sword illustration

A CSS illustration of a sword embedded in stone, created using only one HTML div.

Made with:

HTML
CSS

Dependencies:

Stylus
View Code and Demo
CSS pop art-styled glass illustration

Pop art illustration

A pop art-styled glass illustration created using just an HTML div and CSS.

Made with:

HTML
CSS

Dependencies:

Stylus
View Code and Demo
Realistic HTML and CSS candle illustration

Candle illustration CSS

A realistic candle illustration made solely with HTML and CSS.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS animated colored LED tree illustration

Tree with animated LEDs

A beautiful tree illustration of animated colored LEDs.

Made with:

HTML
CSS
JavaScript

Dependencies:

None
View Code and Demo
CSS resizable house illustration with gradient colors

House resizing

A resizable house illustration painted with eye-catching gradient colors.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
Pure CSS axolotl illustration

CSS axolotl

An adorable axolotl illustration flawlessly created using pure CSS.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS draggable ghost illustration with sound effects

Ghost illustration

An illustration of a ghost with draggable animation and sound effects when double-clicked.

Made with:

HTML
CSS
JavaScript

Dependencies:

GSAP
View Code and Demo
Realistic CSS classic Game Boy illustration

CSS illustration of a Game Boy

A realistic classic Game Boy illustration made with CSS.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS owl illustration showing an owl

Owl illustration

A detailed CSS illustration of an owl, using various style properties and positioning.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo
CSS illustration of a parrot

Parrot illustration

A CSS-only illustration of a parrot, featuring detailed styling of its wings, beak, and other features within a simple HTML structure.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo