freeCodeCamp.org Watch on YouTube

Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners

3 min read 2 hours ago

Published on Oct 07, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you'll learn how to build a simple website using HTML, CSS, and JavaScript by creating a social media dashboard with a dark/light theme. This guide is designed for beginners and follows a structured approach, allowing you to improve your front-end development skills while completing a practical project.

Step 1: Understand Functional Requirements

Familiarize yourself with the design requirements.
Identify the key functionalities needed for your dashboard, such as:
- Theme switching (dark/light mode)
- Responsive design for various screen sizes
- Accessibility features for form controls

Step 2: Set Up Your Development Environment

Create a GitHub repository for version control.
Set up your project structure:
- Create folders for your HTML, CSS (or SCSS), and JavaScript files.
Install any necessary tools or frameworks, such as Gulp for task automation.

Step 3: Create Basic HTML Structure

Start with a simple HTML template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Media Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Dashboard</h1>
        <button id="theme-toggle">Toggle Theme</button>
    </header>
    <main>
        <!-- Content goes here -->
    </main>
    <script src="script.js"></script>
</body>
</html>

Step 4: Style with CSS

Create a CSS file to style your dashboard:
- Use custom properties for color themes.
- Implement media queries for responsiveness.

Example CSS for light and dark themes:

:root {
    --bg-color: white;
    --text-color: black;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

body.dark-mode {
    --bg-color: black;
    --text-color: white;
}

Step 5: Implement JavaScript for Interactivity

Add JavaScript to handle theme switching and local storage:

const toggleButton = document.getElementById('theme-toggle');

toggleButton.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    localStorage.setItem('theme', document.body.className);
});

window.onload = () => {
    const theme = localStorage.getItem('theme');
    if (theme) {
        document.body.className = theme;
    }
};

Step 6: Ensure Accessibility

Utilize semantic HTML elements for better accessibility.
Include screen reader-friendly text where necessary.
Test your website with accessibility tools to ensure compliance.

Step 7: Test and Deploy

Test your website in various browsers to ensure compatibility.
Use tools like Chrome Developer Tools to check responsiveness.
Once satisfied, deploy your website using GitHub Pages or another hosting service.

Conclusion

You've successfully built a simple social media dashboard using HTML, CSS, and JavaScript, complete with a dark/light theme functionality. This project enhances your understanding of front-end development and prepares you for more complex challenges. Explore additional features or refine your design as your skills grow!

Table of Contents

Recent