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
• ✅ Responsive footer with copyright
• ⚠️ TODO: Add JavaScript concept card
• ⚠️ TODO: Complete the website vs webpage explanation
• ⚠️ TODO: Create Practice section with learning activities
• ⚠️ TODO: Add CSS styles for section and concept-card classes

📋 Tasks to Complete

TODO 1: Add Website vs Webpage Explanation (Easy)

Location: index.html - Line 32-33

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

Example:

<p>A website is a collection of related webpages, while a webpage is a single page within a website. For example, Google.com is a website, but the Google Search page is a webpage.</p>

TODO 2: Add JavaScript Concept Card (Medium)

Location: index.html - Lines 54-59

Success Criteria:

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

Example Structure:

<div class="concept-card">
  <h3>JavaScript</h3>
  <p>Programming language that adds interactivity to websites</p>
</div>

TODO 3: Create Practice Section (Medium)

Location: index.html - Lines 62-69

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 YouTube tutorials about web design basics

Example Structure:

<section id="practice" class="section">
  <h2>Practice What You've Learned</h2>
  <ul>
    <li>Create a simple webpage with HTML</li>
    <li>Style it using CSS</li>
    <li>Add interactive elements with JavaScript</li>
  </ul>
  <p>Want to learn more? Check out <a href="https://www.youtube.com/results?search_query=web+design+basics" target="_blank">YouTube tutorials</a>!</p>
</section>

TODO 4: Style the Section Class (Medium)

Location: style.css - Lines 70-77

Success Criteria:

• Add background color with transparency
• Set margin and padding for spacing
• Add border-radius for rounded corners
• Add box-shadow for depth effect

CSS to Add:

.section {
  background-color: rgba(255, 255, 255, 0.95);
  margin: 2rem auto;
  padding: 2rem;
  max-width: 900px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

TODO 5: Style the Concept Cards (Medium)

Location: style.css - Lines 90-96 and 98-102

Success Criteria:

• Add gradient background to cards
• Set white text color
• Add padding and border-radius
• Add box-shadow and transition effect
• Create hover effect with transform

CSS to Add:

.concept-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.concept-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

🚀 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:

• All TODO items in HTML are completed
• All TODO items in CSS are completed
• Webpage displays correctly in browser
• All navigation links work properly
• Three concept cards display in a grid
• Practice section is visible and complete
• Page is responsive on mobile devices

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