Frontend Practice

Psst! Check out the latest t-shirt at  MonthlyDevTee!

Become a better frontend developer.

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

globe with a search bar

Accelerate your skills by recreating real and carefully chosen websites.

4 part grid of shapes

Improve and test your frontend knowledge with challenges.

lightbulb turning on

Helpful and curated resources to tackle difficult elements.

a color palette sheet

Save time with color palettes for each individual project.

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

#1

#1

Ableton

About page.

What will you learn?

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

#2

#2

Starbucks

Rewards page.

What will you learn?

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

#3

#3

Monogram

Shop page

What will you learn?

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

#4

#4

Monstercat

Album release page.

What will you learn?

  • Dropdown Menus
  • Alternating styles
  • Layout practice
  • Hover states
  • and more!
View Details

#5

#5

Canal Street Market

Home page.

What will you learn?

  • Unique layout.
  • Hover animations.
  • Typography choices.
  • and more!
View Details

#6

#6

Qrates

Why page.

What will you learn?

  • Accordions.
  • Grid style layout.
  • Unique design.
  • and more!
View Details

#7

#7

Backstage Talks

Magazine archive.

What will you learn?

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

#8

#8

Déplacé Maison

Home page.

What will you learn?

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

#9

#9

Red Square

Agency home page.

What will you learn?

  • Minimal design.
  • Scroll animations.
  • Hover effects.
  • and more!
View Details

#10

#10

Nintendo

Game info page.

What will you learn?

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