Skip to main content

​
Welcome to Natours

Natours is a modern landing page for an adventure tour company, built with advanced CSS and Sass techniques. This quickstart guide will help you get the project running on your local machine in just a few minutes.
Natours is a static website built with HTML, CSS/Sass, and vanilla JavaScript. No complex build tools or frameworks required - just compile the Sass and open the HTML file in your browser!

​
Prerequisites

Before you begin, make sure you have the following installed on your machine:
  • Node.js (v14 or higher) - Required for the Sass compiler
  • npm - Comes bundled with Node.js
  • A modern web browser (Chrome, Firefox, Safari, or Edge)
Check if Node.js is installed by running node --version in your terminal. If not installed, download it from nodejs.org.

​
Getting Started

1

Clone the Repository

First, clone the Natours repository to your local machine:
git clone https://github.com/marcosprofile/natours.git
cd natours
This creates a natours directory with all the project files.
2

Install Dependencies

Install the required npm packages, which includes the Sass compiler:
npm install
This installs:
  • sass (^1.92.1) - The Sass compiler for compiling .scss files to CSS
The project uses Sass (Dart Sass) to compile stylesheets. This is the only build dependency you need.
3

Compile Sass to CSS

Compile the Sass files to CSS using the build script:
npm run compile:sass
This command:
  • Compiles sass/main.scss into css/style.css
  • Watches for file changes with the -w flag
  • Automatically recompiles when you save changes to any .scss file
Keep this terminal window open while developing. The watch mode (-w) ensures your CSS updates automatically as you modify Sass files.
You should see output similar to:
Compiled sass/main.scss to css/style.css.
Sass is watching for changes. Press Ctrl-C to stop.
4

Open in Browser

Open the index.html file in your web browser:
open index.html
Or simply navigate to the project directory in your file explorer and double-click index.html.
For the best development experience, use a live server extension in your code editor (like Live Server in VS Code) to automatically refresh the page when files change.

​
Project Structure

Understanding the project structure will help you navigate and modify the codebase: 
natours/
├── css/                    # Compiled CSS output
│   ├── style.css          # Main compiled stylesheet
│   └── icon-font.css      # Icon font styles
├── img/                    # Images and media files
│   ├── logo-white.png     # Header logo
│   ├── nat-1.jpg          # Nature photos
│   ├── video.mp4          # Background video
│   └── ...                # Tour cards, backgrounds, etc.
├── sass/                   # Sass source files
│   ├── abstracts/         # Variables, mixins, functions
│   │   ├── _variables.scss # Color palette, grid settings
│   │   ├── _mixins.scss   # Reusable Sass mixins
│   │   └── _functions.scss # Custom Sass functions
│   ├── base/              # Base styles and resets
│   │   ├── _base.scss     # Reset and base element styles
│   │   ├── _animations.scss # Keyframe animations
│   │   ├── _typography.scss # Text and heading styles
│   │   └── _utilities.scss # Utility classes
│   ├── components/        # UI components
│   │   ├── _button.scss   # Button styles
│   │   ├── _card.scss     # Tour card components
│   │   ├── _form.scss     # Form and input styles
│   │   ├── _popup.scss    # Modal popup
│   │   ├── _story.scss    # Customer story cards
│   │   └── layout/        # Layout components
│   │       ├── _header.scss    # Hero header
│   │       ├── _footer.scss    # Footer section
│   │       ├── _navigation.scss # Nav menu
│   │       └── _grid.scss      # Grid system
│   └── main.scss          # Main Sass entry point
├── index.html             # Main HTML file
└── package.json           # Project dependencies

​
Key Files Explained

index.html

The main HTML file containing all the page content and structure. Located at the project root.

sass/main.scss

The Sass entry point that imports all other stylesheets using the modern @use syntax.

sass/abstracts/_variables.scss

Global variables including the color palette, font sizes, and grid settings.

css/style.css

Auto-generated compiled CSS. Never edit this file directly - modify the Sass files instead.

​
Understanding the Sass Architecture

Natours uses a modular Sass architecture based on the 7-1 pattern. The sass/main.scss file imports all modules:
sass/main.scss
@use "./abstracts/functions";
@use "./abstracts/mixins";
@use "./abstracts/variables";

@use "./base/animations";
@use "./base/base";
@use "./base/typography";
@use "./base/utilities";

@use "./components/button";
@use "./components/composition";
@use "./components/feature-box";
@use "./components/card";
@use "./components/story";
@use "./components/bg-video";
@use "./components/form";
@use "./components/popup";

@use "./components/layout/navigation";
@use "./components/layout/header";
@use "./components/layout/grid";
@use "./components/layout/footer";

@use "./components/pages/home";

​
Design System

The project uses a consistent design system defined in sass/abstracts/_variables.scss:
sass/abstracts/_variables.scss
// Color Palette
$color-primary: #55C57A;        // Main brand green
$color-primary-light: #7ED56F;  // Light green
$color-primary-dark: #28B485;   // Dark green

$color-secondary-light: #FFB900; // Orange for accents
$color-secondary-dark: #FF7730;  // Deep orange

$color-tertiary-light: #2998FF;  // Blue for cards
$color-tertiary-dark: #5643FA;   // Purple for cards

// Typography
$default-font-size: 1.6rem;

// Grid System
$grid-width: 114rem;
$gutter-vertical: 8rem;
$gutter-horizontal: 6rem;

​
Viewing the Website

Once you’ve completed the setup steps, you should see:
  1. Hero Header - Stunning hero section with animated text and CTA button
  2. About Section - Information about tours with image composition
  3. Features Section - Four key benefits with icons on a skewed background
  4. Tours Section - Three flip cards showcasing popular tours
  5. Stories Section - Customer testimonials with background video
  6. Booking Section - Contact form with custom styled inputs
  7. Footer - Links and copyright information
  8. Navigation Menu - Animated hamburger menu with smooth transitions
Try clicking the hamburger menu icon in the top-right corner to see the animated navigation drawer!

​
Development Workflow

Here’s a typical development workflow:
1

Start the Sass compiler

npm run compile:sass
Leave this running in a terminal window to watch for changes.
2

Open the HTML file

Open index.html in your browser or use a live server.
3

Make changes

Edit Sass files in the sass/ directory. The compiler will automatically regenerate css/style.css.
4

Refresh browser

Refresh your browser to see the changes (or use auto-reload with a live server).

​
Common Issues

Issue: Sass compiler not found or npm run compile:sass failsSolution: Make sure you ran npm install first. If the issue persists, try deleting node_modules and package-lock.json, then run npm install again.
Issue: CSS changes not appearing in the browserSolution:
  1. Check that the Sass compiler is running (npm run compile:sass)
  2. Hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R)
  3. Check the browser console for errors
  4. Verify css/style.css was updated (check the file timestamp)
Issue: Images or fonts not loadingSolution: Make sure you’re viewing the page with the correct relative paths. If using a live server, start it from the project root directory.

​
Next Steps

Now that you have Natours running locally, here’s what to explore next:

Customize Colors

Learn how to modify the color scheme and create your own brand palette

Sass Architecture

Deep dive into the modular Sass structure and BEM naming conventions

Components Guide

Explore each component: buttons, cards, forms, and more

Animations

Understand the CSS animations and how to create your own effects

​
Additional Resources

This project was created as part of Jonas Schmedtmann’s Advanced CSS and Sass course. It demonstrates modern CSS techniques including Flexbox, CSS Grid, animations, Sass architecture, and responsive design.

Build docs developers (and LLMs) love

Get started for freeTalk to us