├── Phase-1 ├── 1.1-computer-basics │ ├── README.md │ └── exercises │ │ ├── 1-computer-basics.html │ │ ├── 2-mouse-practice.html │ │ ├── 3-keyboard-practice.html │ │ ├── 4-file-management.html │ │ ├── 5-operating-systems.html │ │ ├── 6-command-practice.html │ │ └── 7-package-managers.html └── 1.2-internet-fundamentals │ ├── README.md │ └── exercises │ ├── 1-internet-basics.html │ ├── 2-internet-concepts.html │ ├── 3-browser-practice.html │ ├── 4-online-safety.html │ └── 5-email-basics.html └── README.md /Phase-1/1.1-computer-basics/README.md: -------------------------------------------------------------------------------- 1 | # 🖥️ 1.1 Computer Basics (کمپیوٹر کی بنیادی باتیں) 2 | 3 | > "The computer was born to solve problems that did not exist before." — Bill Gates 4 | 5 | > "کمپیوٹر ان مسائل کو حل کرنے کے لیے پیدا ہوا تھا جو پہلے موجود نہیں تھے۔" — بل گیٹس 6 | 7 | ## 🎯 Overview (جائزہ) 8 | 9 | This section covers the fundamental aspects of using a computer, designed for absolute beginners. The content is available in both English and Urdu to ensure accessibility. 10 | 11 | یہ سیکشن کمپیوٹر کے استعمال کے بنیادی پہلوؤں کو احاطہ کرتا ہے، جو مکمل طور پر نئے صارفین کے لیے ڈیزائن کیا گیا ہے۔ مواد انگریزی اور اردو دونوں زبانوں میں دستیاب ہے تاکہ رسائی کو یقینی بنایا جا سکے۔ 12 | 13 | ## 📚 Topics Covered (شامل موضوعات) 14 | 15 | ### 1️⃣ Basic Computer Operations (بنیادی کمپیوٹر آپریشنز) 16 | 17 | 🔌 Power on/off (پاور آن/آف) 18 | 🖥️ Desktop navigation (ڈیسک ٹاپ نیویگیشن) 19 | 🪟 Windows management (ونڈوز مینجمنٹ) 20 | 21 | ### 2️⃣ Mouse Skills (ماؤس کی مہارتیں) 22 | 23 | 🖱️ Clicking (کلک کرنا) 24 | ⚡ Double-clicking (ڈبل کلک) 25 | 📌 Right-clicking (رائٹ کلک) 26 | ✋ Dragging (ڈریگنگ) 27 | 28 | ### 3️⃣ Keyboard Skills (کی بورڈ کی مہارتیں) 29 | 30 | ⌨️ Basic typing (بنیادی ٹائپنگ) 31 | 🔑 Special keys (خصوصی کیز) 32 | ⚡ Keyboard shortcuts (کی بورڈ شارٹ کٹس) 33 | 34 | ### 4️⃣ Command Line Basics (کمانڈ لائن کی بنیادی باتیں) 35 | 36 | 💻 Understanding the terminal (ٹرمینل کو سمجھنا) 37 | 📝 Basic commands (بنیادی کمانڈز) 38 | 🧭 Navigation (نیویگیشن) 39 | 40 | ## 🎮 Interactive Exercises (انٹرایکٹو مشقیں) 41 | 42 | 1. `1-computer-basics.html` - Desktop simulation for basic operations 43 | 2. `2-mouse-practice.html` - Mouse control exercises 44 | 3. `3-keyboard-practice.html` - Typing and keyboard practice 45 | 4. `4-file-management.html` - File and folder operations 46 | 5. `5-operating-systems.html` - OS interface practice 47 | 6. `6-command-practice.html` - Command line practice 48 | 7. `7-package-managers.html` - Package management basics 49 | 50 | ## 💡 Pro Tips 51 | 52 | 1. 🎯 Practice regularly - even 15 minutes a day makes a difference 53 | 2. 🔄 Repeat exercises until you feel comfortable 54 | 3. 📝 Take notes in your preferred language 55 | 4. 🤝 Help others learn - teaching reinforces your knowledge 56 | 57 | ## 🌟 Achievement Checklist 58 | 59 | - [ ] Complete computer basics simulation 60 | - [ ] Master mouse control exercises 61 | - [ ] Achieve typing practice goals 62 | - [ ] Successfully manage files and folders 63 | - [ ] Navigate OS interfaces confidently 64 | - [ ] Execute basic terminal commands 65 | - [ ] Install and manage packages 66 | 67 | ## 🎉 Remember 68 | 69 | > "Every expert was once a beginner." 70 | > 71 | > "ہر ماہر کبھی نیا سیکھنے والا تھا۔" 72 | 73 | Start with the basics and progress at your own pace. Each small step brings you closer to computer proficiency! 74 | -------------------------------------------------------------------------------- /Phase-1/1.1-computer-basics/exercises/1-computer-basics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Computer Basics (کمپیوٹر کی بنیادی باتیں) 7 | 128 | 129 | 130 |
131 |
132 | 133 |
134 | 135 |

