128 |

129 |

130 |

131 | ``` 132 | 133 | ### Content Elements 134 | ```html 135 |

136 |

137 |

Image caption

138 | 139 | 140 | March 15, 2024 141 | 142 | Highlighted text 143 | 144 |

145 |

Click to expand

146 | Additional content here... 147 |

148 | ``` 149 | 150 | ### Form Elements 151 | ```html 152 | 165 | ``` 166 | 167 | ## Best Practices 168 | 169 | ### 1. Document Outline 170 | ```html 171 | 172 |

173 | 176 |

177 | 178 |

179 |

180 |

181 |

Article Title

182 |

183 |

184 | 185 |

186 |

187 |

188 | 189 | 192 | 193 | 196 | 197 | ``` 198 | 199 | ### 2. Proper Heading Hierarchy 200 | ```html 201 |

202 |

Main Title

203 |

204 |

Subtitle

205 |

Sub-subtitle

206 |

207 |

208 | ``` 209 | 210 | ### 3. Lists for Navigation 211 | ```html 212 | 219 | ``` 220 | 221 | ## Common Mistakes to Avoid 222 | 223 | ❌ **Don't use semantic elements purely for styling:** 224 | ```html 225 | 226 |

227 | 228 |

229 | ``` 230 | 231 | ✅ **Do use semantic elements for their intended purpose:** 232 | ```html 233 | 234 |

235 | 236 |

237 | 238 |

239 |

34 | Full Name: 35 | 37 |

38 | ``` 39 | 40 | ### 2. Email Input 41 | ```html 42 |

43 | Email Address: 44 | 46 |

47 | ``` 48 | 49 | ### 3. Password Input 50 | ```html 51 |

52 | Password: 53 | 57 |

58 | ``` 59 | 60 | ### 4. Date Input 61 | ```html 62 |

63 | Date of Birth: 64 | 65 |

66 | ``` 67 | 68 | ### 5. Number Input 69 | ```html 70 |

71 | Age: 72 | 73 |

74 | ``` 75 | 76 | ### 6. Radio Buttons 77 | ```html 78 |

79 |

Preferred Contact Method:

80 | 81 | Email 82 | 83 | 84 | Phone 85 |

86 | ``` 87 | 88 | ### 7. Checkboxes 89 | ```html 90 |

91 |

Interests:

92 | 93 | Coding 94 | 95 | 96 | Design 97 |

98 | ``` 99 | 100 | ### 8. Select Dropdown 101 | ```html 102 |

103 | Country: 104 | 115 |

116 | ``` 117 | 118 | ### 9. Textarea 119 | ```html 120 |

121 | Bio: 122 | 124 |

125 | ``` 126 | 127 | ### 10. File Upload 128 | ```html 129 |

130 | Upload Picture: 131 | 133 |

134 | ``` 135 | 136 | ## Form Organization 137 | 138 | ### Using Fieldsets 139 | Fieldsets group related form elements together: 140 | 141 | ```html 142 |

143 | Personal Information 144 | 145 |

146 | ``` 147 | 148 | ### Form Groups 149 | Using consistent form groups for styling and organization: 150 | 151 | ```html 152 |

153 | Label Text: 154 | 155 |

156 | ``` 157 | 158 | ## Form Validation 159 | 160 | ### HTML5 Validation Attributes 161 | - `required`: Field must be filled 162 | - `pattern`: Regex pattern for validation 163 | - `min`/`max`: Number range limits 164 | - `minlength`/`maxlength`: Text length limits 165 | - `type`: Input type validation (email, number, etc.) 166 | 167 | Example: 168 | ```html 169 | 174 | ``` 175 | 176 | ## Basic Styling 177 | ```css 178 | body { 179 | font-family: Arial, sans-serif; 180 | line-height: 1.6; 181 | max-width: 800px; 182 | margin: 0 auto; 183 | padding: 20px; 184 | } 185 | 186 | fieldset { 187 | margin-bottom: 20px; 188 | padding: 20px; 189 | } 190 | 191 | .form-group { 192 | margin-bottom: 15px; 193 | } 194 | 195 | label { 196 | display: block; 197 | margin-bottom: 5px; 198 | } 199 | ``` 200 | 201 | ## Best Practices 202 | 203 | 1. **Accessibility** 204 | - Always use `` elements 205 | - Provide clear instructions 206 | - Use ARIA attributes when necessary 207 | - Ensure keyboard navigation 208 | 209 | 2. **Organization** 210 | - Group related fields with `

