## Introduction 
Welcome to Lesson 2.1: Basics of Web Development (HTML, CSS, JavaScript). This lesson is part of Module 2: Core Skills - Web Development Fundamentals in the Full Stack Development for Developers at Test_Company course. In this lesson, we'll explore the foundational elements of web development, focusing on HTML structure, basic CSS styling techniques, and JavaScript fundamentals. By the end of this lesson, you will be able to create a simple webpage that utilizes these technologies, enhancing your ability to present information effectively in a digital format.
## Main Content
### Introduction to HTML Structure
HTML, or HyperText Markup Language, is the backbone of any webpage. It provides the structure and layout of web content. Each HTML document is made up of elements that define the different parts of the page, such as headings, paragraphs, links, images, and more.
An HTML document begins with a declaration followed by the `<html>` tag, which contains the entire content. Within this, the `<head>` element contains meta-information about the document, while the `<body>` contains the actual content that will be displayed on the webpage.
Here’s a basic example of HTML structure:
```html
<!DOCTYPE html>
<html>
<head>
 <title>My First Webpage</title>
</head>
<body>
 <h1>Welcome to My Webpage</h1>
 <p>This is a simple webpage created using HTML.</p>
</body>
</html>
```
In this snippet, we see a title for the page and a heading. The `<h1>` tag indicates the most important heading, while the `<p>` tag denotes a paragraph. Such structure allows browsers to render the content correctly, making it readable and accessible to users.
Understanding how to nest elements is also crucial. For example, you can include lists, links, and images within your HTML structure to make your content more informative and engaging. Here's how you could add a list and an image:
```html
<ul>
 <li>HTML provides structure</li>
 <li>CSS adds style</li>
 <li>JavaScript enables interactivity</li>
</ul>
<img src="example.jpg" alt="Example Image">
```
### Basic CSS Styling Techniques
CSS, or Cascading Style Sheets, is used to style the HTML elements on your webpage. It allows you to apply various visual styles, such as colors, fonts, layouts, and spacing, bringing your webpage to life. 
To use CSS, you can either include it directly in the HTML file using `<style>` tags or link an external stylesheet using the `<link>` tag in the `<head>` section. Here’s an example of inline CSS:
```html
<!DOCTYPE html>
<html>
<head>
 <title>Styled Webpage</title>
 <style>
 body {
 background-color: lightblue;
 }
 h1 {
 color: darkblue;
 text-align: center;
 }
 p {
 font-family: Arial, sans-serif;
 font-size: 18px;
 }
 </style>
</head>
<body>
 <h1>Welcome to My Styled Webpage</h1>
 <p>This webpage has some basic styling applied.</p>
</body>
</html>
```
In this example, we’ve set the background color of the page to light blue and styled the heading and paragraph to enhance their appearance. CSS gives you the flexibility to create visually appealing and engaging webpages that can effectively convey information.
Another important concept in CSS is the use of classes and IDs to target specific elements. For example, you can create a class that can be reused across multiple elements:
```html
<style>
 .highlight {
 background-color: yellow;
 font-weight: bold;
 }
</style>
<p class="highlight">This paragraph is highlighted.</p>
<p>This paragraph is not highlighted.</p>
```
### JavaScript Fundamentals
JavaScript is a programming language that enables you to add interactivity to your webpages. It allows you to manipulate HTML and CSS dynamically, responding to user actions like clicks, form submissions, and more. 
For instance, you can include JavaScript directly in your HTML file using the `<script>` tag. Here’s a simple example that changes the text of a paragraph when a button is clicked:
```html
<!DOCTYPE html>
<html>
<head>
 <title>Interactive Webpage</title>
</head>
<body>
 <h1>Welcome to My Interactive Webpage</h1>
 <p id="text">This text will change when you click the button.</p>
 <button onclick="changeText()">Click Me!</button>
 <script>
 function changeText() {
 document.getElementById("text").innerHTML = "You clicked the button!";
 }
 </script>
</body>
</html>
```
In this code, when the button is clicked, the `changeText` function is called, which updates the text within the paragraph. This demonstrates how JavaScript can enhance user experience by making your webpage interactive and engaging.
Additionally, JavaScript can be used to validate forms, create animations, and even fetch data from external APIs to display dynamic content on your webpage. Here’s a simple example of form validation:
```html
<form onsubmit="return validateForm()">
 <input type="text" id="name" placeholder="Enter your name" required>
 <input type="submit" value="Submit">
</form>
<script>
 function validateForm() {
 const name = document.getElementById("name").value;
 if (name === "") {
 alert("Name must be filled out");
 return false;
 }
 return true;
 }
</script>
```
## Conclusion
In this lesson, we covered the basics of web development, focusing on HTML structure, CSS styling techniques, and JavaScript fundamentals. You learned how to create a simple webpage that includes text, styles, and interactivity. These foundational skills are essential as you continue your journey in web development.
By mastering these concepts, you will be better equipped to create digital content that effectively communicates your ideas and engages your audience. In the next lesson, we will delve deeper into advanced CSS techniques, enhancing your ability to design attractive layouts.
## Reflection Questions
1. How can you use HTML to structure content for a financial report or presentation?
2. What CSS techniques would you apply to make a webpage more visually appealing for a fintech product launch?
3. How might JavaScript enhance user interaction on a finance-related webpage, such as a budgeting tool?