50+ Useful ChatGPT Prompts for Web Developers

Prompts:

Centering a div

How do you vertically and horizontally center a div?


Creating Elements in SVG

Create an exclamation mark symbol in SVG

 

Generating SQL Queries

Assume the table names and generate an SQL code to find out Elon Musk’s tweets from 2019.

 

Explain / Write Regex

What exactly does this regex do? rege(x(es)?|xps?)

 

Change CSS with JavaScript

How to use JavaScript to change CSS?

 

Code Review

Act as a developer code reviewer. I will provide you with a piece of code. You will help me identify potential bugs in this code, give important suggestions on improving the code quality and maintainability, and check if it adheres to coding standards and best practices.

 

Make ChatGPT a Python interpreter

I want you to act like a Python interpreter. I will give you Python code, and you will execute it. Do not provide any explanations. Do not respond with anything except the output of the code. The first code is: “print(‘hello world!’)”

 

Make ChatGPT a Linux terminal

I want you to act as a Linux terminal. I will type commands and you will reply with what the terminal should show. I want you to only reply with the terminal output inside one unique code block, and nothing else. do not write explanations. do not type commands unless I instruct you to do so. when I need to tell you something in English, I will do so by putting text inside curly brackets {like this}. my first command is pwd

 

Make ChatGPT a Javascript console

I want you to act as a javascript console. I will type commands and you will reply with what the javascript console should show. I want you to only reply with the terminal output inside one unique code block, and nothing else. do not write explanations. do not type commands unless I instruct you to do so. when I need to tell you something in English, I will do so by putting text inside curly brackets {like this}. My first command is console.log(“Hello World”);

 

Produce cheat sheets

Write a cheat sheet for markdown formatting.

 

Get quick shortcuts

In a bulleted list, provide shortcuts for React using Apple or Windows devices.

 

Debug code

I want you to debug this code. The code is supposed to do [provide purpose] [Insert code here]

 

Consult on web design

I want you to act as a web design consultant. I will provide you with details related to an organization needing assistance designing or redeveloping its website, and your role is to suggest the most suitable interface and features that can enhance user experience while also meeting the company’s business goals. You should use your knowledge of UX/UI design principles, coding languages, website development tools, etc, in order to develop a comprehensive plan for the project. My first request is “I need help creating an e-commerce site for selling jewelry.”

 

Make ChatGPT an SQL terminal

I want you to act as a SQL terminal in front of an example database. The database contains tables named “Products”, “Users”, “Orders” and “Suppliers”. I will type queries and you will reply with what the terminal would show. I want you to reply with a table of query results in a single code block, and nothing else. Do not write explanations. Do not type commands unless I instruct you to do so. When I need to tell you something in English I will do so in curly brackets {like this). My first command is ‘SELECT TOP 10 * FROM Products ORDER BY Id DESC’

 

Suggest frameworks

Can you recommend a suitable front-end framework for my website? I’m making an e-commerce website.

 

Typescript function

Create a TypeScript function that computes the implied volatility using the Black-Scholes model. Where the inputs are the underlying price, strike price, free-risk rate, and option price. Write it step by step, with an explanation for each step.

 

Checklist for UI design

Create a checklist for UI elements for a perfect [screen/feature] in a table

 

Get ideas about user flows

Can you create the most common user flow for a [app type]?

 

Generate copy for a website or section

Write 5 ideas of high-conversion headline/paragraph for a [product segment] landing page

 

Optimize existing copy

Improve writing and optimize for higher conversion: [include a copy here]

 

Get ideas for page layout or wireframe

Suggest a wireframe layout for a travel app or how should a travel landing page look.

 

Competitor analysis

Who are amazon.in’s 5 biggest competitors?

 

Get real data for design research

Share demographic data of people in the USA using Amazon.in

 

ChatGPT as an UX writer

You’re a UX writer. Generate 5 ideas for an error message.

 

Explain design terms to non-tech people

How would you describe the user journey to my grandfather that doesn't know what is a website or a computer?


Communicate with a difficult client

Get ideas for negotiating with a client who hasn't paid their invoice on time

 

More Prompts


Act as a software engineer. Develop an architecture and code for developing a random winner-picker website with JavaScript.
Please continue writing this code for JavaScript <post code below>.
Provide a UX design tip I can share on Instagram.
Help me find mistakes in the following code <paste code below>.
List ways I can use AI in software engineering.
What are 5 of the best practices for software architecture design?
What are the tips and tricks for writing efficient code?
Suggest tools I can use to make writing code easier.
How do I make an accessible Tailwind Footer?
Write a docstring for the following function <paste function below>.
I’m making a website for a small business that sells hand-crafted furniture. I need ideas on how to structure the website using WordPress.
In a bulleted list, provide reasons for using Ruby on Rails
In a paragraph, describe best practices for web accessibility.
Behave like a software developer. Come up with an architecture and code for developing a secret gift exchange website using HTML.
I’m making a website for a small business that sells handmade jewelry. Provide ideas on how to structure the website using WordPress.
List web browser compatibility for CSS Grid.

from 

https://doc.clickup.com/37460291/p/h/13q6a3-704/50604ccf2bad6ad