## Introduction 
Welcome to Lesson 2.1: Basics of HTML, CSS, and JavaScript. This lesson is part of Module 2: Core Skills - Building Functional Interfaces in the Frontend Development for Developers course. In this lesson, we'll explore the foundational elements of web development, including the structure of HTML, how to style web pages with CSS, and the basics of JavaScript functionality. By the end of this lesson, you will be able to construct a simple web page using these three essential technologies.
## Main Content 
### Introduction to HTML Structure 
HTML, or HyperText Markup Language, is the backbone of any web page. It is responsible for structuring content, allowing you to define elements such as headings, paragraphs, links, images, and more. An HTML document is composed of various tags, which are enclosed in angle brackets (<>). The most basic structure of an HTML document includes the `<!DOCTYPE html>` declaration, followed by the `<html>` element, which wraps the entire content of the page.
Here’s an example of a simple HTML document:
```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 created with HTML.</p>
 <a href="https://www.test_company.com">Visit our site!</a>
</body>
</html>
```
In this example, we define a title for the page, create a header using `<h1>`, a paragraph using `<p>`, and a link using `<a>`. Understanding this structure is crucial as it will serve as the foundation for adding styles and functionality later.
### Styling with CSS 
Cascading Style Sheets (CSS) is used to control the presentation and layout of HTML elements. By applying CSS, you can enhance the visual appeal of your web pages, making them more engaging and user-friendly. CSS can be applied directly within HTML using the `style` attribute, internally within a `<style>` tag, or externally by linking a separate CSS file.
Here’s an example of how to style the HTML document we created earlier:
```html
<!DOCTYPE html>
<html>
<head>
 <title>My First Web Page</title>
 <style>
 body {
 background-color: #f0f0f0;
 font-family: Arial, sans-serif;
 }
 h1 {
 color: #333;
 }
 p {
 color: #555;
 font-size: 16px;
 }
 a {
 color: #0066cc;
 text-decoration: none;
 }
 </style>
</head>
<body>
 <h1>Welcome to Test_Company</h1>
 <p>This is a simple web page created with HTML.</p>
 <a href="https://www.test_company.com">Visit our site!</a>
</body>
</html>
```
In this example, we added a background color, specified the font, and adjusted the text colors and sizes. Applying CSS effectively improves readability and makes your site visually appealing. 
### Basics of JavaScript Functionality 
JavaScript is a programming language that brings interactivity to web pages. It allows you to implement complex features such as dynamic content updates, form validation, and animations. To incorporate JavaScript into your HTML document, you can use the `<script>` tag, which can be placed within the `<head>` or just before the closing `</body>` tag.
Here’s a basic example of how JavaScript can enhance our web page:
```html
<!DOCTYPE html>
<html>
<head>
 <title>My First Web Page</title>
 <style>
 body {
 background-color: #f0f0f0;
 font-family: Arial, sans-serif;
 }
 h1 {
 color: #333;
 }
 p {
 color: #555;
 font-size: 16px;
 }
 a {
 color: #0066cc;
 text-decoration: none;
 }
 </style>
 <script>
 function displayMessage() {
 alert("Welcome to Test_Company!");
 }
 </script>
</head>
<body>
 <h1>Welcome to Test_Company</h1>
 <p>This is a simple web page created with HTML.</p>
 <a href="https://www.test_company.com" onclick="displayMessage()">Visit our site!</a>
</body>
</html>
```
In this example, we created a simple JavaScript function called `displayMessage` that triggers an alert when the link is clicked. This interactivity can significantly enhance user engagement, making the web experience more interactive and enjoyable.
## Conclusion 
In this lesson, we covered the basics of HTML, CSS, and JavaScript, which are the essential building blocks for any web page. You learned how to structure content with HTML, style it effectively using CSS, and add interactivity with JavaScript. Mastering these concepts will empower you to create functional interfaces that enhance user experience. With these skills, you're now one step closer to advancing your career in frontend development.
## Reflection Questions 
1. How would you modify the HTML structure to include an image on your web page? 
2. In what ways can you utilize CSS to improve the layout of your web page for better user engagement? 
3. What JavaScript functionality could you implement to enhance user interaction on a finance-related site?