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
👋 Hey Campers!
💪 Welcome to Week 2: Challenge Time!
You’ve been working hard, learning all the major CSS tools — now it's time to build real websites from scratch and show what you’ve learned! ✨
Each of these challenges is like a mini-job you'd be given by a real client or boss. Do your best, be creative, and most importantly — have fun! 🎨
💪 Challenge 1: Fitness Trainer Website
🎯 Your Mission:
Design a simple but energetic Fitness Trainer Website that helps people know more about the trainer, available classes, and book sessions.
💼 Include These:
✅ Home section with a welcome message + trainer photo
✅ About section (trainer bio, years of experience, certifications)
✅ Class Schedule (you can use a simple table or a flex/grid layout)
✅ Gallery of workout images (use object-fit)
✅ Icons for services (dumbbells, yoga, diet)
✅ Contact form (for booking sessions)
✅ Responsive layout that works on mobile!
🎁 Bonus: Add hover effects, transitions on buttons, or simple entrance animations!
👗 Challenge 2: Fashion Brand Landing Page
🎯 Your Mission:
Design a beautiful, stylish Landing Page for a Fashion Brand. This is a marketing-focused page to promote the newest collection.
💼 Include These:
✅ Hero section with a stylish background + slogan like “Style that speaks”
✅ Featured products section (use flex or grid to display clothes or accessories)
✅ "Shop Now" button with transition hover effect
✅ Gallery of images with hover zoom effect (transform: scale())
✅ Testimonials from customers
✅ Footer with social media icons (LinkedIn, Instagram, YouTube)
✅ Mobile responsive version for phones!
🎁 Bonus: Add animations like fade-ins for product cards or an animated title.
💼 Challenge 3: Job Listing Website
🎯 Your Mission:
Build a functional-looking Job Listing Website (like EthioJobs or Glassdoor) where users can view and apply to open jobs.
💼 Include These:
✅ Navigation bar with links: Home, Jobs, About, Contact
✅ Job Cards (use flex or grid) showing:
Job Title
Company Name
Short Description
Apply Now button
✅ Filter section for categories (e.g., Tech, Education, NGO)
✅ Job detail page (optional): Show full job description
✅ Apply form with name, email, CV upload (just input, no backend)
✅ Icons for job categories
✅ Sticky navbar or filter
✅ Responsive layout for mobile
🎁 Bonus: Add animations when hovering on job cards!
📢 Don’t Forget to:
👉 Share your amazing work!
👉 Invite others who want to join the code journey!
👉✌️ And always stay warm, strong, and well! 💪🔥
🎯 Today's Challenge!
Hey hey team! 👋
Before we wrap up CSS week and jump into the wild world of JavaScript 💻⚡ — let’s polish our past works and turn them into stunning, interactive pages!
🧠 Challenge:
Go back to ALL the HTML files we created so far (cover page, scholarship form, course page, etc.) and apply everything we’ve learned in CSS:
✅ Use:
➤Flexbox or Grid layouts
➤Transitions & animations
➤Shadows and transformations
➤Object-fit for images
➤Stylish icons (Font Awesome or emojis)
➤Hover effects and responsive layouts
🎨 Decorate and transform your work into a masterpiece! 💖
Then share your styled pages, invite a friend to join the camp, and as always…
✌️ Stay well and keep coding! 💻✨
Assignment :
➤animation
https://youtu.be/u_GIT5MJAtc?si=2tydc0tyCfGBiCot
➤Transformation
https://youtu.be/qdeIy9_fbxE?si=pfyXw9BHtnBKhg7L
➤Icons
https://youtu.be/k3AJx11k9QY?si=4MDNStmpo4jNSQz0
➤Overflow
https://youtu.be/d7cH8geV2dY?si=mb4omvMeVgF1XcSS
➤Shadows
https://youtu.be/Yqs_61ub1Ng?si=Tf5Z5wTv_yyddFk0
🧩 7. Adding Icons to Your Website
✅ Option 1: Emojis (Fastest & simplest)
Just adding them like text.
<p>📞 Call Us | 💌 Message | 📚 Courses</p>
✅ Option 2: Font Awesome Icons
🌟 Font Awesome gives you professional-looking icons like:
🔴 YouTube
🔵 LinkedIn
🖥️ Desktop
📧 Email
💡 How to Use Font Awesome:
Add this in your<head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">Use icons like this:
<i class="fa-brands fa-youtube"></i> Youtube <i class="fa-brands fa-linkedin"></i> LinkedIn <i class="fa-solid fa-envelope"></i> Email <i class="fa-solid fa-phone"></i> CallStyle them with CSS:
i { font-size: 24px; color: #ff0000; margin-right: 10px; }✅ Example
<i class="fa-brands fa-youtube" style="color: red;"></i> <i class="fa-brands fa-linkedin" style="color: #0A6 6C2;"></i>🧠Summary Today , we learned: 1. Transition – Smooth hover/click changes 2. Animation – Moving objects/loops 3. Transform – Move, scale, rotate things 4. Object-Fit – Fix image shapes 5. Overflow – Scroll or hide extra content 6. Shadow – Make items "pop" 7. Icons – Add fun or brand images! 😍 Campers! 🎒 You’ve now learned all the ✨ visual power tools ✨ of CSS! You can make your websites look fun, interactive, and modern now! 🎨 Don't forget Practicing. As they say "Perfect practice makes perfect"😁
🎉 Hello Campers! 👋
Welcome to your Week 2 Day 6 CSS Lesson — our last day in the CSS basics journey! 💻
Today we’ll cover some ✨ magic-like features ✨ that will make your websites come alive — like hover animations, icon styles, image control, and even how to use YouTube or LinkedIn icons on your pages! 😍🎥💼
🧠 What We’ll Learn Today:
🔹 Transitions & Animations
🔹 Transformations
🔹 Object-Fit
🔹 Overflow
🔹 Shadows
🔹 Icons (Font Awesome, Emojis, YouTube, LinkedIn...)
🎬 1. CSS Transitions (Make things move smoothly!)
Transitions let you animate changes like color or size when you hover or click. This allows smooth changes from one state to another.
🧪 Syntax:
selector { transition: property duration ease; }
✅ Example:
<style> .button { background: blue; color: white; padding: 10px; transition: background 0.4s ease; } .button:hover { background: darkblue; } </style>
<button class="button">Hover Me 🎯</button>➝Note: you can use all if you want all.properties to transition.
transition : all 0.3s ease;🌀 2. CSS Animations (Make things move even without hover) ➤Animation gives you more control over movement or effects that repeat or run on load. With @keyframes, you can animate elements over time, even looping! ✅ Example:
<style> @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0); } } .bouncer { width: 100px; height: 100px; background: tomato; animation: bounce 1s infinite; } </style>
<div class="bouncer"></div>🧾 Use this to make bouncing buttons, loading dots, etc. 🔁 3. Transformations Use to move, rotate, scale, or skew an element! ✅ Common Examples:
/*Move*/ .move { transform: translateX(100px); } /*Rotate*/ .rotate { transform: rotate(360deg); } /*Scale*/ .scale { transform: scale(1.5); } /*Skew*/ .skew { transform: skew(20deg); } Example with hover:
<style> .card:hover { transform: scale(1.2) rotate(5deg); transition: transform 0.3s ease-in-out; } </style>🖼️ 4. Object-Fit (Control how images appear in boxes) Use object-fit when an image or video doesn’t fit nicely. It is often used with width and height. ✅ Example:
<img src="https://via.placeholder.com/400x300" style="width: 200px; height: 150px; object-fit: cover;">🔹 Values: ➺cover – fills, may crop ➺contain – fits, no crop ➺fill – stretches ➺none – no resize ➺scale-down – uses the smallest between none or contain 🌊 5. Overflow (Handle content that doesn't fit) Use when text or content gets too big for the box. ✅ Example
<style> .box { width: 200px; height: 100px; overflow: auto; border: 1px solid black; } </style>
<div class="box"> This is a long content. It will scroll if it's too much... </div>🔸 Values: ➺visible (default)--content spills out ➺hidden--extra content is clipped ➺scroll-- scrollbar always shows ➺auto-- scrollbar only if needed 🌫️ 6. Shadow Effects ➤ Box Shadows: box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); ✅ Example
<style> .box { width: 200px; height: 100px; background: white; box-shadow: 2px 2px 8px rgba(0,0,0,0.2); } </style>
<div class="box">I'm popping out! 🎈</div>➤ Text Shadows: text-shadow: 1px 1px 4px gray;
🎯 Week 2 Day 5 Challenges: Responsive Design
🔖 Challenge Title:
🌍📱 "Design a Travel Blog Homepage – Fully Responsive!"
💡 Challenge Description:
Create a responsive homepage for a travel blog called "WanderWorld 🌎" or something your own.. This blog shares travel stories, places to visit, and trip tips. Your goal is to make it look beautiful on all screen sizes — mobile, tablet, and desktop — using only responsive design techniques!
🏗️ Your Page Should Have:
🧭 1. Header
➝The blog title: "WanderWorld 🌍"
➝A tagline like: "Travel Far. Live Fully."
➝Add a navigation bar with 3 links: Home | Destinations | Contact
➝Make the navbar turn into a mobile-friendly menu on smaller screens.
📸 2. Featured Destination Section
➤Add a large, beautiful travel image
On top of it, overlay a heading and a short caption
➤Use background-image, ➤background-size: cover, and position: relative with responsive text.
✍️ 3. Blog Snippets Section
➝Display 2 or 3 blog post previews, each with:
➝Thumbnail image (responsive)
Post title
➝1–2 sentence summary
➝“Read more” link or button
✅ On desktop: place them side by side
📱 On mobile: stack them vertically
🎯 Use media queries and %, vw, em, rem, etc.
👩💻 4. About the Blogger
Small image + short paragraph about the blog author
Make sure this layout adjusts nicely to all screens
📞 5. Footer
➝Include contact links: email, Instagram, Twitter
➝Use centered text and spacing that adjusts with screen
✨ What You MUST Use:
➤Responsive units: vw, vh, %, em, rem
➤Media Queries: at least for max-width: 768px and max-width: 480px
➤Responsive images with max-width: 100% and height: auto
➤object-fit where needed
➤Typography that scales nicely
➤Optional: Google Fonts for design flair
🧠 Tips:
Think mobile-first!
Test on different screen sizes
Keep improving your layout based on how it looks
🌟 Bonus:
Add a “Subscribe to Newsletter” section that adjusts well on small and large screens.
📤 After you finish:
Share your work in the group 💌
Invite a friend to join the journey 🚶♂️🚶♀️ ✌️Stay curious, stay well! 😊
🧑💻 Week 2 Day 5 – Responsive Web Design in CSS
👋👋 Heyyy Campers. Today we will make our webs compatible and attractive in any devices. Let's go.
🌐 What is Responsive Design?
Responsive design is an approach to web design that makes your websites adapt to different screen sizes—whether it’s a big desktop monitor or a small mobile phone.
The goal is:
👉 Look good 💅
👉 Work well ⚙️
👉 Stay readable and usable 📖
🔧 Why is it important?
📱 80%+ of users browse using phones!
🖥️ Your site must work on all screen sizes.
🧼 It improves user experience, accessibility, and SEO.
🧰 Core Techniques in Responsive Design
We use the following tools:
✅ Flexible Layouts (percent, em, vw, etc.)
✅ Media Queries
✅ Responsive Images
✅ Flexible Text
✅ Mobile-first approach
1️⃣ Flexible Layouts – Not Fixed Sizes
❌ Don’t do this:
.container { width: 1200px; }
This forces the layout to stay wide even on small screens. Bad idea 😩.
✅ Do this instead:
.container { width: 90%; max-width: 1200px; }
90% makes it flexible.
max-width keeps it from stretching too wide on big screens.
2️⃣ Media Queries – the Magic Wand 🪄
A media query lets you apply CSS only when certain conditions are true, like screen width.
🧱 Basic Syntax:
@media (condition) { /* styles */ }
🧪 Example: Small screens
@media (max-width: 768px) {
.menu {
display: block;
text-align: center; } } .container {
display: flex;
gap: 20px; }
.box {
flex: 1; } /* On small screens, stack them */
@media (max-width: 600px) {
.container {
flex-direction: column; } } Large desktops
@media (min-width: 1200px) {}
➤➤ Desktops
@media (min-width: 992px) and
(max-width: 1199px) {}
➤➤ Tablets
@media (min-width: 768px) and (max-width: 991px) {}
➤➤/Phones
@media (max-width: 767px) {}
3️⃣ Responsive Images 📸
Images should resize automatically to fit the screen.
img {
max-width: 100%;
height: auto; } h1 { font-size: 3vw; }
⏳ Text will grow/shrink with screen size.
5️⃣ Responsive Typography ✍️
Make your text adjust well. Example:
html { font-size: 16px; }
@media (max-width: 768px) {
html { font-size: 14px; } }
@media (max-width: 500px) {
html { font-size: 12px; } } Mobile first
.card {
width: 100%; }
➤➤Tablets and up
@media (min-width: 768px) {
.card {
width: 50%; } }
🧪 FULL WORKING EXAMPLE
<style>
.container {
width: 90%;
max-width: 1200px;
margin: auto;
display: flex;
gap: 20px;
flex-wrap: wrap; }
.card {
flex: 1 1 300px;
background: #f2f2f2;
padding: 20px;
border-radius: 10px; }
img {
max-width: 100%;
height: auto; }
/* Media Query for small screens */
@media (max-width: 600px) {
.container {
flex-direction: column; }
.card {
font-size: 14px; } }
</style>
<div class="container">
<div class="card">
<h2>Course 1</h2>
<img src="course1.jpg" alt="Course 1">
<p>Learn HTML from scratch.</p>
</div>
<div class="card">
<h2>Course 2</h2>
<img src="course2.jpg" alt="Course 2">
<p>Master CSS step by step.</p>
</div>
</div>
🔥 Recap
✅ Use %, em, vw, vh instead of px
✅ Images: max-width: 100%; height: auto;
✅ Media Queries: change layout/styles per screen
✅ Mobile First: write mobile styles first, then add for bigger
✅ Flexbox/Grid + media queries = powerful layout control💪 Week 2 Day 4 Challenges: Flexbox & Grid CSS
📣 Today’s mission: Build a "Tech Event Schedule Webpage" using only Flexbox and Grid Layout to organize your content like a real event site! 😍
🎯 Challenge Brief:
Create a webpage for an upcoming Tech Conference or Workshop using Flexbox and Grid.
You're the designer — make it look structured, readable, and clean using all the layout techniques we’ve learned.
🛠️ Your Page Should Include:
🧑💼 1. Event Header
Use Flexbox to center and space:
➝Event name (e.g., "CodeVerse 2025")
➝Date
➝A register button
📅 2. Schedule Section
Use CSS Grid to display a 2-day agenda.
For each session, show:
Time
Session title
Speaker
Room
🧠 Try using grid-template-columns to organize into columns like: Time | Title | Speaker | Room.
👥 3. Speakers Section
Use Flexbox to align speaker profiles in a row or wrap them.
Each profile includes:
Image
Name
Short bio or topic
⭐ Bonus Ideas:
➤Flexbox: Use flex-wrap and justify-content
➤Grid: Use auto-fit, minmax(), or media queries
➤Style with bold backgrounds or gradients
➤Use gap, margin, padding, and border to create clean spaces
💬 Final Words
🧪 Test your creativity! Use as many tags, layout techniques, and styles as you can — even the ones we didn’t mention!
💾 Save your work,
📤 Share it in the group,
👫 Invite your friends, and
🌞 ✌️Stay awesome & stay well! 💻💖
