Scribd
Upload
55 views57 pages

Web Dev

The document outlines a 5-day HTML learning plan, detailing daily topics and goals. Each day includes lessons on HTML basics, structuring content, images, tables, forms, and semantic HTML, culminating in a mini project. Tasks are provided for practical application of the concepts learned each day.

Uploaded by

Muhammad Hassan Shah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
55 views57 pages

Web Dev

The document outlines a 5-day HTML learning plan, detailing daily topics and goals. Each day includes lessons on HTML basics, structuring content, images, tables, forms, and semantic HTML, culminating in a mini project. Tasks are provided for practical application of the concepts learned each day.

Uploaded by

Muhammad Hassan Shah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 57

Perfect! You’re starting with HTML, and we’ll go step by step.

🔰 HTML Learning Plan (Detailed)


We’ll cover HTML in 5 days, each with a lesson + task. Here's the roadmap:

Day Topic Goal


1 HTML Basics & Page Structure Build a basic HTML page
2 Headings, Paragraphs, Lists, Links Structure content meaningfully
3 Images, Tables, Forms (Intro) Add media and basic data capture
4 Semantic HTML & Forms (Advanced) Use proper layout elements & full forms
5 Mini Project: Personal Web Page Combine all topics into a mini project

Let’s now begin with:

📘 HTML – Day 1: HTML Basics & Page Structure


🔹 What You’ll Learn:

 What HTML is
 Basic HTML document structure
 Writing your first HTML code

✅ 1. What is HTML?

HTML (HyperText Markup Language) is used to build the structure of web pages. Think of
it as the skeleton of every website.

✅ 2. HTML Page Structure

Here is the basic structure of every HTML file:

<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first HTML page.</p>
</body>
</html>

🧠 Explanation:

Tag Description
<!DOCTYPE html> Tells the browser to use HTML5
<html> The root of the HTML document
<head> Contains metadata (title, styles, etc.)
<title> Title shown on the browser tab
<body> The visible content on the web page
<h1> Main heading (biggest text)
<p> Paragraph

📝 Task: Build a Basic Profile Page

👉 Do this:

1. Open VS Code or any code editor.


2. Create a file: day1.html
3. Write this code (or your own version):

<!DOCTYPE html>
<html>
<head>
<title>My Profile</title>
</head>
<body>
<h1>Your Name</h1>
<p>I am learning HTML to build websites!</p>
<em>"The journey of a thousand miles begins with a single step."</em>
<hr>
<p>Check out <a href="https://www.wikipedia.org"
target="_blank">Wikipedia</a></p>
<br>
<strong>More coming soon...</strong>
</body>
</html>

🎯 Your Goal Today:

 Understand the structure


 Learn tags like <h1>, <p>, <em>, <a>, <hr>, <br>, <strong>
 View your page in a browser (right-click → Open with browser)

🚀 Once done:

Reply:

 ✅ “Done” — I’ll give Day 2


 Or paste your code if you want feedback
 Or ask me anything if you need help

Are you ready to try it?

Awesome! Let’s continue with Day 2: Headings, Paragraphs, Lists & Links.

📘 HTML – Day 2: Headings, Paragraphs, Lists & Links


🎯 Goal: Learn how to structure content meaningfully using headings,
paragraphs, lists, and links.

✅ 1. Headings and Paragraphs

Headings and paragraphs are essential to structuring content in a way that is readable and logical.

📝 Headings:

Headings help break up content into sections. There are six levels of headings in HTML (<h1> to
<h6>), where <h1> is the largest and most important, and <h6> is the smallest.

<h1>This is a Heading 1</h1>


<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

📝 Paragraphs:

Paragraphs are written inside <p> tags. Paragraphs help break up long sections of text into
digestible pieces.
<p>This is a paragraph of text. It will be displayed as a block of text on the
web page. Paragraphs are used for text content.</p>

✅ 2. Lists

HTML supports two types of lists: ordered lists and unordered lists.

📝 Ordered List (<ol>):

This list is numbered (1, 2, 3,...).

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

📝 Unordered List (<ul>):

This list is bullet-pointed (•, ◦, etc.).

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

📝 Nested Lists:

You can nest lists inside each other.

<ul>
<li>Fruit
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Spinach</li>
</ul>
</li>
</ul>

✅ 3. Links
Links (<a>) are used to navigate between pages or websites.

📝 Creating a Link:

To create a link to another webpage, you use the <a> tag with an href attribute (this defines the
URL).

<a href="https://www.example.com">Visit Example Website</a>

📝 Opening Links in a New Tab:

If you want to open the link in a new tab, you add the target="_blank" attribute.

<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>

📝 Your Task – Day 2 Practice

Create an HTML page with the following content:

1. Add at least three headings (<h1>, <h2>, <h3>)


2. Write two paragraphs with different content.
3. Create two lists:
o One ordered list (numbered items)
o One unordered list (bullet-point items)
4. Add at least two links:
o One that opens in the same tab.
o One that opens in a new tab.

Example:
<!DOCTYPE html>
<html>
<head>
<title>My Day 2 HTML Practice</title>
</head>
<body>
<h1>My Favorite Hobbies</h1>
<h2>Why I Love Coding</h2>
<p>Coding is my passion because it allows me to create cool websites and
apps.</p>

<h3>Hobbies I Enjoy:</h3>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Gaming</li>
</ul>
<h3>Top 3 Languages:</h3>
<ol>
<li>Python</li>
<li>JavaScript</li>
<li>HTML/CSS</li>
</ol>

<p>Check out my favorite resource: <a href="https://www.w3schools.com"


