Course overview
Start hereAI for Frontend Developers
START HERE

Diego's Thursday, Two Ways

8 lessons · 24 prompts

A day in the life of a Frontend Developer: what changes with these prompts.

Track progress as a member

Diego, a frontend developer at a small ecommerce company.

Diego starts Thursday with a product card that looks fine on his laptop but breaks on a phone. The design shows a badge, a price, and a quick add button. He opens ChatGPT and uses the Building HTML Structure prompt to turn the design notes into semantic card markup, then trims the extra divs by hand.

Next, the card's price row overflows on small screens. He asks Claude with the Responsive and Mobile Design prompt to suggest a mobile-first layout and a breakpoint plan. Claude explains why the flex row is fighting the badge, and Diego fixes it with a wrap and a smaller gap.

After lunch, the add-to-cart button sends two requests when clicked twice. Diego uses the Implementing JavaScript Logic prompt in Gemini to walk through the event handler and add a simple disabled state while the request is pending. He also uses the API Integration and Data prompt to show a loading spinner and a clear error message if the cart service fails.

By late afternoon, Diego has a working card, a cleaner component note for the design team, and fewer browser tabs open. He uses the time he won back to leave on time, pick up his daughter from soccer, and cook dinner without rushing.

Before

  • Tabs open, guessing at CSS fixes
  • Design handoff feels like a puzzle
  • Mobile bugs show up late in the sprint
  • Component notes live in old chat threads

After this course

  • Clear prompts guide each frontend task
  • Layout bugs get explained, not guessed
  • Mobile checks happen early and calmly
  • Components documented as I build

What you'll learn

  • Clean HTML: Turn design descriptions into semantic HTML you can refine by hand.
  • CSS Debugging: Get unstuck on layouts, component styles, and stubborn styling bugs.
  • JavaScript Logic: Scaffold and debug functions, event handlers, and logic errors with AI.
  • Responsive Design: Plan breakpoints and fix overflow for phones, tablets, and desktops.
  • Performance Checks: Find and prioritize frontend performance improvements from images to bundles.
  • Cross-Browser Fixes: Diagnose browser differences and write clear bug reports.
  • API Integration: Build API calls and handle loading and error states in the UI.
  • Designer Handoff: Turn design specs into tasks and document components for your team.

How this course works

  1. 8 lessonsOne task of your job each, from building html structure to designer handoff and documentation.
  2. Ready-to-paste promptsCopy, fill in the parts in {{brackets}}, paste into ChatGPT, Claude or Gemini.
  3. Tick and completeTick the prompts you tried and mark each lesson complete.
  4. Get certifiedFinish and keep the prompts as your own library.