Best ChatGPT Prompts for Frontend Developers

Create a responsive pricing section using HTML and Bootstrap 5 with three cards

<div class="container py-5">
  <div class="row text-center">
    <div class="col-md-4">
      <div class="card p-3">
        <h3>Basic Plan</h3>
        <p>$9/month</p>
        <button class="btn btn-primary">Select</button>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card p-3">
        <h3>Pro Plan</h3>
        <p>$19/month</p>
        <button class="btn btn-primary">Select</button>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card p-3">
        <h3>Enterprise</h3>
        <p>$49/month</p>
        <button class="btn btn-primary">Select</button>
      </div>
    </div>
  </div>
</div>

Style a login form with Tailwind CSS and support for dark mode.

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <form class="bg-white dark:bg-gray-800 p-8 rounded shadow-md w-full max-w-sm">
    <h2 class="text-2xl font-bold mb-6 text-center text-gray-800 dark:text-gray-200">Login</h2>
    <input class="w-full p-2 mb-4 border rounded dark:bg-gray-700 dark:text-white" type="email" placeholder="Email" />
    <input class="w-full p-2 mb-4 border rounded dark:bg-gray-700 dark:text-white" type="password" placeholder="Password" />
    <button class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600">Login</button>
  </form>
</div>

Explain what this CSS Flexbox code does in simple terms.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

This sets up a flex container. justify-content: space-between places items with equal spacing between them horizontally, and align-items: center centers them vertically within the container.

My navbar overlaps content on mobile. What’s wrong and how to fix it?

This issue typically happens when the navbar has position: fixed without enough top margin on the content. Try adding a margin-top to the main content equal to the navbar’s height.

main {
  margin-top: 60px; /* Adjust based on navbar height */
}

Write test cases for a button that opens a modal using React Testing Library.

import { render, fireEvent, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('opens modal on button click', () => {
  render(<MyComponent />);
  const button = screen.getByText('Open Modal');
  fireEvent.click(button);
  expect(screen.getByText('Modal Title')).toBeInTheDocument();
});

How do I use Framer Motion to animate a div sliding in from the left?

import { motion } from 'framer-motion';

<motion.div
  initial={{ x: -100, opacity: 0 }}
  animate={{ x: 0, opacity: 1 }}
  transition={{ duration: 0.5 }}
>
  Hello from the left!
</motion.div>

Add JSDoc comments to this React component.

/**
 * UserCard component displays user info.
 * @param {Object} props
 * @param {string} props.name - User's name
 * @param {string} props.email - User's email
 */
function UserCard({ name, email }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

Suggest accessibility improvements for this form.

<form>
  <input type="text" placeholder="Name" />
  <button>Submit</button>
</form>

Add <label> elements and use aria attributes where necessary:

<form>
  <label for="name">Name</label>
  <input id="name" name="name" type="text" aria-required="true" />
  <button type="submit">Submit</button>
</form>

Suggest performance improvements for a large React app.

=> Use React.memo to avoid unnecessary re-renders
=> Code-split routes using React.lazy()
=> Use useCallback and useMemo for stable references
=> Minify images and assets

const MyComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

Create mock JSON data for 5 blog posts with title, author, date, and content preview.

[
  {
    "title": "Understanding Flexbox",
    "author": "Alice",
    "date": "2024-06-10",
    "preview": "A deep dive into CSS Flexbox layout techniques..."
  },
  ...
]