CodeWithSaeqa

Category: Data Science

  • 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

  • Creating Responsive Pages with Bootstrap

    Creating Responsive Pages with Bootstrap

    Learn how Bootstrap helps you make mobile-friendly websites easily

    Bootstrap is a CSS framework that makes designing responsive and beautiful web pages easy. It provides ready-to-use classes for grids, buttons, forms, and more.

    <!DOCTYPE html>
<html>
<head>
    <title>CodeWithSaeqa</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h1>Hello, CodeWithSaeqa!</h1>
                <p>This is a responsive column using Bootstrap.</p>
            </div>
            <div class="col-md-6">
                <img src="https://via.placeholder.com/150" class="img-fluid" alt="Placeholder Image">
            </div>
        </div>
    </div>
</body>
</html>
  • Introduction to HTML – The Building Block of Web

    Introduction to HTML – The Building Block of Web

    Learn what HTML is, why it’s important, and create your first web page

    HTML (HyperText Markup Language) is the backbone of every website. It allows us to structure content on the web using elements and tags.

    Key concepts:

    • Tags: The building blocks, e.g.,
    <h1> <a> <p>
    • Attributes: Add extra information, e.g.,
    <a href="https://example.com">Link</a>
    • Elements: The combination of tags and content

    Example – Your first HTML page

    <!DOCTYPE html>
<html>
<head>
    <title>CodeWithSaeqa</title>
</head>
<body>
    <h1>Welcome to CodeWithSaeqa!</h1>
    <p>This is your first HTML page.</p>
</body>
</html>