github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
Roadmap to becoming a developer in 2022
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.
5396 Commits
206 Branches
4 Tags
437 MiB
 
 
 
 
 
Tag: Branch: Tree: 3accbf503b
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '3accbf503b'
${ noResults }
developer-roadmap/src/data/projects/portfolio-website.md

2.5 KiB
Raw Blame History

title description isNew sort difficulty nature skills seo roadmapIds
Personal Portfolio Convert the previous simple HTML website into a personal portfolio. false 3 beginner CSS [CSS Responsive Design Box Model Typography Flexbox] [{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]}] [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 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.