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.