Download 100 LDC MCQs Test -2 – FPSC, PPSC, NTS Test Preparation

Important LDC MCQs Practice Test 2 – 100 Questions

Quiz Results

Your score: 0/100

Percentage: 0%

🧱 Day 11: CSS Flexbox

Welcome to Day 11! Today we’ll explore Flexbox, a modern layout technique in CSS that allows you to design complex layouts with ease, including vertical and horizontal alignment, centering, and spacing between items.

---

📌 What is Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It's designed to distribute space dynamically and align items easily, even when their size is unknown or dynamic.

🔧 Key Flexbox Properties

• display: flex — Turns the container into a flex container
• justify-content — Align items horizontally (start, center, space-between, etc.)
• align-items — Align items vertically (start, center, stretch, etc.)
• flex-direction — Row (default) or column
• flex-wrap — Allow items to wrap to the next line

🧪 Example Layout

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-item {
  background-color: #bfdbfe;
  padding: 1rem;
  margin: 0.5rem;
}

Item 1

Item 2

Item 3

🎯 Practice Task

• Create a flex container with 3 items spaced evenly
• Change direction from row to column
• Center items both vertically and horizontally

🚀 What’s Next?

In Day 12, we’ll explore CSS Grid, another powerful layout system for two-dimensional designs.

Day 12 - CSS Grid Layout

Day 10: Master the CSS Box Model – Margin, Padding, Border Explained

📦 Day 10: CSS Box Model

Welcome to Day 10 of the 60-Day Web Development Series. Today, we’ll explore the CSS Box Model – the foundational concept behind layout, spacing, and positioning in CSS. Every element is a box, and understanding this box is key to designing clean and effective web interfaces.

---

🔍 What is the CSS Box Model?

The CSS Box Model describes how the size of every HTML element is determined and how it interacts with other elements. The model consists of:

• Content: The text or image inside the box
• Padding: Space between the content and the border
• Border: The line surrounding the padding
• Margin: The space outside the border, separating the element from others

🧱 CSS Example

.box {
  margin: 20px;
  padding: 15px;
  border: 2px solid #4b5563;
  background-color: #e0f2fe;
}

This is a styled box using margin, padding, and border.

🎯 Visual Breakdown

Here’s a mental model of the box structure (from outside in):

• Margin (outermost)
• Border
• Padding
• Content (innermost)

🧪 Practice Task

• Create a box using <div> and apply margin, border, and padding
• Use different units like px, rem, and %
• Inspect the layout using browser developer tools

🚀 What’s Next?

In Day 11, we dive into Flexbox – a modern and powerful layout system that simplifies complex alignments and distributions.

Day 11 - CSS Flexbox Layout

Day 9: Colors, Fonts, and Typography | Web Development Series

🌈 Day 9: Colors, Fonts, and Typography

Today, you'll learn how to use CSS to control text color, background color, font size, font family, and other typography features to make your content visually appealing.

---

🎨 Colors

You can change text or background colors using the color and background-color properties.

h1 {
  color: darkblue;
}

p {
  background-color: #fef08a;
  color: #333;
}

🔤 Fonts

Use font-family to change the typeface of your text.

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-family: 'Georgia', serif;
}

📝 Typography

• font-size: Set size of the text
• font-weight: Make text bold or light
• line-height: Spacing between lines
• text-align: Align text (left, center, right)
• text-transform: Make text uppercase, lowercase, etc.

