There is a moment in every person’s life when the universe reaches down, taps them firmly on the shoulder, and says: Listen, mate. It is time to do something remarkable.

For Our Adventurer, that moment arrived on a Tuesday. Not a dramatic Tuesday. Not a Tuesday with thunderstorms or celestial omens or a mysterious stranger in a trench coat. Just a very ordinary Tuesday in a very ordinary flat above a chip shop in the north of England, where the smell of battered cod perpetually haunted the hallways and the Wi-Fi router had a passive-aggressive habit of restarting itself every time Our Adventurer tried to watch a film.

Our Adventurer was twenty-six years old, possessed of a perfectly functional brain that had thus far been used primarily for streaming television programmes, arguing about football on the internet, and making genuinely excellent beans on toast. Three slices, the beans warmed to precisely the right temperature, a crack of black pepper on top. If beans on toast were a competitive sport, Our Adventurer would be a national champion.

But on this particular Tuesday, something was different.

A friend had just launched a website.

This might not sound like a particularly earth-shattering event. People launch websites every day. Millions of them, in fact, most of which are never seen by anyone except the person who made them, their mum, and one confused pensioner who clicked the wrong link while searching for a recipe for scones. But this particular friend’s website was different. That friend’s website sold handmade ceramic mugs, and in the six weeks since it had gone live, that friend had made eleven thousand pounds.

Eleven. Thousand. Pounds.

Our Adventurer stared at the screenshot that friend had sent over. Then stared at it again. Then put the phone down, picked it up, and stared at it a third time in case the numbers had changed.

They had not.

“How?” Our Adventurer typed back.

“WordPress,” the friend replied. “Mate, it is just WordPress. And a bit of coding. You could do it in your sleep.”

Now, Our Adventurer had heard the word WordPress before. It had floated past like background noise, the way words like “synergy” and “blockchain” and “gluten-free” floated past without ever fully landing. It was a thing that websites were made of, presumably. A thing that people who wore round glasses and had strong opinions about text editors used. It was not, Our Adventurer had always assumed, a thing for someone whose most impressive technical achievement was getting the Bluetooth speaker to connect to the phone on the first attempt.

But eleven thousand pounds.

Our Adventurer opened a browser.

Our Adventurer typed “how to build a website with WordPress.”

And just like that, without ceremony or preparation or so much as a decent warm-up stretch, the adventure began.

The World Beyond the Chip Shop

The first thing Our Adventurer discovered about the internet, when approaching it with actual intent rather than passive consumption, was that it was absolutely enormous and everyone in it appeared to know exactly what they were doing except you.

The search results were immediate and overwhelming. Millions of articles. Thousands of tutorials. YouTube videos with cheerful thumbnails showing beaming people next to laptops, promising to teach you to build a website in ten minutes, in five minutes, in the time it takes to boil a kettle. WordPress.org. WordPress.com. Themes. Plugins. Hosting. Domains. Gutenberg. Elementor. WooCommerce. PHP. MySQL. FTP. SSL certificates. Apache. Nginx. The terms cascaded down the screen like an alien language written by someone who was very confident about their own expertise and had entirely forgotten what it felt like to know nothing.

Our Adventurer closed the browser.

Our Adventurer made beans on toast.

Then, because the memory of eleven thousand pounds was not so easily silenced, Our Adventurer opened the browser again.

“Right,” Our Adventurer said to no one in particular, which was fine because no one was there to hear it. “Let us start at the very beginning.”

The very beginning, it turned out, was a place called WordPress.com, which offered to let you start a website for free. Free was a price Our Adventurer understood. Free was good. Our Adventurer clicked the button, created an account with an email address and a password that mixed upper and lower case letters because the password requirements demanded it with the energy of a suspicious bureaucrat, and was then confronted with a dashboard.

The WordPress dashboard.

It was, in the kindest possible terms, a lot.