target="_blank">W3Schools</a></p>
<p>Visit my blog: <a href="https://www.example.com">Example Blog</a></p>
</body>
</html>

🎯 Your Goal:

 Use headings for proper content structure


 Write multiple paragraphs
 Create both ordered and unordered lists
 Add links, making sure to practice opening in the same and new tabs

Once done, reply:

 ✅ “Done” for Day 2


 Or share your code if you want feedback

Ready to build this?

Great job completing Day 2! 🎉


You're building solid HTML fundamentals. Let's move on to:

📘 HTML – Day 3: Images, Tables, and Introduction to


Forms
🎯 Goal:

Learn how to:

 Display images
 Create tables to organize data
 Understand basic form elements

✅ 1. Images in HTML
The <img> tag is used to display an image.

<img src="image_url" alt="description" width="300" height="200">


Attribute Description
src The image path or URL
alt Alternate text if image fails to load
width/height Controls size of image (optional)

🧪 Example:

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools


Logo" width="200">

✅ 2. Tables in HTML

Tables use several tags:

Tag Meaning
<table> Table container
<tr> Table row
<td> Table cell (data)
<th> Table header

🧪 Example:

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>22</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
</tr>
</table>

✅ 3. Intro to Forms

Forms are used to collect input from the user. Common tags:

Tag Description
<form> Container for input fields
Tag Description
<input> Single-line text or buttons
<label> Describes input field
<textarea> Multi-line text area
<button> Button to submit or click

🧪 Example:

<form>
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name"><br><br>

<label for="bio">Your Bio:</label><br>


<textarea id="bio" name="bio" rows="4" cols="30"></textarea><br><br>

<button type="submit">Submit</button>
</form>

📝 Your Task – Day 3 Practice

Create an HTML file that includes:

1. A heading and paragraph


2. One image (any image from the internet)
3. A table with at least 2 rows and 3 columns (e.g., Name, Age, Country)
4. A simple form:
o Name (text input)
o Message (textarea)
o Submit button

🔍 Example Layout:
<!DOCTYPE html>
<html>
<head>
<title>Day 3 Practice</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>Here's an image, a table, and a form for practice.</p>

<img src="https://via.placeholder.com/150" alt="Placeholder Image">

<h2>User Table</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Alice</td>
<td>22</td>
<td>USA</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>India</td>
</tr>
</table>

<h2>Contact Form</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>

<label for="msg">Message:</label><br>
<textarea id="msg" name="msg" rows="4" cols="40"></textarea><br><br>

<button type="submit">Send</button>
</form>
</body>
</html>

🏁 Once done:

Reply:

 ✅ "Done" for Day 3


 Or paste your code for review
 Or ask any question you have

Shall we get started?

Great, Hassan! Let's begin Day 4 of your HTML journey! 🎯

📘 Day 4: Semantic HTML, Advanced Form


Inputs & Validation
🎯 What You’ll Learn Today
1. ✅ Semantic HTML (<header>, <section>, <footer>, etc.)
2. ✅ More Form Inputs: Radio, Checkbox, Dropdown
3. ✅ Basic Form Validation (required, type="email", etc.)
4. ✅ Practice Project: A full contact form using semantic structure

✅ 1. Semantic HTML Tags


Semantic tags give meaning to your layout and make your page easier to understand for
browsers, search engines, and screen readers.

🔹 Common Semantic Tags

Tag Use
<header> Page or section header
<nav> Navigation menu
<main> Main content of the page
<section> Grouping related content
<article> Self-contained content
<aside> Side content, ads
<footer> Footer area of the page

🧪 Example:
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="#">Home</a> | <a href="#">Contact</a>
</nav>
</header>

<main>
<section>
<h2>About Me</h2>
<p>I love coding websites!</p>
</section>
</main>

<footer>
<p>&copy; 2025 Hassan</p>
</footer>
</body>
✅ 2. Advanced Form Inputs
🔹 Radio Buttons

Allow the user to choose one option.

<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">


<label for="female">Female</label>

Same name means only one can be selected.

🔹 Checkboxes

Allow multiple options to be selected.

<p>Hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="Reading">
<label for="reading">Reading</label>

<input type="checkbox" id="coding" name="hobby" value="Coding">


<label for="coding">Coding</label>

🔹 Dropdown Menu
<label for="country">Select Country:</label>
<select id="country" name="country">
<option value="pakistan">Pakistan</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select>

✅ 3. Form Validation
Required fields
<input type="text" name="fullname" required>

Email field
<input type="email" name="email" required>

Number field
<input type="number" name="age" min="1" max="100">

🧪 Day 4 Practice Task: Contact Form with Semantic Tags


Copy and modify the form below:

<!DOCTYPE html>
<html>
<head>
<title>Day 4 Form</title>
</head>
<body>
<header>
<h1>Contact Me</h1>
</header>

<main>
<section>
<form>
<label for="fullname">Full Name:</label><br>
<input type="text" id="fullname" name="fullname" required><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>

<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>

<p>Hobbies:</p>
<input type="checkbox" id="coding" name="hobby" value="Coding">
<label for="coding">Coding</label>
<input type="checkbox" id="sports" name="hobby" value="Sports">
<label for="sports">Sports</label><br><br>

<label for="country">Country:</label>
<select id="country" name="country">
<option value="pakistan">Pakistan</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select><br><br>

<label for="message">Your Message:</label><br>


<textarea id="message" name="message" rows="4"
cols="40"></textarea><br><br>

<button type="submit">Submit</button>
</form>
</section>
</main>

<footer>
<p>&copy; 2025 Hassan</p>
</footer>
</body>
</html>

