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.
Before jumping into HTML, CSS, and HTTP, review the following topics on how the internet works.
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).
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.
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.
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.
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.
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.
Learn what goes on when your browser, an HTTP Client, makes a request to a web server, an HTTP Server.
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.
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.
Installing and configuring infrastructure (hardware, servers, etc.) requires some additional tooling knowledge. You'll most likely need to use these additional tools.
Using Virtual Box, or another Hypervisor, install your own VM on your computer, install NGINX, and serve your website.
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.
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.
When configuring infrastructure, a LOT of times things will not work on the first try. Make note of errors, and Google, Google, Google.
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.
This is a great explanation of what a protocol is, and understanding the definition through the use of HTTP and TCP.
Familiarize yourself with the fundamentals of HTTP.
Once you have a basic understanding of HTTP, here are some tools and methods to interact with it and view request and responses.
When using HTTP, there are three sets of tools you can use. CLI, GUI Applications, and Browser Tools (DevTools).
View your HTTP server's logs to see what it's doing. Try setting different logging levels to see more or less detail.