Full Stack Camp - Statistics & analytics of Telegram channel @fullstackcampp

235

Assignment Div.... https://youtu.be/WbnCll6vvw4?si=P4jd-VYqA3E6EysY Tables... https://youtu.be/aNC6LY34yVM?si=InjX1lOFE-Q0QVDH Videos..... https://youtu.be/Ki_0iES2cGI?si=dofFKUTrgPs7Ntcd Audio.... https://youtu.be/UHjTXLAS4tU?si=2MCT0mkXgACRC8CY #Week1 #Day4 #Html #TablesDivs #resources

235

publication_6_4882_1610.pdf5.37 KB

235

chp04.pdf2.56 KB

235

HTML Media – Images, Audio, and Video 

And now we learn how to add **media content** to websites: 
✅ Images (photos, logos, icons)
✅ Audio (music, podcasts) 
✅ Video (lessons, intros) ━━━━━━━━━━━━━━━━━━━━━━━
🌄 1️⃣ Adding Images with <img> 
✅ Basic Syntax:

<img src="image-url" alt="Alternative Text"> src → Path or link to the image file alt → Text description if image doesn't load ✅ Example:

<img src="https://placekitten.com/300/200" alt="Cute kitten image">

✅ Notes: Always use alt for accessibility (for blind users or if image is missing). Supported formats: .jpg, .png, .gif, .webp ━━━━━━━━━━━━━━━━━━━━━━━ 📐 2️⃣ Controlling Image Size You can control width and height using attributes:

<img src="photo.jpg" alt="My photo" width="300" height="200">

✅ Or better: use CSS for full control (coming next week). ━━━━━━━━━━━━━━━━━━━━━━━ 🎧 3️⃣ Embedding Audio ✅ Basic Syntax:

<audio controls> <source src="audio-file.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

✅ Important: Always include controls so users can play, pause, and control volume. Supported formats: .mp3, .ogg, .wav ✅ Example:

<audio controls> <source src="buna-music.mp3" type="audio/mpeg"> </audio>

━━━━━━━━━━━━━━━━━━━━━━━ 🎥 4️⃣ Embedding Video ✅ Basic Syntax:

<video width="320" height="240" controls> <source src="video-file.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

✅ Example:

<video width="500" height="300" controls> <source src="intro-video.mp4" type="video/mp4"> </video>

✅ Notes: Use width and height to control size. formats: .mp4 (most common), .webm, .ogg ━━━━━━━━━━━━━━━━━━━━━━━ 🌐 5️⃣ Embedding External Media (YouTube, SoundCloud) Sometimes you want to embed a YouTube video directly: ✅ Example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

━━━━━━━━━━━━━━━━━━━━━━━ 📂 6️⃣ Real-World Example: Music Café Website

<!DOCTYPE html> <html> <head> <title>Music Café</title> </head> <body> <h1>Welcome to Music Café</h1> <img src="coffee.jpg" alt="Cup of coffee" width="300"> <h2>Now Playing</h2> <audio controls> <source src="ethiopian-jazz.mp3" type="audio/mpeg"> </audio> <h2>Watch Our Story</h2> <video width="500" controls> <source src="cafe-tour.mp4" type="video/mp4"> </video> </body> </html>

━━━━━━━━━━━━━━━━━━━━━━━ 💡 Why Media Matters in Websites: ✅ Makes pages more attractive ✅ Engages visitors ✅ Shares information in visual/audio form ━━━━━━━━━━━━━━━━━━━━━━━

235

HTML Layout with div, span, class & id 

Now let's focus on how developers **organize content** using special HTML tools: 
✅ <div> → Block containers 
✅ <span> → Inline containers 
✅ class & id → For styling and controlling specific elements ━━━━━━━━━━━━━━━━━━━━━━━ 
📦 1️⃣ What Is <div>? 
<div> stands for “division.” It’s like a big invisible box that holds content inside it. 
✅ Purpose: - Group related content - Make layout blocks (header, sidebar, footer) 
➤ Simple Example:

<div> <h1>My Profile</h1> <p>I love fullstack development!</p> <img src="myphoto.jpg" alt="My photo"> </div>