` 211 | - Use clear, descriptive `` text 212 | - Maintain consistent spacing 213 | - Follow a logical tab order 214 | 215 | 3. **Validation** 216 | - Use HTML5 validation attributes 217 | - Provide clear error messages 218 | - Include visual feedback 219 | - Allow form recovery 220 | 221 | 4. **User Experience** 222 | - Use appropriate input types 223 | - Provide placeholder text 224 | - Include clear submit/reset buttons 225 | - Maintain mobile responsiveness 226 | 227 | 5. **Performance** 228 | - Minimize form fields 229 | - Use appropriate field types 230 | - Optimize file upload handling 231 | - Consider async submission 232 | 233 | ## Common Pitfalls to Avoid 234 | 235 | ❌ **Don't:** 236 | - Skip labels for form controls 237 | - Use placeholder text instead of labels 238 | - Forget to style focus states 239 | - Ignore mobile users 240 | - Mix different validation methods 241 | 242 | ✅ **Do:** 243 | - Use semantic HTML 244 | - Group related fields 245 | - Provide clear feedback 246 | - Test across devices 247 | - Consider accessibility 248 | 249 | Remember: A well-designed form balances user experience, accessibility, and functionality while maintaining clean, semantic HTML structure. 250 | -------------------------------------------------------------------------------- /task4_solution.md: -------------------------------------------------------------------------------- 1 | # Recipe Collection Application (solution to task4 ) 2 | 3 | This guide walks through implementing a Recipe Collection Application using Node.js, Express, and MongoDB. 4 | 5 | ## Table of Contents 6 | 1. [Project Setup](#project-setup) 7 | 2. [Project Structure](#project-structure) 8 | 3. [Implementation Steps](#implementation-steps) 9 | 4. [Testing the Application](#testing-the-application) 10 | 5. [Expected Output](#expected-output) 11 | 12 | ## Project Setup 13 | 14 | First, let's set up a new Node.js project: 15 | 16 | ```bash 17 | # Create project directory 18 | mkdir recipelist 19 | cd recipelist 20 | 21 | # Initialize npm project 22 | npm init -y 23 | 24 | # Install dependencies 25 | npm install express mongoose cors dotenv 26 | npm install --save-dev nodemon 27 | ``` 28 | 29 | ## Project Structure 30 | 31 | We'll organize our code using the following structure: 32 | 33 | ``` 34 | recipelist/ 35 | ├── controllers/ 36 | │ └── recipes.js 37 | ├── models/ 38 | │ └── recipe.js 39 | ├── utils/ 40 | │ ├── config.js 41 | │ ├── middleware.js 42 | │ └── logger.js 43 | ├── app.js 44 | ├── index.js 45 | ├── .env 46 | └── package.json 47 | ``` 48 | 49 | ## Implementation Steps 50 | 51 | ### 1. Create Configuration Files 52 | 53 | First, let's create the utility files: 54 | 55 | **utils/config.js**: 56 | ```javascript 57 | require('dotenv').config() 58 | 59 | const PORT = process.env.PORT || 3003 60 | const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost/recipelist' 61 | 62 | module.exports = { 63 | MONGODB_URI, 64 | PORT 65 | } 66 | ``` 67 | 68 | **utils/logger.js**: 69 | ```javascript 70 | const info = (...params) => { 71 | console.log(...params) 72 | } 73 | 74 | const error = (...params) => { 75 | console.error(...params) 76 | } 77 | 78 | module.exports = { 79 | info, error 80 | } 81 | ``` 82 | 83 | **utils/middleware.js**: 84 | ```javascript 85 | const logger = require('./logger') 86 | 87 | const requestLogger = (request, response, next) => { 88 | logger.info('Method:', request.method) 89 | logger.info('Path: ', request.path) 90 | logger.info('Body: ', request.body) 91 | logger.info('---') 92 | next() 93 | } 94 | 95 | const unknownEndpoint = (request, response) => { 96 | response.status(404).send({ error: 'unknown endpoint' }) 97 | } 98 | 99 | const errorHandler = (error, request, response, next) => { 100 | logger.error(error.message) 101 | 102 | if (error.name === 'CastError') { 103 | return response.status(400).send({ error: 'malformatted id' }) 104 | } else if (error.name === 'ValidationError') { 105 | return response.status(400).json({ error: error.message }) 106 | } 107 | 108 | next(error) 109 | } 110 | 111 | module.exports = { 112 | requestLogger, 113 | unknownEndpoint, 114 | errorHandler 115 | } 116 | ``` 117 | 118 | ### 2. Create Database Model 119 | 120 | **models/recipe.js**: 121 | ```javascript 122 | const mongoose = require('mongoose') 123 | 124 | const recipeSchema = mongoose.Schema({ 125 | name: String, 126 | chef: String, 127 | ingredients: String, 128 | prepTime: Number, 129 | rating: Number 130 | }) 131 | 132 | recipeSchema.set('toJSON', { 133 | transform: (document, returnedObject) => { 134 | returnedObject.id = returnedObject._id.toString() 135 | delete returnedObject._id 136 | delete returnedObject.__v 137 | } 138 | }) 139 | 140 | module.exports = mongoose.model('Recipe', recipeSchema) 141 | ``` 142 | 143 | ### 3. Create Controller for Routes 144 | 145 | **controllers/recipes.js**: 146 | ```javascript 147 | const recipesRouter = require('express').Router() 148 | const Recipe = require('../models/recipe') 149 | 150 | recipesRouter.get('/', (request, response) => { 151 | Recipe.find({}).then(recipes => { 152 | response.json(recipes) 153 | }) 154 | }) 155 | 156 | recipesRouter.post('/', (request, response) => { 157 | const recipe = new Recipe(request.body) 158 | 159 | recipe.save() 160 | .then(result => { 161 | response.status(201).json(result) 162 | }) 163 | }) 164 | 165 | module.exports = recipesRouter 166 | ``` 167 | 168 | ### 4. Create Express Application 169 | 170 | **app.js**: 171 | ```javascript 172 | const config = require('./utils/config') 173 | const express = require('express') 174 | const app = express() 175 | const cors = require('cors') 176 | const recipesRouter = require('./controllers/recipes') 177 | const middleware = require('./utils/middleware') 178 | const logger = require('./utils/logger') 179 | const mongoose = require('mongoose') 180 | 181 | logger.info('connecting to', config.MONGODB_URI) 182 | 183 | mongoose.connect(config.MONGODB_URI) 184 | .then(() => { 185 | logger.info('connected to MongoDB') 186 | }) 187 | .catch((error) => { 188 | logger.error('error connecting to MongoDB:', error.message) 189 | }) 190 | 191 | app.use(cors()) 192 | app.use(express.static('build')) 193 | app.use(express.json()) 194 | app.use(middleware.requestLogger) 195 | 196 | app.use('/api/recipes', recipesRouter) 197 | 198 | app.use(middleware.unknownEndpoint) 199 | app.use(middleware.errorHandler) 200 | 201 | module.exports = app 202 | ``` 203 | 204 | ### 5. Create Server Entry Point 205 | 206 | **index.js**: 207 | ```javascript 208 | const app = require('./app') 209 | const http = require('http') 210 | const config = require('./utils/config') 211 | const logger = require('./utils/logger') 212 | 213 | const server = http.createServer(app) 214 | 215 | server.listen(config.PORT, () => { 216 | logger.info(`Server running on port ${config.PORT}`) 217 | }) 218 | ``` 219 | 220 | ### 6. Environment Variables 221 | 222 | Create a `.env` file in the root directory: 223 | ``` 224 | PORT=3003 225 | MONGODB_URI=mongodb://localhost/recipelist 226 | ``` 227 | 228 | If you're using MongoDB Atlas instead of a local MongoDB, replace the MONGODB_URI with your connection string. 229 | 230 | ### 7. Update package.json 231 | 232 | Add these scripts to your `package.json`: 233 | ```json 234 | { 235 | "scripts": { 236 | "start": "node index.js", 237 | "dev": "node --watch index.js", 238 | "test": "echo \"Error: no test specified\" && exit 1" 239 | } 240 | } 241 | ``` 242 | 243 | ## Testing the Application 244 | 245 | 1. Start the server: 246 | ```bash 247 | npm run dev 248 | ``` 249 | 250 | 2. Test the GET endpoint: 251 | - Use Postman or VS Code REST client to send a GET request to `http://localhost:3003/api/recipes` 252 | - Initially, it should return an empty array `[]` 253 | 254 | 3. Test the POST endpoint: 255 | - Send a POST request to `http://localhost:3003/api/recipes` with this JSON body: 256 | ```json 257 | { 258 | "name": "Pasta Carbonara", 259 | "chef": "Mario Batali", 260 | "ingredients": "Pasta, eggs, bacon, cheese", 261 | "prepTime": 30, 262 | "rating": 4.5 263 | } 264 | ``` 265 | - You should receive a 201 Created response with the created recipe 266 | 267 | 4. Verify with GET: 268 | - Send another GET request to see the added recipe 269 | 270 | ## Expected Output 271 | 272 | When you run the application, you should see output similar to this in your terminal: 273 | 274 | ``` 275 | > recipelist@1.0.0 dev 276 | > node --watch index.js 277 | 278 | connecting to mongodb://localhost/recipelist 279 | connected to MongoDB 280 | Server running on port 3003 281 | 282 | Method: GET 283 | Path: /api/recipes 284 | Body: undefined 285 | --- 286 | 287 | Method: POST 288 | Path: /api/recipes 289 | Body: { name: 'Pasta Carbonara', chef: 'Mario Batali', ingredients: 'Pasta, eggs, bacon, cheese', prepTime: 30, rating: 4.5 } 290 | --- 291 | ``` 292 | 293 | Congratulations! You've successfully built a modular Node.js application with Express and MongoDB. This structure follows best practices and makes your code more maintainable for future expansion. 294 | -------------------------------------------------------------------------------- /lessons/lesson-9_AdvancedJavaScript.md: -------------------------------------------------------------------------------- 1 | # **Lesson 9: Advanced JavaScript!** 2 | **Objective**: Master scope, closures, callbacks, promises, and async/await to write efficient, non-blocking code. 3 | 4 | --- 5 | 6 | ## **1. Scope: Understanding Variable Visibility** 7 | ### **What is Scope?** 8 | **Explanation**: Scope determines where in your code a variable can be seen and used. 9 | 10 | **Analogy**: Think of your code like a school building: 11 | - **Global Scope** = Schoolyard (everyone can see and access what's here) 12 | - **Function Scope** = Classroom (only students in that room can see things inside) 13 | - **Block Scope** = Lockers (only the owner can access what's inside) 14 | 15 | #### **Code Example with Explanation** 16 | ```javascript 17 | // Global scope (schoolyard) 18 | const schoolName = "Sunshine High"; // Everyone knows this 19 | 20 | function englishClass() { 21 | // Function scope (classroom) 22 | const teacher = "Mrs. Johnson"; // Only known in this classroom 23 | 24 | if (true) { 25 | // Block scope (locker) 26 | const textbook = "Shakespeare"; // Only exists in this block 27 | console.log(textbook); // ✅ Works (we're inside the locker) 28 | } 29 | 30 | console.log(teacher); // ✅ Works (we're in the classroom) 31 | console.log(textbook); // ❌ Error (can't access locker from classroom) 32 | } 33 | 34 | englishClass(); 35 | console.log(schoolName); // ✅ Works (schoolyard is public) 36 | console.log(teacher); // ❌ Error (classroom is private) 37 | ``` 38 | 39 | **Key Points**: 40 | - `const` and `let` are block-scoped (locker) 41 | - `var` is function-scoped (classroom) 42 | - Global variables should be used carefully (like school announcements) 43 | 44 | --- 45 | 46 | ## **2. Closures: Functions with Memories** 47 | ### **What is a Closure?** 48 | **Explanation**: A closure is a function that remembers the environment where it was created, even after that environment is gone. 49 | 50 | **Analogy**: Imagine a lunchbox that always remembers what food you put in it, no matter where you take it. 51 | 52 | #### **Code Example with Explanation** 53 | ```javascript 54 | function createLunchbox() { 55 | let food = "sandwich"; // This is remembered by the inner function 56 | 57 | return function checkLunchbox() { 58 | console.log(`My lunch has: ${food}`); 59 | food = "empty"; // We can change what's inside 60 | }; 61 | } 62 | 63 | const myLunch = createLunchbox(); 64 | myLunch(); // "My lunch has: sandwich" 65 | myLunch(); // "My lunch has: empty" 66 | ``` 67 | 68 | **What's Happening**: 69 | 1. `createLunchbox()` sets up the initial food 70 | 2. The inner `checkLunchbox()` function remembers the `food` variable 71 | 3. Even after `createLunchbox()` finishes, the inner function keeps access 72 | 73 | **Real Use**: Closures are great for creating private variables in JavaScript. 74 | 75 | --- 76 | 77 | ## **3. Callbacks: "Do This When You're Done"** 78 | ### **What is a Callback?** 79 | **Explanation**: A callback is a function passed as an argument to another function, to be executed later. 80 | 81 | **Analogy**: Giving your friend instructions to call you when they arrive at your house. 82 | 83 | #### **Code Example with Explanation** 84 | ```javascript 85 | // The "friend" function that will call back 86 | function friendArrives(callback) { 87 | console.log("Friend is on the way..."); 88 | setTimeout(() => { 89 | callback("Friend has arrived!"); // This executes after 2 seconds 90 | }, 2000); 91 | } 92 | 93 | // The "callback" function to execute later 94 | function callMe(message) { 95 | console.log("Phone rings:", message); 96 | } 97 | 98 | friendArrives(callMe); // Pass callMe as the callback 99 | ``` 100 | 101 | **What Happens**: 102 | 1. `friendArrives()` starts 103 | 2. After 2 seconds, it "calls back" with the message 104 | 3. `callMe()` executes with the message 105 | 106 | **Problem**: Too many callbacks can create confusing "callback hell" (like a tangled phone cord). 107 | 108 | --- 109 | 110 | ## **4. Promises: A Better Way to Wait** 111 | ### **What is a Promise?** 112 | **Explanation**: A Promise is an object representing the eventual completion (or failure) of an async operation. 113 | 114 | **Analogy**: Ordering food at a restaurant: 115 | - You get a promise (receipt) that you'll get food 116 | - It might resolve (you get your meal) 117 | - Or reject (they're out of ingredients) 118 | 119 | #### **Code Example with Explanation** 120 | ```javascript 121 | function orderFood() { 122 | return new Promise((resolve, reject) => { 123 | const hasIngredients = true; // Change to false to see rejection 124 | 125 | setTimeout(() => { 126 | if (hasIngredients) { 127 | resolve("🍔"); // Success! Here's your burger 128 | } else { 129 | reject("Sorry, we're out of burgers"); // Failure 130 | } 131 | }, 1500); // Simulate cooking time 132 | }); 133 | } 134 | 135 | orderFood() 136 | .then((food) => console.log("Yay! Got:", food)) // Success case 137 | .catch((error) => console.log("Oh no:", error)) // Error case 138 | .finally(() => console.log("Meal is complete")); // Always runs 139 | ``` 140 | 141 | **Key Parts**: 142 | - `resolve()` → Success case 143 | - `reject()` → Error case 144 | - `.then()` → What to do on success 145 | - `.catch()` → What to do on error 146 | - `.finally()` → Runs no matter what 147 | 148 | --- 149 | 150 | ## **5. Async/Await: The Cleanest Way** 151 | ### **What is Async/Await?** 152 | **Explanation**: Special syntax that makes working with promises easier and more readable. 153 | 154 | **Analogy**: Waiting in line politely instead of constantly checking if it's your turn. 155 | 156 | #### **Code Example with Explanation** 157 | ```javascript 158 | async function eatAtRestaurant() { 159 | try { 160 | console.log("Placing order..."); 161 | const meal = await orderFood(); // Waits here until promise settles 162 | console.log("Eating:", meal); 163 | } catch (error) { 164 | console.log("Complaint:", error); 165 | } finally { 166 | console.log("Meal is over"); 167 | } 168 | } 169 | 170 | eatAtRestaurant(); 171 | ``` 172 | 173 | **How It Works**: 174 | 1. `async` marks the function as asynchronous 175 | 2. `await` pauses execution until the promise resolves 176 | 3. `try/catch` handles success/errors cleanly 177 | 178 | **Benefits**: 179 | - Looks like regular synchronous code 180 | - Easier to read than promise chains 181 | - Better error handling 182 | 183 | --- 184 | 185 | ## **Practice Time!** 186 | ### **1. Closure Challenge: Remembering Counter** 187 | Create a counter that remembers its count between calls: 188 | ```javascript 189 | function makeCounter() { 190 | let count = 0; 191 | return function() { 192 | count++; 193 | return count; 194 | }; 195 | } 196 | 197 | const counter = makeCounter(); 198 | console.log(counter()); // 1 199 | console.log(counter()); // 2 200 | ``` 201 | 202 | ### **2. Async/Await Challenge: Weather App** 203 | Fetch weather data (simulated): 204 | ```javascript 205 | async function getWeather() { 206 | try { 207 | // Simulate API call 208 | const weather = await new Promise((resolve) => { 209 | setTimeout(() => resolve("☀️ Sunny, 72°F"), 1000); 210 | }); 211 | console.log("Today's weather:", weather); 212 | } catch { 213 | console.log("Failed to get weather"); 214 | } 215 | } 216 | 217 | getWeather(); 218 | ``` 219 | 220 | --- 221 | 222 | ## **Key Takeaways** 223 | ✔ **Scope** = Where variables live and who can see them 224 | ✔ **Closures** = Functions that remember their birth environment 225 | ✔ **Callbacks** → **Promises** → **Async/Await** = Evolution of handling async code 226 | ✔ Always handle errors in async code with `try/catch` 227 | 228 | **Next**: We'll learn how to build interactive websites with these concepts! 229 | 230 | Any questions? Just ask! 😊 -------------------------------------------------------------------------------- /lessons/lesson-6_Advanced_CSS.md: -------------------------------------------------------------------------------- 1 | # Advanced CSS Techniques: Box Model, Positioning, and Modern Layouts 2 | 3 | ## 1. The CSS Box Model 4 | 5 | ### Core Concept 6 | Every HTML element is represented as a rectangular box with four parts: 7 | 8 | - **Content**: The inner area where text and images appear 9 | - **Padding**: Clear space between the content and the border 10 | - **Border**: A line that surrounds the padding 11 | - **Margin**: Clear space outside the border 12 | 13 | ```css 14 | .box { 15 | /* Content dimensions */ 16 | width: 300px; 17 | height: 200px; 18 | 19 | /* Padding (inside the border) */ 20 | padding: 20px; 21 | 22 | /* Border */ 23 | border: 2px solid black; 24 | 25 | /* Margin (outside the border) */ 26 | margin: 30px; 27 | } 28 | ``` 29 | 30 | ### Box Sizing 31 | By default, `width` and `height` control only the content area. The `box-sizing` property changes this: 32 | 33 | ```css 34 | /* Default behavior - width applies to content only */ 35 | .content-box { 36 | box-sizing: content-box; 37 | width: 300px; /* Total width will be 300px + padding + border */ 38 | } 39 | 40 | /* Better behavior - width includes padding and border */ 41 | .border-box { 42 | box-sizing: border-box; 43 | width: 300px; /* Total width will be exactly 300px */ 44 | } 45 | 46 | /* Best practice - apply to all elements */ 47 | * { 48 | box-sizing: border-box; 49 | } 50 | ``` 51 | 52 | ## 2. CSS Positioning 53 | 54 | ### Position Properties 55 | 56 | ```css 57 | /* Static - Default flow (not positioned) */ 58 | .static { 59 | position: static; 60 | } 61 | 62 | /* Relative - Positioned relative to its normal position */ 63 | .relative { 64 | position: relative; 65 | top: 20px; /* Moves down 20px from normal position */ 66 | left: 30px; /* Moves right 30px from normal position */ 67 | } 68 | 69 | /* Absolute - Positioned relative to nearest positioned ancestor */ 70 | .absolute { 71 | position: absolute; 72 | top: 0; /* 0px from top of positioned parent */ 73 | right: 0; /* 0px from right of positioned parent */ 74 | } 75 | 76 | /* Fixed - Positioned relative to viewport (stays in place during scroll) */ 77 | .fixed { 78 | position: fixed; 79 | bottom: 20px; 80 | right: 20px; 81 | } 82 | 83 | /* Sticky - Becomes fixed when it reaches a threshold during scrolling */ 84 | .sticky { 85 | position: sticky; 86 | top: 0; /* Sticks at top of viewport when scrolled to */ 87 | } 88 | ``` 89 | 90 | ### Z-Index 91 | Controls the stacking order of positioned elements: 92 | 93 | ```css 94 | .back { 95 | position: relative; 96 | z-index: 1; 97 | } 98 | 99 | .front { 100 | position: relative; 101 | z-index: 2; /* Higher z-index appears in front */ 102 | } 103 | ``` 104 | 105 | ## 3. Flexbox Layout 106 | 107 | ### Container Properties 108 | 109 | ```css 110 | .flex-container { 111 | display: flex; 112 | 113 | /* Direction of flex items */ 114 | flex-direction: row; /* Default: left to right */ 115 | /* Other options: row-reverse, column, column-reverse */ 116 | 117 | /* Wrapping behavior */ 118 | flex-wrap: wrap; /* Wrap to next line if needed */ 119 | /* Other options: nowrap, wrap-reverse */ 120 | 121 | /* Horizontal alignment (main axis) */ 122 | justify-content: space-between; 123 | /* Other options: flex-start, flex-end, center, space-around, space-evenly */ 124 | 125 | /* Vertical alignment (cross axis) */ 126 | align-items: center; 127 | /* Other options: flex-start, flex-end, stretch, baseline */ 128 | 129 | /* Alignment of multiple lines */ 130 | align-content: space-between; 131 | /* Other options: flex-start, flex-end, center, space-around, stretch */ 132 | 133 | /* Gap between items */ 134 | gap: 20px; 135 | } 136 | ``` 137 | 138 | ### Item Properties 139 | 140 | ```css 141 | .flex-item { 142 | /* Growth ratio (0 = don't grow) */ 143 | flex-grow: 1; 144 | 145 | /* Shrink ratio (1 = can shrink) */ 146 | flex-shrink: 1; 147 | 148 | /* Starting/base size */ 149 | flex-basis: 250px; 150 | 151 | /* Shorthand for grow, shrink, basis */ 152 | flex: 1 1 250px; 153 | 154 | /* Override container's align-items for this item */ 155 | align-self: flex-start; 156 | 157 | /* Change order (default is 0) */ 158 | order: 2; 159 | } 160 | ``` 161 | 162 | ## 4. CSS Grid Layout 163 | 164 | ### Container Properties 165 | 166 | ```css 167 | .grid-container { 168 | display: grid; 169 | 170 | /* Define columns */ 171 | grid-template-columns: 1fr 2fr 1fr; /* Three columns of different widths */ 172 | 173 | /* Define rows */ 174 | grid-template-rows: 100px auto 100px; /* Fixed, automatic, and fixed heights */ 175 | 176 | /* Repeating patterns */ 177 | grid-template-columns: repeat(3, 1fr); /* 3 equal columns */ 178 | 179 | /* Minimum and maximum sizes */ 180 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */ 181 | 182 | /* Named grid areas */ 183 | grid-template-areas: 184 | "header header header" 185 | "sidebar content content" 186 | "footer footer footer"; 187 | 188 | /* Spacing between cells */ 189 | gap: 20px; /* Equal row and column gaps */ 190 | row-gap: 20px; /* Just row gaps */ 191 | column-gap: 10px; /* Just column gaps */ 192 | } 193 | ``` 194 | 195 | ### Item Properties 196 | 197 | ```css 198 | .grid-item { 199 | /* Placement by column lines */ 200 | grid-column: 1 / 3; /* Start at line 1, end at line 3 */ 201 | 202 | /* Placement by row lines */ 203 | grid-row: 2 / 4; /* Start at line 2, end at line 4 */ 204 | 205 | /* Placement by area name */ 206 | grid-area: header; /* Place in area named "header" */ 207 | 208 | /* Spans */ 209 | grid-column: span 2; /* Span 2 columns */ 210 | grid-row: span 3; /* Span 3 rows */ 211 | } 212 | ``` 213 | 214 | ## 5. Common Layout Patterns 215 | 216 | ### Centering with Flexbox 217 | 218 | ```css 219 | .center-flex { 220 | display: flex; 221 | justify-content: center; /* Horizontal center */ 222 | align-items: center; /* Vertical center */ 223 | min-height: 100vh; /* Full viewport height */ 224 | } 225 | ``` 226 | 227 | ### Card Grid Layout 228 | 229 | ```css 230 | .card-grid { 231 | display: grid; 232 | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 233 | gap: 20px; 234 | padding: 20px; 235 | } 236 | 237 | .card { 238 | background: white; 239 | border-radius: 8px; 240 | padding: 20px; 241 | box-shadow: 0 2px 5px rgba(0,0,0,0.1); 242 | } 243 | ``` 244 | 245 | ### Holy Grail Layout (Header, Footer, Sidebar, Main) 246 | 247 | ```css 248 | .holy-grail { 249 | display: grid; 250 | grid-template-areas: 251 | "header header header" 252 | "nav main aside" 253 | "footer footer footer"; 254 | grid-template-columns: 200px 1fr 200px; 255 | grid-template-rows: auto 1fr auto; 256 | min-height: 100vh; 257 | } 258 | 259 | .header { grid-area: header; } 260 | .nav { grid-area: nav; } 261 | .main { grid-area: main; } 262 | .aside { grid-area: aside; } 263 | .footer { grid-area: footer; } 264 | ``` 265 | 266 | ## 6. Responsive Design with Modern CSS 267 | 268 | ### Media Queries with Grid 269 | 270 | ```css 271 | .responsive-grid { 272 | display: grid; 273 | grid-template-columns: repeat(4, 1fr); 274 | gap: 20px; 275 | } 276 | 277 | /* Tablet layout */ 278 | @media (max-width: 768px) { 279 | .responsive-grid { 280 | grid-template-columns: repeat(2, 1fr); 281 | } 282 | } 283 | 284 | /* Mobile layout */ 285 | @media (max-width: 480px) { 286 | .responsive-grid { 287 | grid-template-columns: 1fr; 288 | } 289 | } 290 | ``` 291 | 292 | ### Flexbox Responsiveness 293 | 294 | ```css 295 | .responsive-flex { 296 | display: flex; 297 | flex-wrap: wrap; 298 | } 299 | 300 | .flex-item { 301 | flex: 1 1 250px; /* Grow, shrink, and base width */ 302 | min-width: 250px; /* Ensures minimum size */ 303 | } 304 | ``` 305 | -------------------------------------------------------------------------------- /Course_outline.md: -------------------------------------------------------------------------------- 1 | 2 | ### Web Development Course Outline 3 | 4 | #### Week 1-2: Introduction to Web Development and Linux 5 | - **Lesson 1: Introduction to Web Development** 6 | - Overview of web development (front-end vs back-end) 7 | - Understanding the web stack (HTML, CSS, JavaScript, server-side languages) 8 | - Resource: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Learn) 9 | 10 | - **Lesson 2: Introduction to Linux and Command Line Basics** 11 | - [Overview of Linux operating systems](https://www.javatpoint.com/what-is-linux) 12 | - Basic Linux commands (navigating directories, file management) 13 | - Resource: [Linux Command Line Basics](https://linuxcommand.org/index.php) 14 | 15 | - **Lesson 3: HTML Basics** 16 | - [Understanding HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 17 | - [Common HTML tags and attributes](https://www.tutorialspoint.com/html/html_attributes.htm) 18 | - Creating a simple HTML page 19 | - Resource: [HTML Basics](https://www.w3schools.com/html/html_basic.asp) 20 | 21 | - **Lesson 4: CSS Basics** 22 | - [Introduction to CSS and its role in web development](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS) 23 | - [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors), [properties, and values](https://www.dofactory.com/css/properties) 24 | - Resource: [CSS Basics](https://css-tricks.com/guides/) 25 | 26 | #### Week 3-4: Advanced HTML, CSS, and Introduction to JavaScript 27 | - **Lesson 5: More HTML Tags** 28 | - [Semantic HTML for better structure](https://www.semrush.com/blog/semantic-html5-guide/?msockid=1524f322ba22661314a9e785bb2267fd) 29 | - [Forms and input elements](https://www.w3schools.com/html/html_form_elements.asp) 30 | - Resource: [HTML Forms](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms) 31 | 32 | - **Lesson 6: Advanced CSS Techniques** 33 | - [Box model, positioning, and layout techniques](https://cssdojo.dev/learn/basics/the-box-model-and-layouts) 34 | - [Flexbox and CSS Grid for responsive design](https://www.freecodecamp.org/news/web-layouts-use-css-grid-and-flex-to-create-responsive-webpages/) 35 | - Resource: [CSS Box Model](https://www.learn-html-css.com/learn-to-code-css/css-box-model/), [CSS Flexbox](https://www.learn-html-css.com/learn-to-code-css/css-flexbox/), [CSS Grid](https://www.learn-html-css.com/learn-to-code-css/css-grid/) 36 | 37 | - **Lesson 7: Introduction to JavaScript** 38 | - Variables, data types, and operators 39 | - Basic control structures (if statements, loops) 40 | - Resource: 41 | - [Modern JS](https://github.com/mbeaudru/modern-js-cheatsheet) 42 | - [JavaScript Fundamentals](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 43 | - [Module patterns]() 44 | - [var, let and const](https://www.youtube.com/watch?v=sjyJBL5fkp8) 45 | - [Javascript Tutorial](https://www.youtube.com/watch?v=vZBCTc9zHtI) 46 | - [JavaScript object basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Object_basics) 47 | - [Object-oriented JavaScript read all examples!](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript) 48 | - [Object prototypes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes) 49 | - [Inheritance in JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript) 50 | - [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures) 51 | - [this/self](https://alistapart.com/article/getoutbindingsituations/) 52 | 53 | - **Lesson 8: Functions and DOM Manipulation** 54 | - Writing and calling functions 55 | - Accessing and modifying HTML with JavaScript 56 | - JavaScript DOM(Document Object Model) 57 | - Resource: 58 | - [ECMAScript 6 - ECMAScript 2015](https://www.w3schools.com/js/js_es6.asp) 59 | - [Statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) 60 | - [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 61 | - [Default parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters) 62 | - [Rest parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) 63 | - [Demystifying ES6 Iterables & Iterators](https://www.freecodecamp.org/news/demystifying-es6-iterables-iterators-4bdd0b084082/) 64 | 65 | 66 | #### Week 5-6: JavaScript and Front-End Frameworks 67 | - **Lesson 9: Advanced JavaScript Concepts** 68 | - Understanding scope, closures, and [asynchronous JavaScript](https://www.freecodecamp.org/news/asynchronous-javascript-explained/) (callbacks, promises) 69 | - Resource: [JavaScript Advanced Concepts](https://www.digitalocean.com/community/tutorials/understanding-the-event-loop-callbacks-promises-and-async-await-in-javascript) 70 | - Resource: [What is Callbacks, Closure, Promises, and Async & Await](https://medium.com/@punitkmr/whats-is-callbacks-closure-promises-and-async-await-a8d47eb83862) 71 | 72 | - **Lesson 10: Introduction to Front-End Frameworks** 73 | - Overview of popular frameworks ([React](https://react.dev/learn), Vue, Angular) 74 | - Setting up a project with a chosen framework (e.g., [React](https://react.dev/learn)) 75 | - Resource: [React Docs](https://react.dev/learn) 76 | 77 | - **Lesson 11: State Management in Front-End Frameworks** 78 | - Understanding state and props in React 79 | - Managing state with hooks (useState, useEffect) 80 | - Resource: React Hooks Documentation 81 | 82 | - **Lesson 12: Styling Front-End Applications** 83 | - Using CSS-in-JS, styled-components, or CSS frameworks (Bootstrap, Tailwind) 84 | - Responsive design techniques 85 | - Resource: Bootstrap, Tailwind CSS 86 | 87 | #### Week 7-8: Node.js and Backend Development 88 | - **Lesson 13: Introduction to Node.js** 89 | - Overview of Node.js and its ecosystem 90 | - Setting up a Node.js project (npm, package.json) 91 | - Resource: Node.js Documentation 92 | 93 | - **Lesson 14: Building a RESTful API with Express.js** 94 | - Understanding REST principles 95 | - Setting up an Express server and creating routes 96 | - Resource: Express.js Documentation 97 | 98 | - **Lesson 15: Database Integration (MongoDB)** 99 | - Introduction to databases (NoSQL vs SQL) 100 | - Connecting to MongoDB with Mongoose 101 | - Resource: MongoDB Documentation 102 | 103 | - **Lesson 16: Authentication and Authorization** 104 | - Implementing user authentication with JWT 105 | - Understanding role-based access control 106 | - Resource: JWT Authentication Guide 107 | 108 | #### Week 9-10: Full-Stack Development and Deployment 109 | - **Lesson 17: Full-Stack Application Development** 110 | - Integrating front-end and back-end components 111 | - Building a simple full-stack application (e.g., a task manager) 112 | - Resource: Full-Stack Development Guide 113 | 114 | - **Lesson 18: Introduction to Build Tools and Version Control** 115 | - Overview of build tools (Webpack, Gulp) and their usage 116 | - Version control with Git and collaboration using GitHub 117 | - Resource: Git Basics, Webpack Guide 118 | 119 | - **Lesson 19: Testing in Web Development** 120 | - Writing unit and integration tests (Jest, Mocha) 121 | - Understanding test-driven development (TDD) practices 122 | - Resource: Testing Documentation 123 | 124 | - **Lesson 20: Deployment and Hosting** 125 | - Deploying applications to platforms like Heroku, Vercel, or Netlify 126 | - Setting up CI/CD pipelines for automated deployments 127 | - Resource: Deployment Guide 128 | 129 | #### Week 11-12: Final Project and Presentation 130 | - **Lesson 21: Project Development Phase** 131 | - Applying knowledge from the course to build a comprehensive full-stack project 132 | - Emphasizing best practices in coding and documentation 133 | 134 | - **Lesson 22: Project Review and Refinement** 135 | - Peer review of projects, providing and receiving feedback 136 | - Refining projects based on feedback and testing 137 | 138 | - **Lesson 23-24: Final Presentation and Showcase** 139 | - Presenting the final project to the class 140 | - Discussing challenges faced and solutions implemented 141 | 142 | -------------------------------------------------------------------------------- /functions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Learning JavaScript Functions 7 | 37 | 38 | 39 |

