Not all games require huge teams of coders and many years of development to be a success. Smash-hit word puzzle game Wordle was put together by Josh Wardle for his partner Palak Shah in a relatively quick period of time, and despite its simplicity and lack of extras (like a phone app), its meteoric rise was enough to get the game acquired by the New York Times.
If you have your own idea for a basic but addictive game that can capture the world’s attention and net you a seven-figure payout, coding a straightforward web app like Wordle is entirely possible.
The basic framework of the original Wordle site, like every website, was coded in HTML, HyperText Markup Language. It’s the code that the internet is built on, telling your browser what to put where when you load up a webpage. The site you’re reading now is coded in HTML, serving up not just the content but the instructions about how to display that content, from menu positions to font sizes.
Alongside HTML there’s CSS or Cascading Style Sheets: It’s a more modern add-on to HTML that makes it easier to control formatting on a webpage, whether that’s the formatting of an image or a block of text. CSS means that if you have a sprawling website with multiple pages, you can set the fonts and colours for the site as a whole, rather than having to code each page individually.
If you want to build websites properly, you need to learn HTML or CSS — although plenty of services like Squarespace will now let you design pages without knowing any code. These services let you click and drag and drop page elements through a user-friendly interface, and then take care of the HTML and CSS in the background.
For a website to be fully interactive the way Wordle is, you need JavaScript, which turns static HTML and CSS pages into pages that you can interact with, whether that’s a search box or an embedded toolbar. JavaScript can handle video, render 2D and 3D images, save information entered by the user, load up information from a database (very useful with Wordle), carry out calculations, run certain code in response to input from the user, display menus on screen, and plenty more besides.
As Wardle explained to TechCrunch, Wordle was written in JavaScript that downloads in the browser as soon as the game is loaded, so it can even be played offline once that initial download is complete. Modern browsers can understand and execute JavaScript, which in this instance means loading up a word from a database, identifying inputs from the user, and giving feedback about those inputs.
Wardle himself admits that the game wasn’t coded in a particularly complex way, which is why it was possible to download Wordle in its entire, pre-NYT form, complete with all the words in its database. It was also possible to see upcoming solutions just by studying the source code of the Wordle website.
So, how do you build something like Wordle yourself? You will need to learn some code, but you don’t need to know a huge amount of HTML, CSS and JavaScript to make something on the level of Wordle. As explained at Codecademy, one of the programming techniques used is a for loop, checking whether the letters you’ve entered are in the solution and displaying coloured squares in response.
Codecademy is one of the places you can learn HTML, CSS, JavaScript, and several other web coding languages for free. The exercises are well organised and laid out, and you’re always learning by doing, right in your browser: You’ll be shown how to do something and then you actually get to do it right away, with feedback as you go. More advanced features and tutorials require a subscription, but there’s lots to explore for free.
Treehouse is a more comprehensive upgrade on Codecademy, and you’ll have to pay from $US25 ($35) a month to use it (though a free trial is available). There’s no doubt it’s a hugely professional and effective resource for learning to code HTML, CSS, JavaScript, and much more, but it goes way beyond what you need to build something like Wordle. It’s perhaps something to consider if you want to do more as a programmer.
At the other end of the scale to Treehouse is Dash: It only really covers the basics of HTML, CSS, and JavaScript, but it’s free and fun to use, and it’s particularly good for beginners who are just getting started. Everything is handled right inside your browser, and like Codecademy you can learn as you experiment with what these coding languages are capable of when it comes to building websites.
That’s by no means an exhaustive list of places where you can learn to code HTML, CSS and JavaScript, but it should be enough to get you started if you’ve got an idea for something like Wordle that you want to build.
Comments