✅ Without CSS, it won’t show borders or color — it just structures things. ━━━━━━━━━━━━━━━━━━━━━━━ 🔤 2️⃣ What Is <span>? It is like <div> , but smaller. It’s used for inline content, like a single word. ✅ Purpose: Highlight a word or phrase Apply styles to part of a sentence ➤ Example: <p>My favorite color is <span>blue</span>.</p> ━━━━━━━━━━━━━━━━━━━━━━━ 🎯 3️⃣ class and id → Adding Labels to HTML Elements ✅ class: Reusable name for many elements You can style all elements with the same class ✅ id: Unique name for one specific element only Used for targeting that one thing ━━━━━━━━━━━━━━━━━━━━━━━ 📂 4️⃣ Real-Life Examples ➤ Using class with div:

<div class="profile-box"> <h2>Betelhem</h2> <p>Fullstack Developer</p> </div> <div class="profile-box"> <h2>Abebe</h2> <p>UI Designer</p> </div>

Both divs share the same class "profile-box." Later in CSS, you can give all profile-box divs the same color or size. ➤ Using id with span:

<p>Welcome, <span id="user-name">Kebedech</span>!</p>

Later with CSS or JavaScript, you can target only "Kebedech" by using its id. ━━━━━━━━━━━━━━━━━━━━━━━ 🛠️ 5️⃣ Combining div, span, class, and id Together ✅ Example Layout:

<div class="card"> <h1 class="title">Haregu's Coffee</h1> <p>Open: <span class="highlight">8 AM – 10 PM</span></p> <p id="special-message">Today’s special: Macchiato!</p> </div>

➤ Explanation: card → applies to the whole block title → applies to all titles highlight → styles just the time special-message → styles only today’s special ━━━━━━━━━━━━━━━━━━━━━━━ 💡 6️⃣ Why Does This Matter? ✅ Layout: Div and span help you organize pages cleanly ✅ Styling: class and id let CSS and JavaScript target specific parts ✅ Real Websites: Every modern website uses this method! ━━━━━━━━━━━━━━━━━━━━━━━

235

Lets start with Tables 

Tables help us organize information like: 
✅ School results 
✅ Class schedules 
✅ Market prices 
✅ Contact lists ━━━━━━━━━━━━━━━━━━━━━━━ 
🪑 1️⃣ What Is a Table in HTML? A table in HTML is made of rows and columns, similar to Excel or paper tables. 
🔤 Basic Structure:

<table> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td>Injera</td> <td>25 birr</td> </tr> </table>

✅ Explanation: <table> → Wraps the whole table <tr> (Table Row) → Creates a new row <th> (Table Header) → Bold, centered by default <td> (Table Data) → Regular cell ━━━━━━━━━━━━━━━━━━━━━━━ 🛠️ 2️⃣ Adding Borders Tables look invisible by default. To make it visible, add:

<table border="1">

✅ Pro Tip: You can also style it later with CSS. For now, border="1" is simple. ━━━━━━━━━━━━━━━━━━━━━━━ 📐 3️⃣ Multiple Rows & Columns 🔤 Example:

<table border="1"> <tr> <th>Name</th> <th>Age</th> <th>Department</th> </tr> <tr> <td>Betelhem</td> <td>22</td> <td>Computer Science</td> </tr> <tr> <td>Abebe</td> <td>21</td> <td>Accounting</td> </tr> <tr> <td>Meron</td> <td>20</td> <td>Law</td> </tr> </table>

━━━━━━━━━━━━━━━━━━━━━━━ 🔄 4️⃣ Rowspan & Colspan — Merging Cells Sometimes we need to combine cells. ➤ Rowspan = Join cells vertically ➤ Colspan = Join cells horizontally 🔤 Example:

<table border="1"> <tr> <th rowspan="2">Name</th> <th colspan="2">Contact</th> </tr> <tr> <th>Email</th> <th>Phone</th> </tr> <tr> <td>Megersa</td> <td>megersa@gmail.com</td> <td>0912xxxxxx</td> </tr> </table>

━━━━━━━━━━━━━━━━━━━━━━ 🎯 Summary: ✅ <table> → Creates a table ✅ <tr> → Row ✅ <th> → Heading cell ✅ <td> → Normal cell ✅ rowspan, colspan → Merge cells ━━━━━━━━━━━━━━━━━━━━━━━

235

📚Week 1 Day 4: HTML Deep Dive – Tables, Divs & Media 💻 Organizing Data, Structuring Layouts & Embedding Content 👋 Selam Fullstack Campers! Today we bring together three powerful HTML techniques: 1️⃣ Tables – to display structured data 2️⃣ Divs – to group and organize sections 3️⃣ Media – to embed images, audio & video #Week1 #Day4 #Html #TablesDivs #lesson

