[
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n// JavaScript needed to style parent based on child\ndocument.querySelectorAll('.form-group').forEach(group => {\n if (group.querySelector('.error')) {\n group.classList.add('has-error');\n }\n});\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using :has() selector**\n\n**Fix:**\n```html\n.form-group:has(.error) {\n border-color: red;\n}\n// :has() styles parent based on child state\n// No JavaScript needed\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_:has()_selector"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\nbody {\n background: #fff;\n color: #333;\n}\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using prefers-color-scheme**\n\n**Fix:**\n```html\n:root {\n --bg: #fff;\n --text: #333;\n}\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: #1a1a1a;\n --text: #e0e0e0;\n }\n}\nbody {\n background: var(--bg);\n color: var(--text);\n}\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_prefers-color-scheme"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<div class=\"wrapper\">\n <div class=\"header\">...</div>\n <div class=\"nav\">...</div>\n <div class=\"content\">...</div>\n <div class=\"sidebar\">...</div>\n <div class=\"footer\">...</div>\n</div>\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing landmarks**\n\n**Fix:**\n```html\n<div class=\"wrapper\">\n <header>...</header>\n <nav aria-label=\"Main\">...</nav>\n <main>...</main>\n <aside>...</aside>\n <footer>...</footer>\n</div>\n// Semantic landmarks improve screen reader navigation\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_landmarks"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n/* Third-party styles */\n.btn { padding: 8px; }\n/* Base styles */\n.btn { padding: 12px; }\n/* Component styles */\n.btn { padding: 16px; }\n// Specificity wars\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using CSS layers**\n\n**Fix:**\n```html\n@layer reset, base, components, utilities;\n\n@layer reset { /* ... */ }\n@layer base { .btn { padding: 12px; } }\n@layer components { .btn { padding: 16px; } }\n// @layer controls cascade order regardless of specificity\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_css_layers"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n[class*=\"btn\"] {\n padding: 8px 16px;\n}\n// Matches any element with \"btn\" in class\n```"
},
{
"role": "assistant",
"content": "**Issue: Attribute selector performance**\n\n**Fix:**\n```html\n.btn {\n padding: 8px 16px;\n}\n// Class selectors are faster than attribute selectors\n// Attribute selectors are for dynamic/generated classes\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"attribute_selector_performance"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.btn:hover {\n background: #0055aa;\n}\n// Manual darker shade\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using color-mix()**\n\n**Fix:**\n```html\n:root {\n --color-primary: #0066cc;\n}\n.btn:hover {\n background: color-mix(in srgb, var(--color-primary) 80%, black);\n}\n// color-mix: programmatic color manipulation\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_color-mix()"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<form>\n <input type=\"text\" placeholder=\"Name\">\n <input type=\"email\" placeholder=\"Email\">\n <button>Submit</button>\n</form>\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing form labels**\n\n**Fix:**\n```html\n<form>\n <label for=\"name\">Name</label>\n <input type=\"text\" id=\"name\" required>\n <label for=\"email\">Email</label>\n <input type=\"email\" id=\"email\" required>\n <button type=\"submit\">Submit</button>\n</form>\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_form_labels"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.btn {\n background: #0066cc;\n color: #fff;\n border-radius: 4px;\n}\n.btn--dark {\n background: #333;\n}\n// Duplicated values\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using CSS custom properties**\n\n**Fix:**\n```html\n:root {\n --color-primary: #0066cc;\n --color-text-light: #fff;\n --radius-sm: 4px;\n}\n.btn {\n background: var(--color-primary);\n color: var(--color-text-light);\n border-radius: var(--radius-sm);\n}\n.btn--dark {\n --color-primary: #333;\n}\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_css_custom_properties"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.modal .btn { color: white; }\n.modal .card .btn { color: blue; }\n// Global selectors can conflict\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using @scope**\n\n**Fix:**\n```html\n@scope (.modal) {\n .btn { color: white; }\n .card :where(.btn) { color: blue; }\n}\n// @scope limits CSS to a subtree\n// Prevents global selector conflicts\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_@scope"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.header { height: 60px; }\n.sidebar { float: left; width: 200px; }\n.main { margin: 0 200px; }\n.footer { clear: both; height: 40px; }\n```"
},
{
"role": "assistant",
"content": "**Issue: Holy grail layout with floats**\n\n**Fix:**\n```html\n.page {\n display: grid;\n grid-template-areas:\n \"header header\"\n \"sidebar main\"\n \"footer footer\";\n grid-template-columns: 200px 1fr;\n min-height: 100vh;\n}\n.header { grid-area: header; }\n.sidebar { grid-area: sidebar; }\n.main { grid-area: main; }\n.footer { grid-area: footer; }\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"holy_grail_layout_with_floats"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<nav>\n <a href=\"/1\">One</a>\n <a href=\"/2\">Two</a>\n <a href=\"/3\">Three</a>\n <!-- 50 more links -->\n</nav>\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing skip navigation link**\n\n**Fix:**\n```html\n<a href=\"#main\" class=\"skip-link\">Skip to main content</a>\n\n<style>\n.skip-link {\n position: absolute;\n left: -9999px;\n}\n.skip-link:focus {\n left: 0;\n}\n</style>\n// Skip link lets keyboard users bypass navigation\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_skip_navigation_link"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.modal {\n transform: translateY(-100%);\n transition: transform 0.3s;\n}\n// Repaints on every frame\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using will-change**\n\n**Fix:**\n```html\n.modal {\n transform: translateY(-100%);\n transition: transform 0.3s;\n will-change: transform;\n}\n// will-change promotes to compositor layer\n// Use sparingly - it consumes memory\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_will-change"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\nbody {\n font-size: 1rem;\n}\n// 1rem = browser default (usually 16px)\n// Different browsers = different sizes\n```"
},
{
"role": "assistant",
"content": "**Issue: Using rem without setting base**\n\n**Fix:**\n```html\nhtml {\n font-size: 100%; /* Respects user settings */\n}\nbody {\n font-size: 1rem;\n}\n// Or set explicitly: html { font-size: 16px; }\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_rem_without_setting_base"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.modal {\n position: fixed;\n top: 50%;\n left: 50%;\n margin-top: -150px;\n margin-left: -200px;\n}\n// Fragile - breaks if size changes\n```"
},
{
"role": "assistant",
"content": "**Issue: Centering with negative margins**\n\n**Fix:**\n```html\n.modal {\n position: fixed;\n inset: 0;\n display: grid;\n place-items: center;\n}\n// Grid centering: works regardless of size\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"centering_with_negative_margins"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<img src=\"photo-2000.jpg\" style=\"width: 100%\">\n// Loads 2MB image on mobile\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing responsive images**\n\n**Fix:**\n```html\n<picture>\n <source media=\"(max-width: 600px)\" srcset=\"photo-600.webp\">\n <source media=\"(max-width: 1200px)\" srcset=\"photo-1200.webp\">\n <img src=\"photo-2000.webp\" alt=\"Description\" loading=\"lazy\">\n</picture>\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_responsive_images"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n@keyframes slide {\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n}\n.element {\n animation: slide 0.5s ease;\n}\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using prefers-reduced-motion**\n\n**Fix:**\n```html\n@keyframes slide {\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n}\n.element {\n animation: slide 0.5s ease;\n}\n@media (prefers-reduced-motion: reduce) {\n .element {\n animation: none;\n }\n}\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_prefers-reduced-motion"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\ndiv.container > ul.list > li.item > a.link {\n color: blue;\n}\n// Specificity: 0,4,0 - hard to override\n```"
},
{
"role": "assistant",
"content": "**Issue: Overly specific selectors**\n\n**Fix:**\n```html\n.link {\n color: blue;\n}\n// Use single-class selectors (0,1,0)\n// Keep specificity low and predictable\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"overly_specific_selectors"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\nh1 {\n /* Multi-line heading wraps awkwardly */\n}\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using text-wrap: balance**\n\n**Fix:**\n```html\nh1 {\n text-wrap: balance;\n}\n// Balances line lengths in multi-line text\n// Also: text-wrap: pretty for paragraphs\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_text-wrap:_balance"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.sidebar .content .card .title {\n color: red;\n}\n// Only works in this specific DOM structure\n```"
},
{
"role": "assistant",
"content": "**Issue: Global state dependency in CSS**\n\n**Fix:**\n```html\n.title--highlighted {\n color: red;\n}\n// Component should be self-contained\n// Not dependent on parent structure\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"global_state_dependency_in_css"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<!DOCTYPE html>\n<html>\n<head><title>Page</title></head>\n<body>...</body>\n</html>\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing lang attribute**\n\n**Fix:**\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head><title>Page</title></head>\n<body>...</body>\n</html>\n// lang attribute is required for accessibility and SEO\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_lang_attribute"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<head>\n <link rel=\"stylesheet\" href=\"styles.css\">\n</head>\n```"
},
{
"role": "assistant",
"content": "**Issue: Not preloading critical resources**\n\n**Fix:**\n```html\n<head>\n <link rel=\"preload\" href=\"font.woff2\" as=\"font\" crossorigin>\n <link rel=\"preload\" href=\"hero.webp\" as=\"image\">\n <link rel=\"stylesheet\" href=\"styles.css\">\n</head>\n// Preload critical resources the browser might not discover\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_preloading_critical_resources"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\nh1 { font-size: 2rem; }\n@media (min-width: 768px) { h1 { font-size: 3rem; } }\n@media (min-width: 1200px) { h1 { font-size: 4rem; } }\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using clamp() for responsive typography**\n\n**Fix:**\n```html\nh1 {\n font-size: clamp(2rem, 5vw + 1rem, 4rem);\n}\n// clamp(min, preferred, max)\n// Fluid typography without media queries\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_clamp()_for_responsive_typography"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<div class=\"dropdown\">\n <div class=\"dropdown-toggle\" tabindex=\"0\">Menu</div>\n <div class=\"dropdown-menu\">\n <a href=\"/1\">One</a>\n </div>\n</div>\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing role on custom component**\n\n**Fix:**\n```html\n<div class=\"dropdown\" role=\"combobox\" aria-expanded=\"false\">\n <div class=\"dropdown-toggle\" tabindex=\"0\" role=\"button\">Menu</div>\n <div class=\"dropdown-menu\" role=\"listbox\">\n <a href=\"/1\" role=\"option\">One</a>\n </div>\n</div>\n// Use ARIA roles to convey semantics to screen readers\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_role_on_custom_component"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n@font-face {\n font-family: 'Custom';\n src: url('font.woff2') format('woff2');\n}\n// Invisible text while font loads\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using font-display swap**\n\n**Fix:**\n```html\n@font-face {\n font-family: 'Custom';\n src: url('font.woff2') format('woff2');\n font-display: swap;\n}\n// swap: show fallback immediately, swap when loaded\n// Also consider: optional, fallback\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_font-display_swap"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<a href=\"/details\">Click here</a>\n<a href=\"/docs\">Read more</a>\n// Link text doesn't describe destination\n```"
},
{
"role": "assistant",
"content": "**Issue: Link text not descriptive**\n\n**Fix:**\n```html\n<a href=\"/details\">View order details</a>\n<a href=\"/docs\">Read API documentation</a>\n// Link text should be meaningful on its own\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"link_text_not_descriptive"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<div id=\"results\"></div>\n// Content updated dynamically, screen readers won't know\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing live region for dynamic content**\n\n**Fix:**\n```html\n<div id=\"results\" aria-live=\"polite\" aria-atomic=\"true\"></div>\n// aria-live announces changes to screen readers\n// polite = wait for pause, assertive = interrupt\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_live_region_for_dynamic_content"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.content {\n padding: 0 16px;\n}\n// Content stretches to full viewport on wide screens\n```"
},
{
"role": "assistant",
"content": "**Issue: Container not constraining max width**\n\n**Fix:**\n```html\n.content {\n max-width: 72rem;\n margin: 0 auto;\n padding: 0 16px;\n}\n// max-width + margin: auto centers and constrains\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"container_not_constraining_max_width"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.container {\n width: 960px;\n}\n@media (max-width: 768px) {\n .container {\n width: 100%;\n }\n}\n// Desktop-first - adds complexity\n```"
},
{
"role": "assistant",
"content": "**Issue: Media query for mobile first**\n\n**Fix:**\n```html\n.container {\n width: 100%;\n max-width: 960px;\n margin: 0 auto;\n}\n@media (min-width: 768px) {\n .container {\n /* Add desktop enhancements */\n }\n}\n// Mobile-first: base styles = mobile, min-width = larger screens\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"media_query_for_mobile_first"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\ndiv.card {\n padding: 16px;\n}\n// Tied to element type\n```"
},
{
"role": "assistant",
"content": "**Issue: Type selector in component CSS**\n\n**Fix:**\n```html\n.card {\n padding: 16px;\n}\n// Don't tie styles to element types\n// Components should work on any element\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"type_selector_in_component_css"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.container {\n width: 960px;\n margin: 0 auto;\n}\n// Horizontally scrollable on mobile\n```"
},
{
"role": "assistant",
"content": "**Issue: Fixed width container on mobile**\n\n**Fix:**\n```html\n.container {\n width: min(960px, 100% - 32px);\n margin: 0 auto;\n}\n// min() constrains to viewport\n// 32px = 16px padding on each side\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"fixed_width_container_on_mobile"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.container .main .content .card .btn {\n background: red;\n}\n// Fighting another rule with more nesting\n```"
},
{
"role": "assistant",
"content": "**Issue: Chained class specificity war**\n\n**Fix:**\n```html\n.btn--danger {\n background: red;\n}\n// Resolve specificity conflicts with clearer naming\n// Not by adding more selectors\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"chained_class_specificity_war"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<a href=\"#\" onclick=\"openModal()\">Open Modal</a>\n// Not a navigation link\n```"
},
{
"role": "assistant",
"content": "**Issue: Using <a> for non-navigation**\n\n**Fix:**\n```html\n<button type=\"button\" onclick=\"openModal()\">Open Modal</button>\n// Buttons for actions, links for navigation\n// <a> should have a real href for accessibility\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_<a>_for_non-navigation"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<img src=\"photo.jpg\" style=\"width: 800px\">\n// Overflows viewport on mobile\n```"
},
{
"role": "assistant",
"content": "**Issue: Image overflow on small screens**\n\n**Fix:**\n```html\n<img src=\"photo.jpg\" style=\"max-width: 100%; height: auto;\">\n// max-width: 100% prevents overflow\n// height: auto maintains aspect ratio\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"image_overflow_on_small_screens"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<b>Important warning</b>\n<i>Emphasized text</i>\n```"
},
{
"role": "assistant",
"content": "**Issue: Using <b>/<i> instead of <strong>/<em>**\n\n**Fix:**\n```html\n<strong>Important warning</strong>\n<em>Emphasized text</em>\n// strong/em convey meaning, not just style\n// b/i are for visual styling without semantic emphasis\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_<b>/<i>_instead_of_<strong>/<em>"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<button class=\"icon-btn\">\n <svg>...</svg>\n</button>\n// Icon button with no text\n```"
},
{
"role": "assistant",
"content": "**Issue: aria-label missing on icon button**\n\n**Fix:**\n```html\n<button class=\"icon-btn\" aria-label=\"Close dialog\">\n <svg aria-hidden=\"true\"><use href=\"#close-icon\"/></svg>\n</button>\n// aria-label describes the action\n// Decorative SVGs use aria-hidden\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"aria-label_missing_on_icon_button"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.parent {\n border: 1px solid #ccc;\n}\n.child {\n margin-top: 20px;\n}\n// Child margin collapses with parent\n```"
},
{
"role": "assistant",
"content": "**Issue: Margin collapse not handled**\n\n**Fix:**\n```html\n.parent {\n border: 1px solid #ccc;\n overflow: hidden;\n /* Or: display: flow-root */\n}\n// Creates new block formatting context\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"margin_collapse_not_handled"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<video src=\"demo.mp4\" controls></video>\n```"
},
{
"role": "assistant",
"content": "**Issue: Video without captions**\n\n**Fix:**\n```html\n<video src=\"demo.mp4\" controls>\n <track src=\"captions.vtt\" kind=\"subtitles\" srclang=\"en\" label=\"English\">\n</video>\n// Captions are required for accessibility\n// <track> element provides subtitle/caption support\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"video_without_captions"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.nav {\n display: flex;\n}\n.nav-item {\n width: 100px;\n}\n// Doesn't adapt to content\n```"
},
{
"role": "assistant",
"content": "**Issue: Flexbox with fixed widths**\n\n**Fix:**\n```html\n.nav {\n display: flex;\n gap: 8px;\n}\n.nav-item {\n flex: 1 1 auto;\n min-width: 80px;\n}\n// flex: grow shrink basis\n// gap replaces margin for spacing\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"flexbox_with_fixed_widths"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.btn {\n color: white;\n background: blue;\n}\n.btn.primary {\n background: red !important;\n}\n```"
},
{
"role": "assistant",
"content": "**Issue: Using !important**\n\n**Fix:**\n```html\n.btn {\n color: white;\n background: blue;\n}\n.btn--primary {\n background: red;\n}\n// Fix specificity with better selectors, not !important\n// !important makes CSS unmaintainable\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_!important"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<p>Line 1</p>\n<br><br>\n<p>Line 2</p>\n```"
},
{
"role": "assistant",
"content": "**Issue: Using <br> for spacing**\n\n**Fix:**\n```html\n<p>Line 1</p>\n<p>Line 2</p>\n// Use CSS margin for spacing, not <br> tags\n// <br> is for line breaks within text (addresses, poetry)\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_<br>_for_spacing"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<img src=\"hero.jpg\">\n<img src=\"icon.png\">\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing alt text on images**\n\n**Fix:**\n```html\n<img src=\"hero.jpg\" alt=\"Person planting seeds in garden\">\n<img src=\"icon.png\" alt=\"\"> // Decorative image - empty alt\n// All images need alt. Decorative images use alt=\"\"\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_alt_text_on_images"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n@media (min-width: 768px) { /* tablet */ }\n@media (min-width: 1024px) { /* desktop */ }\n@media (min-width: 1440px) { /* large desktop */ }\n// Device-based breakpoints\n```"
},
{
"role": "assistant",
"content": "**Issue: Breakpoint-based instead of content-based**\n\n**Fix:**\n```html\n// Break when the design breaks:\n@container (min-width: 300px) {\n .card { display: flex; }\n}\n// Or viewport-based but content-driven:\n@media (min-width: 48em) {\n .layout { display: grid; grid-template-columns: 1fr 1fr; }\n}\n// Use em for viewport breakpoints (scales with font-size)\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"breakpoint-based_instead_of_content-based"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\nwidth: expression(document.body.clientWidth > 800 ? '800px' : 'auto');\n// JavaScript in CSS - terrible performance\n```"
},
{
"role": "assistant",
"content": "**Issue: Using CSS expressions (legacy)**\n\n**Fix:**\n```html\nwidth: min(800px, 100%);\n// Modern CSS function replaces expression()\n// expression() is removed from all modern browsers\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_css_expressions_(legacy)"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<div class=\"paragraph\">This is a paragraph of text.</div>\n<div class=\"paragraph\">Another paragraph.</div>\n```"
},
{
"role": "assistant",
"content": "**Issue: Using <div> for text content**\n\n**Fix:**\n```html\n<p>This is a paragraph of text.</p>\n<p>Another paragraph.</p>\n// <p> is for paragraphs, <div> is for grouping\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_<div>_for_text_content"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.image-container {\n position: relative;\n padding-top: 56.25%; /* 16:9 */\n}\n.image-container img {\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n// Padding hack for aspect ratio\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using aspect-ratio**\n\n**Fix:**\n```html\n.image-container {\n aspect-ratio: 16 / 9;\n}\n.image-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n// aspect-ratio: native, clean\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_aspect-ratio"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<form>\n <input type=\"email\" id=\"email\">\n <span class=\"error\">Invalid email</span>\n</form>\n// Error not associated with input\n```"
},
{
"role": "assistant",
"content": "**Issue: Form without error association**\n\n**Fix:**\n```html\n<form>\n <label for=\"email\">Email</label>\n <input type=\"email\" id=\"email\" aria-describedby=\"email-error\" aria-invalid=\"true\">\n <span id=\"email-error\" class=\"error\">Invalid email</span>\n</form>\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"form_without_error_association"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<body>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <div>Content</div>\n</body>\n```"
},
{
"role": "assistant",
"content": "**Issue: Loading CSS in body**\n\n**Fix:**\n```html\n<head>\n <link rel=\"stylesheet\" href=\"styles.css\">\n</head>\n<body>\n <div>Content</div>\n</body>\n// CSS in <head> prevents FOUC\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"loading_css_in_body"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n <title>Page</title>\n</head>\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing viewport meta tag**\n\n**Fix:**\n```html\n<!DOCTYPE html>\n<html>\n<head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>Page</title>\n</head>\n// Required for mobile rendering\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_viewport_meta_tag"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<div id=\"content\">\n <h1>Title</h1>\n <p>Content...</p>\n</div>\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing main landmark**\n\n**Fix:**\n```html\n<main id=\"content\">\n <h1>Title</h1>\n <p>Content...</p>\n</main>\n// <main> marks the primary content\n// Only one <main> per page\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_main_landmark"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.card {\n display: block;\n}\n@media (min-width: 768px) {\n .card {\n display: flex;\n }\n}\n// Component layout tied to viewport\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using container queries**\n\n**Fix:**\n```html\n.card-container {\n container-type: inline-size;\n}\n.card {\n display: block;\n}\n@container (min-width: 400px) {\n .card {\n display: flex;\n }\n}\n// Container queries: component responds to its container, not viewport\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_container_queries"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<div class=\"header\">\n <div class=\"logo\">...</div>\n <div class=\"nav\">\n <div class=\"nav-item\">Home</div>\n </div>\n</div>\n<div class=\"main\">\n <div class=\"article\">\n <div class=\"title\">...</div>\n <div class=\"content\">...</div>\n </div>\n</div>\n<div class=\"footer\">...</div>\n```"
},
{
"role": "assistant",
"content": "**Issue: Div-based layout (div soup)**\n\n**Fix:**\n```html\n<header>\n <a href=\"/\" aria-label=\"Home\"><img src=\"logo.svg\" alt=\"Site logo\"></a>\n <nav aria-label=\"Main\">\n <a href=\"/\">Home</a>\n </nav>\n</header>\n<main>\n <article>\n <h1>Title</h1>\n <p>Content...</p>\n </article>\n</main>\n<footer>...</footer>\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"div-based_layout_(div_soup)"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n}\n.card {\n display: grid;\n grid-template-columns: 1fr 2fr;\n /* Doesn't align with parent grid */\n}\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using subgrid**\n\n**Fix:**\n```html\n.grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n}\n.card {\n display: grid;\n grid-template-columns: subgrid;\n /* Inherits parent grid track sizes */\n}\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_subgrid"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.header {\n}\n.header-title {\n}\n.header-title-small {\n}\n.header-nav {\n}\n// Unclear relationships\n```"
},
{
"role": "assistant",
"content": "**Issue: No naming convention**\n\n**Fix:**\n```html\n/* BEM: Block __ Element -- Modifier */\n.header {\n}\n.header__title {\n}\n.header__title--small {\n}\n.header__nav {\n}\n// Clear component hierarchy from names\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"no_naming_convention"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n@media (max-width: 768px) {\n .sidebar {\n display: none;\n }\n}\n// Removes from accessibility tree entirely\n```"
},
{
"role": "assistant",
"content": "**Issue: Using display: none for responsive hiding**\n\n**Fix:**\n```html\n@media (max-width: 768px) {\n .sidebar {\n display: none;\n }\n}\n// OK for responsive, but consider:\n// .sidebar[aria-hidden=\"true\"] for programmatic hiding\n// Or reorder with CSS instead of hiding\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_display:_none_for_responsive_hiding"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<div class=\"d-flex align-center justify-between p-4 m-2 bg-white rounded shadow\">\n Content\n</div>\n// CSS-in-HTML, hard to maintain\n```"
},
{
"role": "assistant",
"content": "**Issue: Utility class abuse**\n\n**Fix:**\n```html\n<div class=\"card\">\n Content\n</div>\n\n.card {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem;\n margin: 0.5rem;\n background: white;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n// Semantic class names, not utility soup\n// Utility-first (Tailwind) is fine as a system choice\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"utility_class_abuse"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n// No CSS linting configured\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing CSS linting**\n\n**Fix:**\n```html\n// .stylelintrc.json\n{\n \"extends\": \"stylelint-config-recommended\",\n \"rules\": {\n \"no-descending-specificity\": true,\n \"selector-class-pattern\": \"^[a-z][a-zA-Z0-9_-]*$\",\n \"color-named\": \"never\",\n \"no-invalid-position-at-import-rule\": true\n }\n}\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_css_linting"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n#header {\n background: #333;\n}\n#sidebar {\n width: 300px;\n}\n// IDs have high specificity and can't be reused\n```"
},
{
"role": "assistant",
"content": "**Issue: ID selectors for styling**\n\n**Fix:**\n```html\n.header {\n background: #333;\n}\n.sidebar {\n width: 300px;\n}\n// Use classes for styling, IDs for JavaScript hooks\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"id_selectors_for_styling"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.sidebar {\n float: left;\n width: 250px;\n}\n.content {\n margin-left: 270px;\n}\n// Float layout requires clearfix hacks\n```"
},
{
"role": "assistant",
"content": "**Issue: Float-based layout**\n\n**Fix:**\n```html\n.layout {\n display: grid;\n grid-template-columns: 250px 1fr;\n}\n// CSS Grid: clean, no clearfix needed\n// Or Flexbox for simpler layouts\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"float-based_layout"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\nbody {\n font-size: 16px;\n line-height: 24px;\n}\nh1 {\n font-size: 32px;\n}\n// Doesn't respect user browser settings\n```"
},
{
"role": "assistant",
"content": "**Issue: Using px for typography**\n\n**Fix:**\n```html\nbody {\n font-size: 1rem;\n line-height: 1.5;\n}\nh1 {\n font-size: 2rem;\n}\n// rem respects user font-size settings\n// unitless line-height inherits properly\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_px_for_typography"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<table style=\"width:100%\">\n <tr><td width=\"200\">Sidebar</td><td>Content</td></tr>\n</table>\n```"
},
{
"role": "assistant",
"content": "**Issue: Using tables for layout**\n\n**Fix:**\n```html\n<div style=\"display: grid; grid-template-columns: 200px 1fr; gap: 16px;\">\n <aside>Sidebar</aside>\n <main>Content</main>\n</div>\n// Tables are for tabular data only\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_tables_for_layout"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.sidebar {\n position: sticky;\n top: 0;\n}\n// Not working - parent has overflow\n```"
},
{
"role": "assistant",
"content": "**Issue: Position sticky not working**\n\n**Fix:**\n```html\n.parent {\n overflow: visible; /* not hidden/auto/scroll */\n}\n.sidebar {\n position: sticky;\n top: 0;\n}\n// sticky is constrained by parent overflow\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"position_sticky_not_working"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\na:focus {\n outline: none;\n}\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing focus styles**\n\n**Fix:**\n```html\na:focus {\n outline: 2px solid #0066cc;\n outline-offset: 2px;\n}\n// Never remove outline without replacement\n// Focus indicators are essential for keyboard navigation\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_focus_styles"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.button {\n background: blue;\n}\n// Global class - name collision risk\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using CSS modules or scoped CSS**\n\n**Fix:**\n```html\n// CSS Modules (button.module.css)\n.button {\n background: blue;\n}\n// Compiled to: .button___abc123\n// Scope isolation without global namespace\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_css_modules_or_scoped_css"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<link rel=\"stylesheet\" href=\"all.css\">\n// 200KB single file with above/below fold styles\n```"
},
{
"role": "assistant",
"content": "**Issue: Large CSS file not split**\n\n**Fix:**\n```html\n<link rel=\"stylesheet\" href=\"critical.css\">\n<link rel=\"stylesheet\" href=\"components.css\" media=\"print\" onload=\"this.media='all'\">\n// Critical CSS inlined or loaded first\n// Non-critical deferred\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"large_css_file_not_split"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\nh1 {\n font-size: 8vw;\n}\n// Too large on desktop, too small on mobile\n```"
},
{
"role": "assistant",
"content": "**Issue: Text sized with viewport units only**\n\n**Fix:**\n```html\nh1 {\n font-size: clamp(1.5rem, 8vw, 4rem);\n}\n// Clamp provides min and max bounds\n// 8vw is the ideal fluid size\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"text_sized_with_viewport_units_only"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\nh1 + p {\n font-size: 1.2rem;\n}\n// Breaks if any element is inserted between h1 and p\n```"
},
{
"role": "assistant",
"content": "**Issue: Adjacent sibling selector fragility**\n\n**Fix:**\n```html\n.lead {\n font-size: 1.2rem;\n}\n// Use a class instead of structural selectors\n// Structural selectors break with DOM changes\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"adjacent_sibling_selector_fragility"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.nav .menu .item .link .icon {\n color: red;\n}\n// Deep nesting - fragile and high specificity\n```"
},
{
"role": "assistant",
"content": "**Issue: Descendant selector abuse**\n\n**Fix:**\n```html\n.icon--nav {\n color: red;\n}\n// BEM-style: block__element--modifier\n// Or flat selectors with descriptive names\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"descendant_selector_abuse"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.page {\n box-shadow: 0 0 100px rgba(0,0,0,0.3);\n}\n// Large blur on full page is expensive\n```"
},
{
"role": "assistant",
"content": "**Issue: Using box-shadow on large area**\n\n**Fix:**\n```html\n.page {\n background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.3) 100%);\n}\n// Gradient can be cheaper than large blur shadows\n// Or reduce blur radius: box-shadow: 0 4px 8px\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_box-shadow_on_large_area"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n/* Theme overrides scattered everywhere */\n.theme-dark .btn { background: #333; }\n.theme-dark .card { background: #222; }\n.theme-dark .header { background: #111; }\n// Hard to maintain\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using CSS cascade layers for theming**\n\n**Fix:**\n```html\n:root {\n --theme-bg: #fff;\n --theme-text: #333;\n --theme-accent: #0066cc;\n}\n[data-theme=\"dark\"] {\n --theme-bg: #1a1a1a;\n --theme-text: #e0e0e0;\n --theme-accent: #6699ff;\n}\n.btn {\n background: var(--theme-accent);\n}\n// Theme via CSS custom properties - single source\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_css_cascade_layers_for_theming"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<table>\n <tr><td>Name</td><td>Age</td></tr>\n <tr><td>Alice</td><td>30</td></tr>\n</table>\n```"
},
{
"role": "assistant",
"content": "**Issue: Table without semantic elements**\n\n**Fix:**\n```html\n<table>\n <thead>\n <tr><th>Name</th><th>Age</th></tr>\n </thead>\n <tbody>\n <tr><td>Alice</td><td>30</td></tr>\n </tbody>\n</table>\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"table_without_semantic_elements"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.card {\n margin-left: 16px;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n// Breaks in RTL languages\n```"
},
{
"role": "assistant",
"content": "**Issue: Not using logical properties**\n\n**Fix:**\n```html\n.card {\n margin-inline-start: 16px;\n padding-block: 8px;\n}\n// Logical properties adapt to writing direction\n// inline = horizontal, block = vertical\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"not_using_logical_properties"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<p>Use the API for integration.</p>\n// API is abbreviated, undefined\n```"
},
{
"role": "assistant",
"content": "**Issue: Using abbreviations without definition**\n\n**Fix:**\n```html\n<p>Use the <abbr title=\"Application Programming Interface\">API</abbr> for integration.</p>\n// <abbr> provides expanded text for accessibility\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_abbreviations_without_definition"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n@import 'reset.css';\n@import 'base.css';\n@import 'components.css';\n// Each @import is a blocking request\n```"
},
{
"role": "assistant",
"content": "**Issue: Using @import in CSS**\n\n**Fix:**\n```html\n<link rel=\"stylesheet\" href=\"reset.css\">\n<link rel=\"stylesheet\" href=\"base.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n// <link> tags are parallel-loaded\n// @import in CSS is sequential\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"using_@import_in_css"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<button onclick=\"doSomething()\">Click</button>\n```"
},
{
"role": "assistant",
"content": "**Issue: Inline event handlers**\n\n**Fix:**\n```html\n<button type=\"button\" id=\"action-btn\">Click</button>\n\n<script>\ndocument.getElementById('action-btn').addEventListener('click', doSomething);\n</script>\n// Separate structure from behavior\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"inline_event_handlers"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<table>\n <tr><td>Q1</td><td>$100</td></tr>\n <tr><td>Q2</td><td>$150</td></tr>\n</table>\n```"
},
{
"role": "assistant",
"content": "**Issue: Table without caption or scope**\n\n**Fix:**\n```html\n<table>\n <caption>Quarterly Revenue</caption>\n <thead>\n <tr><th scope=\"col\">Quarter</th><th scope=\"col\">Revenue</th></tr>\n </thead>\n <tbody>\n <tr><td>Q1</td><td>$100</td></tr>\n <tr><td>Q2</td><td>$150</td></tr>\n </tbody>\n</table>\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"table_without_caption_or_scope"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.card * {\n box-sizing: border-box;\n}\n// Matches every element inside .card\n```"
},
{
"role": "assistant",
"content": "**Issue: Universal selector in performance-critical path**\n\n**Fix:**\n```html\n* {\n box-sizing: border-box;\n}\n// Apply universal reset once at the top level\n// Avoid * in component selectors for performance\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"universal_selector_in_performance-critical_path"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\nbody {\n font-family: sans-serif;\n}\n// Browser default styles vary\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing CSS reset/normalize**\n\n**Fix:**\n```html\n/* Normalize.css or custom reset */\n*, *::before, *::after {\n box-sizing: border-box;\n}\nhtml {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n}body {\n margin: 0;\n font-family: system-ui, sans-serif;\n}\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_css_reset/normalize"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n.hero {\n height: 500px;\n}\n// Breaks on small screens and with dynamic content\n```"
},
{
"role": "assistant",
"content": "**Issue: Fixed height containers**\n\n**Fix:**\n```html\n.hero {\n min-height: 500px;\n}\n// min-height allows content to expand\n// Fixed height causes overflow issues\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"fixed_height_containers"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<h1>Page Title</h1>\n<h3>Section</h3>\n<h2>Subsection</h2>\n// Skips h2, goes h1 -> h3\n```"
},
{
"role": "assistant",
"content": "**Issue: Missing heading hierarchy**\n\n**Fix:**\n```html\n<h1>Page Title</h1>\n<h2>Section</h2>\n<h3>Subsection</h3>\n// Headings must follow sequential order\n// Screen readers use heading structure to navigate\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"missing_heading_hierarchy"
]
},
{
"messages": [
{
"role": "user",
"content": "Review this HTML/CSS code:\n\n```html\n<p><span style=\"color: red;\">Error:</span> Invalid input</p>\n// Red color indicates error, no other indicator\n```"
},
{
"role": "assistant",
"content": "**Issue: Color-only information**\n\n**Fix:**\n```html\n<p role=\"alert\">\n <span aria-hidden=\"true\">\u26a0\ufe0f</span>\n <strong>Error:</strong> Invalid input\n</p>\n// Don't rely on color alone\n// Add text, icons, or ARIA roles\n```"
}
],
"source": "html_css_training",
"tags": [
"html_css",
"color-only_information"
]
}
]