computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
2.5 KiB
54 lines
2.5 KiB
--- |
|
title: 'Personal Portfolio' |
|
description: 'Convert the previous simple HTML website into a personal portfolio.' |
|
isNew: false |
|
sort: 3 |
|
difficulty: 'beginner' |
|
nature: 'CSS' |
|
skills: |
|
- 'CSS' |
|
- 'Responsive Design' |
|
- 'Box Model' |
|
- 'Typography' |
|
- 'Flexbox' |
|
seo: |
|
title: 'Create a Personal Portfolio Website Using HTML and CSS' |
|
description: 'Learn how to style a website using CSS by converting a simple HTML website into a personal portfolio.' |
|
keywords: |
|
- 'basic css' |
|
- 'css project idea' |
|
- 'responsive design' |
|
- 'html and css' |
|
roadmapIds: |
|
- 'frontend' |
|
|
|
--- |
|
|
|
> 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](/projects/basic-html-website) 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](/projects/basic-html-website). 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. |
|
|
|
[](https://assets.roadmap.sh/guest/portfolio-template-xdhki.png) |
|
|
|
## 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: |
|
|
|
- Use [Google Fonts](https://fonts.google.com/) to enhance the typography of your website. |
|
- Look into [GitHub Pages](https://pages.github.com/) or [Cloudflare Pages](https://pages.cloudflare.com/) to host your website for free. |
|
- Add support for dark mode using CSS variables. |
|
|
|
--- |
|
|
|
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. |