How-To Guide · 02
Using AI on the Frontend
AI tools can write code, debug errors, and generate full layouts in seconds. Here’s how to use them well — without losing your skills or your judgment.
LESSON 01
AI is a tool, not a shortcut
AI tools like Claude, ChatGPT, and GitHub Copilot can generate HTML and CSS in seconds. The developers getting the most out of AI are the ones who understand what they’re building well enough to direct it and review what it produces.
Use AI to move faster. Don’t use it to avoid learning. The fundamentals from the HTML/CSS guide are what let you know when AI gives you good code vs. garbage.
LESSON 02
Tools Worth Knowing
Great for explaining code, generating full page layouts, and debugging. Handles context well — paste your whole file and ask questions.
Strong at generating components, writing CSS from a description, and explaining why something isn’t working.
Lives inside your code editor. Autocompletes as you type — best for when you know what you want but don’t want to type every character.
Paste a design description or screenshot and get a working component. Good for rapid prototyping.
LESSON 03
How to Prompt for Frontend Code
The difference between getting usable code and something you have to completely rewrite is almost always in how you ask. Be specific — tell AI what tech you’re using, what it should look like, and what to avoid.
“Make a button that looks nice”
“Write an HTML button with CSS. Dark background (#000), hot pink text and border (#FF1A8C), pill shape (border-radius: 50px), padding 12px 28px, bold font. On hover, fill background with pink and make text white. No JavaScript needed.”
“Here’s my CSS for a navbar. The links aren’t centering vertically even though I set align-items: center. What am I missing? [paste code here]”
LESSON 04
Real-World AI Workflow
How to build a page using AI without losing control of the result:
- Sketch first. Even a rough layout sketch puts you in charge of the decisions, not the AI.
- Build sections, not the whole page. Generate the hero, review it, tweak it, then move to the next section.
- Read every line it gives you. If you don’t understand a line, ask AI to explain it. This is how you learn.
- Use AI to explore options. “Give me three different versions of this card design” is a power move.
- Don’t paste AI code you haven’t read into production. AI makes mistakes, and some are security issues.
LESSON 05
When to Learn vs. When to Let AI Handle It
- It affects everything (box model, flexbox, selectors)
- You’ll need to debug it when it breaks
- You’ll customize it repeatedly
- It’s repetitive boilerplate
- You know the concept, just not the syntax
- You want to see multiple options quickly