Blog

Blog

6 Frontend Projects For Your Developer Portfolio

6 Frontend Projects For Your Developer Portfolio

Subscribe to my newsletter and never miss my upcoming articles

After speaking to seasoned developers, you will quickly realize that the best way to improve your portfolio is by building projects. It is probably the best way to get better, because along the way, you'll be facing challenges that will require research to solve, and that ultimately improves your skills.

We've made a list of 6 HTML and CSS Projects you can practice on and include in your portfolio!

Table of Content

1- Contrast Design Resource Directory

2- Fiber Landing Page

3- Spense Landing Page

4- Remix Landing Page

5- Nested Comments

6- Gradie Sign Up Page

Let's get started with what you'll practice in each of these projects.

1- Contrast Design Resources Directory

Contrast Design Directory

You will practice:

  • Absolute positioning
  • Fetch and loop in Javascript
  • Simple CRUD operations

2- Fiber Landing Page

Fiber Codewell Landing Page

You will practice:

  • Absolute positioning
  • Flex/Grid
  • Creating cards

3- Spense Landing Page

Spense Codewell Landing Page

You will practice:

  • Absolute positioning
  • Flex/Grid

4- Remix Landing Page

Spense Codewell Challenge.png

You will practice:

  • Creating Dark and Light Mode layouts.
  • Creating an onboarding process.
  • Creating CSS variables. and much more

5- Nested Comments

Comment Codewell Challenge.png

You will practice:

  • Positioning
  • Created nested comments

6- Gradie Sign Up Page

Gradie Codewell Challenge.jpg

You will practice:

  • Centering layouts and absolute positioning.
  • 50/50 layouts.

If you want to be updated when we release new challenges, follow us on Twitter

 
Share this