235

💪Week 1 Day 3 Challenges: New Account 🎯 Your Mission: Build a “Create New Account” Form Now that you’ve learned how forms work, it’s time to put your skills to the test! Your task today is to create a simple but complete Account Creation Form like the ones we fill on social media or email signup pages. 📌 What to include in your form: ➤ First Name ➤ Last Name ➤gender ➤ Phone Number ➤ Date of Birth ➤country ➤ Username ➤ Email Address ➤ Recovery Email ➤ New Password with hint or strength note ➤ Confirm Password ➤profile picture ➤ Terms and Conditions agreement ➤ A submit button labeled as "Create Account" ✨ Bonus Tips: - Use placeholder to guide the user (e.g. placeholder="Enter your name") - Use type="password" for password fields - Make the required fields use required - You can group related inputs using <fieldset> and <legend> if you want 📸 When you’re done: 🔹 Share a screenshot or the code in our group 🔹 Give feedback to others’ work if you can 🔹 And hey — invite a friend to join the Fullstack Summer Camp today! Keep going — you're learning real-world skills here. Stay focused, stay kind, and stay curious 🚀 #Week1 #Day3 #Html #Forms #challenge

235

Assignment : watch this video on html.forms by bro codes. https://youtu.be/2O8pkybH6po?si=LpdZ5EV8lEFoyECj #Week1 #Day3 #Html #Forms #resources

235

chp05.pdf3.28 KB

235

<h3>Alpha Computer School</h3> <h4>welcome to Alpha Computer School official website</h4> <p>if you are interested in registering to our coding class, please fill out the following form</p> <form> <label id="name">full name:</label> <input type="text" id="name" placeholder="eg Haregu Kebede Ayalew" required > <br> <p>Gender:</p> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label> <br><br> <label id="age">Age:</label> <input type="number" id="age" min="10" max="90"> <br><br> <label id="email">email:</label> <input type="email" id="email" placeholder=" example@gmail.com" required> <br><br> <label id="phone">Phone number:</label> <select required> <option>+221</option> <option>+231</option> <option>+241</option> <option>+251</option> <option>+261</option> <option>+271</option> <option>+281</option> <option>+229</option> </select> <input type="number" id="phone" required> <br> <br> <label id="bd">Birth of date</label> <input type="date" id="bd"> <br> <br> <label id="experiance">experience level</label> <select> <option>beginner</option> <option>intermediate </option> <option>advanced</option> </select> <br> <br> <label id="language">which language do you want to learn</label> <select> <option>Html</option> <option>Css </option> <option>JavaScript</option> <option>Python</option> </select> <br><br> <label id="cv">CV:</label> <input type="file" id="cv"> <br> <br> <label id="essay">Your essay:</label><br> <textarea id="essay" rows="10" cols="30"></textarea> <br> <br> <input type="submit"> <br>

235

✅ Quick Recap: ➡ <form> wraps the form ➡Use inputs like <input>, <textarea>, <select> ➡Use <label> for better accessibility ➡placeholder, required, value make forms more useful ➡Forms don’t do anything until you connect them with JavaScript or backend (coming soon!) ━━━━━━━━━━━━━━━━━ 📢 Coming up next (Day 4): We’ll explore HTML Tables (to organize data) and <div> elements (for layouts) — super important for building real websites!

235

Week 1 Day 3: HTML Forms 📝

Creating Forms to Collect Information

👋 Selam Campers! Welcome to Day 3 of Fullstack Summer Camp! You’ve already learned how to structure a page using 
    ➾headings
    ➾paragraphs
    ➾images
    ➾links. Now it’s time to interact with your users — and for that, we use something powerful: **Forms**!
━━━━━━━━━━━━━━━━━

━━━━ 🧠 What is a Form in HTML?

A **form** is how we collect data from users on a website. It’s like a digital paper form — just like the ones you fill at school, clinics, or offices. 

📋Real-life examples of forms: 
    - Login & registration pages 
    - Survey or feedback forms 
    - Online order checkout forms
    - Assignment submissions
━━━━━━━━━━━━━━━━━
━
🏗️ <form> Tag – The Form Container

All form elements go inside a

<form> tag.

<form>  </form>

This tells the browser, “Everything inside here is part of a single form.” ━━━━━━━━━━━━━━━━━━ 🔠 Common Input Types (with Examples) Text Input – For short answers like name