h2 {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

🧪 Practice Task

• Create an HTML page and style text with 3 different font families
• Use 3 different text and background color combinations
• Try text-align, font-size, and text-transform in headings

🚀 What’s Next?

In Day 10, we’ll explore the CSS Box Model: margin, padding, borders, and how they affect layout.

Coming Soon: Day 10 - CSS Box Model

Day 8: Introduction to CSS – Style Your Web Pages Like a Pro

🎨 Day 8: Inline vs Internal vs External CSS

CSS (Cascading Style Sheets) allows you to add style to your HTML documents. In this lesson, you'll learn the three main ways to apply CSS: inline, internal, and external.

---

📌 1. Inline CSS

Used directly within an HTML tag using the style attribute.

<h1 style="color: red; font-size: 24px;">This is Inline CSS</h1>

📌 2. Internal CSS

Defined within a <style> tag in the <head> of the HTML document.

<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is Internal CSS</p>
</body>

📌 3. External CSS

CSS is written in a separate .css file and linked to your HTML file.

/* style.css */
h1 {
  color: blue;
  text-align: center;
}

/* HTML file */
<head>
  <link rel="stylesheet" href="style.css" />
</head>

💡 Which One to Use?

• Inline: For quick testing or one-off styles (not recommended for production)
• Internal: Good for small projects or when testing styles directly
• External: Best practice for scalability and reusability

🧪 Practice Task

• Try styling a heading with inline CSS
• Use internal CSS to style a paragraph and a button
• Link an external CSS file and style multiple elements

🚀 What’s Next?

In Day 9, we’ll explore CSS colors, fonts, and typography to make your designs stand out.

Day 9 - Colors, Fonts, Typography

Day 6: HTML5 Features – Learn Modern HTML Elements

⚙️ Day 6: HTML5 Features

HTML5 brought powerful new features that made web development cleaner, more semantic, and more multimedia-friendly. Today we explore what HTML5 introduced and how it helps modern web development.

---

📦 Key Features Introduced in HTML5

• Semantic Elements: <header>, <nav>, <main>, <article>, <footer>
• Audio & Video Tags: Embed multimedia easily using <audio> and <video>
• New Input Types: date, email, range, color, etc.
• Canvas & SVG: Drawing and graphics support
• Local Storage: Store data in the browser
• Geolocation API: Access user’s location (with permission)

🎧 Audio & Video Example

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

🧪 New Input Types

<input type="email" placeholder="Enter your email" />
<input type="date" />
<input type="range" min="0" max="100" />
<input type="color" />

🖼 Canvas Example

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 10, 150, 75);
</script>

📌 Practice Task

• Create a form using input type="email", date, and range
• Embed an audio and video element on a sample page
• Use <canvas> to draw a rectangle

🚀 What’s Next?

In Day 7, we begin our CSS journey! You'll learn how to add beautiful styles to everything you've built so far.

Day 7: HTML Portfolio Mini Project

🎨 Day 7: HTML Portfolio Mini Project

🎨 Day 6: HTML Portfolio Mini Project

Today you'll create a basic personal portfolio page using only HTML and the semantic tags we’ve learned so far. This project helps you practice structure, content organization, and confidence-building.

---

📄 What You'll Build

A simple portfolio page that includes:

• Header with your name & profession
• Navigation with internal page links
• About Me section
• Projects section with a list
• Contact Form using inputs
• Footer with copyright

💻 Full HTML Code (with Tailwind)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Portfolio</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">

  <header class="text-center p-6 bg-blue-600 text-white">
    <h1 class="text-3xl font-bold">Muzammil Riaz</h1>
    <p>Web Developer & Designer</p>
  </header>

  <nav class="text-center bg-blue-100 py-2">
    <a href="#about" class="mx-2 text-blue-600">About</a>|
    <a href="#projects" class="mx-2 text-blue-600">Projects</a>|
    <a href="#contact" class="mx-2 text-blue-600">Contact</a>
  </nav>

  <main class="p-6">
    <section id="about" class="mb-6">
      <h2 class="text-xl font-semibold text-gray-700">About Me</h2>
      <p>Hello! I'm Muzammil, a passionate web developer learning HTML, CSS, and JavaScript.</p>
    </section>

    <section id="projects" class="mb-6">
      <h2 class="text-xl font-semibold text-gray-700">My Projects</h2>
      <ul class="list-disc list-inside">
        <li>Quiz App</li>
        <li>Blog System</li>
        <li>Portfolio Website</li>
      </ul>
    </section>

    <section id="contact">
      <h2 class="text-xl font-semibold text-gray-700">Contact Me</h2>
      <form class="space-y-4 mt-2">
        <div>
          <label class="block mb-1 font-medium">Name:</label>
          <input type="text" class="w-full px-3 py-2 border rounded" />
        </div>
        <div>
          <label class="block mb-1 font-medium">Email:</label>
          <input type="email" class="w-full px-3 py-2 border rounded" />
        </div>
        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Send</button>
      </form>
    </section>
  </main>

  <footer class="text-center p-4 mt-6 bg-gray-200">
    <p>© 2025 Muzammil Riaz</p>
  </footer>

</body>
</html>
    

🧪 Practice Task

• Customize the header text
• Add 2 more sample projects
• Try changing colors using Tailwind utility classes

🚀 What’s Next?

In Day 8, we'll begin learning CSS to style our portfolio and make it responsive and beautiful!

Day 8: Inline vs Internal vs External CSS