There were menus and sub-menus and icons and notifications and a little bell in the corner and a big blue button that said “New” and panels showing things called “Quick Draft” and “Activity” and “At a Glance” and a section called “Site Health” that immediately informed Our Adventurer that the site had several items requiring attention, which seemed unfair given that the site had been in existence for approximately forty-five seconds.

Our Adventurer clicked on “Posts.”

Nothing exploded.

This was, Our Adventurer decided, a good start.

The First Mentor Appears (And Is Somewhat Cryptic)

Every great adventure has a mentor. In the old stories, it is a wizard, or a wise elder, or a mysterious figure who speaks in riddles and then disappears before you can ask a follow-up question. In Our Adventurer’s adventure, the mentor took the form of a YouTube channel called “CodeWithSomeone,” hosted by someone who filmed their tutorials in what appeared to be a very clean garage and spoke with the kind of calm certainty that suggested he had never in his life encountered a problem he could not solve in under eight minutes.

CodeWithSomeone’s first video was called “WordPress for Absolute Beginners 2024 – Everything You Need to Know.”

It was four hours and thirty-seven minutes long.

Our Adventurer watched all of it. Not in one sitting, because that would have required a level of focus Our Adventurer had not achieved since secondary school and even then only during one particularly riveting session about the causes of the First World War. But over the course of three evenings, pausing regularly to make notes in a spiral-bound notebook that had been bought for meal planning purposes and had thus far contained only two pages of meal plans before being abandoned.

The notes were, to begin with, not very illuminating:

WordPress is a CMS – Content Management System. It manages content. Makes sense.

There are themes. Themes change how things look. Like wallpaper but for websites.

There are plugins. Plugins add features. Like apps but for websites.

There is something called PHP and CodeWithSomeone mentioned it was the backbone of WordPress and then moved on very quickly.

PHP seems important. What is PHP?

The question of PHP would hover over Our Adventurer like an unanswered message for some time yet. For now, though, there were more immediate things to learn. CodeWithSomeone had talked about themes with great enthusiasm, and Our Adventurer had decided that the first practical step was choosing a theme for the blog that was going to make Our Adventurer’s fortune.

The blog, which existed at this point only as an idea and a WordPress.com account with a default site called “Our Adventurer’s Blog” in a font that looked like it had been chosen by a committee in 2009, was going to be about adventure. Specifically, about the adventure of learning things as an adult, the particular humiliation and triumph of being completely rubbish at something and then becoming less rubbish at it through sustained effort and occasional swearing.

It would, Our Adventurer thought, be relatable.

It might, Our Adventurer thought with a flutter of ambition, make eleven thousand pounds.

First, though, a theme.

The Theme Forest: A Place of Infinite Paralysis

WordPress themes are, in theory, wonderful. They are pre-built visual designs that transform your blank website into something that looks considered and professional and potentially made by someone who went to art school. There are thousands of them. Tens of thousands. Free ones and paid ones and ones that promise to be responsive and ones that claim to be SEO-optimised and ones that have names like “Astra” and “Divi” and “OceanWP” and “GeneratePress” and “Neve” which sound less like website themes and more like characters in a science fiction novel about a very stylish intergalactic cruise line.

Our Adventurer spent two days choosing a theme.

Not two days of productive, decisive exploration. Two days of clicking on themes, previewing them, thinking “that looks nice,” immediately seeing another one that also looked nice, going back to the first one, reading three reviews on a forum where people argued about whether the theme was better before or after a particular update, watching a comparison video on YouTube where a man compared eight themes against each other with the seriousness of a UN weapons inspector, and ultimately ending up on the theme Our Adventurer had been looking at on day one, which was called “Twenty Twenty-Four” because WordPress named some of its default themes after years, which was either charmingly minimal or exhaustingly uncreative depending on your perspective.

“Fine,” Our Adventurer told the screen. “You will do. You will absolutely do.”

The theme was activated. The website changed. It now looked like a real website, or at least a real website that had been emptied of all its furniture and was waiting for someone to move in.

Our Adventurer typed the first post.

