Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →
menu_book Course Curriculum (Intro to HTML & CSS) expand_more
HTML Basics
Document structure Head metadata Headings and paragraphs Links Images and alt text Lists Tables Forms and labels
Semantic HTML
header main footer nav landmark article and section figure and figcaption button versus link details and summary time element address element
CSS Basics
CSS selectors Class selectors Cascade and specificity Box model Margin and padding Typography Colors Borders
Layout & Responsive
display block and inline Flexbox basics Grid basics Positioning Media queries Responsive images CSS custom properties Focus styles
Intro to HTML & CSS / Layout & Responsive

Media queries

Learn Media queries in Intro to HTML & CSS with a focused explanation, a topic-specific example, and a mastery check.

12 min read • Intermediate
intro-html-css-029.html
html 
<style>.layout{display:grid;grid-template-columns:1fr}@media(min-width:700px){.layout{grid-template-columns:220px 1fr}}</style><div class="layout"><aside>Menu</aside><main>Content</main></div>
What to watch
Content source & attribution
Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Media queries Mastery Check →
← PREVIOUS
Positioning
NEXT →
Responsive images