Endi mavjud! Telegram Tadqiqoti 2025 — yilning asosiy insaytlari 
Full Stack Camp
Kanalga Telegram’da o‘tish
Fullstack Camp | Learn. Build. Launch. Join us for a hands-on journey through HTML, CSS, JavaScript, React, Node.js, Express & MongoDB — all in one place. Use this bot to search for lessons. @FullstackCamp_assistant_bot DM: @Tarikey6
Ko'proq ko'rsatishMamlakat belgilanmaganToif belgilanmagan
221
Obunachilar
Ma'lumot yo'q24 soatlar
-27 kunlar
-330 kunlar
Postlar arxiv
🎯 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! 💻✨
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
🧩 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> CallStyle 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"😁
🎉 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;
🎯 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! 😊
🧑💻 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; } } .container {
display: flex;
gap: 20px; }
.box {
flex: 1; } /* On small screens, stack them */
@media (max-width: 600px) {
.container {
flex-direction: column; } } 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; } 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; } } 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💪 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! 💻💖
Assignment
➤flexbox
https://youtu.be/GteJWhCikCk?si=yaFF8FOp9nDlgGyn
➤Grid layout
https://youtu.be/eHaZlFcGl6k?si=BEFCy3JDqiMm14yZ
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; }.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; } .container {
display: grid;
grid-template-columns: repeat(3, 1fr); } .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; } .container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } <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>📚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;
} .container {
display: flex;
flex-direction: row;
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse; }
📦 Example
.container {
display: flex;
flex-direction: column; } .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; } .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; } 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🔥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!
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
🔸 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).
📚 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); }
🎨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
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: 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; } input:focus {
border-color: blue; }
➡️ :first-child → First element inside parent.
ul li:first-child {
color: red; } p:nth-child(2) {
font-weight: bold; } p::before {
content: "👉 "; }
➡️ ::after
p::after {
content: " ✅"; } p::first-letter {
font-size: 30px; } div p {
color: green; }
➡️ > (Child Selector)
div > p {
color: blue; } h1 + p {
color: orange; } h1 ~ p {
color: purple; } span {
display: block; } div {
width: 200px;
padding: 20px;
box-sizing: border-box; }
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💪 Week 2 Day 1 Challenges: Css
Today’s task isn’t about writing a new HTML page —
Instead, we’ll go back to all the HTML files we already created (restaurant page, bookstore, scholarship form, cover page...) and add CSS styles using what we learned so far!
✅ What to do:
1️⃣ Open all your old HTML pages.
2️⃣ Apply as many CSS styles as possible:
➺Colors
➺Font sizes
➺Borders
➺Backgrounds
➺Padding and margins
➺Div layout and positioning
➺Media elements (images/videos) styling
3️⃣ Use external or internal CSS (not inline only!).
4️⃣ Make them clean, readable, and stylish.
✅ Reminder:
Use all methods we learned — even the selectors like:
div p {} or ul li {} or classes and IDs.
🔥 When You Finish:
➤ Share screenshots or code samples in the group.
➤ Invite your friends to join and learn with us.
➤ ✌️Stay well and keep practicing!
#Week2 #Day1 #Css #introductionCss #challenge
Assignment:
Adding css➤
https://youtu.be/uzF1Doc3cZQ?si=wpeZYkJgrjEoiLMI
Fonts
➤https://youtu.be/MnyCbILmtOY?si=SJc39ucr29EYGwyr
Colors
➤https://youtu.be/LwbKb2J8iy8?si=dS_qmuBZF5Y7i596
Borders
➤https://youtu.be/pkNdQ7TmxIw?si=EyfEaWAV8fiqW_5d
Margin
➤https://youtu.be/rBWA_t-KnKk?si=0v65S6nUwXrmhF6V
Display
➤https://youtu.be/9T8uxp5hQ60?si=bXQ_P7Z55Yodre9Y
#Week2 #Day1 #Css #introductionCss #resources
