In this lab, you’ll build a responsive website while exploring how AI-assisted tools (Copilot & ChatGPT) can help with layout, design choices, and accessibility—all while learning to build a site from scratch. How cool is that?!
🌴 About Nomadiq: Nomadiq Travel Destinations is a travel company passionate about sustainability—helping people explore the world while protecting it.
Primary (recommended):
- GitHub Codespaces + Copilot — your main environment for coding, saving to a repo, and growing your project with AI help.
Optional:
- ChatGPT (Canvas) — prompt, preview, and edit code here first if you’d like. When you’re ready, copy your files into Codespaces to commit them to a repo and keep building with Copilot.
Prompt 1 – Header with Navigation
- Create beginner-friendly HTML and CSS for a simple, stylish header featuring the company name 'Nomadiq Travel Destinations'.
- Use an appealing, modern font or an emoji to enhance visual appeal.
Prompt 2 – Typography & Colors
- Suggest an easy-to-read font pairing suitable for a travel-themed site focused on sustainability.
- Provide a calming color palette inspired by nature, using gentle greens and blues.
Prompt 3 – Hero Section
- Build a welcoming hero section featuring a centered headline and descriptive paragraph about sustainable travel.
- Include a soft, appealing background color and generous spacing.
Prompt 4 – About Section
- Create a clearly structured content section below the hero titled 'About Nomadiq Travel Destinations.'
- Include a heading, a brief descriptive paragraph about the company's focus on eco-friendly travel.
Prompt 5 – Call-to-Action (CTA)
- Short message + styled button (e.g. “Plan Your Trip” or “Learn More”)
- Button should be clickable
Prompt 6 – Responsive Design
- Make the webpage fully responsive, ensuring text and layouts smoothly scale from mobile to desktop screens.
Prompt 7 – (Optional) Interactivity & Polish
- Enhance the header and hero section with subtle hover effects or transitions using simple CSS.
- Refine your typography by adjusting font sizes and spacing to boost readability.
| Task | Snippet |
|---|---|
| Media Queries | @media (max-width: 768px) { /* styles */ } |
| Google Fonts | <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" /> |
| Hover Effects | .card:hover { transform: scale(1.05); transition: 0.3s; } |
- Google Fonts – Explore font pairings
- Coolors – Generate color palettes
- Dribbble – Layout and UI ideas
- Unsplash – Free, high-quality stock images
- Pexels – Free stock photos & videos
- Pixabay – Free images, illustrations, and vectors
- W3C Accessibility – Inclusive design principles
Publishing to GitHub Pages is optional for today’s lab, but it will be a requirement for your next project. Use this lab as a chance to practice and get comfortable with the workflow 🌐.
We’ll do a step-by-step walkthrough on how to publish your site using GitHub Pages so it’s live on the web.
Follow these beginner-friendly steps to create a hero section:
-
Add HTML for the Hero Section
- Place this code inside your
<body>tag, near the top of your HTML file.
<!-- Hero Section --> <section class="hero"> <!-- Headline for the hero section --> <h1>Explore Sustainably with Nomadiq</h1> <!-- Short paragraph describing sustainable travel --> <p>Discover the world while protecting it. Nomadiq Travel Destinations helps you plan eco-friendly adventures that make a difference.</p> </section>
- Place this code inside your
-
Add Simple CSS for Styling
- Put this in your
<style>tag or a separate CSS file. - Comments explain each part!
/* Style for the hero section */ .hero { /* Soft, calming background color */ background-color: #e3f6f5; /* gentle blue-green */ /* Add space inside the section */ padding: 60px 20px; /* Center all text */ text-align: center; /* Add space below the hero section */ margin-bottom: 40px; /* Slightly round the corners */ border-radius: 12px; } .hero h1 { /* Make headline bigger and bold */ font-size: 2.5em; font-weight: bold; margin-bottom: 20px; color: #277da1; /* deep blue */ } .hero p { /* Make paragraph easy to read */ font-size: 1.2em; color: #388087; /* soft teal */ margin: 0 auto; max-width: 500px; /* keep lines short for readability */ }
- Put this in your
-
Tips
- Change the background color to any gentle green or blue you like.
- Adjust padding for more or less space.
- Use comments to help you understand each style!