Introduction
Building a modern website from a mockup to a fully responsive layout can be tedious. Between aligning elements with Flexbox, structuring complex grids, adding smooth animations, and ensuring mobile compatibility, even experienced developers spend hours tweaking CSS. Large language models (LLMs) can accelerate this process significantly when you craft the right prompts. This article provides 12 ready-to-use, copy-paste prompts for HTML/CSS tasks — covering Flexbox, CSS Grid, animations, responsive design, and more. Each prompt is tested and includes a usage example with code. Use them as a cheat sheet to cut your layout time in half.
1. Flexbox Centering (One-Liner)
Task: Center a child element both horizontally and vertically inside a parent container using Flexbox.
Prompt:
"Write HTML and CSS to center a <div class=\"child\"> with fixed width and height inside a <div class=\"parent\"> using Flexbox. The parent should have a minimum height of 300px. Use display: flex; justify-content: center; align-items: center;. Include a border for visual reference."
Usage Example:
<style>
.parent { display: flex; justify-content: center; align-items: center; min-height: 300px; border: 2px solid #333; }
.child { width: 150px; height: 100px; background: #4CAF50; color: white; text-align: center; line-height: 100px; }
</style>
<div class=\"parent\">
<div class=\"child\">Centered</div>
</div>
Why it works: Flexbox centering is the most reliable cross-browser method (supported in IE11+). This prompt gives you a reusable snippet.
2. CSS Grid Layout with Named Areas
Task: Create a two-column layout with a header, sidebar, main content, and footer using CSS Grid and named template areas.
Prompt:
"Generate a responsive CSS Grid layout with grid-template-areas. Define areas: header, sidebar, main, footer. On screens wider than 768px, use two columns (sidebar 250px, main 1fr). On smaller screens, stack all areas vertically. Use @media (max-width: 768px) and set grid-template-areas accordingly. Provide the HTML markup with <header>, <aside>, <main>, <footer> elements."
Usage Example:
<style>
.grid-container {
display: grid;
grid-template-areas:
\"header header\"
\"sidebar main\"
\"footer footer\";
grid-template-columns: 250px 1fr;
gap: 10px;
}
@media (max-width: 768px) {
.grid-container {
grid-template-areas:
\"header\"
\"sidebar\"
\"main\"
\"footer\";
grid-template-columns: 1fr;
}
}
header { grid-area: header; background: #f1f1f1; padding: 10px; }
aside { grid-area: sidebar; background: #ddd; padding: 10px; }
main { grid-area: main; background: #fff; padding: 10px; }
footer { grid-area: footer; background: #ccc; padding: 10px; }
</style>
<div class=\"grid-container\">
<header>Header</header>
<aside>Sidebar</aside>
<main>Main Content</main>
<footer>Footer</footer>
</div>
Why it works: Named areas make the layout self-documenting and easy to modify.
3. Hover Animation with CSS Transitions
Task: Add a smooth hover effect to a button that changes background color, scale, and box-shadow.
Prompt:
"Create a CSS-only hover animation for a button. Use transition on background-color, transform, and box-shadow. Default: blue background, white text. On hover: dark blue background, scale(1.05), and a subtle shadow. Duration: 0.3s. Include the button HTML."
Usage Example:
<style>
.btn-animated {
background: #2196F3;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.btn-animated:hover {
background: #1976D2;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>
<button class=\"btn-animated\">Hover me</button>
Why it works: Transitions are GPU-accelerated and perform better than JavaScript animations for simple effects.
4. Responsive Navigation Menu (Hamburger)
Task: Build a responsive navigation bar that shows a horizontal menu on desktop and a hamburger menu on mobile.
Prompt:
"Write HTML and CSS for a responsive navbar. On screens wider than 768px, display links horizontally. On mobile, hide links and show a hamburger icon. Use a checkbox hack to toggle the menu (no JavaScript). Style the hamburger as three horizontal lines. The menu should slide down when toggled."
Usage Example:
<style>
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #333; color: white; }
.menu { display: flex; list-style: none; gap: 20px; }
.menu-toggle { display: none; }
.hamburger { display: none; font-size: 30px; cursor: pointer; }
@media (max-width: 768px) {
.menu { display: none; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: #333; }
.menu-toggle:checked + .hamburger + .menu { display: flex; }
.hamburger { display: block; }
}
</style>
<nav class=\"navbar\">
<div>Logo</div>
<input type=\"checkbox\" id=\"menu-toggle\" class=\"menu-toggle\">
<label for=\"menu-toggle\" class=\"hamburger\">☰</label>
<ul class=\"menu\">
<li><a href=\"#\">Home</a></li>
<li><a href=\"#\">About</a></li>
<li><a href=\"#\">Services</a></li>
<li><a href=\"#\">Contact</a></li>
</ul>
</nav>
Why it works: The checkbox hack avoids JavaScript, keeping the solution lightweight and accessible.
5. CSS Keyframe Spinner
Task: Create a pure CSS spinning loader (spinner) using keyframe animations.
Prompt:
"Generate a CSS-only loading spinner using keyframes. The spinner should be a circle that rotates continuously. Use @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }. The element should be a <div> with a border (transparent on one side) to create the spinner look. Set animation duration to 1s, infinite."
Usage Example:
<style>
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div class=\"spinner\"></div>
Why it works: Keyframe animations are standard and perform well; this spinner works across all modern browsers.
6. Responsive Image Gallery with Flexbox
Task: Build a responsive image gallery where images wrap into rows and resize proportionally.
Prompt:
"Create a responsive image gallery using Flexbox. Use flex-wrap: wrap and flex: 1 1 200px on each image container. Images should be width: 100% and height: auto. Add a 10px gap between items. Provide sample HTML with three images (use placeholder URLs like https://via.placeholder.com/300x200)."
Usage Example:
<style>
.gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-item { flex: 1 1 200px; }
.gallery-item img { width: 100%; height: auto; display: block; border-radius: 8px; }
</style>
<div class=\"gallery\">
<div class=\"gallery-item\"><img src=\"https://via.placeholder.com/300x200\" alt=\"Placeholder\"></div>
<div class=\"gallery-item\"><img src=\"https://via.placeholder.com/300x200\" alt=\"Placeholder\"></div>
<div class=\"gallery-item\"><img src=\"https://via.placeholder.com/300x200\" alt=\"Placeholder\"></div>
</div>
Why it works: Flexbox with flex-wrap automatically adjusts to screen width, making it responsive without media queries.
7. Sticky Footer with Flexbox
Task: Create a sticky footer that stays at the bottom of the page even when content is short.
Prompt:
"Write HTML and CSS for a sticky footer using Flexbox. Set html, body { height: 100%; margin: 0; }. Wrap main content and footer in a container with display: flex; flex-direction: column; min-height: 100vh. Give main content flex: 1 so it expands, pushing the footer down."
Usage Example:
<style>
html, body { height: 100%; margin: 0; }
.wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.main { flex: 1; padding: 20px; background: #f9f9f9; }
.footer { padding: 10px; background: #333; color: white; text-align: center; }
</style>
<div class=\"wrapper\">
<div class=\"main\">Main content</div>
<div class=\"footer\">Sticky Footer</div>
</div>
Why it works: This is the modern standard for sticky footers, supported in all browsers that support Flexbox.
8. Card Layout with CSS Grid
Task: Create a responsive card grid that displays 3 columns on desktop, 2 on tablet, and 1 on mobile.
Prompt:
"Build a responsive card layout using CSS Grid. Use grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). Each card should have a title, description, and an image. Add padding, border-radius, and a subtle box-shadow. Provide sample HTML with three cards."
Usage Example:
<style>
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px; }
.card { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 15px; }
.card img { width: 100%; border-radius: 4px; }
.card h3 { margin: 10px 0 5px; }
.card p { color: #555; }
</style>
<div class=\"card-grid\">
<div class=\"card\">
<img src=\"https://via.placeholder.com/300x150\" alt=\"Card\">
<h3>Card Title</h3>
<p>Description text here.</p>
</div>
<!-- Repeat for more cards -->
</div>
Why it works: auto-fill with minmax creates a truly responsive grid without media queries.
9. Smooth Scroll to Section
Task: Add smooth scrolling to a page when clicking anchor links.
Prompt:
"Write CSS to enable smooth scrolling for all anchor links on the page. Use html { scroll-behavior: smooth; }. Then create a page with a navigation bar and three sections with IDs (section1, section2, section3). Each section should have a minimum height of 500px with a different background color."
Usage Example:
<style>
html { scroll-behavior: smooth; }
section { min-height: 500px; padding: 20px; }
#section1 { background: #ffcccb; }
#section2 { background: #cce5ff; }
#section3 { background: #d4edda; }
nav { position: fixed; top: 0; width: 100%; background: white; padding: 10px; }
nav a { margin-right: 15px; }
</style>
<nav>
<a href=\"#section1\">Section 1</a>
<a href=\"#section2\">Section 2</a>
<a href=\"#section3\">Section 3</a>
</nav>
<section id=\"section1\">Content 1</section>
<section id=\"section2\">Content 2</section>
<section id=\"section3\">Content 3</section>
Why it works: scroll-behavior: smooth is a native CSS property (supported in modern browsers) that requires zero JavaScript.
10. Responsive Table with Overflow
Task: Make a wide table scrollable horizontally on small screens.
Prompt:
"Create a responsive table that becomes horizontally scrollable on screens narrower than 600px. Wrap the <table> in a <div> with overflow-x: auto. Style the table with borders, striped rows, and a sticky header. Provide sample data (3 columns, 4 rows)."
Usage Example:
<style>
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 500px; }
th, td { padding: 10px; border: 1px solid #ddd; text-align: left; }
th { background: #f2f2f2; position: sticky; top: 0; }
tr:nth-child(even) { background: #f9f9f9; }
@media (max-width: 600px) {
.table-wrapper { overflow-x: auto; }
}
</style>
<div class=\"table-wrapper\">
<table>
<tr><th>Name</th><th>Email</th><th>Role</th></tr>
<tr><td>John Doe</td><td>john@example.com</td><td>Admin</td></tr>
<tr><td>Jane Smith</td><td>jane@example.com</td><td>User</td></tr>
<tr><td>Sam Wilson</td><td>sam@example.com</td><td>Editor</td></tr>
</table>
</div>
Why it works: Wrapping the table in an overflow container prevents layout breakage on mobile without losing table semantics.
11. CSS Custom Properties for Theming
Task: Implement a simple light/dark theme toggle using CSS custom properties.
Prompt:
"Write HTML and CSS that uses CSS custom properties (variables) for theming. Define --bg-color, --text-color, and --primary-color on :root (light theme) and in a .dark class (dark theme). Include a button that toggles the .dark class on the <body> using a small JavaScript snippet. Provide sample content."
Usage Example:
<style>
:root { --bg-color: #ffffff; --text-color: #333333; --primary-color: #2196F3; }
.dark { --bg-color: #121212; --text-color: #e0e0e0; --primary-color: #bb86fc; }
body { background: var(--bg-color); color: var(--text-color); font-family: Arial; transition: background 0.3s, color 0.3s; }
button { background: var(--primary-color); color: white; border: none; padding: 10px 20px; cursor: pointer; }
</style>
<button id=\"theme-toggle\">Toggle Theme</button>
<p>This content changes with the theme.</p>
<script>
document.getElementById('theme-toggle').addEventListener('click', function() {
document.body.classList.toggle('dark');
});
</script>
Why it works: Custom properties allow instant theme switching without rewriting all selectors; the small JS is acceptable for user interaction.
12. Mobile-First Typography Scale
Task: Define a responsive typography scale using clamp() for headings and body text.
Prompt:
"Write CSS for a mobile-first typography scale. Use clamp() to set font sizes that scale between a minimum and maximum value. For example: h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }, h2 { clamp(1.25rem, 3vw, 2rem); }, p { clamp(1rem, 2.5vw, 1.125rem); }. Add appropriate line-height and margin. Provide a sample HTML page with headings and paragraphs."
Usage Example:
<style>
body { font-family: sans-serif; line-height: 1.6; padding: 20px; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 0.5em; }
h2 { font-size: clamp(1.25rem, 3vw, 2rem); margin: 0 0 0.5em; }
p { font-size: clamp(1rem, 2.5vw, 1.125rem); margin: 0 0 1em; }
</style>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This paragraph scales fluidly between 16px and 18px depending on viewport width.</p>
Why it works: clamp() provides fluid typography without media queries, improving readability across devices.
Conclusion
Mastering these 12 prompts will drastically speed up your HTML/CSS workflow — from layout fundamentals to responsive polish. The key is to be specific in your requests: mention the CSS properties, breakpoints, and desired behavior. As AI models improve, you can even combine multiple prompts into a single request for a full page layout. Start using these prompts today, and you will save hours of manual coding. For more advanced techniques, refer to the official MDN Web Docs (developer.mozilla.org) and the CSS-Tricks Almanac (css-tricks.com/almanac). Happy coding!
Comments