📚 Week 2 Day 2: CSS Intermediate — Layout, Selectors, and Rules

🎯 Topics for Today:
1️⃣ Pseudo Classes and Elements
2️⃣ Sibling Combinators: ., >, +, ~
3️⃣ Box Model Deep Dive
4️⃣ Margin, Border, Padding — Full Control
5️⃣ CSS Conflicts: Cascading, Source, Specificity, Inheritance

✅ 1️⃣ Pseudo Classes and Elements
➤ What Are They?
They target specific states or parts of elements.
✨ Pseudo Classes Examples:
➡️ :hover
→ When mouse is over.
➝Imagine a button in an app , when you hover your mouse over it , the color changes.

button:hover {
       background-color: yellow; }

➡️ :focus → When an input is active/selected.

input:focus {
        border-color: blue; }


➡️ :first-child → First element inside parent.

ul li:first-child {
         color: red; }

➡️ :nth-child(2) → Second child.

p:nth-child(2) {
       font-weight: bold; }

✨ Pseudo Elements Examples:
➝they are used when you want to add decoration with out changing the html

➡️ ::before

p::before {
      content: "👉 "; }


➡️ ::after

p::after {
     content: " ✅"; }

➡️ ::first-letter

p::first-letter {
     font-size: 30px; }

✅ 2️⃣ Sibling Combinators in CSS
➤ Why Use Them?
To style elements based on their position relative to others. This helps you control exactly where and when styles apply.

✔️ Examples:
➡️ .class1 .class2 {} — Any .class2 inside .class1.

div p {
     color: green; }

➡️ > (Child Selector)

div > p {
      color: blue; }

Only selects direct children, not grand children  😁

➡️ + (Adjacent Sibling Selector)

h1 + p {
     color: orange; }

Selects the very next <p> after <h1>.

➡️ ~ (General Sibling Selector)

h1 ~ p {
   color: purple; }

Selects all following siblings.


✅ 3️⃣ Box Model Deep Dive

All HTML elements have:
➝Content = what's written/shown
→ Padding = space inside box , around content
→ Border = the edge of the box
→ Margin = space outside the box , around other boxes
➤ Display Types
✔️ display: block;
✔️ display: inline;
✔️ display: inline-block;
✅ Example:

span {
    display: block; }

