Learn HTML

"Are you looking to learn HTML from scratch? Look no further! Our HTML course is designed for both beginners and advanced learners who want to master the fundamental concepts of HTML. Our comprehensive course covers everything from the basic concepts of HTML, including tags, attributes, and elements, to the more advanced concepts such as multimedia, responsive design, and accessibility."

HTML Chapters Menu

HTML Responsive Design

HTML can be used to create responsive web pages that adjust their layout and content based on the size of the device's screen. This is achieved by using CSS media queries to apply different styles based on the device's screen size.

Here's an example of a simple responsive layout:


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .box {
            width: 45%;
            margin-bottom: 20px;
            background-color: #f2f2f2;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        @media screen and (max-width: 768px) {
            .box {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <h2>Box 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ipsum quis massa pharetra aliquam id id leo.</p>
        </div>
        <div class="box">
            <h2>Box 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ipsum quis massa pharetra aliquam id id leo.</p>
        </div>
        <div class="box">
            <h2>Box 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ipsum quis massa pharetra aliquam id id leo.</p>
        </div>
        <div class="box">
            <h2>Box 4</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ipsum quis massa pharetra aliquam id id leo.</p>
        </div>
    </div>
</body>
</html>


In this example, the meta tag with the viewport attribute is used to set the viewport width to the device's width and the initial scale to 1.0. This ensures that the page is rendered at the correct size on different devices.

The layout is created using a flex container with flex-wrap set to wrap and justify-content set to space-between. This creates a row of boxes with equal spacing between them.

Each box is a div element with a class of box. The width is set to 45% to ensure that two boxes can fit side-by-side on larger screens. The margin-bottom, padding, box-sizing, border, and border-radius properties are used to style the box.

Finally, a media query is used to change the width of the boxes to 100% when the screen width is 768px or less. This ensures that the boxes stack vertically on smaller screens, making the layout more readable and usable on mobile devices.