Learning JavaScript Functions

40 | 41 | 42 |

43 |

1. Basic Function - Say Hello

44 |

45 | function sayHello() {
46 | alert("Hello!");
47 | } 48 |

49 | 50 |

51 | 52 | 53 |

54 |

2. Function with Input

55 |

56 | function greetUser(name) {
57 | alert(`Hello ${name}`);
58 | } 59 |

60 | 61 | 64 |

65 | 66 | 67 |

68 |

3. Function with Return Value

69 |

70 | function addNumbers(num1, num2) {
71 | return num1 + num2;
72 | } 73 |

74 | 75 | 76 | 77 |

78 |

79 | 80 | 81 |

82 |

4. Calculator Function

83 |

84 | function calculate(num1, num2, operation) {
85 |     switch(operation) {
86 |         case 'add': return num1 + num2;
87 |         case 'subtract': return num1 - num2;
88 |         case 'multiply': return num1 * num2;
89 |         case 'divide': return num2 !== 0 ? num1 / num2 : 'Cannot divide by zero';
90 |     }
91 | } 92 |

93 | 94 | 95 | 101 | 102 |

103 |

104 | 105 | 106 |

107 |

5. Function with Default Values

108 |

109 | function greetWithDefault(name = "Guest", time = "day") {
110 | return `Good ${time}, ${name}!`;
111 | } 112 |

