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