Coding Duolingo

December 2023

A screenshot of the levels page of Duolingo.

The challenge

The goal of this project was to put your HTML, CSS and JS skills to the test by replicating two pages of an existing website. I chose to replicate the home and levels pages from Duolingo, entirely from scratch.

A screenshot of the home page of Duolingo. A screenshot of the home page of Duolingo in dark mode. A screenshot of the levels page of Duolingo in dark mode.

Accessibility at its core

One of the main focuses of this project was accessibility. I made sure that everyone is able to use this page comfortably. It is optimized for screenreaders under the hood and it accomodates a high contrast mode for people with reduced vision.

A screenshot of the levels page of Duolingo in a high contrast theme.

1.211

lines of CSS

1

class/ID

0

divs/spans

HTML/CSS Semantics

The other part of the challenge was to use as few classes, id's, divs and spans as possible. I accomplished this by using the CSS selectors to their fullest.

Try it out

Try the website out for yourself! Please keep in mind that the webpages are optimized for a viewport width of between 320px and 560px. The website responds to your system settings for dark/light mode and high-contrast mode.

Visit the website

The result

With this project, I improved my HTML/CSS skills a lot. By replicating the Duolingo website exactly from scratch, I became more familiar with all the things CSS has to offer. I also improved my front-end JavaScript skills with intersection observers and audio players.