Computer Basics Practice (کمپیوٹر کی بنیادی مشق)

136 | 137 |
138 |

Instructions (ہدایات):

139 |

Practice basic computer operations like clicking, dragging windows, and using menus.

140 |

کلک کرنے، ونڈوز کو کھینچنے اور مینو استعمال کرنے جیسے بنیادی کمپیوٹر آپریشنز کی مشق کریں۔

141 |
142 | 143 |
144 |

Current Task (موجودہ کام):

145 |

Double-click on the Documents folder

146 |
147 | 148 |
149 | 150 |
151 | 152 |
Documents
153 |
154 |
155 | 156 |
Pictures
157 |
158 | 159 | 160 |
161 |
Open (کھولیں)
162 |
Copy (کاپی)
163 |
Delete (حذف)
164 |
165 | 166 | 167 |
168 |
Start (شروع)
169 |
170 |
171 |
172 | 173 | 279 | 280 | -------------------------------------------------------------------------------- /Phase-1/1.1-computer-basics/exercises/2-mouse-practice.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mouse Practice (ماؤس پریکٹس) 7 | 73 | 74 | 75 |
76 |
77 | 78 |
79 | 80 |

Mouse Practice Exercise (ماؤس پریکٹس)

81 | 82 |
83 |

Instructions (ہدایات):

84 |

Click on the green circles as they appear. Try to click as many as you can!

85 |

!سبز دائروں پر کلک کریں جب وہ ظاہر ہوں۔ جتنے زیادہ ہو سکیں کلک کرنے کی کوشش کریں

86 |
87 | 88 |
89 | Score: 0 90 |
91 | 92 |
93 |
Click!
94 |
95 | 96 | 97 |
98 | 99 | 157 | 158 | -------------------------------------------------------------------------------- /Phase-1/1.1-computer-basics/exercises/3-keyboard-practice.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Keyboard Practice (کی بورڈ پریکٹس) 7 | 113 | 114 | 115 |
116 |
117 | 118 |
119 | 120 |

Keyboard Practice (کی بورڈ پریکٹس)

121 | 122 |
123 |

Instructions (ہدایات):

124 |

Type the text shown below. Practice typing accurately and build speed gradually.

125 |

نیچے دکھائے گئے متن کو ٹائپ کریں۔ درستگی کے ساتھ ٹائپنگ کی مشق کریں اور آہستہ آہستہ رفتار بڑھائیں۔

126 |
127 | 128 |
129 |
130 |
WPM (رفتار)
131 |
0
132 |
133 |
134 |
Accuracy (درستگی)
135 |
100%
136 |
137 |
138 |
Time (وقت)
139 |
0:00
140 |
141 |
142 | 143 |
144 |
145 | 146 |
147 | 148 |
149 | 150 | 151 |
152 | 153 | 292 | 293 | -------------------------------------------------------------------------------- /Phase-1/1.1-computer-basics/exercises/4-file-management.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | File Management Practice (فائل مینجمنٹ پریکٹس) 7 | 81 | 82 | 83 |
84 |
85 | 86 |
87 | 88 |

