Ethio Coders (ኢትዮ ኮደርስ)

🔰 JavaScript Cheat Sheet

💻 100 Days Coding Roadmap 🚀👨‍💻 📍 Days 1–10: Programming Basics – Choose a language: Python / JavaScript / C++ – Learn syntax, variables, loops, conditionals – Write basic programs & challenges 📍 Days 11–20: Data Structures – Arrays, Lists, Stacks, Queues – Practice using built-in methods – Start solving problems on LeetCode or Codeforces 📍 Days 21–30: Algorithms Fundamentals – Sorting: Bubble, Merge, Quick – Searching: Binary, Linear – Time & space complexity (Big O notation) 📍 Days 31–40: Object-Oriented Programming – Classes, Objects, Inheritance, Polymorphism – Apply OOP to build small real-world projects 📍 Days 41–50: Intermediate DSA – HashMaps, Sets, Linked Lists – Recursion, Backtracking basics – Solve 50+ problems for logic building 📍 Days 51–60: Advanced DSA – Trees, Graphs, Heaps, Tries – Dynamic Programming intro – Participate in contests (CodeChef, HackerRank) 📍 Days 61–70: Web Basics (HTML/CSS/JS) – Build portfolio website – Learn responsive design – DOM manipulation with JavaScript 📍 Days 71–80: Backend + APIs – Learn Node.js / Django / Flask – Create REST APIs, connect with frontend – Use databases like MongoDB / MySQL 📍 Days 81–90: Projects & GitHub – Build 2–3 full-stack apps – Use Git, GitHub, README files – Deploy apps (Netlify, Vercel, Render) 📍 Days 91–100: Interview & Capstone – Revise top 100 DSA patterns – Mock interviews, resume prep – Complete one big project and publish it

✅ Programming Project Ideas 💻👨‍💻 1️⃣ Beginner Friendly Projects 🌱 • To-Do List App (Web/Desktop) • Calculator (GUI or CLI) • Personal Diary App • Quiz App with Timer • Currency Converter 2️⃣ Web Dev Projects 🌐 • Notes App with login • Blog Platform (CRUD + Auth) • Real-time Chat App • Weather App using APIs • Task Manager with Flask/Node.js 3️⃣ Java Projects ☕️ • Student Management System • Library Management App • Online Banking System (console) • Inventory Tracker • Hotel Booking App 4️⃣ JavaScript Projects ⚡️ • Stopwatch / Timer • Expense Tracker (with charts) • Drag & Drop To-Do Board • Typing Speed Test • Image Slider with Lightbox 5️⃣ C/C++ Projects 🧠 • Simple Shell/Command Line Tool • Banking App using File I/O • Tic Tac Toe / Snake Game • Hospital Management System • Contact Book CLI 6️⃣ Advanced Full-Stack Projects 🚀 • Job Portal with Admin Panel • Social Media Dashboard • Video Streaming App • SaaS App (Subscription-based) • Chat + Video Calling Platform 7️⃣ DevOps / Cloud Based 🌩 • CI/CD Pipeline with GitHub Actions • Dockerized Web App • Cloud Cost Monitor (API based) • Auto Backup Script (AWS/GCP) • Kubernetes Deployment Demo 8️⃣ Open Source Contribution 💡 • Fix bugs in GitHub repos • Improve docs or UI • Create a CLI tool • Build browser extensions • Participate in Hacktoberfest https://t.me/Ethio_Coders_channel

What is your favourite coding language?👨‍💻 ❤️ Python 👍 JavaScript 😍 Java 😄 C++ 👌 C# 💯 Other

ሙሉ ኢቫንጋዲ (Evangadi.com) ለ ስኮላርሽፕ (scholarship) ተማሪዎች ሲሰጡ የነበሩ ኮርሶችን በ #500 ብር ብቻ ማግኘት ትችላላችሁ : 🔹 ከመሠረታዊ ኮምፒዩተር እስከ ፉል-ስታክ (full-stack development ) 🔹 Interactive, dynamic learning with real projects 🔹HTML, CSS, JavaScript, React, Node.js እና ሌሎችም What you Get ? 👉ሙሉ የተማሩትን የ ቀጥታ ስርጭት (live session ) 👉Practice exercises and weekly assignments 📝 👉ካለፉት ባቾች የተወሰደ ሙሉ የሌክቸር ቪዲዮ 👉ፕሮጀክቶችን የምትሠሩበት 💥 Gain practical experience and enhance your job prospects in Ethiopia’s growing tech market! 👉 Act now! Secure this life-changing opportunity for 500 birr only DM 📲: @Web_developer13

