## Introduction 
Welcome to Lesson 3.1: Building Static Websites. This lesson is part of Module 3: Advanced Application - Building Interactive Web Applications in the Frontend Development for Aspiring Developers course. In this lesson, we'll explore the essentials of creating static web pages, understanding the file structure, and using Git for version control. By the end of this lesson, you will be able to deploy a simple static website using Git, which will enhance your skills in web development and prepare you for more complex projects in the future. 
## Main Content 
### Creating Static Web Pages 
Static web pages are the backbone of the internet. They are simple HTML documents that display the same content to every visitor, making them ideal for informative sites, portfolios, or even landing pages for your products or services. To create a static web page, you'll primarily use HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and sometimes JavaScript for added functionality.
To get started, you can use a code editor like Visual Studio Code, Atom, or even a simple text editor like Notepad. Here’s a basic example of an HTML file:
```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>My Static Website</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <header>
 <h1>Welcome to My Static Website</h1>
 </header>
 <main>
 <p>This is a simple static website created using HTML and CSS.</p>
 </main>
 <footer>
 <p>&copy; 2023 My Static Website</p>
 </footer>
</body>
</html>
```
In this example, we define the structure of our web page using HTML tags. The `<head>` section includes metadata and links to CSS for styling, while the `<body>` contains the visible content. This is the foundation of creating static web pages.
### Understanding the File Structure 
When building a static website, understanding your file structure is crucial. A typical project might look like this:
```
my-static-website/
 index.html
 styles.css
 images/
 logo.png
```
- **index.html**: This is the main HTML file that users will access. It serves as the entry point to your website.
- **styles.css**: This file contains your CSS, which styles the HTML elements, controlling the layout, colors, fonts, and more.
- **images/**: This directory holds any images used on your site, keeping them organized and easily accessible.
Keeping a clean and well-structured file organization helps you manage your project effectively, especially as it grows. It also makes it easier for others to understand your work if you collaborate with a team.
### Using Git for Version Control 
Version control is an essential practice in web development that allows you to track changes to your codebase, collaborate with others, and revert to previous versions if necessary. Git is the most widely used version control system.
To start using Git, you need to install it on your computer. After installation, you can initialize a Git repository in your project folder:
```bash
git init
```
This command creates a hidden `.git` directory that tracks changes. To add your files to Git, use:
```bash
git add .
```
This command stages all your files for commit. Once you have staged your changes, you can commit them with a message:
```bash
git commit -m "Initial commit"
```
As you continue to make changes to your website, you can repeat the add and commit process to keep a record of your progress. You can also use Git to share your project with others by pushing it to a platform like GitHub. 
## Conclusion 
In summary, this lesson covered the fundamentals of building static websites, including creating web pages with HTML and CSS, understanding the importance of a well-structured file organization, and using Git for version control. By deploying a static website using these concepts, you have taken a significant step toward enhancing your web development skills. As you progress, you'll find these foundational skills invaluable for creating more interactive and dynamic web applications.
## Reflection Questions 
1. How can you apply the principles of static web page creation in your own projects? 
2. What strategies will you use to maintain an organized file structure for larger web development projects? 
3. In what ways do you foresee version control improving your workflow when collaborating with others? 
This lesson is designed to fit within a 20-minute learning framework, ensuring you can absorb the content quickly while also providing practical skills to enhance your career in technology.