Welcome to the Tips & Tricks for AI Coder Beginners, a comprehensive resource designed to help non-coders effectively use AI tools to develop websites, apps, and other projects. This guide is based on real-world experience and practical advice tailored for absolute beginners.
- Introduction
- Chapter 1: Getting the AI to Do What You Want – The Power of Thoughtful Prompts
- Chapter 2: When Things Aren't Going Your Way – Troubleshooting with AI and Regaining Momentum
- Chapter 3: Using Screenshots and Tracking to Handle Persistent Issues
- Chapter 4: Guiding AI to Address Problems, Errors, and Challenges Effectively
- Chapter 5: Understanding CDN Libraries and Their Role in Your Project
- [Chapter 6: Coming Soon]
- [Chapter 7: Coming Soon]
This guide also serves as a testament to my journey as a beginner developer learning to harness the power of AI. Every chapter is inspired by lessons I've learned while navigating the world of AI-driven development. My goal is to share these insights with you so you can avoid common pitfalls and maximize the potential of these tools.
Let me share with you one of the biggest lessons I learned early on. Here it is: The way you phrase what you ask the AI to do is everything. The difference between getting something brilliant and getting something useless often comes down to how you asked for it. Sounds simple, but this tip alone can save you a lot of frustration.
So, let’s talk about how to ask your AI “coder assistant” for help in a way that actually gets results—because trust me, the way you talk to the AI makes all the difference.
Here’s the deal: AI tools are smart, but they aren’t mind readers. They’re brilliant at following directions, but they need those directions to be clear and specific. If you’re vague or leave room for guessing, things can go sideways fast.
Think of it this way: Imagine you’re hiring a contractor to build you a house. If you say, “Build me something nice,” you might end up with a treehouse when what you really wanted was a three-bedroom ranch with a pool. But if you hand them blueprints and say, “I want this exact house with these exact features,” they’ll know exactly what to do.
AI works the same way. If your instructions are specific, the output will be better. Instead of saying, “Fix this code,” try something like, “Fix the problem with the submit button not working when a user clicks it.” Instead of “Make my app pretty,” say, “Modernize the app’s UI with sleek, professional fonts and high-quality icons.” See the difference? The AI now knows exactly what you want and has a clear path to follow.
One trick I’ve learned is to start with the right task-specific phrase—think of it as the secret sauce that gets the AI into the right mode. Here are examples of phrases you can use for different situations. Feel free to copy, tweak, and use these as much as you want.
-
When Something’s Broken:
- Use this: “Fix the problem with…”
- Example: “Fix the problem with the login button not doing anything when clicked.”
This tells the AI to focus on fixing one specific issue. Instead of trying to redo your entire code, it homes in on solving just that problem.
Pro Tip: If you know what broke things (like a certain line of code), include that detail. And if you’re not sure? No worries—just focus on describing the symptoms of the problem as clearly as possible.
-
When Adding New Features:
- Use this: “Add a feature to the existing…”
- Example: “Add a feature to the existing app that allows users to filter products by price without removing any other features.”
This phrase is worth its weight in gold because it tells the AI two critical things: (1) what you want to add and (2) what not to touch. Trust me, you don’t want the AI to accidentally break something while it’s adding your shiny new feature. That’s why the “without removing any other features” part is so important—it keeps everything else intact.
-
When You Need to Fix Browser Errors:
- Use this: “Fix these errors found in the browser console…”
- Example: “Fix these errors found in the browser console: [Paste the error messages here].”
Okay, this might be the most beginner-friendly pro tip ever. If you’re building a web app and things aren’t working, your browser console is like a detective who’s already figured out the crime scene for you. To find it, right-click on your webpage, click “Inspect,” and go to the “Console” tab. You’ll see error messages there—just copy those and paste them into your AI tool.
Why does this work so well? Because those error messages often contain the exact information the AI needs to figure out what went wrong. It’s like giving it a roadmap for fixing your app. Seriously, this trick is a lifesaver.
-
When You Want to Improve How Your App Looks:
- Use this: “Improve the overall app (or specific part) UI with professional, modern, visually appealing…”
- Example: “Improve the overall app UI with professional, modern, visually appealing, high-quality fonts, icons, and a cohesive color palette inspired by minimalist designs.”
Let’s be real—design is subjective. What looks great to one person might not be someone else’s cup of tea. That’s why it’s especially important to guide your AI with words like “modern,” “professional,” and “high-quality.” These kinds of adjectives help the AI understand the overall vibe you’re going for.
Pro Tip: If you have a specific app or website that you love the look of, mention it! For example: “Make this look more like the design of Spotify.” The AI will try to mimic that style and apply it to your project.
-
When Removing Features:
- Use this: “Remove the [feature] and all related code without breaking the core features of the app.”
- Example: “Remove the search bar and all related code without breaking the shopping cart or user profile features.”
Removing features can be tricky because you don’t want to accidentally take out something important. This phrase lets the AI know to cleanly remove the feature but leave everything else working exactly as it should.
-
When You Accidentally Delete Something:
- Use this: “I lost the [file], please restore it so that the project looks and functions exactly as it was.”
- Example: “I lost the style.css file, please restore it so the project looks and functions exactly as it did before.”
It's important to let the AI know what file you lost and give it some context (e.g., “This file handled all the styling for my homepage”). While the AI might not restore the file perfectly, it’ll often provide enough to get things back on track.
If there’s one thing you take away from this chapter, let it be this: specificity is everything. The more detail and clarity you give in your prompts, the better the AI will perform. Here’s what I’ve learned:
- Always describe what you want in plain, simple language. Don’t overcomplicate it!
- Focus on one task at a time. Big, multi-part prompts can overwhelm the AI.
- Don’t be afraid to experiment. If the first answer isn’t quite right, tweak your wording and try again.
This process might feel clunky at first, but I promise, the more you practice, the better you’ll get at it.
Working with AI to build apps and websites isn’t always smooth sailing. There will be moments when you feel like you’re on a roll, only to hit a wall where nothing seems to work. You’ve given the AI clear instructions (or so you thought), you’ve rephrased your requests, and yet… your project isn’t moving forward.
This chapter is all about troubleshooting those frustrating situations and getting yourself unstuck.
Sometimes, the AI just… forgets itself. If you find yourself repeating a command over and over, and nothing is changing, the problem might not be with your instructions—it might be the chat history.
AI language models work by keeping track of previous instructions and responses in the current conversation. Over time, this history can become cluttered with conflicting context. For example:
- You might have asked for a feature earlier and then changed your mind, but the AI is still trying to balance both instructions.
- The AI could be interpreting your new commands in the context of outdated instructions instead of treating them as independent tasks.
The Fix: Start a new conversation with the AI.
- Open a fresh chat, paste the most recent version of your code, and explain what you’re trying to accomplish.
- Starting fresh clears the history and eliminates contradictions that may have crept in during your ongoing conversation.
- Bonus: A new chat can often lead to better, more focused results because the AI isn’t distracted by its past “thoughts.” It’s like pressing a reset button.
If starting fresh doesn’t solve the problem, there’s a chance the issue is in the code itself. Contradicting code happens when two pieces of code tell your app to do opposite things. This can often occur when:
- The AI added a new feature but forgot to clean up or remove old code related to a previous version of that feature.
- You’ve tried to patch multiple problems one at a time, and the AI accidentally created logic overlaps.
- You’re working on a complex project, and somewhere along the way, something got tangled.
For example:
- Imagine you’re creating a button for your app. One part of your code says, “When the button is clicked, submit the form.” Another part says, “When the button is clicked, refresh the page.” Now the app is confused—does the button submit or refresh?
The Fix: Ask the AI to identify and resolve contradictions. Using the chat feature of your AI assistant, you can give it a prompt like, “Review my code and identify any parts that might be contradicting each other.” Then paste the relevant sections into the chat.
Another Fix: Debug manually. If the AI isn’t catching the problem (or you just want more control), start testing pieces of your app one at a time. Disable or comment out parts of the code and see how the app behaves when those sections aren’t running. This process can help you locate the specific lines causing the conflict.
Here’s a game-changer: AI doesn’t always need to write code for you. You can also use it as a trusted debugging partner to answer your questions and guide you through problems without actually changing your project. This approach gives you more control and can help you better understand how everything is connected.
For example, you can ask:
- “What might be causing my app to crash when I click the submit button?”
- “How does this section of my JavaScript interact with the CSS styling below?”
- “What impact would deleting this variable have on the rest of the code?”
This back-and-forth isn’t about handing over control to the AI—it’s about using it as a coding coach. By treating AI as a teacher rather than a task executor, you can unlock insights that help you troubleshoot faster and better.
If one AI model isn’t giving you answers you can work with, try mixing things up. Different models have different strengths:
- ChatGPT (especially GPT-4): Great for general-purpose coding advice, debugging, and generating reusable code snippets.
- Claude (Anthropic): Often excels at understanding complex instructions and summarizing code but can miss finer debugging details.
- Gemini (Google): May provide additional context if you’re dealing with Google-related tools or technologies.
- Specialized Coding Assistants (e.g., Cursor, GitHub Copilot, Windsurf): Integrated directly into IDEs for real-time coding help.
Here’s how to do it:
- Copy your current code or problem description.
- Paste it into another model.
- Ask the same or similar question.
Even if you’ve been working exclusively with one tool, switching to another can provide valuable new perspectives (and solutions).
Changelogs are lifesavers. They let you:
- Track exactly what the AI edited or added to your project.
- Roll back changes if something goes wrong.
- Compare older versions of your code to pinpoint issues.
Many tools and IDEs allow you to enable changelogs or version history. If not, you can use Git for version control to achieve the same effect.
Sometimes, the issue isn’t you or the AI—it’s the language you’ve chosen. If your app isn’t working well or feels overly complex, ask the AI: “Is [current language] the best choice for this project?”
This one shift can be a game-changer.
This chapter focuses on leveraging screenshots in creative and effective ways, along with strategies for having the AI track and remember changes so that your workflow stays productive and frustration-free.
A screenshot can often say more than words, especially when something in your UI doesn’t look or behave as expected. However, without proper context, the AI might misinterpret the screenshot and assume it represents the solution you want rather than the problem you’re highlighting. To address this, it’s critical to pair your screenshot with precise prompts that guide the AI’s focus.
-
Provide a Clear Description Alongside the Screenshot:
A screenshot without context can lead to misunderstandings. For example, if you’re highlighting a visual bug, include an explanation like:- “This screenshot shows the UI after submitting a form. The button is supposed to redirect the user to a confirmation page, but nothing happens. Please identify the issue.”
-
Highlight Key Areas in the Screenshot:
Use basic image editing tools to circle, underline, or annotate the parts of the screenshot that are relevant to the problem. This helps the AI know where to focus. -
Clarify That the Screenshot Represents a Problem:
To make sure the AI doesn’t misinterpret the image as your desired output, use this prompt:- “The problem continues - the picture shows the problem, not the solution.”
Why this works: This phrasing explicitly tells the AI to treat the screenshot as evidence of the issue, ensuring it analyzes the problem rather than assuming the outcome.
Another common issue is when the AI generates code changes that don’t appear in the app or website’s UI. This can happen for several reasons—deployment issues, unsaved changes, or even hidden bugs in your project structure. Screenshots are especially useful here because they can visually capture the “before” and “after” states, helping the AI pinpoint what went wrong.
-
Take two screenshots:
- One showing the state of the UI before applying the changes.
- Another showing the UI after applying the changes (where the issue remains).
-
Include both screenshots in your prompt with an explanation like:
- “These two screenshots show the UI before and after I implemented your suggested changes. The UI doesn’t reflect the changes. Analyze the code to find the issue and fix it.”
-
Use targeted prompts to go deeper:
- “Analyze the entire directory and look for problems that are preventing your changes from being implemented.”
- “Figure out why your changes are not reflecting what I see on the project.”
Why this works: Combining screenshots with prompts gives the AI both visual and written context, making it easier for it to identify underlying issues.
Screenshots aren’t just for pinpointing UI problems. Here are some additional ways you can use screenshots to improve communication with your AI assistant:
-
Show Error Messages or Logs:
If your browser console or application log shows an error, take a screenshot of it and include a prompt like:- “This error message appears in the browser console after clicking the submit button. Please identify the issue causing this error and provide a solution.”
-
Capture Unexpected Behavior in Live Environments:
When debugging deployed projects, take screenshots of any unexpected behavior and describe what should have happened instead:- “This screenshot shows the mobile layout where the navigation menu is broken. It should collapse into a hamburger menu, but it stays expanded. Please fix this issue.”
-
Highlight Missing Elements in the UI:
If something is missing from your UI (e.g., an image, button, or text), use a screenshot to show its absence:- “This screenshot shows the current UI. The ‘Add to Cart’ button is missing below each product listing. Please analyze the code and make sure the button appears in the correct location.”
-
Comparing Designs:
Use screenshots of designs from similar apps or projects as inspiration and ask the AI to replicate elements from those designs:- “Here’s a screenshot of a competitor’s navbar. Make my navbar look like this, matching its style and responsiveness.”
Another frequent challenge with AI-assisted development is when the AI forgets prior edits or loses track of changes it has made. To combat this, you can ask the AI to create a custom change-tracking system within your project. This system will document the changes it makes, acting as a “memory” to reference whenever something goes wrong.
- “Create a system within the project that automatically keeps track of all changes made to the code, along with timestamps and descriptions of each change.”
This can include:
-
A Centralized Log File:
The AI can create a file (e.g.,changelog.txt) where it automatically appends a description of each change it makes:- Example format for changelog entries:
Timestamp: 2025-01-06 11:30PM File Edited: main.js Description: Fixed the submit button functionality to redirect to the confirmation page.
- Example format for changelog entries:
-
Inline Code Comments:
Ask the AI to annotate its changes directly in the code:- Example:
// Added event listener to fix the submit button issue (2025-01-06) submitButton.addEventListener('click', handleSubmit);
- Example:
-
Version Numbers or Tags:
Have the AI embed version numbers or tags within the code so you can revert to specific points if needed:- Example prompt: “Add version tags in comments at the top of each file, updating them every time a change is made.”
- It creates a single source of truth for all changes, helping you debug and roll back if necessary.
- It reduces frustration when the AI forgets past edits, as you can refer to the changelog or inline comments.
https://github.com/techcow2/cursor-agent-tracking
When working on a project, you’re bound to encounter issues—whether it’s crashes, unexpected behavior, or persistent errors. These moments can be frustrating, but there’s a simple and effective way to guide the AI to handle these challenges carefully while avoiding known pitfalls. This section will show you how to craft thoughtful prompts that help the AI tackle problems effectively without introducing new ones.
Sometimes, when trying to fix an issue or add a new feature, you might find that the AI inadvertently repeats the same mistake or introduces new problems. This can happen because the AI isn’t aware of past errors or isn’t given enough context to avoid them. Without clear guidance, it might overlook critical details or create unintended side effects.
To prevent these issues, you can craft prompts that combine your task description with explicit instructions about what to avoid. This ensures the AI approaches the task with caution and focuses on solving the problem without causing further complications.
-
Revert to a Stable State (if needed):
- Before making changes, ensure your project is in a stable state where it functions correctly without the problematic additions or modifications.
-
Identify and Document the Problem:
- Gather all relevant information about the issue:
- Error messages from logs or consoles.
- Steps to reproduce the problem.
- Observed behavior versus expected behavior.
- Gather all relevant information about the issue:
-
Craft Your Prompt:
- Use this template to guide the AI:
Implement [task/feature] carefully while avoiding [specific problem/error]. Ensure all existing functionality remains intact. - Examples:
- “Add a feature that allows users to filter products by category on the homepage. Implement this feature carefully and avoid causing this error: TypeError: Cannot read property 'map' of undefined.”
- “Fix the issue with the login button not redirecting users after submission. Ensure no other features are disrupted during this process.”
- Use this template to guide the AI:
-
Provide Context (if applicable):
- If you suspect certain parts of your code are related to the issue, include those details in your prompt:
The error might be caused by how the product list is being rendered. Please ensure any changes to this part of the code do not introduce new bugs.
- If you suspect certain parts of your code are related to the issue, include those details in your prompt:
-
Review and Test Output:
- Carefully review the AI’s suggestions before applying them.
- Test changes in a controlled environment to confirm they resolve the issue without introducing new problems.
- Error Awareness: Including specific problems or errors in your prompt helps the AI focus on avoiding known pitfalls.
- Precision: Phrases like “implement carefully” signal that accuracy is critical.
- Proactive Debugging: This approach encourages the AI to analyze potential risks and produce solutions that are both effective and safe.
When building or enhancing a website or a web-based application, efficiency and performance are two critical factors. One effective way to achieve these goals is by using Content Delivery Network (CDN) libraries. This chapter will guide you through what a CDN library is, how it benefits your project, and introduce some of the most popular libraries like Tailwind CSS, Bootstrap, Material UI, and more. It will also provide helpful examples on how to prompt your AI assistant to integrate and use these libraries—especially useful if you’re new to coding and rely on AI to simplify development tasks.
A Content Delivery Network (CDN) is a geographically distributed network of servers that delivers web content—such as JavaScript libraries, CSS frameworks, or fonts—quickly to users based on their location. A CDN library refers to a version of a popular framework or tool (like Bootstrap or jQuery) that is hosted on these networks. Instead of downloading the files to your own server or development machine, you reference them directly from the CDN.
-
Faster Loading Times
CDNs serve files from servers located closest to your users, reducing the time it takes for your site to load. -
Reduced Bandwidth for Your Server
Offloading the library hosting to a CDN means your own server doesn’t have to handle those file downloads. -
Ease of Implementation
You can add powerful libraries quickly—often with just one or two lines of code. -
Automatic Updates
CDNs typically host the latest versions of libraries, so you can easily stay up to date. -
Caching Advantages
If a user has already loaded the same library or framework from a CDN on another site, their browser may use the cached version, speeding up load times further.
If you’re brand new to coding and rely on AI for setting up your project, here are prompt examples you can use to have AI handle library integration:
-
Integrating a CSS Framework
Example Prompt:“Use the Bootstrap CDN in my existing HTML file. Make sure the navbar collapses on mobile. Place a footer at the bottom with a simple copyright notice.”
-
Migrating from One Framework to Another
Example Prompt:“Replace Tailwind CSS with Bootstrap via CDN in my project. Carefully convert existing Tailwind classes to Bootstrap equivalents to keep the same overall design.”
-
Adding a JavaScript Utility
Example Prompt:“Include Lodash from a CDN in my index.html. Then, in my main.js file, demonstrate how to use Lodash’s debounce function for a text input.”
These prompts give the AI clarity on which library to use, how to use it (via a CDN), and any specific tasks or features you want implemented.
Below, you’ll find popular libraries you can easily add to your project via a CDN. Each entry includes a description, usage notes, a sample snippet, and a prompt example for your AI.
-
Description:
A utility-first CSS framework that helps you build custom designs rapidly by using pre-defined classes in your HTML. -
Best For:
Developers who want granular control over the design without writing a lot of custom CSS. -
Sample Implementation:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" > -
AI Prompt Example:
“Add Tailwind CSS to my project via a CDN. Create a homepage with a header, a simple hero section, and a footer. Use Tailwind classes to ensure a clean, modern design.”
-
Description:
One of the most widely used CSS frameworks for building responsive, mobile-first websites. It comes with pre-designed components like navbars, forms, modals, and more. -
Best For:
Beginners who want a quick and consistent design with minimal setup. -
Sample Implementation:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" > <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script> -
AI Prompt Example:
“Add the latest Bootstrap CDN links to my website. Create a responsive navbar with a dropdown for ‘Services’ and a search bar on the right. Ensure it looks good on mobile devices.”
-
Description:
A React-based library that implements Google’s Material Design system, offering ready-to-use components like buttons, cards, and dialogs. -
Best For:
React projects requiring a sleek, modern, and professional design aesthetic. -
Sample Implementation:
- CDN for Material Icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" > - React Integration (via npm):
npm install @mui/material @emotion/react @emotion/styled
(While Material UI primarily recommends npm, you can still reference their icon fonts via CDN.)
- CDN for Material Icons:
-
AI Prompt Example:
“Integrate Material Icons from a CDN and use them in my React app. Build a simple card component for displaying products with a material-style ‘Add to Cart’ button.”
-
Description:
A comprehensive icon library offering scalable vector icons that can be easily styled with CSS. -
Best For:
Quickly adding social media icons, nav icons, or any other iconography without creating custom SVGs. -
Sample Implementation:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" > -
AI Prompt Example:
“Add Font Awesome to my HTML via CDN. Replace all placeholder icons in my navbar with Font Awesome icons for ‘Home,’ ‘Profile,’ and ‘Cart.’ Ensure they scale correctly on mobile.”
-
Description:
A classic JavaScript library known for simplifying DOM manipulation, event handling, and AJAX operations. -
Best For:
Legacy projects or beginners who want to do complex UI interactions without writing extensive vanilla JavaScript. -
Sample Implementation:
<script src="https://code.jquery.com/jquery-3.6.4.min.js" ></script> -
AI Prompt Example:
“Add jQuery via CDN to my index.html. Show me how to hide a div when a user clicks a button, and log a success message to the console.”
-
Description:
A JavaScript utility library that provides a wide range of functions for data manipulation, including deep cloning, debouncing, and more. -
Best For:
Simplifying complex operations on arrays, objects, and strings. -
Sample Implementation:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" ></script> -
AI Prompt Example:
“Add Lodash from a CDN. Convert my existing for-loops to Lodash methods, and demonstrate how to debounce a search field.”
-
Description:
A CSS library offering pre-made animations (fade, bounce, slide, etc.) that you can apply to elements by adding specific classes. -
Best For:
Quickly adding animations to elements without writing custom CSS animations. -
Sample Implementation:
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" > -
AI Prompt Example:
“Include Animate.css via CDN and apply a fade-in animation to my hero section on page load. Also apply a bounce effect to the ‘Sign Up Now’ button.”
-
Description:
A versatile JavaScript library for creating interactive charts and graphs. -
Best For:
Beginners who want a straightforward way to visualize data without diving into more complex libraries. -
Sample Implementation:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>const ctx = document.getElementById('myChart').getContext('2d'); new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow'], datasets: [{ label: '# of Votes', data: [12, 19, 3], backgroundColor: ['red', 'blue', 'yellow'] }] } }); -
AI Prompt Example:
“Add Chart.js via a CDN and create a bar chart showing monthly sales data. Label the y-axis as ‘Sales’ and the x-axis with the months of the year.”
-
Identify Your Needs
Decide if you need help primarily with styling (CSS) or with JavaScript functionality. Some libraries (like Bootstrap or Tailwind) focus on design, while others (like jQuery or Lodash) focus on helping with JavaScript tasks. -
Check Compatibility
Ensure the library you choose works well with the tools or frameworks you already have in place. -
Look for Active Community and Documentation
Well-supported libraries typically have better tutorials, larger communities for troubleshooting, and frequent updates. -
Ask Your AI
If you’re still unsure which library to use, prompt your AI for advice:“Which library is best for a beginner-friendly, highly customizable UI: Tailwind, Bootstrap, or Material UI?”
The AI can explain the pros and cons for each choice in the context of your project.