File Management Practice (فائل مینجمنٹ پریکٹس)

89 | 90 |
91 |

Instructions (ہدایات):

92 |

Practice organizing files and folders. Follow the tasks below.

93 |

فائلوں اور فولڈرز کو منظم کرنے کی مشق کریں۔ نیچے دیے گئے کاموں کی پیروی کریں۔

94 |
95 | 96 |
97 |

Current Task (موجودہ کام):

98 |

Create a new folder named "Documents"

99 |
100 | 101 |
102 | 103 |
104 | 105 |
106 | 107 | 108 | 109 | 110 |
111 |
112 | 113 | 201 | 202 | -------------------------------------------------------------------------------- /Phase-1/1.1-computer-basics/exercises/5-operating-systems.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Operating Systems Basics (آپریٹنگ سسٹم کی بنیادی باتیں) 7 | 112 | 113 | 114 |
115 |
116 | 117 |
118 | 119 |

Operating Systems Basics (آپریٹنگ سسٹم کی بنیادی باتیں)

120 | 121 |
122 |

Instructions (ہدایات):

123 |

Learn about different operating systems and their basic features. Click on each OS to learn more.

124 |

مختلف آپریٹنگ سسٹمز اور ان کی بنیادی خصوصیات کے بارے میں جانیں۔ مزید جاننے کے لیے ہر آپریٹنگ سسٹم پر کلک کریں۔

125 |
126 | 127 |
128 |
129 |

🪟 Windows (ونڈوز)

130 |
131 |
    132 |
  • Most commonly used operating system (سب سے زیادہ استعمال ہونے والا آپریٹنگ سسٹم)
  • 133 |
  • User-friendly interface (صارف دوست انٹرفیس)
  • 134 |
  • Wide software compatibility (وسیع سافٹ ویئر مطابقت)
  • 135 |
  • Regular updates and security features (باقاعدہ اپ ڈیٹس اور سیکیورٹی فیچرز)
  • 136 |
137 |
138 |
139 | 140 |
141 |

🍎 macOS (میک او ایس)

142 |
143 |
    144 |
  • Apple's operating system (ایپل کا آپریٹنگ سسٹم)
  • 145 |
  • Sleek design and smooth performance (خوبصورت ڈیزائن اور بہترین کارکردگی)
  • 146 |
  • Built-in security features (بلٹ ان سیکیورٹی فیچرز)
  • 147 |
  • Integration with other Apple devices (دیگر ایپل ڈیوائسز کے ساتھ مربوط)
  • 148 |
149 |
150 |
151 | 152 |
153 |

🐧 Linux (لینکس)

154 |
155 |
    156 |
  • Free and open-source (مفت اور اوپن سورس)
  • 157 |
  • High security and stability (زیادہ سیکیورٹی اور استحکام)
  • 158 |
  • Many different distributions (مختلف ڈسٹریبیوشنز)
  • 159 |
  • Great for programming (پروگرامنگ کے لیے بہترین)
  • 160 |
161 |
162 |
163 |
164 | 165 |
166 |

Quick Quiz (فوری کوئز)

167 |
168 |

Which operating system is most commonly used worldwide?

169 |
170 | 173 | 176 | 179 |
180 | 181 |
182 |
183 |
184 | 185 | 252 | 253 | -------------------------------------------------------------------------------- /Phase-1/1.1-computer-basics/exercises/6-command-practice.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Command Practice (کمانڈ پریکٹس) 7 | 90 | 91 | 92 |
93 |
94 | 95 |
96 | 97 |

Command Line Practice (کمانڈ لائن پریکٹس)

98 | 99 |
100 |

Instructions (ہدایات):

101 |

Practice basic command line operations. Type commands to complete the tasks.

102 |

