Introduction

Regard this place like a blog of blogs that leans a little bit more practical, of the non-dirt variety (sorta, because I always end up circling back to dirt at some point). Here I will write articles and link fun resources that a lot of people have done better and more extensively than me. This I don't mind, because I just really enjoy writing things, and I write things in the hopes that I will end up having something useful to contribute to the interweb.

My contribution

I'm what's called a Digital Humanist, which is this rather niche humanities sector that addresses humanities database management and ethical digitization practices. It's a lot of things, really, but it's a lot of useful and very important things! I'm obviously extremely passionate about the whole "people and computers" and online culture thing. I write a lot of essays in this stuff, so I might end up posting some of my weirdo papers.

I'll also write some other mini essays for the sole purpose of "this is the way I wish someone had explained this to me", in the name of further filling up the internet with a wide variety of perspectives. This will include a bunch of random of topics I find interesting.

HTML & CSS crash course

The reason I chose to write this train wreck is for this exact reason: I learned how to wrangle markup decently within 2 months. Here I want to outline the steps I took as an utter beginner, misspelling 'img scr' over and over again, learning to write CSS mostly blind a couple months later with no formal training in the skill.

I'm going to split this into a few sections, not necessarily by practical lesson, but by what I find to be the most logical step-by-step progression through the different skills markup requires from you.

1. Knowing how to troubleshoot

Wow, the most boring part first. This is first, because skill hinges on the ability to ask a thousand questions, alongside how to formulate them for a search engine. Put away your stinking ChatGPT, because research is as simple as typing "how to css gallery photo gallery not working help" and pressing enter. Cross-reference the resources you find, read the desperate blog posts that ultimately fail to work, and rewrite your question as you start to narrow down your problem.

