✏  STUDENT TASK — Practical 3

Task 3.1: Create 'styles.css' and style your student profile page from Practical 2. Requirements: custom font family, at least 3 different text colours, a styled navigation bar (even if simple), a background colour for the page, and padding/margin on all major elements.

Task 3.2: Build a styled 'homepage' for a fictional Nigerian small business. Ideas: a suya restaurant in Minna, a tailoring shop in Kano, a software startup in Lagos. Include: a header/nav bar, a hero section, a services/products section with at least 3 cards, and a footer. Use an external stylesheet.

Task 3.3: Demonstrate your understanding of the Box Model. Create a page with 3 identical <div> elements. Give each a different combination of padding, border, and margin values. Add a comment in your CSS explaining what each property does. Screenshot the result.

Task 3.4 (CSS Selectors Challenge): Create a page where you demonstrate these selectors: element, class, ID, descendant, and :hover pseudo-class. Each selector must visibly change the appearance of an element. Label each section in the code with comments.

Task 3.5 (Responsive Basics): Add this to your stylesheet: '@media (max-width: 600px) { body { font-size: 14px; } .card-container { flex-direction: column; } }'. Resize your browser window to be narrow. Explain in 3 sentences what happened and why responsive design matters for Nigerian users who mostly browse on mobile phones.