How to Create a Website from Scratch Using HTML, CSS, and JavaScript

Explanation:

The <header> section contains a title and a navigation bar.
The <section> elements divide the content into different parts like Home, About, and Contact.
The <footer> is where you can add copyright information or other details.
The <link> tag connects the CSS file for styling.
The <script> tag connects the JavaScript file.

3. Add Styles with CSS (styles.css)

Now, let’s add some basic styling to make the website look better.

css

/* Basic reset for the page */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

/* Header styling */
header {
    background: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

/* Section styling */
section {
    padding: 20px;
    margin: 10px 0;
}

#home {
    background-color: #e2e2e2;
}

#about {
    background-color: #d1d1d1;
}

#contact {
    background-color: #c0c0c0;
}

/* Footer styling */
footer {
    text-align: center;
    padding: 10px;
    background: #333;
    color: white;
}

Explanation:

The * selector is used to reset margin and padding to avoid default spacing issues across browsers.
The body has a background color, and the font is set to Arial.
The header has a background color, and the navigation links are styled to remove the default underlining and set the text color.
Each section has some padding, and the background colors make the sections distinct.
The footer has a simple background and text alignment.

4. Add Interactivity with JavaScript (script.js)

Now, let’s add some simple interactivity to your website. For example, we will create a small feature where clicking a button changes the background color of the home section.

javascript

// Get the button element
const changeColorButton = document.createElement('button');
changeColorButton.textContent = 'Change Background Color';

// Append the button to the home section
document.getElementById('home').appendChild(changeColorButton);

// Event listener to change the background color
changeColorButton.addEventListener('click', function() {
    const homeSection = document.getElementById('home');
    homeSection.style.backgroundColor = homeSection.style.backgroundColor === 'rgb(226, 226, 226)' ? '#ffcc00' : '#e2e2e2';
});

Explanation:

This JavaScript code creates a button inside the home section.
When the button is clicked, it changes the background color of the home section.
We toggle between two colors, using the button to switch between them.

5. Test Your Website

To view your website:

Open the index.html file in any web browser (Chrome, Firefox, etc.).
You’ll see your webpage with HTML content, styled with CSS, and interactive through JavaScript.

6. Optional Enhancements

You can add more advanced features as you get comfortable:

Responsive Design: Use media queries in CSS to make your website look good on mobile devices.
JavaScript Libraries: You can use libraries like jQuery or frameworks like React for more complex interactivity.
Web Hosting: Once your website is ready, you can host it online using platforms like GitHub Pages, Netlify, or any web hosting service.

Summary

By following the steps above, you’ve:

Created the structure of a webpage with HTML.
Styled the webpage using CSS.
Added interactivity with JavaScript.

With these three technologies, you can build websites of all kinds! As you get more experienced, you can learn advanced features like forms, animations, and external libraries to enhance your website even further.

How to Create a Website from Scratch Using HTML, CSS, and JavaScript

How to Create a Website from Scratch Using HTML, CSS, and JavaScript

How to Create a Website from Scratch

1. Setup Your Project Folder

2. Create the HTML Structure (index.html)

3. Add Styles with CSS (styles.css)

4. Add Interactivity with JavaScript (script.js)

5. Test Your Website

6. Optional Enhancements

Summary