How to Make a Landing Page using HTML, SCSS, and JavaScript

As a full-stack developer, I‘ve created numerous landing pages for various projects and clients. In this expert-level guide, I‘ll walk you through the process of building a modern, responsive landing page using HTML, SCSS, and JavaScript. By the end of this article, you‘ll have the knowledge and skills to create your own stunning landing pages that effectively showcase your products or services.

Introduction to Landing Pages

Landing pages are standalone web pages designed to convert visitors into leads or customers. They play a crucial role in digital marketing campaigns, as they provide a focused and targeted experience for users who arrive from various sources, such as search engines, social media, or email campaigns.

A well-designed landing page should have a clear purpose, engaging visuals, compelling copy, and a strong call-to-action (CTA) that encourages visitors to take the desired action, such as signing up for a newsletter, downloading an eBook, or making a purchase.

Setting Up the Project Environment

Before we dive into coding, let‘s set up our project environment. You‘ll need the following tools:

A code editor (e.g., Visual Studio Code, Sublime Text, or Atom)
A web browser (e.g., Google Chrome, Firefox, or Safari)
A terminal or command prompt
Node.js and npm (Node Package Manager) installed on your machine

Create a new directory for your project and open it in your code editor. Inside the project directory, create the following files and folders:

- index.html
- styles/
  - main.scss
- scripts/
  - main.js

The index.html file will contain the structure of our landing page, the styles/main.scss file will hold our SCSS styles, and the scripts/main.js file will contain our JavaScript code.

Structuring the HTML

Let‘s start by creating the basic structure of our landing page in the index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Landing Page</title>
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <header>
    <!-- Navigation menu goes here -->
  </header>

  <main>
    <section class="hero">
      <!-- Hero section content goes here -->
    </section>

    <section class="features">
      <!-- Features section content goes here -->
    </section>

    <section class="testimonials">
      <!-- Testimonials section content goes here -->
    </section>

    <section class="cta">
      <!-- Call-to-action section content goes here -->
    </section>
  </main>

  <footer>
    <!-- Footer content goes here -->
  </footer>

  <script src="scripts/main.js"></script>
</body>
</html>

This basic structure includes a <header> for our navigation menu, a <main> element with sections for the hero, features, testimonials, and call-to-action, and a <footer> for additional information and links.

Styling with SCSS

SCSS (Sassy CSS) is a preprocessor that extends the capabilities of CSS, providing features like variables, mixins, nesting, and more. Using SCSS can help you write cleaner, more maintainable styles for your landing page.

First, make sure you have SCSS installed on your machine. You can install it using npm:

npm install -g sass

Now, let‘s create some basic styles in the styles/main.scss file:

// Variables
$primary-color: #007bff;
$secondary-color: #6c757d;
$font-family: ‘Roboto‘, sans-serif;

// Mixins
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Global styles
body {
  font-family: $font-family;
  margin: 0;
  padding: 0;
}

// Header styles
header {
  background-color: $primary-color;
  color: white;
  padding: 1rem;

  nav {
    @include flex-center;

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;

      li {
        margin-right: 1rem;

        a {
          color: white;
          text-decoration: none;
        }
      }
    }
  }
}

// Hero section styles
.hero {
  @include flex-center;
  flex-direction: column;
  text-align: center;
  min-height: 400px;
  background-image: url(‘hero-background.jpg‘);
  background-size: cover;
  background-position: center;
  color: white;

  h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  .cta-button {
    background-color: $secondary-color;
    color: white;
    padding: 1rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.2rem;
  }
}

// Add more styles for features, testimonials, and footer sections

This SCSS code demonstrates the use of variables for colors and font family, a mixin for centering elements using flexbox, and nesting to keep the styles organized and readable.

Implementing Responsive Design

To ensure our landing page looks great on all devices, we‘ll use responsive design techniques like media queries, flexbox, and CSS Grid.

First, let‘s add a responsive navigation menu that collapses into a hamburger menu on smaller screens. Update the <header> section in your index.html file:

<header>
  <nav>
    <div class="logo">My Landing Page</div>
    <ul class="nav-links">
      <li><a href="#features">Features</a></li>
      <li><a href="#testimonials">Testimonials</a></li>
      <li><a href="#cta">Sign Up</a></li>
    </ul>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </nav>
</header>

Next, update your styles/main.scss file with the following media queries and styles:

