Personal Portfolio

Convert the previous simple HTML website into a personal portfolio.

Start building, submit solution and get feedback from the community.
2Submit Solutionยท
5 upvotes10 upvotes

The goal of this project is to teach you how to style a website using CSS. You will take the structure from the previous HTML-only project and apply various CSS techniques to enhance its appearance and responsiveness.

In this project, you will style the HTML website structure you created previously in a different project. The focus will be on learning how to use CSS to create responsive layouts, apply color and typography, and enhance the overall design of your website.

Rough mockups of the website structure for mobile and desctop devices are given below. Do not worry about the design details i.e. colors backgrounds etc at this stage; we are not looking for a beautiful design, but a well-structured and responsive website. Just focus on making the layout same as the mockup and ensuring it looks good on different screen sizes.

Styled HTML Website

Submission Requirements

Your submission should include:

  • A fully styled, responsive website with the same structure as the previous project.
  • Consistent use of a chosen color scheme and typography.
  • Proper use of CSS techniques like Flexbox, media queries, and the box model.
  • A responsive navigation bar and well-styled contact form.

Bonus Points

For bonus points, you can:


After completing this project, you will have a solid understanding of how to style a basic HTML website using CSS. You can move on to more advanced topics, such as CSS animations, transitions, and grid layouts, in future projects.

Found a mistake? Help us improve.

Actively Maintained

We are always improving our content, adding new resources and adding features to enhance your learning experience.

Join the Community

roadmap.sh is the 7th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

Rank 7th  out of 28M!

294K

GitHub Stars

Star us on GitHub
Help us reach #1

+90k every month

+1M

Registered Users

Register yourself
Commit to your growth

+1.5k every month

27K

Discord Members

Join on Discord
Join the community

Roadmaps Best Practices Guides Videos FAQs YouTube

roadmap.sh by @kamrify

Community created roadmaps, best practices, projects, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh · Terms · Privacy · Advertise ·

ThewNewStack

The top DevOps resource for Kubernetes, cloud-native computing, and large-scale development and deployment.