Full Stack Camp
Open in Telegram
Fullstack Camp | Learn. Build. Launch. Join us for a hands-on journey through HTML, CSS, JavaScript, React, Node.js, Express & MongoDB — all in one place. Use this bot to search for lessons. @FullstackCamp_assistant_bot DM: @Tarikey6
Show moreThe country is not specifiedThe category is not specified
235
Subscribers
No data24 hours
-17 days
+330 days
Posts Archive
Week 1 Day 2 : Introduction to HTML
🌍 Topic: “What is HTML?” – Explained with Local Examples
🎯 Goal: Understand what HTML is, why it matters, and how it works.
🥁 welcome to Day 2 of your coding journey in Fullstack Summer Camp!
🎉 You made it through Day 1! Now let’s get our hands into the first real tool of a fullstack developer: HTML.Let’s break it down like we’re chatting at a market or in a library — simple, real, relatable. 🌐 1. What Is HTML? HTML = HyperText Markup Language HTML is like the skeleton or structure of every website. It's the language used to structure content on the web. It’s NOT a programming language. It doesn’t do calculations or logic. It simply tells the browser how to display content like: 📰 Headings 📄 Paragraphs 🖼️ Images 🔗 Links 📋 Forms
💬 Think of HTML as the initial design of a house — walls, doors, and windows — before painting or electricity🏘️ 2. Ethiopian Analogy – The Injera Plate Let’s say you’re serving injera be wot at a restaurant. ➾➾The injera (the plate) = HTML — it holds everything. ➾➾The wot, salad, shiro, doro = content (text, images, links). ➾➾The plate’s shape and arrangement = structure, defined by HTML. Then, later, you’ll add: ➾➾CSS = for making it look nice ➾➾JavaScript = to make it interactive (like delivering it hot and fresh, or adjusting spice level on request) 🧠 3. What Does “HyperText” Mean? HyperText just means
Text with links that take you somewhere elseLike a news site with headlines that click into full articles. When you click “Go to full article” → You’re using HyperText. 🏗️ 4. HTML Structure Before we build a website, let’s understand how the pieces fit together. Just like a traditional gojo (hut) has a roof, walls, and a door — every webpage has its own basic structure.” A basic webpage is made of: 🧾 A declaration (like saying: ‘I’m writing in HTML!’) 📦 A box that wraps everything (<html>) 🧠 A hidden brain (<head>) — title, settings 👀 A visible body (<body>) — all your content Let’s build a traditional hut with HTML
<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Welcome to My Gojo!</h1> <p>This is a simple webpage built with HTML.</p> </body> </html>relax 😁, we will see them each by each. 🔤 5. Most Common HTML Tags Here's a list of the most common HTML tags along with what they’re used for: <!DOCTYPE html> Telling it that you are writing Html5 <html> The root of every HTML document. It wraps all the code on your web page.
<html> <!-- Everything goes inside here --> </html><head> Contains metadata (information about the page) like the title, fonts, or linked files. This part doesn't show on the actual page.
<head> <title>My Page</title></head><title> Sets the text shown in the browser tab.
<title>Welcome to My Website</title><body> Everything inside this tag is visible on the web page. This is where your content goes — headings, paragraphs, images, etc.
<body> <h1>Hello!</h1> </bimages<h1> to <h6> Headings. <h1> is the biggest and most important, while <h6> is the smallest.
<h1>Main Title</h1> <h2>Section Title</h2><p> Used for paragraphs of text.
<p>This is a paragraph of text.</p><a> Creates a hyperlink. You can link to websites,pages, or files.
<a href="https://example.com">Visit Example</a><img> Displays an image. You must include the src (image URL or path) and alt (alternative text for screen readers).
<img src="cat.jpg" alt="A cute cat"><ul>, <ol>, <li> Create lists. <ul>..... is an unordered (bulleted) list <ol>...... is an ordered (numbered) list <li>....... is a list item (used inside both)
<ul> <li>Injera</li> <li>Shiro</li> </ul><br> Adds a line break — moves text to the next line without starting a new paragraph.
<p>Hello<br>World</p><hr> Adds a horizontal line across the page. Good for separating content.
<hr><strong> and <em> Used for emphasizing text. <strong> = bold and important <em> = italic and emotional emphasis
<p>This is <strong>very important</strong>.</p> <p>Please <em>pay attention</em>.</p>
### 📅 What’s Coming Up Tomorrow?
🌟 Day 2 – What is HTML?
- How websites are made
- You’ll write your very first webpage
- You’ll understand how the internet sees code
---
### 💬 Your Turn!
What’s a website or app you wish *you* could build one day?
Drop it in the group!
---
#Day1#CodingIntro #Beginners #HTMLCSSJS #LearnToCode #SummerCampDev
#https://t.me/fullstacksummercamp
Week 1 Day 1
💡 What Is Coding? How It Works, Why It Matters, and How You Can Start
🌞 Welcome welcome welcome to Fullstack Summer Camp!
ሰላምምምም 👋 Today is Day 1 of our fullstack development journey.
Whether you're here because you're curious, bored, or secretly want to build the next big tech startup — you're in the right place. 👨💻👩💻
---
### 🤔 Why You Should Learn Coding
Remember:
> 🧠 Mark Zuckerberg built Facebook at 19
> 🌍 Ethiopia's tech scene is booming (10x growth since 2020!) "Ethiopia needs 50,000+ developers by 2027" (Ethio ICT Report)
> 💭 You already solve problems daily — coding is just a new tool!
---
### 🧠 What is Coding?
Let’s keep it simple:
Coding (also called programming) is the process of writing instructions that a computer can understand and follow.
These instructions tell a computer:
🛠️ What to do
⏰ When to do it
🧠 How to respond if something happens
Imagine coding like managing a smart coffee shop:
1. "When customer says *'Buna'* → Prepare coffee" 2. "If customer asks *'with sugar?'* → Add 1 tsp" 3. "After serving → Clean cup immediately"The amazing part? Coding is how all software works: 📱 Instagram, YouTube, Facebook , Telebirr 🎮 Games, calculators, weather apps 🖥️ Websites, chat apps, music players — all run on code! --- ### 💬 Wait… But Computers Don’t Understand English? Exactly. Computers are like really smart robots — but only if you speak their language. They don’t understand natural languages like Amharic, Tigrinya, or English. They understand programming languages like: > አማርኛ ➡️ English ➡️ Binary (01110100 01100101 01100001...) That’s where code and compilers come in — to translate human logic into computer logic. --- ### 📦 Real World Example – The Café Analogy Let’s say you're building an online coffee ordering app: 🏗️ HTML creates the layout: “Menu,” “Order,” “Checkout” 🎨 CSS makes it look good: fonts, colors, sizes 🤖 JavaScript makes it interactive: "click to order", "add to cart" 🔁 React helps you build reusable components: buttons, lists, pop-ups 🧠 Node.js handles the back-end: receiving orders, sending confirmation 📚 MongoDB stores your data: your name, order history Boom — you just coded a coffee ordering system ☕🚀 --- ### 🛠️ But... How Do You *Actually* Code? You write code in a text editor (like VS Code) Then you run it or open it in a browser to see what happens. Think of it like: ✍️ Writing a recipe → 🍳 Cooking the dish → 👀 Tasting it If it’s too salty? Tweak the code and try again. Coding is trial and error, and that’s totally okay. Every pro developer started with: 😐 A confused face 🔍 Google searches 😂 Copying and pasting random code until it worked We’re all on the same path — but here, you’ve got a community to support you. --- ### 🌐 Where Does Code Run? We’ll write code in: 🧑💻 Text Editors like: ➡️ VS Code (PC) ➡️ TrebEdit or Acode (for mobile phones – limited but useful) 🌍 Browsers like Chrome to run and test it Code runs in two main places: 🖼️ In the Browser (Front-end) 🔐 On a Server (Back-end) As a Fullstack Developer, you'll learn both sides: 🎨 *Frontend* — What the user sees 🧠 *Backend* — What makes it all work --- ### 🧰 What Learning Methods Will We Use? We’ll be learning through: ✏️ Text lessons like this ▶️ Bro Code’s YouTube videos 📽️ Sometimes live voice/video sessions 👥 Group discussions 🏆 Weekly challenges This camp is all about accessible learning — even from your phone! --- ### 🧪 Day 1 Mini Task (Optional but Fun) Try this: 1. Open any website (like google.com) 2. Right-click → “View Page Source” 3. You’ll see a wall of code — That’s HTML! 4. Screenshot it and post in the group ### 🔄 Quick Recap ✅ Coding = Giving instructions to a computer ✅ HTML, CSS, JavaScript = The languages of the web ✅ You’ll use tools like VS Code and Chrome ✅ You don’t need to be a genius — just consistent --- #Week1 #Day1 #Html #introduction #lesson
Bring your Friends to Fullstack Summer Camp!
Hey camper! 🌞
Imagine how awesome it would be if your coding buddy joined too! 👯♀️👨💻👩💻
Whether it's:
>>>that friend who’s always saying “I wanna learn to code someday”
>>>or your classmate who already thinks they’re the next Zuckerberg 😅
— this is your sign to tag them in.
🧠 Why Should They Join?
🚀 Beginner to Fullstack Dev in 3 months
🔥 Projects, challenges, community
🧩 Daily micro-lessons (with memes sometimes)
🎉 This isn’t just a channel — it’s a summer movement.
Bring your crew, build together, and let’s ship something awesome by the end of the summer! 💻🌴
👉 Invite Link: https://t.me/fullstacksummercamp
📍 Fullstack Developer Roadmap | Summer 2025 Edition
🚀 Duration: 3 Months
📌 Goal: Go from beginner to fullstack web developer (MERN stack
🔰 Month 1: Frontend Fundamentals
📅 Week 1 – HTML & CSS Basics
✅ HTML5 Tags, Structure, Forms
✅ CSS Selectors, Box Model, Flexbox, Grid
🎯 Project: Personal Profile Page
📅 Week 2 – Responsive Design
📱 Media Queries, Mobile-First Layout
🎯 Project: Responsive Landing Page
📅 Week 3 – JavaScript Essentials
🔁 Loops, Arrays, Functions, DOM
🎯 Project: Interactive To-Do List
📅 Week 4 – Advanced JS + APIs
⚡ ES6+, JSON, Fetch API, Promises
🎯 Project: Weather App with Live API
⚛️ Month 2: React & Backend Basics
📅 Week 5 – React Fundamentals
🧩 Components, Props, JSX
🎯 Project: Counter App with Dark Mode
📅 Week 6 – React Hooks + Routing
🪝 useState, useEffect, React Router
🎯 Project: Notes App with Views
📅 Week 7 – Node.js & Express.js
⚙️ REST APIs, Routes, Middleware
🎯 Project: Blog API (Backend Only)
📅 Week 8 – MongoDB + Mongoose
💾 Database CRUD, Models, Schemas
🎯 Project: Blog App with DB Integration
🧠 Month 3: Fullstack Integration & Deployment
📅 Week 9 – MERN Stack Connection
🔗 Connect React + Express
🧪 Test APIs with Postman
🎯 Project: Fullstack Notes App
📅 Week 10 – Authentication & Security
🔐 JWT, Bcrypt, Protected Routes
🎯 Project: Task Manager with Login
📅 Week 11 – Deployment & DevOps
🚀 Deploy Frontend (Vercel), Backend (Render/Railway)
🧰 Env Variables, GitHub Integration
🎯 Project: Live Fullstack Demo
📅 Week 12 – Final Project Week 🎓
💡 Choose your idea:
>>>Blogging Platform
>>>E-commerce Showcase
>>>Chat App (Basic)
>>>Feedback Collector....
👋 Welcome to Fullstack Summer Camp 2025!
Learn. Build. Launch.
Hey campers! 🌞
This is your one-stop space to master fullstack web development from scratch — right here on Telegram.
Over the next 12 weeks, we’ll dive deep into:
🌐 Frontend: HTML, CSS, JavaScript, React
🧠 Backend: Node.js, Express.js, MongoDB
⚙️ APIs, Auth, Deployment & more
🔧 What to Expect:
✅ Daily bite-sized lessons
✅ Weekly mini-projects
✅ Real-world final project
✅ Coding challenges & tips
✅ Community support (coming soon!)
This is a beginner-friendly journey, but we’re going deep — by the end of summer, you’ll be confident building and deploying your own fullstack apps.