It was called “Hello World,” which is what the default post is called on every new WordPress installation and which Our Adventurer decided to keep because there was something poetic about it. It was a beginning. A declaration. Hello, world. I am here. I am attempting things.

The post said: “My name is Our Adventurer and I am learning to build websites. I have no idea what I am doing but I am going to figure it out. Follow along if you want.”

Our Adventurer hit publish.

It went live.

For about thirty-seven seconds, Our Adventurer felt an extraordinary sense of accomplishment, the warm glow of creation, the digital equivalent of planting a flag on a summit. And then Our Adventurer looked at the website on a phone and noticed that the font was not quite right, and then noticed that the header image was a bit blurry, and then noticed that there was no favicon, and then noticed that the site did not have an “About” page, and then fell down the rabbit hole of things to fix, which is the true nature of websites: they are never finished, only abandoned, like a painting where you can always see one more brushstroke that needs to be made.

But that was fine.

Our Adventurer was an adventurer now.

Adventurers expect the journey to be long.

The First Dark Forest: CSS

Every adventure has its first real obstacle. The bit where the map runs out and the path gets dark and you realise that “learning to build a website” is not, in fact, a single skill but approximately forty-seven different skills all piled on top of each other like a particularly unstable game of Jenga.

For Our Adventurer, the first obstacle had a name, and that name was CSS.

CSS stands for Cascading Style Sheets, though this explanation had not helped Our Adventurer at all when first encountering it, because the name is one of those technical descriptions that sounds perfectly logical if you already know what it means and completely impenetrable if you do not. “Cascading” sounded like water falling over rocks, which was pleasant but irrelevant. “Style” made sense. “Sheets” sounded like something you put on a bed.

What CSS actually is, Our Adventurer learned through several hours of tutorials and one particularly illuminating analogy from CodeWithSomeone, who had a gift for these things, is the layer of code that tells your website how to look. HTML, which Our Adventurer had not yet encountered in any meaningful way, is the structure of a page, the skeleton. CSS is the skin and clothes. If HTML says “here is a paragraph,” CSS says “and that paragraph should be this colour, this size, with this much space around it, displayed in this font.”

This sounded manageable.

It was not manageable.

The first time Our Adventurer encountered CSS was not through deliberate study but through desperation. The blog’s header text was a slightly unpleasant shade of grey that Our Adventurer wanted to make darker. The theme customisation options did not have a colour slider for that specific text. Someone on a forum said “just add a bit of custom CSS.”

Just. As if CSS were a spice you added to a recipe, a casual pinch of something that would behave exactly as expected. Just add a bit of custom CSS. Just nip into the engine room and rewire a few things. Just.

Our Adventurer found the custom CSS box in the WordPress customiser. It was a small white text area, unassuming, blinking with a cursor that seemed to radiate mild contempt.

The forum post said to type:

.site-title {
  color: #222222;
}

Our Adventurer typed it.

Nothing happened.

Our Adventurer checked the spelling. Perfect. Our Adventurer refreshed the page. Nothing. Our Adventurer typed it again in case the first attempt had somehow been invisible. Still nothing. Our Adventurer googled “WordPress custom CSS not working” and discovered a thread with forty-seven replies, none of which agreed with each other, and one of which suggested clearing the browser cache, which Our Adventurer did not know how to do and now had to learn, and by the time Our Adventurer had cleared the cache and come back to the site, the text was a different shade of grey, which was progress of a sort, except it was now too dark and looked rather grim.

And so began Our Adventurer’s relationship with CSS.

It was, from the outset, the relationship of two people who fundamentally misunderstood each other.

The CSS Duel: Round One

If CSS were a character in this adventure, and for the purposes of making this readable it absolutely is, it would be a particularly cunning adversary. Not loud or aggressive. Not the kind of villain who announces their presence with dramatic music. CSS would be the sort of enemy who smiles pleasantly while systematically undermining everything you try to do, who makes you feel stupid in the quietest, most polite way possible.

