Home > Web Front-end > CSS Tutorial > How to Build a Responsive Landing Page with HTML, CSS, and JS

How to Build a Responsive Landing Page with HTML, CSS, and JS

Barbara Streisand
Release: 2024-12-03 20:32:13
Original
1071 people have browsed it

How to Build a Responsive Landing Page with HTML, CSS, and JS

1. Setting Up the Project
Start by creating your project folder with the following structure:

landing-page/
  ├── index.html
  ├── styles.css
  ├── script.js
Copy after login

HTML: The Structure

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



<p><strong>2. Styling with CSS</strong><br>
</p>

<pre class="brush:php;toolbar:false">/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Navbar */
.navbar {
  background: #4A00E0;
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
}

/* Hero Section */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px;
  background: linear-gradient(135deg, #8E2DE2, #4A00E0);
  color: #fff;
}

.hero-content h2 {
  font-size: 2.5rem;
}

.hero img {
  width: 40%;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }

  .hero img {
    width: 80%;
  }
}

Copy after login

3. Enhancing with JavaScript

// script.js
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener("click", function(e) {
    e.preventDefault();
    document.querySelector(this.getAttribute("href")).scrollIntoView({
      behavior: "smooth"
    });
  });
});

**4. Responsive and Engaging Design**
To make your landing page responsive:

Use flexbox and media queries for layouts.
Optimize images for different screen sizes.
Test responsiveness using browser developer tools.
5. Optional: Adding Animations
For modern aesthetics, use CSS animations.

Copy after login
Optional: Adding Animations
Copy after login

/* Button Hover */
button {
background: #fff;
color: #4A00E0;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

button:hover {
background: #4A00E0;
color: #fff;
}

Final Thoughts
Building a responsive landing page requires balancing design, performance, and user experience. By using HTML, CSS, and JavaScript effectively, you can create a page that is visually appealing and functional.

What are your thoughts? Share your customizations and tips in the comments below! ?

The above is the detailed content of How to Build a Responsive Landing Page with HTML, CSS, and JS. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template