<label for="name">Name:</label> <input type="text" id="name" name="name">

Email Input – For collecting emails

<label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="you@example.com" required>

Password Input – Hides the characters

<label for="password">Password:</label> <input type="password" id="password" name="password">

Textarea – For long messages or comments

<label for="message">Your Message:</label><br> <textarea id="message" name="message" rows="4" cols="30"></textarea>

Radio Buttons – Pick one option only

<p>Gender:</p> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label>

Checkboxes – Choose multiple options

<p>Skills:</p> <input type="checkbox" id="html" name="skills" value="HTML"> <label for="html">HTML</label> <input type="checkbox" id="css" name="skills" value="CSS"> <label for="css">CSS</label>

Dropdown (Select)

<label for="department">Department:</label>
<select id="department" name="department"> 
     <option value="cs">Computer Science</option>
     <option value="se">Software Engineering</option> 
     <option value="it">Information Technology</option> 
</select>

Date Picker

<label for="dob">Date of Birth:</label> <input type="date" id="dob" name="dob">

File Upload

<label for="photo">Upload your photo:</label> <input type="file" id="photo" name="photo">

Submit Button – To send the form

<input type="submit" value="Submit">

Reset Button – To clear all fields

<input type="reset" value="Clear">

━━━━━━━━━━━━━━━━━━━ 📦 Useful Attributes ↪️ placeholder – Shows hint inside input

<input placeholder="Enter your name">

↪️ required – Prevents empty submission

<input required>

↪️ value – Sets a default value

<input value="Addis Ababa">

━━━━━━━━━━━━━━━━━━ 📚 Optional: Grouping Use <fieldset> to group related inputs and give the group a title using <legend>.

<fieldset> <legend>Personal Info</legend> <label for="fullName">Full Name:</label> <input type="text" id="fullName"> </fieldset>

━━━━━━━━━━━━━━━━━━━ 🌍 Example – Group Assignment Form

<h2>Group Assignment Submission</h2> <form> <label for="university">University Name:</label> <input type="text" id="university" name="university"><br><br> <label for="department">Department:</label> <input type="text" id="department" name="department"><br><br> <label for="group">Group Members:</label><br> <textarea id="group" name="group" rows="3" cols="40"></textarea><br><br> <label for="date">Submission Date:</label> <input type="date" id="date" name="date"><br><br> <input type="submit" value="Submit"> </form>

💡 Try it in your editor ━━━━━━━━━━━━━━━━━━━ #Week1 #Day3 #Html #Forms #lesson

235

Senior Advices and Experiances When many people start learning to code, they often feel like they need to know everything upfront every syntax, every trick, every framework. So they hop from one tutorial to the next, thinking they’re making progress, but still feeling stuck when trying to build something real. Here’s what truly makes the difference 1. Don’t Avoid the Docs Documentation may seem intimidating at first, but it’s the most accurate and reliable source of truth. Tutorials are great for getting started, but docs are what help you go deeper and become confident. 2. Use AI Wisely Not Lazily AI tools can boost your learning dramatically when used right. They help you understand code, debug smarter, and learn faster. But they can’t replace your thinking, reasoning, or problem-solving. Use AI to enhance your skills, not replace them. 3. Understand the “Why” Before the “How Before jumping into any project, take a moment to understand the problem and the technology behind it frontend, backend, APIs, databases, and infrastructure. When you understand why things work the way they do, the how becomes clearer. 4. Software Architecture is a Must Whether you're working on small apps or large systems, knowing how to design clean, scalable, and maintainable architecture is key. Good code isn't just code that works. it’s code that works well under pressure, in teams, and over time. 5. Start Building Early Even If It's Messy Don’t wait until you "know everything" before starting. Start small, make mistakes, break things, fix them that’s where real learning happens. You grow by doing. 6.Consistency > Overload It’s not about spending 10 hours a day in front of a screen. It’s about showing up every day with intention. A focused hour daily beats unfocused marathons. Momentum comes from habit, not hustle. Currently, the resources are better, the tools are smarter, and the learning curve is smoother but the core principles remain the same: stay curious, build consistently, and keep improving. You don’t have to know it all. You just have to start and keep going. @edemy251 #experiences #seniors

235