Here is a thing CSS does that made Our Adventurer want to put the laptop in the bin:

Sometimes, when you tell CSS to do something, it ignores you. Not because you have written it wrong, though that is also a very common occurrence. No, sometimes it ignores you because another piece of CSS, from somewhere else in the vast and largely invisible stylesheet that accompanies every theme, is also trying to style the same element, and one of them has a concept called “specificity” that determines which instruction CSS decides to obey. Specificity is like a scoring system. The more specific your selector, the higher its score, the more likely CSS is to follow it.

Our Adventurer’s first CSS selector was very short and therefore very low in specificity, which meant the theme’s existing stylesheet, which was long and very specific and had been written by people who clearly had opinions, was quietly overriding everything Our Adventurer tried to do.

The solution, Our Adventurer learned from a Stack Overflow post that had six hundred and twelve upvotes and the satisfied aura of a document that had helped a great many desperate people, was to either make your selector more specific by adding extra context, or to use a thing called “!important” which is CSS for “no, listen, I really mean this, please do what I am telling you, I am not asking.”

Our Adventurer typed !important next to everything. This worked, mostly, except that it is considered extremely bad practice by the CSS community, which has opinions about these things the way stamp collectors have opinions about gum variations: deeply, specifically, and with the patience to explain them at length to anyone who will listen.

But the text was the right colour now.

Our Adventurer had won round one.

CSS had retreated, temporarily, to sharpen its specificity swords for the next encounter.

The Discovery of the Browser Inspector

Every adventurer, at some point, receives a gift that changes everything. Arthur got Excalibur. Frodo got the Ring (though that one came with considerable baggage). Our Adventurer got the browser developer tools.

This happened on a Wednesday evening when Our Adventurer was trying to adjust the spacing between paragraphs and nothing was working and the sheer wall of invisible CSS was becoming genuinely suffocating. In a moment of desperation, Our Adventurer right-clicked on the paragraph in question and selected “Inspect,” mostly out of a vague memory that this was a thing you could do.

The developer tools panel opened.

And Our Adventurer’s understanding of the web shifted, permanently and irrevocably, in the way that happens when you finally understand a joke you have been hearing for years or see the hidden image in one of those Magic Eye posters.

The browser inspector shows you exactly what CSS is being applied to any element on the page. It shows you where that CSS is coming from. It shows you what is being overridden by what, with a little strikethrough on the rules that have been beaten in the specificity tournament. You can edit the CSS live, in the browser, and see your changes instantly, without refreshing, without guessing, without the particular madness of changing code, saving, refreshing, and then trying to remember what the page looked like before.

It was, Our Adventurer thought, like being given a map after wandering in the dark for three days.

“You absolute beauty,” Our Adventurer told the developer tools, with genuine warmth.

The developer tools said nothing, because they were a browser feature and not a conversational partner, but Our Adventurer felt the sentiment was appreciated.

From this point on, the CSS battles changed character. They were still difficult. CSS still had its moments of inexplicable stubbornness, its boxes that refused to align, its margins that collapsed in ways the specification apparently permitted but common sense found baffling. But now Our Adventurer could see what was happening. Could see the rules. Could see the fight.

And seeing the fight is half of winning it.

The Box Model: A Philosophical Reckoning

There is a concept in CSS called the Box Model, which is one of the fundamental ideas that underpins how every element on every web page is laid out. Every element, the Box Model says, is a box. That box has content inside it, then padding around the content, then a border around the padding, then a margin outside the border.

This sounds very straightforward.

Our Adventurer thought it sounded very straightforward.

Our Adventurer then spent an entire Saturday afternoon in a state of moderate bewilderment because a div that was supposed to be three hundred pixels wide kept behaving as though it were three hundred and forty pixels wide, and the extra forty pixels seemed to be coming from nowhere, appearing like uninvited house guests who had read about the Box Model and were exploiting a loophole.

