Building a website from the ground up can be rewarding. However, learning to create one can seem daunting at first. You’ll need to know HTML, CSS, and JavaScript. You should also have some knowledge of interface design to create easier navigation of your site.
Many people assume learning these skills would require extensive code reading, watching technical tutorials on YouTube, or taking courses on each subject. All of these methods of learning are effective, but many people, including myself, find that it’s hard to engage with them. This is due to the lack of hands-on practice with these methods.
Which brings me to propose a unique way of learning that can make it more interactive, “gamifying” subjects. Playing games to practice different subjects, such as design and programming, can help with memorization. It can also boost preparedness when you apply your knowledge to real-world scenarios. That’s why I’m exploring five games that may help you gain knowledge of the skills needed to build websites.
5 Go on Adventures with Codédex!
One of the first things that you’ll need to learn to build websites is the programming language, HTML, which stands for “HyperText Markup Language.” This language forms the way that text, images, and other media are laid out digitally. HTML is usually best presented with the assistance of CSS and JavaScript code, which I’ll be covering later in this article.
Although Codédex covers many languages, it’s one of the few resources that teaches HTML programming in the form of a game. In this program, you’ll play various games called “quests” for EXP. The quests have you write code on a script in the center of the screen, with a blurb to describe the exercise’s concept to the left of the code. On the right is a terminal that will display the result of the quest, which is the output of the code you have written. With each quest you complete successfully, the more EXP you will gain that can be used to unlock more advanced quests of more complex concepts of HTML.
I found the layout of this game to be inviting as the three elements of “explanation”, “script”, and “output” are all on the same screen. I also enjoy the laid-back approach to learning, as you can gain EXP at your own pace without any “punishments” given to your character for not writing the code correctly. This forgiving nature somewhat gives Codédex a “cozy” feel to it, as you can take your time learning the subjects within it.
4 Designercize Gives You Fun Design Challenges
“Design” is one of the most important considerations to have while building a website. Every popular website has its own unique look to it. For example, on Google it’s simple to find information in the search engine from the basic text layout of their results, with headers being larger than their entries’ description text. The way that you design what your users see matters the most when you want more user retention on your site.
Designercize is not an online game that you interact with like the other entries on this list; however, it is designed to be a template to create games/practical exercises from. The site generates challenges that follow specifications, such as difficulty and time, to prompt you to design webpages on specific topics to help different demographics. The “design”, “for”, and “to help” entries are all randomly generated, which makes it less predictable to know what you will get next.
The simple design of Designercize can be applied in many situations. It can be self-practice of your own skills, a challenge between friends, or even a challenge to give to prospective candidates for hiring. The open-ended nature of its use makes me highly recommend this application for both beginners and experts in website design.
3 Learn how not to design a Website with User Inyerface
User Interface (UI) is complex, but it seems deceptively simple. UI is the design of how users interact with an application. Where to click, what is there to look at, how things move, and many more action-based questions are covered in this field. In my opinion, this is the hardest thing to learn in web development due to how unpredictable users can be.
Despite unpredictability, there are several things that you should avoid in UI design that can annoy users. Many examples of such elements are showcased in the game User Inyerface. This digital experiment appears broken at first, but as you navigate through the website you will learn that its “bugs” are by design. Clickable buttons that do not do anything, random pop-ups that take you away from the task you’re doing, and drop-down menus with terrible navigation are just a few examples of the challenges the website has for you.
As much as this site pains me, I highly recommend experiencing it at least once to understand what not to do while developing your site’s UI. The things that you struggle to do in this game should be remembered when you implement similar features to your own websites. Through frustration, User Inyerface teaches you why having functional UI will make your website more pleasant for users.
2 Formulate your JavaScript Fluency with Elevator Saga
Going back to the programming languages used in web development, let’s talk about what JavaScript (JS) is. JS is used to develop the behavior of dynamic content on websites such as moving text, videos, etc. Due to its complicated syntax and the amount of information required to know without internet assistance, this language is considered to be the hardest to learn of the web development trio.
The challenge to “gamify” this hard-to-learn language was taken on by the developers of Elevator Saga. Their game invites you to find solutions to questions that follow the general structure of: “Transport X people in X seconds or less” in a visual elevator simulation. The only way to solve these questions is by writing JS code. This does require some syntax knowledge to play. Do not fear however, as the game provides you with the program’s base code and an API that provides helpful commands to consider using.
What I like the most about Elevator Saga is the community that has formed for it. On the game’s forums, other users share their solutions to the questions and try to find the most efficient way to complete their prompts. I find myself having more fun seeing what others have been able to discover in this game than programming my own solutions.
1 Build a Story using Code in Coding Fantasy
To end this article, I wanted to take a look into CSS, which stands for “Cascading Style Sheets.” CSS is used to style the appearance of HTML code on web pages. This enables you to make them look cleaner and customize the appearance of the text on web pages. It’s easy to learn and is considered a cornerstone of the development of the World Wide Web.
To help learn CSS, I highly recommend some of the adventure games from Coding Fantasy. In their Roleplaying games (RPG), you write CSS code to move your party to move across a tile map and attack enemies. In Flex Box Adventure, you play King Arthur who is fighting against a trio of evil brothers. While in their other CSS game, Grid Attack, you go on a noble quest to save the world. Both games have you use “the powers of the CSS Grid” to defeat foes and accomplish missions.
These cute adventure games are a fun way to learn CSS through the genre of RPG. Its easy approach comes from the site’s intended audience of younger learners, but I believe Coding Fantasy can still be played by older people wanting to learn how to develop websites in a nostalgic way.
Building websites is very useful for personal and professional growth. However, developing these skills can be difficult, especially for those who do not have a background in programming. But hopefully, trying out these five games can make the process of learning easier and more fun!
