Effective Prompts

⚙️ Configuration + Prompts = Maximum Effectiveness

These prompt examples work even better when you've set up Agent Configuration files. With configuration, you can skip repeating basic context (like "HTML/CSS only") and focus on your specific request. If you haven't set up configuration yet, include the essential context shown in each example.

💡 Remember: Context + Specificity = Better Results

Every effective prompt should include: your skill level, what you want to achieve, your constraints (HTML/CSS only), and how it fits your project.

❌ Instead of: "Make my site better"

"Make my site better"

✅ Try this with context:

"Add CSS Grid to my portfolio section with hover effects and ensure it's responsive on mobile. I have 6 portfolio projects in my HTML as article elements with class 'project-card'. I need 3 columns on desktop, 2 on tablet, and 1 on mobile with 20px gaps."

❌ Instead of: "Create a layout"

"Create a layout"

✅ Try this with context:

"Design a three-column responsive layout using CSS Grid for my About Me page. I have header, main, and aside elements in my HTML. The layout should stack to single-column on mobile while keeping my existing typography styles from styles.css."

❌ Instead of: "Make it responsive"

"Make it responsive"

✅ Try this with context:

"Implement mobile-first responsive design for my photo gallery in gallery.html. I'm using CSS Grid with .gallery-item divs. I need 1 column on mobile (320px+), 2 on tablet (768px+), and 3 on desktop (1024px+) with consistent 16px gaps."

🎯 Pro Tip: Reference Your Files

Always mention specific files, classes, or elements you're working with. This helps the agent understand your existing code structure and provide suggestions that fit seamlessly.

❌ Instead of: "Fix my code"

"Fix my code"

✅ Try this with context:

"Review my contact form in contact.html for accessibility issues and suggest semantic improvements. I need to meet WCAG AA standards and ensure the form works with screen readers. The form has name, email, and message fields."

❌ Instead of: "Make it accessible"

"Make it accessible"

✅ Try this with context:

"Add proper ARIA labels, skip links, and semantic HTML elements to my portfolio homepage. I need screen reader compatibility for my navigation menu and project showcase section. My current navigation uses ul/li elements."

❌ Instead of: "Use better HTML"

"Use better HTML"

✅ Try this with context:

"Replace the divs in my About Me page with semantic HTML5 elements like article, section, aside, and nav. I have content sections for bio, hobbies, and contact info that should use proper semantic structure for SEO and screen readers."

❌ Instead of: "Make it look good"

"Make it look good"

✅ Try this with context:

"Create a cohesive color scheme using CSS custom properties with a professional blue palette (#2c3e50, #3498db). Ensure 4.5:1 contrast ratio for WCAG AA compliance and add subtle shadows for depth. I want a clean, modern look for my portfolio."

❌ Instead of: "Add animations"

"Add animations"

✅ Try this with context:

"Implement CSS keyframe animations for my portfolio cards in index.html that fade in on page load with a stagger effect. Add hover transitions that scale (1.05x) and add a subtle glow. Keep animations under 0.3s for good UX."

❌ Instead of: "Improve typography"

"Improve typography"

✅ Try this with context:

"Establish a typographic hierarchy using system fonts with fluid typography (clamp values) for my headings. I need h1-h3 scaling from 1.2rem to 3rem, optimal line-height ratios (1.4 for body, 1.2 for headings), and consistent spacing scales using CSS custom properties."

❌ Instead of: "Add interactivity"

"Add interactivity"

✅ Try this with context:

"Create CSS-only image hover effects for my portfolio gallery thumbnails in gallery.html. Each .gallery-item should show overlay text with project title, scale transform (1.1x), and smooth transitions (0.3s). Ensure keyboard focus works for accessibility."

❌ Instead of: "Make a dropdown"

"Make a dropdown"

✅ Try this with context:

"Build a CSS-only dropdown navigation menu using :hover and :focus selectors for my header nav. I need smooth height transitions and keyboard accessibility. My current nav structure uses ul/li elements with .nav-item classes."

❌ Instead of: "Add modal"

"Add modal"

✅ Try this with context:

"Create a CSS-only modal popup using :target selector for project details. I need backdrop blur, scale animation entrance, and proper focus management for accessibility. Each portfolio item should link to its modal section."

❌ Instead of: "Optimize my CSS"

"Optimize my CSS"

✅ Try this with context:

"Reorganize my styles.css file using logical sections (reset, typography, layout, components, utilities), CSS custom properties for consistent values, and mobile-first media queries. I have about 300 lines currently with no clear organization."

❌ Instead of: "Make it faster"

"Make it faster"

✅ Try this with context:

"Optimize my portfolio site for web delivery: implement CSS containment for my gallery section, reduce layout shifts in the hero area, and add preload hints for critical CSS and fonts. Currently loading at 3.2s on 3G."

❌ Instead of: "Clean up code"

"Clean up code"

✅ Try this with context:

"Refactor my CSS using BEM naming methodology for my portfolio components, group related properties logically, remove unused styles (I have duplicate margin declarations), and add documentation comments for each major section."

❌ Instead of: "Create a portfolio"

"Create a portfolio"

✅ Try this with context:

"Build a responsive portfolio homepage targeting entry-level web developer positions. I need a hero section with my photo, skills grid showcasing HTML/CSS/Git, project showcase using CSS Grid, contact form, and smooth scroll navigation. Professional but creative style."

❌ Instead of: "Show my projects"

"Show my projects"

✅ Try this with context:

"Design a project showcase for my 4 Web Dev I projects (About Me, Gallery, Business Site, Contact Form). Use CSS Grid with filter buttons that show/hide projects using :target selectors and smooth transitions. Each project needs title, description, tech used, and GitHub link."

🎯 Portfolio Success Tip

Always mention your career goals and target audience in portfolio prompts. This helps the agent suggest designs and content that will actually help you get hired!

❌ Instead of: "This doesn't work"

"This doesn't work"

✅ Try this with context:

"My CSS Grid layout breaks on mobile - the portfolio items are overlapping instead of stacking in a single column. Help me debug the grid-template-columns in my .portfolio-grid class. Expected: 1 column on mobile, seeing: items crowded horizontally."

❌ Instead of: "Fix the spacing"

"Fix the spacing"

✅ Try this with context:

"The vertical rhythm is inconsistent between my h2 headings and paragraphs in the About section. Help me establish a baseline grid using margin and line-height values. Currently using random margin values (10px, 15px, 20px) with no pattern."

❌ Instead of: "Colors look wrong"

"Colors look wrong"

✅ Try this with context:

"My color contrast is failing WCAG tests - WebAIM shows 3.1:1 ratio for my blue text (#3498db) on white background. Help me adjust these blue tones to meet AA standards (4.5:1) while maintaining my brand consistency and professional appearance."

📝 Prompt Template

Context: "I'm a Web Dev II student with [skill level]. I'm working on [project type]."

Goal: "I want to [specific outcome] for [specific element/section]."

Constraints: "I can only use HTML/CSS, need [accessibility/responsive requirements]."

Context: "My current code has [existing structure/classes/files]."

Specifics: "The result should [visual/functional requirements]."

🎯 Challenge: Write Your First Perfect Prompt

Take something you're working on right now and write a prompt using the formula above. Include your skill level, specific goal, constraints, current code context, and desired outcome. Then try it with an AI agent!