## Introduction 
Welcome to Lesson 2.1: Basics of HTML, CSS, and JavaScript. This lesson is part of Module 2: Core Skills - Building Functional Applications in the Frontend Development for Developers course. In this lesson, we'll explore the structure of HTML documents, styling with CSS, and an introduction to JavaScript functionality. By the end of this lesson, you will be able to create simple web pages using HTML, apply styles with CSS, and incorporate basic JavaScript to enhance interactivity.
## Main Content 
### Structure of HTML Documents 
HTML, or HyperText Markup Language, is the backbone of any web page. It is used to structure content, allowing browsers to render text, images, and other elements in a visually coherent way. An HTML document consists of various elements defined by tags. 
A basic HTML document starts with a `<!DOCTYPE html>` declaration, followed by the `<html>` tag, which encapsulates all content. Inside, you will find two main sections: the `<head>` and the `<body>`. The `<head>` contains metadata, such as the page title defined by the `<title>` tag, and links to stylesheets. The `<body>` section holds the actual content displayed on the page, including text, images, and links.
Here’s a simple example:
```html
<!DOCTYPE html>
<html>
<head>
 <title>My First Web Page</title>
</head>
<body>
 <h1>Welcome to Test_Company</h1>
 <p>This is a simple web page demonstrating HTML structure.</p>
</body>
</html>
```
In this example, we see the essential components that make up an HTML document. The `<h1>` tag is used for the main heading, while the `<p>` tag creates a paragraph of text. Understanding these elements is crucial for structuring any web page effectively.
### Styling with CSS 
Once you have structured your web page with HTML, the next step is to make it visually appealing using CSS, or Cascading Style Sheets. CSS allows you to control the layout, colors, fonts, and overall design of your web page.
CSS can be applied in three ways: inline styles, internal styles, and external styles. Inline styles are applied directly within the HTML element using the `style` attribute. Internal styles are defined within a `<style>` tag in the head section, while external styles are written in a separate `.css` file linked to the HTML document.
Here’s how you can incorporate internal CSS:
```html
<!DOCTYPE html>
<html>
<head>
 <title>Styled Web Page</title>
 <style>
 body {
 background-color: #f0f0f0;
 font-family: Arial, sans-serif;
 }
 h1 {
 color: #333;
 }
 p {
 color: #666;
 }
 </style>
</head>
<body>
 <h1>Welcome to Test_Company</h1>
 <p>This is a simple web page demonstrating HTML structure and CSS styling.</p>
</body>
</html>
```
In this example, we set a light gray background for the body, changed the font to Arial, and adjusted the colors of the heading and paragraph text. This demonstrates the power of CSS – it transforms a plain HTML document into a visually engaging web page. You can experiment with different properties to see how they affect the overall design.
### Introduction to JavaScript Functionality 
To add interactivity to your web pages, you can use JavaScript. This programming language allows you to create dynamic content, control multimedia, animate images, and much more. JavaScript is executed in the browser, making it an essential tool for frontend development.
A simple JavaScript function can be added to an HTML document using the `<script>` tag. For example, you can create a button that, when clicked, displays an alert message:
```html
<!DOCTYPE html>
<html>
<head>
 <title>Interactive Web Page</title>
 <script>
 function showMessage() {
 alert("Welcome to Test_Company! Enjoy your visit.");
 }
 </script>
</head>
<body>
 <h1>Welcome to Test_Company</h1>
 <button onclick="showMessage()">Click Me!</button>
</body>
</html>
```
In this code snippet, we've defined a JavaScript function called `showMessage()`, which triggers an alert when the button is clicked. This interactivity enhances user engagement and creates a more lively experience. By incorporating JavaScript into your web pages, you can respond to user actions in real time, making your applications more dynamic.
## Conclusion 
In this lesson, we've covered the basics of HTML, CSS, and JavaScript, essential languages for creating functional web applications. You learned how to structure HTML documents, apply styles with CSS, and introduce interactivity with JavaScript. These core skills are foundational for anyone looking to advance in frontend development.
As you move forward, remember that practice is key. Experiment with your own web pages and see how you can combine these elements to create unique and engaging experiences.
## Reflection Questions 
1. How would you modify the HTML structure to include an image or a link? 
2. What CSS properties would you use to change the layout of a webpage and why? 
3. Can you think of a scenario where JavaScript could enhance user interaction on a financial application?