Projects›Core· 90 min read
Project: Style Your Profile Page
Take the plain HTML profile page from the HTML course and transform it with CSS into something you are proud of.
What you will learn
- Apply CSS to existing HTML
- Use colours, fonts, spacing and the box model together
- Produce a polished, personal page
The brief
Open the profile page you built in the HTML course and give it a full visual makeover with an external stylesheet.
Requirements checklist
- Link an external
styles.cssand add* { box-sizing: border-box; }. - Set a nice
font-family(a Google Font is a bonus) and comfortableline-height. - Choose a brand colour and use it consistently (consider CSS variables).
- Style the profile photo — try
border-radius: 50%for a circle. - Add padding, spacing and a
max-widthcentred container. - Give any cards a border, radius and a soft shadow.
- Style links and add a hover effect.
- Make it responsive — readable on a phone.
Tip: Restraint reads as professional: one accent colour, generous whitespace, one or two font sizes. When in doubt, add space, not decoration.
✍️ Practice
- Style your profile page to meet every checklist item.
- Add at least one hover transition and one shadow.
🏠 Homework
- Polish your styled profile and save it — it is now a real portfolio piece.