The loophole, Our Adventurer eventually discovered, was called “box-sizing: content-box,” which is the default behaviour in CSS, and which means that when you say a box should be three hundred pixels wide, CSS interprets that as “three hundred pixels of content, and then we will add the padding on top of that because why would the padding count, honestly.” The alternative is “box-sizing: border-box,” which makes the three hundred pixels include the padding and border, which is what every sane human being on earth would expect three hundred pixels to mean.

Why is content-box the default? This is an excellent question. The answer involves the early history of web browsers and decisions made in the 1990s by people who were doing their best at the time and could not have anticipated the profound exasperation they would cause to web developers for the next thirty years. History is full of these moments. Someone makes a decision that seems sensible at the time. The decision calcifies. Future generations inherit the calcification and have to work around it forever.

Our Adventurer added the following to the custom CSS:

*, *::before, *::after {
  box-sizing: border-box;
}

Which is the accepted fix, and which is in approximately one hundred percent of CSS projects because everyone agrees that content-box is a crime against geometry.

The div was now three hundred pixels wide.

Our Adventurer stared at the div for a moment. Three hundred pixels. Just sitting there. Behaving correctly. As though it had always been perfectly willing to behave correctly and had merely been waiting for the right instruction.

“Fine,” Our Adventurer said. “Fine. I see how it is.”

Flexbox: The Great Leveller

Having conquered the box model, Our Adventurer encountered the next great CSS battleground: layout. Specifically, the question of how to put things next to each other, or centred, or distributed evenly across a container.

Before Flexbox, this was achieved through a combination of floats and clearing and display properties and various hacks that experienced developers had accumulated over years like scar tissue. Float-based layouts worked but required understanding a set of behaviours that were not originally designed for layout at all, because floats were originally designed for floating images next to text, like a magazine layout. They got repurposed for full-page layout because there was no better option, and the workarounds accumulated.

Flexbox was better. Flexbox was designed for layout. Flexbox said: here is a container, here are items inside it, here is how they should be arranged. The direction, the alignment, the distribution of space between them, the behaviour when there are too many items for one row. All of these things were now first-class CSS concepts with clear, predictable, documented properties.

Our Adventurer set the navigation menu to display: flex and watched the menu items line up horizontally exactly as intended on the first attempt. This had never happened before with CSS. Usually there was at least one attempt where something went sideways, literally or figuratively.

The menu items were horizontally aligned. The spacing between them was even. The whole thing was perfectly centred in its container.

Our Adventurer experienced a new emotion: the CSS equivalent of a clean tackle in football, technically correct and satisfying in its precision.

Responsive Design: The Mobile Reckoning

At some point in the process of making the blog look correct on a desktop browser, Our Adventurer checked it on a phone.

This is an experience that every new web developer has, and it is universally humbling. The carefully constructed layout that looked excellent at 1440 pixels wide becomes, at 375 pixels wide, a chaotic jumble of overlapping elements, text that is too small to read without zooming, images that overflow their containers, navigation that falls apart entirely.

Responsive design is the practice of building websites that work correctly at any screen size. It is achieved primarily through CSS media queries, which are conditional rules that apply only when the screen is above or below a certain width:

@media (max-width: 768px) {
  .navigation {
    flex-direction: column;
  }
}

This rule says: when the screen is 768 pixels wide or narrower, change the navigation’s flex direction to column, which stacks the items vertically instead of horizontally. This is the essential principle of responsive design: different layouts for different screen sizes, achieved through conditional CSS rules.

Our Adventurer added media queries for the navigation, for the content width (which needed to be narrower on small screens because text that spans the full width of a phone screen is uncomfortable to read), for the header image (which needed to be taller on mobile to maintain visual impact despite the narrower width), and for the footer (which had a three-column layout on desktop that became a single-column stack on mobile).

Each media query required testing. Our Adventurer kept both a desktop browser window and the phone physically on the desk, checking each change on both. The Chrome developer tools also have a device simulation mode that shows you how the page will look at various phone and tablet sizes, which is useful for rapid iteration before reaching for the actual device.