• Do not immediately hound the knowlegeable person you know, and do not go and ask for quick answers on r/neocities as your very first resort (do ask for help if it is your 20th try and you've gotten nowhere!).
• Start all over again when you run into issues in your code that the troubleshooting has not been able to make sense of.
• Sigh and groan and moan and once again search for the "html photo gallery tutorial" you already followed and do it again, and then try another one afterwards.

2. Imitation is the sincerest form of flattery

This is a very nice way of saying: steal all of the crap you think looks cool. Right click on this very page, click on the View page source button, and copy and paste what you find. At first glance, what makes sense to you here, and what doesn't? What happens to which elements when you adjust the code? It probably looks like crap, because my separate workshop.css file that dictates what goes where and how things look like is not apparent to you in this window (can you find it?).

Anyway, what makes taking people's code an ethical practice? This component will make some people indecisive, because code is very much copyrightable under the "text" umbrella. Do look for people's licenses/TOS, or lack thereof, before you start picking up elements you do not intend to change very much. I go into this section assuming that you intend to be transformative, i.e. that you do not intend to copy and paste my code into your very own workshop.html where you try to pass off my writing as your own (not that I care very much, go nuts).

Let's continue talking about being a good thief, or a good imitator. In HTML's case, I find this is a crucial step toward your first site, because a lot of components will not immediately make sense to you, and they may not make sense to you for a very long time. What does utf-8 up top mean? What's with splitting these sections into head and body? Don't worry so much about that, plop in your template and start with something much simpler.

Want a very very barebones start to your first website that is completely free to use? Check out at w3schools "How To Create a Blog Layout", a resource that was equally vital to my understanding of rows and columns. Remember to paste this template inside your two <body> elements.

3. How to break your template

You, in fact, need to code incorrectly, and you need to do it badly and awfully about a hundred thousand times. The best part is that when you break something, your website is broken! When you retrace your steps and repair it, you will find the exact part where the wrong thing happened. (Now don't do that again!)

This is where a template makes this a less painful process, because you always have something you can fall back on that you have assured is functional in the first place. Once you have picked this template, you need to decide which part of it to break, and as such you will learn what happens when it breaks.

Here are two different methods of adjusting the size of an image that is knowledge applicable to most editing you are going to end up doing in HTML and CSS.

First, put in <img src="frog.png"> and tack on a style="width:1000px;" after your "frog.png", before the > symbol at the end. You can also do the same thing but instead add class="SUPERBIGFROG". The class attribute seen here allows you to customize the size of your frog in the CSS style sheet instead of cluttering your text. See more on this in w3schools's "HTML Styles" and "HTML class Attribute" in the right sidebar.

Try these next things out, make your frog gigantic, and break your site over and over again. Save frog to try it for yourself →

• Remove something, adjust a number, see what happens if you type position:fixed;.
• Detele a row. Delete a hundred rows.
• Pick a new, annoying color with background-color: Fuchsia; that makes it glaringly obvious where the element is located.
• Ctrl + z and repeat!

4. Crashing the course: The basics

HTML was invented a pretty long time ago by a lot of very smart people. As such, there is a universe of obscure knowledge and a dictionary of terms. You do not need to know very much about these things in order to create a pretty decent website. Here I will attempt to very briefly break down what it is you will actually be able to take advantage of as a beginner.

File management
You are currently viewing a workshop.html file, and a workshop.css file working together. These files may sometimes overlap, as in the case of my blog, all sharing the same blogtemplate.css file. Due to being a fan of diverse layouts, I do often end up with unique pages consiting of a HTML file, linked to its corresponding CSS style sheet in <head>. It's essential for me to mention this part, because it's not obvious where you go or what you even do when you assign classes.

• Classes written in a HTML document correlate to the identically named class in the CSS style sheet. Let's use our <img src="frog.png" class="SUPERBIGFROG"> as an example. In the style sheet, this will look like .SUPERBIGFROG {}. Your style is specified inside these curly brackets. (Look up examples of how CSS files usually look like, it will help!) This technique is applicable to every single thing you add to your website. It's that easy!
• Naturally, you also need to add your frog.png to your folder in order to display it on your website. -Now start monkeying around!

Also, don't be shocked if you find a template or inspect a different site where the CSS is included inside a <style> element on top of the HTML file. This technique is just as viable and perhaps a little easier to manage, but I personally find the clutter rather annoying. Find the option that works best for you!

Hierarchy, columns and rows
HTML as a markup language consists of elements inside of elements, that is thankfully not dependent on any particular syntax. You must only attend to opening and closing your elements appropriately, whereafter you can break any damn rule you want to break. Your editor will warn you if something is left open though, so don't worry!

Learning how to "think in markup" in order to create predictable layouts is when explaining HTML gets abstract. This is probably a point where my own knowledge is lacking, and where I believe you can only learn by doing. When you are experimenting, you are essentially just creating random groups of objects until they look decent. Next I will attempt to visually show you how this functions.

• If your <div class="background"> is 100% wide, and your text row's <div class="text-row"> sized 50% are nested inside like so, <div class="column"> <div class="text-row"> YOUR TEXT HERE </div> <div class="text-row"> YOUR TEXT HERE </div> </div> you have successfully created a layout where two columns are next to each other inside of a "parent" element. You can use this type of layout for a newspaper page with two columns of text. In this instance, your original <div class="background"> "parent" class could then become the paper background of your newspaper!
• Test what happens when you add several text row classes and changing the width. How does it look like when "background" is 50%, and "text-row" is 25%?

An extremely helpful tool you can apply here is Inspect element, which is available to you if you right click on a page. On this sidebar you can scroll through everything on the page, seeing in which columns each piece belongs, very handily highlighted for you. Here you can also click through the settings in the CSS style sheet, turning things on and off. This is an easier technique for you to experiment with instead of copy pasting pages and manually editing websites you think look interesting.

Paddings and margins
Padding and margins allows your design to breathe. Picture the way the text on the page of a book does not go all the way up to the edges. This prevents the text from being blocked by your fingers as you hold the book. This white space on the paper is called padding, and is used in many other design contexts outside of web development. Margins are the opposite, existing on the outside of an element. Use these functions liberally in order to make your texts pleasant to read. They equally dictate the overall feeling of your design.

Size, shape, image and color
What isn't an enjoyable website but a bunch of jumping <img src="frog.png"> in different sizes all over the place? Learning how to edit images is where a lot of terminology comes into play; dropping a shadow, making things clickable, rotatable, bouncy... Once you revisit these often enough, with enough iterations through "how make image big, float text on hover", you'll get pretty decent at this whole websiting thing.

5. The journey toward Web-Wizardry

This is the best part: when things finally start making a little bit of sense. This might take a while, and it might take a world of frustration. One day, however, you will start putting down your elements, understanding a bit better what functions it plays nicely with. This takes time, repetition and a whole load of tutorials. You do end up feeling like a bit of a wizard when things are no longer breaking on impact.

The end!