Responsive Design | Fervor Coding

Creating a Basic Vanilla Website: A Step-by-Step Guide

Introduction

In this tutorial, we will learn how to create a blank vanilla website, a simple, foundational website devoid of frameworks or libraries. Understanding how to make a basic website is essential for anyone venturing into web development, as it forms the base for more complex web applications.

Overview

Creating a vanilla website typically involves using three core technologies: HTML, CSS, and JavaScript. HTML provides the structure of the page, CSS styles the structure, and JavaScript adds interactivity. Mastering these technologies is crucial for creating robust and dynamic websites.

Code Explanation

1. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vanilla Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Vanilla Website</h1>
    <script src="script.js"></script>
</body>
</html>

This is a basic HTML template. The <!DOCTYPE html> declaration defines the document type and HTML version. The <head> section contains meta information and links to external CSS files, while the <body> section contains the content of the web page.

2. CSS

In a file named styles.css:

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    color: #333;
    text-align: center;
}

This CSS file adds basic styling to the HTML content. It sets a font family for the body and removes any default margin and padding. The h1 selector changes the text color and aligns the heading to the center.

3. JavaScript

In a file named script.js:

document.addEventListener('DOMContentLoaded', function() {
    console.log('Your document is ready!');
});

This JavaScript file logs a message to the console once the HTML document is fully loaded, ensuring that any DOM manipulations occur after the document is ready.

Syntax Breakdown

HTML Syntax

<!DOCTYPE html>: Specifies the HTML version used (HTML5).
<head>: Contains meta-information and links to external resources.
<body>: Holds the content of the web page, like text, images, and other media.

CSS Syntax

body, h1: Selectors that target HTML elements.
{ ... }: Declaration block containing properties and their values to style the selected element.

JavaScript Syntax

document.addEventListener(): Attaches an event handler to the document.
'DOMContentLoaded': A type of event that occurs when the initial HTML document is loaded and parsed.

Examples

Basic Example

A simple example is creating an HTML page with a heading, a paragraph, and styling them with CSS, and adding a console log with JavaScript to notify when the document is ready, as demonstrated above.

Advanced Example

For more advanced users, integrating interactive elements using JavaScript, like buttons that, when clicked, change the style of a paragraph, could be the next step in experimenting with vanilla web development.

Best Practices

Semantic HTML: Use HTML5 semantic elements such as <header>, <footer>, <article>, and <section> for better readability and SEO.
Responsive Design: Use responsive design principles and CSS media queries to ensure your website works well on all devices.
Externalize CSS and JavaScript: Always keep CSS and JavaScript in separate files to maintain clean and organized code.

Additional Resources

Conclusion

Creating a blank vanilla website is a fundamental skill in web development. Through mastering HTML for structuring, CSS for styling, and JavaScript for adding interactivity, one can lay down a solid foundation for more advanced web development practices and frameworks. Keep experimenting with different elements and styles and consult the provided resources to deepen your understanding of web development principles.