Open In App

Create a Single Page Application using HTML CSS & JavaScript

Last Updated : 15 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to design and build a cool and user-friendly single-page application (SPA) using just HTML, CSS, and JavaScript. A single-page application contains multiple pages which can be navigated or visited without loading the page every time. This makes things faster and more interesting.

Preview Image:

SPA

Final Output

Approach:

  • Firstly, we will create a folder with the project name and create the HTML(e.g index.html) , CSS (e.g style.css) , JavaScript files, Images folder and a separate file for the responsive CSS if required.
  • Now, use the different HTML tags like section, header, meta, title, head,div, img etc to structure the web page. and includes a header, navigation bar, main content area, and a script tag for our JavaScript file.
  • Add some Style using CSS to the HTML code to make our frontend look good. We’ll choose colors and layouts that look modern and inviting. Add style mainly to the image and beautify the header. and we will be using a gradient color to give a greenish look to the header.
  • Add the JavaScript to change content dynamically. let’s add some JavaScript magic. The changeContent function will be our main things, updating the content based on what the user clicks.
  • You can create a navigation system that dynamically loads content based on user interactions.

Example: The below code example explains how you can use the HTML, CSS and JavaScript to create a Single Page Application.

Javascript




function changeContent(page) {
    var contentDiv = document.getElementById('content');
 
    switch (page) {
        case 'home':
            contentDiv.innerHTML = `
                <img src=
                <h2>
                    Welcome to the Home Page!
                </h2>
                <p>
                    This is the main page of our SPA.
                </p>
                <p>
                    Explore the different sections using
                    the navigation menu.
                </p>
            `;
            break;
        case 'about':
            contentDiv.innerHTML = `
                <h2>About Us</h2>
                <p>
                    This is the about page content. Learn more
                    about our purpose and team.
                </p>
                <p>
                    We're passionate about creating engaging and
                    informative SPAs.
                </p>
            `;
            break;
        case 'contact':
            contentDiv.innerHTML =
                `<h2>Contact Us</h2>
                <p>
                    Feel free to reach out to us!
                </p>
                <form>
                   <label for="name">Name:</label>
                   <input type="text" id="name" name="name"
                          placeholder="Your Name" required>
                   <label for="email">Email:</label>
                   <input type="email" id="email" name="email"
                          placeholder="Your Email" required>
                   <label for="message">Message:</label>
                   <textarea id="message" name="message"
                             placeholder="Your Message"
                             rows="4" required>
                    </textarea>
                   <button type="submit">Send Message</button>
                </form>`;
            break;
 
        default:
            contentDiv.innerHTML = '<h2>Page not found!</h2>';
    }
}


HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>SPA app</title>
</head>
 
<body>
    <div id="app">
        <header>
            <h1>
                GeeksforGeeks
            </h1>
            <h1>
                Single Page Application Using
                HTML, CSS & JavaScript
            </h1>
        </header>
        <nav>
            <ul>
                <li>
                    <a href="#" onclick=
                    "changeContent('home')">
                        Home
                    </a>
                </li>
                <li>
                    <a href="#" onclick=
                    "changeContent('about')">
                        About
                    </a>
                </li>
                <li>
                    <a href="#" onclick=
                    "changeContent('contact')">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>
        <main>
            <div id="content">
 
                <img src=
                <h2>Welcome to Geeks for Geeks</h2>
                <p>
                    Geeks for Geeks is a portal for computer
                    science enthusiasts, providing a wide range of
                    tutorials, articles, and resources.
                </p>
                <p>
                    Visit the GeeksforGeeks portal
                    <a href="https://www.geeksforgeeks.org/" target="_blank">
                        here
                    </a>.
                </p>
            </div>
        </main>
    </div>
    <script src="script.js"></script>
</body>
 
</html>


CSS




/* style.css */
 