✅ Your Task:

 Try writing or modifying this form.


 Paste your version here if you want help or review.
 Say "Done" when finished, and we’ll move to Day 5: Multimedia & Layout (div/span,
audio, video, iframe).

Ready to begin?

Awesome, Hassan! Welcome to Day 5 of your HTML journey. Today you'll start adding
multimedia and controlling layout using basic HTML tools.

📘 Day 5: Multimedia & Basic Layout in


HTML

🎯 What You’ll Learn Today:


1. ✅ Adding images (<img>)
2. ✅ Adding audio (<audio>)
3. ✅ Adding video (<video>)
4. ✅ Using iframe to embed websites or videos
5. ✅ Basic layout with <div> and <span>

✅ 1. Adding Images
<img src="image.jpg" alt="Description" width="300" height="200">
Explanation:

 src = file path or URL of the image


 alt = text shown if the image fails to load
 width and height = size in pixels

Example:
<img src="https://via.placeholder.com/300" alt="Sample image" width="300">

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

Explanation:

 controls = shows play/pause/volume


 <source> = defines the audio file
 Always give fallback text inside <audio>

✅ 3. Adding Video
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

✅ 4. Using iframe (embed external sites or YouTube)


<iframe src="https://www.wikipedia.org" width="600" height="400"></iframe>

Or embed a YouTube video:

<iframe width="560" height="315"


src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen></iframe>

✅ 5. Basic Layout with <div> and <span>


🔸 <div> – Block container

 Used to group sections or blocks


 Acts like a box around content

<div>
<h2>My Blog</h2>
<p>This is a blog post.</p>
</div>

🔸 <span> – Inline container

 Used to style part of a text

<p>This is a <span style="color: red;">red</span> word.</p>

🧪 Day 5 Practice Task


Create a page that includes:

 An image (can be a URL)


 One audio player
 One video player
 An iframe (e.g., embed Wikipedia or YouTube)
 A <div> wrapping some content (title + paragraph)
 A <span> with some styled text

✅ Starter Code Example:


<!DOCTYPE html>
<html>
<head>
<title>Day 5 Practice</title>
</head>
<body>

<h1>Multimedia & Layout</h1>

<h2>Image</h2>
<img src="https://via.placeholder.com/300" alt="Sample Image">

<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
<h2>Video</h2>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video>

<h2>Iframe (Wikipedia)</h2>
<iframe src="https://www.wikipedia.org" width="600" height="300"></iframe>

<h2>Layout with div and span</h2>


<div>
<h3>This is inside a div</h3>
<p>This paragraph has a <span style="color:blue;">blue</span> word.</p>
</div>

</body>
</html>

🔧 Your Task:

 Try this code.


 Replace image/audio/video with your own if you want.
 Say "Done" when finished, or paste your code if you want help reviewing.

Would you like me to give you practice questions or challenges after this?

Great work, Hassan! You're progressing smoothly. Let's move to Day 6.

📘 Day 6: Introduction to CSS (Cascading


Style Sheets)
Now that your HTML pages have structure and content, it's time to make them look good. That’s
what CSS is for.

🎯 What You’ll Learn Today:


1. ✅ What CSS is and why we use it
2. ✅ Three ways to add CSS to HTML
3. ✅ Basic CSS syntax
4. ✅ Styling text, background, borders, and layout
5. ✅ Practice task
✅ 1. What is CSS?
CSS = Cascading Style Sheets
Used to style HTML elements (color, size, layout, etc.)

Without CSS:

<p>This is plain text</p>

With CSS:

<p style="color: red; font-size: 20px;">Styled text</p>

✅ 2. Three Ways to Add CSS


🔹 A. Inline CSS (inside HTML tag)
<p style="color: blue;">This is blue</p>

🔹 B. Internal CSS (inside <style> tag in <head>)


<head>
<style>
p {
color: green;
}
</style>
</head>

🔹 C. External CSS (best practice)

You create a separate .css file:

<link rel="stylesheet" href="style.css">

In style.css:

body {
background-color: lightgray;
}

✅ 3. Basic CSS Syntax


selector {
property: value;
}

Example:

h1 {
color: purple;
font-size: 30px;
}

✅ 4. Basic Styling Examples


🔸 Text
p {
color: #333;
font-size: 18px;
font-family: Arial, sans-serif;
text-align: center;
}

🔸 Background
body {
background-color: #f0f0f0;
}

🔸 Borders
div {
border: 2px solid black;
padding: 10px;
margin: 10px;
}

🔸 Width and Height


img {
width: 200px;
height: auto;
}

🧪 Day 6 Practice Task


✅ Create a simple webpage with:
 A heading styled with internal CSS
 A paragraph with inline CSS
 A <div> box with background color, border, padding
 Change the background color of the whole page
 Center the heading

🧱 Starter Code:
<!DOCTYPE html>
<html>
<head>
<title>Day 6 CSS</title>
<style>
body {
background-color: #e0f7fa;
}
h1 {
text-align: center;
color: darkblue;
}
div {
border: 2px solid gray;
padding: 20px;
background-color: #fdfdfd;
}
</style>
</head>
<body>

<h1>Welcome to My Styled Page</h1>

<p style="color: green; font-size: 18px;">This is styled using inline


CSS.</p>

<div>
<p>This content is inside a styled div box.</p>
</div>

</body>
</html>

Say “Done” when you finish your practice, or share your version for feedback.

Ready to make your page look beautiful with colors and layout? Let’s go!

Quick Summary Table:


Property What it does

font-size Controls size of the text


