4 Websites to recreate to practice your web development skills

The best way to learn web development is by practice. But when you get started you might feel lost. There are just so many things to learn, which makes it hard to choose the right project to get started.

In the following I'll share some sites you can recreate to practice some of the basic concepts. I'd recommend to start from scratch and to avoid CSS frameworks in the beginning. Also try copy it without looking at the source code of the website.


duckduckgo screenshot

You'll learn to use:
- Basic CSS
- Positioning with Flexbox
- Responsiveness with media queries

Grid by Example

Grid by Example screenshot

You'll learn to use:
- layouts with CSS Grid

GitHub Pages

Github Pages screenshot

You'll learn:
- more CSS
- Basic interactivity and effects with Javascript

Hacker News

Hacker News screenshot

You'll learn how to:
- Fetch data from an API with Ajax
- Render dynamic data