113 | 114 | 119 | 120 |

121 |

122 | 123 | 194 | 195 | 196 |

197 |

Key Function Concepts:

198 |

Function Declaration: 200 | Using the 'function' keyword to create a function
Parameters: 202 | Values that functions can receive and use
Return Value: 204 | The result that a function gives back
Function Call: 206 | How to use/execute a function
Default Parameters: 208 | Fallback values if no argument is provided

210 |

211 | 212 | 213 | -------------------------------------------------------------------------------- /timetable_assignment.md: -------------------------------------------------------------------------------- 1 | 2 | # School Timetable Implementation Guide 3 | 4 | ![School Timetable](timetable_photo.jpeg "2024/2025 School Timetable") 5 | 6 | 7 | --- 8 | 9 | ### **Objective** 10 | Recreate the 2024/2025 academic year timetable using HTML and CSS, as shown in the image. Ensure the final files are properly organized for submission. This assignment is designed to test your knowledge of HTML tables, CSS styling, and accessibility. 11 | 12 | --- 13 | 14 | ### **Layout Specifications** 15 | 16 | #### **Structure** 17 | 1. **Fixed Layout**: The timetable should be centered on the page with consistent dimensions. It does not need to be responsive, as breaking it down into smaller pieces would reduce readability. 18 | 2. **Columns**: 19 | - **Days** (MON-FRI): Narrow width. 20 | - **Time Slots** (13 periods): Equal width. 21 | - **Break/Lunch/Activities**: Narrower widths. 22 | 3. **Rows**: 23 | - **Header Row**: Time slots (8:00-4:00). 24 | - **Content Rows**: Yr. 7-11 for each day. 25 | 26 | #### **Merging** 27 | 1. **Vertical**: Breaks, lunch, and end activities span multiple year groups. 28 | 2. **Horizontal**: Combined subjects or periods span across columns. 29 | - **Note**: You will need to figure out how to merge cells using `rowspan` and `colspan` based on the image. 30 | 31 | --- 32 | 33 | ### **Styling Guidelines** 34 | 1. **Borders**: Uniform, no double borders. 35 | 2. **Text**: 36 | - **Font**: Sans-serif, centered alignment. 37 | - **Sizes**: Larger for headers, consistent for content. 38 | 3. **Spacing**: Equal padding and consistent vertical alignment. 39 | 4. **Highlighting**: Use distinct styles for breaks and end activities. 40 | - **Note**: You are expected to determine the exact styling based on the image. 41 | 42 | --- 43 | 44 | ### **Accessibility Considerations** 45 | 1. **Table Headers**: Use `` tags for headers and specify `scope="col"` or `scope="row"` to improve screen-reader compatibility. 46 | 2. **Alt Text for Image**: Add `alt` text to the timetable preview image in the `README.txt` file. 47 | 3. **Semantic HTML**: Ensure the HTML structure is semantic and logical (e.g., use `` for headers and `` for content). 48 | 49 | --- 50 | 51 | ### **Implementation Options** 52 | 1. **HTML Tables**: 53 | - Use ``, ``, and `` elements. 54 | - Merge cells using `rowspan` and `colspan` as needed. 55 | 2. **CSS Grid** (Optional): 56 | - If you prefer, you can use CSS Grid to create the layout, but this is not required. 57 | 58 | --- 59 | 60 | ### **File Submission** 61 | 62 | #### **File Structure** 63 | Your project files should be organized as follows: 64 | 65 | ``` 66 | firstName_lastName/ 67 | │ 68 | ├── index.html # Main HTML file 69 | ├── style.css # CSS stylesheet 70 | ├── README.md # Brief description of the project and accessibility considerations 71 | └── timetable_preview.png # Screenshot of your timetable 72 | ``` 73 | 74 | #### **Naming and Submission** 75 | 1. **File Name**: Compress your folder into a `.zip` file. 76 | 2. **Zip File Name**: Use your first and last name as the file name. 77 | - Example: `Martin_Maina.zip` 78 | 3. **Contents**: Ensure all files are included and the structure is maintained. 79 | 80 | --- 81 | 82 | ### **Validation Instructions** 83 | 1. **HTML Validation**: 84 | - Use the [W3C Markup Validation Service](https://validator.w3.org/) to validate your HTML file. 85 | - Fix any errors or warnings before submission. 86 | 2. **CSS Validation**: 87 | - Use the [W3C CSS Validation Service](https://jigsaw.w3.org/css-validator/) to validate your CSS file. 88 | - Fix any errors or warnings before submission. 89 | 90 | --- 91 | 92 | 93 | ### **Grading Rubric** 94 | 95 | The assignment will be graded based on the following criteria. Points are allocated based on the correctness, completeness, and quality of the implementation. If you choose to use **CSS Grid** instead of HTML tables, the rubric will adjust accordingly to evaluate your approach. 96 | 97 | --- 98 | 99 | | **Criteria** | **Points** | **Description** | 100 | |----------------------------|------------|---------------------------------------------------------------------------------| 101 | | **HTML Structure** | 20 | Proper use of semantic HTML elements. For tables: `

`, ``, ``, `

`, and `

`. For CSS Grid: Proper use of `

` or other semantic elements. | 102 | | **Layout Implementation** | 30 | **For Tables**: Correct use of `rowspan` and `colspan` to merge cells as shown in the image.
**For CSS Grid**: Correct use of `grid-template-areas`, `grid-row`, and `grid-column` to replicate the layout. | 103 | | **CSS Styling** | 20 | Consistent styling, including borders, fonts, spacing, and highlighting. Applies to both tables and CSS Grid implementations. | 104 | | **Accessibility** | 15 | Use of `

