Overview
This prompt aims to guide developers in creating advanced HTML and CSS code for a responsive and accessible website. Programmers and web developers will benefit from the structured approach and best practices outlined.
Prompt Overview
Purpose: This code creates a responsive website layout using modern HTML and CSS techniques.
Audience: The target audience includes web developers and designers seeking to build accessible and efficient websites.
Distinctive Feature: The layout employs semantic HTML elements and advanced CSS techniques like Flexbox for improved structure and responsiveness.
Outcome: Users will experience a visually appealing and functional website across various devices and browsers.
Quick Specs
- Media: Text
- Use case: Analysis, Classification & Categorization, Editing & Refinement
- Techniques: Few-Shot Prompting, Role/Persona Prompting, Scratchpad Reasoning
- Models: ChatGPT, Claude, Gemini AI
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
Create advanced HTML and CSS code for a website with specific structural requirements.
Consider modern web development practices to ensure code quality, responsiveness, and accessibility.
# Steps
1. Understand Requirements:
– Determine the structural and design elements to include (e.g., header, footer, navigation, main content areas).
2. Research Best Practices:
– Review current trends in HTML5 and CSS3 to ensure the website is modern and efficient.
3. Code the HTML Layout:
– Organize the content logically using semantic elements like “, “, “, “, and “.
4. Style Using CSS:
– Use advanced CSS techniques such as Flexbox or Grid for layout.
– Ensure styles are responsive using media queries.
5. Ensure Accessibility:
– Include ARIA roles and attributes to improve accessibility.
6. Test Across Devices:
– Verify that the site is responsive and displays correctly on various devices and browsers.
# Output Format
– Provide the HTML code first, followed by the CSS code.
– Include comments explaining any complex sections.
# Examples
**HTML Example:**
“`html
Advanced Website
# Website Title
– Home
– About
– Contact
## Main Content
This is the main content area.
© 2023 Your Name. All rights reserved.
“`
**CSS Example:**
“`css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header, footer {
background-color: #f8f9fa;
padding: 1rem;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
main {
margin: 2rem;
}
@media (max-width: 600px) {
nav ul li {
display: block;
margin: 0;
}
}
“`
# Notes
– Emphasize responsive design and cross-browser compatibility.
– Keep the code organized and well-commented for ease of understanding and maintenance.
– Use a cohesive color scheme and typography to enhance readability and aesthetics.
Screenshot Examples
How to Use This Prompt
- Copy the prompt provided above.
- Identify your website’s structural requirements.
- Research modern HTML5 and CSS3 best practices.
- Code the HTML layout using semantic elements.
- Style the layout with advanced CSS techniques.
- Test the website across various devices and browsers.
Tips for Best Results
- Structure First: Use semantic HTML elements like
<header>,<nav>,<main>, and<footer>for better accessibility and SEO. - Responsive Design: Implement CSS Flexbox or Grid to create layouts that adapt to different screen sizes seamlessly.
- Accessibility Matters: Incorporate ARIA roles and attributes to enhance the usability of your site for people with disabilities.
- Cross-Browser Testing: Regularly test your website on multiple browsers and devices to ensure consistent performance and appearance.
FAQ
- What are the key structural elements for a website?
Key elements include header, footer, navigation, and main content areas for organization. - How can I ensure my website is responsive?
Use CSS Flexbox or Grid layouts and implement media queries for different screen sizes. - What is the purpose of ARIA roles?
ARIA roles enhance accessibility by providing additional context for assistive technologies. - Why is testing across devices important?
Testing ensures consistent appearance and functionality on various devices and browsers.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
