CodeWithSaeqa

Category: CSS

  • Responsive Design – Make Your Website Look Good on All Devices

    Responsive Design – Make Your Website Look Good on All Devices

    Learn how to create websites that look great on mobile, tablet, and desktop using responsive design techniques.

    What is Responsive Design?

    Responsive Design means creating websites that automatically adjust to different screen sizes.

    Your website should look good on:

    • Mobile phones📱
    • Tablets 📲
    • Laptops 💻

    Why is Responsive Design Important?

    Today, most users visit websites using mobile devices.

    If your website is not responsive:

    • Text will be too small
    • Layout will break
    • Users will leave your site

    ✅ Responsive design improves user experience and makes your site look professional.

    Basic Example using CSS

    Here is a simple example using media queries

    /* Default style (desktop) */
body {
  background-color: white;
}

/* For screens smaller than 768px (tablet & mobile) */
@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

    When the screen size is small, the background color changes

    Responsive Layout Example

    <!DOCTYPE html>
<html>
<head>
  <title>Responsive Example</title>
  <style>
    .container {
      display: flex;
    }

    .box {
      width: 50%;
      padding: 20px;
      background-color: lightgray;
    }

    /* Make it responsive */
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }

      .box {
        width: 100%;
      }
    }
  </style>
</head>
<body>

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

</body>
</html>
    • On desktop: boxes are side by side
    • On mobile: boxes go one below another

    Using Bootstrap for Responsive Design

    Bootstrap makes responsive design much easier

    <div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>
    • On large screens: 2 columns
    • On small screens: stacked automatically

  • Styling Your Web Page with CSS

    Styling Your Web Page with CSS

    Learn how to make your web page look beautiful using CSS

    CSS (Cascading Style Sheets) is used to style HTML elements. With CSS, you can control colors, fonts, layouts, and more.

    <!DOCTYPE html>
<html>
<head>
    <title>CodeWithSaeqa</title>
    <style>
        body {
            background-color: #f0f8ff;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #ff6600;
        }
        p {
            color: #333333;
        }
    </style>
</head>
<body>
    <h1>Welcome to CodeWithSaeqa!</h1>
    <p>This page looks much better with CSS!</p>
</body>
</html>