بنیادی کمانڈ لائن آپریشنز کی مشق کریں۔ کام مکمل کرنے کے لیے کمانڈز ٹائپ کریں۔

103 |
104 | 105 |
106 |

Current Task (موجودہ کام):

107 |

List all files in the current directory using 'ls' command

108 |
109 | 110 |
111 |
112 |
113 | 114 |
115 |
116 | 117 |
118 |

Available Commands (دستیاب کمانڈز):

119 | 126 |
127 |
128 | 129 | 270 | 271 | -------------------------------------------------------------------------------- /Phase-1/1.1-computer-basics/exercises/7-package-managers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Package Managers (پیکج مینیجرز) 7 | 84 | 85 | 86 |
87 |
88 | 89 |
90 | 91 |

Package Managers (پیکج مینیجرز)

92 | 93 |
94 |

What are Package Managers? (پیکج مینیجرز کیا ہیں؟)

95 |

Package managers help you install, update, and manage software on your computer.

96 |

پیکج مینیجرز آپ کے کمپیوٹر پر سافٹ ویئر انسٹال، اپ ڈیٹ اور منظم کرنے میں مدد کرتے ہیں۔

97 |
98 | 99 |
100 |

🪟 Windows - Chocolatey

101 |
choco install firefox
102 |

Installs Firefox browser (فائر فاکس براؤزر انسٹال کرتا ہے)

103 | 104 |
choco upgrade all
105 |

Updates all installed packages (تمام انسٹال شدہ پیکجز کو اپ ڈیٹ کرتا ہے)

106 |
107 | 108 |
109 |

🍎 macOS - Homebrew

110 |
brew install node
111 |

Installs Node.js (نوڈ جے ایس انسٹال کرتا ہے)

112 | 113 |
brew update
114 |

Updates Homebrew and its packages (ہوم برو اور اس کے پیکجز کو اپ ڈیٹ کرتا ہے)

115 |
116 | 117 |
118 |

🐧 Linux - APT

119 |
sudo apt install git
120 |

Installs Git (گٹ انسٹال کرتا ہے)

121 | 122 |
sudo apt update && sudo apt upgrade
123 |

Updates system and installed packages (سسٹم اور انسٹال شدہ پیکجز کو اپ ڈیٹ کرتا ہے)

124 |
125 | 126 |
127 |

Practice Exercise (مشق)

128 |
129 |

Current Task (موجودہ کام):

130 |