` with `scope` for tables or ARIA roles for CSS Grid. Semantic HTML and alt text for the image are required for both approaches. | 105 | | **File Structure** | 10 | Proper organization of files and submission in a zipped folder. Applies to all students. | 106 | | **Validation** | 5 | HTML and CSS files pass validation with no errors. Applies to all students. | 107 | 108 | --- 109 | 110 | ### **Detailed Breakdown of Criteria** 111 | 112 | #### **1. HTML Structure (20 Points)** 113 | - **Tables**: 114 | - Correct use of ``, ``, ``, `

`, and `	` elements. 115 \| - Logical structure that matches the timetable layout. 116 \| - CSS Grid: 117 \| - Proper use of semantic HTML elements like ` `. 118 \| - Logical structure that matches the timetable layout. 119 \| 120 \| #### 2. Layout Implementation (30 Points) 121 \| - Tables: 122 \| - Correct use of `rowspan` and `colspan` to merge cells for breaks, lunch, and activities. 123 \| - Accurate replication of the timetable layout as shown in the image. 124 \| - CSS Grid: 125 \| - Correct use of `grid-template-areas`, `grid-row`, and `grid-column` to replicate the layout. 126 \| - Accurate replication of the timetable layout as shown in the image. 127 \| 128 \| #### 3. CSS Styling (20 Points) 129 \| - Applies to Both Tables and CSS Grid: 130 \| - Consistent styling for borders, fonts, spacing, and alignment. 131 \| - Distinct styles for breaks, lunch, and activities. 132 \| - Centered text and uniform padding throughout the timetable. 133 \| 134 \| #### 4. Accessibility (15 Points) 135 \| - Tables: 136 \| - Use of `	` with `scope="col"` or `scope="row"` for headers. 137 \| - Semantic HTML structure for screen-reader compatibility. 138 \| - CSS Grid: 139 \| - Use of ARIA roles (e.g., `role="grid"`, `role="row"`, `role="cell"`) for accessibility. 140 \| - Semantic HTML structure for screen-reader compatibility. 141 \| - Both: 142 \| - Alt text for the timetable preview image in the `README.txt` file. 143 \| 144 \| #### 5. File Structure (10 Points) 145 \| - Proper organization of files: 146 \| - `index.html` 147 \| - `style.css` 148 \| - `README.md` 149 \| - `timetable_preview.png` 150 \| - Submission in a zipped folder named correctly (e.g., `Martin_Maina.zip`). 151 \| 152 \| #### 6. Validation (5 Points) 153 \| - HTML and CSS files must pass validation using: 154 \| - [W3C Markup Validation Service](https://validator.w3.org/) for HTML. 155 \| - [W3C CSS Validation Service](https://jigsaw.w3.org/css-validator/) for CSS. 156 \| - No errors or warnings should be present in the final submission. 157 \| 158 \| --- 159 \| 160 \| --- 161 \| 162 \| ### Deliverables 163 \| 1. Complete HTML and CSS Files: Matching the layout and content of the provided timetable. 164 \| 2. README.txt: Brief description of the project and accessibility considerations. 165 \| 3. Timetable Preview Screenshot: A screenshot of your timetable. 166 \| 4. Zipped Folder: Properly named and structured for submission. 167 \| 168 \| --- 169 \| 170 \| ### Notes for Students 171 \| - This assignment is designed to test your ability to recreate a fixed layout using HTML and CSS. 172 \| - Some aspects, such as cell merging and styling, are left for you to figure out based on the image. 173 \| - Focus on creating a clean, accessible, and well-structured timetable. 174 \| 175 \| --- 176 \| 177 \| 178 \| Here’s a revised version of the Grading Rubric section, including considerations for students who might choose to use CSS Grid instead of HTML tables. The rubric now accounts for both implementation options while maintaining fairness and clarity. 179 \| 180 \| --- 181 \| 182 \| ### Additional Notes 183 \| - CSS Grid Bonus (Optional): If you choose to use CSS Grid and implement it flawlessly, you may receive up to 5 bonus points for creativity and advanced CSS usage. This is optional and not required. 184 \| - Partial Credit: Partial credit will be awarded for partially correct implementations (e.g., some cells merged correctly, some styling applied, etc.). 185 \| - Deductions: Points will be deducted for: 186 \| - Missing or incorrect file structure. 187 \| - Accessibility issues (e.g., missing `	` or ARIA roles). 188 \| - Validation errors in HTML or CSS. 189 \| 190 \| -------------------------------------------------------------------------------- /season-9/css_forms.md: -------------------------------------------------------------------------------- 1 \| # CSS Styling Assignment: Form Styling Guidelines 2 \| 3 \| ## Objective 4 \| Apply CSS styling to your previously created HTML form following professional design standards and demonstrating comprehensive CSS knowledge. 5 \| 6 \| ## Assignment Overview 7 \| Style the HTML form from your previous assignment using the provided color codes and design specifications. Your implementation should demonstrate mastery of various CSS properties and techniques. 8 \| 9 \| --- 10 \| 11 \| ## Design Specifications 12 \| 13 \| ### Color Palette 14 \| Use the following color codes throughout your styling: 15 \| 16 \| Primary Colors: 17 \| - Primary Blue: `#2563eb` 18 \| - Primary Dark: `#1e40af` 19 \| - Primary Light: `#3b82f6` 20 \| 21 \| Neutral Colors: 22 \| - Background: `#f9fafb` 23 \| - White: `#ffffff` 24 \| - Text Dark: `#1f2937` 25 \| - Text Light: `#6b7280` 26 \| - Border: `#d1d5db` 27 \| - Border Focus: `#2563eb` 28 \| 29 \| Status Colors: 30 \| - Success: `#10b981` 31 \| - Error: `#ef4444` 32 \| - Warning: `#f59e0b` 33 \| 34 \| Accent Colors: 35 \| - Accent Purple: `#8b5cf6` 36 \| - Accent Pink: `#ec4899` 37 \| 38 \| ### Layout Requirements 39 \| 40 \| Form Container: 41 \| - Center the entire form on the page 42 \| - Maximum width: `600px` 43 \| - Apply appropriate background color 44 \| - Add shadow for depth 45 \| - Include padding and margin specifications 46 \| 47 \| Form Fields: 48 \| - Center-align all form elements 49 \| - Consistent spacing between fields 50 \| - Full-width input fields within container 51 \| - Proper alignment of labels and inputs 52 \| 53 \| ### Typography Standards 54 \| 55 \| Font Specifications: 56 \| - Use web-safe fonts or Google Fonts 57 \| - Define font sizes for headings, labels, and inputs 58 \| - Set appropriate line heights 59 \| - Apply font weights for hierarchy 60 \| 61 \| Text Styling: 62 \| - Form title styling 63 \| - Legend text styling 64 \| - Label text styling 65 \| - Input text styling 66 \| - Placeholder text styling 67 \| 68 \| ### Input Field Styling 69 \| 70 \| Text Inputs (text, email, password, tel, url, search, number): 71 \| - Border style and color 72 \| - Border radius for rounded corners 73 \| - Padding inside inputs 74 \| - Background color 75 \| - Focus state with color change 76 \| - Transition effects 77 \| 78 \| Select Dropdowns: 79 \| - Custom styling to match text inputs 80 \| - Consistent height and padding 81 \| - Hover and focus states 82 \| 83 \| Textarea: 84 \| - Resize property handling 85 \| - Consistent styling with other inputs 86 \| - Appropriate height 87 \| 88 \| Radio Buttons & Checkboxes: 89 \| - Custom styling or enhanced default appearance 90 \| - Spacing between options 91 \| - Label alignment 92 \| 93 \| File Upload Inputs: 94 \| - Styled button appearance 95 \| - Consistent with overall design 96 \| 97 \| Range Slider: 98 \| - Custom track styling 99 \| - Custom thumb styling 100 \| - Color application 101 \| 102 \| Color Picker: 103 \| - Appropriate sizing 104 \| - Border styling 105 \| 106 \| Date/Time Inputs: 107 \| - Consistent styling with text inputs 108 \| - Calendar icon considerations 109 \| 110 \| ### Fieldset & Legend Styling 111 \| 112 \| Fieldset: 113 \| - Border styling 114 \| - Background color 115 \| - Padding and margin 116 \| - Border radius 117 \| - Box shadow (optional) 118 \| 119 \| Legend: 120 \| - Font size and weight 121 \| - Color application 122 \| - Positioning 123 \| - Background treatment 124 \| 125 \| ### Button Styling 126 \| 127 \| Submit Button: 128 \| - Use primary color scheme 129 \| - Hover state with color change 130 \| - Active/pressed state 131 \| - Padding and sizing 132 \| - Border radius 133 \| - Cursor pointer 134 \| - Transition effects 135 \| 136 \| Reset Button: 137 \| - Different color scheme from submit 138 \| - Similar hover and active states 139 \| - Consistent sizing with submit button 140 \| 141 \| ### Interactive States 142 \| 143 \| Implement the following states for interactive elements: 144 \| 145 \| Focus States: 146 \| - Visible focus indicators for all inputs 147 \| - Border color change 148 \| - Outline or box-shadow 149 \| - Smooth transitions 150 \| 151 \| Hover States: 152 \| - Button hover effects 153 \| - Input hover indicators 154 \| - Link hover effects (if any) 155 \| 156 \| Active States: 157 \| - Button pressed appearance 158 \| - Input active state 159 \| 160 \| Disabled States (Optional): 161 \| - Reduced opacity 162 \| - Different background color 163 \| - Cursor not-allowed 164 \| 165 \| ### Spacing & Layout 166 \| 167 \| Margins: 168 \| - Between fieldsets 169 \| - Between form groups 170 \| - Around form container 171 \| 172 \| Padding: 173 \| - Inside fieldsets 174 \| - Inside inputs 175 \| - Around labels 176 \| - Form container padding 177 \| 178 \| Line Breaks: 179 \| - Appropriate spacing after ` ` elements 180 \| - Consistent vertical rhythm 181 \| 182 \| ### Additional CSS Features to Implement 183 \| 184 \| Demonstrate knowledge of: 185 \| - Box Model: margin, padding, border, width, height 186 \| - Positioning: centering techniques 187 \| - Flexbox or Grid: for layout organization (optional enhancement) 188 \| - Pseudo-classes: :hover, :focus, :active, :checked 189 \| - Pseudo-elements: ::placeholder, ::before, ::after (optional) 190 \| - Transitions: smooth state changes 191 \| - Box-shadow: for depth and elevation 192 \| - Border-radius: for rounded corners 193 \| - Transform: subtle effects (optional) 194 \| - Custom Properties (CSS Variables): for color management (optional but recommended) 195 \| 196 \| ### Responsive Considerations 197 \| 198 \| Mobile-Friendly: 199 \| - Form should be readable on smaller screens 200 \| - Consider max-width and padding adjustments 201 \| - Touch-friendly input sizes (minimum 44px height recommended) 202 \| 203 \| --- 204 \| 205 \| ## Implementation Requirements 206 \| 207 \| ### CSS File Structure 208 \| Create a `styles.css` file in your repository: 209 \| ``` 210 \| your-repo-name/ 211 \| ├── index.html 212 \| ├── styles.css 213 \| └── README.md 214 \| ``` 215 \| 216 \| ### CSS Organization 217 \| Organize your CSS with: 218 \| - Reset/normalize styles (optional) 219 \| - CSS variables for colors (recommended) 220 \| - Layout styles 221 \| - Form container styles 222 \| - Input field styles 223 \| - Button styles 224 \| - Responsive styles (if applicable) 225 \| - Comments explaining major sections 226 \| 227 \| ### Linking CSS 228 \| - Link your stylesheet in the HTML `` section 229 \| - Ensure proper file path reference 230 \| 231 \| --- 232 \| 233 \| ## Submission Requirements 234 \| 235 \| ### Updated Repository Must Include: 236 \| 1. index.html - Your HTML form (from previous assignment) 237 \| 2. styles.css - Your complete CSS styling 238 \| 3. README.md - Updated to include: 239 \| - CSS implementation notes 240 \| - Color palette documentation 241 \| - Design decisions explanation 242 \| - Screenshots or description of styled form (optional) 243 \| 244 \| ### README Updates 245 \| Add a new section to your existing README: 246 \| - Styling Approach: Explain your CSS methodology 247 \| - Color Palette: Document the colors used 248 \| - Features Implemented: List CSS techniques applied 249 \| - Browser Compatibility: Note any browser-specific considerations 250 \| 251 \| --- 252 \| 253 \| ## Evaluation Criteria 254 \| 255 \| Design Implementation (40%): 256 \| - Adherence to color palette specifications 257 \| - Proper centering and layout 258 \| - Visual hierarchy and consistency 259 \| 260 \| CSS Quality (30%): 261 \| - Code organization and cleanliness 262 \| - Efficient use of selectors 263 \| - Proper use of CSS properties 264 \| 265 \| Interactive Features (20%): 266 \| - Functional hover, focus, and active states 267 \| - Smooth transitions 268 \| - User experience enhancements 269 \| 270 \| Documentation (10%): 271 \| - Updated README with styling information 272 \| - Code comments where appropriate 273 \| - Clear explanation of implementation 274 \| 275 \| --- 276 \| 277 \| ## Best Practices 278 \| 279 \| - Use meaningful class names (BEM methodology optional) 280 \| - Avoid inline styles - all styling in external CSS file 281 \| - Test in multiple browsers for compatibility 282 \| - Validate your CSS using W3C CSS Validator 283 \| - Keep specificity low - avoid overly complex selectors 284 \| - Comment your code for clarity 285 \| 286 \| --- 287 \| 288 \| ## Resources 289 \| 290 \| CSS Reference: 291 \| - [MDN CSS Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) 292 \| - [CSS-Tricks](https://css-tricks.com/) 293 \| - [Web.dev CSS Guide](https://web.dev/learn/css/) 294 \| 295 \| Color Tools: 296 \| - [Coolors.co](https://coolors.co/) - Color palette generator 297 \| - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Accessibility testing 298 \| 299 \| CSS Validation: 300 \| - [W3C CSS Validator](https://jigsaw.w3.org/css-validator/) 301 \| 302 \| --- 303 \| 304 \| Submission: Submit your updated GitHub repository link with all three files (index.html, styles.css, README.md) 305 \| 306 \| Deadline: [Insert appropriate deadline] 307 \| 308 \| Questions? [Insert contact information] 309 \| 310 \| --- 311 \| 312 \| 📄 Instructions Display Issue? 313 \| 314 \| If these assignment instructions are not displaying correctly or formatting appears broken, please visit the markdown version of this assignment at: [MD Link](https://github.com/Chacha-A-Chacha/IYF-weekend_academy/blob/main/season-9/css_forms.md) 315 \| -------------------------------------------------------------------------------- /season-9/final_project.md: -------------------------------------------------------------------------------- 1 \| # Final Project: React Responsive Design Implementation with Tailwind CSS 2 \| 3 \| ## Objective 4 \| Recreate the provided LG (desktop) design with perfect layout accuracy while demonstrating creativity through custom branding, content creation, and color system implementation. You will maintain exact spacing, component positioning, and layout structure from both designs while transforming the content to reflect your unique brand identity. 5 \| 6 \| --- 7 \| 8 \| ## Requirements 9 \| 10 \| ### 1. Design Implementation 11 \| - Provided Breakpoints (LG) 12 \| - Precisely replicate the spacing between all components 13 \| - Maintain exact photo and content positioning as shown in the designs 14 \| - Keep all layout proportions and component arrangements identical 15 \| - Grid/flex structures must match the original designs 16 \| 17 \| - What You MUST Keep 18 \| - Component spacing (margins, padding, gaps) 19 \| - Layout structure and grid systems 20 \| - Content hierarchy and positioning 21 \| - Image placement and aspect ratios 22 \| - Navigation structure and placement 23 \| 24 \| - What You MUST Change 25 \| - All text content (create your own brand story) 26 \| - Color scheme (develop your unique palette) 27 \| - Images (use your own high-quality imagery) 28 \| - Brand identity (logo, name, tagline) 29 \| - Icons and decorative elements 30 \| 31 \| ### 2. Technical Stack Requirements 32 \| - React (v18+): Functional components with hooks 33 \| - Tailwind CSS (v3+): All styling must use Tailwind utilities 34 \| - Component Structure: 35 \| ``` 36 \| src/ 37 \| ├── components/ 38 \| │ ├── layout/ 39 \| │ │ ├── Header.jsx 40 \| │ │ ├── Footer.jsx 41 \| │ │ └── Navigation.jsx 42 \| │ ├── sections/ 43 \| │ │ ├── Hero.jsx 44 \| │ │ ├── Features.jsx 45 \| │ │ └── [other sections] 46 \| │ └── common/ 47 \| │ ├── Card.jsx 48 \| │ ├── Button.jsx 49 \| │ └── [reusable components] 50 \| ├── assets/ 51 \| │ └── images/ 52 \| └── App.jsx 53 \| ``` 54 \| 55 \| ### 3. Responsive Design Requirements 56 \| - Breakpoint Implementation: 57 \| - SM: 640px and below (mobile) 58 \| - MD: 641px - 1023px (your creative interpretation) 59 \| - LG: 1024px and above (desktop) 60 \| 61 \| - MD and SM Breakpoint (Your Design): 62 \| - Create a tablet and mobile view that aligns with the LG design 63 \| - Must maintain visual consistency with the provided design 64 \| - Demonstrate smooth responsive transitions 65 \| 66 \| ### 4. Content & Branding Guidelines 67 \| 68 \| #### Brand Development 69 \| - Create a complete brand identity including: 70 \| - Brand name and tagline 71 \| - Value proposition 72 \| - Target audience definition 73 \| - Brand voice and tone 74 \| 75 \| #### Content Requirements 76 \| - All text must be original and relevant to your brand 77 \| - Minimum content sections: 78 \| - Hero with compelling headline and CTA 79 \| - At least 3 feature/service sections 80 \| - About/story section 81 \| - Contact/CTA section 82 \| - Content must be professionally written (no Lorem Ipsum in production) 83 \| 84 \| #### Image Requirements 85 \| - High-quality images only (minimum 1920x1080 for hero, 800x600 for cards) 86 \| - Properly optimized for web (WebP or optimized JPEG/PNG) 87 \| - Consistent visual style across all images 88 \| - Include alt text for accessibility 89 \| - Sources: Unsplash, Pexels, or original photography 90 \| - Must include image credits in README 91 \| 92 \| ### 5. Color System & Typography 93 \| 94 \| #### Color Palette 95 \| - Minimum 5 colors defined in Tailwind config: 96 \| - Primary (main brand color) 97 \| - Secondary (supporting color) 98 \| - Accent (CTA/highlight color) 99 \| - Neutral dark (text) 100 \| - Neutral light (backgrounds) 101 \| - Must pass WCAG AA contrast requirements 102 \| - Document color psychology and choice rationale 103 \| 104 \| #### Typography 105 \| - Define custom font stack in Tailwind config in case you are using a custom font 106 \| - Consistent type scale across breakpoints 107 \| - Minimum 3 font weight variations 108 \| 109 \| ### 6. Component Requirements 110 \| - Reusable Components (minimum): 111 \| - Button component with variants (primary, secondary, outline) 112 \| - Card component with props for customization 113 \| - Section wrapper component for consistent spacing 114 \| - Responsive image component with lazy loading 115 \| 116 \| - Component Best Practices: 117 \| - PropTypes or TypeScript interfaces 118 \| - Destructured props 119 \| - Conditional rendering for responsive behavior 120 \| - Custom hooks for repeated logic 121 \| 122 \| ### 7. Performance & Accessibility 123 \| - Lighthouse score requirements: 124 \| - Performance: 85+ 125 \| - Accessibility: 95+ 126 \| - Best Practices: 90+ 127 \| - SEO: 90+ 128 \| - Implement lazy loading for images 129 \| - Use React.memo for expensive components 130 \| - Proper semantic HTML structure 131 \| - Keyboard navigation support 132 \| 133 \| ### 8. Deployment Requirements 134 \| - Hosting Platforms (choose one): 135 \| - Vercel 136 \| - Netlify 137 \| - Railway 138 \| - Render 139 \| - GitHub Pages (with proper routing configuration) 140 \| 141 \| - Deployment Checklist: 142 \| - Environment variables properly configured 143 \| - Build optimization enabled 144 \| - Custom domain (optional but bonus points) 145 \| - SSL certificate active 146 \| - Analytics integration (Google Analytics or similar) 147 \| 148 \| --- 149 \| 150 \| ## Documentation Requirements 151 \| 152 \| ### README.md Structure 153 \| ```markdown 154 \| # [Your Brand Name] 155 \| 156 \| ## Live Demo 157 \| [Deployed URL] 158 \| 159 \| ## Project Overview 160 \| [Brief description of your brand and website purpose] 161 \| 162 \| ## Brand Identity 163 \| ### Color System 164 \| - Primary: #HEX (Usage rationale) 165 \| - Secondary: #HEX (Usage rationale) 166 \| - [Continue for all colors] 167 \| 168 \| ### Typography 169 \| - Headings: [Font choice + reasoning] 170 \| - Body: [Font choice + reasoning] 171 \| 172 \| ## Design Decisions 173 \| ### Layout Adherence 174 \| - How spacing was measured and implemented 175 \| - Tools used for design accuracy 176 \| 177 \| ### Creative Departures 178 \| - Content strategy explanation 179 \| - Brand positioning rationale 180 \| - MD breakpoint design decisions 181 \| 182 \| ## Component Architecture 183 \| [Explanation of component structure and reusability strategy] 184 \| 185 \| ## Performance Optimizations 186 \| [List of implemented optimizations] 187 \| 188 \| ## Image Credits 189 \| [Proper attribution for all images used] 190 \| 191 \| ## Installation & Setup 192 \| [Clear setup instructions] 193 \| 194 \| ## Technologies Used 195 \| - React version 196 \| - Tailwind CSS version 197 \| - Additional packages 198 \| 199 \| ## Challenges & Solutions 200 \| [At least 3 technical challenges faced and how you solved them] 201 \| 202 \| ## Future Improvements 203 \| [At least 3 planned enhancements] 204 \| ``` 205 \| 206 \| --- 207 \| 208 \| ## Submission Requirements 209 \| 210 \| 1. GitHub Repository: 211 \| - Public repository with clear commit history 212 \| - Meaningful commit messages 213 \| - .gitignore properly configured 214 \| - No node_modules or build folders 215 \| 216 \| 2. Code Quality: 217 \| - ESLint configuration included 218 \| - Consistent code formatting (Prettier recommended) 219 \| - No console.logs in production 220 \| - Comments for complex logic 221 \| 222 \| 3. Deliverables: 223 \| - Live deployed URL 224 \| - GitHub repository link 225 \| - README.md as specified 226 \| - Screenshots in `/screenshots` folder showing: 227 \| - LG breakpoint implementation 228 \| - MD breakpoint implementation 229 \| - SM breakpoint implementation 230 \| - Lighthouse scores 231 \| 232 \| ## Git Commit History Requirements 233 \| 234 \| ### Continuous Development Documentation 235 \| Your Git commit history serves as proof of your development journey and will be thoroughly reviewed as part of the grading process. 236 \| 237 \| Required Commit Patterns: 238 \| - Daily/Regular Commits: Demonstrate consistent work progress throughout the project timeline 239 \| - Incremental Changes: Each commit should represent logical, incremental progress (e.g., "Add Header component", "Implement responsive navigation", "Update color system") 240 \| - Meaningful Messages: Clear, descriptive commit messages that explain what was changed and why 241 \| - Reasonable Commit Size: Commits should contain related changes only, not entire features or sections at once 242 \| 243 \| Academic Integrity Warning: 244 \| - Git histories showing irregular patterns such as: 245 \| - Entire project uploaded in 1-3 commits 246 \| - Suspiciously large commits with unrelated changes 247 \| - All commits occurring within a 24-48 hour period before deadline 248 \| - Evidence of force-pushed or rewritten history to hide work patterns 249 \| - Commits with timestamps that don't align with actual development time 250 \| 251 \| Will be flagged for academic review and may result in: 252 \| - Automatic 50% grade reduction 253 \| - Requirement to explain your development process in person 254 \| - Potential course failure for confirmed plagiarism/contract cheating 255 \| 256 \| Expected Commit Frequency: 257 \| - Minimum 3-4 commits per week over the project duration 258 \| - At least 30-40 meaningful commits for the entire project 259 \| - Natural progression visible (setup → components → styling → content → refinement) 260 \| 261 \| Example of Acceptable Commit History: 262 \| ``` 263 \| Day 1-3: Initial setup, Tailwind configuration 264 \| Day 4-7: Header and navigation components 265 \| Day 8-10: Hero section implementation 266 \| Day 11-14: Feature cards and responsive behavior 267 \| [Continue with steady progress...] 268 \| ``` 269 \| 270 \| Remember: Your commit history tells the story of your learning and problem-solving journey. Authentic work naturally produces frequent, incremental commits as you test, debug, and refine your code. 271 \| 272 \| --- 273 \| 274 \| ## Grading Rubric 275 \| 276 \| ### Layout Accuracy (25%) 277 \| - Pixel-perfect spacing replication (10%) 278 \| - Component positioning accuracy (10%) 279 \| - Responsive behavior correctness (5%) 280 \| 281 \| ### Creative Implementation (20%) 282 \| - Brand cohesiveness and originality (10%) 283 \| - Content quality and relevance (5%) 284 \| - Color system effectiveness (5%) 285 \| 286 \| ### Technical Implementation (25%) 287 \| - React component architecture (10%) 288 \| - Tailwind CSS usage and customization (10%) 289 \| - Code organization and reusability (5%) 290 \| 291 \| ### Performance & Accessibility (15%) 292 \| - Lighthouse scores meeting requirements (10%) 293 \| - Accessibility implementation (5%) 294 \| 295 \| ### Documentation (10%) 296 \| - README completeness and clarity (5%) 297 \| - Code comments and documentation (5%) 298 \| 299 \| ### Deployment & Polish (5%) 300 \| - Successful deployment with no errors (3%) 301 \| - Overall polish and attention to detail (2%) 302 \| 303 \| ### Bonus Points (up to 5%) 304 \| - Custom domain implementation 305 \| - Advanced React patterns (Context API, custom hooks) 306 \| - Animation and micro-interactions 307 \| - Dark mode implementation 308 \| - Progressive Web App features 309 \| 310 \| --- 311 \| 312 \| ## Resources 313 \| 314 \| ### Design Tools 315 \| - [Figma](https://figma.com) - For measuring spacing 316 \| - [ColorSpace](https://mycolor.space) - Color palette generator 317 \| - [Tailwind CSS Documentation](https://tailwindcss.com/docs) 318 \| 319 \| ### Image Resources 320 \| - [Unsplash](https://unsplash.com) - High-quality free images 321 \| - [Pexels](https://pexels.com) - Free stock photos 322 \| - [TinyPNG](https://tinypng.com) - Image optimization 323 \| 324 \| ### Testing Tools 325 \| - [Responsive Design Checker](https://responsivedesignchecker.com) 326 \| - [WAVE](https://wave.webaim.org) - Accessibility testing 327 \| - Chrome DevTools Lighthouse 328 \| 329 \| --- 330 \| 331 \| -------------------------------------------------------------------------------- /lessons/lesson-5_more_html.md: -------------------------------------------------------------------------------- 1 \| # What is Semantic HTML? 2 \| 3 \| Semantic HTML means using HTML elements that clearly describe their meaning and purpose to both browsers and developers. Instead of just using generic containers like ` ` and ``, semantic HTML uses elements that explain what the content actually is. 4 \| 5 \| ## Real-world analogy: 6 \| Think of a house: 7 \| - Non-semantic: Every room is just labeled "room" 8 \| - Semantic: Rooms are labeled "kitchen," "bedroom," "bathroom," etc. 9 \| 10 \| ## Example comparison: 11 \| 12 \| Non-semantic HTML: 13 \| ```html 14 \| 15 \| 16 \| Home 17 \| 18 \| 19 \| 20 \| 21 \| My Blog Post 22 \| 23 \| 24 \| 25 \| © 2024 26 \| 27 \| ``` 28 \| 29 \| Semantic HTML: 30 \| ```html 31 \| 32 \| 33 \| Home 34 \| 35 \| 36 \| 37 \| 38 \| My Blog Post 39 \| 40 \| 41 \| 42 \| © 2024 43 \| 44 \| ``` 45 \| 46 \| ## Why We Need Semantic HTML: 47 \| 48 \| 1. Accessibility 49 \| - Screen readers can better understand the content 50 \| - Helps users with disabilities navigate the page 51 \| - Provides better context for assistive technologies 52 \| 53 \| 2. SEO (Search Engine Optimization) 54 \| - Search engines better understand your content 55 \| - Helps determine the importance of different content 56 \| - Can improve your search rankings 57 \| 58 \| 3. Code Maintainability 59 \| - Easier for developers to understand the code 60 \| - Makes code more consistent across projects 61 \| - Reduces the need for excessive class names 62 \| 63 \| 4. Mobile Optimization 64 \| - Helps browsers understand content priority 65 \| - Better adaptation for different screen sizes 66 \| - Improved content display on various devices 67 \| 68 \| ## Common Semantic Elements: 69 \| 70 \| ```html 71 \| - Page or section header 72 \| - Navigation links 73 \| - Main content 74 \| - Self-contained content 75 \| - Thematic grouping 76 \| - Sidebar content 77 \| - Page or section footer 78 \| - Self-contained media 79 \| - Caption for figure 80 \| - Time or date 81 \| - Highlighted text 82 \| - Additional details 83 \| - Summary for details 84 \| ``` 85 \| 86 \| ## Form-specific Semantic Elements: 87 \| 88 \| ```html 89 \| - Container for form 90 \| - Group of related fields 91 \| - Caption for fieldset 92 \| - Label for form control 93 \| - Calculation result 94 \| ``` 95 \| 96 \| ## Benefits in Practice: 97 \| 98 \| 1. Better Code Structure 99 \| ```html 100 \| 101 \| 102 \| 103 \| Welcome 104 \| 105 \| 106 \| 107 \| 108 \| 109 \| 110 \| Welcome 111 \| 112 \| 113 \| ``` 114 \| 115 \| 2. Enhanced Form Organization 116 \| ```html 117 \| 118 \| 119 \| Personal Info 120 \| 121 \| 122 \| 123 \| 124 \| 125 \| 126 \| 127 \| Personal Info 128 \| Name: 129 \| 130 \| 131 \| ``` 132 \| 133 \| 3. Better Navigation Structure 134 \| ```html 135 \| 136 \| 137 \| 138 \| Home 139 \| 140 \| 141 \| 142 \| 143 \| 144 \| 145 \| Home 146 \| 147 \| 148 \| ``` 149 \| 150 \| 151 \| 152 \| ```html 153 \| 154 \| 155 \| 156 \| 157 \| 158 \| HTML Forms Lesson 159 \| 183 \| 184 \| 185 \| 186 \| 187 \| Learn HTML Forms 188 \| Welcome to our comprehensive guide on HTML forms and input elements. 189 \| 190 \| 191 \| 192 \| 193 \| 194 \| 195 \| 196 \| 197 \| Registration Form Example 198 \| 199 \| 200 \| 201 \| 202 \| 203 \| 204 \| Personal Information 205 \| 206 \| 207 \| 208 \| Full Name: 209 \| 210 \| 212 \| 213 \| 214 \| 215 \| 216 \| Email Address: 217 \| 218 \| 220 \| 221 \| 222 \| 223 \| 224 \| Date of Birth: 225 \| 226 \| 227 \| 228 \| 229 \| 230 \| 231 \| Account Details 232 \| 233 \| 234 \| 235 \| Password: 236 \| 237 \| 241 \| 242 \| 243 \| 244 \| 245 \| Age: 246 \| 247 \| 248 \| 249 \| 250 \| 251 \| 252 \| Preferences 253 \| 254 \| 255 \| 256 \| Preferred Contact Method: 257 \| 258 \| Email 259 \| 260 \| 261 \| Phone 262 \| 263 \| 264 \| 265 \| 266 \| Interests: 267 \| 268 \| Coding 269 \| 270 \| 271 \| Design 272 \| 273 \| 274 \| 275 \| 276 \| Country: 277 \| 288 \| 289 \| 290 \| 291 \| 292 \| Bio: 293 \| 295 \| 296 \| 297 \| 298 \| 299 \| 300 \| Profile Picture 301 \| 302 \| Upload Picture: 303 \| 305 \| 306 \| 307 \| 308 \| 309 \| 310 \| 311 \| 312 \| 313 \| 314 \| 315 \| 316 \| 317 \| 318 \| 319 \| 320 \| This is a demonstration of HTML form elements and semantic HTML structure. 321 \| 322 \| 323 \| 324 \| ``` 325 \| -------------------------------------------------------------------------------- /season-9/course_outline.md: -------------------------------------------------------------------------------- 1 \| # Web Development Course: JavaScript + Python + Linux 2 \| ## Goal: Create Versatile Full-Stack Web Application Developers 3 \| Target Audience: Complete beginners 4 \| Duration: 12 weeks 5 \| Outcome: Job-ready developers with JavaScript, Python, and Linux proficiency 6 \| 7 \| --- 8 \| 9 \| ## PHASE 1: Foundation & Frontend (Weeks 1-6) 10 \| Building core web development skills with command-line proficiency 11 \| 12 \| ### Week 1: Web Development Foundations 13 \| - Lesson 1: Introduction to Web Development 14 \| - Front-end vs back-end overview, web stack introduction 15 \| - How websites work: browsers, servers, HTTP basics 16 \| - Resources: [MDN Web Docs Overview](https://developer.mozilla.org/en-US/docs/Learn) 17 \| - Activity: Explore live websites using browser DevTools 18 \| 19 \| - Lesson 2: Development Environment Setup 20 \| - Install VS Code, browsers, Git 21 \| - Basic computer setup for development 22 \| - Resources: [VS Code Setup Guide](https://code.visualstudio.com/docs/setup/setup-overview) 23 \| - Project: Create first project folder and file structure 24 \| 25 \| ### Week 2: HTML + Command Line Basics 26 \| - Lesson 3: HTML Fundamentals 27 \| - HTML syntax, semantic tags, document structure 28 \| - Forms and common elements 29 \| - Resources: [MDN HTML Basics](https://developer.mozilla.org/en-US/docs/Learn/HTML) 30 \| - Project: Build a personal profile page 31 \| 32 \| - Lesson 4: Command Line Essentials 33 \| - File navigation, creation, deletion 34 \| - Directory management, basic text commands 35 \| - Resources: [MDN Command Line Crash Course](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 36 \| - Activity: Navigate and manage project files via terminal 37 \| 38 \| ### Week 3: CSS + Git Version Control 39 \| - Lesson 5: CSS Fundamentals 40 \| - Selectors, properties, box model 41 \| - Flexbox and Grid layouts 42 \| - Resources: [CSS Tricks Complete Guide](https://css-tricks.com/guides/) 43 \| - Interactive: [Flexbox Froggy](https://flexboxfroggy.com/), [Grid Garden](https://cssgridgarden.com/) 44 \| 45 \| - Lesson 6: Git & GitHub 🐧 46 \| - Git basics via command line 47 \| - Repository creation, commits, pushing 48 \| - Resources: [GitHub's Git Handbook](https://guides.github.com/introduction/git-handbook/) 49 \| - Project: Version control your profile page 50 \| 51 \| ### Week 4: Responsive Design + Advanced CSS 52 \| - Lesson 7: Responsive Web Design 53 \| - Mobile-first approach, media queries 54 \| - CSS frameworks introduction (Bootstrap/Tailwind) 55 \| - Resources: [Responsive Web Design Basics](https://web.dev/responsive-web-design-basics/) 56 \| - Project: Make profile page fully responsive 57 \| 58 \| - Lesson 8: CSS Preprocessors & Build Tools 59 \| - Introduction to Sass/SCSS 60 \| - Basic task automation concepts 61 \| - Resources: [Sass Documentation](https://sass-lang.com/guide) 62 \| 63 \| ### Week 5: JavaScript Fundamentals 64 \| - Lesson 9: JavaScript Basics 65 \| - Variables, data types, operators 66 \| - Functions, scope, conditionals 67 \| - Resources: [JavaScript.info Fundamentals](https://javascript.info/first-steps) 68 \| - Project: Build an interactive calculator 69 \| 70 \| - Lesson 10: JavaScript DOM Manipulation 71 \| - Selecting elements, event listeners 72 \| - Dynamic content creation 73 \| - Resources: [MDN DOM Manipulation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents) 74 \| - Project: Interactive to-do list 75 \| 76 \| ### Week 6: Advanced JavaScript + Package Management 77 \| - Lesson 11: Async JavaScript 78 \| - Promises, async/await, fetch API 79 \| - Working with external APIs 80 \| - Resources: [Modern JS Async Guide](https://javascript.info/async) 81 \| - Project: Weather app using public API 82 \| 83 \| - Lesson 12: Node.js & npm 🐧 84 \| - Package management via command line 85 \| - Basic Node.js concepts 86 \| - Resources: [npm Documentation](https://docs.npmjs.com/) 87 \| - Activity: Set up Node.js project structure 88 \| 89 \| --- 90 \| 91 \| ## PHASE 2: React Frontend Framework (Weeks 7-8) 92 \| Deep dive into modern frontend development 93 \| 94 \| ### Week 7: React Fundamentals 95 \| - Lesson 13: React Basics 96 \| - Components, JSX, props 97 \| - Create React App setup 98 \| - Resources: [React Official Tutorial](https://react.dev/learn) 99 \| - Project: Convert to-do list to React components 100 \| 101 \| - Lesson 14: React State & Hooks 102 \| - useState, useEffect 103 \| - Component lifecycle 104 \| - Resources: [React Hooks Reference](https://react.dev/reference/react) 105 \| - Activity: Add state management to weather app 106 \| 107 \| ### Week 8: React Ecosystem + Styling 108 \| - Lesson 15: React Router & Navigation 109 \| - Single-page application concepts 110 \| - Client-side routing 111 \| - Resources: [React Router Documentation](https://reactrouter.com/) 112 \| 113 \| - Lesson 16: Styling React Applications 114 \| - CSS Modules, styled-components 115 \| - Tailwind CSS integration 116 \| - Resources: [Tailwind CSS Documentation](https://tailwindcss.com/docs) 117 \| - Project: Multi-page React portfolio site 118 \| 119 \| --- 120 \| 121 \| ## PHASE 3: Backend Development - Dual Stack (Weeks 9-10) 122 \| Introducing Python while reinforcing JavaScript backend concepts 123 \| 124 \| ### Week 9: Backend Fundamentals - Node.js Express 125 \| - Lesson 17: Express.js Server Setup 126 \| - RESTful API concepts 127 \| - Routing, middleware 128 \| - Resources: [Express.js Getting Started](https://expressjs.com/en/starter/installing.html) 129 \| - Project: Notes API with Express 130 \| 131 \| - Lesson 18: Database Integration - MongoDB 132 \| - NoSQL concepts, Mongoose ODM 133 \| - CRUD operations 134 \| - Resources: [MongoDB University](https://learn.mongodb.com/) 135 \| - Activity: Connect notes API to database 136 \| 137 \| ### Week 10: Python Backend Introduction 138 \| - Lesson 19: Python Fundamentals for Web 139 \| - Python syntax (leveraging JS knowledge) 140 \| - Virtual environments setup 141 \| - Resources: [Python for JavaScript Developers](https://www.freecodecamp.org/news/learn-python-for-javascript-developers-handbook/) 142 \| - Activity: Recreate JavaScript exercises in Python 143 \| 144 \| - Lesson 20: Flask Web Framework 145 \| - Flask vs Express comparison 146 \| - Building equivalent REST API 147 \| - Resources: [Flask Official Tutorial](https://flask.palletsprojects.com/tutorial/) 148 \| - Project: Rebuild notes API in Flask (comparative analysis) 149 \| 150 \| --- 151 \| 152 \| ## PHASE 4: Full-Stack Integration & DevOps (Weeks 11-12) 153 \| Advanced integration, deployment, and professional workflows 154 \| 155 \| ### Week 11: Authentication & Advanced Backend 156 \| - Lesson 21: User Authentication 157 \| - JWT implementation (both Express & Flask) 158 \| - Password hashing, security basics 159 \| - Resources: [JWT.io Introduction](https://jwt.io/introduction/) 160 \| - Project: Add user auth to both APIs 161 \| 162 \| - Lesson 22: Bash Scripting & Automation 163 \| - Script writing for development tasks 164 \| - Environment management, deployment scripts 165 \| - Resources: [Bash Scripting Tutorial](https://linuxcommand.org/lc3_writing_shell_scripts.php) 166 \| - Activity: Create deployment automation scripts 167 \| 168 \| ### Week 12: Deployment & Final Projects 169 \| - Lesson 23: Production Deployment 170 \| - Heroku, Vercel, Railway deployment 171 \| - Environment variables, production configurations 172 \| - Resources: [Deployment Best Practices](https://12factor.net/) 173 \| - Project: Deploy both versions of full-stack app 174 \| 175 \| - Lesson 24: Capstone Project Presentation 176 \| - Choose-Your-Stack Challenge: Build a complete application using either: 177 \| - React + Express + MongoDB, OR 178 \| - React + Flask + PostgreSQL 179 \| - Portfolio Requirements: Working app, GitHub repo, deployed version 180 \| - Presentation: Demo to class, discuss technical decisions 181 \| 182 \| --- 183 \| 184 \| ## Learning Outcomes & Employability Skills 185 \| 186 \| By Week 12, graduates will demonstrate: 187 \| - ✅ Frontend Proficiency: React applications with modern styling 188 \| - ✅ Backend Versatility: API development in both Node.js and Python 189 \| - ✅ Database Skills: MongoDB and relational database basics 190 \| - ✅ DevOps Foundation: Command line fluency, Git workflows, deployment 191 \| - ✅ Problem-Solving: Technology-agnostic approach to web development 192 \| - ✅ Portfolio: 3-5 deployable projects showcasing full-stack capabilities 193 \| 194 \| --- 195 \| 196 \| ## Essential Resources & Tools 197 \| 198 \| ### Core Learning Platforms 199 \| - [MDN Web Docs](https://developer.mozilla.org/) - Web standards reference 200 \| - [JavaScript.info](https://javascript.info/) - Modern JavaScript tutorial 201 \| - [React.dev](https://react.dev/) - Official React documentation 202 \| - [Flask Documentation](https://flask.palletsprojects.com/) - Python web framework 203 \| - [freeCodeCamp](https://www.freecodecamp.org/) - Interactive coding exercises 204 \| 205 \| ### Interactive Learning 206 \| - [Flexbox Froggy](https://flexboxfroggy.com/) - CSS Flexbox game 207 \| - [Grid Garden](https://cssgridgarden.com/) - CSS Grid game 208 \| - [Command Line Challenge](https://cmdchallenge.com/) - Terminal skills practice 209 \| 210 \| ### Development Tools 211 \| - [VS Code](https://code.visualstudio.com/) - Code editor 212 \| - [GitHub](https://github.com/) - Version control hosting 213 \| - [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) - Cloud database 214 \| - [Postman](https://www.postman.com/) - API testing 215 \| 216 \| --- 217 \| 218 \| ## What's Included vs. Excluded (12-Week Constraints) 219 \| 220 \| ### INCLUDED (High-Impact, Job-Ready Skills) 221 \| - JavaScript & Python: Both languages for backend versatility 222 \| - React: Industry-standard frontend framework (not Vue/Angular) 223 \| - Linux/Command Line: Integrated throughout, not separate module 224 \| - Git Workflows: Professional version control practices 225 \| - API Development: REST principles in both stacks 226 \| - Database Basics: MongoDB focus with SQL concepts 227 \| - Deployment: Cloud platforms and automation scripts 228 \| - Authentication: JWT and security fundamentals 229 \| 230 \| ### EXCLUDED (Beyond 12-Week Scope) 231 \| - Multiple Frontend Frameworks: No Vue.js or Angular 232 \| - Advanced Python Frameworks: No Django (too complex for beginners) 233 \| - TypeScript: JavaScript-first approach for beginners 234 \| - Advanced DevOps: No Docker/Kubernetes (basic deployment only) 235 \| - Testing Frameworks: Basic manual testing only 236 \| - Advanced Database Design: Basic CRUD operations focus 237 \| - GraphQL: REST API focus only 238 \| - Mobile Development: Web-first approach 239 \| 240 \| ### Career Progression Pathways 241 \| Graduates are prepared for: 242 \| - Junior Full-Stack Developer positions 243 \| - Frontend Developer roles (React specialist) 244 \| - Backend Developer opportunities (Node.js or Python) 245 \| - Continued learning in DevOps, AI/ML, or mobile development 246 \| 247 \| --- 248 \| 249 \| ## Teaching Philosophy & Success Factors 250 \| 251 \| ### Project-Based Learning 252 \| Every concept is immediately applied in hands-on projects, building a portfolio that demonstrates real-world capabilities. 253 \| 254 \| ### Comparative Learning 255 \| Students learn by comparing Express vs Flask, understanding concepts rather than memorizing syntax. 256 \| 257 \| ### Industry Alignment 258 \| Curriculum reflects current job market demands: 68% of entry-level positions prefer full-stack capabilities. 259 \| 260 \| ### Confidence Building 261 \| Early command-line integration reduces technology intimidation and builds professional development practices. 262 \| 263 \| This curriculum produces T-shaped developers: broad technological competence with the ability to specialize based on career interests and market opportunities. --------------------------------------------------------------------------------

Your Name's Portfolio

My Skills

My Projects

First Web Page

Coming Soon Project

Contact Me

` to `

My Skills

My Projects

First Web Page

My Blog Post

Main Article Title

Important Subsection

Article Title

First Section

My Blog Post

Welcome

Learn HTML Forms

Registration Form Example