Lab 1 · Build and Style Your First Webpage (HTML/CSS)

🎯 Objective

Build a finished, styled single-page profile site from an empty folder — the exact workflow every web project starts with.

🧩 Skills You Will Practice

• Semantic HTML
• CSS selectors and box model
• Flexbox layout
• Responsive checking

🧰 What You Need

• VS Code (free)
• Any modern browser
• A folder named lab01-profile
• One profile image you own or a free placeholder

📋 Step-by-Step Tasks

1. Create lab01-profile and inside it index.html. Add the HTML5 skeleton, a title with your name, and a viewport meta tag — without it mobile layout will not behave.
2. Add semantic structure: header with your name and role, main with About, Skills and Projects sections, and a footer. Use h1 once, h2 for sections, never skip heading levels for styling.
3. Write real content: a 3-line about paragraph, 5 skills in a list, and 2 project cards with a title, one-line description and a link placeholder.
4. Create style.css and link it. Set a font stack, a dark background, a readable text colour, max-width 960px centred layout, and consistent spacing using margin and padding.
5. Style the skills row with display:flex, gap and flex-wrap. Style project cards with border, border-radius and padding so hierarchy is visible without colour alone.
6. Add a hover state for links and buttons, and a media query below 640px that stacks the flex row into one column.
7. Open the page, resize the browser to phone width, fix anything that overflows, and validate heading order and image alt text.

✅ Expected Result / Deliverable

A working index.html + style.css profile page that looks clean on desktop and phone, with About, Skills and Projects sections — screenshot both widths as proof.

⚠️ Common Mistakes

• Styling with br tags and spaces instead of CSS
• Forgetting the viewport meta tag
• No alt text on images
• Checking only on a wide screen