Design and develop a complete, visually appealing personal portfolio webpage demonstrating key HTML and CSS concepts.
<!DOCTYPE html>, correct <head> metadata (charset, viewport, title), and link to an external or internal CSS.
<nav> bar using an unordered list <ul><li><a> with at least 4 links: Home, About, Skills, Contact. Links should scroll to each section.
<section> with your name (as <h1>), branch & college in a <p>, and a tagline or short intro. Optionally include a profile photo using <img>.
<section id="about"> with an <h2> heading and 2–3 paragraphs (<p>). Use <strong>, <em>, or <mark> to highlight key words.
<ul> or styled <span> badges. Group technical and soft skills separately using <div> or <article>.
<div class="card">. Each card must have a <h3> project title, a short <p> description, and an <a> link or button.
<form> with: Name (type="text"), Email (type="email"), Phone (type="tel"), Message (<textarea>), and a styled Submit <button>. Use <label> for each field.
<footer> with a copyright line, your name, and at least 2 social media links using <a href target="_blank">. Use the <address> tag for contact info if applicable.
:root { --primary: ...; }). Use at least 3 complementary colors for background, text, and accents.
<link> in the <head>. Use at least 2 font-weight variations.
display:flex, background color, padding, and a:hover with color change or underline transition.
display:flex or display:grid for at least one section layout (e.g., skills badges row, project cards grid, two-column About section).
border-radius, box-shadow, padding, and a subtle background or border. Cards must stand out from the page background.
:hover effects on buttons and cards — e.g., transform:translateY(-4px), background color change, box-shadow increase. Use transition: all 0.3s ease.
@media (max-width: 768px)) to make the layout stack vertically on mobile — nav links, project cards, and skills section.
width % via CSS), a CSS animation (@keyframes), or a styled form with :focus highlighting on inputs.
Use this as a starting skeleton — build and style each section:
| Component | Excellent (Full marks) | Good (75%) | Needs Work (50%) | Marks |
|---|---|---|---|---|
| HTML Structure | All 8 elements, semantic tags, no errors | 6–7 elements, mostly correct | 4–5 elements, some errors | 50 |
| CSS Styling | All 8 CSS tasks, visually polished | 6–7 tasks, decent look | 4–5 tasks, minimal styling | 50 |
| Total | 100 | |||
Your complete portfolio webpage
External stylesheet (or internal <style>)
Desktop & mobile view (PNG/JPG)
All files zipped or a public GitHub link
Use <header>, <main>, <section>, <article>, <footer> — not just <div> everywhere.
Define colors once in :root and reuse them. Makes your code clean and easy to update.
display:flex; justify-content:space-between; is perfect for navigation bars and card rows.
display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); makes responsive card grids automatically.
Every <input> must have a matching <label for="id">. This is both good practice and accessibility.
Press F12 → Device toolbar in Chrome to preview your page at 375px width before final submission.
.zip of your project folder OR share a public GitHub repository link with your faculty.