Best ChatGPT Prompts for Web Development

Develop Website Architecture and Code

Prompt Develop an architecture and code for a [website description] website with JavaScript.

Example Response: Develop an architecture and code for a portfolio website with JavaScript. The website should have the following pages: Home, About, Projects, and Contact. Include responsive design, a navigation menu, and a contact form. Provide a sample file structure and initial code for each page.

Find Mistakes in Code

Prompt Help me find mistakes in the following code <paste code below>.

Example Response: Help me find mistakes in the following JavaScript code:

            
                function add(a, b) {
                    return a + b
                }
                console.log(add(5, '2'));
            
        

The code is supposed to add two numbers, but there's an issue when adding a number and a string. How can I fix this?

Implement a Sticky Header

Prompt I want to implement a sticky header on my website. Can you provide an example of how to do that using CSS and JavaScript?

Example Response: Sure! Here's an example of how to implement a sticky header using CSS and JavaScript:

            
                /* CSS */
                .header {
                    position: fixed;
                    top: 0;
                    width: 100%;
                    background-color: #333;
                    color: #fff;
                    padding: 10px 0;
                    text-align: center;
                    z-index: 1000;
                }
            
        

            
    
               <!--HTML-->
                <div class="header">My Sticky Header</div>
                <div class="content">
                    <!--Your page content goes here-->
                </div>
            
        

            
                // JavaScript
                window.onscroll = function() {stickyHeader()};

                var header = document.querySelector(".header");
                var sticky = header.offsetTop;

                function stickyHeader() {
                    if (window.pageYOffset > sticky) {
                        header.classList.add("sticky");
                    } else {
                        header.classList.remove("sticky");
                    }
                }
            
        

This code will make the header stick to the top of the page when you scroll down.

Continue Writing JavaScript Code

Prompt Please continue writing this code for JavaScript <post code below>.

Example Response: Please continue writing this code for a simple todo list application in JavaScript:

            
                let todos = [];

                function addTodo(todo) {
                    todos.push(todo);
                }

                function displayTodos() {
                    const todoList = document.getElementById('todoList');
                    todoList.innerHTML = '';
                    todos.forEach((todo, index) => {
                        const todoItem = document.createElement('li');
                        todoItem.textContent = todo;
                        todoList.appendChild(todoItem);
                    });
                }
            
        

The code above allows adding todos to the list and displaying them. Please continue to add functionality for removing a todo item.

Create REST API Endpoint with Node.js and Express

Prompt I need to create a REST API endpoint for my web application. Can you provide an example of how to do that using Node.js and Express?

Example Response: Sure! Here's an example of how to create a REST API endpoint using Node.js and Express:

            
                // Install Express:
                npm install express
            
        

            
                // app.js:
                const express = require('express');
                const app = express();
                const port = 3000;

                app.use(express.json());

                let items = [];

                app.get('/api/items', (req, res) => {
                    res.json(items);
                });

                app.post('/api/items', (req, res) => {
                    const newItem = req.body;
                    items.push(newItem);
                    res.status(201).json(newItem);
                });

                app.listen(port, () => {
                    console.log(`Server running at http://localhost:${port}/`);
                });
            
        

This code sets up a basic REST API with endpoints to get and post items.

Find the Bug in Code

Prompt Find the bug with this code: <post code below>.

Example Response: Find the bug with this JavaScript code:

            
                const numbers = [1, 2, 3, 4, 5];
                const evenNumbers = numbers.filter(num => num % 2 == 0);
                console.log(evenNumbers); // Output should be [2, 4]
            
        

The code is supposed to filter out even numbers from the array, but it seems to return an empty array. What's wrong?

Implement Server-Side Rendering with Next.js

Prompt I want to implement server-side rendering for my React application. Can you provide an example of how to do that using Next.js?