color Changes text color
background-color Sets background color
margin Space outside the element
padding Space inside the element
border Draws border around element
width/height Size of box or element
text-align Aligns text left, center, right

Great question, Hassan 👌


Perfect! You're doing great, Hassan 👏
Now let's begin Day 7.

📘 Day 7: CSS Classes, IDs, and Styling


Multiple Elements
Until now, you’ve been styling elements like this:

p {
color: red;
}

That styles all <p> tags on the page.

But what if you want to style just one paragraph or a group of elements separately?

That’s where classes and IDs come in.

🎯 What You’ll Learn Today:


1. ✅ What are CSS classes
2. ✅ What are CSS IDs
3. ✅ How to use class and ID in HTML and CSS
4. ✅ When to use class vs ID
5. ✅ Practice task

✅ 1. Class – Style a group of elements


 Use class when you want to apply the same style to many elements.

HTML:
<p class="note">This is a note.</p>
<p class="note">Another note paragraph.</p>

CSS:
.note {
color: green;
font-style: italic;
}

🟢 Use a dot . in CSS to select a class.

✅ 2. ID – Style only one unique element


 Use id for a single, unique element.

HTML:
<h1 id="main-title">Welcome!</h1>

CSS:
#main-title {
color: blue;
font-size: 32px;
}

🔵 Use a hash # in CSS to select an ID.


✅ 3. Quick Comparison
Feature Class (.classname) ID (#idname)
Use for Many elements One unique element
Prefix Dot (.) Hash (#)
Reusable? Yes No

✅ 4. ✏️Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
color: red;
}

#header-title {
text-align: center;
font-size: 30px;
color: blue;
}
</style>
</head>
<body>

<h1 id="header-title">My Styled Page</h1>

<p class="highlight">This paragraph is highlighted.</p>


<p class="highlight">So is this one.</p>

</body>
</html>

🧪 Practice Task:
Make a page with:

 An <h1> with an ID and a different style


 At least two <p> tags using the same class
 Try changing their color, background, and font size

When you’re ready, tell me "Done" or paste your code for feedback.
Would you like to continue to Day 8 after this?

Sure, Hassan! Let me explain the CSS Box Model in the most simple way possible — like
you're totally new. 😊

🔲 What is the Box Model?


Every HTML element is treated like a box in a webpage.

Just like a real box (like a gift), it has 4 parts:

1️⃣Content

This is your text, image, or whatever is inside the box.


🟦 Example: "Hello, World!"

2️⃣Padding

This is the space inside the box — around the content.


It's like bubble wrap around your gift. 🎁

➡️It pushes the text away from the border.

3️⃣Border

This is the line around the box.

You can make it:

 Thick or thin
 Solid or dashed
 Colored

4️⃣Margin
This is the space outside the box.
It’s the gap between this box and other boxes.

🎨 Example in Simple Code


.my-box {
width: 200px; /* how wide the box is */
height: 100px; /* how tall */
padding: 20px; /* space inside */
border: 3px solid red; /* outer line */
margin: 30px; /* space outside */
}

🧠 Easy Way to Remember:


Part Where is it? What does it do?
Content Middle Shows your text/image
Padding Inside the border Adds space inside the box
Border Edge of the box Draws a line around the box
Margin Outside the box Adds space between boxes

Imagine:
[ Margin ]
+-------------------+ ← Border
| [ Padding ] |
| | Content | |
| [ ] |
+-------------------+

✅ Try This
Make a box in your HTML + CSS and do this:

 Change the padding and watch how text moves inside the box.
 Change the margin and watch the whole box move away from others.
 Change the border and see how the outer line changes.
Would you like a practice challenge to test this understanding?
Or should I move you to Day 9: Display and Position?

Perfect, Hassan! You're doing great 👏


Let’s move on to Day 9: CSS Display and Positioning — this is where your layout skills really
level up.

📦 Day 9 – Display & Position in CSS

🎯 What You’ll Learn:


 display → how elements behave (block, inline, etc.)
 position → how to move elements (top, left, etc.)
 float & clear → how to place things side-by-side
 z-index → layer order (like overlapping)

🧠 1. display Property
🔹 Common Values:

Value What It Does


block Starts on a new line, takes full width (like <div>)
inline Stays in line (like <span>, <a>)
inline-block In-line but allows height & width
none Hides the element completely

🧪 Try This
index.html

<p>This is <span class="box">inline</span> text.</p>


<div class="block">I am block</div>

style.css

.box {
display: inline;
background-color: yellow;
}

.block {
display: block;
background-color: lightblue;
margin-top: 10px;
}

🧠 2. position Property
🔹 Values & What They Do:

Value What It Means


static Default (no movement)
relative Move from original spot using top, left, etc.
absolute Moves freely inside the nearest positioned parent
fixed Sticks to the screen (even when scrolling)

🧪 Example
<div class="outer">
<div class="inner">I'm absolute</div>
</div>
.outer {
position: relative;
height: 200px;
background: #ddd;
}

.inner {
position: absolute;
top: 20px;
left: 30px;
background: orange;
}

🔸 Result: .inner moves inside .outer.

🧠 3. float and clear


🔹 float

Puts elements side by side


.left-box {
float: left;
width: 50%;
}
.right-box {
float: right;
width: 50%;
}

🔹 clear

Prevents overlap of floated elements.

.clearfix {
clear: both;
}

🧠 4. z-index
Controls which element is on top when overlapping.

.box1 {
z-index: 2;
position: absolute;
}
.box2 {
z-index: 1;
position: absolute;
}

🔧 Practice Task:
Try this mini layout:

HTML
<div class="header">Header</div>
<div class="left">Left Side</div>
<div class="right">Right Side</div>
<div class="footer">Footer</div>

CSS
.left {
float: left;
width: 40%;
background: lightblue;
}
.right {
float: right;
width: 60%;
background: lightgreen;
}
.footer {
clear: both;
background: gray;
}

When you're done practicing, say "Day 10" and we’ll move to Flexbox layout, a powerful
modern layout tool!

Awesome, Hassan! 🌟
Welcome to Day 10 – Flexbox, one of the most important and powerful tools in modern CSS
layout.

🎯 What You'll Learn Today:


 What Flexbox is and why it's useful
 The basic flexbox model
 Important Flexbox properties (display: flex, justify-content, align-items, etc.)
 Real example of centering and side-by-side layout

🧠 What is Flexbox?
Flexbox stands for Flexible Box Layout.
It helps you align, center, and distribute space in a container — without using float or
positioning.

It’s used to:

 Align items horizontally or vertically


 Create responsive layouts
 Center anything (super easy!)

Basic Flexbox Setup


HTML:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

CSS:
.container {
display: flex;
gap: 10px;
}

.box {
background-color: skyblue;
padding: 20px;
}

🔑 Key Flexbox Properties (Parent = .container)


Property What it does
display: flex Activates flexbox
flex-direction Row (default) or column layout
justify-content Aligns items horizontally (left-right)
align-items Aligns items vertically (top-bottom)
gap Adds space between items

📐 Alignment Example:
.container {
display: flex;
justify-content: center; /* center left-right */
align-items: center; /* center top-bottom */
height: 300px;
background-color: lightgray;
}

🧪 Practice Task
✅ Goal: Center 3 boxes in the middle of the page
index.html

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Center</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>

style.css

body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.container {
display: flex;
gap: 15px;
}

.box {
background-color: steelblue;
color: white;
padding: 30px;
font-size: 20px;
}

Would you like a Flexbox cheat sheet, or should we move to a mini layout project using
Flexbox next?

Great choice, Hassan! Here's a super simple and complete Flexbox cheat sheet that you can
use any time while working with layouts.

🧾 CSS Flexbox Cheat Sheet


✅ Step 1: Start with display: flex

.container {
display: flex;
}

This makes .container a flex container, and its children become flex items.

🎯 Main Axis vs Cross Axis


 Main Axis = Direction of flex-direction (default is row)
 Cross Axis = The opposite direction

🧩 Parent (Container) Properties


Property Description
flex-direction Row (default) or column layout
→ row Items in a row (left to right)
→ column Items in a column (top to bottom)
justify-content Aligns items horizontally along main axis
→ flex-start Align left or top
→ flex-end Align right or bottom
→ center Center items
→ space-between Equal space between items
→ space-around Equal space around items
align-items Aligns items vertically along cross axis
→ stretch (default) stretch height or width
→ center Center vertically
flex-wrap Wrap items to next line
→ wrap Allow wrapping
→ nowrap Don’t wrap (default)
gap Adds space between items (newer & easier than margins)

📦 Child (Flex Item) Properties


Property Description
flex-grow Item will grow to fill space (e.g., flex-grow: 1)
Property Description
flex-shrink Item will shrink when needed
flex-basis Initial size before growing/shrinking
flex Shorthand for grow, shrink, basis
→ flex: 1 Grow equally
→ flex: 0 1 auto Default (don't grow, can shrink)
align-self Override align-items for a single item
order Change item order

📌 Example
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.item {
flex: 1;
padding: 10px;
background-color: lightblue;
}

Would you like:

 A mini Flexbox project to practice this?


 Or move to Day 11: CSS Grid?

Awesome, Hassan! 🌟 Welcome to Day 11 – CSS Grid — a major skill that web developers use
to create powerful, responsive page layouts.

🧱 What is CSS Grid?


CSS Grid is a two-dimensional layout system in CSS.
Unlike Flexbox (which works in one direction at a time — row or column), Grid lets you work
in rows and columns at the same time.

🧠 Why Learn CSS Grid?


Feature Why it matters
2D layout You can place items across both rows and columns
Precise control Easily build complex layouts
Responsive design Works beautifully with media queries

📐 Basic Grid Syntax


🔧 HTML:
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

🎨 CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns */
gap: 10px;
}

.item {
background-color: #0099cc;
color: white;
padding: 20px;
text-align: center;
}

✅ Output:

A layout with 2 columns and 2 rows. Each .item fills one cell.

🧩 Common Grid Properties


📦 Container Properties

Property Description
display: grid Turns a container into a grid
grid-template-columns Defines number/size of columns
grid-template-rows Defines number/size of rows
gap Adds space between rows/columns
Property Description
place-items Shorthand for align-items + justify-items

📦 Item Properties

Property Description
grid-column Start/end position of item (columns)
grid-row Start/end position of item (rows)
grid-area Name an area for placing items

🧪 Practice Task
Create a simple 2x3 grid layout for services (like cards).

✅ index.html
<!DOCTYPE html>
<html>
<head>
<title>Grid Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1 style="text-align:center;">Our Services</h1>


<div class="grid-container">
<div class="item">Web Design</div>
<div class="item">SEO</div>
<div class="item">Marketing</div>
<div class="item">Branding</div>
<div class="item">Consulting</div>
<div class="item">Support</div>
</div>

</body>
</html>

✅ style.css
body {
font-family: sans-serif;
background: #f5f5f5;
margin: 0;
padding: 20px;
}

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}

.item {
background: #007acc;
color: white;
padding: 30px;
text-align: center;
border-radius: 10px;
transition: 0.3s;
}