Week 1 𝗗𝗮𝘆 𝟮 𝗖𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲: 𝗗𝗲𝘀𝗶𝗴𝗻 𝗮 𝗖𝗼𝘃𝗲𝗿 𝗣𝗮𝗴𝗲 📝 Let’s get a little creative! Your task is to build a simple and clean HTML cover page for a group assignment — just like the ones we submit at school or university. ✅ Your cover page should include: ➤ Your university/high school logo (use any placeholder image for now) ➤ Name of your school, university, or campus ➤ Official website (make up one if yours doesn’t have) ➤ Department name ➤ Section or class ➤ Group members (list 3 or more names) ➤ Submission date You’ll use headings, paragraph tags, and an image — everything we’ve learned today! 📤 𝗪𝗵𝗲𝗻 𝘆𝗼𝘂’𝗿𝗲 𝗱𝗼𝗻𝗲, 𝗽𝗹𝗲𝗮𝘀𝗲 𝘀𝗵𝗮𝗿𝗲 𝗮 𝘀𝗰𝗿𝗲𝗲𝗻𝘀𝗵𝗼𝘁 𝗼𝗿 𝘆𝗼𝘂𝗿 𝗰𝗼𝗱𝗲 𝗶𝗻 𝘁𝗵𝗲 𝗴𝗿𝗼𝘂𝗽! Let’s celebrate each other's work and learn together 🙌 👥 𝗜𝗻𝘃𝗶𝘁𝗲 𝗮 𝗳𝗿𝗶𝗲𝗻𝗱! If you’re enjoying the challenge, bring your friends into the camp. The more minds, the better the journey! 👋 Stay kind, stay curious — and stay coding! #Week1 #Day2 #Html #introductionToHtml #challenge

235

Assignment : refer the following you tube videos ✅✅Introduction to html and headings .... https://youtu.be/-CNdRywgF7M?si=taqCkgDLlBAqM79f ✅✅Hyperlinks...... https://youtu.be/gOioxltfh48?si=1TkZo5iN7Lb4wtCg ✅✅Images...... https://youtu.be/Hh_se2Zqsdk?si=0flgH01_B1gJ0gM5 ✅✅Lists..... https://youtu.be/-kXZvKxs9oA?si=7XfbrlKaRPBZxHJs #Week1 #Day2 #Html #introduction #resources

235

html_intro.pdf2.25 KB

235

Example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fullstack day 2</title> </head> <body> <h1>Hello World</h1> <h1>Universe</h1> <h2>Galaxy</h2> <h3>Solar System</h3> <h4>Earth</h4> <h5>Africa</h5> <h6>Ethiopia</h6> <p>This is a normal paragraph tag, which is used for writing regular text.</p> <a href="https://google.com">google anything</a> <h2>Continents</h2> <ul> <li>Europe</li> <li>Asia</li> <li>Africa</li> <li>America</li> </ul> <h3>Universities in Ethiopia</h3> <ol> <li>Addis Ababa University</li> <li>Mekelle University</li> <li>Hawassa University</li> <li>AASTU University</li> <li>Raya University</li> </ol> <img src="20250709_152202.png" alt="cloud "> <p>see ya again ✌️</p> </body> </html>

235

👨‍🏫 6. Your First Real Example Let’s make a personal profile page for someone named "Betelhem":

<!DOCTYPE html> <html> <head> <title>Betelhem's Page</title> </head> <body> <h1>ሰላም! እኔ ቤተልሄም ነኝ</h1> <p>welcome to my web pagee</p> <img src="https://placekitten.com/300/200" alt="cute cat image"> <p>Visit my <a href="https://examplee.com">myGitHub</a></p> <h3>my skills:</h3> <ul> <li>video editing</li> <li>web developing</li> <li>photography</li> </ul> </body> </html>

✅ Save it as betelhem.html ✅ Open it in your browser 🎉 Boom! You made your first webpage. 🎯 7. Where Do We Write HTML? You can use: 💻 VS Code on your laptop 📱 TrebEdit, Acode, or Spck Editor on mobile 🌐 Your browser to open the file 📚 8. What’s Coming Next? In the next lessons, you’ll learn: ✅ Forms → Collect data from users ✅ Tables → Display information in grids ✅ Semantic HTML → More readable structure ✅ Multimedia → Add videos, music, maps 📌 Summary: ✅ HTML = The skeleton of every webpage ✅ Tags like <p>, <h1>, and <img> define what shows up ✅ You write HTML in a text editor, and view it in a browser ✅ Use simple, structured code to build everything from a blog to a full website #Week1 #Day2 #Html #introductionToHtml #lesson