From HTML to Apps: A Beginner’s Guide to JavaScript, TypeScript, and React

A Beginner's Guide to JavaScript, TypeScript, and React

A comprehensive frontend development roadmap designed explicitly for absolute beginners, career changers, and students looking to master modern web engineering.

1. Introduction

Welcome to the world of modern software engineering! If you have ever looked at a modern website—with smooth animations, live updates, messaging dashboards, and interactive maps—and wondered how it all works behind the scenes, you are in the exact right place. This guide focuses on three cornerstone technologies that power the modern web: JavaScript, TypeScript, and React.

Today, JavaScript is arguably the most vital programming language in the world. Originally created in 1995 by Brendan Eich in just 10 days, JavaScript was intended to do basic things like make images blink or validate simple web forms. Over the next three decades, it transformed into an incredibly powerful engine. It is the only programming language natively understood by every major web browser on Earth. If you want to build things for the modern web, learning this language ecosystem is no longer optional—it is the foundational standard.

Why Learn This Ecosystem?

Every business, from early-stage startups to massive tech companies like Meta, Google, and Amazon, relies heavily on JavaScript, TypeScript, and React. Learning these technologies unlocks global job opportunities, enables rapid prototyping of your own ideas, and offers a clear, rewarding roadmap for career switchers.

Key Takeaways

• JavaScript is the native programming language of the modern web browser.
• It evolved from a simple scripting tool into a comprehensive, multi-platform powerhouse.
• Mastering JavaScript, TypeScript, and React forms the core foundation of modern frontend engineering.

2. Understanding Web Development

Before writing a single line of code, let's understand how websites actually process information. When you type a web address into your browser, a quick conversation happens across the globe.

The Browser vs. The Server

Think of the Browser (also called the Client) as a restaurant customer sitting at a table. The browser is your phone or laptop running software like Google Chrome, Safari, or Microsoft Edge. Its main job is to show visual information to you and listen for clicks or keystrokes.

The Server is like the restaurant kitchen located far away. It is a powerful computer connected to the internet that stores the website's data, user profiles, and security rules. When the client makes a request, the server processes it, prepares the necessary files, and sends them back over the web.

Static vs. Dynamic Websites

A Static website is like a printed paper brochure. Every single visitor sees the exact same words and images. The files sit on the server, and the browser displays them exactly as they are without changes.

A Dynamic website is like a live interactive dashboard. Content alters instantly depending on who you are, what time it is, or what actions you take. Think of a social media feed or a banking app; it changes dynamically for every user because code is updating the layout in real time.

Where All the Pieces Fit

Building a dynamic application requires a specific set of building blocks, each handling a distinct task:

• HTML (HyperText Markup Language): The structural skeletal system. It defines text paragraphs, headings, image spots, and buttons.
• CSS (Cascading Style Sheets): The visual appearance, skin, and wardrobe. It controls colors, layouts, fonts, and responsive positioning.
• JavaScript (JS): The muscular and nervous system. It makes elements move, reacts to user input, and handles live data calculations.
• TypeScript (TS): An advanced layer of protective armor over JavaScript. It catches programming errors early before the app even runs.
• React: A specialized structural architecture kit. It helps organize complex interfaces into reusable building blocks instead of messy individual files.

+-------------------------------------------------------------------------+ | THE CLIENT (YOUR WEB BROWSER) | | | | +------------------+ +-------------------+ +----------------+ | | | HTML Structure | | CSS Styling | | JavaScript/TS | | | | (The Skeleton) | | (The Wardrobe) | | (The Brains) | | | +--------+---------+ +---------+---------+ +--------+-------+ | | | | | | | +------------------------+-----------------------+ | | | | | Managed Efficiently By | | [REACT] | +-------------------------------------------------------------------------+ ^ | Requests Files / Sends Data v +-------------------------------------------------------------------------+ | THE SERVER (REMOTE KITCHEN) | | Handles heavy data processing, security, databases, and authentication | +-------------------------------------------------------------------------+

Key Takeaways

• Browsers act as the client interface; servers process and store global data securely.
• HTML provides structure, CSS handles visual styles, and JavaScript adds interactive functionality.
• TypeScript adds safety guardrails, while React simplifies assembling large-scale dynamic user interfaces.

Core Technology

3. What is JavaScript?

