Wednesday, 19 February 2025

Assignments Of Class 18: Responsive Design - Media Queries

 


Assignments Of Class 18: Responsive Design - Media Queries

Assignment 1: Basic Media Query for Mobile Devices

Objective:
Create a simple webpage that uses a media query to adjust the layout for mobile devices.

Instructions:

1.   Create an HTML page with a header and a paragraph.

2.   Use a media query to reduce the font size and change the layout for mobile screens (max-width 600px).

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Mobile Responsive</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <header>

        <h1>Responsive Design</h1>

    </header>

    <main>

        <p>This page adjusts based on the device screen size.</p>

    </main>

</body>

</html>

2.   CSS (style.css):

css

Copy code

body {

    font-family: Arial, sans-serif;

    padding: 20px;

}

 

header {

    background-color: #333;

    color: white;

    padding: 10px;

    text-align: center;

}

 

p {

    font-size: 18px;

}

 

/* Media Query for mobile devices */

@media (max-width: 600px) {

    p {

        font-size: 14px;

    }

 

    header {

        background-color: #555;

    }

}

Explanation:

  • On larger screens, the font size of the paragraph is 18px, and the header has a dark background.
  • For screens with a width of 600px or less, the font size reduces to 14px, and the header background changes to a lighter shade.

Assignment 2: Adjusting Layout for Tablets

Objective:
Create a webpage with a two-column layout that changes to a single column on tablet devices (between 601px and 1024px).

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tablet Layout</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <header>

        <h1>Responsive Design - Tablet Layout</h1>

    </header>

    <div class="content">

        <div class="column">

            <p>This is the left column.</p>

        </div>

        <div class="column">

            <p>This is the right column.</p>

        </div>

    </div>

</body>

</html>

2.   CSS (style.css):

css

Copy code

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 20px;

}

 

header {

    background-color: #333;

    color: white;

    padding: 10px;

    text-align: center;

}

 

.content {

    display: flex;

    justify-content: space-between;

}

 

.column {

    width: 45%;

    background-color: #f4f4f4;

    padding: 10px;

}

 

@media (max-width: 1024px) {

    .content {

        flex-direction: column;

    }

 

    .column {

        width: 100%;

        margin-bottom: 10px;

    }

}

Explanation:

  • On larger screens, the two columns are displayed side by side with 45% width.
  • On tablet devices (screen width between 601px and 1024px), the layout changes to a single column where each div takes up 100% width.

Assignment 3: Font Size Adjustment for Mobile

Objective:
Create a webpage where the font size changes based on the device size using media queries.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Font Size Adjustment</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <header>

        <h1>Responsive Font Size</h1>

    </header>

    <p>Resize the browser to see the font size adjust.</p>

</body>

</html>

2.   CSS (style.css):

css

Copy code

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 20px;

}

 

header {

    background-color: #333;

    color: white;

    padding: 10px;

    text-align: center;

}

 

p {

    font-size: 18px;

}

 

@media (max-width: 600px) {

    p {

        font-size: 14px;

    }

}

Explanation:

  • On larger screens, the paragraph text is 18px.
  • For mobile devices (width ≤ 600px), the font size reduces to 14px.

Assignment 4: Changing Background Color Based on Screen Size

Objective:
Change the background color of the webpage based on the device's screen size using media queries.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Background Color Change</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <header>

        <h1>Responsive Background</h1>

    </header>

    <p>The background color changes based on the screen width.</p>

</body>

</html>

2.   CSS (style.css):

css

Copy code

body {

    font-family: Arial, sans-serif;

    padding: 20px;

    background-color: lightblue;

}

 

header {

    background-color: #333;

    color: white;

    padding: 10px;

    text-align: center;

}

 

@media (max-width: 1024px) {

    body {

        background-color: lightgreen;

    }

}

 

@media (max-width: 600px) {

    body {

        background-color: lightcoral;

    }

}

Explanation:

  • The default background is light blue for larger screens.
  • For tablet devices (screen width ≤ 1024px), the background becomes light green.
  • For mobile devices (screen width ≤ 600px), the background turns light coral.

Assignment 5: Adjusting Navigation Layout for Mobile

Objective:
Create a responsive navigation bar that adjusts from a horizontal layout to a vertical layout on mobile screens.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Navigation</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <header>

        <nav>

            <a href="#">Home</a>

            <a href="#">About</a>

            <a href="#">Services</a>

            <a href="#">Contact</a>

        </nav>

    </header>

</body>

