Website Development Assignment
🎯 Objective
The goal of this assignment is to help you practice HTML structure and CSS styling by
designing a fully functional personal portfolio website.
📌 Requirements
1. General Structure
- Your website must have at least 4 pages:
- Home Page
- About Me
- Projects / Work
- Contact Page
2. HTML Requirements
- Use proper semantic HTML5 tags (<header>, <nav>, <section>, <article>, <footer>).
- Include a navigation bar that links all pages.
- Add at least one image on each page (profile picture, project screenshots, etc.).
- Use at least one ordered list and one unordered list.
- Include a contact form with fields for name, email, and message.
3. CSS Requirements
- Use external CSS (in a separate .css file).
- Style the navigation bar (hover effects, active links).
- Use CSS Flexbox or Grid for layout.
- Apply consistent fonts and colors (choose a theme).
- Make the website responsive (looks good on both desktop & mobile).
4. Design Guidelines
- Choose a color scheme (at least 3 complementary colors).
- Use Google Fonts or system fonts for typography.
- Ensure good contrast for readability.
- Keep the design clean and professional.
📂 Deliverables
- A zipped folder containing:
- All HTML files
- A single CSS file
- An images folder (if used)
✅ Grading Criteria (Example)
Criteria Points
Correct HTML structure & semantic tags 20
Proper CSS styling & external stylesheet 20
Navigation bar & page linking 15
Use of images, lists, and form 15
Responsive design (Flexbox/Grid, media 20
queries)
Creativity & design aesthetics 10
Total 100
💡 Extra Challenge (Optional)
- Add a CSS animation or transition (e.g., hover effects on buttons).
- Create a dark mode toggle using CSS variables.
- Use anchor links for smooth scrolling on the same page.
