Library › Coding AI › Job seekers

Write mobile-first CSS for a portfolio project grid

Practice: Setting limits and rules. About 5 minutes.

About this exercise

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.

Common mistakes when you ask AI for this

  • Not saying mobile first. The AI starts at three columns and squeezes down with max-width queries. Try: Add: "Mobile first: one column, then min-width 600px and 900px."
  • Not giving the breakpoints. The AI picks its own widths, like 768px and 1024px. Try: Add: "Two columns from 600px, three from 900px, 24px gap."
  • Not protecting your styles. The AI restyles the cards with borders, shadows and fonts. Try: Add: "Only the .projects selector, nothing else."
  • Getting a menu of options. The AI likes to offer two or three versions of the stylesheet, so you're left to pick and test them yourself. Try: Add: "Give one stylesheet only, in one code block, no alternatives."
  • Getting a tutorial. By default the AI explains every part of the code at length, which you then have to scroll past. Try: Add: "After the code, one line under 10 words. Nothing else."

What a strong prompt includes

  • Says mobile first
  • Gives the breakpoints
  • Sets the gap
  • Limits the selectors
  • Caps the code length

Practice this now ↑

Related exercises