The Internet 🕸
The internet is made of a computer networks across the world connected together in some form. When click on a webpage we sent out a request similar to ordering a Lego set online. A request is sent out and received by a server, which finds the exact set (or webpage) we asked for, and then sends the requested set (packets of data, in this case) back to us. Then out web browser — Firefox, Chrome, Safari, Edge or Internet Explorer, most likely — interprets the instructions (also packets of data) and builds the webpage in our browser on our end. This is the big takeaway — the data is on our side of the server.
Test It Out
Let’s mess with a webpage. click here and look up your own web browser to see how you can inspect the packets of data you’ve downloaded. After you’ve opened up the inspector, go ahead and delete a some of the elements. Things should start disappearing on screen. No, you’re not a hacker. 😐 Now refresh. All you did was delete packets of data downloaded in your own browser; whatever server hosts the website has the original version of the webpage, and when you refreshed you asked the website for a shiny new copy. This isn’t to say you don’t interact with websites and their servers; whenever you click “Add To Cart” or something similar you are sending data back to the server which is often saved or stored. But it’s important to understand that a web browser is more then merely a lens through which we interact with their webpage on their server.
Okay, Why Should I Know This?
Should I Learn HTML and CSS if I want to develop web apps?
What’s The Difference?
HTML is a markup language. It looks something like this:
<h1 id="title">This is a header tag.</h1>
<p>This is a paragraph tag.</p>
<button>You guessed it, this is a button.</button>
It creates the structure of a webpage — the example above creates a header, a paragraph, and a button with too much text in it.
CSS is a styling language. It’s job is to dress our drab HTML with whatever formatting we desire. Blue text on a red background? It can do it, regardless of whether or not you should. Zebra text? Don’t mind if I do. CSS looks something like this:
padding: 10px 5px;
This example, if applied to our HTML earlier, would search for the element with an id named “title,” make the font red and larger, and add some padding around it.