Curriculum

HTML Basic

HTML Introduction

0/1

HTML Editors

0/1

HTML Basic

0/4

HTML Elements

0/4

HTML Attributes

0/1

HTML Headings

0/2

HTML Paragraphs

0/1

HTML Styles

0/2

HTML Formatting

0/1

HTML Quotation

0/3

HTML Comments

0/1

HTML Colors

0/11

HTML CSS

0/5

HTML Links

0/7

HTML Images

0/6

HTML Favicon

0/1

HTML Page Title

0/1

HTML Tables

0/11

HTML Lists

0/4

HTML Block and Inline

0/4

HTML Div

0/4

HTML classes

0/4

HTML id

0/4

HTML Iframes

0/1

HTML Java Script

0/1

HTML File Paths

0/1

HTML - The Head Element

0/4

HTML Layout

0/1

HTML Responsive

0/8

HTML Computer Code

0/1

HTML Semantic

0/7

HTML Style Guide

0/10

HTML Entities

0/4

HTML Symbols

0/1

HTML Emojis

0/4

HTML Charsets

0/1

HTML URL Encode

0/3

HTML vs. XHTML

0/1

HTML Forms

0/35

HTML Graphics

0/5

HTML Media

0/15

HTML APIs

0/9

Text lesson

Media Queries

Aside from resizing text and images, media queries are frequently employed in responsive web design.

Media queries enable the specification of distinct styles for various browser sizes.

For instance, adjust the browser window size to observe that the three div elements below will arrange horizontally on larger screens and stack vertically on smaller screens.

Example

.main {
float: left;
width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>