🔥🔥 Project 1
📢 Final HTML Practice Challenges Before Wrapping Up!
🎯 Your Task: Build the following challenges using all the HTML tags and methods we’ve learned so far.
You can even add extra things using any tag or method we might not have mentioned directly — creativity is welcome!
✅ Challenge 1: Restaurant Web Page 🍽️
What to Include:
➡️Restaurant name and logo (header)
➡️Menu table with:
➤ Food item, price, ingredients, availability
➡️Images of dishes (use alt text)
➡️Restaurant branches:
location, opening hours, contact numbers
➡️Upcoming events or offers:
special nights, discounts
➡️Contact form for booking or feedback
➡️Footer: Address, social links, copyright
💡 Don’t forget: Use lists for menus too (ul or ol), add navigation links, semantic tags like <section>, <nav>, <footer>!
✅ Challenge 2: Book Store Catalog 📚
What to Include:
➲Store name and logo
➲Divide content into clear sections using headings:
➤ Fiction
➤ Science
➤ Biographies
➤ Newspaper & Magazines
➲For each section:
➤ Book cover image
➤ Title, author, price (in table)
➤ Short description
➲Opening and closing times table
➲Contact form or order request form
💡 Bonus: Include a small “about us” section and use <div> and <span> where helpful!
✅ Challenge 3: Scholarship Application Page 🎓
What to Include:
➥University or organization name and logo
➥Section describing the university/organization (mission, vision, departments)
➥List of available scholarships:
➤ Types, benefits, duration
➥Requirements list:
➤ GPA, documents, deadlines
➥Application form:
➤ Name, birth date, education background
➤ Attach documents field (file input)
➤ Checkbox for agreement to terms
➤ Submit button
💡 Bonus: Add tables to show scholarship comparison or eligibility.
✅ Important Notes for All Challenges:
➤ Use:
➛<header>, <footer>, <nav>, <main>, <section>
➛<table>, <ul>, <ol>, <form>, <input>, <textarea>, <button>
➛Images <img>, videos <video>, audio <audio>
➛ if useful <div>, <span>, class and id attributes
➤ Use any other tags or elements we learned: even things like <abbr>, <hr>, <br>.
✅ When You’re Done:
Share your work (screenshot or code) in the group!
Invite your friends to join the channel and learn with us.
✌️Stay well and get ready for our next topic: CSS Styling!
#Week1 #Html #project #project1
📢 Final HTML Practice Challenges Before Wrapping Up!
🎯 Your Task: Build the following challenges using all the HTML tags and methods we’ve learned so far.
You can even add extra things using any tag or method we might not have mentioned directly — creativity is welcome!
✅ Challenge 1: Restaurant Web Page 🍽️
What to Include:
➡️Restaurant name and logo (header)
➡️Menu table with:
➤ Food item, price, ingredients, availability
➡️Images of dishes (use alt text)
➡️Restaurant branches:
location, opening hours, contact numbers
➡️Upcoming events or offers:
special nights, discounts
➡️Contact form for booking or feedback
➡️Footer: Address, social links, copyright
💡 Don’t forget: Use lists for menus too (ul or ol), add navigation links, semantic tags like <section>, <nav>, <footer>!
✅ Challenge 2: Book Store Catalog 📚
What to Include:
➲Store name and logo
➲Divide content into clear sections using headings:
➤ Fiction
➤ Science
➤ Biographies
➤ Newspaper & Magazines
➲For each section:
➤ Book cover image
➤ Title, author, price (in table)
➤ Short description
➲Opening and closing times table
➲Contact form or order request form
💡 Bonus: Include a small “about us” section and use <div> and <span> where helpful!
✅ Challenge 3: Scholarship Application Page 🎓
What to Include:
➥University or organization name and logo
➥Section describing the university/organization (mission, vision, departments)
➥List of available scholarships:
➤ Types, benefits, duration
➥Requirements list:
➤ GPA, documents, deadlines
➥Application form:
➤ Name, birth date, education background
➤ Attach documents field (file input)
➤ Checkbox for agreement to terms
➤ Submit button
💡 Bonus: Add tables to show scholarship comparison or eligibility.
✅ Important Notes for All Challenges:
➤ Use:
➛<header>, <footer>, <nav>, <main>, <section>
➛<table>, <ul>, <ol>, <form>, <input>, <textarea>, <button>
➛Images <img>, videos <video>, audio <audio>
➛ if useful <div>, <span>, class and id attributes
➤ Use any other tags or elements we learned: even things like <abbr>, <hr>, <br>.
✅ When You’re Done:
Share your work (screenshot or code) in the group!
Invite your friends to join the channel and learn with us.
✌️Stay well and get ready for our next topic: CSS Styling!
#Week1 #Html #project #project1
Use this code for now for your image's size to decrease. Put it before <body>. You can change the width to your preferences.
<style>
img {
width: 50px;
height: auto;
}
</style>
1. What does the <em> tag represent in HTML?
Anonymous Quiz
0%
A) Highlighted text
100%
B) Italic text with emphasis meaning
0%
C) Bold text
0%
D) Underlined text
2. Which attribute is used to open a link in a new browser tab?
Anonymous Quiz
0%
A) open="new"
43%
B) href="_blank"
50%
C) target="_blank"
7%
D) window="newtab"
3. What is the correct order of tags to create a basic HTML page?
Anonymous Quiz
0%
A) <html>, <body>, <head>
0%
B) <head>, <html>, <body>
100%
C) <html>, <head>, <body>
0%
D) <body>, <head>, <html>
4. How can you make a numbered list in HTML?
Anonymous Quiz
0%
A) <list>
87%
B) <ol>
0%
C) <ul>
13%
D) <li>
5. What does <td> stand for in HTML tables?
Anonymous Quiz
14%
A) Table Division
71%
B) Table Data
7%
C) Table Description
7%
D) Table Design
6. Which tag is used to embed a video in an HTML page?
Anonymous Quiz
93%
A) <video>
0%
B) <media>
7%
C) <embed>
0%
D) <file>
7. The alt attribute in an <img> tag is important because:
Anonymous Quiz
20%
A) It stores the image file
73%
B) It shows alternative text if the image doesn’t load
7%
C) It changes the image’s color
0%
D) It links the image to another page
8. To merge two or more cells in a table horizontally, you use:
Anonymous Quiz
29%
A) rowspan
29%
B) colspan
29%
C) cellmerge
14%
D) merge
9. Which attribute is used to identify a unique element on a page?
Anonymous Quiz
15%
A) class
0%
B) type
85%
C) id
0%
D) key
10. What does the <br> tag do in HTML?
Anonymous Quiz
0%
A) Creates a bold line
100%
B) Breaks a line (new line)
0%
C) Adds a border
0%
D) Removes a paragraph
11. What does the autoplay attribute do in <audio> or <video>?
Anonymous Quiz
25%
A) Makes media loop forever
75%
B) Starts playing as soon as the page loads
0%
C) Pauses media automatically
0%
D) Resizes media
12. Why use <blockquote> in HTML?
Anonymous Quiz
0%
A) Highlight large text
100%
B) Display long quoted content from another source
0%
C) Add bold text
0%
D) Create tables
13. What happens if you forget to close a <p> tag?
Anonymous Quiz
38%
A) The browser ignores all following content
0%
B) It breaks the entire page
54%
C) The browser automatically closes it, but structure may be affected
8%
D) It creates a new line
14. What is the main purpose of <aside>?
Anonymous Quiz
0%
A) Add audio files
100%
B) Display unrelated side content, like advertisements or links
0%
C) Style buttons
0%
D) Add a footer
15. Which HTML element defines navigation links?
Anonymous Quiz
8%
A) <navigation>
85%
B) <nav>
8%
C) <menu>
0%
D) <links>
🎨 Week 2 Day 1: Introduction to CSS (Cascading Style Sheets)
💡 Topic:
What is CSS? Why It Matters, How It Works.
🎯 Goal:
➡️Understand the basics of CSS,
➡️how to apply styles to HTML,
➡️ and try your first styles.
🌍 Welcome Back to Fullstack Summer Camp!
You survived HTML week — now let’s make those plain web pages look awesome using CSS!
Imagine HTML as building a house: walls, rooms, and windows. CSS is painting, decorating, adding curtains, choosing colors, shapes, and sizes.
✅ 1️⃣ What is CSS?
CSS stands for Cascading Style Sheets.
It’s a language that tells the browser how things should look on a web page. >
HTML = Structure >
CSS = Style / Design
Example:<p>This is a paragraph.</p>
Without CSS → Looks plain.
With CSS → You can change:
➤Color
➤Font
➤Size
➤Spacing
➤Borders
➤Background
✅ 2️⃣ How to Add CSS to HTML
There are 3 main ways:
a) Inline CSS (inside an HTML tag)
<p style="color: red;">Hello!</p> 👉 Used for very small, one-time changes. Not recommended for full websites.
b) Internal CSS (inside <style> in the HTML file)
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is blue text!</p>
</body>
</html> 👉 Good for small projects. Easy for practice.
c) External CSS (linked as a separate file)
HTML file:
<link rel="stylesheet" href="style.css"> style.css file:
p {
color: green;
} 👉 Best practice for real websites. Keeps things organized!
✅ 3️⃣ CSS Selectors: How CSS Targets HTML
Basic Rule Format:
selector {
property: value;
} Selector → Which element (like p, h1, or a class)
Property → What to change (like color, size)
Value → How you want it (red, 20px)
We can:
➤select by type/element:
P, h1, h3, img , span ....
p {
color: blue;}
➤select by class
We use " . "before the name of the class.
Html➺
<p class="highlight">Don't forget this</p>
css➺
.highlight {
background-color:yellow;}
➤select by ID
We use "#" before ID name
Html➺
<button id="main">click</button>
css➺
#main {
background-color: green;}
➤you can also target elements that are inside (nested)
➺Html
<div>
<h2>Menu Today</h2>
<p>We have coffee and tea.</p>
</div>
<h2>Thank You</h2>
➺Css
div h2 {
color: orange;
}
✅ 4️⃣ Common Properties with Examples
1. Color
h1 {
color: purple; } 2. Background Color
body {
background-color: lightgray; } 3. Font Size
p {
font-size: 18px; } 4. Font Family
p {
font-family: Arial, sans-serif; } 5. Text Align
h2 {
text-align: center; } 6. Width and Height
7. Borderdiv {
width: 300px;
height: 150px;
background-color: yellow; }
p {
border: 2px solid black; } 8. Padding (space inside element) and Margin(space outside element)
div {
padding: 20px;
margin: 30px; } 9. border-radius:
Rounds corners
img {
border-radius: 10px; }
10. box-shadow:
Adds shadow around boxes
div {
box-shadow: 2px 2px 8px gray; }
11. opacity:
Makes things transparent
img {
opacity: 0.8; }
12. cursor:
Changes mouse cursor
button {
cursor: pointer; }
13. text-decoration: (underline)
a {
text-decoration: none; }
14. display:
Controls layout
div {15.position:
display : block; }
span {
display: inline; }
Controls exact placement
div {✅ 5️⃣ Combining Multiple Properties
position: absolute;
top: 10px;
left: 20px; }
✅ 6️⃣ Real Life Analogyp {
color: white;
background-color: black;
font-size: 20px;
text-align: justify; }
Think of CSS as designing your injera restaurant menu:
The structure is the menu paper (HTML)
The font color, layout, and sizes are CSS.
When someone looks at it, they notice the style first!
✅ 7⃣ Summary
✔️ CSS = Design and Style
✔️ 3 Ways to add CSS (Inline, Internal, External)
✔️ Use selectors + properties
✔️ Common styles: color, background, font-size, width, border
#Week2 #Day1 #Css #introductionCss #lesson