131 | 132 | 133 |
134 |
135 |
136 | 137 | 192 | 193 | -------------------------------------------------------------------------------- /Phase-1/1.2-internet-fundamentals/README.md: -------------------------------------------------------------------------------- 1 | # 🌐 1.2 Internet Fundamentals (انٹرنیٹ کی بنیادی باتیں) 2 | 3 | > "The Internet is becoming the town square for the global village of tomorrow." — Bill Gates 4 | 5 | > "انٹرنیٹ کل کے عالمی دیہات کا چوک بنتا جا رہا ہے۔" — بل گیٹس 6 | 7 | ## 🎯 Overview (جائزہ) 8 | 9 | This section introduces the basic concepts of the Internet and how to use it safely and effectively. The content is designed for beginners and is available in both English and Urdu. 10 | 11 | یہ سیکشن انٹرنیٹ کے بنیادی تصورات اور اسے محفوظ اور مؤثر طریقے سے استعمال کرنے کا تعارف کراتا ہے۔ یہ مواد نئے صارفین کے لیے ڈیزائن کیا گیا ہے اور انگریزی اور اردو دونوں زبانوں میں دستیاب ہے۔ 12 | 13 | ## 📚 Topics Covered (شامل موضوعات) 14 | 15 | ### 1️⃣ What is the Internet? (انٹرنیٹ کیا ہے؟) 16 | 17 | 🌍 Basic concepts (بنیادی تصورات) 18 | 🔄 How the Internet works (انٹرنیٹ کیسے کام کرتا ہے) 19 | 🔌 Types of connections (کنکشن کی اقسام) 20 | 21 | ### 2️⃣ Internet Safety (انٹرنیٹ سیفٹی) 22 | 23 | 🔒 Personal information protection (ذاتی معلومات کی حفاظت) 24 | 🛡️ Safe browsing habits (محفوظ براؤزنگ کی عادات) 25 | 🔑 Password security (پاس ورڈ سیکیورٹی) 26 | 27 | ### 3️⃣ Web Browsers (ویب براؤزرز) 28 | 29 | 🏃‍♂️ Popular browsers (مشہور براؤزرز) 30 | 🖥️ Browser interface (براؤزر انٹرفیس) 31 | 🧭 Basic navigation (بنیادی نیویگیشن) 32 | 33 | ### 4️⃣ Internet Services (انٹرنیٹ سروسز) 34 | 35 | 📧 Email (ای میل) 36 | 🔍 Search engines (سرچ انجنز) 37 | 🤝 Social media basics (سوشل میڈیا کی بنیادی باتیں) 38 | 39 | ## 🎮 Interactive Exercises (انٹرایکٹو مشقیں) 40 | 41 | 1. `1-internet-basics.html` - Understanding Internet concepts 42 | 2. `2-internet-concepts.html` - Advanced concepts (DNS, HTTP) 43 | 3. `3-browser-practice.html` - Web browser navigation practice 44 | 4. `4-online-safety.html` - Internet safety scenarios 45 | 5. `5-email-basics.html` - Email usage practice 46 | 47 | ## 💡 Pro Tips 48 | 49 | 1. 🔒 Always prioritize your online safety 50 | 2. 🔍 Learn to verify information sources 51 | 3. 📝 Keep track of your passwords securely 52 | 4. 🔄 Regularly update your browsers 53 | 5. 🛡️ Think before clicking unknown links 54 | 55 | ## 🌟 Achievement Checklist 56 | 57 | - [ ] Understand basic internet concepts 58 | - [ ] Navigate web browsers confidently 59 | - [ ] Create and manage secure passwords 60 | - [ ] Use email effectively 61 | - [ ] Practice safe browsing habits 62 | 63 | ## ⚠️ Safety First! (پہلے حفاظت!) 64 | 65 | > "The Internet is like a highway - follow the safety rules to reach your destination securely." 66 | > 67 | > "انٹرنیٹ ایک شاہراہ کی طرح ہے - اپنی منزل تک محفوظ طریقے سے پہنچنے کے لیے حفاظتی اصولوں پر عمل کریں۔" 68 | 69 | ### 🛡️ Golden Rules: 70 | 71 | 1. Never share personal information 72 | 2. Use strong, unique passwords 73 | 3. Be cautious with unknown links 74 | 4. Keep your software updated 75 | 5. Trust your instincts 76 | 77 | ## 🎉 Remember 78 | 79 | > "The Internet is not just about consuming content, it's about connecting with knowledge and opportunities." 80 | > 81 | > "انٹرنیٹ صرف مواد استعمال کرنے کے بارے میں نہیں ہے، یہ علم اور مواقع سے جڑنے کے بارے میں ہے۔" 82 | 83 | Take your time to learn and explore. The digital world has endless possibilities! 84 | -------------------------------------------------------------------------------- /Phase-1/1.2-internet-fundamentals/exercises/1-internet-basics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Internet Basics (انٹرنیٹ کی بنیادی باتیں) 7 | 92 | 93 | 94 |
95 |
96 | 97 |
98 | 99 |

Understanding the Internet (انٹرنیٹ کو سمجھنا)

100 | 101 |
102 |

What is the Internet? (انٹرنیٹ کیا ہے؟)

103 |

The Internet is a global network of computers that allows people to share information and communicate with each other.

104 |

انٹرنیٹ کمپیوٹرز کا ایک عالمی نیٹ ورک ہے جو لوگوں کو معلومات کا اشتراک کرنے اور ایک دوسرے سے بات چیت کرنے کی اجازت دیتا ہے۔