Example Response: Sure! Here’s an example of how to implement server-side rendering with Next.js:

            
                // Install Next.js:
                npx create-next-app@latest
                cd my-next-app
                npm run dev
            
        

            
                // pages/index.js:
                import React from 'react';

                export default function Home({ data }) {
                    return (
                       <div>
                            <h1>Server-Side Rendered Data</h1>
                            <p>{data.message}</p>
                        </div>
                    );
                }

                export async function getServerSideProps() {
                    const res = await fetch('https://api.example.com/data');
                    const data = await res.json();

                    return { props: { data } };
                }
            
        

This code sets up a Next.js application with server-side rendering for the home page.

UX Design Tip for LinkedIn

Prompt Provide a UX design tip I can share on LinkedIn.

Example Response: UX Design Tip: Simplify navigation by using clear and concise labels. This helps users find what they need quickly and reduces frustration. Remember, a well-organized website enhances the overall user experience!

Generate SQL Code for Specific Tweets

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

Example Response: Assuming the table names are users and tweets, here is the SQL code to find Elon Musk’s tweets from 2019:

            
                SELECT t.*
                FROM tweets t
                JOIN users u ON t.user_id = u.id
                WHERE u.username = 'elonmusk' AND YEAR(t.created_at) = 2019;
            
        

This query retrieves all tweets by Elon Musk from the year 2019.

Explain Regex Functionality

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

Example Response: This regex rege(x(es)?|xps?) matches the following patterns:

• regex
• regexes
• regexp
• regexps

Here's a breakdown:

• rege matches the literal characters 'rege'.
• (x(es)?|xps?) is a group that matches either x, xes, xp, or xps.
• x(es)? matches x followed by optional es.
• xps? matches xp followed by optional s.

Write Docstring for a Function

Prompt Write a docstring for the following function <paste function below>.

Example Response: Write a docstring for the following Python function:

            
                def add(a, b):
                    return a + b
            
        

Docstring:

            
                def add(a, b):
                    """
                    Adds two numbers.

                    Parameters:
                    a (int or float): The first number.
                    b (int or float): The second number.

                    Returns:
                    int or float: The sum of the two numbers.
                    """
                    return a + b
            
        

Structure Website for Small Business

Prompt I’m making a website for a small business [Business description]. I need ideas on how to structure the website using WordPress.

Example Response: I’m making a website for a small bakery. I need ideas on how to structure the website using WordPress.

Website Structure:

1. Home Page:
   • Welcome message
   • Featured products
   • Special offers
   • Testimonials
2. About Us:
   • Bakery’s history
   • Team members
   • Mission and values
3. Menu:
   • Categories (Breads, Cakes, Pastries)
   • Detailed descriptions and prices
   • High-quality images
4. Online Ordering:
   • Shopping cart functionality
   • Secure payment options
   • Order tracking
5. Blog:
   • Baking tips and recipes
   • Community events
   • New product announcements
6. Contact Us:
   • Contact form
   • Location map
   • Business hours
7. FAQ:
   • Common questions and answers

WordPress Plugins:

• WooCommerce for online orders
• Yoast SEO for search engine optimization
• WPForms for contact forms
• UpdraftPlus for backups

These elements will help create a user-friendly and engaging website for the bakery.

Skills and Experiences for Web Developer Job Application

Prompt Generate a list of 10 relevant skills and experiences for a web developer job application.

Example Response: Here are 10 relevant skills and experiences for a web developer job application:

1. Proficiency in HTML, CSS, and JavaScript
2. Experience with front-end frameworks like React or Angular
3. Knowledge of back-end development using Node.js, Express, or Django
4. Familiarity with databases like MySQL, MongoDB, or PostgreSQL
5. Understanding of RESTful APIs and web services
6. Experience with version control systems, particularly Git
7. Ability to create responsive designs using frameworks like Bootstrap
8. Knowledge of web performance optimization techniques
9. Experience with testing and debugging web applications
10. Familiarity with DevOps practices and tools like Docker and Jenkins

These skills and experiences will help showcase your qualifications for a web developer position.