musayann/modular-html-page

Modular HTML Page Example

This repository contains an example of how to divide an HTML page into multiple components without using any frameworks. The exercise demonstrates the use of plain HTML, CSS, and JavaScript to create a modular webpage with a header, content, and footer.

Prerequisites

• A modern web browser (e.g., Chrome, Firefox, Safari).
• Visual Studio Code (recommended).
• Live Server extension for Visual Studio Code.

Getting Started

1. Clone the Repository:

   git clone https://github.com/musayann/modular-html-page.git
   cd modular-html-page

2. Open the Project in Visual Studio Code: Open the folder in Visual Studio Code by selecting File > Open Folder or using the shortcut Ctrl + K Ctrl + O.
3. Install the Live Server Extension: You can find the Live Server extension here or by searching for "Live Server" in the Extensions view in Visual Studio Code. Click the "Install" button to install it.
4. Start the Live Server: Right-click on the index.html file and choose "Open with Live Server" or click on the "Go Live" button in the status bar at the bottom of the window.
5. View the Page: The page will be automatically opened in your default web browser, and any changes you make to the files will be reflected immediately in the browser, thanks to the Live Server extension.

Structure

• header.html: Contains the HTML for the header component.
• content.html: Contains the HTML for the main content component.
• footer.html: Contains the HTML for the footer component.
• index.html: Main HTML file that brings together all the components.

Contributing

Feel free to fork the project and submit pull requests for improvements or additional features.