105 |
106 | 107 |
108 |

How Computers Connect (کمپیوٹر کیسے جڑتے ہیں)

109 |
110 |
💻
111 |
112 |
🌐
113 |
114 |
📱
115 |
116 |
117 | 118 |
119 |

Types of Connections (کنکشن کی اقسام)

120 | 125 |
126 | 127 |
128 |

Quick Quiz (فوری کوئز)

129 |
130 |
131 | 132 |
133 |
134 | 135 | 223 | 224 | -------------------------------------------------------------------------------- /Phase-1/1.2-internet-fundamentals/exercises/2-internet-concepts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Internet Concepts (انٹرنیٹ کے بنیادی تصورات) 7 | 152 | 153 | 154 |
155 |
156 | 157 |
158 | 159 |

Internet Concepts (انٹرنیٹ کے بنیادی تصورات)

160 | 161 |
162 |
163 |
164 | 165 |
166 |
DNS (Domain Name System)
167 |
168 | The Domain Name System (DNS) is like a phone book for the internet. It converts website names into IP addresses. 169 |
170 |
171 |
172 |
173 | 174 |
175 |
176 | 177 |
178 |
179 | 180 |
181 |
HTTP/HTTPS
182 |
183 | HTTP (Hypertext Transfer Protocol) is how web browsers and servers communicate. HTTPS adds security through encryption. 184 |
185 |
186 |
187 |
188 | 189 |
190 |
191 | 192 |
193 |
194 | 195 |
196 |
Client-Server Architecture
197 |
198 | The internet works on a client-server model. Your device (client) requests information from servers that host websites and services. 199 |
200 |
201 |
202 |
203 | 204 |
205 |
206 | 207 |
208 |
209 | 210 |
211 |
Web Browsers
212 |
213 | Web browsers are programs that let you access websites. They use different engines to display web content. 214 |
215 | 216 |

Browser Engines

217 |
218 | 219 |
220 | 221 |

Developer Tools

222 |
223 |
224 |

Elements Panel

225 |

Inspect and modify HTML/CSS

226 |
227 |
228 |

Console

229 |

JavaScript debugging and messages

230 |
231 |
232 |

Network

233 |

Monitor web requests and performance

234 |
235 |
236 | 237 |

Cross-browser Compatibility

238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 |
FeatureChromeFirefoxSafari
HTML5
CSS Grid
WebP Images
264 | 265 |
266 |
267 | 268 |
269 |
270 |
271 | 272 | 518 | 519 | -------------------------------------------------------------------------------- /Phase-1/1.2-internet-fundamentals/exercises/3-browser-practice.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Browser Practice (ویب براؤزر پریکٹس) 7 | 109 | 110 | 111 |
112 |
113 | 114 |
115 | 116 |

Web Browser Practice (ویب براؤزر پریکٹس)

117 | 118 |
119 |

Current Task: Click the Back button

120 |

Practice using browser navigation buttons and features.

121 |
122 | 123 |
124 |
125 |
Home Page
126 |
New Tab +
127 |
128 |
129 | 134 |
https://www.example.com
135 |
136 |
137 | Home 138 | Search 139 | Email 140 |
141 |
142 |

Welcome to Browser Practice

143 |

This is a simulation to help you learn browser navigation.

144 |
145 |
146 |
147 | 148 | 272 | 273 | -------------------------------------------------------------------------------- /Phase-1/1.2-internet-fundamentals/exercises/4-online-safety.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Internet Safety Practice (انٹرنیٹ سیفٹی پریکٹس) 7 | 113 | 114 | 115 |
116 |
117 | 118 |
119 | 120 |

Internet Safety Practice (انٹرنیٹ سیفٹی پریکٹس)

121 | 122 |
123 |
124 |
125 | 126 |
127 | 💡 128 | Always be careful with your personal information online! 129 |
130 | 131 |
132 |

Scenario

