Skip to content

README.md

Latest commit

 

History

History
82 lines (51 loc) · 3.59 KB

README.md

File metadata and controls

82 lines (51 loc) · 3.59 KB

📘 Day 11 – Travel Agency Demo (Practical)

🔰 Overview

Welcome to Day 11 — a practical project day where you built a small Travel Agency webpage. This lesson focused on applying HTML structure, embedding media, and organizing content into semantic regions (header, main, section, article, aside, and footer).

The page demonstrates how to present travel destinations, imagery, a short agency description, and a navigation menu. It’s an excellent exercise in turning raw content into a presentable static page.

📂 File Structure

Day11/
└── index.html    # Travel Agency demo page (static HTML)

🧠 What’s in this File (Practical Breakdown)

✅ Header & Navigation

  • Contains a logo image and a title for the travel agency.
  • A simple navigation menu (<nav>) linking to Home, Packages, and About.
  • Note: the file uses <Header> capitalization — HTML tags should be lowercase (<header>).

✅ Main Content – Destinations List

  • A list of Most Visited Places in Karnataka with short descriptions for each place.
  • Currently implemented using bare <li> elements without a surrounding <ul>/<ol>; these should be wrapped in a list element for valid HTML and correct semantics.

✅ Hero Section

  • An image followed by an <article> describing services and an <aside> linking to a YouTube page for “Best Packages”.

✅ Media

  • Images are embedded using absolute URLs. Good for demos but consider local assets for production.

✅ Footer

  • A simple footer with copyright text.

💡 Skills & Concepts Practiced

✔️ Structuring a small multi-section webpage ✔️ Embedding images and basic navigation ✔️ Using semantic regions (header, main, section, article, aside, footer) — though some tags need correction ✔️ Writing content-focused HTML for a simple static site

📌 Quick Fixes & Improvements (Actionable)

  1. Tag casing: Use lowercase tags — <header>, <main>, etc. HTML is case-insensitive in practice, but lowercase is the standard.
  2. Lists: Wrap <li> items in <ul> or <ol> so the markup is valid and accessible.
  3. Heading levels: Replace h5 used near top-level content with appropriate levels (h2/h3) to preserve document outline.
  4. Image sizes & responsiveness: Avoid fixed height/width attributes; use CSS or responsive attributes like max-width:100% for fluid layouts.
  5. Alt text quality: Make alt attributes descriptive for accessibility (e.g., alt="Travelling Agency Logo").
  6. Semantic grouping: Keep the <main> tag to wrap primary content only — don’t nest it inside unrelated container tags.
  7. Validate HTML: Run the page through an HTML validator (validator.w3.org) to catch structural issues.

🔧 Suggested Tasks (Practice)

  • ✅ Wrap destination <li> elements in a proper <ul> and style with CSS later.
  • ✅ Replace the capitalized <Header> with <header> and ensure the <main> element contains only the primary content.
  • ✅ Add a <meta name="description"> in <head> for SEO.
  • ✅ Convert absolute image URLs into local assets and reference them from an assets/ folder.
  • ✅ Add a contact form (small) to the page for booking inquiries — this ties back to the Day 11 forms objective.

🚀 Next Steps

Turn this static demo into a small project: add CSS to style the layout, make images responsive, and add a contact form that POSTs to a demo endpoint (or uses JavaScript to simulate submission). This will combine everything you’ve learned across Days 9–11 into a simple, deployable page.