Tohidul Pappu
AI is a blessing for web developers. It’s helping with code generation, bug fixing, debugging, design suggestions, analysis, and research and more. Understanding how to interact with AI is essential for achieving the greatest outcomes. You won’t get the outcomes you want if AI doesn’t fully understand what you need. For this, you need to know how to provide the right prompts to AI and making AI your best friend in web development works and learning process.
I highly recommend all web developers take this free course to improve their prompt skills:
Free Course: ChatGPT Prompt Engineering for Developers
https://www.deeplearning.ai/short-courses/chatgpt-prompt-engineering-for-developers/
Below, I share some guidelines for web developers to become expert with AI prompts and achieve better results.
If you want to avoid generic and unhelpful results, make sure your prompt is specific to your needs. Clearly outline what you require, and you’ll get a more accurate answer.
For example: Create a JavaScript function that filters an array to return only items with a value greater than 10.
This direct request is far more effective than a vague one like “Help me with JavaScript.” It specifies the task (filtering an array) and the condition (items greater than 10), guiding the AI to provide the exact code you’re looking for.
AI may not always understand exactly what you’re asking, so it’s essential to be specific and detailed, using examples to clarify your needs. Without proper details, AI might give you a general response that doesn’t meet your expectations.
For example: Write HTML and CSS code for a responsive, mobile-friendly navigation bar with a dropdown menu.
This prompt includes functionality (dropdown menu), device consideration (mobile-friendly), and appearance (responsive). Instead of producing a basic navigation bar, the AI will provide code tailored to these exact requirements.
Web developers work with multiple programming languages, frameworks, and libraries, each with its own code style, syntax, and requirements. When asking AI for code, specify the language, library, or framework to avoid receiving a general answer or code in a different language.
For example: Generate a Python function that connects to a Django database and retrieves all records from a ‘Customers’ table.
By specifying Python and Django, the AI will focus on Django’s ORM (Object-Relational Mapping) structure, producing code optimized for Django rather than a generic Python function.
Getting the right answer format is essential. AI typically provides responses in a general format, so if you specify a format, AI can provide the information exactly what you need.
For example: Provide a step-by-step guide on setting up a REST API with Node.js and Express.
By asking for a “step-by-step guide,” you’re guiding AI to deliver an organized series of instructions, perfect for developers who need a clear roadmap.
Setting limits in your prompt is important when you need a simple, manageable answer without complex or unnecessary details. You can set limits like “keep it under 50 lines” or “use only vanilla JavaScript” to refine the response.
For example: Write a CSS grid layout with three columns and two rows, using only CSS, no JavaScript.
This prompt directs the AI to focus solely on CSS, avoiding additional code or complexity. The detailed layout structure helps ensure the AI’s response stays relevant and concise.
You are asking the AI to pay attention to criteria that improve quality, like readability, speed, or SEO, when you ask it to concentrate on best practices. For developers who want to maintain an excellent standard of writing or coding, this is extremely helpful.
For an example: Generate an SEO-friendly meta description for a webpage that explains the basics of JavaScript.
The prompt instructs the AI to produce material that incorporates appropriate keywords and follows SEO guidelines, ensuring that the meta description is optimized for search engines.
Sharing an outline or snippet of code with the AI might help it improve or build upon your previous work. In this manner, AI may modify its response to better suit your structure or style, which will make direct implementation simpler for you.
For an example: Refine this function to improve readability:
function sumArray(arr) { let sum = 0; for (let i = 0; i < arr.length; i++) { sum += arr[i]; } return sum; }
By giving the AI an example function, it can concentrate on making the text easier to understand. The AI may recommend modifications such as replacing loops with array functions, which can simplify and improve the readability of your code.
If you are learning or working on something complex or maybe you don’t understand properly what AI shared with you, you can ask for an explanation in the simplest way. AI will break it down and explain everything in the easiest way so that you can easily understand complex things.
For example: Explain how to resolve CORS (Cross-Origin Resource Sharing) errors in a React app with an Express.js backend.
You may learn more about CORS and how to manage it successfully in your project by asking for an explanation. This knowledge aids in troubleshooting and helps prevent future occurrences of the same problems.
Sometimes you will not get the result that you expected, At that time you should adjust your prompt, explain more about your needs, specify the needs, give some examples, change your prompt for AI. Then you will see you will get the result that you expected.
For an example: Explain how to use JavaScript promises and then change it to Explain how to use JavaScript promises with real-world examples of asynchronous functions, such as fetching data from an API.
In order to let the AI concentrate on real-world use cases, the revised prompt provides context (asynchronous functions, collecting data), which results in a more useful and relevant explanation.
Your code will be more dependable if you ask the AI to handle edge circumstances or exceptions. You may ask the AI to take into consideration odd situations when you’re constructing functions, such as empty arrays, incorrect inputs, or undefined variables.
For an example: Create a JavaScript function that handles errors if the input is not an array and filters an array to exclude null or undefined values.
You may direct the AI to develop stronger code that won’t break when it encounters unexpected data by naming particular edge situations (null, undefined, and non-array inputs).
To make AI your best friend in your regular work and get the perfect results, you should provide accurate, specific, and clear prompts. You should guide AI properly with your best prompts. If you follow the above guidelines, your web development work and learning process will be faster, enjoyable, and easy to understand as well. So keep learning and working with AI. If you have any questions about AI prompt guidelines, please comment below.
Founder of TIWebView www.tohidul.info
Share on Facebook Share on Twitter Share on Linkedin Share on Email In this world, 43.3% of websites are created on WordPress. And we can see that the demand for WordPress is very high. However, there are millions of WordPress designers in the market. But most of the time, they
Share on Facebook Share on Twitter Share on Linkedin Share on Email In this competitive blogging market, you need to choose the best option for your blog journey. With over 600 million blog websites worldwide, you understand how many people are working on blogging. If you are new, you can
Hi, I’m Tohidul Pappu, an experienced web developer with a great portfolio, having successfully developed over 500 live websites. I enjoy sharing my knowledge to help others who want to work in web development by offering advice, guidance, and solutions the problems along the way.