.item:hover {
background: #005999;
cursor: pointer;
}

Would you like:

 ✅ A CSS Grid cheat sheet


 ✅ A mini project using Grid
 ✅ Or move to Day 12: Combining Grid + Flexbox?

Perfect, Hassan! 🚀
Welcome to Day 13 – Media Queries & Responsive Design.

🌐 What is Responsive Design?


Responsive design means your website adapts to different screen sizes — desktops, tablets,
and mobile phones — so it always looks good.

📏 What are Media Queries?


Media queries let you apply CSS only if certain conditions are met, like screen width.

🧠 Syntax:
@media (max-width: 768px) {
/* CSS rules here only apply when screen width ≤ 768px */
}

You can use:


 max-width: for smaller screens
 min-width: for larger screens
 Or both!

🧪 Practice Task: Make a Responsive About Page


✅ index.html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<h1>My About Page</h1>
</header>

<main class="container">
<div class="text">
<h2>About Me</h2>
<p>Hi! I'm Hassan, and I'm learning HTML, CSS, and responsive
design.</p>
</div>
<div class="image">
<img src="https://via.placeholder.com/300" alt="Me">
</div>
</main>

</body>
</html>

✅ style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
text-align: center;
padding: 20px;
background: #007acc;
color: white;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
padding: 30px;
}

.text {
max-width: 400px;
}

.image img {
width: 100%;
max-width: 300px;
border-radius: 10px;
}

/* 👇 Media Query for small screens */


@media (max-width: 768px) {
.container {
flex-direction: column;
text-align: center;
}

.image img {
max-width: 100%;
}
}

✅ What You Learned:

Concept Use
@media Apply styles conditionally
max-width Target small screens (like phones)
flex-direction: column Stack items vertically on small screens

✅ Challenge (Optional):

Change layout when screen is:

 max-width: 1024px → reduce image size


 max-width: 480px → make text bigger, center everything

Let me know if you'd like to:

 🔁 Practice more media queries


 🌍 Move to Day 14: CSS Transitions & Animations
 🧰 Or build a responsive project like a landing page

What’s next?

Absolutely, Hassan! Here's everything you need to know about @keyframes and CSS
animations — clearly and simply explained, with examples for each part. This is your complete
guide to mastering animations in CSS. 💡🧠

🎯 1. What is @keyframes?
@keyframes is used to define a sequence of styles that an element should go through over time
— basically, steps of an animation.

🔧 Basic Syntax:
@keyframes animationName {
0% { /* starting style */ }
100% { /* ending style */ }
}

You can also use from and to instead of 0% and 100%.

@keyframes slideRight {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}

🎯 2. How to Apply an Animation?


Use the animation property on any selector.

selector {
animation: name duration timing-function delay iteration-count direction
fill-mode;
}

Example:

.box {
animation: slideRight 2s ease-in-out infinite;
}
3. Common Animation Properties
Property What it does Example
animation-name Name of the keyframes slideRight

animation-duration
Time for one full cycle (e.g. 2s, 2s
500ms)
animation-timing- ease, linear, ease-in, ease-out,
function Speed curve of animation ease-in-out
animation-delay Wait before animation starts 1s
animation-
iteration-count How many times to run 1, infinite, 3
animation- normal, reverse, alternate,
direction Direction of animation alternate-reverse
animation-fill- Defines final state (none, forwards, forwards
mode backwards, both)

💡 4. Full Example
🔷 HTML
<div class="box"></div>

🔷 CSS
.box {
width: 100px;
height: 100px;
background-color: red;
animation: moveBox 2s ease-in-out infinite alternate;
}

@keyframes moveBox {
0% { transform: translateX(0); }
100% { transform: translateX(300px); background-color: blue; }
}

💥 What happens?

 The box slides from left to right


 Changes from red to blue
 Then back from blue to red (because of alternate)
 Loops forever
🎨 5. Use Cases
Animation Goal Use This
Slide in from side transform: translateX() or translateY()
Fade in / out opacity: 0 → 1 or vice versa
Spin / rotate transform: rotate()
Resize or scale transform: scale()
Bounce or wave Combine multiple keyframes
Change color background-color or color

🧪 6. Practice Ideas
🟢 Fade In Text
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.text {
animation: fadeIn 1.5s ease forwards;
}

🔵 Bouncing Ball
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-50px); }
}

.ball {
animation: bounce 0.6s ease-in-out infinite;
}

🟣 Spin Loader
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.loader {
animation: spin 1s linear infinite;
}
✅ Summary
Key Part Meaning
@keyframes Defines the steps of the animation
animation Applies the animation to an element
Use with transform, opacity, color, position Most common properties to animate

Would you like:

 🧪 Practice challenges?
 🎯 A small animation project?
 🧠 Move to Day 15: CSS Variables?

Let me know!

Great! Let’s move to the next important CSS concept:

✅ Day 15 – CSS Variables (Custom


Properties)
CSS variables help you write cleaner, reusable, and easily maintainable styles.

🔶 What is a CSS Variable?


A CSS variable stores a value (like a color or size) that you can reuse throughout your CSS.

🔸 Syntax:
:root {
--main-color: #3498db;
--font-size: 18px;
}

 --main-color and --font-size are variables


 :root means these variables are available everywhere

🔸 Using Variables:
h1 {
color: var(--main-color);
font-size: var(--font-size);
}

✅ Why Use CSS Variables?


Feature Benefit
Reusable Use the same value in many places
Easy to update Change in one place = update all
Cleaner CSS More readable and organized code
Dynamic support Can be changed with JavaScript

