DEV Community

Cover image for 6 HTML and CSS Projects For Your Portfolio
Moemin Mamdouh πŸ‘¨β€πŸ’» for Codewell

Posted on • Edited on

6 HTML and CSS Projects For Your Portfolio

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- Waitlist Page

2- Multi-step Form

3- Fiber Landing Page

4- Spense Landing Page

5- Nested Comments

6- Remix Landing Page with Dark/Light Mode

1- Waitlist Page

Hosterr Codewell Challenge.png

You will learn:

  • CSS Transforms
  • Flex or Grid
  • Responsive design

2- Multi-step Form

Subway Multistep Form Codewell Challenge.png

You will learn:

  • Creating multi-step forms
  • Creating custom components
  • Responsive design

3- Fiber Landing Page

Fiber Codewell Challenge.png

You will learn:

  • Absolute positioning
  • Flex/Grid
  • Creating cards

4- Spense Landing Page

Spense Codewell Challenge.png

You will learn:

  • Absolute positioning
  • Flex/Grid
  • Creating cards

5- Nested Comments

Comment Codewell Challenge.png

You will learn:

  • Positioning
  • Created nested comments

6- Remix Landing Page with Dark/Light Mode

Remix Codewell Challenge.jpg

You will learn:

  • Creating dark and light mode pages
  • Work on a full sign up and onboarding process
  • Creating blog cards
  • Using variables and mixins to make your life easier

You can also see a walkthrough of Codewell's challenges on Youtube.

Top comments (0)