π 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! πͺπ₯
πͺ 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! πͺπ₯
1.Which rule has the highest specificity?
Anonymous Quiz
0%
a) Class selector
75%
b) ID selector
13%
c) Universal selector
13%
d) Element selector
2. In position: absolute;, what is the position relative to?
Anonymous Quiz
25%
a) Body
38%
b) Screen
38%
c) Closest positioned ancestor
0%
d) The next sibling
3.What is overflow: auto; used for?
Anonymous Quiz
20%
a) Cuts off content
40%
b) Always shows scrollbar
0%
c) Hides content
40%
d) Shows scrollbar only if needed
4.What does flex-grow: 1; do?
Anonymous Quiz
0%
a) Shrinks the item
100%
b) Makes it grow to fill available space
0%
c) Changes its height
0%
d) Removes margins
5.Which unit scales with the width of the screen?
Anonymous Quiz
50%
a) px
0%
b) em
33%
c) rem
17%
d) vw
6.What is the default display of a <div>?
Anonymous Quiz
14%
a) inline
86%
b) block
0%
c) inline-block
0%
d) flex
7.What does object-fit: cover; do to an image?
Anonymous Quiz
14%
a) Stretches the image
57%
b) Crops and scales the image to fill the box
29%
c) Centers the image
0%
d) Makes it smaller than the box
8. Which selector will target all <p> inside a div?
Anonymous Quiz
67%
a) div p {}
0%
b) p div {}
17%
c) .div > p
17%
d) p > div {}
9.Which color format is valid in CSS?
Anonymous Quiz
0%
a) rgb(255, 0, 0)
0%
b) rgba(0, 0, 0, 1)
0%
c) #ff0000
100%
d) All of the above
10.What does opacity: 0.5; do?
Anonymous Quiz
0%
a) Hides element
100%
b) Makes it 50% transparent
0%
c) Adds border
0%
d) Sets padding
11.Which rule targets all buttons inside a form?
Anonymous Quiz
0%
a) form + button
60%
b) form > button
20%
c) form button
20%
d) form:button
12.Which of these is used in responsive design?
Anonymous Quiz
0%
a) @media
50%
b) @responsive
0%
c) @screen
50%
d) @grid
13.What does justify-content: center; do in flexbox?
Anonymous Quiz
0%
a) Aligns items to the left
0%
b) Aligns items to the top
100%
c) Aligns items horizontally center
0%
d) Aligns items vertically center
14.What does flex-direction: column; do?
Anonymous Quiz
0%
a) Arranges items in a row
100%
b) Stacks items vertically
0%
c) Hides elements
0%
d) Applies margin
15.Whatβs the correct way to link an external CSS file?
Anonymous Quiz
0%
a) <style src="style.css">
0%
b) <css href="style.css">
100%
c) <link rel="stylesheet" href="style.css">
0%
d) <link src="style.css">
16.What does color: red; do?
Anonymous Quiz
0%
a) Changes background color to red
100%
b) Changes text color to red
0%
c) Adds a red border
0%
d) Adds a red underline
17.How do you hide an element but still keep its space?
Anonymous Quiz
0%
a) display: none;
40%
b) visibility: hidden;
60%
c) opacity: 0;
0%
d) z-index: -1;
How are you finding the content so far?
I'd appreciate your feedback on the comment section.
I'd appreciate your feedback on the comment section.
Anonymous Poll
83%
π
17%
π