{"id":"code-work-js-portfolio-css-grid","audience":"job-seekers","category":"coding","track":"coding","technique":"constraints","title":"Write mobile-first CSS for a portfolio project grid","free":false,"task":"Write the CSS for your portfolio's project grid using the existing .projects class only. Mobile first: one column by default, two columns from 600px wide and three from 900px, using min-width media queries only, with a 24px gap. Plain CSS, no frameworks, @import or other selectors. One code block, at most 14 lines, then under 25 words outside the code.","materialLabel":"Your current HTML and notes (attached to your prompt automatically)","material":"MY PORTFOLIO - projects page (Imani Clarke)\n\nCurrent HTML:\n<section class=\"projects\">\n  <article>Bike Share Rush Hours ...</article>\n  <article>Pantry Wait Times ...</article>\n  <article>Library Late Fees Study ...</article>\n  <article>Transit Survey Cleanup ...</article>\n  <article>Rent Trends Map ...</article>\n  <article>Volunteer Hours Tracker ...</article>\n</section>\n\nWhat's wrong now:\n- On my phone the cards are squished into three tiny columns.\n- On my laptop it's fine.\n\nNotes:\n- style.css already sets fonts and colors on article; I don't want those touched.\n- A mentor said recruiters often open portfolios on their phones first.\n- I'm not using any CSS framework and want to keep it that way.\n- My laptop screen is 1440px wide.","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":14},{"type":"maxProseWords","max":25}],"mistakes":[{"title":"Not saying mobile first","why":"The AI starts at three columns and squeezes down with max-width queries.","fix":"Add: \"Mobile first: one column, then min-width 600px and 900px.\"","checks":["r0","r1"]},{"title":"Not giving the breakpoints","why":"The AI picks its own widths, like 768px and 1024px.","fix":"Add: \"Two columns from 600px, three from 900px, 24px gap.\"","checks":["r1"]},{"title":"Not protecting your styles","why":"The AI restyles the cards with borders, shadows and fonts.","fix":"Add: \"Only the .projects selector, nothing else.\"","checks":["r2"]},{"title":"Getting a menu of options","why":"The AI likes to offer two or three versions of the stylesheet, so you're left to pick and test them yourself.","fix":"Add: \"Give one stylesheet only, in one code block, no alternatives.\"","checks":["codeBlocks","maxCodeLines"]},{"title":"Getting a tutorial","why":"By default the AI explains every part of the code at length, which you then have to scroll past.","fix":"Add: \"After the code, one line under 10 words. Nothing else.\"","checks":["maxProseWords"]}],"promptHints":[{"label":"Says mobile first","patterns":["mobile[- ]first","min-width","one column"]},{"label":"Gives the breakpoints","patterns":["600","900"]},{"label":"Sets the gap","patterns":["24px","gap"]},{"label":"Limits the selectors","patterns":["only (the )?\\.projects","no other selectors","don'?t touch"]},{"label":"Caps the code length","patterns":["\\d+\\s*lines","at most","under \\d+","short"]}],"hint":"Recruiters look on phones first. Tell the AI to start from one column, the exact breakpoints, and to leave the rest of your styles alone.","rubricLabels":["Styles only the .projects selector with display: grid, gap: 24px and one column (1fr) by default","Uses @media (min-width: 600px) for 2 columns and @media (min-width: 900px) for 3 columns, with no max-width media queries","Has no other selectors (such as article), no @import and no framework classes"]}