I work for High Fidelity, a technology company currently building an API that allows developers to integrate 3D, spatialized audio into their applications. I recently wrote a blog post for us, and I’d like to share it here as well:
About 4.66 billion people use the Internet regularly – that’s over half of Earth’s population. Users’ time is split between content on social media, news sites, mobile apps, and more. Often, Web browsers like Google Chrome or Mozilla Firefox are the portals to this content. Those Web browsers must translate the languages of the Web – HTML, JavaScript, and CSS – into content that users can view and interact with.
So, who writes the languages of the Web? How do they do it? And where did they start?
Hi! I’m Zach, and I’m a frontend Web developer. Frontend developers take the basic building blocks of the Web and orient them in such a way that 4.66 billion people can find the information they’re looking for, voice chat with their friends, and stay up-to-date with current events.
I’d like to lead you down a path that will guide you from building your very first website to building a website that lets multiple people talk to each other and listen to music together. Along the way, we’ll learn about some of the technologies that enable developers to create the sites that you use every day.
Web development is a complicated path with many sights and sounds to enjoy along the way. Depending on your level of experience with computers and programming, you may want to stop at each of these metaphorical landmarks for a few minutes, a few days, or even a few years.
Let’s begin. If you encounter a metaphorical landmark that doesn’t interest you, continue to the next Stop.
Stop 1: Hello, world!
You’re reading this text right now, so you already have the technology and skills you need to build your first website. At some point, every Web developer’s career started with their first HTML document. If you’d like, let’s stop here for some time so you can create one for yourself.
The Mozilla Developer Network (MDN) is an incredibly helpful, free resource stuck in the back pocket of every modern Web developer. Among the MDN documentation is a “Getting started with HTML” document that will guide you through “the absolute basics of HTML”, and help you create your first “Hello World” HTML program!
Click here to view the MDN Getting Started guide.
Here are a couple other resources dedicated to introducing HTML:
Stop 2: Styling with CSS and Scripting with JavaScript
If HTML is the unfurnished house into which we stepped in Stop 1, CSS is furniture, paint, and window treatments, and JavaScript controls what happens when you flip a light switch, turn on a faucet, or turn the lock on the door.
CSS, or Cascading Style Sheets, allows a frontend developer to style bare HTML. It allows you to change the font of text, position an image, change a website’s background color, or split your text paragraphs into multiple columns. Here’s an example of CSS code that would change the color of all text inside <p> tags to blue:
p { color: blue; }
JavaScript, commonly abbreviated to JS, is a programming language used to dynamically modify the HTML content on a webpage. This means that the content of the page can change based on user actions, the time of day, the user’s login status, and more.
When you arrive at a webpage, your browser executes the JavaScript code embedded inside the page. A frontend developer has written the code embedded in the page. Here’s an example of JS code that would display some text inside the browser’s “debugging console”:
console.log(“Hello, world!”);
Tutorials which introduce frontend web development generally include information about CSS and JavaScript. The same MDN Getting Started tutorial from Stop 1 includes thorough information about getting started with CSS and JavaScript – check out those resources if you’re interested in further exploring these topics:
Stop 3: Advanced HTML, CSS, and JavaScript
At this point in our journey, you are capable of gathering the building blocks of the Web and constructing your own house along the path! At the end of this Stop, I’ll direct you to a guide that will take the concepts from above and let you build a simple Web application that will let you talk to other people in a virtual space through your web browser using technology from High Fidelity. But first – here are a few additional useful facts about our HTML, CSS, and JS building blocks:
Just like there are HTML tags for headers (like <h1>), paragraphs (<p>), and links (<a>), there are many other HTML tags to bring your ideas to the Web. Some of these tags include:
- The <audio> tag, used to add sound to a webpage.
- The <button> tag, used to add a clickable button to a webpage.
- The <img> tag, used to add an image to a webpage.
Have you ever visited a website on your computer, then later the same website on your phone? Have you noticed that the same website sometimes looks completely different? This is possible because of CSS. Modern CSS allows frontend developers to modify the layout of a webpage based on the size of the display used to render the content, the type of device used to browse the content, and other factors.
While it’s true that JavaScript is executed by your Web browser, it’s possible for JavaScript code to be executed outside of a browser as well. This is important because we sometimes don’t want our users’ browsers to have access to certain secret information. For example, when you go to your bank’s website to log into your bank account, your browser must transmit your username and password to a server somewhere else, and that server has to be running code to ensure that the information you input applies to your bank account. The server might be running JavaScript code! We’ll learn more about how this works at the next Stop.
For now, let’s build our voice communication Web application! Using all of what we’ve learned so far, follow this “Build a Simple Web App” guide on HighFidelity.com. Within 15 minutes, you will end up seeing a page in your Web browser that looks like this:
Stop 4: JavaScript Outside the Browser
As we discussed in Stop 3, it’s possible for JavaScript code to be executed inside a Web browser, or separate from the browser. Instead of a browser interpreting and executing JavaScript code with its internal JavaScript engine, that same JavaScript engine can execute standalone code.
This is the basic concept behind the Node.js JavaScript Runtime Environment. Developers write JS code inside a .js text file, and the JavaScript engine built into Node.js executes that code.
In addition to authenticating bank account logins like in the example above, JavaScript executed outside the browser using Node.js has infinite uses in frontend software development and backend (server-side) software development. Netflix, Mozilla, NASA, PayPal, and High Fidelity all rely on NodeJS to supply their services to users.
If you’d like to augment your “Simple Web App” from Stop 3 with a “DJ Bot” written in Node.js that uses High Fidelity technology, check out this “DJ Bot” guide. Within 30 minutes, a music bot will be spinning music into the virtual environment you built in Stop 3.
The End of the Path…or is it?
Today, we explored some landmarks along the path to Web development success. We learned about HTML, CSS, and JavaScript, which are the basic building blocks of the Web. We learned about the usefulness of JavaScript code and that it can be executed inside and outside a browser.
Critically, we learned how to apply these Web development concepts with two hands-on example projects: A simple communication Web app, and a Node.js “DJ Bot”.
My time guiding you down this path has come to an end. If you’re still interested in Web development or Node.js development, think of a project you’d like to build, and use the knowledge you’ve gained to figure out the steps to bring it to fruition. Perhaps your next project might make use of High Fidelity Spatial Audio technology!