The mobile version eventually worked. It did not look identical to the desktop version, which is correct: responsive design is not about making the desktop version fit on a phone, it is about making the content accessible at every size, which sometimes requires a substantially different layout.

CSS Grid: The Final Form

If Flexbox is the layout tool for one-dimensional arrangements (a row, or a column, but not both simultaneously), CSS Grid is the layout tool for two-dimensional arrangements. Rows and columns at the same time. The full power of grid-based layout, which print designers had been using for decades, finally available natively in CSS.

Our Adventurer did not need CSS Grid for the blog’s main layout, which was simple enough for Flexbox. But a photo gallery page, added to the blog to showcase screenshots of the website at various stages of its development, required Grid. A grid of equally-sized cells, adapting fluidly to the available width, was exactly the problem Grid was designed to solve.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

This incantation, which Our Adventurer found on a CSS-Tricks article and then spent an hour understanding properly so it could be modified rather than just copied, creates a grid where the columns are automatically created, each at least 250 pixels wide, distributing the available space equally (1fr means “one fraction of the available space”). As the screen gets wider, more columns appear. As it gets narrower, columns disappear until there is only one. The gap between cells is 1rem. No media queries needed. The layout is inherently responsive.

Our Adventurer stared at this working for a while. At the gallery automatically rearranging itself as the browser window was resized. At the elegance of a single CSS rule handling the entire responsive behaviour of a complex layout.

“That,” Our Adventurer said, “is beautiful.”

The CSS Battle: Concluded (Mostly)

By the end of the first month, Our Adventurer had, through a combination of determination, YouTube tutorials, forum posts, and an increasingly well-annotated notebook, managed to produce a blog that looked, to the untrained eye, like a real website made by someone who knew what they were doing.

The header was the right colour. The paragraphs had breathing room, because Our Adventurer had learned about line-height and had set it to 1.6, which is the correct line-height for readable text according to approximately every article about typography on the internet. The font had been changed from the default to something called “Inter,” which is a font designed by a designer named Rasmus Andersson specifically to be readable on screens. There was an About page, a contact form plugin was installed, and on mobile everything worked.

There were three blog posts. The first was “Hello World.” The second was “I Spent Two Days Choosing a Theme and I Am Not Embarrassed About This.” The third was “Everything I Know About CSS, Which Is Currently Very Little But Growing Daily.”

Seven people had read the blog, including that friend, that friend’s mum, Our Adventurer’s own mum (who had shared it on Facebook with the caption “my talented child!!!” which was kind but probably not going to drive significant traffic), and four strangers who had somehow found it through means Our Adventurer did not yet understand.

Seven readers was not eleven thousand pounds.

But it was seven more readers than zero.

And Our Adventurer had fought CSS and lived to write about it.

The adventure was just beginning. In the next chapter, Our Adventurer would encounter HTML in its full and magnificent complexity, discover that web pages are basically invisible architecture, and attempt to understand why a button sometimes just… is not where it is supposed to be.

Somewhere in the north of England, in a flat above a chip shop, a person who had started this month knowing nothing about web development had learned how to make a box the right size, lay out a navigation menu with Flexbox, and create a responsive photo gallery with a single CSS Grid rule.

This is, in the grand scheme of adventuring, quite something.

The road ahead was long. There were more enemies to face. PHP lurked somewhere in the distance, large and complicated and smelling faintly of server logs. JavaScript was gathering its forces. The full mystery of WordPress’s inner workings had not yet revealed itself.

But Our Adventurer had the notebook. Our Adventurer had the browser inspector. Our Adventurer had the peculiarly powerful motivation of someone who has already started and is therefore committed to seeing it through, because the alternative is to have spent a month learning things that did not result in anything, which is the most deflating possible outcome and not one Our Adventurer was prepared to accept.

Forward, then.

Onward into the code.

One box, correctly sized, at a time.