JavaScript is a high-level, interpreted programming language that enables interactive, dynamic behaviors on web pages. High-level means the syntax looks much more like human English than raw machine binary, making it easier for human programmers to read and write.

The Home Construction Analogy

Imagine you are building a modern residential house:

• HTML represents the framing studs, concrete foundation, and walls. It defines where rooms exist.
• CSS represents the exterior paint color, interior wallpaper, light fixtures, and carpet styles.
• JavaScript is the functional home utilities. It is the light switch that triggers electricity, the plumbing faucet that dispenses water, and the automated smart garage door that rolls open when you press a remote.

Why Browsers Understand JavaScript

Web browsers have a built-in internal translation engine often called a JavaScript Engine. For example, Google Chrome runs an engine called V8, while Safari utilizes JavaScriptCore. These specialized engines take human-written JavaScript text files and instantly compile them into ultra-fast machine code instructions that your computer hardware processor executes in milliseconds.

Where Does JavaScript Run in 2026?

JavaScript is no longer restricted to just small web browser animations. Today, it can run almost anywhere:

Client-Side (Browsers)

Running directly inside the browser window to change layouts, process clicks, or render web page themes immediately.

Server-Side (Node.js)

Running on server computers to communicate with central secure databases, handle file processing, and routing infrastructure.

Mobile Applications

Using frameworks to compile cross-platform mobile apps for iOS and Android platforms from a single codebase.

Desktop Software & IoT

Powering desktop apps like Visual Studio Code and Discord, as well as smart household internet-connected devices.

Key Takeaways

• JavaScript handles the actions, events, logic, and data updates of your web project.
• Custom browser engines convert JavaScript text code directly into raw machine execution speed.
• Modern tools allow the language to run natively across servers, desktop apps, and mobile devices.

4. Client-Side JavaScript

Client-side JavaScript refers to code that is downloaded from the server and runs entirely within the visitor's local web browser engine. Here are the core conceptual pillars you must understand:

The DOM (Document Object Model)

When a browser loads your HTML file, it transforms that static text structure into a dynamic tree object called the DOM (Document Object Model). JavaScript interacts with this tree model, giving the language the ability to add, delete, or completely restyle parts of your site on the fly.

Event Handling

Browsers monitor user behavior. An Event is an action that happens on the page—like a user clicking a button, scrolling downward, or submitting a text input form. JavaScript registers an "Event Listener" to watch for these movements and execute custom code in response.

// A real example of selecting a button and listening for a click event const myButton = document.querySelector(".submit-btn"); myButton.addEventListener("click", () => { alert("Form submitted successfully!"); });

APIs and Fetching Live Data

An API (Application Programming Interface) is an standardized channel that allows two distinct pieces of software to communicate with each other. For example, your weather website can request live forecasting data from a secure remote weather tracking server using the browser's built-in fetch() system without reloading the visible web page.

Browser Storage Options

Sometimes your web app needs to remember information directly on the user's local machine:

• Local Storage: Keeps text data saved indefinitely in the browser, even if the user completely closes the tab or window. Great for dark mode theme settings.
• Session Storage: Keeps text data saved temporary until the specific browser tab is closed.
• Cookies: Small text snippets sent between the client and server with every web request, predominantly used to securely keep you logged in to user profiles.

Key Takeaways

• The DOM represents the dynamic structure JavaScript modifies to update visual components.
• Event handlers actively listen for mouse clicks, keyboard typings, or screen adjustments.
• Modern browsers provide built-in APIs and storage systems to fetch live remote data and persist app preferences locally.

5. Server-Side JavaScript

For a long time, JavaScript was strictly trapped inside web browsers. If you wanted to build backend server logic, you had to learn an entirely different programming language like Python, Ruby, or Java. That changed with the birth of Node.js.

What is Node.js?

Node.js is an open-source, cross-platform runtime environment that extracts Google Chrome's fast V8 engine out of the browser and wraps it in standalone tools. This allows you to run JavaScript files directly on your computer's terminal operating system or remote cloud servers.

The Video Game Console Analogy

Think of JavaScript code as a video game disk. Originally, this disk was specifically engineered to run exclusively inside one console brand (The Web Browser). Node.js acts like an adapted standalone hardware system that runs the exact same game disk on your television set or home computer setup instead.

Typical Responsibilities of Node.js