👉 Most Useful React Hooks - useState( ) - useEffect( ) - useContext( ) - useCallback( ) - useMemo( ) - useReducer( ) - useLayoutEffect( ) - useRef( ) - & Custom Hooks

Markdown/content ↓ Build process ↓ HTML pages ↓ Browser Dynamic blog Posts can be stored in a database. Browser ↓ Backend ↓ Database ↓ Posts ↓ Backend ↓ Browser Both approaches can produce a blog. 6️⃣ What About YouTube? A platform like YouTube is highly dynamic. When you log in, the application can retrieve information such as: Your subscriptions Recommended videos Watch history Comments Playlists Notifications Much of this information depends on data and application logic. A simplified architecture might look like: User ↓ Frontend ↓ Backend / APIs ↓ Databases & other services ↓ Backend ↓ Frontend ↓ User 🧠 Easy Way to Remember Think of a restaurant menu. Static The menu is printed on paper. Everyone receives essentially the same predefined menu. Dynamic The restaurant system can generate information based on: Current availability Customer Location Time Special offers The information can change based on the situation. Again, this is only an analogy, but it helps distinguish the concepts. Static ≠ non-interactive Dynamic ≠ every element changes The key difference is how content and application behaviour are produced and delivered.

This concept leads directly into one of JavaScript's most important advanced topics: Closures. We'll cover closures separately later. 1️⃣9️⃣ Pure Functions A pure function generally: 1. Produces the same output for the same input. 2. Doesn't modify external state.

function add(a, b) {
    return a + b;
}

Every time: add(2, 3) returns: 5. A function that depends on changing external state can behave differently. Understanding pure functions becomes particularly useful when working with modern frontend frameworks. 🧠 Real-World Example Imagine an online shopping application.

function calculateDiscount(price, discount) {
    return price - discount;
}

function calculateTax(price, taxRate) {
    return price * taxRate;
}

let price = 2000;
let discountedPrice = calculateDiscount(price, 300);
let tax = calculateTax(discountedPrice, 0.18);

console.log(discountedPrice);
console.log(tax);

Instead of putting everything into one huge block of code, each function handles a specific responsibility. 🧠 Double Tap ❤️ For More

🌐 Web Development Roadmap — Part 5 🖥️ What Is a Web Server? A web server is a system that receives requests from clients, processes them, and sends web content or data back. In simple terms:

A web server receives a request and provides the requested website or resource.

Remember the basic flow: Browser    ↓ Request    ↓ Web Server    ↓ Response    ↓ Browser 🧩 What Does a Web Server Do? A web server mainly performs three important tasks. 1️⃣ Receives Requests When you open a website, your browser sends a request. For example: Browser    ↓ "Give me the homepage"    ↓ Web Server 2️⃣ Processes the Request The server determines what needs to be returned. For a simple website, it might find an HTML file. For a web application, it might need to: Receive request       ↓ Run application logic       ↓ Check database       ↓ Prepare result 3️⃣ Sends a Response The server sends something back to the browser. It could be: HTML CSS JavaScript Images JSON data Other files For example: Server    ↓ HTML + CSS + JavaScript    ↓ Browser 📁 Static Website Example Suppose a server has these files:

website/
│
├── index.html
├── style.css
├── script.js
└── logo.png

When someone requests the homepage, the server can send these resources to the browser. The browser then uses them to display the website. ⚙️ Dynamic Website Example Now imagine an online shopping application. You request:

/product/123

The server might: Browser    ↓ Request product 123    ↓ Server    ↓ Check application logic    ↓ Database    ↓ Find product 123    ↓ Server prepares response    ↓ Browser The response could contain information such as: Product name Price Description Availability Reviews This is why web servers are particularly important for web applications. 🏪 Real-World Example Think about a restaurant. You are the customer. You ask:

"I'd like a pizza."

The restaurant receives your request, prepares the pizza, and gives it to you. Similarly: You / Browser       ↓     Request       ↓ Server       ↓ Processes request       ↓ Response       ↓ Browser The analogy isn't exact, but it helps understand the basic idea. 🖥️ Web Server Software A physical or virtual computer can act as a server, but web server software is what handles HTTP requests and serves web content. Common examples include: Nginx Apache HTTP Server Microsoft IIS Later, when we learn backend development, you'll also encounter application servers and runtimes such as Node.js. For now, remember that "server" can refer to the machine/system, while "web server" can also refer to the software responsible for serving web content. 🌐 Server vs Website These are not the same thing. A website is the web content and application users interact with. A server is the system that can store, process, and deliver that content. For example: Website    ↓ HTML CSS JavaScript Images Data Server    ↓ Stores/serves resources Processes requests Communicates with databases 🧠 Important Concept: Server Doesn't Always Mean One Physical Computer Modern websites can run on: Virtual machines Cloud infrastructure Containers Distributed systems Multiple servers A large application might have many servers working together. We don't need to dive into that yet. We'll understand it later when we study deployment, cloud, scalability, and DevOps. 🔄 Quick Revision Remember: Browser = Client Server = Receives requests and provides resources/services Request = What the client asks for Response = What the server sends back The basic cycle: Client   ↓ Request   ↓ Server   ↓ Processing   ↓ Response   ↓ Client This simple concept will appear repeatedly throughout the course. For Part-6 👍

