Why the Web
If you’re reading this, you’re probably interested in the wonderful world of the web. What started off as a platform to distribute documents has become so much more over the years. Today websites are interactive, more app-like and offer rich media experiences. We watch high definition videos on YouTube and Netflix, connect with thousands of people across the globe on social media sites, edit photographs and even design and build websites themselves on tools like Webflow and Figma.
The web has many unique advantages that make it so powerful.
- The web truly is platform-agnostic. It works on a variety of platforms. Laptops, tablets, phones, watches, even some refrigerators! This makes the build once, run everywhere mantra real like nothing else.
- The web is open and uncontrolled by any central authority. All you need is a URL (the unique link you type in on your browser to visit a website). It doesn’t require approval by Apple, Google or some company that runs an App Store.
- The web is ever-evolving but is always backwards-compatible. Newer technologies are built into our browsers every day. This constant innovation makes new things possible by pushing forward what the web can do. And yet, the website you built in 2001 for your high school rock band still works! Isn’t that incredible?
These advantages come with their own complexity.
Because we can visit websites on such a wide variety of platforms and devices, web developers need to ensure their sites work well across all of them. Would you like your website to look the same on an Apple Watch and a widescreen desktop display? Probably not. This adds complexity when it comes to building websites.
Ensuring backwards-compatibility with decades of technology means slower iteration and technical debt. We’ve taken what was meant to be a platform for documents and built upon it, many many layers of complexity to build the rich app-like experiences we take for granted today.
Enough theoretical discussion for now. Let’s talk about how to build for the web! Modern websites involve several moving parts. The first one we’ll discuss is HTML.
HTML stands for Hyper text markup language. That sounds complicated but really all it means is that HTML is a programming language that:
- Lets us write structured documents which follow certain rules
- Has the special ability to link to other HTML pages
Let’s see it in action. Open your favourite text editor and type in the following:
If you’re new to programming languages, the above might look complicated. Programming languages are a way for developers (like yourself) to communicate with machines. In that regard, they include certain structural rules. We call these rules syntax.
In the above example, the programming language is HTML. In HTML, every document consists of plain text and HTML tags. Tags are the words surrounded by < and >. They convey a certain meaning for everything that is written within them. See the p tag? P stands for paragraph here. The p tag means that everything within it is a paragraph! Notice how the text is surrounded by <p> on the left and </p> on the right. These are called opening and closing tags respectively.
Since everything in HTML must be surrounded by a tag, every tag must have an associated closing tag which includes the / character.
What other tags do you see in the example above? There’s html, head, body and title! Each of those tags have a unique meaning:
- html is a top level tag which every html document must include. It tells the computer that the block of text is HTML!
- Every HTML document has two parts — a head and a body! The head tag includes the head (which typically includes details about the document) and the body tag includes the actual document.
- title is a special tag that is used to set the title of the HTML page when viewed on a browser! Notice how every tab in your browser has a title? This is how you set one.
HTML is hierarchical in structure, in that everything must be contained within a wrapper tag. What’s the top most level tag? Html. What’s the tag that contains the p tag? Body.
Now, save the file as index.html (the .html extension tells the computer that the file contains HTML) and open the file in your favourite web browser!
Notice how the title of the tab is "Hello world!" and the text we included in the body under the paragraph tag shows up. Congratulations! You just wrote your first HTML document!
Now, while the minimalists among us might call our HTML document pretty, let’s try to style it up a little.
Add a style tag in the HTML above and add the following inside it.You’ll notice that the syntax within the style tag is different here. That syntax is called CSS. CSS stands for Cascading Style Sheets and, as you’ve guessed by now, is a way to define styles for your HTML document.
In this case, we’ve written styles for the p tag. The p is this context is the selector and is telling your computer that every p tag it encounters needs to have the styles defined here. The styles we’ve set are font-size, color and background-color.
Side note: cornsilk is such a lovely colour.
Congratulations once again! You just started styling your very first HTML document.
We’ve all seen the Like button on multiple websites. Let’s add our own version of it to our document.
The tag we’ll add in our HTML for this is called… You guessed it... A script tag!
But first, let’s add two more tags to our HTML. A span and a button.
Next, add the following inside a script tag.
Let’s go line by line.
- We create a constant called likeButton. Think of a constant as an empty box with a label on it. The label is likeButton in this case. Now, we then call a function called querySelector (which happens to be available on the document constant) and pass it a String of “button”. What this does is finds a button in your HTML document. The equals symbol, = assigns out button to ourlikeButton constant or puts it in its box based on our analogy.
- We create a variable called likes and set its value to 0. Let is different from const in that they’re a box whose contents can be changed.
- We set the onclick property of the likeButton to a new function. This function doesn’t have a name so it’s an anonymous function. However, it does have some things it does. It first sets the contents of the likes variable to its current value + 1. Then it finds the span in our document using the querySelector function we saw before and sets its innerText value to likes.
Don’t worry if you haven’t understood every single detail here. Our goal is to understand the bigger picture for now and we’ll dive deeper into each of these as this book progresses.
If you save your file now and reload the browser, you should see something like this.
Now go smash that like button! 😉
Putting it all together
Let’s deploy what we just created! Netlify is a service that I love to deploy my websites to, whether simple ones like this or really complex ones. Go to netlify.com, log in and drag and drop a folder containing our index.html file over. This should deploy your new site and give you a url!
There’s a lot more to learn ahead but I’m proud of you for creating and deploying your first website from scratch. Congratulations, fellow frontend engineer. See you in Chapter 2!