// Navigation menu styles
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;

  .logo {
    font-size: 1.5rem;
  }

  .nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      margin-left: 1rem;

      a {
        color: white;
        text-decoration: none;
      }
    }
  }

  .burger {
    display: none;
    cursor: pointer;

    div {
      width: 25px;
      height: 3px;
      background-color: white;
      margin: 5px;
      transition: all 0.3s ease;
    }
  }

  @media screen and (max-width: 768px) {
    .nav-links {
      position: absolute;
      right: 0;
      top: 8vh;
      min-height: 92vh;
      background-color: $primary-color;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 50%;
      transform: translateX(100%);
      transition: transform 0.5s ease-in;

      li {
        opacity: 0;
      }
    }

    .burger {
      display: block;
    }
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

This SCSS code creates a responsive navigation menu that displays as a horizontal list on larger screens and collapses into a hamburger menu on smaller screens. The hamburger menu animates when clicked, revealing the navigation links.

Adding Interactivity with JavaScript

To make our landing page more interactive, we‘ll use JavaScript to add smooth scrolling and toggle the mobile navigation menu.

In your scripts/main.js file, add the following code:

// Smooth scrolling
const navLinks = document.querySelectorAll(‘nav a‘);

navLinks.forEach(link => {
  link.addEventListener(‘click‘, (e) => {
    e.preventDefault();
    const targetId = link.getAttribute(‘href‘);
    const targetPosition = document.querySelector(targetId).offsetTop;
    window.scrollTo({
      top: targetPosition,
      behavior: ‘smooth‘
    });
  });
});

// Mobile navigation toggle
const burger = document.querySelector(‘.burger‘);
const nav = document.querySelector(‘.nav-links‘);
const navLinks = document.querySelectorAll(‘.nav-links li‘);

burger.addEventListener(‘click‘, () => {
  nav.classList.toggle(‘nav-active‘);
  navLinks.forEach((link, index) => {
    if (link.style.animation) {
      link.style.animation = ‘‘;
    } else {
      link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
    }
  });
  burger.classList.toggle(‘toggle‘);
});

The smooth scrolling code adds event listeners to the navigation links, preventing the default link behavior and smoothly scrolling to the corresponding section when clicked.

The mobile navigation toggle code adds an event listener to the hamburger menu icon, toggling the nav-active class on the navigation menu and animating the links when the icon is clicked.

Optimizing Performance and Accessibility

To ensure our landing page loads quickly and is accessible to all users, we should optimize our code and assets:

Minify CSS and JavaScript files to reduce their size and improve loading times.
Compress images using tools like TinyPNG or ImageOptim to minimize file sizes without sacrificing quality.
Use semantic HTML elements like <header>, <nav>, <main>, <section>, and <footer> to provide a clear structure and improve accessibility for screen readers.
Add ARIA (Accessible Rich Internet Applications) attributes to provide additional context for assistive technologies.

Deploying the Landing Page

Once your landing page is complete, you‘ll want to deploy it so that others can access it online. Some popular hosting options include:

GitHub Pages: A free hosting service provided by GitHub that allows you to host static websites directly from your GitHub repository.
Netlify: A powerful platform that offers continuous deployment, custom domains, and other features for static websites.

To deploy your landing page on GitHub Pages:

Create a new GitHub repository for your project.
Push your local project files to the new repository.
Go to the repository‘s settings and navigate to the "Pages" section.
Select the branch you want to deploy (usually "main" or "master") and click "Save."
Your landing page will now be accessible at https://yourusername.github.io/your-repo-name.

Best Practices and Tips

To create an effective landing page that converts visitors into leads or customers, consider the following best practices and tips:

Create a clear and compelling headline that communicates the main benefit of your product or service.
Use engaging visuals, such as high-quality images or videos, to capture visitors‘ attention and illustrate your message.
Write persuasive copy that highlights the features and benefits of your offering, and addresses potential objections or concerns.
Include social proof, such as testimonials, case studies, or logos of well-known clients, to build trust and credibility.
Make your call-to-action (CTA) prominent and easy to find, using contrasting colors and action-oriented language.
Optimize your landing page for search engines by including relevant keywords in your headings, meta tags, and content.
Test and iterate on your landing page design and copy to continually improve its performance and conversion rates.

Conclusion

Creating a landing page using HTML, SCSS, and JavaScript requires a combination of coding skills, design principles, and marketing knowledge. By following the steps and best practices outlined in this guide, you‘ll be well-equipped to build a modern, responsive landing page that effectively promotes your product or service and converts visitors into customers.

Remember to keep learning and experimenting with new techniques and technologies to further enhance your landing pages and stay ahead of the curve in the ever-evolving world of web development.

How to Make a Landing Page using HTML, SCSS, and JavaScript

Introduction to Landing Pages

Setting Up the Project Environment

Structuring the HTML

Styling with SCSS

Implementing Responsive Design

Adding Interactivity with JavaScript

Optimizing Performance and Accessibility

Deploying the Landing Page

Best Practices and Tips

Conclusion

Related

How to Write Faster HTML and CSS Code Using Emmet

An Introduction to HTML for Beginners

Learn HTML and CSS with this Free 11-Hour Video Course

HTML Page Elements – Explained for Beginners

HTML Label – Label Tag Example: A Comprehensive Guide

Common Causes of Invalid HTML Syntax – and How to Fix Them

Introduction to Landing Pages

Setting Up the Project Environment

Structuring the HTML

Styling with SCSS

Implementing Responsive Design

Adding Interactivity with JavaScript

Optimizing Performance and Accessibility

Deploying the Landing Page

Best Practices and Tips

Conclusion

Related

Similar Posts