---
title: The Absolute Basics on Web Development
description: A post en which I talk about the basics of web development.
date: 2024-11-18
tags:
- development
- html
- css
- javascript
slug: the-basics-of-web-development
draft: 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:
1. The Document Type
2. The Header
3. 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](https://en.wikipedia.org/wiki/Document_type_declaration).
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.
```html
A simple web page.
Level 1 Header
This is a paragraph that will live on the page.
This paragraph has a Link to Tildes on it!
```
## 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.