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).
And, 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 four 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.
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.
Websites and applications can pass information to analytics tools, which help measure what people are doing on them. There are some really useful, basic metrics available out of the box but most analytics tools will also allow your website to send custom ‘event’ information when something happens so you can track when someone clicks a link or submits a form or buys something.
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’…you can dive right in with any number of the countless tools out there and make something great knowing all or none of this stuff. But, as I’ve been working with editorial teams to try and make something happen on a live website, these are the core things I’ve noticed can be the ‘walk before you can run’ stumbling points.
Think about them, bear them in mind…they might make lots of sense or none when you get started. Eventually, they might click when you weren’t expecting it.