🌐 Web Development Roadmap — Part 1 🧠 What Is Web Development? Web development is the process of creating, building, and maintaining websites and web applications that people use through a web browser. In simple words:

Web development is the work involved in making websites and web applications function on the Internet.

When you visit a website such as an online store, news website, banking website, or social media platform, web development is responsible for making that experience possible. 🌍 Real-World Example Imagine you visit an online shopping website. You can: See products, Search for products, Open a product page, Add products to a cart, Create an account, Log in, Make a payment, Track an order All of these features require web development. 🎨 Frontend The frontend is what you see and interact with. For example: Buttons, Menus, Images, Product cards, Forms, Text, Animations, Navigation The main technologies we'll use for frontend development are: HTML + CSS + JavaScript Later, we'll learn technologies such as React and TypeScript. ⚙️ Backend The backend works behind the scenes. For example, when you log into a website: 1. You enter your username and password. 2. The frontend sends that information to the server. 3. The backend receives it. 4. The backend checks the information. 5. The backend communicates with the database. 6. The server sends a response back. 7. The frontend shows the result to you. We'll eventually learn: Node.js + Express.js + Databases 🗄️ Database A database stores information that an application needs. For an online store, it might contain: User accounts, Products, Prices, Orders, Reviews, Inventory 🧩 Putting It Together Think of a web application like a restaurant: • Frontend = Dining area - This is what the customer sees and interacts with. • Backend = Kitchen - It processes requests and performs the work behind the scenes. • Database = Storage room - It stores the information the restaurant needs. 💡 Website vs Web Application A website is often primarily used to provide information. Examples: News website, Company website, Blog, Portfolio A web application usually allows users to perform actions and interact with data. Examples: Online banking, Gmail, Google Docs, Online shopping, Project management software 👨‍💻 What Does a Web Developer Do? A web developer can work on things such as: Building webpages, Creating interactive features, Connecting frontend and backend, Creating APIs, Working with databases, Fixing bugs, Improving performance, Making websites responsive, Testing applications, Deploying websites, Maintaining existing applications Types of Developers: • Frontend Developer: Focuses mainly on what users see and interact with. • Backend Developer: Focuses mainly on servers, APIs, databases, authentication, and application logic. • Full-Stack Developer: Works on both frontend and backend. 📝 Double Tap ❤️ For Part-2

✅ Web Development Projects You Should Build as a Beginner 🚀💻 1️⃣ Landing Page ➤ HTML and CSS basics ➤ Responsive layout ➤ Mobile-first design ➤ Real use case like a product or service 2️⃣ To-Do App ➤ JavaScript events and DOM ➤ CRUD operations ➤ Local storage for data ➤ Clean UI logic 3️⃣ Weather App ➤ REST API usage ➤ Fetch and async handling ➤ Error states ➤ Real API data rendering 4️⃣ Authentication App ➤ Login and signup flow ➤ Password hashing basics ➤ JWT tokens ➤ Protected routes 5️⃣ Blog Application ➤ Frontend with React ➤ Backend with Express or Django ➤ Database integration ➤ Create, edit, delete posts 6️⃣ E-commerce Mini App ➤ Product listing ➤ Cart logic ➤ Checkout flow ➤ State management 7️⃣ Dashboard Project ➤ Charts and tables ➤ API-driven data ➤ Pagination and filters ➤ Admin-style layout 8️⃣ Deployment Project ➤ Deploy frontend on Vercel ➤ Deploy backend on Render ➤ Environment variables ➤ Production-ready build 💡 One solid project beats ten half-finished ones.

