Create a Single Page Application using HTML CSS & JavaScript Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like 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:Final OutputApproach: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. 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= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-12.png"> <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; } JavaScript function changeContent(page) { var contentDiv = document.getElementById('content'); switch (page) { case 'home': contentDiv.innerHTML = ` <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-12.png"> <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>'; } } Output: Comment More infoAdvertise with us Next Article Create a Single Page Application using HTML CSS & JavaScript sahilali Follow Improve Article Tags : JavaScript Web Technologies Geeks Premier League JavaScript-Projects Geeks Premier League 2023 +1 More Similar Reads Create a Quiz Application Using JavaScript In this article, we will learn how to create a quiz application using JavaScript. The quiz application will contain questions followed by a total score shown at the end of the quiz. The score will increase based on the correct answers given. Initially, there are only three questions, but you can inc 4 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 conte 4 min read Create an Online Art Auction using HTML, CSS and JavaScript In this article, we'll guide you through the process of creating an online art auction website using HTML, CSS, and JavaScript. Art auctions are exciting events where collectors and enthusiasts bid on prized artworks. It will provide a foundation for displaying art listings and creating an appealing 3 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 o 2 min read Create ChatGPT Template using HTML CSS & JavaScript Create a customizable ChatGPT interface using HTML, CSS, and JavaScript. Implement features like message input, display area, and toggle buttons for themes. Customize styles and interactions to suit your preferences and requirements. Prerequisites:HTMLCSSJavaScriptApproachCreate a new HTML file and 7 min read Create a Coin Flip using HTML, CSS & JavaScript We will display the styled INR coin to the user and there will be a styled button (Toss Coin). We will create the entire application structure using HTML and style the application with CSS classes and properties. Here, JavaScript will be used to manage the behavior of the Coin Flip and will be used 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 v 7 min read Create a Testimonial box switcher using HTML CSS & JavaScript In this article, we will develop an interactive Testimonial box switcher application using HTML CSS & JavaScript Language.In this application, we have a Card component that has the message given by the testimonial, also there is information about the person and his/her designation. The card comp 4 min read How to create a revealing sidebar using HTML CSS and JavaScript? A revealing sidebar is a hidden UI element that becomes visible upon user interaction, such as clicking or swiping, providing navigation links. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked. ApproachCreate an HTML file with headings and 3 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 4 min read Like