#314: Front-End Games on CSS and JavaScript

With front-end games and challenges in CSS and JavaScript to take your coding skills to the next level. Issue #314 August 17, 2021 View in the browser 💨

Smashing Newsletter

Dobry dzień Smashing Friends,

We all learn in different ways. Some of us might prefer articles, tutorials and documentation; others learn better from video courses and — ahem — online workshops. But what about trying something entirely different for a change? What about learning CSS/JavaScript from CSS/JavaScript games?

In this newsletter, we feature some of the front-end games that will help you become better at your craft while also having fun along the way.

As a quick side note, if you are interested in accessibility, we are running a free accessibility workshop on How to Find, Fix and Prevent Accessibility Errors with our friends at Deque.

Online Workshop on How To Find, Fix and Prevent Accessibility Issues
Join our free online workshop on how to find and fix accessibility issues.

And if you are into Next.js, our friends over at Netlify run a free virtual event on Architecting With Next.js showcasing best practices for running Next.js in production.

And if you do prefer to read articles after all, here’s a weekly update of our popular articles last week:

Happy learning, everyone!
— Vitaly (@smashingmag)


1. JavaScript Games For Beginners And Advanced

Do you want to learn JavaScript but you don’t know where to start? Or maybe you already know your way around JavaScript and want to get better and more efficient at writing code? Then one of the following games will have you covered.

JSRobot

First off: JSRobot. Inspired by classic platform games, your mission in this game is to use JavaScript to control a robot to collect coins, avoid obstacles, and reach the flag at the end of the level. Great for beginners.

Elevator Saga is a little game to put your existing knowledge to the test. You’ll write a program that controls the movement of elevators to transport people in the most efficient way possible. But beware, the challenges can get quite tricky as you proceed.

Also aimed at more advanced JavaScript developers is the open-source sandbox game Screeps. To control a colony in a world filled by you and fellow players, you’ll be programming your unit’s AI with JavaScript. The programmable world lives a continuous life 24/7 in real-time even when you’re offline. And if you want to dig even deeper, the game’s engine is available on GitHub to tinker with.(cm)


2. Learn Flexbox The Fun Way

What do frogs, zombies, and towers have in common? Well, they are your best friends when learning Flexbox. Because, let’s be honest: Flexbox is very powerful once you understand it, but getting there can be quite hard. So let’s make learning a bit more fun.

Flexbox Froggy

In the game Flexbox Froggy, you help a little frog and its friends find their lilypads by, you guessed it, writing CSS. The game consists of 24 levels that take you from the very basics of Flexbox positioning to more advanced challenges.

If zombies are more down your alley, Flexbox Zombies is for you. Each section of the game unravels part of the plot, introduces a new Flexbox concept, and presents so-called “zombie survival challenges” that help you solidify your new skills.

Last but not least, you might also want to take a look at Flexbox Defense. Inspired by tower defense games, your job is to stop incoming enemies from getting past your defenses — by positioning your towers with CSS, of course. All three games run right in your browser. Happy flexbox’ing! (cm)


From our sponsor

What If Your Project Management Tool Was Fast And Intuitive? Try Clubhouse.io.

What if Your Project Management Tool Was Fast and Intuitive? Try Clubhouse.io.
Imagine how much more you could get done if your project management tools didn't make you sigh. Clubhouse is the ideal solution for task management, bug tracking, iteration planning, and reporting. Delight the scrum gods and give us a try. Try it for free →


3. CSS Grid, CSS Selectors, And Other Competitions

Do you want to take your CSS skills to the next level? These three little games help you do just that — quite literally. In Grid Garden, you’ll become the proud owner of a carrot garden. 28 levels are waiting for you in which you need to take good care of your crop with the help of CSS grid.

Grid Garden

If you feel your CSS selectors skills could need some polishing, CSS Diner is for you. Plates, apples, pickles — in each of the 32 challenges, you’ll need to use a different CSS selector to select specific items on a table.