133 |
134 |
135 | 136 |
137 |
138 | 139 | 300 | 301 | -------------------------------------------------------------------------------- /Phase-1/1.2-internet-fundamentals/exercises/5-email-basics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Email Basics (ای میل کی بنیادی باتیں) 7 | 134 | 135 | 136 |
137 |
138 | 139 |
140 | 141 |

Email Basics (ای میل کی بنیادی باتیں)

142 | 143 |
144 |

Current Task: Compose a new email

145 |

Practice creating and sending emails.

146 |
147 | 148 |
149 | 152 | 157 | 183 |
184 |
185 |
186 | 187 | 357 | 358 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Modern Web App Development with LLM Assistance 2 | 3 | ![image](https://github.com/user-attachments/assets/1dfd0edb-1b09-4e93-a652-41b5fca1a498) 4 | 5 | ## 📚 Table of Contents 6 | 7 | - [Introduction](#introduction) 8 | - [Prerequisites](#prerequisites) 9 | - [Learning Path](#learning-path) 10 | - [Getting Started](#getting-started) 11 | - [Contributing](#contributing) 12 | 13 | ## 🎯 Introduction 14 | 15 | This comprehensive guide will take you from a complete beginner to a proficient web developer. The curriculum is designed to be beginner-friendly while covering all essential aspects of modern web development. 16 | 17 | ## 🛠️ Prerequisites 18 | 19 | - A computer with internet access 20 | - Basic computer literacy 21 | - Willingness to learn and practice 22 | - Text editor (VS Code recommended) 23 | 24 | ## 📖 Learning Path 25 | 26 | ### **Phase 1: 💻 Computer Fundamentals and Internet Basics** 27 | 28 | #### **1.1 Computer Basics** 29 | 30 | - 📂 File Management 31 | - Basic file operations 32 | - Directory structure 33 | - File organization 34 | - 🖥️ Operating Systems (Windows, Linux, Mac) 35 | - Basic operations 36 | - System settings 37 | - User interface 38 | - ⌨️ Command Line And Terminal Basics 39 | - Basic commands (cd, ls, mkdir, etc.) 40 | - File navigation 41 | - Package managers (apt, brew, chocolatey) 42 | 43 | #### **1.2 Internet Fundamentals** 44 | 45 | - 🌐 How the Internet Works 46 | - DNS 47 | - HTTP/HTTPS 48 | - Client-Server architecture 49 | - 🏃‍♂️ Web Browsers 50 | - Developer Tools 51 | - Browser engines 52 | - Cross-browser compatibility 53 | - 📧 Email and Online Safety 54 | - Email basics 55 | - Internet security 56 | - Best practices 57 | 58 | ### **Phase 2: 🎓 Programming Fundamentals** 59 | 60 | #### **2.1 Basic Programming Concepts** 61 | 62 | - 📝 Programming Basics 63 | - Variables and Data Types 64 | - Control Flow 65 | - Functions and Methods 66 | - Object-Oriented Programming 67 | - 🧮 Problem Solving 68 | - Algorithms 69 | - Logic building 70 | - Debugging basics 71 | 72 | #### **2.2 Version Control** 73 | 74 | - 📝 Git Fundamentals 75 | - Basic Git commands 76 | - Repository management 77 | - Commit history 78 | - 🤝 Collaborative Development 79 | - GitHub/GitLab basics 80 | - Branching and merging 81 | - Pull requests 82 | - Code review basics 83 | 84 | ### **Phase 3: 🎨 Web Development Fundamentals** 85 | 86 | #### **3.1 HTML and CSS** 87 | 88 | - 📄 HTML 89 | - Semantic HTML 90 | - Forms and validation 91 | - Accessibility best practices 92 | - 🎨 CSS 93 | - Box model 94 | - Layout systems 95 | - Animations and transitions 96 | - 🅱️ Bootstrap 97 | - 🌪️ Tailwind CSS 98 | - 🏗️ Build a static website 99 | 100 | #### **3.2 JavaScript Fundamentals** 101 | 102 | - ⚡ JavaScript Syntax 103 | - 🔄 DOM Manipulation 104 | - 🖼️ Build a Simple Image Slider 105 | - 📦 Modern JavaScript Features 106 | - ES6+ features 107 | - Modules 108 | - Promises and async/await 109 | 110 | #### **3.3 TypeScript Fundamentals** 111 | 112 | - 📘 TypeScript Syntax 113 | - 🔄 Convert JS code into TS 114 | - 🏷️ Type systems and interfaces 115 | 116 | ### **Phase 4: ⚛️ Advanced JavaScript and React Fundamentals** 117 | 118 | #### **4.1 Advanced JavaScript & TypeScript** 119 | 120 | - 🔥 Latest ES version Features 121 | - ⚡ Asynchronous JavaScript 122 | - 🧪 Testing fundamentals 123 | - Unit testing 124 | - Integration testing 125 | - Jest and React Testing Library 126 | 127 | #### **4.2 React Fundamentals** 128 | 129 | - 📦 Package Managers (npm, yarn, pnpm) 130 | - ⚛️ React 131 | - 🔄 Component Lifecycle 132 | - 🎯 Event Handling 133 | - 🧩 Component Composition 134 | - 🔍 Performance Optimization 135 | 136 | ### **Phase 5: 🔥 Mastering React and Next.js** 137 | 138 | #### **5.1 Advanced React** 139 | 140 | - 🎣 Hooks 141 | - 🌍 Global State Management 142 | - Redux 143 | - Context API 144 | - Zustand 145 | - 🛣️ React Router 146 | - 📱 Responsive Design Patterns 147 | 148 | #### **5.2 Next.js Fundamentals** 149 | 150 | - ⚡ Next.js 151 | - 🖥️ Server-Side Rendering (SSR) 152 | - 📄 Static Site Generation (SSG) 153 | - 🔄 Incremental Static Regeneration (ISR) 154 | - 🚀 API Routes 155 | - 📱 Mobile-First Development 156 | 157 | ### **Phase 6: 🔧 Backend Development and Databases** 158 | 159 | #### **6.1 Backend Development** 160 | 161 | - 🟢 Node.js 162 | - 🐍 Python 163 | - 🐘 PHP 164 | - 🔌 RESTful APIs 165 | - 🔐 Authentication & Authorization 166 | - 🔒 Security Best Practices 167 | 168 | #### **6.2 Databases** 169 | 170 | - 📊 SQL Databases 171 | - PostgreSQL 172 | - MySQL 173 | - 📓 NoSQL Databases 174 | - MongoDB 175 | - Redis 176 | - 🔍 Database Design 177 | - 📈 Performance Optimization 178 | 179 | ### **Phase 7: 🚀 Deployment and Advanced Topics** 180 | 181 | #### **7.1 Deployment & DevOps** 182 | 183 | - 🌐 Deployment Strategies 184 | - ☁️ Cloud Hosting 185 | - AWS 186 | - Vercel 187 | - Netlify 188 | - 🔄 CI/CD Pipelines 189 | - 📊 Monitoring and Analytics 190 | - 🔍 SEO Optimization 191 | - 🎯 Performance Optimization 192 | 193 | ## 🚀 Getting Started 194 | 195 | 1. Clone this repository 196 | 2. Follow the phases in order 197 | 3. Complete the exercises in each section 198 | 4. Build the suggested projects 199 | 5. Practice regularly 200 | 201 | ## 🤝 Contributing 202 | 203 | Contributions are welcome! Please feel free to submit a Pull Request. 204 | 205 | ## 🌟 Additional Resources 206 | 207 | - MDN Web Docs 208 | - freeCodeCamp 209 | - Frontend Masters 210 | - YouTube tutorials 211 | - Stack Overflow 212 | - Dev.to 213 | 214 | Remember: The key to becoming a successful developer is consistent practice and building projects. Don't just read - code along and experiment! 215 | --------------------------------------------------------------------------------