From ea8d3319dd1eadf30a08796e85aec10d5a5e5cec Mon Sep 17 00:00:00 2001 From: anouar mellouk Date: Thu, 5 Feb 2026 19:21:51 +0100 Subject: [PATCH 01/47] Add JavaScript basics lessons and README --- .../01-javascript-fundamentals/01-basics.js | 49 ++++++++ .../02-controle-statements.js | 67 +++++++++++ .../03-functions.js | 31 +++++ .../01-javascript-fundamentals/README.md | 113 ++++++++++++++++++ 4 files changed, 260 insertions(+) create mode 100644 web/01-fundamentals/sessions/01-javascript-fundamentals/01-basics.js create mode 100644 web/01-fundamentals/sessions/01-javascript-fundamentals/02-controle-statements.js create mode 100644 web/01-fundamentals/sessions/01-javascript-fundamentals/03-functions.js create mode 100644 web/01-fundamentals/sessions/01-javascript-fundamentals/README.md diff --git a/web/01-fundamentals/sessions/01-javascript-fundamentals/01-basics.js b/web/01-fundamentals/sessions/01-javascript-fundamentals/01-basics.js new file mode 100644 index 0000000..01ca506 --- /dev/null +++ b/web/01-fundamentals/sessions/01-javascript-fundamentals/01-basics.js @@ -0,0 +1,49 @@ +var name; +let name2; +let var1 = false; +const name3 = "ali"; +var1 = true; +name = "anouar"; +name = "ahmed "; + +console.log("helo mc"); // print hello mc +console.log(`helo mc`); // print hello mc + +console.log("hello " + name); // hello anouar +console.log(`hello ${name}`); // hello anouar + +// this is single line comment +/* +this is +multi +line +comment +*/ + +// Arithmetic operators +let number1 = 12; +let number2 = 5; +console.log(number1 + number2); // 17 +console.log(number1 - number2); //7 +console.log(number1 * number2); // 60 +console.log(number1 / number2); // 2.4 + +// logical operators +let var2 = true; +let var3 = false; +let var4 = true; +console.log(var2 && var3); +console.log(var2 || var3); +console.log(!var2); + +//comparison operator ( < , > , == , <= , >= , != , === , !==) +console.log(5 <= 6); // print false +console.log(5 >= 6); // print true +console.log(5 == 6); // print true +console.log(6 != 6); // print false + +console.log("6" >= 6); // print true + +console.log("6" === 6); // print false +console.log("5" === 6); // print flase +console.log("6" !== 6); // print true diff --git a/web/01-fundamentals/sessions/01-javascript-fundamentals/02-controle-statements.js b/web/01-fundamentals/sessions/01-javascript-fundamentals/02-controle-statements.js new file mode 100644 index 0000000..f91165a --- /dev/null +++ b/web/01-fundamentals/sessions/01-javascript-fundamentals/02-controle-statements.js @@ -0,0 +1,67 @@ +// conditional statement (if..else , switch) + +// if +let age = 18; + +if (age >= 18) { + console.log("You can drive"); +} + +// if..else +const hour = 5; +if (hour < 18) { + console.log("Good day"); +} else { + console.log("Good evening"); +} + +// if..else if..else +if (time < 10) { + greeting = "Good morning"; +} else if (time < 20) { + greeting = "Good day"; +} else { + greeting = "Good evening"; +} + +// switch +const today = 4; +switch (today) { + case 0: + day = "Sunday"; + break; + case 1: + day = "Monday"; + break; + case 2: + day = "Tuesday"; + break; + case 3: + day = "Wednesday"; + break; + case 4: + day = "Thursday"; + break; + case 5: + day = "Friday"; + break; + case 6: + day = "Saturday"; +} + +// iterative statements (loops) (for , while ,do..while) +for (let i = 0; i < 10; i++) { + console.log("hello mc"); +} + +let j = 0; +while (j < 10) { + console.log("hello mc"); + j++; +} + +let k = 0; +do { + console.log("hello mc"); + k++; +} while (k < 10); diff --git a/web/01-fundamentals/sessions/01-javascript-fundamentals/03-functions.js b/web/01-fundamentals/sessions/01-javascript-fundamentals/03-functions.js new file mode 100644 index 0000000..5f48cf6 --- /dev/null +++ b/web/01-fundamentals/sessions/01-javascript-fundamentals/03-functions.js @@ -0,0 +1,31 @@ +function sayHello() { + console.log("hello mc "); +} +sayHello(); + +function sayHelloWithParametar(name, age) { + console.log("hello " + name); + console.log("age " + age); +} +sayHelloWithParametar("ahmed", 23); + +const sayHello2 = () => { + console.log("hello "); +}; +const sayHello3 = function () { + console.log("hello "); +}; +sayHello2(); +sayHello3(); + +function sum(number1, number2) { + return number1 + number2; +} +let sum2 = sum(3, 5); +console.log(sum2); + +function add2(a, b) { + console.log("HI"); + return a + b; +} +console.log(add2(3, 4)); diff --git a/web/01-fundamentals/sessions/01-javascript-fundamentals/README.md b/web/01-fundamentals/sessions/01-javascript-fundamentals/README.md new file mode 100644 index 0000000..296999e --- /dev/null +++ b/web/01-fundamentals/sessions/01-javascript-fundamentals/README.md @@ -0,0 +1,113 @@ +# JavaScript Basics + +JavaScript is a programming language used to add logic and behavior to websites. +This document covers the **fundamental concepts of JavaScript**, focusing on logic and the language itself, without interacting with HTML or the browser. + +--- + +## ๐ŸŽฏ Learning Objectives + +By the end of this section, learners will be able to: + +- Understand the role of JavaScript in web development +- Write basic JavaScript programs +- Use variables, conditions, loops, and functions + +--- + +## ๐Ÿ“Œ JavaScript Fundamentals + +### 1. Variables + +Variables are used to store data. + +- `var` (old, avoid) +- `let` (mutable) +- `const` (immutable) + +```js +let age = 20; +const country = "Algeria"; +``` + +### 2. Data Types + +JavaScript supports different types of data: + +- Number +- String +- Boolean +- Undefined +- Null +- Object +- Array + +```js +let name = "Anouar"; +let isStudent = true; +let score = 15; +``` + +### 3. Operators + +**Arithmetic Operators** + +- - - - / % + +**Comparison Operators** + +- == === +- != !== +- > < >= <= + +**Logical Operators** + +- && || ! + +### 4. Conditions + +Conditions allow decision-making in code. + +- if +- else if +- else +- switch + +```js +if (age >= 18) { + console.log("Adult"); +} else { + console.log("Minor"); +} +``` + +### 5. Loops + +Loops are used to repeat code. + +- for +- while +- do...while + +```js +for (let i = 0; i < 5; i++) { + console.log(i); +} +``` + +### 6. functions + +Functions allow code reuse. + +- Function declaration +- Parameters +- Return values +- Arrow functions + +```js +function add(a, b) { + return a + b; +} + +const multiply = (a, b) => a * b; +``` From 4742d374974e8e6893c9a6c27a541a42b0001e97 Mon Sep 17 00:00:00 2001 From: AnouarMellouk-Engineer Date: Thu, 5 Feb 2026 19:25:51 +0100 Subject: [PATCH 02/47] Update README.md --- .../sessions/01-javascript-fundamentals/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/web/01-fundamentals/sessions/01-javascript-fundamentals/README.md b/web/01-fundamentals/sessions/01-javascript-fundamentals/README.md index 296999e..62edfdc 100644 --- a/web/01-fundamentals/sessions/01-javascript-fundamentals/README.md +++ b/web/01-fundamentals/sessions/01-javascript-fundamentals/README.md @@ -52,17 +52,17 @@ let score = 15; **Arithmetic Operators** -- - - - / % +- `+ - / % *` **Comparison Operators** -- == === -- != !== -- > < >= <= +- `== ===` +- `!= !==` +- `> < >= <=` **Logical Operators** -- && || ! +- `&& || !` ### 4. Conditions From f868cbcfadf7c8aa3c9c3dd9eca968e1ba65462a Mon Sep 17 00:00:00 2001 From: anouar mellouk Date: Thu, 5 Feb 2026 20:59:59 +0100 Subject: [PATCH 03/47] Add HTML and CSS fundamentals README --- web/01-fundamentals/sessions/html&css/css.md | 796 ++++++++++++++++++ web/01-fundamentals/sessions/html&css/html.md | 527 ++++++++++++ 2 files changed, 1323 insertions(+) create mode 100644 web/01-fundamentals/sessions/html&css/css.md create mode 100644 web/01-fundamentals/sessions/html&css/html.md diff --git a/web/01-fundamentals/sessions/html&css/css.md b/web/01-fundamentals/sessions/html&css/css.md new file mode 100644 index 0000000..cfdabb5 --- /dev/null +++ b/web/01-fundamentals/sessions/html&css/css.md @@ -0,0 +1,796 @@ +# ๐ŸŽจ CSS: Bringing Your Web Pages to Life + +### *From Plain Text to Stunning Designs* + +--- + +## ๐ŸŽฏ What You'll Master + +By the end of this section, you'll know how to: +- Transform plain HTML into beautiful designs +- Control colors, fonts, spacing, and layouts +- Create responsive designs that work on all devices +- Use modern layout techniques like Flexbox +- Apply professional styling principles + +--- + +## ๐ŸŽจ Understanding CSS: Your Digital Paintbrush + +### CSS is Like Interior Design + +Just like decorating a house, CSS lets you: +- ๐ŸŽจ **Choose colors** for walls (backgrounds) and furniture (text) +- ๐Ÿ“ **Arrange furniture** (layout and positioning) +- ๐Ÿ’ก **Control lighting** (shadows and effects) +- ๐Ÿ–ผ๏ธ **Add decorations** (borders, animations, gradients) +- ๐Ÿ“ฑ **Make it work for different rooms** (responsive design) + +--- + +## ๐Ÿ”— Chapter 1: Connecting CSS to HTML + +### Three Ways to Add CSS + +#### 1. **Inline Styles** (Quick & Dirty) +```html +

