mitre

Learn the Basics of HTML, CSS, and HTTP

Learn declarative programming through the use of HTML and CSS. Run a simple HTTP server and host a website. Become familiar with HTTP, the protocol of the web.

Internet Fundamentals Recap
link

Before jumping into HTML, CSS, and HTTP, review the following topics on how the internet works.

optional
circle
Review the OSI Model

The internet is the backbone of the web. It's important to state that the internet and the web are not the same thing. The web(HTTP) is built on top of the internet(TCP/IP).

Key Points
  • Understand the basics of the OSI model, and familiarize yourself with TCP/IP
  • You should understand what an IP or Port is.
Declarative Programming with HTML, and CSS
link

Declarative programming, defines what should be done, not how. Two declarative languages are HTML (structure of a webpage) and CSS (style of a webpage), and the browser handles the rendering (what you see on a webpage). This contrasts with procedural programming, which details step-by-step instructions, and OOP, which organizes code around objects and methods. Declarative focuses on outcomes, making it simpler and more readable for tasks like web creating webpages.

Tip: Creating webpages with HTML will dip your toes into "Frontend" development, (what users see and interact with). It's a huge, huge topic in software engineering and when people want to "learn how to code", they most likely are thinking frontend development. This guide simply introduces to basic web technology and terms.

optional
circle
Complete the Mozilla HTML, CSS, and Javascript Tutorial

This guide introduces you to HTML, CSS, and a splash of Javascript. Together they form the foundations of frontend web development. Read through publishing your website, don't actually do it yet.

Key Points
  • You can use VS Code as your editor.
  • Mozilla is a nonprofit known for advancing web standards like HTML, CSS, and JavaScript.
  • Through MDN (Mozilla Developer Network), they provide development resources and contribute to standards.
optional
circle
Write Your Own HTML website

Create a simple website using HTML and CSS, that you can just open with your browser. Call the document index.html, and have a directory next to it called pages.

Key Points
  • Create a basic HTML page about you (home page).
  • Create a few pages, each describing some interests or hobbies you have.
  • Link to the pages from the index.html
  • Each page should link back to the index.html (your home page)
  • You should be able to open index.html in the browser and navigate to your pages.
  • Don't implement any Javascript! It's Beyond the scope of this step.
optional
circle
This Guide is Written in a Declarative Language!

All guides on SmeeGuides are written using YAML, which is another declarative language. There is code on this site which interprets the guide as YAML into the sections, steps, and cards you see here.

Introduction to HTTP Servers and Web Infrastructure
link

If HTML (Hyper Text Markup Language) is what webpages are built in, HTTP (Hyper Text Transfer Protocol) is the protocol used to move and modify HTML around via the internet. In this section you'll learn a little about web and cloud infrastructure, create a server(computer/machine), install an http server on it, and host your website, in that order. Keep in mind that hosting your site on the internet can cost a small amount of money.

Tip: This section does not focus on coding. Feel free to practice on the side if you want or take a break, we're going to just going to explore web infrastructure here.

optional
circle
Understanding Web Traffic Flow

Learn what goes on when your browser, an HTTP Client, makes a request to a web server, an HTTP Server.

optional
circle
Learn About Virtual Machines

A virtual machine (VM) is a software-based computer that runs an operating system and applications within a host system(physical computer/bare metal). It's widely used for hosting applications and services.

Key Points
  • An HTTP server is software which would be installed on a VM, or physical computer
optional
circle
Learn About Installing and Configuring, NGINX

An HTTP server implements HTTP, and responds to requests made by HTTP Clients (i.e. your web browser). NGINX is a very popular http server.

Key Points
  • Stick with learning how to host a static website, avoid topics such as SSL/TLS, and proxies for now.
  • Learn the server, server_name, root, index, location, try_files, access_log, and error_log Nginx Directives. Read the docs for these.
  • Another popular HTTP Server is Apache and works roughly the same.
optional
circle
New Terminal Tools

Installing and configuring infrastructure (hardware, servers, etc.) requires some additional tooling knowledge. You'll most likely need to use these additional tools.

Key Points
  • Note that every Linux distribution (Ubuntu, CentOS etc.) is different, understand what "flavor" your working with and you may need to install the tools depending on your OS.
optional
circle
Run Your Own VM and HTTP Server

Using Virtual Box, or another Hypervisor, install your own VM on your computer, install NGINX, and serve your website.

Key Points
  • Stick with learning how to host a static website, avoid topics such as SSL/TLS, and proxies for now.
  • Another popular HTTP Server is Apache and works roughly the same.
optional
circle
Run an HTTP Server on a Cloud Provided VM

Using a cloud provider (infrastructure which is built, maintained, and run by a company for you), order a VM, install NGINX, and serve your website.

Key Points
  • stick with the cheapest droplet (Digital Ocean term for a VM)
  • do not get lost in all the features and products offered by a cloud provider!
  • stick with ordering the VM, gaining access to it via ssh, installing NGINX, and hosting your Website.
optional
circle
Register a Domain or use etc/hosts file

In order to access your website with a domain name, you need to either register a domain name and point it at your sites IP, or use a hosts file.

Key Points
  • the Hosts file ONLY works for the machine it's configured on! i.e. Local name resolution.
optional
all_inclusive
circle
Always be Googling and Other Tips

When configuring infrastructure, a LOT of times things will not work on the first try. Make note of errors, and Google, Google, Google.

Key Points
  • Configuring and running web infrastructure boils down reading the documentation, and troubleshooting errors. No matter what the technology is, the process will always be the same.
  • You may think this is a tedious exercise and it is, or you may love it.
Hyper Text Transfer Protocol (HTTP) Basics
link

Now that you have a simple website published either on your own computer or through a cloud provider. It's time to look under the hood at HTTP.

Tip: HTTP is a fairly large protocol but an extremely important one for infrastructure and software engineers.

optional
circle
HTTP and TCP Under the Hood

This is a great explanation of what a protocol is, and understanding the definition through the use of HTTP and TCP.

Key Points
  • The most popular version which you should know is HTTP/1.1,
  • HTTP/2 and HTTP/3 are usually abstracted away from us by other protocols and beyond the scope of this guide.
optional
circle
HTTP Fundamentals

Familiarize yourself with the fundamentals of HTTP.

Key Points
  • Know the Methods - GET, POST, PUT, DELETE, be aware that others exist
  • Know the Headers - Host, Accept, Content-Type, Set-Cookie, Content-Length, Authorization, be aware others exist
  • Know the Codes - 200, 301, 302, 400, 401, 403, 404, 500, 502, 503, be aware others exist
  • Understand the concept of Redirection, Cookies, Request, Response
HTTP Tools and Logging
link

Once you have a basic understanding of HTTP, here are some tools and methods to interact with it and view request and responses.

optional
circle
HTTP Tools

When using HTTP, there are three sets of tools you can use. CLI, GUI Applications, and Browser Tools (DevTools).

Key Points
  • Each browser has its own version of the Developer Tools. I provided Chrome as an example.
optional
circle
HTTP Logging via NGINX

View your HTTP server's logs to see what it's doing. Try setting different logging levels to see more or less detail.

Key Points
  • Use tail and grep to view and search through logs, a key skill to have!