# Frontend Mentor — Blog Preview Card: Feedback **Challenge:** Blog Preview Card (Newbie) **Marker:** Antigravity AI **Date:** 2026-04-05 --- ## Overall Assessment: ✅ Excellent — 9/10 This is an exceedingly well-executed challenge. The visual match to the design is nearly pixel-perfect, and modern CSS techniques such as `min()` functions for fluid sizing and extensive use of custom properties are employed perfectly. A few minor semantic HTML enhancements and a simple typo fix would make this flawless. --- ## ✅ What Was Done Well ### 1. Accurate Visual Result The rendered component captures the specific "brutalism-lite" aesthetic of the design flawlessly. The solid, sharp drop shadow (`box-shadow: 6px 6px var(--gray-900);`) and crisp borders are exactly what the brief required. ### 2. Modern Responsive Sizing Using `width: min(var(--mb-card-width), calc(100% - 48px));` is a fantastic, modern approach. It prevents the card from touching the edges on very small screens while keeping it contained up to a maximum width. This completely eliminates the need for some media queries. ### 3. CSS Custom Properties Excellent use of `:html` variables (`var()`) for colors, padding, rounding, and sizing. It makes the codebase much easier to maintain and clearly establishes a design system rather than relying on magic numbers scattered throughout the CSS. ### 4. Layout Architecture Mixing CSS Grid (`place-items: center` on the `body`) for perfect macro-level centering and Flexbox for the card's internal micro-layout stack is exactly how modern component layouts should be structured. --- ## ❌ Issues & Areas to Improve ### 1. 🐛 Typo in Viewport Units (Bug) **File:** `index.html`, line 61 ```css /* Current — BROKEN */ width: 100dwh; ``` `dwh` is not a valid CSS unit, which means the browser will silently ignore it. You likely meant `dvw` (dynamic viewport width). However, as a best practice, setting `width: 100vw` or `100dvw` on the `body` is usually discouraged anyway, as it can cause unexpected horizontal scrollbars on Windows or Linux when vertical scrollbars appear. > **Fix:** Remove it or change it to `width: 100%;` (though block elements like body naturally take up 100% width anyway). --- ### 2. 🏷️ Semantic HTML Elements for Dates **File:** `index.html`, line 152 ```html
Published 21 Dec 2023
``` Using a heading tag (`
`) for something that isn't a section title throws off the document's heading structure for screen readers. Headings should be used strictly for outlining the document hierarchy. > **Fix:** It is much better to use a standard `

` tag and the semantic `

> ``` --- ### 3. 🔗 Missing `href` on the Anchor Tag **File:** `index.html`, line 154 ```html

HTML & CSS Foundations

``` An anchor `` tag without an `href` attribute is treated by browsers as a placeholder rather than an interactive hyperlink. This means it won't be reachable via keyboard navigation (Tab). > **Fix:** Add an `href="#"` (or an actual link) to make it fully accessible. > ```html >

HTML & CSS Foundations

> ``` --- ### 4. 🖱️ Hover Target Structure **File:** `index.html`, line 138 ```css /* Current */ h1:hover { color: var(--yellow); cursor: pointer; } ``` It is generally better practice to apply interactive hover and focus styles directly to the interactive element itself (`a:hover, a:focus-visible`) rather than its parent `

` container. This ensures keyboard navigation handles the focus states properly on the clickable target. > **Fix:** Target the anchor tag. > ```css > h1 a:hover, > h1 a:focus-visible { > color: var(--yellow); > /* cursor pointer is automatic on anchors with href */ > } > ``` --- ## 📊 Scoring Breakdown | Category | Score | Notes | |------------------------|-------|-------| | Visual accuracy | 10/10 | Pixel-perfect implementation of the design | | Code quality / CSS | 9/10 | Excellent variable usage; minor typo in `dwh` unit | | Responsiveness | 10/10 | Flawless use of CSS `min()` function | | Semantic HTML | 7/10 | Needs `href` on anchor, and `