[{"id":866,"created_at":"2025-10-10T11:31:26.348197+00:00","html":"\n\n\n \n \n CSS Interview Challenge\n \n\n\n

CSS Interview Challenge

\n \n

\n\n

\n \n

1. CSS Layout & Positioning

\n\n

Flexbox (flex-shrink)

A (grow)

B (shrink)

C (fixed)

\n\n

Positioning

Parent (relative)

I'm absolutely positioned

\n\n \n

2. Core Web Vitals & Performance

\n\n

Image types

Content image (art)\" alt=\"art example\" />\n

UI image\" alt=\"ui example\" />\n

\n\n

Sprite demo

\n\n

External API image handling

Untrusted API image\" alt=\"api\" />\n

\n\n \n

3. CSS Backgrounds & Images

\n\n

Background aligned right (use background-position)

\n\n

SVG Styling

\n \n \n

\n\n \n \n\n \n

5. HTML & Media

\n\n

Picture vs img

\n\n

Video (muted autoplay)

\n\n \n

6. CSS Advanced Features

\n\n

Transitions & Animations

\n \n

Keyframe animation box

\n\n

Typography (clamp)

This headline should scale with clamp().

\n\n \n

3rd Interview — Selectors, Specificity & Cascade

\n\n

div (no class)

.card element

#app element (note: header has this id)

\n \n

\n\n \n\n

\n \n

\n\n

\n Hover / focus me\n

\n\n

Move me with transform or left

\n\n

flex item

\n\n \n\n\n\n\n\n\n\n\n","css":"/* ========== challenge.css ========== */\n/* Instructions:\n - You are NOT allowed to change the HTML.\n - All answers / fixes should be implemented here.\n - Each block below corresponds to one or more interview questions.\n - Where marked with TODO: implement the required behavior.\n*/\n\n/* ---------- Reset & base ---------- */\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\n line-height: 1.4;\n margin: 0;\n color: #111;\n padding: 24px;\n background: #f8fafc;\n}\n\nheader {\n display: flex;\n align-items: center;\n gap: 18px;\n margin-bottom: 18px;\n}\n\nheader h1 {\n margin: 0;\n font-size: 20px;\n}\n\nnav a {\n margin-right: 8px;\n text-decoration: none;\n padding: 6px 10px;\n border-radius: 6px;\n}\n\nnav a.active {\n background: #111;\n color: #fff;\n}\n\n/* ========== 1. CSS Layout & Positioning ========== */\n/* Flexbox - demo container */\n.flex-demo {\n display: flex;\n gap: 8px;\n width: 720px;\n border: 1px dashed #ddd;\n padding: 12px;\n background: #fff;\n}\n\n/* TODO: Flexbox questions:\n - Demonstrate flex-shrink behavior.\n - Make .item-a grow to take remaining space (flex-grow).\n - Make .item-b shrink more aggressively than the others.\n - Make .item-c appear fixed width (no shrink).\n Implement by changing flex properties below.\n*/\n.flex-item {\n padding: 12px;\n background: #eef;\n border-radius: 6px;\n}\n\n/* initial naive values (candidate should edit) */\n.item-a {\n flex: 0 1 100px;\n}\n\n/* intended to grow */\n.item-b {\n flex: 0 1 200px;\n}\n\n/* intended to shrink; candidate may change flex-shrink */\n.item-c {\n flex: 0 1 300px;\n}\n\n/* fixed width, no grow/shrink */\n\n/* Positioning */\n.pos-wrapper {\n position: relative;\n border: 1px solid #e0e0e0;\n padding: 18px;\n margin-top: 14px;\n height: 120px;\n background: #fff;\n}\n\n.pos-box {\n background: #f4f7ff;\n padding: 6px;\n display: inline-block;\n}\n\n.pos-abs {\n /* TODO: make this absolutely positioned inside .pos-wrapper in the top-right corner */\n position: absolute;\n top: 12px;\n right: 12px;\n background: #fffbeb;\n padding: 8px;\n border-radius: 4px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, .06);\n}\n\n/* ========== 2. CORE WEB VITALS & PERFORMANCE ========== */\n/* Image display */\n.images-row {\n display: flex;\n gap: 12px;\n margin: 12px 0 20px;\n}\n\n.cwv-img {\n width: 300px;\n height: 150px;\n object-fit: cover;\n border-radius: 8px;\n display: block;\n box-shadow: 0 1px 4px rgba(0, 0, 0, .06);\n}\n\n/* Sprite demo:\n - TODO: Use a single sprite (one background image) and show three icons by changing background-position.\n - For the challenge we provide \"sprite-demo\" which currently uses a gradient as placeholder.\n Candidate should replace or adjust background-position values to show different sprite frames if a sprite is supplied.\n*/\n.sprite-demo {\n width: 120px;\n height: 40px;\n background-image: linear-gradient(90deg, #cfe8ff 0 33%, #ffd7b3 33% 66%, #d7ffd9 66% 100%);\n background-size: 360px 40px;\n /* pretend this is a sprite with 3 frames */\n border-radius: 6px;\n display: inline-block;\n}\n\n/* API image handling: add object-fit and a subtle overlay if needed */\n.api-image img {\n width: 100%;\n max-width: 420px;\n height: 150px;\n object-fit: cover;\n border-radius: 6px;\n}\n\n/* ========== 3. Backgrounds & Images ========== */\n.bg-right {\n width: 100%;\n height: 120px;\n margin: 12px 0;\n border-radius: 6px;\n background-image: linear-gradient(to right, #fff 0 50%, #e8f7ff 50% 100%);\n background-repeat: no-repeat;\n /* TODO: demonstrate default value vs explicit */\n /* TODO: change background-position to align the graphic to the right, as interview asks */\n background-position: right center;\n background-size: auto 80%;\n padding: 12px;\n}\n\n/* Inline SVG styling:\n - TODO: change the SVG circle and rect colors via CSS.\n - The property used to style SVG shapes is `fill` (and `stroke`).\n*/\n.logo {\n width: 160px;\n height: 48px;\n margin-top: 8px;\n display: block;\n}\n\n.logo-circle {\n fill: #3b82f6;\n}\n\n/* candidate can change */\n.logo-rect {\n fill: #06b6d4;\n}\n\n/* ========== 4. Accessibility ========== */\n/* Screen reader helpers */\n.sr-only {\n /* TODO: Implement the classic \"screen-reader-only\" utility (visually hidden but available to SRs) */\n position: absolute !important;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n}\n\n/* Decorative images should be ignored: candidate can use aria-hidden or empty alt in HTML.\n There's also CSS ways (not recommended) but highlight ARIA usage in comments. */\n\n/* ========== 5. HTML & Media ========== */\n.responsive-picture img {\n width: 100%;\n max-width: 420px;\n display: block;\n border-radius: 8px;\n}\n\n/* Video placeholder (no src) */\n.demo-video {\n width: 100%;\n max-width: 420px;\n height: 200px;\n background: linear-gradient(180deg, #00000022, #00000011);\n border-radius: 8px;\n display: block;\n}\n\n/* ========== 6. CSS Advanced Features ========== */\n/* Transition */\n.trans-btn {\n padding: 10px 16px;\n border-radius: 8px;\n border: none;\n cursor: pointer;\n background: #111;\n color: #fff;\n transition: transform 220ms ease, box-shadow 220ms ease;\n /* TODO: explain which properties are transitioning */\n}\n\n.trans-btn:hover {\n transform: translateY(-6px);\n box-shadow: 0 8px 24px rgba(0, 0, 0, .12);\n}\n\n/* Keyframes: TODO implement a small keyframe animation for .kf-box */\n.kf-box {\n width: 120px;\n height: 60px;\n border-radius: 8px;\n margin-top: 12px;\n display: inline-block;\n background: #fde68a;\n /* candidate should create a keyframes animation to move/scale/rotate */\n animation: pulse 2s infinite ease-in-out;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n\n 50% {\n transform: scale(1.06);\n opacity: 0.92;\n }\n\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n/* Typography: clamp()\n TODO: implement a fluid headline using clamp(min, preferred, max) for .fluid-type\n*/\n.fluid-type {\n font-weight: 700;\n font-size: clamp(18px, 3.5vw, 30px);\n margin-top: 8px;\n}\n\n/* ========== 3rd Interview: Selectors, Specificity & Cascade ========== */\n\n/* Cascade origins & priorities - (author styles here will generally override user-agent).\n Specificity exercises below: */\n\ndiv {\n padding: 8px;\n background: #fff;\n border-radius: 6px;\n margin-bottom: 8px;\n}\n\n/* Example selectors to practice specificity — the candidate can toggle/comment to see which rule wins. */\n\n/* Low specificity */\n.card {\n background: #fff7f3;\n}\n\n/* Class selector specificity (0,1,0) */\n.card {\n border: 1px solid #ffd6cc;\n}\n\n/* ID selector specificity (0,1,0 for classes? Actually ID = (0,1,0) vs class = (0,0,1) — candidate can explain) */\n#app {\n border: 1px solid #c0eaff;\n padding: 6px;\n}\n\n/* Complex selector */\nheader nav a.active:hover {\n text-decoration: underline;\n font-weight: 700;\n}\n\n/* A more specific example for the ul#menu > li:not(.disabled) a::before */\nul#menu>li:not(.disabled) a::before {\n content: \"• \";\n color: #06b6d4;\n}\n\n/* Attribute + class example */\n[data-role=\"dialog\"] .btn.primary {\n background: #0ea5a4;\n color: white;\n padding: 8px 12px;\n border-radius: 6px;\n}\n\n/* :not() affects specificity only by the inner selector; :not(.class) does not add extra weight beyond the inner selector itself. */\n/* Pseudo-class and pseudo-element examples: */\n.pseudo-test a.state:hover {\n color: #ef4444;\n}\n\n/* :hover is a pseudo-class (counts like class) */\n.pseudo-test a.state::after {\n content: \" ↗\";\n opacity: .6;\n}\n\n/* ::after is pseudo-element (low specificity) */\n\n/* Transforms vs left:\n - Candidate should explain when to use transform: translateX() (GPU-accelerated, avoids layout) vs left (causes reflow).\n - Demonstration: */\n.move-demo {\n width: 160px;\n height: 40px;\n line-height: 40px;\n text-align: center;\n background: #e6f4ea;\n border-radius: 6px;\n margin-top: 12px;\n transition: transform .35s ease;\n}\n\n/* This hover uses transform (preferred) */\n.move-demo:hover {\n transform: translateX(18px);\n}\n\n/* Flex sizing specifics demonstration */\n.flex-sizing {\n display: flex;\n gap: 8px;\n margin-top: 12px;\n}\n\n.fz-item {\n flex-basis: 180px;\n min-width: 80px;\n background: #fff0f6;\n padding: 8px;\n border-radius: 6px;\n}\n\n/* ========== Helper / visual polish ========== */\nmain {\n display: grid;\n gap: 20px;\n max-width: 920px;\n margin: 0 auto;\n}\n\nsection {\n background: #fff;\n padding: 16px;\n border-radius: 10px;\n box-shadow: 0 1px 4px rgba(2, 6, 23, 0.04);\n}\n\nfooter {\n margin-top: 18px;\n text-align: center;\n color: #666;\n}\n\n/* ========== NOTES for the candidate (leave comments in your submission) ==========\n - Explain what you changed and why (relating to each question).\n - For specificity tasks, show which selectors win and why (list selector specificity numbers).\n - For CWV tasks: discuss image formats and CDN/sprite benefits in comments or a short README.\n - Keep all modifications inside this file only.\n*/\n\n\n\n\n\n","js":"// code here","user_id":"c792adbb-5a22-4783-8680-c5f3ea7e2214","project_key":"3NdrtG","description":"Detyra 10 (All) ","plugins":[],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":"[{\"messageId\":\"DEVCANVAS_INITIAL_MESSAGE\",\"role\":\"user\",\"content\":\"This is my current code\"},{\"messageId\":\"DEVCANVAS_INITIAL_CODE\",\"role\":\"user\",\"content\":\"\\n\\t\\n\\n\\t\\n\\t\\t\\n\\t\\t\\n\\t\\tDetyra 10\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\n \\n\\t\\n\\t\\n\\t\\t\\n\\t\\t\\n \\n\\t\\n\"}]","view":[{"views":3}],"profiles":{"username":"ArberD"}}]