</html>

2.   CSS (style.css):

css

Copy code

body {

    font-family: Arial, sans-serif;

    margin: 0;

}

 

header {

    background-color: #333;

}

 

nav {

    display: flex;

    justify-content: space-around;

    padding: 10px;

}

 

nav a {

    color: white;

    text-decoration: none;

    padding: 10px;

}

 

/* Media Query for mobile devices */

@media (max-width: 600px) {

    nav {

        flex-direction: column;

        align-items: center;

    }

 

    nav a {

        padding: 15px;

    }

}

Explanation:

  • On larger screens, the navigation items are displayed in a row using flexbox.
  • On mobile devices (screen width ≤ 600px), the navigation changes to a vertical layout where each link is centered and stacked.

Assignment 6: Responsive Footer Layout

Objective:
Create a footer that adjusts its layout and text size based on screen size.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Footer</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <footer>

        <p>Footer Text - © 2024</p>

    </footer>

</body>

</html>

2.   CSS (style.css):

css

Copy code

footer {

    background-color: #333;

    color: white;

    text-align: center;

    padding: 10px;

}

 

footer p {

    font-size: 18px;

}

 

/* Media Query for mobile devices */

@media (max-width: 600px) {

    footer p {

        font-size: 14px;

    }

}

Explanation:

  • The footer text is 18px by default.
  • On mobile devices (screen width ≤ 600px), the text size reduces to 14px.

Assignment 7: Adjusting Image Size for Mobile

Objective:
Create a webpage with an image that resizes based on the device's screen width.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Image</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <img src="example.jpg" alt="Responsive Image" />

</body>

</html>

2.   CSS (style.css):

css

Copy code

img {

    width: 100%;

    height: auto;

}

 

@media (max-width: 600px) {

    img {

        width: 80%;

    }

}

Explanation:

  • The image takes up 100% of the screen width by default.
  • On mobile devices (screen width ≤ 600px), the image width reduces to 80%.

Assignment 8: Creating a Grid Layout for Responsive Design

Objective:
Create a responsive grid layout that adjusts the number of columns based on screen size.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Grid</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="grid-container">

        <div class="grid-item">Item 1</div>

        <div class="grid-item">Item 2</div>

        <div class="grid-item">Item 3</div>

        <div class="grid-item">Item 4</div>

    </div>

</body>

</html>

2.   CSS (style.css):

css

Copy code

.grid-container {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

}

 

.grid-item {

    background-color: lightblue;

    padding: 20px;

    text-align: center;

}

 

@media (max-width: 768px) {

    .grid-container {

        grid-template-columns: repeat(2, 1fr);

    }

}

 

@media (max-width: 600px) {

    .grid-container {

        grid-template-columns: 1fr;

    }

}

Explanation:

  • By default, the grid has 4 equal-width columns.
  • For tablets (screen width ≤ 768px), the grid adjusts to 2 columns.
  • For mobile devices (screen width ≤ 600px), the grid switches to 1 column.

Assignment 9: Adding a Sticky Header on Scroll

Objective:
Create a webpage with a sticky header that remains at the top of the page when scrolling.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sticky Header</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <header>

        <h1>Sticky Header</h1>

    </header>

    <main>

        <p>Scroll down to see the sticky header in action.</p>

        <!-- Add more content to scroll -->

    </main>

</body>

</html>

2.   CSS (style.css):

css

Copy code

header {

    background-color: #333;

    color: white;

    padding: 10px;

    text-align: center;

    position: sticky;

    top: 0;

    z-index: 10;

}

 

main {

    height: 2000px;

}

Explanation:

  • The position: sticky property makes the header stick to the top of the screen when scrolling.
  • The top: 0 ensures it sticks at the top.

Assignment 10: Hiding Elements on Mobile Devices

Objective:
Create a webpage where certain elements are hidden on mobile devices using media queries.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Hide Elements on Mobile</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="visible-element">

        <p>This element is visible on larger screens.</p>

    </div>

    <div class="hidden-element">

        <p>This element will be hidden on mobile screens.</p>

    </div>

</body>

</html>

2.   CSS (style.css):

css

Copy code

.hidden-element {

    display: block;

}

 

@media (max-width: 600px) {

    .hidden-element {

        display: none;

    }

}

Explanation:

  • The .hidden-element is visible by default.
  • For mobile devices (screen width ≤ 600px), the element is hidden using display: none;.



No comments:

Post a Comment

Search This Blog

Powered by Blogger.