Monday, June 30, 2025

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

Day 8: Inline, Internal, and External CSS | Web Development Series

🎨 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
on No comments:
Tags , , , , , , , ,

Wednesday, June 25, 2025

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
on No comments:
Tags , , , , , , ,

🎨 Day 7: HTML Portfolio Mini Project

portfolio

🎨 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
on No comments:
Tags , , , , , , , , ,

Sunday, June 22, 2025

📘 5 - HTML Important 100 MCQs Test

📘 5 - HTML Important 100 MCQs Test

on No comments:
Tags , , , ,

Day 5: Semantic HTML Tags | Web Development Series

📘 Day 5: Semantic HTML Tags

Semantic HTML uses meaningful tags that clearly describe their purpose in the structure of a webpage. These tags make your code more accessible, SEO-friendly, and easier to maintain.

🔍 What Are Semantic Tags?

Unlike generic tags like <div> and <span>, semantic tags describe the content they hold. They help search engines and screen readers better understand your content.

📦 Common Semantic HTML Tags

  • <header> – Top section (logo or nav)
  • <nav> – Navigation links
  • <main> – Main content
  • <section> – Group of related content
  • <article> – Independent post or news
  • <aside> – Sidebar or extra content
  • <footer> – Bottom section

📄 Example Layout

<header>
  <h1>My Website</h1>
</header>

<nav>
  <a href="#">Home</a> | <a href="#">About</a>
</nav>

<main>
  <section>
    <h2>About Me</h2>
  </section>
  <article>
    <p>This is a blog post.</p>
  </article>
</main>

<aside>Sidebar content</aside>

<footer>
  <p>Copyright © 2025</p>
</footer>

🧠 Why Use Semantic HTML?

  • ✅ Improves accessibility
  • ✅ Boosts SEO
  • ✅ Easier to read and maintain

🧪 Practice Task

  • Create a layout using <header>, <main>, and <footer>.
  • Add a <section> and an <article> inside <main>.

🚀 What’s Next?

In Day 6, we’ll start our first Mini Project: Personal Portfolio Page using everything you’ve learned!

Coming Soon: Day 6 - Portfolio Mini Project
on No comments:
Tags , , , , , , ,

Important LDC MCQs Practice Test 1 – 100 Questions

Important LDC MCQs Practice Test 1 – 100 Questions

on No comments:

Thursday, June 19, 2025

📘 4 - HTML Important 100 MCQs Test

4 - HTML Important 100 MCQs Test

4- HTML Important 100 MCQs Test

on No comments:
Tags , , , , ,
Subscribe to: Posts (Atom)