Prompts for Front End Web Developers

creative internet abstract computer

Acting as a front end web developer, provide me a list of 10 ChatGPT specific prompts to write or maintain better css or html and to save time.

Discover our collection of front-end developer prompts that focus on HTML and CSS best practices, responsive design, accessibility, cross-browser compatibility, and performance optimization. These prompts aim to help you write better code, improve maintainability, and save time in your web development projects.

  1. “Review this HTML and CSS code for adherence to the principles of responsive design and suggest improvements to ensure a consistent user experience across devices.”
  2. “Evaluate this CSS code for proper use of specificity and the cascade, and provide recommendations to prevent conflicts and improve maintainability.”
  3. “Analyze this HTML markup for accessibility best practices, such as proper use of semantic elements, ARIA attributes, and keyboard navigation support.”
  4. “Implement a mobile-first approach in this existing CSS code, and demonstrate how to use media queries to progressively enhance the layout for larger screens.”
  5. “Examine this HTML and CSS code for cross-browser compatibility issues, and provide suggestions to ensure a consistent appearance in major browsers.”
  6. “Optimize the use of web fonts in this project, including strategies for reducing file size, improving font rendering, and prioritizing font loading.”
  7. “Refactor this CSS code to use a preprocessor like Sass or Less, demonstrating the benefits of variables, mixins, and nesting for improved maintainability.”
  8. “Implement CSS Grid or Flexbox in this web application layout, and explain the advantages of using these layout systems over traditional float-based techniques.”
  9. “Evaluate the use of inline styles and JavaScript-based styling in this project, and provide recommendations for moving those styles to external CSS files for better separation of concerns.”
  10. “Implement a CSS methodology like BEM, SMACSS, or OOCSS in this project, and demonstrate how it improves the organization, maintainability, and scalability of the codebase.”

Additional Resources

ChatGPT Built CSS For My UX

Can ChatGPT write decent CSS?

Reddit: ChatGPT generating HTML and CSS