Before you get started using the AI tool, there are a few best practices that apply when asking ChatGPT questions:
- Be specific;
- Provide context;
- Use role play;
- Use double quotes;
- Give examples;
By following these tips, you can ensure you’re using the bot as effectively as possible
What’s Inside:
- Web Development Architecture Prompts
- HTML and Markdown Prompts
- CSS Prompts
- JavaScript Prompts
- Security Prompts
- Code Debugging & Optimization Prompts
Let’s explore the transformative power of ChatGPT prompts in web development and beyond!
Web Development Architecture Prompts
Using ChatGPT you can create a powerful structure for your web project. Use the following prompts and modify them with the specifications of your project.
- Develop an architecture and code for a < description > website for Javascript
- Act as a software developer. Come up with an architecture and code for developing an [attorney] website with scheduling features using HTML.
- I’m making a website for a small business that sells handmade soaps. Provide ideas on how to structure the website using WordPress.
- Develop an architecture and code for a web-based project management tool that allows users to collaborate on tasks and projects.
- Can you suggest some libraries or frameworks for developing [specific type of application]?
HTML and Markdown Prompts
HTML is the first step in learning to become a developer. With ChatGPT, this step can become even easier. Check the prompts below.
- In a table, list shortcuts for [HTML/ VS Code/React/Python] using an Apple or Windows device.
- Write a cheat sheet for markdown formatting
- Write an HTML code for a form that collects a user’s name, email, and phone number.
- Write a Markdown document that includes headings, paragraphs, bullet points, and a hyperlink.
- Make the following image gallery code responsive in HTML < insert code >
- Can you provide an HTML code snippet that creates a button with a hover effect and a link to the following page [insert URL]
- Act as a web developer. Generate a [number] by [number] grid of HTML divs with a [color] background.
CSS Prompts
Same as HTML, by leveraging the platform’s natural language processing capabilities, you can work with CSS faster than ever. You can find CSS code examples, analyse them, and improve your skills.
- I want to implement a navbar on my website. Can you provide an example using CSS and Javascript?
- List web browser compatibility for CSS Grid.
- Give a code demo using Flexbox.
- Show me how I can create a responsive menu using only CSS?
- Show me how I can create a gradient background using CSS?
- Show me how to create a CSS animation for a button when it is hovered over.
- Act as a web developer. Write HTML and CSS code for a [specific type of web page], with [specific features].
- Recommend a CSS framework for [specific project].
JavaScript Prompts
If you are using Javascript, you can ask ChatGPT to generate code for a specific function or to solve a particular bug in your code. Check the following prompts and adapt them to your needs.
- Please continue writing this code for Javascript < insert code >
- Act as a JavaScript Developer, write a program that checks the information on a form. Name and phone number are required, but email address and age are not.
- Detect memory leaks in the following JavaScript code < insert code >
- Switch from [React] to [Vuejs] the following code: < insert code >
- Develop a JavaScript application that retrieves data from a public API and displays it on a webpage.
Security Prompts
Assuring your application is secure is a highly important step in your development. See how ChatGPT can help you.
- Discover the security flaw in this code snippet from an open-source npm package
- Show me step by step how I can implement HTTPS on my website
- Show me how I can implement 2FA to my website
- As a cyber security specialist. You will be provided with specific details regarding how the data is stored and shared, and your task will be to propose suitable measures to secure this data from malicious actors. This may involve recommending [insert].
- Write a secure [language] function or module that performs [specific task or operation] while preventing [security threat or vulnerability].
Code Debugging & Optimization Prompts
Assuring your application is secure is a highly important step in your development. See how ChatGPT can help you.
- Suggest ways to optimize the following function < insert function >
- < insert code > The above code is not running. Could you tell me what the problem might be?
- Act as a senior web developer. Could you please refactor the following code < insert code >
- < insert code > Could you tell me some test cases to test the above code?
- Write a secure [language] function or module that performs [specific task or operation] while preventing [security threat or vulnerability].
