Frontend Mentor
@frontendmentor.io
🧑💻 Build projects: https://www.frontendmentor.io
📈 Train your team: https://teams.frontendmentor.io
🤝 Hire top talent: https://hiring.frontendmentor.io
📈 Train your team: https://teams.frontendmentor.io
🤝 Hire top talent: https://hiring.frontendmentor.io
We wrote about this in detail - how to learn with AI assistants without becoming dependent on them.
Covering tools, stages, prompts, and a self-check to see if you're on track.
We hope you find it helpful!
www.frontendmentor.io/articles/ai...
Covering tools, stages, prompts, and a self-check to see if you're on track.
We hope you find it helpful!
www.frontendmentor.io/articles/ai...
Frontend Mentor | AI coding assistants for beginners: How to learn without losing your skills
Learn to use AI coding tools like ChatGPT and GitHub Copilot without becoming dependent on them. Stage-based framework for your first 18 months.
www.frontendmentor.io
November 17, 2025 at 2:39 PM
We wrote about this in detail - how to learn with AI assistants without becoming dependent on them.
Covering tools, stages, prompts, and a self-check to see if you're on track.
We hope you find it helpful!
www.frontendmentor.io/articles/ai...
Covering tools, stages, prompts, and a self-check to see if you're on track.
We hope you find it helpful!
www.frontendmentor.io/articles/ai...
The solution is pretty simple:
Ask questions, don't copy code.
AI should explain things, not do the thinking for you.
If you can't explain code line-by-line, you don't understand it. And if you don't understand it, don't use it.
Ask questions, don't copy code.
AI should explain things, not do the thinking for you.
If you can't explain code line-by-line, you don't understand it. And if you don't understand it, don't use it.
November 17, 2025 at 2:39 PM
The solution is pretty simple:
Ask questions, don't copy code.
AI should explain things, not do the thinking for you.
If you can't explain code line-by-line, you don't understand it. And if you don't understand it, don't use it.
Ask questions, don't copy code.
AI should explain things, not do the thinking for you.
If you can't explain code line-by-line, you don't understand it. And if you don't understand it, don't use it.
The problem isn't AI coding assistants. It's how beginners use them in their learning process.
The same tool that explains concepts can also let you skip understanding altogether.
And when you're learning, you don't yet know what you don't know.
The same tool that explains concepts can also let you skip understanding altogether.
And when you're learning, you don't yet know what you don't know.
November 17, 2025 at 2:39 PM
The problem isn't AI coding assistants. It's how beginners use them in their learning process.
The same tool that explains concepts can also let you skip understanding altogether.
And when you're learning, you don't yet know what you don't know.
The same tool that explains concepts can also let you skip understanding altogether.
And when you're learning, you don't yet know what you don't know.
Getting stuck is normal. Having a systematic approach to get unstuck will help you whenever you hit a wall.
Practice these steps, and you'll spend less time frustrated and more time building 🥳
Any techniques you would add to this list? Please share them below 👇
Practice these steps, and you'll spend less time frustrated and more time building 🥳
Any techniques you would add to this list? Please share them below 👇
November 13, 2025 at 2:58 PM
Getting stuck is normal. Having a systematic approach to get unstuck will help you whenever you hit a wall.
Practice these steps, and you'll spend less time frustrated and more time building 🥳
Any techniques you would add to this list? Please share them below 👇
Practice these steps, and you'll spend less time frustrated and more time building 🥳
Any techniques you would add to this list? Please share them below 👇
10. Document your learning
Write down what worked. Future you will thank present you.
Can you turn it into a blog post? Even better! You might have other people thanking you too!
Write down what worked. Future you will thank present you.
Can you turn it into a blog post? Even better! You might have other people thanking you too!
November 13, 2025 at 2:58 PM
10. Document your learning
Write down what worked. Future you will thank present you.
Can you turn it into a blog post? Even better! You might have other people thanking you too!
Write down what worked. Future you will thank present you.
Can you turn it into a blog post? Even better! You might have other people thanking you too!
9. Check browser compatibility
If it works in one browser but not another, you've found your culprit.
Test in Chrome, Firefox, Safari if you can.
If it works in one browser but not another, you've found your culprit.
Test in Chrome, Firefox, Safari if you can.
November 13, 2025 at 2:58 PM
9. Check browser compatibility
If it works in one browser but not another, you've found your culprit.
Test in Chrome, Firefox, Safari if you can.
If it works in one browser but not another, you've found your culprit.
Test in Chrome, Firefox, Safari if you can.
Note: As a learner, work through the earlier steps first. Understanding WHY something works is more valuable than just getting a quick fix.
Building problem-solving and communication skills will serve you throughout your career.
Building problem-solving and communication skills will serve you throughout your career.
November 13, 2025 at 2:58 PM
Note: As a learner, work through the earlier steps first. Understanding WHY something works is more valuable than just getting a quick fix.
Building problem-solving and communication skills will serve you throughout your career.
Building problem-solving and communication skills will serve you throughout your career.
8. Debug with AI
Use ChatGPT, Claude, chat assistants in VS Code (like Copilot), or Cursor. Paste/Highlight your code and explain what you're trying to do and what's not working.
AI is great at spotting syntax errors and suggesting fixes.
Use ChatGPT, Claude, chat assistants in VS Code (like Copilot), or Cursor. Paste/Highlight your code and explain what you're trying to do and what's not working.
AI is great at spotting syntax errors and suggesting fixes.
November 13, 2025 at 2:58 PM
8. Debug with AI
Use ChatGPT, Claude, chat assistants in VS Code (like Copilot), or Cursor. Paste/Highlight your code and explain what you're trying to do and what's not working.
AI is great at spotting syntax errors and suggesting fixes.
Use ChatGPT, Claude, chat assistants in VS Code (like Copilot), or Cursor. Paste/Highlight your code and explain what you're trying to do and what's not working.
AI is great at spotting syntax errors and suggesting fixes.
7. Ask for help in a community (like Frontend Mentor)
Share the specifics of your problem in our help channel with:
- Clear description of the problem
- Your live URL
- Your public repo URL
- What you've already tried
Make it easy for people to help you.
Share the specifics of your problem in our help channel with:
- Clear description of the problem
- Your live URL
- Your public repo URL
- What you've already tried
Make it easy for people to help you.
November 13, 2025 at 2:58 PM
7. Ask for help in a community (like Frontend Mentor)
Share the specifics of your problem in our help channel with:
- Clear description of the problem
- Your live URL
- Your public repo URL
- What you've already tried
Make it easy for people to help you.
Share the specifics of your problem in our help channel with:
- Clear description of the problem
- Your live URL
- Your public repo URL
- What you've already tried
Make it easy for people to help you.
6. Rubber duck debug
Explain your code line-by-line out loud (or in writing).
You'll often spot the issue while explaining it. This is weirdly effective.
Explain your code line-by-line out loud (or in writing).
You'll often spot the issue while explaining it. This is weirdly effective.
November 13, 2025 at 2:58 PM
6. Rubber duck debug
Explain your code line-by-line out loud (or in writing).
You'll often spot the issue while explaining it. This is weirdly effective.
Explain your code line-by-line out loud (or in writing).
You'll often spot the issue while explaining it. This is weirdly effective.
5. Create a minimal reproduction
Strip away everything except the problem. Build it in CodePen or a simple test file.
This helps you figure out if it's your specific setup or the technique itself.
Strip away everything except the problem. Build it in CodePen or a simple test file.
This helps you figure out if it's your specific setup or the technique itself.
November 13, 2025 at 2:58 PM
5. Create a minimal reproduction
Strip away everything except the problem. Build it in CodePen or a simple test file.
This helps you figure out if it's your specific setup or the technique itself.
Strip away everything except the problem. Build it in CodePen or a simple test file.
This helps you figure out if it's your specific setup or the technique itself.
4. Read the documentation you find
Your search will often lead you to resources like:
- MDN for HTML/CSS/JS
- Official framework docs
- Smashing Magazine, CSS-Tricks, and other blogs, for techniques
Don't just skim. Actually read up to fully understand the issue/concept.
Your search will often lead you to resources like:
- MDN for HTML/CSS/JS
- Official framework docs
- Smashing Magazine, CSS-Tricks, and other blogs, for techniques
Don't just skim. Actually read up to fully understand the issue/concept.
November 13, 2025 at 2:58 PM
4. Read the documentation you find
Your search will often lead you to resources like:
- MDN for HTML/CSS/JS
- Official framework docs
- Smashing Magazine, CSS-Tricks, and other blogs, for techniques
Don't just skim. Actually read up to fully understand the issue/concept.
Your search will often lead you to resources like:
- MDN for HTML/CSS/JS
- Official framework docs
- Smashing Magazine, CSS-Tricks, and other blogs, for techniques
Don't just skim. Actually read up to fully understand the issue/concept.
3. Google the specific error
Copy that error message and search for it. Add your framework/library name if relevant.
Someone has likely hit this exact problem before. Learning to search effectively is one of the most essential developer skills.
Copy that error message and search for it. Add your framework/library name if relevant.
Someone has likely hit this exact problem before. Learning to search effectively is one of the most essential developer skills.
November 13, 2025 at 2:58 PM
3. Google the specific error
Copy that error message and search for it. Add your framework/library name if relevant.
Someone has likely hit this exact problem before. Learning to search effectively is one of the most essential developer skills.
Copy that error message and search for it. Add your framework/library name if relevant.
Someone has likely hit this exact problem before. Learning to search effectively is one of the most essential developer skills.
2. Debug systematically
Open browser DevTools:
- Inspect the problem element
- Check the console for errors
- Test different solutions
- See what styles are being applied
This is your debugging superpower. Learn to use it well.
Open browser DevTools:
- Inspect the problem element
- Check the console for errors
- Test different solutions
- See what styles are being applied
This is your debugging superpower. Learn to use it well.
November 13, 2025 at 2:58 PM
2. Debug systematically
Open browser DevTools:
- Inspect the problem element
- Check the console for errors
- Test different solutions
- See what styles are being applied
This is your debugging superpower. Learn to use it well.
Open browser DevTools:
- Inspect the problem element
- Check the console for errors
- Test different solutions
- See what styles are being applied
This is your debugging superpower. Learn to use it well.
1. Break the problem down
Don't try to fix everything at once. Isolate the exact issue:
- Is it layout?
- Responsive behavior?
- A specific component?
- JavaScript functionality?
Get specific about what's actually broken.
Don't try to fix everything at once. Isolate the exact issue:
- Is it layout?
- Responsive behavior?
- A specific component?
- JavaScript functionality?
Get specific about what's actually broken.
November 13, 2025 at 2:58 PM
1. Break the problem down
Don't try to fix everything at once. Isolate the exact issue:
- Is it layout?
- Responsive behavior?
- A specific component?
- JavaScript functionality?
Get specific about what's actually broken.
Don't try to fix everything at once. Isolate the exact issue:
- Is it layout?
- Responsive behavior?
- A specific component?
- JavaScript functionality?
Get specific about what's actually broken.
Note: This is a framework, not a strict rulebook. Pick and choose the steps that work for your situation. Reorder them as needed. The goal is to give you options, not a rigid process.
November 13, 2025 at 2:58 PM
Note: This is a framework, not a strict rulebook. Pick and choose the steps that work for your situation. Reorder them as needed. The goal is to give you options, not a rigid process.
We wrote a full breakdown of all 12 projects:
www.frontendmentor.io/articles/fu...
Which one are you building first?
www.frontendmentor.io/articles/fu...
Which one are you building first?
Frontend Mentor | 12 full-stack project ideas (with designs) for your developer portfolio
12 full-stack project ideas with professional designs. Learn to add authentication, databases, and APIs to Frontend Mentor challenges for job-ready portfolios.
www.frontendmentor.io
November 6, 2025 at 3:36 PM
We wrote a full breakdown of all 12 projects:
www.frontendmentor.io/articles/fu...
Which one are you building first?
www.frontendmentor.io/articles/fu...
Which one are you building first?
Each project section in the article includes:
- Design and specifications (Frontend Mentor challenge)
- Ideas for full-stack features to add
- Tech stack options
- Examples for how to present your work effectively
- Design and specifications (Frontend Mentor challenge)
- Ideas for full-stack features to add
- Tech stack options
- Examples for how to present your work effectively
November 6, 2025 at 3:36 PM
Each project section in the article includes:
- Design and specifications (Frontend Mentor challenge)
- Ideas for full-stack features to add
- Tech stack options
- Examples for how to present your work effectively
- Design and specifications (Frontend Mentor challenge)
- Ideas for full-stack features to add
- Tech stack options
- Examples for how to present your work effectively
Advanced projects:
- Invoice app with PDF generation
- Link-sharing app with custom subdomains
- Personal finance app with transaction tracking
- Invoice app with PDF generation
- Link-sharing app with custom subdomains
- Personal finance app with transaction tracking
November 6, 2025 at 3:36 PM
Advanced projects:
- Invoice app with PDF generation
- Link-sharing app with custom subdomains
- Personal finance app with transaction tracking
- Invoice app with PDF generation
- Link-sharing app with custom subdomains
- Personal finance app with transaction tracking
Intermediate projects:
- Personal blog with CMS functionality
- Kanban board with drag-and-drop
- Entertainment app with API integration
- Product feedback app with voting and comments
- Modd-tracking app with time-series data handling
- Personal blog with CMS functionality
- Kanban board with drag-and-drop
- Entertainment app with API integration
- Product feedback app with voting and comments
- Modd-tracking app with time-series data handling
November 6, 2025 at 3:36 PM
Intermediate projects:
- Personal blog with CMS functionality
- Kanban board with drag-and-drop
- Entertainment app with API integration
- Product feedback app with voting and comments
- Modd-tracking app with time-series data handling
- Personal blog with CMS functionality
- Kanban board with drag-and-drop
- Entertainment app with API integration
- Product feedback app with voting and comments
- Modd-tracking app with time-series data handling