🧪 Practice Example
🔸 HTML:
<h1>Welcome</h1>
<p>This text is styled with CSS variables!</p>

🔸 CSS:
:root {
--main-color: teal;
--main-bg: #f0f0f0;
--font-size: 20px;
}

body {
background-color: var(--main-bg);
font-size: var(--font-size);
}

h1 {
color: var(--main-color);
}

🧠 Bonus Tip:
You can even override variables in specific sections:

.section-dark {
--main-color: white;
background-color: black;
color: var(--main-color);
}

Let me know if you'd like:

 A small project using CSS variables


 Or move to Day 16: Pseudo-classes and pseudo-elements (:hover, ::before, etc.)

What's next, boss? 😎

Awesome, Hassan! Let's move to Day 16 — you're getting close to mastering CSS 👊.

✅ Day 16 – Pseudo-classes & Pseudo-elements


These let you style elements based on state, position, or generate extra content — without
adding new HTML.

🔶 1. Pseudo-classes (:)
They style elements based on their state.

🔸 Common Examples:

Selector Meaning
:hover When user hovers over the element
:active While element is being clicked
:focus When an input field is focused
:first-child Targets the first child in a parent
:nth-child(n) Targets the nth child (like a row in table)

🧪 Example:
button:hover {
background-color: green;
color: white;
}
li:first-child {
font-weight: bold;
}
p:nth-child(2) {
color: red;
}
🔶 2. Pseudo-elements (::)
They add virtual elements before or after actual content — without HTML.

🔸 Common Examples:

Selector Purpose
::before Adds content before element
::after Adds content after element
::first-letter Styles the first letter of text
::selection Styles selected text highlight

🧪 Example:
h1::before {
content: "👉 ";
}

p::first-letter {
font-size: 200%;
color: red;
}

::selection {
background: yellow;
color: black;
}

🧠 Why This Is Powerful:


 No need for extra <span> or HTML
 Useful for adding icons, styling parts of text, visual effects

🔧 Practice Challenge
Create a styled button and heading using pseudo-classes and pseudo-elements:

<!DOCTYPE html>
<html>
<head>
<style>
button {
padding: 10px 20px;
background-color: royalblue;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: darkblue;
}

h2::before {
content: "★ ";
color: gold;
}

h2::after {
content: " ★";
color: gold;
}

::selection {
background: yellow;
color: black;
}
</style>
</head>
<body>

<h2>Welcome to CSS Magic</h2>


<button>Click Me</button>

<p>Try selecting this text with your mouse!</p>

</body>
</html>

Let me know when you’re ready for Day 17: Responsive Design & Media Queries (for mobile-
friendly sites 📱)!

Awesome! Let’s move to Day 17 – Responsive Design & Media Queries — a critical skill in
modern web design. 🌍📱💻

✅ Day 17 – Responsive Web Design (RWD) &


Media Queries
Responsive design makes your website look great on all screen sizes — phones, tablets,
laptops, desktops.

🔷 Why Responsive Design?


Users access websites from many devices:

 Phones (small screens)


 Tablets (medium)
 Desktops (large)

You want your site to adjust automatically to fit all screen sizes!

🔶 Step 1: Use Relative Units


Instead of fixed sizes like px, prefer: | Unit | Description | |------|------------------| | % | Relative to
parent element | | em or rem | Relative to font-size | | vw, vh | Viewport width/height |

🔶 Step 2: Use Media Queries


Media queries let you write CSS that only applies under certain conditions (like screen width).

🔹 Syntax:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}

This means:

“If screen is 600px or less, change background to light blue.”

🧪 Practice Example:
🔸 HTML:
<h1>Responsive Page</h1>
<p>This layout changes with screen size!</p>

🔸 CSS:
body {
background-color: white;
font-size: 18px;
text-align: center;
}

@media (max-width: 768px) {


body {
background-color: #f0f0f0;
font-size: 16px;
}
}

@media (max-width: 480px) {


body {
background-color: #ddd;
font-size: 14px;
}
}

💡 Result:

 Big screen: white background


 Medium: light gray
 Small: darker gray + smaller text

🧠 Bonus Responsive Tips:


 Use max-width: 100% for images
 Use Flexbox/Grid with % and auto
 Use meta tag in HTML head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Let me know when you're ready to move to:

➡️Day 18: Advanced Flexbox and Grid layouts

Or want a mini responsive project first!


Perfect! Let’s move to Day 18 – Advanced Flexbox and Grid Layouts — the real power of
modern CSS layout. 💪📐

✅ Day 18 – Advanced Flexbox & CSS Grid

🔷 Part 1: Flexbox (Advanced)


You already know basics like display: flex, justify-content, and align-items. Now let’s
go deeper:

🔹 Wrap Content (like rows):


.container {
display: flex;
flex-wrap: wrap;
}

🔹 Control Widths:
.item {
flex: 1 1 200px; /* grow | shrink | base size */
}

🔹 Align Specific Items:


.item-special {
align-self: flex-end;
}

💡 Flexbox Example:
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.box {
background: tomato;
padding: 20px;
margin: 10px;
flex: 1 1 150px;
color: white;
}

🔷 Part 2: CSS Grid (Advanced)


Grid gives 2D control — both rows and columns.

🔹 Define Rows & Columns:


.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 10px;
}

🔹 Spanning Grid Items:


.item1 {
grid-column: span 2; /* Takes 2 columns */
}

💡 CSS Grid Example:


<div class="grid">
<div class="item">1</div>
<div class="item item2">2 (Big)</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.item {
background-color: royalblue;
color: white;
padding: 20px;
text-align: center;
}

