web

Natours Landing Page

Responsive Travel Landing Page

Key Features

Tour ShowcaseTour CardsPhoto GalleryBooking PopupStoriesResponsive Design

Overview

Built a responsive travel landing page while completing Jonas Schmedtmann's Advanced CSS & Sass course. The project focused on mastering Sass architecture, modern CSS layouts, animations, responsive design, and reusable UI components.

Highlights

  • Built a fully responsive landing page using modern CSS techniques.
  • Organized styles with Sass using reusable partials and variables.
  • Implemented advanced CSS animations, transforms, and transitions.
  • Applied Flexbox and responsive layouts across desktop and mobile devices.

Engineering Decisions

  • Structured styles using Sass modules for maintainability.
  • Adopted reusable UI sections to reduce duplicated styling.
  • Focused on responsive typography, spacing, and layout consistency.

Challenges

  • Learning advanced CSS concepts such as transforms, clipping, and animations.
  • Building responsive layouts using modern CSS techniques.
  • Organizing large stylesheets with Sass.

Outcomes

  • Strengthened my understanding of advanced HTML, CSS, and Sass.
  • Established a solid foundation before moving into React and full-stack development.