Introduction to Web Design - Discovery Challenge

🎯 Learning Objectives

By completing this activity, you will:

• Understand the basic structure of an HTML document
• Learn the difference between websites and webpages
• Identify key web design concepts (HTML, CSS, JavaScript)
• Practice adding content to an existing webpage
• Learn to work with navigation links and sections

🚀 Getting Started (See Results in 30 Seconds!)

# Just open index.html in your browser
open index.html
# or double-click the file

🎯 What's Already Working

• ✅ Beautiful gradient background with purple theme
• ✅ Professional header with title and subtitle
• ✅ Working navigation menu with smooth hover effects
• ✅ About Web Design section with introduction
• ✅ Key Concepts section with HTML and CSS cards
• ✅ Concepts grid layout ready for cards
• ✅ Responsive footer with copyright

⚠️ Your Tasks (6 TODOs)

• TODO 1: Add website vs webpage explanation (HTML)
• TODO 2: Add JavaScript concept card (HTML)
• TODO 3: Create Practice section (HTML)
• TODO 4: Style the .section class (CSS)
• TODO 5: Style the .concept-card class (CSS)
• TODO 6: Add card hover effect (CSS)

📋 Tasks to Complete

TODO 1: Add Website vs Webpage Explanation (Easy)

Location: index.html - Inside the About section

Success Criteria:

• Add a paragraph explaining the difference between a website and a webpage
• Use proper HTML paragraph tags <p></p>
• Content should be clear and easy to understand

Hints:

• Think of a website like a book, and webpages like individual pages in that book
• Use a real-world example (like Google.com vs the Google Search page)
• Keep it simple - this is for beginners!

TODO 2: Add JavaScript Concept Card (Medium)

Location: index.html - Inside the concepts-grid div

Success Criteria:

• Create a third concept card div with class="concept-card"
• Add <h3> heading with text "JavaScript"
• Add <p> paragraph describing what JavaScript does
• Card should match the structure of existing HTML and CSS cards

Hints:

• Look at the existing HTML and CSS cards for the structure pattern
• JavaScript is a programming language that adds interactivity
• Use the same class name so it gets the same styling

TODO 3: Create Practice Section (Medium)

Location: index.html - After the concepts section, before the footer

Success Criteria:

• Create a section with id="practice" and class="section"
• Add <h2> heading: "Practice What You've Learned"
• Create an unordered list with 3 practice activities
• Add a link to external learning resources

Hints:

• Look at how the "about" section is structured for the pattern
• Use <ul> and <li> tags for the unordered list
• The navigation already links to #practice - make sure your id matches!
• Use target="_blank" to open links in a new tab

TODO 4: Style the Section Class (Medium)

Location: style.css - Find the TODO comment for .section

Success Criteria:

• Add a semi-transparent white background
• Center the content with max-width and auto margins
• Add padding for internal spacing
• Add rounded corners and subtle shadow

Hints:

• Use rgba(255, 255, 255, 0.95) for semi-transparent white
• margin: 2rem auto centers horizontally
• Look at the .header class for shadow inspiration
• Rounded corners use border-radius property

TODO 5: Style the Concept Cards (Medium)

Location: style.css - Find the TODO comments for .concept-card

Success Criteria:

• Add a purple gradient background (matching the body)
• Set white text color for readability
• Add padding, rounded corners, and shadow
• Add transition for smooth hover animations

Hints:

• The body uses linear-gradient(135deg, #667eea 0%, #764ba2 100%)
• White text: color: white
• Add transition: transform 0.3s ease to enable smooth hover effects

TODO 6: Add Card Hover Effect (Easy)

Location: style.css - Right after TODO 5

Success Criteria:

• Card lifts up slightly on hover
• Shadow becomes more prominent

Hints:

• Use transform: translateY(-5px) to move up (negative = up)
• Increase the shadow values for more depth
• This only works if TODO 5 includes the transition property

🚀 Extension Challenges

Beginner:

• Add more concept cards for other web technologies (e.g., React, Bootstrap)
• Change the color scheme to your favorite colors
• Add your own photo or icon to the header

Intermediate:

• Create a "Resources" section with helpful links
• Add a "Contact" section with social media links
• Implement a dark mode toggle button

Advanced:

• Add smooth scrolling behavior when clicking navigation links
• Create an image gallery section with hover effects
• Add animations when sections come into view

🎨 Color Scheme Used

• Primary Purple: #667eea
• Secondary Purple: #764ba2
• White with transparency: rgba(255, 255, 255, 0.95)
• Text Color: #333
• Hover Purple: #667eea

🐛 Troubleshooting

Styles not showing?

• Make sure style.css is in the same folder as index.html
• Check that the <link> tag in the HTML head is correct
• Try hard-refreshing your browser (Ctrl+Shift+R or Cmd+Shift+R)

Cards not displaying in a grid?

• Make sure you've added the CSS for .concept-card
• Check that all three cards have class="concept-card"
• Verify the .concepts-grid is working properly

Navigation links not working?

• Ensure section IDs match the href values (e.g., id="practice" and href="#practice")
• Check for typos in ID names
• IDs are case-sensitive!

📚 Learning Resources

• MDN Web Docs: HTML Basics
• MDN Web Docs: CSS Basics
• W3Schools: Web Design Tutorial

✅ Completion Checklist

Before submitting, make sure:

• TODO 1: Website vs webpage explanation added
• TODO 2: JavaScript concept card added
• TODO 3: Practice section created with list and link
• TODO 4: .section class styled (background, margins, shadow)
• TODO 5: .concept-card class styled (gradient, padding, shadow)
• TODO 6: Card hover effect working (lift + shadow)
• Webpage displays correctly in browser
• All three navigation links work (#about, #concepts, #practice)
• Three concept cards display in the grid

Activity 01 - Introduction to Web Design W1: Front-end Design & User Experience Estimated Time: 45-60 minutes