Server-side JavaScript commonly handles operations that require security and permanent long-term data storage:

• Database Connectivity: Securely reading, writing, and updating records in large databases (like MongoDB or PostgreSQL).
• Authentication: Safely processing user registration forms, verifying passwords, and generating secured login tokens.
• File Handling: Reading, writing, modifying, and uploading files directly to hard drive storage or cloud media buckets.

Key Takeaways

• Node.js enables developers to use one single programming language (JavaScript) across both backend and frontend environments.
• Servers handle operations that are too sensitive or computationally heavy to expose directly to the client browser.
• Node.js applications excel at handling rapid network communication, modern web APIs, and real-time scaling.

Type Safety

6. What is TypeScript?

JavaScript is highly flexible and dynamic, but that flexibility can sometimes lead to problems. In standard JavaScript, the computer doesn't know what kind of data is stored inside a variable until the code actually executes. This can lead to unexpected errors down the line if, for example, your code treats a text string like a number.

To fix this challenge for larger engineering teams, Microsoft created TypeScript. TypeScript is a strict, structured layer built directly on top of JavaScript. It introduces Static Typing, meaning you explicitly tell the code beforehand what kind of data each variable is allowed to hold.

Crucial Concept: TypeScript is Not a Separate Language!

Browsers do not understand TypeScript files directly. Instead, developers write TypeScript code, and a specialized tool compiles (translates) it back into standard, plain JavaScript that any browser can easily run.

TypeScript Syntax Highlights

Here is a basic look at how TypeScript adds safety parameters compared to standard JavaScript:

// JavaScript version - dynamic but risky function calculateTotal(price, tax) { return price + tax; } calculateTotal("10", 5); // Returns "105" as text instead of 15! No error shown until it breaks. // TypeScript version - safe and self-documenting function calculateTotalSafe(price: number, tax: number): number { return price + tax; } // If you try to pass text "10" here, your code editor instantly highlights it red as an error before running.

Feature Criterion	JavaScript (JS)	TypeScript (TS)
Type System	Dynamic (Types determined at runtime)	Static (Types verified during development)
Error Catching	Errors appear while users interact with the app	Errors are caught inside your code editor immediately
Setup Cost	Zero configuration needed; works instantly	Requires a small build compilation configuration step
Ideal Use Case	Small scripts, fast mockups, simple pages	Large commercial apps, multi-developer teams

Key Takeaways

• TypeScript acts as a developer-focused quality assurance tool wrapped around JavaScript syntax.
• Static typing catches logical mistakes in your editor before code is sent to live users.
• All valid TypeScript code transforms back into standard JavaScript during the build phase.

UI Architecture

7. What is React?

When web applications grow, managing thousands of individual HTML text lines and linking them to hundreds of JavaScript event selectors manually turns into an organizational headache. To streamline this process, the engineering team at Meta created React.

React is an open-source JavaScript Library designed for building modern, high-performance user interfaces. Instead of building a website page-by-page, React shifts your focus toward a Component-Based Architecture.

The LEGO Block Analogy

Imagine your website user interface is a large LEGO model. Instead of molding the entire model out of a single piece of plastic, you build independent individual blocks: a ProfileButton brick, a SearchBar brick, and a VideoPlayer brick. You then arrange and snap these self-contained bricks together to form a polished app.

Core Concepts of React

• JSX (JavaScript XML): A syntax extension that lets you write clean HTML-like structures directly inside your JavaScript file. It keeps your template and logic neatly grouped together.
• State: The internal memory bank of a specific component. If an individual component updates its state (like tracking if a shopping cart popup is currently open or closed), React handles refreshing that exact piece of the screen automatically.
• Props (Properties): Custom configuration values passed downward from a parent component to a child component, similar to passing arguments into a standard code function.
• Virtual DOM: A lightweight, digital blueprint copy of the actual browser DOM. When data changes, React calculates the most efficient way to apply updates first on this virtual copy, then surgically edits only the necessary parts of the real screen. This provides massive performance boosts.
• Single Page Applications (SPA): Modern web apps that load one single HTML document frame, then dynamically swap out visible sub-components as you browse without performing slow, full-page screen refreshes.

Key Takeaways

• React focuses on breaking user interfaces down into clean, independent, reusable blocks called components.
• JSX allows you to mix structural HTML tags directly with JavaScript code logic.
• The Virtual DOM ensures the app runs smoothly by minimizing direct, heavy redraw updates to the browser layout.