body {
    font-family:
'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}
 
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
 
header {
    background-color: #2f8d46;
    color: white;
    text-align: center;
    padding: 1em;
}
 
nav {
    background-color: #4caf50;
}
 
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
 
nav li {
    margin: 0;
}
 
nav a {
    text-decoration: none;
    color: #fff;
    padding: 1em;
    display: block;
    transition: background-color 0.3s ease;
}
 
nav a:hover {
    background-color: #45a049;
}
 
main {
    flex: 1;
    padding: 1em;
}
 
#content {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow:
0 0 10px rgba(0, 0, 0, 0.1);
}
 
#content h2 {
    color: #2f8d46;
}
 
#content img {
    width: 400px;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
    box-shadow:
2px 2px 5px rgba(0, 0, 0, 0.2);
    border: 3px solid #2F8D46;
}
 
form {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow:
0 0 10px rgba(0, 0, 0, 0.1);
}
 
form label {
    display: block;
    margin-bottom: 8px;
}
 
form input,
form textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}
 
form button {
    background-color: #4caf50;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition:
background-color 0.3s ease;
}
 
form button:hover {
    background-color: #45a049;
}


Output:

spaoutput

Final Output



Similar Reads

What is SPA (Single page application) in AngularJS ?
Traditionally, applications were Multi-Page Applications (MPA) where with every click a new page would be loaded from the server. This was not only time-consuming but also increased the server load and made the website slower. AngularJS is a JavaScript-based front-end web framework based on bidirectional UI data binding and is used to design Single
5 min read
What is Single Page Application?
A Single Page Application (SPA) is a type of web application that loads and updates content dynamically without refreshing the entire page. Unlike traditional websites, SPAs use modern technologies to enhance the user experience by minimizing interruptions and providing a smoother interface. Users can interact with the application seamlessly, simil
5 min read
Top 10 Single Page Application Frameworks in 2024
Single Page Applications, also known as SPAs are very popular and widely used nowadays because of their seamless user experience and ability to provide dynamic content without loading entire pages. When it comes to choosing the right framework for requirements, developers have various options of frameworks that provide a way to develop SPAs. In thi
11 min read
How to Create Sticky Header/Footer on a Web Page using HTML CSS and JavaScript ?
When designing a website, it's essential to consider the sticky header and footer. These elements enhance the user experience by keeping important navigation links accessible as users scroll. This article explores creating sticky headers and footers with CSS. We can do this by using the following CSS propertiesPosition: sticky; is a CSS property th
7 min read
Create an Infinite Scroll Page using HTML CSS & JavaScript
In this article, we will create an infinite scroll page using HTML, CSS, and JavaScript. Infinite scrolling allows you to load and display content as the user scrolls down the page, providing a seamless browsing experience. We'll fetch and append new content dynamically as the user reaches the end of the current content. Preview Image:[caption widt
2 min read
Create a Bookmark Landing Page using HTML CSS and JavaScript
In this article, we are going to implement a Bookmark Landing Page using HTML, CSS, and JavaScript. Users can effortlessly add, manage, and remove bookmarks, resulting in a tidy digital library for their favorite websites. Bookmarking the Landing Page refers to a web page or website where the users bookmark the website, in order to save it in their
5 min read
How to create Twitter Login Page using HTML CSS JavaScript ?
In this article, we will see How To Make a Twitter Login Page Like Using HTML CSS JavaScript. The code produces an attractive login page with a design similar to the Twitter login interface. The JavaScript incorporates straightforward validation for the email input field upon submitting the form. Preview[caption width="800"]Preview[/caption]Approac
4 min read
How to create a Landing page using HTML CSS and JavaScript ?
A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing visitor information through a form, while reassurin
7 min read
Create a Single Page Responsive Website Using Bootstrap
Everyone wants to create the website which is compatible with all the devices like computer, laptops, tablets, and mobiles. So for making a website responsive the best way is to make a website using Bootstrap. Since it is a single-page website when you click on any menu on the website it will reach you towards a specific section. Code Implementatio
6 min read
Create a Splash Page App in HTML CSS & JavaScript
The Splash Screen is the UI element that appears as the initial screen or the loading screen. Splash Page Application consists of a styled animative splash screen effect which automatically makes the curtain opening splash effect into the application for a specific time and renders the dynamic content once the effect is been completed. We will deve
4 min read