And if you’re up for some competition, be sure to also check out CSSBattle. In the CSS golfing game, you’ll be using your CSS skills to visually replicate targets with smallest possible code to get to the top of the leaderboard. Each of the challenges is dedicated to a specific topic like visibility, display, transition, or z-index. (cm)


4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

For example, we have Rémi Parmentier’s workshop on building modern HTML emails. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming front-end & design workshops.


5. A Tale Of Service Workers And Dragons

Offline support, performance improvements, background sync, caching — Service Workers enable all sorts of amazing things. However, there are quite some pitfalls you might run into when working on a PWA. Pitfalls, or let’s call them “dragons”, shall we? Because these are the nasty creatures that you’ll need to battle in the game Service Workies.

Service Workies

Your companion on the adventure is Kolohe, a Service Worker himself, who is threatened by dragons. Together with him, you’ll level up your skills and learn to battle those beasts that make a Service Worker’s, and lastly a progressive web app’s, existence unnecessary hard. A fantastic way to get a step closer to Service Worker mastery. (cm)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


6. A Gaming Community For Advanced Developers

You code and play and get noticed by potential employers at the same time. What might sound to be too good to be true is actually part of the concept of CodinGame.

CodinGame

The platform offers free games and challenges for more than 25 languages and a community where like-minded coding enthusiasts can meet, compete, ask for help, and learn from each other — in multiplayer programming games and international contests. To get noticed by companies as you play and strengthen your developer profile, you can choose who can see your profile and set your conditions. Great for advanced developers! (cm)


7. Achieve Mastery Through Challenge

Some of us like to take on increasingly difficult challenges to get better at something, others prefer training through repetition and by improving their solutions. Codewars caters to both learning types. The platform helps you improve your skills by solving real programming tasks of many types and difficulty levels and for a huge variety of languages, including JavaScript, TypeScript, Python, Ruby, Go, and many more.

Codewars

What makes Codewars special is the sense of community on which it is based: Users are authoring the challenges, while at the same time helping others with their solutions and giving constructive feedback, so that on your way to mastery, you’ll be a learner and a teacher at the same time. (cm)


8. New On Smashing Job Board


10. New Smashing Articles


That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!


This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#313: Open-Source Icons, Fonts and Goodies

Tuesday, August 10, 2021

With free icons, gradients, and illustrations to give your project the finishing touch. Issue #313 • August 10, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing Friends, I remember

#312: Next.js Boilerplates and Guides

Tuesday, August 3, 2021

With Next.js boilerplates and tutorials to help you get started or boost your existing Next.js setup. Issue #312 • August 3, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing Friends,

#311: CSS Global Resets, Gradients and Transitions

Tuesday, July 27, 2021

Transitioning CSS gradients, CSS charts, CSS scrollbar gutters, whimsical 3D CSS Button, CSS clamp() generator and CSS margin collapsing.Issue #311 • July 27, 2021 • View in the browser 💨 Smashing

#310: Interface Design Patterns

Tuesday, July 20, 2021

With interface design components: from buttons and text fields to command palette interfaces and signup confirmation emails. Issue #310 • July 20, 2021 • View in the browser 💨 Smashing Newsletter Nǐ

#309: Web Performance Optimization

Tuesday, July 13, 2021

With smashing new design, partial hydration, third-party scripts, taming CSS with styled components and system fonts.Issue #309 • July 13, 2021 • View in the browser 💨 Smashing Newsletter Salut

You Might Also Like

NBA Shot Data, Inspirational Websites, Table of Contents, Navigation Redesign, AI Vocabulary

Friday, March 29, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 29 2024 A long read about NBA shot data aweebitofmapping.

The Design World’s 19 Most Beloved Travel Destinations

Thursday, March 28, 2024

Plus, designers share the AD projects that still inspire View in your browser | Update your preferences Architectural Digest AD PRO Logo WILD, WHIMSICAL MEADOW GARDENS ARE THE LANDSCAPE TREND TO WATCH

How Balsamiq uses AI

Thursday, March 28, 2024

A peek into our ChatGPT conversations ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.