## Introduction 
Welcome to Lesson 1.3: Understanding Web Technologies: HTML, CSS, JavaScript. This lesson is part of Module 1: Foundation - Understanding Core Full Stack Concepts in the Full Stack Development for Senior Software Developers course. In this lesson, we'll explore the basic functions of HTML, CSS, and JavaScript, how these technologies work together, and an introduction to building simple web pages. By the end of this lesson, you will be able to recognize the roles of HTML, CSS, and JavaScript in web development and understand how they interact to create effective web pages.
## Main Content 
### Basic Functions of HTML, CSS, and JavaScript 
HTML, or HyperText Markup Language, is the backbone of web content. It structures the content on the web page, allowing you to create headings, paragraphs, lists, links, and other elements. Think of HTML as the skeleton of a webpage. For example, when you visit a financial news website, the articles you read, the images you see, and the links to other articles are all structured using HTML.
CSS, or Cascading Style Sheets, is what makes web pages visually appealing. It styles the HTML elements by controlling layouts, colors, fonts, and overall presentation. Using CSS, you can ensure that a finance application’s dashboard is not only functional but also user-friendly and aesthetically pleasing. For instance, if you want to change the background color of a section on your investment platform, you will use CSS to do so.
JavaScript is the programming language that adds interactivity to web pages. It allows you to create dynamic content that responds to user actions without needing to reload the page. For example, when users interact with a financial calculator on your fintech platform, JavaScript is used to process the input and provide immediate feedback, such as calculating potential investment returns based on user inputs.
### How These Technologies Work Together 
Now that we understand the individual roles of HTML, CSS, and JavaScript, let’s explore how they work together to create a cohesive web page. When a user accesses a webpage, the browser first reads the HTML to understand the structure of the content. It then applies the CSS styles to those elements to make them visually appealing. Finally, JavaScript enhances the functionality by adding interactive features.
For example, consider a webpage for a loan application. The HTML lays out the form fields for users to fill in their information. CSS styles those fields to ensure they are easy to read and visually consistent. Once the user inputs their data and clicks the “Submit” button, JavaScript processes that data, checks for errors, and provides immediate feedback without needing to refresh the page. This seamless integration of HTML, CSS, and JavaScript is what creates a smooth user experience.
### Introduction to Building Simple Web Pages 
Building a simple web page involves combining HTML, CSS, and JavaScript effectively. To illustrate, let’s consider creating a basic webpage for a financial product landing page. 
1. **HTML Structure**: Start by setting up the HTML skeleton. Here’s a simple example:
 ```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Financial Product</title>
 <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 <header>
 <h1>Welcome to Our Financial Services</h1>
 <nav>
 <ul>
 <li><a href="#about">About</a></li>
 <li><a href="#services">Services</a></li>
 <li><a href="#contact">Contact</a></li>
 </ul>
 </nav>
 </header>
 <section id="about">
 <h2>About Us</h2>
 <p>Your trusted partner in financial growth.</p>
 </section>
 <footer>
 <p>Contact us at info@finance.com</p>
 </footer>
 <script src="script.js"></script>
 </body>
 </html>
 ```
2. **Styling with CSS**: Next, you would apply styles in a separate CSS file called `styles.css`:
 ```css
 body {
 font-family: Arial, sans-serif;
 background-color: #f4f4f4;
 }
 header {
 background: #35424a;
 color: white;
 padding: 10px 0;
 text-align: center;
 }
 nav ul {
 list-style: none;
 padding: 0;
 }
 nav ul li {
 display: inline;
 margin: 0 10px;
 }
 section {
 padding: 20px;
 margin: 20px;
 background: white;
 }
 ```
3. **Adding Interactivity with JavaScript**: Finally, include a simple JavaScript function in `script.js` to add functionality. For example, you might want to display an alert when a user clicks a button:
 ```javascript
 document.addEventListener('DOMContentLoaded', function() {
 const button = document.createElement('button');
 button.textContent = 'Learn More';
 document.body.appendChild(button);
 button.addEventListener('click', function() {
 alert('Thank you for your interest!');
 });
 });
 ```
This simple example illustrates how HTML lays the groundwork, CSS enhances the design, and JavaScript brings interaction to your web page.
## Conclusion 
In this lesson, we covered the basic functions of HTML, CSS, and JavaScript. You learned how these technologies work together to create engaging and functional web pages and even got a glimpse into building a simple web page relevant to the finance sector. By understanding these foundational concepts, you are now better equipped to appreciate the role of web technologies in full-stack development.
## Reflection Questions 
1. How does HTML contribute to the overall structure of a web page? 
2. In what ways can CSS improve user experience on a financial platform? 
3. How does JavaScript enhance interactivity and responsiveness on web pages?