8. JavaScript + TypeScript + React Relationship

It is easy for beginners to get confused about how these three technologies interconnect. Let's map out exactly how they interact:

• JavaScript is the foundational engine. Without it, neither TypeScript nor React can exist.
• TypeScript is a developer safety layer wrapped around JavaScript to keep code organized and error-free.
• React is an specialized architecture toolkit built with JavaScript to structure modern user interfaces cleanly.

When you build a professional modern project, you are often combining all three: you write a React interface layout, write your logic utilizing JavaScript commands, and wrap the entire system in TypeScript annotations to prevent bugs.

+-----------------------------------------------------------+ | TYPESCRIPT | | (Provides explicit type checking and safety guardrails) | | | | +-------------------------------------------+ | | | REACT | | | | (Provides component architecture & UI) | | | | | | | | +---------------------------+ | | | | | JAVASCRIPT | | | | | | (The core engine foundation) | | | | +---------------------------+ | | | +-------------------------------------------+ | +-----------------------------------------------------------+

Key Takeaways

• React is a library tool you run, JavaScript is the coding language, and TypeScript validates that your code is written correctly.
• You do not choose between them; you layer them together to build robust modern frontend applications.

9. Client-Side vs. Server-Side Comparison

To keep your structural map completely clear as a beginner, let's look at a side-by-side comparison of where code runs and how tasks are divided between client-side and server-side environments:

Feature Attribute	Client-Side (The Browser)	Server-Side (The Backend Server)
Execution Location	Runs locally on the user's browser (Chrome, Safari, etc.)	Runs remotely on host machines via Node.js runtime
Database Access	No direct access allowed (exposes secure data keys)	Full direct access to read/write database records safely
Primary Focus	Visual rendering, tracking user clicks, and layouts	Heavy calculations, security, and managing data routing
System APIs	Access to camera, geolocation, local storage controls	Access to server file directories, networks, operating systems
Technology Examples	React components, standard HTML structures, CSS styling	Node.js servers, Express microservices, database connections

Key Takeaways

• Client-side code focuses on providing a fast, interactive experience for users.
• Server-side code keeps sensitive operations secure and out of sight from the public browser inspector.

10. Tools Needed to Start

Before writing code, you need to set up a clean, modern development environment. Here are the essential tools you will use every day:

1. Google Chrome or Brave Browser

You need a modern web browser to view your projects. These browsers come with built-in Developer Tools (Chrome DevTools) that let you inspect HTML layouts, test CSS properties, and debug JavaScript errors in real time.

2. Visual Studio Code (VS Code)

The standard text editor for modern web development. It is free, open-source, and offers great autocomplete suggestions and code formatting help through extensions.

3. Node.js & npm

npm (Node Package Manager) is installed automatically alongside Node.js. It acts like an App Store for developers, letting you download free, pre-written code libraries created by other engineers worldwide.

4. Git & GitHub

Git tracks changes to your code files over time like a history log. GitHub is a cloud platform where you store your project code online, collaborate with team members, and showcase your portfolio to recruiters.

Key Takeaways

• VS Code serves as your main typing canvas; Chrome DevTools serves as your diagnostic lab.
• npm makes it easy to bring external open-source packages and modern web frameworks directly into your workflow.
• Git handles file history tracking, protecting your codebase from accidental deletions or regressions.

11. Setting Up the Development Environment

Let's walk through the exact steps to create your very first test environments from scratch using your computer's terminal command line interface.

Prerequisite Step

Download and run the official installers for both Visual Studio Code and Node.js (LTS version) from their official websites. Once installed, open your computer's built-in Terminal or Command Prompt.

Verify that the tools are ready by typing these commands and hitting Enter:

node -v npm -v

Step 1: Your First JavaScript Project

Create a fresh folder on your computer, open it inside VS Code, and create a new file named app.js. Add this simple code line:

console.log("Hello from JavaScript!");

To run this code on your computer using Node.js, run this command in your terminal:

node app.js

Step 2: Your First TypeScript Project

Because browsers cannot read TypeScript directly, we need to initialize a project to handle that compilation step. In your terminal, run these commands to set up a new project configuration:

