Become a better frontend developer.

Take your frontend skills to the next level by recreating real websites.

Accelerate your skills by recreating real and carefully chosen websites.

Improve and test your frontend knowledge with challenges.

Helpful and curated resources to tackle difficult elements.

Save time with color palettes for each individual project.

Photo assets and more.(Coming soon!)

Below you will find our first collection of ten handpicked websites to recreate. So, are you up for the challenge?

Ableton

About Page

#1

What will you learn?

Typography choices
Spacing
Unique grid layout
Multi-column footer
and more!

Starbucks

Reward page.

#2

What will you learn?

Sticky/fixed header
Tabbed sections
Color choices
Layout practice
and more!

Monogram

Shop page.

#3

What will you learn?

Hero image slider.
Image hover transitions
Dropdown menu
Menu hide/appear on scroll
and more!

Monstercat

Album release page.

#4

What will you learn?

Dropdown Menus
Alternating styles
Layout practice
Hover states
and more!

Canal Street Market

Home page.

#5

What will you learn?

Unique layout.
Hover animations.
Typography choices.
and more!

Qrates

Why page.

#6

What will you learn?

Accordions.
Grid style layout.
Unique design.
and more!

Backstage Talks

Magazine archive.

#7

What will you learn?

Scroll transitions.
Color choices.
Fixed content.
Minimal layout.
and more!

Déplacé Maison

Home page.

#8

What will you learn?

Unique layout.
Cursor animations.
Draggable slider.
Hover effects.
and more!

Red Square

Agency home page.

#9

What will you learn?

Minimal design.
Scroll animations.
Hover effects.
and more!

#10

Nintendo

Game info page.

#10

What will you learn?

Dropdown menus.
Hover animations.
Image lightboxes.
Content carousels.
and more!