• Components • JSX • Props • State • Events • Conditional rendering • Lists • Forms • Hooks • useState • useEffect • useRef • Context • Custom hooks • Component architecture Then progress toward: • Routing • Data fetching • State management • Performance • Server-side rendering concepts For modern React applications, learn Next.js after React fundamentals. 🟣 PHASE 16 — TypeScript In 2026, TypeScript is an important addition to a JavaScript developer's toolkit. Learn: • Type annotations • Primitive types • Arrays • Objects • Functions • Interfaces • Type aliases • Union types • Intersection types • Generics • Enums • Type narrowing • Utility types • unknown • never • Type inference • Modules • Type-safe APIs Don't use TypeScript as a substitute for learning JavaScript fundamentals. 🟣 PHASE 17 — Testing Learn: • Unit testing • Test structure • Assertions • Mocking • Test isolation Tools: • Vitest • Jest Browser testing Learn tools such as: • Playwright • Cypress Understand: • Unit tests • Integration tests • End-to-end tests 🟣 PHASE 18 — Tooling Become comfortable with the modern JavaScript ecosystem. Package management • npm • package.json • package-lock.json • Semantic versioning Also understand alternatives such as: • pnpm • Yarn Build tooling Understand the purpose of: • Vite • Bundlers • Transpilation • Minification • Code splitting • Tree shaking You don't need to memorize every configuration option. 🟣 PHASE 19 — Code Quality Learn professional development practices. • ESLint • Prettier • Naming conventions • Project structure • Error handling • Logging • Environment configuration • Git • GitHub • Code reviews • Documentation • Clean code • Refactoring 🟣 PHASE 20 — Security JavaScript developers should understand: • XSS • CSRF • CORS • SQL injection • Authentication • Authorization • Password hashing • JWT • Sessions • Secure cookies • Input validation • Dependency vulnerabilities • Secrets management 🟣 PHASE 21 — Performance Learn how to make JavaScript applications faster. Browser performance • Rendering • Reflow • Repaint • DOM performance • Lazy loading • Code splitting • Caching • Debouncing • Throttling JavaScript performance • Memory usage • Garbage collection • Memory leaks • Profiling • Expensive operations • Big-O basics 🟣 PHASE 22 — Advanced Web APIs Eventually explore: • Web Workers • Service Workers • WebSockets • Server-Sent Events • IndexedDB • Web Components • Streams • Notifications • WebRTC basics These are advanced/specialized topics, so don't let them distract you from core JavaScript. 🤖 PHASE 23 — JavaScript + AI in 2026 Modern JavaScript developers should also understand how applications integrate AI. Learn: • Calling AI APIs • Streaming responses • Structured outputs • Tool/function calling concepts • Embeddings basics • Vector databases • RAG fundamentals • Authentication and API-key security • Building AI-powered web applications The goal isn't to become an AI researcher. It's to know how to build useful AI features into JavaScript applications. 🧠 PHASE 24 — Problem Solving & DSA Learn enough DSA to become a strong programmer and prepare for interviews. Data structures

🔰 Useful CSS Snippets

Hey, I have been participating in the Nexus New Year challenge. I want your help with the vote. Can you take a moment to first join the channel and like my project? I really appreciate your help. Link :https://t.me/nexus_tutorial/371

Python vs. Java Ever wondered what happens behind the scenes when you run a Python script or a Java program? Let’s find out: Python (CPython Runtime): - Python source code (.py) is compiled into bytecode automatically in memory. - Bytecode can also be cached in .pyc files, making re-runs faster by using the cached version. - The Import System loads modules and dependencies. - The Python Virtual Machine (PVM) interprets the bytecode line by line, making Python flexible but relatively slower. Java (JVM Runtime): - Java source code (.java) is compiled into .class bytecode using javac. - The Class Loader loads bytecode into the Java Runtime Environment (JVM). - Bytecode is verified and executed. - JVM uses both an Interpreter and a JIT Compiler, frequently used code (hot paths) is converted into native machine code, making Java faster.

• Never assume that a file is safe simply because the browser says it is an image or PDF. 🔹 12. Understand Background Jobs Some operations don't need to happen while the user waits. Examples: • Sending emails • Generating reports • Processing large files • Creating thumbnails • Sending notifications • These tasks can often be handled asynchronously using background workers or queues. 🔹 13. Learn Pagination Patterns There are different ways to paginate large datasets. For example: • Offset pagination: page=5&limit=20 • And Cursor pagination: after=abc123 • Understanding both helps you choose an appropriate approach for different applications. 🔹 14. Learn the Difference Between Horizontal and Vertical Scaling 📈 • Vertical scaling → Give one server more resources. • Horizontal scaling → Add more servers. • As applications grow, understanding this distinction helps you understand load balancing, distributed systems, and cloud architecture. 🔹 15. Learn Before You Abstract Frameworks and libraries hide many complicated details. That's useful — but don't let them hide your understanding. Before relying heavily on a tool, try to understand the underlying concept. For example: Don't just learn how to use an ORM. Understand: • Application → ORM → SQL → Database Don't just use a router. Understand: • URL → Route → Handler → Response 💡 Double Tap ❤️ For More

Project ideas for practice!!

Get started or sharpen your Front end development skills with these project ideas.