➤ Box Sizing
✔️ box-sizing: content-box; (default , width doesn't include padding or border)
✔️ box-sizing: border-box; (includes padding + border)
✅ Example:

div {
    width: 200px;
     padding: 20px;
     box-sizing: border-box; }


✅ 4️⃣ Margin, Border, Padding — Sides
You can control:
margin-top
margin-bottom
margin-left
margin-right
✅ Example:

div {
    margin-top: 20px;
    margin-right: 10px;
    border: 2px solid black;
    padding: 15px; }


Or shorthand:

margin: 20px 10px 15px 5px; /* Top, Right, Bottom, Left */

✅ 5️⃣ CSS Conflicts: Cascading, Source, Specificity, Inheritance

When two styles target the same thing, which one wins?

➤ Cascading Order
Inline styles (strongest)
Internal CSS (in <style> tags)
External CSS (weakest)

➤ Specificity
More specific selectors override simpler ones.
3⃣type selectors(p, img, div)==weak
2⃣class selectors(.highleight, .topic)==stronger
1⃣ID selectors (#main, #sec)==Strongest

➤ Source Order
The last rule in the CSS file usually wins if specificity is equal.
➤ Inheritance
Some properties like color, font-family, line-height inherit from parent.
But layout properties like margin, padding , border don’t.

✅ 6️⃣ Quick Summary Checklist
✔️ Pseudo Classes = :hover, :first-child, :nth-child()
✔️ Pseudo Elements = ::before, ::after
✔️ Sibling Selectors = >, +, ~
✔️ Box Model = Padding, Border, Margin
✔️ CSS Conflicts = Understand specificity, cascade, inheritance

#Week2 #Day2 #Css #CssLayout #lesson

Assignment :
➤pseudo classes
https://youtu.be/Nrsy_2ogRfQ?si=dKtM_vb_cLt_JM8Q
➤pseudo elements
https://youtu.be/_LxYNxeWpBo?si=KlUEPdiRLDa0jpoY
➤nav-bar
https://youtu.be/f3uCSh6LIY0?si=44Yh4TVl8IB19ybn

#Week2 #Day2 #Css #CssLayout #resources

🎨Week 2 Day 2 Challenges:

💻 Today’s CSS Styling Challenge!
From all the HTML projects we did before —
✅ Cover Page
✅ Restaurant Website
✅ Bookstore Catalog
✅ Scholarship Application Form

👉 Now it’s time to make them look beautiful using today’s CSS lessons!
🔧 What to Include:

✨ 🎯 Style all lists and menus → Add background colors, borders, padding, spacing!

✨ 🎯 Use Flexbox to arrange sections → Menus, book items, form fields neatly side by side or centered.

✨ 🎯 Add borders, margins, and boxes → Around each important section (like menus, profile pictures, buttons).

✨ 🎯 Apply hover effects → Change button colors, link styles when someone moves their mouse over them.

✨ 🎯 Use pseudo-elements like ::before and ::after for decoration!

✨ 🎯 Try sibling combinators → Arrange things depending on position (like styling every <p> after <h1>).

✨ 🎯 Control the box model → Use margin, padding, width, and height smartly.

🌟 💡 Bonus Reminder: Use even the tags or methods we might have forgotten to mention before.
👉 Be creative — mix colors, shapes, and layouts!
📸 ✅ When You’re Done:
➤ Share screenshots or the code in the group!
➤ Invite your friends to join Fullstack Summer Camp 💻🔥
➤✌️ Stay well, enjoy your styling, and see you tomorrow! ✨

#Week2 #Day2 #Css #CssLayout #challenge

📚 WEEK 2 DAY 3: CSS DEEP STYLING

🎨 Topic: Backgrounds, CSS Units, Replaced Elements 

============================================

✅ 1️⃣ BACKGROUND PROPERTIES IN CSS 

👉 Why background matters: It sets the mood and layout of your web page. 
Think of it like painting your restaurant walls, putting posters up, or setting up banners. 

------------------------------------------
🔸 1.1 background-image: 
Adds an image as a background.
Example:

body {
  background-image: url("coffee.jpg");
}

🔸 1.2 background-repeat: 
Controls if and how the image repeats.

Options: repeat, no-repeat, repeat-x, repeat-y.
Example:

div {
  background-image: url("pattern.png");
  background-repeat: no-repeat;
}

🔸 1.3 background-size: 
Controls image size in the background.

Options:
- auto 
- cover (fills the whole area) 
- contain (makes sure the full image shows)

Example:

div {
  background-image: url("sunset.jpg");
  background-size: cover;
}

🔸 1.4 background-position: 
Where the background starts from.
Example:

div {
  background-position: center center;
}

🔸 1.5 background-attachment: 
Controls scrolling behavior.

- scroll (default)
- fixed (image stays while content scrolls)
Example:

body {
  background-image: url("forest.jpg");
  background-attachment: fixed;
}

🔸 1.6 background-gradient: 
Uses two or more colors as background without images.
Examples:

div {
  background: linear-gradient(to right, red, blue);
}

div {
  background: radial-gradient(circle, yellow, green, blue);
}

=====================================

✅ 2️⃣ CSS UNITS + MEASUREMENTS 

Units help make things the right size.

🔸 2.1 px: Pixels 
- Fixed unit. Small screens might look too big/small. It is not responsive.
Example:

p {
  font-size: 16px;
}

🔸 2.2 em: Relative to parent element
Example:

div {
  font-size: 1.5em;
}

🔸 2.3 rem: Relative to root element 
- Keeps sizes consistent across page.
Example:

body {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

🔸 2.4 % (Percentage) 
Width or height relative to parent.
Example:

div {
  width: 50%;
}

🔸 2.5 vh & vw (Viewport height/width)

- 1vh = 1% of viewport height.
- 1vw = 1% of viewport width.
Example:

section {
  height: 100vh;
  width: 100vw;
}

🔸 2.6 min-width / max-width 
Limits size changes.
Example:

img {
  max-width: 100%;
  min-width: 200px;
}

🔸 2.7 overflow 
Controls content that goes outside the box.

Options:
- visible
- hidden
- scroll
- auto
Example:

div {
  width: 200px;
  height: 200px;
  overflow: scroll;
}

🔸 2.8 object-fit 
Applies to <img>, <video>, etc.
Options: cover, contain, fill, none.
Example:

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

------------------------------------------

🔸 2.9 COLORS (FUNCTIONS + SYSTEMS)

✅ rgb(): 
color: rgb(255, 0, 0);

✅ rgba(): (With transparency) 
color: rgba(255, 0, 0, 0.5);

✅ hsl(): (Hue, Saturation, Lightness) 
color: hsl(120, 100%, 50%);

✅ hsla(): 
color: hsla(120, 100%, 50%, 0.3);

✅ hwb(), lab(), lch(): 
Advanced color systems for modern browsers. Mostly for professional design systems.

===============================

✅ 3️⃣ REPLACED ELEMENTS: Styling 

Replaced elements = Content controlled by the browser but styled by CSS.
Examples:
- <img>
- <video>
- <input>
- <iframe>
- <table>

🔸 3.1 Styling Images 

img {
  width: 100%;
  max-width: 400px;
  border: 2px solid black;
  border-radius: 15px;
  object-fit: cover;
}

🔸 3.2 Styling Videos 

video {
  max-width: 600px;
  border: 4px solid red;
  border-radius: 10px;
}

🔸 3.3 Styling Forms (Inputs, Buttons) 

input, select, textarea {
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ccc;
  width: 100%;
}

button {
  background: linear-gradient(to right, green, blue);
  padding: 15px 30px;
  color: white;
  border: none;
  border-radius: 8px;
}

button:hover {
  background: linear-gradient(to right, blue, purple);
}

🔸 3.4 Styling Tables

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

===============================

✅ EXTRA TIPS:

- Combine background properties into one shorthand:
background: url("bg.jpg") no-repeat center/cover fixed;

- Mix units smartly: 
  - rem for font sizes 
  - px for borders 
  - vh/vw for layout


✅ QUICK SUMMARY:

✔️ Background images, gradients, sizes, positions. 
✔️ CSS units like px, em, rem, %, vh, vw. 
✔️ Overflow and object-fit. 
✔️ Advanced color functions (rgb, rgba, hsl, hsla). 
✔️ Styling images, forms, media, tables (Replaced Elements).

Assignment :
➤background-image
https://youtu.be/_oFWg_NlKdo?si=KwFKAy_8T0FaNona
➤overflow
https://youtu.be/d7cH8geV2dY?si=SMddhWXTINpRH0b3
➤position
https://youtu.be/G4AWXOr4W-k?si=feeSgnv8xS8r1uZD

🔥Week 2 Day 3 Challenges:

💻 TODAY'S CHALLENGE: BUILD YOUR OWN COURSE WEBSITE HOMEPAGE! 💻🔥

👋 Hello Fullstack Summer Camp friends!

Today’s challenge is a fun and practical one — we’re moving beyond random layouts and actually trying to imitate a real website layout. 
Our inspiration? 👉 [https://www.muyalogy.com](https://www.muyalogy.com)

━━━━━━━━━━━━━━━━━━━ 
🎯 YOUR MISSION:

✅ Build a homepage for an online learning website using ONLY HTML + CSS (NO JavaScript yet).

✅ The homepage should include:

1️⃣ Website title/logo at the top (you can write just the name as text) 
2️⃣ A navigation bar with items like: 
   - Home 
   - Courses 
   - About 
   - Contact 

3️⃣ 2–3 Courses Section: 
   ➤ Each course should have: 
      - Course title 
      - Short description 
      - Image 
      - Price or rating 

4️⃣ Footer section: 
   ➤ Include things like copyright, 
   ➤ Terms and conditions, 
   ➤ Social media icons or text links (as placeholders).

✅ Use as many CSS styles as possible from everything we’ve learned so far: 
- Background images or gradients 
- Pseudo-classes (like hover effects on buttons or links) 
- Tables (if you wish for price comparison or schedule) 
- Flex or Grid layout for neat alignment 
- Colors, margins, paddings, fonts, etc.

━━━━━━━━━━━━━━━━━━━ 
👀 Extra Notes: 
👉 You don't need to copy everything from the real site. Just the general layout and feel. 
👉 You can get creative with colors and images that fit the education theme!

━━━━━━━━━━━━━━━━━━━ 
📸 When You’re Done: 
➤ Share your finished homepage in the group! Screenshots or code files — both are welcome. 
➤ Invite your friends who want to learn with us. 
➤ Stay consistent, stay practicing, and as always... 
✌️Stay well and happy coding!

📚WEEK 2 DAY 4: CSS FLEXBOX &*Grid layouts

👋👋 Fullstack Campers! Let's dive in to flexboxes and Grid layouts today.

1⃣ CSS Flexbox – The Ultimate Beginner-to-Intermediate Guide

Flexbox (Flexible Box Layout) is used to arrange items in a row or column and control their alignment, spacing, and distribution—even when their sizes are unknown or dynamic.

🧱 1. Setting Up Flexbox
To use Flexbox, apply display: flex; to a container. This makes its direct children flexible items.

<div class="container">
      <div>Item 1</div>
      <div>Item 2</div>
     <div>Item 3</div>
</div>


Css:

.container {
      display: flex;
}

➕ 2. Flex Container Properties
These properties are applied to the parent element.
🔸 flex-direction
Controls the main axis direction.

.container {
     display: flex;
      flex-direction: row;
      flex-direction: column;
      flex-direction: row-reverse;
      flex-direction: column-reverse; }

📦 Example

.container {
     display: flex;
      flex-direction: column; }

This stacks items vertically.
🔸 justify-content
Aligns items along the main axis (left to right by default).

.container {
      justify-content: flex-start;
      justify-content: flex-end; 
      justify-content: center;   
      justify-content: space-between;
      justify-content: space-around; 
      justify-content: space-evenly; }

📦 Example:

.container {
     display: flex;
       justify-content: space-between; }

🔸 align-items
Aligns items vertically (along the cross-axis).
.container {
       align-items: stretch;
       align-items: flex-start;
       align-items: flex-end;
       align-items: center;
       align-items: baseline; }
📦 Example:

.container {
      display: flex;
       align-items: center; }

🔸 flex-wrap
By default, items will try to fit in one line. Use wrap to move overflowing items to a new line
   ➤ nowrap/* default */
   ➤ wrap
   ➤ wrap-reverse
🔸 align-content
Used only when there are multiple lines (i.e. when flex-wrap: wrap; is applied). It aligns the rows of items.

➤stretch;
➤ flex-start
➤ flex-end
➤center
➤ space-between
➤ space-around

🧊 3. Flex Item Properties
These are applied to individual child elements inside a flex container.
🔹 flex-grow
Defines how much a flex item can grow relative to others.

.item { flex-grow: 1; /* Will grow equally with others */ }
📦 Example:

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }

Item 2 will be twice as wide as Item 1.

🔹 flex-shrink
Defines how much an item can shrink if space is tight.

.item { flex-shrink: 0; /* Won't shrink */ }

🔹 flex-basis
Defines the initial size before space is distributed.

.item { flex-basis: 200px; }

🔹 flex
A shorthand for:
flex: grow shrink basis;
📦 Example:

.item { flex: 1 1 200px; }

🔹 align-self
Overrides align-items for a single item.
.item { align-self: center; }

🧪 4. Complete Example

<style> .container {
       display: flex;
       flex-direction: row;
       justify-content: space-around;
      align-items: center;
      height: 200px;
      background-color: #f2f2f2; }
.item {
     background: orange;
     padding: 20px;
     color: white;
      margin: 10px;
      flex: 1; } </style>

<div class="container">
      <div class="item">📘 Item 1</div>
     <div class="item">📙 Item 2</div>
     <div class="item">📗 Item 3</div>
</div>

🛠 5. Flexbox Tricks You Should Know
🔹 Equal height columns
🔹 Center anything (vertical + horizontal)
🔹 Responsive layout (great on mobile! Coming soon)
🔹 Reordering items with order
🔹 Avoids using floats or positioning

2⃣ CSS Grid Layout

✅ What is CSS Grid?

CSS Grid is a two-dimensional layout system that allows you to control both rows and columns at the same time. Unlike Flexbox (which is one-dimensional), Grid gives you full control over the layout of your elements.
It’s especially useful for building complex web layouts without hacks like floats or flex-wrap tricks.

🔸 1. Creating a Grid Container
You start by declaring display: grid on the parent element.
.container { display: grid; }
Example:

<div class="container">
      <div>1️⃣</div>
     <div>2️⃣</div>
     <div>3️⃣</div>
</div>

.container {
       display: grid;
       grid-template-columns: 100px 100px 100px; }

🔹 2. Defining Columns and Rows
Use grid-template-columns and grid-template-rows.
👉 Fixed sizes:
.container {
      display: grid; 
       grid-template-columns: 200px 150px;
       grid-template-rows: 100px 100px; }
👉 Responsive using fr unit (fractional):

.container {
      display: grid;
      grid-template-columns: 1fr 2fr; }

👉 Repeat:

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

🔸 3. Gap Between Items
Use gap, row-gap, or column-gap.
.container { gap: 20px; }

🔸 4. Placing Items in Grid
Grid items can span columns or rows using:
.item {
      grid-column: 1 / 3; /* start at 1, end before 3 */
       grid-row: 2 / 4; }
You can also use span:
.item { grid-column: span 2; }

🔹 5. Named Areas
Use grid-template-areas for visually mapping the layout.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas: "header header" "sidebar content"; }

Then assign elements:
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

🔹 6. Aligning Items
➝justify-items: Align items horizontally (inside each grid cell).
➝align-items: Align items vertically (inside each grid cell).
➝justify-content: Align the entire grid horizontally.
➝align-content: Align the entire grid vertically.

.container {
      justify-items: center;
     align-items: center; }

🧊 7. Auto-placement
Let grid place items automatically based on available space.

.container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

☝️ This is super useful for responsive grids (like image galleries or cards).

🧪 8. Complete Example – Simple Blog Layout

<style>
.container {
     display: grid;
     grid-template-areas: "header header" "sidebar main" "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    min-height: 100vh; }
.header {
    grid-area: header;
    background: #1e90ff;
    color: white;
    padding: 1rem; }
.sidebar {
     grid-area: sidebar;
     background: #f0f0f0;
    padding: 1rem; }
.main {
     grid-area: main;
     background: #fff;
     padding: 1rem; }
.footer {
     grid-area: footer;
     background: #1e90ff;
     color: white;
     padding: 1rem;
     text-align: center; }
</style>


<div class="container">
     <div class="header">🌐 My Blog</div>
    <div class="sidebar">📚 Categories</div>
    <div class="main">📝 Blog Content goes here</div>
   <div class="footer">© 2025 My Blog</div>
</div>

Assignment
➤flexbox
https://youtu.be/GteJWhCikCk?si=yaFF8FOp9nDlgGyn
➤Grid layout
https://youtu.be/eHaZlFcGl6k?si=BEFCy3JDqiMm14yZ

💪 Week 2 Day 4 Challenges: Flexbox & Grid CSS
📣 Today’s mission: Build a "Tech Event Schedule Webpage" using only Flexbox and Grid Layout to organize your content like a real event site! 😍

🎯 Challenge Brief:
Create a webpage for an upcoming Tech Conference or Workshop using Flexbox and Grid.
You're the designer — make it look structured, readable, and clean using all the layout techniques we’ve learned.
🛠️ Your Page Should Include:
🧑‍💼 1. Event Header
Use Flexbox to center and space:

➝Event name (e.g., "CodeVerse 2025")
➝Date
➝A register button

📅 2. Schedule Section
Use CSS Grid to display a 2-day agenda.
For each session, show:
Time
Session title
Speaker
Room
🧠 Try using grid-template-columns to organize into columns like: Time | Title | Speaker | Room.

👥 3. Speakers Section
Use Flexbox to align speaker profiles in a row or wrap them.
Each profile includes:
Image
Name
Short bio or topic

⭐ Bonus Ideas:
➤Flexbox: Use flex-wrap and justify-content
➤Grid: Use auto-fit, minmax(), or media queries
➤Style with bold backgrounds or gradients
➤Use gap, margin, padding, and border to create clean spaces
💬 Final Words
🧪 Test your creativity! Use as many tags, layout techniques, and styles as you can — even the ones we didn’t mention!
💾 Save your work,
📤 Share it in the group,
👫 Invite your friends, and
🌞 ✌️Stay awesome & stay well! 💻💖

🧑‍💻 Week 2 Day 5 – Responsive Web Design in CSS

👋👋 Heyyy Campers. Today we will make our webs compatible and attractive in any devices. Let's go.

🌐 What is Responsive Design?

Responsive design is an approach to web design that makes your websites adapt to different screen sizes—whether it’s a big desktop monitor or a small mobile phone.

The goal is:
👉 Look good 💅
👉 Work well ⚙️
👉 Stay readable and usable 📖

🔧 Why is it important?

📱 80%+ of users browse using phones!
🖥️ Your site must work on all screen sizes.
🧼 It improves user experience, accessibility, and SEO.

🧰 Core Techniques in Responsive Design
We use the following tools:
✅ Flexible Layouts (percent, em, vw, etc.)
✅ Media Queries
✅ Responsive Images
✅ Flexible Text
✅ Mobile-first approach
1️⃣ Flexible Layouts – Not Fixed Sizes

❌ Don’t do this:
.container { width: 1200px; }
This forces the layout to stay wide even on small screens. Bad idea 😩.

✅ Do this instead:
.container { width: 90%; max-width: 1200px; }

90% makes it flexible.
max-width keeps it from stretching too wide on big screens.

2️⃣ Media Queries – the Magic Wand 🪄

A media query lets you apply CSS only when certain conditions are true, like screen width.

🧱 Basic Syntax:
@media (condition) { /* styles */ }

🧪 Example: Small screens

@media (max-width: 768px) {
   .menu {
       display: block;
       text-align: center; } }

📌 That means:
If the screen width is 768px or smaller, apply those styles.

🔁 Example: Change layout on screen size

.container {
       display: flex;
       gap: 20px; }
.box {
      flex: 1; } /* On small screens, stack them */
@media (max-width: 600px) {
.container {
       flex-direction: column; } }

📏 Common Breakpoints (you can change as needed):

➤➤ Large desktops
@media (min-width: 1200px) {}

➤➤ Desktops
@media (min-width: 992px) and
(max-width: 1199px) {}

➤➤ Tablets
@media (min-width: 768px) and (max-width: 991px) {}

➤➤/Phones
@media (max-width: 767px) {}

3️⃣ Responsive Images 📸
Images should resize automatically to fit the screen.

img {
      max-width: 100%;
      height: auto; }

🔍 max-width: 100% = image won’t overflow its container
🔍 height: auto = keep proportions

4️⃣ Responsive Units 📐

Avoid fixed units like px. Use:
🧪 Example:
h1 { font-size: 3vw; }
⏳ Text will grow/shrink with screen size.

5️⃣ Responsive Typography ✍️
Make your text adjust well. Example:

html { font-size: 16px; }
@media (max-width: 768px) {
     html { font-size: 14px; } }
@media (max-width: 500px) {
      html { font-size: 12px; } }

💡 Bonus: Mobile First Approach
Start by styling for mobile devices first, then add styles for larger screens using min-width.

➤➤ Mobile first

.card {
     width: 100%; }

➤➤Tablets and up

@media (min-width: 768px) {
   .card {
        width: 50%; } }

🧪 FULL WORKING EXAMPLE

<style>
.container {
     width: 90%;
     max-width: 1200px;
     margin: auto;
    display: flex;
    gap: 20px;
    flex-wrap: wrap; }
.card {
    flex: 1 1 300px;
    background: #f2f2f2;
    padding: 20px;
    border-radius: 10px; }
img {
     max-width: 100%;
     height: auto; }
/* Media Query for small screens */
@media (max-width: 600px) {
   .container {
        flex-direction: column; }
   .card {
        font-size: 14px; } }
</style>


<div class="container">
      <div class="card">
           <h2>Course 1</h2>
           <img src="course1.jpg" alt="Course 1">
          <p>Learn HTML from scratch.</p>
    </div>
    <div class="card">
         <h2>Course 2</h2>
         <img src="course2.jpg" alt="Course 2">
         <p>Master CSS step by step.</p>
    </div>
</div>


🔥 Recap
✅ Use %, em, vw, vh instead of px
✅ Images: max-width: 100%; height: auto;
✅ Media Queries: change layout/styles per screen
✅ Mobile First: write mobile styles first, then add for bigger
✅ Flexbox/Grid + media queries = powerful layout control

Assignment:
➤responsive design
https://youtu.be/n9yI6fjkrfE?si=Hp22QoZYc0NfqFgX

🎯 Week 2 Day 5 Challenges: Responsive Design
🔖 Challenge Title:
🌍📱 "Design a Travel Blog Homepage – Fully Responsive!"

💡 Challenge Description:
Create a responsive homepage for a travel blog called "WanderWorld 🌎" or something your own.. This blog shares travel stories, places to visit, and trip tips. Your goal is to make it look beautiful on all screen sizes — mobile, tablet, and desktop — using only responsive design techniques!

🏗️ Your Page Should Have:
🧭 1. Header

➝The blog title: "WanderWorld 🌍"
➝A tagline like: "Travel Far. Live Fully."
➝Add a navigation bar with 3 links:    Home | Destinations | Contact
➝Make the navbar turn into a mobile-friendly menu on smaller screens.

📸 2. Featured Destination Section
➤Add a large, beautiful travel image
On top of it, overlay a heading and a short caption
➤Use background-image, ➤background-size: cover, and position: relative with responsive text.

✍️ 3. Blog Snippets Section
➝Display 2 or 3 blog post previews, each with:
➝Thumbnail image (responsive)
Post title
➝1–2 sentence summary
➝“Read more” link or button
✅ On desktop: place them side by side
📱 On mobile: stack them vertically
🎯 Use media queries and %, vw, em, rem, etc.

👩‍💻 4. About the Blogger
Small image + short paragraph about the blog author
Make sure this layout adjusts nicely to all screens

📞 5. Footer
➝Include contact links: email, Instagram, Twitter
➝Use centered text and spacing that adjusts with screen

✨ What You MUST Use:
➤Responsive units: vw, vh, %, em, rem
➤Media Queries: at least for max-width: 768px and max-width: 480px
➤Responsive images with max-width: 100% and height: auto
➤object-fit where needed
➤Typography that scales nicely
➤Optional: Google Fonts for design flair

🧠 Tips:
Think mobile-first!
Test on different screen sizes
Keep improving your layout based on how it looks
🌟 Bonus:
Add a “Subscribe to Newsletter” section that adjusts well on small and large screens.

📤 After you finish:
Share your work in the group 💌
Invite a friend to join the journey 🚶‍♂️🚶‍♀️ ✌️Stay curious, stay well! 😊

          🎉 Hello Campers! 👋

Welcome to your Week 2 Day 6 CSS Lesson — our last day in the CSS basics journey! 💻

Today we’ll cover some ✨ magic-like features ✨ that will make your websites come alive — like hover animations, icon styles, image control, and even how to use YouTube or LinkedIn icons on your pages! 😍🎥💼

🧠 What We’ll Learn Today:
🔹 Transitions & Animations
🔹 Transformations
🔹 Object-Fit
🔹 Overflow
🔹 Shadows
🔹 Icons (Font Awesome, Emojis, YouTube, LinkedIn...)

🎬 1. CSS Transitions (Make things move smoothly!)

Transitions let you animate changes like color or size when you hover or click. This allows smooth changes from one state to another.
🧪 Syntax:
selector { transition: property duration ease; }
✅ Example:

<style>
.button {
     background: blue;
     color: white;
     padding: 10px;
     transition: background 0.4s ease; }
.button:hover {
      background: darkblue; }
</style>

<button class="button">Hover Me 🎯</button>

➝Note: you can use all if you want all.properties to transition.

transition : all 0.3s ease;

🌀 2. CSS Animations (Make things move even without hover)
➤Animation gives you more control over movement or effects that repeat or run on load.

With @keyframes, you can animate elements over time, even looping!

✅ Example:

<style>
@keyframes bounce {
     0% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
    100% { transform: translateY(0); } }
      .bouncer {
          width: 100px;
          height: 100px;
          background: tomato;
          animation: bounce 1s infinite; }
</style>

<div class="bouncer"></div>

🧾 Use this to make bouncing buttons, loading dots, etc.

🔁 3. Transformations
Use to move, rotate, scale, or skew an element!

✅ Common Examples:

/*Move*/
.move { transform: translateX(100px); }
/*Rotate*/
.rotate { transform: rotate(360deg); }
/*Scale*/
.scale { transform: scale(1.5); }
/*Skew*/
.skew { transform: skew(20deg); }


Example with hover:

<style>
.card:hover {
     transform: scale(1.2) rotate(5deg);
     transition: transform 0.3s ease-in-out; }
</style>

🖼️ 4. Object-Fit (Control how images appear in boxes)

Use object-fit when an image or video doesn’t fit nicely. It is often used with width and height.

✅ Example:

<img src="https://via.placeholder.com/400x300"
style="width: 200px; height: 150px; object-fit: cover;">

🔹 Values:
➺cover – fills, may crop
➺contain – fits, no crop
➺fill – stretches
➺none – no resize
➺scale-down – uses the smallest between none or contain

🌊 5. Overflow (Handle content that doesn't fit)
Use when text or content gets too big for the box.

✅ Example

<style>
.box {
     width: 200px;
     height: 100px;
     overflow: auto;
     border: 1px solid black; }
</style>

<div class="box"> This is a long content. It will scroll if it's too much... </div>

🔸 Values:
➺visible (default)--content spills out
➺hidden--extra content is clipped
➺scroll-- scrollbar always shows
➺auto-- scrollbar only if needed

🌫️ 6. Shadow Effects

➤ Box Shadows:
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);

✅ Example

<style>
.box {
     width: 200px;
     height: 100px;
     background: white;
     box-shadow: 2px 2px 8px rgba(0,0,0,0.2); }
</style>

<div class="box">I'm popping out! 🎈</div>

➤ Text Shadows:

text-shadow: 1px 1px 4px gray;

🧩 7. Adding Icons to Your Website

✅ Option 1: Emojis (Fastest & simplest)
Just adding them like text.

<p>📞 Call Us | 💌 Message | 📚 Courses</p>

✅ Option 2: Font Awesome Icons

🌟 Font Awesome gives you professional-looking icons like:
🔴 YouTube
🔵 LinkedIn
🖥️ Desktop
📧 Email

💡 How to Use Font Awesome:

Add this in your<head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

Use icons like this:

<i class="fa-brands fa-youtube"></i> Youtube
<i class="fa-brands fa-linkedin"></i>  LinkedIn
<i class="fa-solid fa-envelope"></i> Email
<i class="fa-solid fa-phone"></i>  Call

Style them with CSS:

i {
      font-size: 24px; color: #ff0000;
      margin-right: 10px; }

✅ Example

<i class="fa-brands fa-youtube" style="color: red;"></i>
<i class="fa-brands fa-linkedin" style="color: #0A6
6C2;"></i>

🧠Summary
Today , we learned:
1. Transition – Smooth hover/click changes
2. Animation – Moving objects/loops
3. Transform – Move, scale, rotate things
4. Object-Fit – Fix image shapes
5. Overflow – Scroll or hide extra content
6. Shadow – Make items "pop"
7. Icons – Add fun or brand images! 😍

Campers! 🎒 You’ve now learned all the ✨ visual power tools ✨ of CSS! You can make your websites look fun, interactive, and modern now! 🎨
Don't forget Practicing. As they say "Perfect practice makes perfect"😁

Assignment :
➤animation
https://youtu.be/u_GIT5MJAtc?si=2tydc0tyCfGBiCot
➤Transformation
https://youtu.be/qdeIy9_fbxE?si=pfyXw9BHtnBKhg7L
➤Icons
https://youtu.be/k3AJx11k9QY?si=4MDNStmpo4jNSQz0
➤Overflow
https://youtu.be/d7cH8geV2dY?si=mb4omvMeVgF1XcSS
➤Shadows
https://youtu.be/Yqs_61ub1Ng?si=Tf5Z5wTv_yyddFk0

🎯 Today's Challenge!

Hey hey team! 👋
Before we wrap up CSS week and jump into the wild world of JavaScript 💻⚡ — let’s polish our past works and turn them into stunning, interactive pages!

🧠 Challenge:
Go back to ALL the HTML files we created so far (cover page, scholarship form, course page, etc.) and apply everything we’ve learned in CSS:

✅ Use:

➤Flexbox or Grid layouts

➤Transitions & animations

➤Shadows and transformations

➤Object-fit for images

➤Stylish icons (Font Awesome or emojis)

➤Hover effects and responsive layouts


🎨 Decorate and transform your work into a masterpiece! 💖
Then share your styled pages, invite a friend to join the camp, and as always…

✌️ Stay well and keep coding! 💻✨

👋 Hey Campers!

💪 Welcome to Week 2: Challenge Time!

You’ve been working hard, learning all the major CSS tools — now it's time to build real websites from scratch and show what you’ve learned! ✨
Each of these challenges is like a mini-job you'd be given by a real client or boss. Do your best, be creative, and most importantly — have fun! 🎨

💪 Challenge 1: Fitness Trainer Website

🎯 Your Mission:
Design a simple but energetic Fitness Trainer Website that helps people know more about the trainer, available classes, and book sessions.
💼 Include These:
✅ Home section with a welcome message + trainer photo
✅ About section (trainer bio, years of experience, certifications)
✅ Class Schedule (you can use a simple table or a flex/grid layout)
✅ Gallery of workout images (use object-fit)
✅ Icons for services (dumbbells, yoga, diet)
✅ Contact form (for booking sessions)
✅ Responsive layout that works on mobile!
🎁 Bonus: Add hover effects, transitions on buttons, or simple entrance animations!

👗 Challenge 2: Fashion Brand Landing Page

🎯 Your Mission:
Design a beautiful, stylish Landing Page for a Fashion Brand. This is a marketing-focused page to promote the newest collection.

💼 Include These:
✅ Hero section with a stylish background + slogan like “Style that speaks”
✅ Featured products section (use flex or grid to display clothes or accessories)
✅ "Shop Now" button with transition hover effect
✅ Gallery of images with hover zoom effect (transform: scale())
✅ Testimonials from customers
✅ Footer with social media icons (LinkedIn, Instagram, YouTube)
✅ Mobile responsive version for phones!
🎁 Bonus: Add animations like fade-ins for product cards or an animated title.

💼 Challenge 3: Job Listing Website

🎯 Your Mission:
Build a functional-looking Job Listing Website (like EthioJobs or Glassdoor) where users can view and apply to open jobs.

💼 Include These:
✅ Navigation bar with links: Home, Jobs, About, Contact
✅ Job Cards (use flex or grid) showing:
Job Title
Company Name
Short Description
Apply Now button
✅ Filter section for categories (e.g., Tech, Education, NGO)
✅ Job detail page (optional): Show full job description
✅ Apply form with name, email, CV upload (just input, no backend)
✅ Icons for job categories
✅ Sticky navbar or filter
✅ Responsive layout for mobile
🎁 Bonus: Add animations when hovering on job cards!

📢 Don’t Forget to:
👉 Share your amazing work!
👉 Invite others who want to join the code journey!
👉✌️ And always stay warm, strong, and well! 💪🔥