As AI tools improve their ability to write code, the skills to create apps and websites are trickling down to idiots like me.
I’ve never been a professional developer, but I have been building websites since I was 10 years old (most of the first ones were terrible) so the opportunity to super-charge my basic knowledge with the collective wisdom of ALL THE EXPERTS is a dream.
Ever since my first ‘proper’ job, I’ve been scrappily piecing together code in HTML, CSS, JavaScript (and even a bit of PHP) to experiment and make things happen.
So, I’ve recently been working with colleagues in editorial teams on ‘vibe coding’ – using AI tools to write code they can then add to pages; whether through AB testing tools or a functionality of our CMS that allows limited code to be added onto a page in chunks.
Doing this, the biggest thing I’ve learned is not to assume knowledge about how the web works. Not everyone has had the same time, access or (more likely) interest in building things for websites.
Here are three foundational things I think everyone could benefit from understanding before they get started:
The internet is basically just a system of requests and responses. One computer asks another to send it something…the other responds. This is the same for webpages…you enter a URL, your browser asks for the page, the internet responds with code that your browser then interprets and turns into something visual.
In spite of all the complicated systems and code doing stuff to make a website, everything you see ends up as just three types of code. HTML, CSS and JavaScript. Learning more about how these work – especially page structure like tags, IDs and classes are super useful to giving yourself the power to change things.
This is important because websites feel overwhelming. People can be put off thinking they could never change a font colour, add more infographics, make their own this or that. But all you really need is a route to publishing any of these three building-block types of code onto a website and there’s more chance you’ll succeed than not.
Classes and IDs are ways of giving bits of your page names that you can use to identify them. And you can use those names to make them do different things like: change all ‘Ben’ heading to be green; or, when a user clicks on a ‘Ben’ link, pop up an alert. Or…something meaningful and useful.
Bringing it all together
HTML defines the structure of a page. CSS controls how it looks. JavaScript adds interactivity.
Classes and IDs are used to target elements of a page. CSS can tell a certain class or ID to look a certain way. And it ‘cascades’, so you could also make it say “All Ben headings contained in a box called ‘Thomas’ should be green”.
JavaScript can also target those elements to do things when a certain element is clicked. That could be something visual to users or something invisible, like passing information to an analytics tool.
So what?
None of this is essential for vibe coding, and you don’t need any of it to get started. But at some point your vibe-coded thing will do something unexpected, and that’s when one of these ideas will suddenly make sense.
This list is a short collection of the things I wish I’d explained earlier when I started doing this for real. You can read about what happened when I did. And if you try any of this, I’d genuinely like to know how it goes.