Fun Gamified Ways I Learned HTML and CSS as a Beginner

As a data scientist, I regularly scrape websites as part of my job, but I have no idea how to design one.

I tried learning HTML and CSS a few years ago using the same way most people do: going through tutorial hell on websites like Codeacademy. It’s honestly a great starting place if you haven’t seen or tried coding in HTML or CSS before, but the main struggle I experienced was trying to get out of it and starting my own projects.

After searching the internet to find a good middle area, I found a few free websites that gamified my learning journey and made it alot more fun!

👾 Flexbox Froggy

Flexbox Froggy is a cute frog game where you help a frog reach the lily pad it wants to get to by manipulating the CSS code.

This game teaches the flexbox style properties in an interesting and easy to understand way for complete beginners and the game style is honestly so cute! As a fan of cozy games, this was right up my alley as a cute and fun short game.

There’s only 24 rounds for the whole game and it does only touch the fundamentals aspect of it, but luckily they also have a sequel game called Flexbox Froggy Pro! You will need to create a free account in Codepip to play the sequel game unlike Flexbox Froggy but there are also quite a few other coding games that you can find and play once you have your account all set up. Personally, I haven’t tried the other games yet but based on what I can see, if you liked the Flexbox Froggy game, you’d most likely enjoy the other games too!

Level 1 (Flexbox Froggy // Example):

Solution:

#pond {
    display: flex;
    justify-content: flex-end;
}

👾 CSSBattle

CSSBattle is a CSS playground where you can get daily challenges to try and replicate the image they’ve given you using the least amount of code and as similar to the original design using purely HTML and CSS.

For every challenge, your score will be calculated and shown at the bottom of your submission. There is also a leaderboard for each challenge so that you can see where you rank against others. This also inspires and challenges people to code using only a single <div> element for the whole design to keep the code short and efficient.

Don’t be mistaken if you think you can just add in a <img> in there and call it done 😮‍💨 It wouldn’t be a challenge if it were that easy.

Here are a few daily challenges I completed in April:

Alright, I did miss my daily challenge on April 10, but this was the only way I could get a nice screenshot of some of the work I’ve done this month. Let’s pretend it’s completed, thank you ❤️

If you don’t like the daily challenge or feel like going for another pattern, CSSBattle also has ‘Battles’, which are essentially themed challenges. I love the movie characters and the anime battles!

Unlike the daily challenges where you can only submit for the challenge of the day, you can play and submit your code for any previous battles with just a free account.

As a recap, I’ve been learning how to manipulate HTML and CSS code (with more focus on CSS) using websites like CSSBattle and Flexbox Froggy. It allowed me to code outside my comfort zone and learned a lot faster through practical experience!

Here’s also a spongebob I made using what I learned purely with HTML and CSS. This is something I wouldn’t know even where to start two months ago - the improvement!