This text is red and large

+``` +**When to use:** Quick tests, one-off styling +**Downside:** Hard to maintain, not reusable + +#### 2. **Internal Styles** (Page-Specific) +```html + + + +``` +**When to use:** Styles specific to one page +**Downside:** Can't share across multiple pages + +#### 3. **External Stylesheets** (Best Practice โญ) +```html + + + + +``` + +```css +/* In your styles.css file */ +p { + color: green; + font-size: 16px; +} +``` +**When to use:** Almost always! +**Benefits:** Reusable, maintainable, organized + +--- + +## ๐ŸŽฏ Chapter 2: CSS Selectors - Targeting Elements + +### Basic Selectors + +```mermaid +graph TD + A[CSS Selectors] --> B[Element Selector: p] + A --> C[Class Selector: .highlight] + A --> D[ID Selector: #header] + B --> E[Targets all paragraphs] + C --> F[Targets class='highlight'] + D --> G[Targets id='header'] +``` + +#### 1. **Element Selector** - Style all elements of a type +```css +/* All paragraphs will be blue */ +p { + color: blue; +} + +/* All headings will be large and bold */ +h1 { + font-size: 2.5rem; + font-weight: bold; +} +``` + +#### 2. **Class Selector** - Style elements with a specific class +```html + +

This paragraph is special

+

This is a normal paragraph

+
This div is also special
+``` + +```css +/* CSS - Targets anything with class="highlight" */ +.highlight { + background-color: yellow; + padding: 10px; +} +``` + +#### 3. **ID Selector** - Style one unique element +```html + + +``` + +```css +/* CSS - Targets the element with id="header" */ +#header { + background-color: navy; + color: white; + text-align: center; +} +``` + +### Advanced Selectors + +```css +/* Multiple elements */ +h1, h2, h3 { + color: #333; + font-family: Arial, sans-serif; +} + +/* Descendant selector - span inside a paragraph */ +p span { + font-weight: bold; +} + +/* Child selector - direct children only */ +ul > li { + list-style-type: square; +} + +/* Pseudo-selectors */ +a:hover { + color: red; +} + +button:active { + background-color: #ccc; +} + +input:focus { + border-color: blue; +} +``` + +--- + +## ๐Ÿ“ฆ Chapter 3: The Box Model - Understanding Layout + +### Every Element is a Box + +```mermaid +graph TB + A[Element Box] --> B[Margin - Outside Space] + B --> C[Border - Box Outline] + C --> D[Padding - Inside Space] + D --> E[Content - Text/Images] +``` + +```css +.box-example { + /* Content area */ + width: 300px; + height: 200px; + + /* Padding - space inside the box */ + padding: 20px; + + /* Border - the box outline */ + border: 2px solid #333; + + /* Margin - space outside the box */ + margin: 15px; + + /* Background color */ + background-color: lightblue; +} +``` + +### Box Model in Action + +```html +
Content goes here
+``` + +```css +.box-demo { + width: 200px; /* Content width */ + height: 100px; /* Content height */ + padding: 20px; /* Space inside */ + border: 5px solid red; /* Border around */ + margin: 10px; /* Space outside */ + background: yellow; +} + +/* Total width = 200 + 20 + 20 + 5 + 5 + 10 + 10 = 270px */ +``` + +### Box-Sizing: A Better Way + +```css +/* Traditional box model */ +.old-way { + width: 200px; + padding: 20px; + border: 5px solid black; + /* Total width = 200 + 20 + 20 + 5 + 5 = 250px */ +} + +/* Modern box model */ +.new-way { + box-sizing: border-box; + width: 200px; + padding: 20px; + border: 5px solid black; + /* Total width = exactly 200px */ +} + +/* Apply to everything (recommended) */ +* { + box-sizing: border-box; +} +``` + +--- + +## ๐ŸŒˆ Chapter 4: Colors and Typography + +### Working with Colors + +#### Color Formats + +```css +.color-examples { + /* Named colors */ + color: red; + background-color: lightblue; + + /* Hex colors */ + color: #ff0000; /* Red */ + background: #3498db; /* Blue */ + + /* RGB colors */ + color: rgb(255, 0, 0); /* Red */ + background: rgb(52, 152, 219); /* Blue */ + + /* RGBA (with transparency) */ + background: rgba(52, 152, 219, 0.5); /* 50% transparent blue */ + + /* HSL (Hue, Saturation, Lightness) */ + color: hsl(0, 100%, 50%); /* Red */ + background: hsl(204, 70%, 53%); /* Blue */ +} +``` + +#### Beautiful Color Combinations + +```css +/* Professional blue theme */ +.blue-theme { + --primary: #3498db; + --secondary: #2c3e50; + --accent: #e74c3c; + --light: #ecf0f1; + --dark: #34495e; +} + +/* Warm sunset theme */ +.sunset-theme { + --primary: #ff6b6b; + --secondary: #feca57; + --accent: #48dbfb; + --light: #f8f9fa; + --dark: #2f3542; +} +``` + +### Typography: Making Text Beautiful + +#### Font Fundamentals + +```css +.typography-examples { + /* Font family (with fallbacks) */ + font-family: 'Roboto', Arial, sans-serif; + + /* Font size */ + font-size: 18px; /* Pixels */ + font-size: 1.2rem; /* Relative to root */ + font-size: 120%; /* Relative to parent */ + + /* Font weight */ + font-weight: normal; /* 400 */ + font-weight: bold; /* 700 */ + font-weight: 300; /* Light */ + + /* Font style */ + font-style: normal; + font-style: italic; + + /* Text alignment */ + text-align: left; + text-align: center; + text-align: right; + text-align: justify; + + /* Line height (spacing between lines) */ + line-height: 1.5; /* 1.5 times font size */ + + /* Letter spacing */ + letter-spacing: 1px; + + /* Text decoration */ + text-decoration: none; /* Remove underlines */ + text-decoration: underline; +} +``` + +#### Professional Typography Scale + +```css +/* Establish a type scale */ +h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; } +h2 { font-size: 2rem; font-weight: 600; line-height: 1.3; } +h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.4; } +h4 { font-size: 1.25rem; font-weight: 500; line-height: 1.4; } +p { font-size: 1rem; font-weight: 400; line-height: 1.6; } + +/* Consistent spacing */ +h1, h2, h3, h4 { margin-bottom: 0.5rem; } +p { margin-bottom: 1rem; } +``` + +#### Google Fonts Integration + +```html + + +``` + +```css +/* In your CSS */ +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; +} +``` + +--- + +## ๐Ÿ“ Chapter 5: Modern Layout with Flexbox + +### Understanding Flexbox + +```mermaid +graph LR + A[Flex Container] --> B[Flex Item 1] + A --> C[Flex Item 2] + A --> D[Flex Item 3] + A --> E[Main Axis โ†”] + A --> F[Cross Axis โ†•] +``` + +Flexbox makes it easy to: +- Center content horizontally and vertically +- Create equal-height columns +- Distribute space evenly +- Reorder elements without changing HTML + +### Basic Flexbox Setup + +```css +.flex-container { + display: flex; + + /* Main axis alignment (horizontal by default) */ + justify-content: center; /* center, flex-start, flex-end, space-between, space-around */ + + /* Cross axis alignment (vertical by default) */ + align-items: center; /* center, flex-start, flex-end, stretch */ + + /* Wrap items to new lines */ + flex-wrap: wrap; /* wrap, nowrap, wrap-reverse */ + + /* Gap between items */ + gap: 20px; +} + +.flex-item { + flex: 1; /* Grow to fill available space */ +} +``` + +### Practical Flexbox Examples + +#### 1. **Perfect Centering** +```css +.center-everything { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; /* Full viewport height */ +} +``` + +```html +
+
I'm perfectly centered!
+
+``` + +#### 2. **Navigation Bar** +```css +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + background: #333; +} + +.nav-links { + display: flex; + gap: 2rem; + list-style: none; +} +``` + +```html + +``` + +#### 3. **Card Layout** +```css +.card-container { + display: flex; + gap: 2rem; + flex-wrap: wrap; +} + +.card { + flex: 1; + min-width: 300px; + padding: 2rem; + background: white; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} +``` + +--- + +## ๐Ÿ“ฑ Chapter 6: Responsive Design + +### Mobile-First Approach + +```css +/* Base styles (mobile) */ +.container { + padding: 1rem; + font-size: 16px; +} + +/* Tablet styles */ +@media (min-width: 768px) { + .container { + padding: 2rem; + font-size: 18px; + } +} + +/* Desktop styles */ +@media (min-width: 1024px) { + .container { + max-width: 1200px; + margin: 0 auto; + padding: 3rem; + font-size: 20px; + } +} +``` + +### Common Breakpoints + +```css +/* Phone */ +@media (max-width: 767px) { + .mobile-only { display: block; } + .desktop-only { display: none; } +} + +/* Tablet */ +@media (min-width: 768px) and (max-width: 1023px) { + .grid { grid-template-columns: repeat(2, 1fr); } +} + +/* Desktop */ +@media (min-width: 1024px) { + .mobile-only { display: none; } + .desktop-only { display: block; } + .grid { grid-template-columns: repeat(3, 1fr); } +} +``` + +### Responsive Images + +```css +img { + max-width: 100%; + height: auto; +} + +/* Hero image that scales nicely */ +.hero-image { + width: 100%; + height: 50vh; + object-fit: cover; + object-position: center; +} +``` + +--- + +## โœจ Chapter 7: Visual Effects and Enhancements + +### Gradients + +```css +/* Linear gradients */ +.gradient-bg { + background: linear-gradient(45deg, #ff6b6b, #4ecdc4); + background: linear-gradient(to right, #667eea 0%, #764ba2 100%); +} + +/* Radial gradients */ +.radial-gradient { + background: radial-gradient(circle, #ff6b6b, #4ecdc4); +} + +/* Text gradients */ +.gradient-text { + background: linear-gradient(45deg, #ff6b6b, #4ecdc4); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} +``` + +### Shadows and Depth + +```css +/* Box shadows */ +.card { + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle */ + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Medium */ + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Strong */ +} + +/* Text shadows */ +.text-shadow { + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); +} + +/* Inset shadows */ +.inset { + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); +} +``` + +### Borders and Rounded Corners + +```css +.rounded-elements { + /* Simple rounded corners */ + border-radius: 8px; + + /* Different corners */ + border-radius: 10px 0 10px 0; + + /* Pill shape */ + border-radius: 50px; + + /* Circle */ + border-radius: 50%; + width: 100px; + height: 100px; +} + +/* Creative borders */ +.fancy-border { + border: 3px solid; + border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1; +} +``` + +### Transitions and Hover Effects + +```css +/* Smooth transitions */ +.button { + background: #3498db; + color: white; + padding: 12px 24px; + border: none; + border-radius: 6px; + transition: all 0.3s ease; +} + +.button:hover { + background: #2980b9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); +} + +/* Card hover effects */ +.card { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); +} +``` + +--- + +## ๐ŸŽฏ Chapter 8: CSS Best Practices + +### Organizing Your CSS + +#### 1. **Logical Structure** +```css +/* ====================== + TABLE OF CONTENTS + 1. Reset/Base Styles + 2. Typography + 3. Layout + 4. Components + 5. Utilities + 6. Media Queries + ====================== */ + +/* 1. RESET/BASE STYLES */ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: 'Inter', sans-serif; + line-height: 1.6; +} + +/* 2. TYPOGRAPHY */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 0.5rem; +} + +/* 3. LAYOUT */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; +} + +/* 4. COMPONENTS */ +.button { + /* Button styles */ +} + +.card { + /* Card styles */ +} + +/* 5. UTILITIES */ +.text-center { text-align: center; } +.margin-bottom { margin-bottom: 1rem; } + +/* 6. MEDIA QUERIES */ +@media (min-width: 768px) { + /* Tablet styles */ +} +``` + +#### 2. **CSS Custom Properties (Variables)** +```css +:root { + /* Colors */ + --primary-color: #3498db; + --secondary-color: #2c3e50; + --success-color: #27ae60; + --warning-color: #f39c12; + --error-color: #e74c3c; + + /* Typography */ + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + --font-size-base: 1rem; + --line-height-base: 1.6; + + /* Spacing */ + --spacing-xs: 0.25rem; + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + + /* Borders */ + --border-radius: 6px; + --border-width: 1px; +} + +/* Using variables */ +.button { + background: var(--primary-color); + padding: var(--spacing-sm) var(--spacing-md); + border-radius: var(--border-radius); + font-family: var(--font-family); +} +``` + +--- + +## ๐ŸŽ‰ You're Now a CSS Artist! + +Congratulations! You've learned: +- โœ… How to connect CSS to HTML +- โœ… CSS selectors and the box model +- โœ… Colors, typography, and visual design +- โœ… Modern layout with Flexbox +- โœ… Responsive design principles +- โœ… Visual effects and animations +- โœ… Professional CSS organization + +**๐Ÿš€ Ready to see it all come together? Let's explore our complete project!** + +**๐Ÿ‘‰ [Back to Main Workshop โ†’](./README.md)** + +--- + +## ๐Ÿ”– CSS Quick Reference + +### Essential Properties + +| Property | Purpose | Example | +|----------|---------|---------| +| `color` | Text color | `color: #333;` | +| `background` | Background color/image | `background: #f8f9fa;` | +| `font-size` | Text size | `font-size: 1.2rem;` | +| `padding` | Inside spacing | `padding: 1rem;` | +| `margin` | Outside spacing | `margin: 0 auto;` | +| `border` | Element border | `border: 1px solid #ccc;` | +| `display` | Layout method | `display: flex;` | +| `position` | Positioning | `position: relative;` | + +### Common Values + +| Unit | Description | Example | +|------|-------------|---------| +| `px` | Pixels (fixed) | `font-size: 16px;` | +| `rem` | Relative to root | `padding: 1rem;` | +| `%` | Percentage of parent | `width: 50%;` | +| `vh/vw` | Viewport height/width | `height: 100vh;` | + +--- + +*Keep experimenting, keep creating, and remember: great design is an iterative process!* ๐ŸŽจ \ No newline at end of file diff --git a/web/01-fundamentals/sessions/html&css/html.md b/web/01-fundamentals/sessions/html&css/html.md new file mode 100644 index 0000000..b4c5cea --- /dev/null +++ b/web/01-fundamentals/sessions/html&css/html.md @@ -0,0 +1,527 @@ +# ๐Ÿ—๏ธ HTML: The Foundation of the Web + +### *Building Beautiful Structures with Code* + +--- + +## ๐ŸŽฏ What You'll Learn + +By the end of this section, you'll understand: +- How HTML creates the skeleton of every webpage +- Essential HTML elements and when to use them +- How to structure content logically +- Creating interactive forms +- Writing semantic, accessible HTML + +--- + +## ๐Ÿ  Understanding HTML: Your Digital Architecture + +### Think of HTML Like Building a House + +```mermaid +graph TD + A[๐Ÿ  HTML Document] --> B[๐Ÿšช Head - Information] + A --> C[๐Ÿ  Body - Content] + C --> D[๐Ÿ”ณ Header] + C --> E[๐Ÿ”ณ Main Content] + C --> F[๐Ÿ”ณ Footer] + E --> G[๐Ÿ“ Sections] + E --> H[๐Ÿ“„ Articles] +``` + +| House Part | HTML Equivalent | Purpose | +|------------|-----------------|---------| +| ๐Ÿ  **Foundation** | `` | The base that holds everything | +| ๐Ÿšช **Front Door** | `` | Information visitors need to know | +| ๐Ÿ  **Rooms** | `
`, `
` | Different areas for different purposes | +| ๐ŸชŸ **Windows** | `` | Views to the outside world | +| ๐Ÿšช **Interior Doors** | `` | Connections between rooms | + +--- + +## ๐Ÿ“ Chapter 1: HTML Document Structure + +### The Basic HTML Template + +Every HTML document follows this pattern: + +```html + + + + + + + My Amazing Website + + + + +

Welcome to My Website!

+

This is where your content goes.

+ + +``` + +### Breaking Down Each Part + +```mermaid +graph TB + A[DOCTYPE html] --> B[html lang='en'] + B --> C[head - Page Information] + B --> D[body - Visible Content] + C --> E[meta charset] + C --> F[title] + C --> G[link to CSS] + D --> H[h1, p, div, etc.] +``` + +#### 1. **Document Declaration** (``) +```html + +``` +- Tells the browser: "This is modern HTML5!" +- Always goes at the very top +- **Think of it as:** Showing your ID at the door + +#### 2. **The HTML Container** (``) +```html + + + +``` +- Wraps your entire page +- `lang="en"` helps screen readers and search engines +- **Think of it as:** The walls of your house + +#### 3. **The Head Section** (``) +```html + + + + What appears in the browser tab + + +``` +- Information **about** your page (not visible content) +- Links to CSS files, sets the page title +- **Think of it as:** The blueprint and wiring plans + +#### 4. **The Body Section** (``) +```html + +

This content is visible to users

+

Everything users see goes here!

+ +``` +- All the visible content of your webpage +- **Think of it as:** The furnished rooms people actually see + +--- + +## ๐Ÿ”ค Chapter 2: Text Elements - Making Words Matter + +### Headings: Creating Hierarchy + +HTML gives us 6 levels of headings: + +```html +

Main Title - Use Only Once Per Page

+

Major Section Heading

+

Subsection Heading

+

Sub-subsection Heading

+
Rarely Used
+
Very Rarely Used
+``` + +**๐ŸŽฏ Pro Tip:** Think of headings like a book outline: +- `

` = Book Title +- `

` = Chapter Title +- `

` = Section Title +- `

` = Subsection Title + +### Paragraphs and Text Formatting + +```html + +

This is a normal paragraph with some text.

+ + +

This text has strong importance and emphasis.

+ + +

First line
Second line on a new line

+ + +

To create a paragraph, use the <p> element.

+ + +
+ "The best way to learn HTML is by doing it!" + - Every Web Developer Ever +
+``` + +--- + +## ๐Ÿ“‹ Chapter 3: Lists - Organizing Information + +### Unordered Lists (Bullet Points) + +```html +

My Favorite Web Technologies

+
    +
  • HTML - For structure
    • +
  • CSS - For styling
    • +
  • JavaScript - For interactivity
    • +
+``` + +### Ordered Lists (Numbered) + +```html +

Steps to Build a Website

+
    +
  1. Plan your content
    2. +
  2. Write the HTML
    3. +
  3. Style with CSS
    4. +
  4. Test in browsers
    5. +
  5. Launch to the world!
    6. +
+``` + +### Nested Lists (Lists Inside Lists) + +```html +

Web Development Skills

+
    +
  • Frontend +
      +
    • HTML
      • +
    • CSS
      • +
    • JavaScript
      • +
    +
    • +
  • Backend +
      +
    • Node.js
      • +
    • Python
      • +
    • Databases
      • +
    +
    • +
+``` + +--- + +## ๐Ÿ”— Chapter 4: Links - Connecting the Web + +### Different Types of Links + +```html + +Visit Google + + +About Us + + +Send us an email + + +Call us: (123) 456-7890 + + +Jump to Contact + + +Open in New Tab +``` + +### Making Images Clickable + +```html + + Company Logo + +``` + +--- + +## ๐Ÿ–ผ๏ธ Chapter 5: Images - Adding Visual Appeal + +### Basic Image Syntax + +```html +A beautiful sunset over the ocean +``` + +**๐Ÿ” Breaking it down:** +- `src` = Source (where is the image?) +- `alt` = Alternative text (what if the image doesn't load?) + +### Different Image Sources + +```html + +Local photo + + +Photo in images folder + + +Remote photo +``` + +### Responsive Images + +```html + +Responsive photo +``` + +--- + +## ๐Ÿ“ฆ Chapter 6: Containers - Organizing Content + +### Div: The Swiss Army Knife + +```html +
+

Welcome to My Site

+

This is a hero section wrapped in a div

+
+ +
+

About Me

+

Some information about myself...

+
+``` + +### Span: For Inline Content + +```html +

This paragraph has red text in the middle.

+``` + +**๐Ÿ’ก Key Difference:** +- `
` = Block element (takes full width, new line) +- `` = Inline element (only takes needed space) + +--- + +## ๐Ÿ›๏ธ Chapter 7: Semantic HTML - Code That Makes Sense + +### Why Semantic HTML Matters + +**Benefits:** +- ๐Ÿ” **Better SEO** - Search engines understand your content +- โ™ฟ **Accessibility** - Screen readers work better +- ๐Ÿงน **Cleaner Code** - Easier to maintain and update + +### Semantic Layout Elements + +```html + + + + Semantic HTML Example + + + + +
+ +
+ + +
+ +
+

Welcome to My Website

+

This is the main hero section

+
+ +
+

About Me

+
+

My Story

+

Here's my background...

+
+
+ + + +
+ + +
+

© 2024 My Website. All rights reserved.

+
+ + + +``` + +### Semantic Elements Reference + +| Element | Purpose | Example Use | +|---------|---------|-------------| +| `
` | Page/section header | Site logo, main navigation | +| `