.item2 {
grid-column: span 2;
}
💡 When to Use What?
Feature Use Flexbox For Use Grid For
1D layout Aligning in a row or column
2D layout Full page or complex layout
Auto wrapping Navigation bars
Exact control Image galleries, dashboards

Want a mini layout challenge/project, or should we move to:

➡️Day 19: CSS Units Deep Dive (em, rem, vh, vw, fr)?

Let me know!

Perfect! Let’s move to Day 19 – CSS Units — a must-know to control size, space, and layout
accurately in CSS. 📏

✅ Day 19 – CSS Units (px, %, em, rem, vw, vh, fr)

🔶 1. Absolute Unit – px (pixels)


 Fixed size
 Does not change based on screen size or parent element

p {
font-size: 16px;
}

👉 Use when exact size is needed (but not ideal for responsive designs)

🔶 2. Relative Units
These adjust automatically based on screen size or parent size.

✅ em – Based on parent's font-size


div {
font-size: 20px;
}
p {
font-size: 2em; /* 2 × 20 = 40px */
}

✅ rem – Based on root (html) font-size


html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 2 × 16 = 32px */
}

📌 rem is more stable than em because it doesn’t depend on parent elements.

✅ % – Relative to parent size


div {
width: 50%; /* 50% of parent width */
}

Used a lot for responsive widths and margins

🔶 3. Viewport Units
Viewport = screen size

 vw = 1% of viewport width
 vh = 1% of viewport height

h1 {
font-size: 10vw; /* 10% of screen width */
}

👉 Great for responsive text, hero sections, full-screen areas.

🔶 4. Grid Unit – fr (fraction)


Only used in CSS Grid
.grid {
display: grid;
grid-template-columns: 2fr 1fr;
}

Means:

 2 parts for 1st column


 1 part for 2nd column (like a 2:1 ratio)

🎯 Summary Table:
Unit Meaning Responsive? Use For
px Pixels (fixed size) ❌ Small icons, borders, precise gaps
% Percent of parent ✅ Widths, margins, padding
em Based on parent font ✅ Spacing, scaling text in modules
rem Based on root font ✅ Consistent global sizing
vw Viewport width ✅ Big text, full-width banners
vh Viewport height ✅ Full-screen layouts
fr Grid fraction unit ✅ Grid layouts

✅ Let me know if you want a practice challenge or we should move to:

➡ Day 20: CSS Positioning (static, relative, absolute, fixed, sticky)

This one is VERY important for real-world layouts.

Excellent choice! You're about to wrap up CSS like a pro. Let’s go through:

✅ Part 1: CSS Best Practices


✅ Part 2: CSS Reset
✅ Part 3: Final Responsive Mini Project (HTML + CSS)

✅ Part 1: CSS Best Practices


These tips will help keep your CSS clean, maintainable, and scalable:

1. Use External CSS

Keep styles in a .css file — keeps HTML clean and separates concerns.

<link rel="stylesheet" href="styles.css">

2. Use Class Names, Not IDs for Styling

IDs are meant for uniqueness; use classes for reusable styles.

<div class="card"></div> <!-- Good -->

3. Follow Naming Conventions

Use clear, readable names:

/* Good */
.btn-primary, .nav-bar, .footer-text

/* Avoid */
.div1, a1, boxx

You can also use BEM:

.card__title {}
.card--active {}

4. Group Related Styles Together


/* Buttons */
.btn { ... }
.btn-primary { ... }
.btn-danger { ... }

/* Layout */
.container { ... }
.grid { ... }

5. Use Shorthand
margin: 10px 20px 10px 20px;
/* instead of */
margin-top: 10px;
margin-right: 20px;
...

6. Avoid Inline Styles

Inline styles are hard to maintain:

❌ <div style="color:red;">
✅ Use class with external CSS

7. Use CSS Variables for Reusability


:root {
--main-color: #007bff;
}

.button {
background-color: var(--main-color);
}

8. Make It Responsive (Use % or em, not just px)

✅ Part 2: CSS Reset


Browsers apply their own default styles. Resetting gives you a clean slate.

🔹 Option 1: Minimal Reset


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

🔹 Option 2: Normalize.css

Use a library like Normalize to keep useful browser defaults.


✅ Part 3: Final Responsive Project (Mini Portfolio Page)
Let’s build a small responsive profile page.

🧱 HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mini Portfolio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Hassan Khan</h1>
<p>Web Developer & Learner</p>
</header>

<main>
<section class="card">
<img src="https://via.placeholder.com/150" alt="Profile Picture" />
<h2>About Me</h2>
<p>I love learning web development and building awesome projects.</p>
<a class="btn" href="#">Contact Me</a>
</section>
</main>

<footer>
<p>&copy; 2025 Hassan. All rights reserved.</p>
</footer>
</body>
</html>

🎨 CSS (style.css)
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
text-align: center;
padding: 20px;
}

header {
margin-bottom: 20px;
}

.card {
background-color: white;
padding: 20px;
border-radius: 10px;
max-width: 500px;
margin: auto;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.card img {
width: 150px;
border-radius: 50%;
margin-bottom: 10px;
}

.btn {
display: inline-block;
margin-top: 10px;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}

/* Responsive */
@media (max-width: 600px) {
.card {
padding: 15px;
}

.btn {
width: 100%;
}
}

✅ What This Covers:

 Flexibility (responsive layout)


 Reusable styles (class + variables)
 Reset styles
 Real design practice

Would you like a project challenge based on this or should we now start JavaScript Day 1?

You might also like