3.8 KiB
| title | description | date | tags | slug | draft | ||||
|---|---|---|---|---|---|---|---|---|---|
| The Absolute Basics on Web Development | A post en which I talk about the basics of web development. | 2024-11-18 |
|
the-basics-of-web-development | true |
The Server & Client
At the time of this posting, I have already conducted a workshop at a Hackathon for High School students in my city. My workshop took the kids from nothing to a very basic HTML document published on to the internet. I ended up using Github Codespaces, and Github Pages to get them from 0 to Web Page with the least amount of friction. Those technologies aside, this whole endeaver inspired me to write down what I think are the absolute basics, as I understand them from my own experience as a professional web developer.
The first thing to truly understand is the relationsihp between a Server and the Client. The Server is a piece of software that reacts to requests from a Client. The Client is you - probably using a web browser like Firefox or Chrome.
I think its important to talk about TCP/IP, the packet, and the structure of the Request and Response data.
The Document
The best way to conceptualize what a web page is, is to look at what it actually is - a document. The Document is made up of a special Markup language called Hyper Text Markup Language (HTML). This is a form of Hypermedia - a concept we don't have to fully invest in yet.
HTML describes structure and classification of data. There are three main parts of an HTML document:
- The Document Type
- The Header
- The Body
The Document Type simply states "Hey, this document is of this format." We wont go into the history of the HTML Document Type tag since once HTML was standardized we perfected the notion of how to declare a document type.
If you're curious about the history of this line and what it used to look like, feel free to look at the Wikipedia article on the subject.
The Header is meta data about the document. This is where things like the Title of the document is declared, where character set in the document is defined, and other things like injecting remote files like stylesheets and JavaScript.
The Body is where the content for the document actually lives. This is where we will write a majority of our HTML and present the information we want to share with the world.
Let's take a look at the document we are going to craft. By the end of this blog, if you wish to follow along, you will have a very basic understanding of how the web works.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple web page.</title>
</head>
<body>
<!-- This is a comment, this is not rendered to the page. -->
<h1>Level 1 Header</h1>
<p>This is a paragraph that will live on the page.</p>
<p>This paragraph has a <a href="https://tildes.net">Link to Tildes</a> on it!</p>
</body>
</html>
The Stylesheet
Styling HTML is usually done through a language called Cascading Style Sheets. This language allows you to define things like font families, sizes, colours, and even placement on the document itself. CSS has gone through a huge evolution since I first learned it in 2004(ish). While I am no designer (that's my wife), I have learned some really basic skills over the years that allow me to get a basic, legible, site styled. Case and point: this blog.
Interactivity
The only real way to add interactivity to an HTML document these days is to add some JavaScript. JavaScript is a temultuous topic in and of itself but I think understanding the basics, especially within the context of a Web Browser and on an HTML document, can help you appreciate what a little of client-side code can do to improve the experience of reading some documents.