# Initialize a standard npm project folder configuration npm init -y # Download the TypeScript engine into this project folder npm install typescript --save-dev # Initialize the TypeScript configuration file (tsconfig.json) npx tsc --init

Now, create a file named index.ts and type out your typed logic code. To compile it into standard plain JavaScript, execute the typescript compiler tool:

npx tsc

Step 3: Your First React Project

The modern, recommended way to set up a fresh React development environment is using a lightning-fast build engine called Vite. Run this single command in your terminal:

npm create vite@latest my-react-app -- --template react

Follow the quick on-screen text instructions to navigate into the new folder, install your dependencies, and launch your local developer web server:

cd my-react-app npm install npm run dev

Open the provided URL link (usually something like http://localhost:5173) inside your browser to see your live React app running!

Key Takeaways

• node [filename] runs a raw script directly on your computer.
• npm install downloads required project dependencies safely into a local folder.
• Vite provides a fast, pre-configured boilerplate configuration template for building modern React applications.

12. Recommended Learning Path

One of the biggest mistakes beginners make is trying to learn everything at once. This leads to burnout and confusion. Frontend development is best learned step-by-step, building on what you've already mastered. Here is the recommended learning sequence:

[1. HTML & CSS Basics] ──> Build static webpage visual blueprints │ v [2. Core JavaScript] ──> Variables, loops, functions, and logic arrays │ v [3. Browser DOM & APIs]──> Selecting nodes, click events, and fetch requests │ v [4. TypeScript Setup] ──> Learn static types and interfaces for code safety │ v [5. React Fundamentals]──> Components, state management, props, and custom hooks

Why This Order Matters

If you try to learn React before understanding core JavaScript concepts like arrays or functions, you will struggle. React is just JavaScript wrapped in a specific layout structure. Mastering the core language first makes learning React much smoother.

Key Takeaways

• Focus on getting comfortable with pure JavaScript long before adding TypeScript or React tools.
• Understand how data flows through simple logic chains before attempting complex frontend interface architectures.

13. Common Beginner Mistakes to Avoid

Keep these common pitfalls in mind to save yourself time and frustration along your learning journey:

• Jumping Into React Too Soon: If you don't understand core JavaScript concepts like how arrays work, React's documentation will feel incredibly confusing. Take your time with pure JavaScript first.
• Memorizing Syntax Without Building Projects: You cannot learn to code by just reading text or watching videos. Your brain builds muscle memory by opening a text editor, typing code, breaking things, and fixing them yourself.
• Ignoring Browser Developer Tools: The Console tab inside Chrome DevTools is your best friend. When something goes wrong, look there first—it will often tell you exactly which line of code broke and why.
• Copy-Pasting Code Blindly: It can be tempting to copy answers from forums or AI assistants. If you do use a snippet, take a moment to read through it line-by-line and make sure you understand exactly what it is doing before moving on.

Key Takeaways

• Prioritize building real things and running into bugs over passively watching video tutorials.
• Treat error messages as helpful diagnostic clues rather than frustrating failures.

14. Small Practice Projects

The absolute best way to truly learn programming is by building real things. Here are a few great beginner-friendly projects that help reinforce core concepts:

1. Digital Counter Application

Tech Stack: Plain JavaScript + HTML/CSS.

Core Concept: Build a simple screen with "Plus" and "Minus" buttons that increase or decrease a central number. This teaches you how to select DOM elements and listen for user clicks.

2. Live Weather Dashboard

Tech Stack: JavaScript + Weather API.

Core Concept: Create an input box where users type a city name, fetch live weather data from a free public API, and display the temperature on the screen. This helps you master asynchronous operations and remote data loading.

3. Interactive To-Do List

Tech Stack: React + TypeScript.

Core Concept: Build a list tracker where users can type in new tasks, mark items as completed, and filter the list. This is a great way to practice managing state, working with props, and using types.

Key Takeaways

• Start with very small projects to build your confidence before moving on to larger ideas.
• Focus on making your apps functional first; you can always refine the design and CSS later.

15. Career Opportunities

Mastering this ecosystem opens doors to a wide variety of roles across the tech industry. Here are some of the most common career paths:

• Frontend Developer: Focuses on everything the user sees, clicks, and interacts with inside their web browser. This role requires strong skills in HTML, CSS, JavaScript, and React.
• React Developer: A specialized frontend engineer focused on building and optimizing large-scale web apps using React's component system.
• Full-Stack Developer: A versatile engineer who works across both the client-side frontend interface and the server-side backend logic and databases.

Industry Demand

From early-stage startups to established global brands, modern engineering teams rely heavily on these technologies to build fast, scalable web apps. Developing strong skills in this ecosystem makes you a strong candidate for engineering roles worldwide.

Key Takeaways

• JavaScript, TypeScript, and React form one of the most widely used tech stacks in the modern software industry.
• Learning these tools gives you a clear path into frontend, backend, or full-stack software roles.

16. Frequently Asked Questions (FAQ)

Do I absolutely need to learn JavaScript before learning React?

Yes, absolutely. React is a tool built entirely on top of JavaScript. Without a solid understanding of basic JavaScript concepts like variables, functions, and arrays, React's syntax can be very confusing.

Should I learn TypeScript first before learning standard JavaScript?

No. Start with plain JavaScript to understand how the core language works. Once you feel comfortable writing basic scripts, introduce TypeScript to add safety features and catch bugs early.

Is React a complete framework or a library?

React is technically a focused library rather than a full framework. It focuses specifically on managing user interfaces and rendering components efficiently, giving you the freedom to choose other tools for tasks like routing or data fetching.

Can I use JavaScript to build mobile applications?

Yes! Frameworks like React Native allow you to use your existing JavaScript and React knowledge to build native mobile applications for both iOS and Android from a single codebase.

Is Node.js a completely separate programming language?

No, Node.js is not a programming language. It is a runtime environment that lets you execute standard JavaScript code on your computer or a backend server, outside of the web browser.

Can I build React applications without using TypeScript?

Yes, you can write React apps using plain JavaScript. However, using TypeScript is highly recommended for larger projects because it helps catch errors early and makes your code much easier to maintain over time.

Is JavaScript still relevant and worth learning today?

Absolutely. JavaScript remains the native language of the web browser and powers the vast majority of modern websites and cloud platforms. It continues to be one of the most valuable skills you can learn in software engineering.

What exactly does the DOM stand for?

DOM stands for Document Object Model. It is the internal structural tree that browsers generate when they load an HTML document, allowing languages like JavaScript to dynamically update the page content and layout.

What does API mean in web development?

API stands for Application Programming Interface. It is a standardized way for two different pieces of software to talk to each other—like your frontend application requesting data from a secure remote backend server.

What is a Single Page Application (SPA)?

An SPA is a modern web application that loads just one HTML frame. As users navigate around the site, components are dynamically swapped out on the screen without requiring slow, full-page browser refreshes.

What does JSX mean inside React code?

JSX stands for JavaScript XML. It is a syntax extension that lets you write clean, HTML-like layout tags directly inside your JavaScript files, keeping your structure and code logic neatly organized together.

What is npm and why do we use it?

npm stands for Node Package Manager. It is a large, shared repository that allows developers to easily download and share open-source code packages, libraries, and tools for their projects.

What is the main difference between LocalStorage and Cookies?

LocalStorage can store larger amounts of text data directly in the browser indefinitely. Cookies are much smaller text snippets that travel back and forth with every network request, mostly used to securely handle user logins.

How long does it take to learn JavaScript, TypeScript, and React?

For most beginners, it takes about 3 to 6 months of consistent practice to build a solid foundation in core JavaScript, and another 2 to 3 months to feel comfortable working with TypeScript and React. Everyone learns at their own pace, so focus on steady progress!

Do I need a high-end computer to start coding?

Not at all. Tools like VS Code and Node.js are very lightweight. Any standard laptop or desktop computer that can comfortably run a modern web browser is perfectly fine for learning and building web projects.

17. Conclusion

Building a successful career in modern web development comes down to mastering the relationships between these core tools. Start by learning how to build simple structures with HTML and CSS, then add logic and interactivity using JavaScript. Once you feel comfortable with the basics, bring in TypeScript to protect your code from bugs, and use React to organize your interfaces into clean, reusable components.

The journey from absolute beginner to confident developer takes time, patience, and plenty of hands-on practice. Don't worry about trying to memorize every single line of syntax—instead, focus on understanding core principles, building real projects, and learning how to solve problems step-by-step. Set up your local development environment, stay curious, and enjoy the process of creating things for the web. Happy coding!