Full Stack Camp

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; }

🔹 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>

📚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

🔥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; }

➡️ :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

💪 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

🎨 Week 2 Day 1: Introduction to CSS (Cascading Style Sheets) 💡 Topic: What is CSS? Why It Matters, How It Works. 🎯 Goal: ➡️Understand the basics of CSS, ➡️how to apply styles to HTML, ➡️ and try your first styles. 🌍 Welcome Back to Fullstack Summer Camp! You survived HTML week — now let’s make those plain web pages look awesome using CSS! Imagine HTML as building a house: walls, rooms, and windows. CSS is painting, decorating, adding curtains, choosing colors, shapes, and sizes. ✅ 1️⃣ What is CSS? CSS stands for Cascading Style Sheets. It’s a language that tells the browser how things should look on a web page. > HTML = Structure > CSS = Style / Design Example: <p>This is a paragraph.</p> Without CSS → Looks plain. With CSS → You can change: ➤Color ➤Font ➤Size ➤Spacing ➤Borders ➤Background ✅ 2️⃣ How to Add CSS to HTML There are 3 main ways: a) Inline CSS (inside an HTML tag)

<p style="color: red;">Hello!</p>

👉 Used for very small, one-time changes. Not recommended for full websites. b) Internal CSS (inside <style> in the HTML file)

<!DOCTYPE html> <html> <head>        <style>            p {                    color: blue;                    font-size: 20px; } </style> </head> <body>         <p>This is blue text!</p> </body> </html>

👉 Good for small projects. Easy for practice. c) External CSS (linked as a separate file) HTML file:

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

style.css file:

p {         color: green; }

👉 Best practice for real websites. Keeps things organized! ✅ 3️⃣ CSS Selectors: How CSS Targets HTML Basic Rule Format: selector {         property: value; } Selector → Which element (like p, h1, or a class) Property → What to change (like color, size) Value → How you want it (red, 20px) We can:   ➤select by type/element: P, h1, h3, img , span ....

p {    color: blue;}

➤select by class   We use " . "before the name of the class.    Html➺

<p class="highlight">Don't forget this</p>

   css➺

  .highlight {       background-color:yellow;}

➤select by ID   We use "#" before ID name   Html➺

    <button id="main">click</button>

   css➺  

  #main {    background-color: green;}

➤you can also target elements that are inside (nested)   ➺Html 

<div>   <h2>Menu Today</h2>   <p>We have coffee and tea.</p> </div> <h2>Thank You</h2>

    ➺Css

div h2 {          color: orange; }

✅ 4️⃣ Common Properties with Examples 1. Color

h1 { color: purple; }

2. Background Color

body {     background-color: lightgray; }

3. Font Size

p {      font-size: 18px; }

4. Font Family

p {     font-family: Arial, sans-serif; }

5. Text Align

h2 {      text-align: center; }

6. Width and Height

div {     width: 300px;      height: 150px;      background-color: yellow; }

7. Border

p {      border: 2px solid black; }

8. Padding (space inside element) and Margin(space outside element)

div {      padding: 20px;       margin: 30px; }

9. border-radius: Rounds corners

img {      border-radius: 10px; }

10. box-shadow: Adds shadow around boxes

div {      box-shadow: 2px 2px 8px gray; }

11. opacity: Makes things transparent

img {      opacity: 0.8; }

12. cursor: Changes mouse cursor

button {     cursor: pointer; }

13. text-decoration: (underline)

a {      text-decoration: none; }

14. display: Controls layout

div {    display : block; } span {      display: inline; }

15.position: Controls exact placement

div {     position: absolute;     top: 10px;     left: 20px; }

✅ 5️⃣ Combining Multiple Properties

p {     color: white;     background-color: black;     font-size: 20px;     text-align: justify; }

✅ 6️⃣ Real Life Analogy Think of CSS as designing your injera restaurant menu: The structure is the menu paper (HTML) The font color, layout, and sizes are CSS. When someone looks at it, they notice the style first! ✅ 7⃣ Summary ✔️ CSS = Design and Style ✔️ 3 Ways to add CSS (Inline, Internal, External) ✔️ Use selectors + properties ✔️ Common styles: color, background, font-size, width, border #Week2 #Day1 #Css #introductionCss #lesson