Practice & Assessment
Test your understanding of Building the Portfolio with HTML and CSS
Multiple Choice Questions
6Which CSS value for grid-template-columns creates a responsive layout that adjusts column count automatically without media queries?
What is the correct reason to use min-height: 100vh instead of height: 100vh on a hero section?
Which property makes anchor link clicks in a portfolio animate smoothly instead of jumping instantly?
What does the CSS clamp(2rem, 5vw, 4rem) function do when applied to a font-size?
Why should external links in a portfolio (GitHub, LinkedIn) include target='_blank'?
What is the purpose of CSS custom properties defined on :root in a portfolio's stylesheet?
Coding Challenges
1Build a Responsive Projects Grid Section
Create a standalone HTML file with a projects section containing exactly three project cards using CSS Grid. Each card must include: a placeholder image with correct aspect-ratio styling, a project title in an h3, a one-sentence description, and two links (Live Demo and GitHub). The grid must use repeat(auto-fill, minmax(280px, 1fr)) and collapse to a single column at 375px viewport width with no media queries. Apply a hover transform to each card. Input: none (static HTML/CSS). Output: a responsive page that displays 3 columns at 1200px and 1 column at 375px. Estimated time: 20–30 minutes.
Mini Project
Full Static Portfolio Page
Build a complete single-page portfolio using only HTML and CSS — no JavaScript. The page must include all five sections (hero, projects, skills, about, contact) with semantic HTML elements, a sticky navbar with smooth scroll anchor links, a responsive CSS Grid projects section with at least two cards, a skill tags section using flexbox wrap, a contact section with mailto and external links, CSS custom properties for the color system, and clamp() for fluid typography. The layout must be fully responsive across 375px, 768px, and 1280px viewports. Commit the final result with a meaningful Git message.