Learn JavaScript Coding by Playing Games 🎮

A thread of 10 games 🧵
1️⃣ CheckiO

Teachers all over the world use CheckiO as an extra-tool during their courses so that students could practice their skills when learning new material.

checkio.org
2️⃣ JSRobot

Learn JavaScript by playing a platform game

lab.reaal.me/jsrobot/
3️⃣ JSDares

You learn programming by completing dares. These are short puzzles in which you have to copy the example, in as few lines of code as possible.

jsdares.com
4️⃣ Coding Game

CodinGame is a challenge-based training platform for programmers where you can improve your coding skills with fun exercises (25+ languages supported)

codingame.com/start
5️⃣ Robocode

Robocode is a programming game, where the goal is to develop a robot battle tank to battle against other tanks in Java or .NET. The robot battles are running in real-time and on-screen.

robocode.sourceforge.io
6️⃣ Code Combat

CodeCombat is an HTML5 role-playing game (RPG) that teaches you fundamental programming concepts. CodeCombat supports 5 programming languages.

codecombat.com
7️⃣ Screeps

Screeps is a fun game and has a unique angle to it.

screeps.com
8️⃣ Untrusted

The game presents you with a roguelike-like playing environment and a console window with the JavaScript code generating each level.

alexnisnevich.github.io/untrusted/
9️⃣ Crunchzilla

Crunchzilla offers interactive tutorials that get people excited about programming. Play with code, build, and learn.

crunchzilla.com
1️⃣0️⃣ Elevator Saga

This is a game of programming!
Your task is to program the movement of elevators, by writing a program in JavaScript.

play.elevatorsaga.com
Thanks for reading this thread ❤️

If you found useful, please retweet the first one ☺️

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Suprabha

Suprabha Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @suprabhasupi

10 Jul
Most important tools for web developer which is really important for beginners 👇

1️⃣ Prettier
2️⃣ ESLint
3️⃣ Testing Library (JEST)
4️⃣ Webpack
5️⃣ Babel

A thread 🧵
Understand Prettier and ESlint in react

blog.suprabha.me/54-learn-to-co…
Read 4 tweets
10 Jul
Top best CSS generators for web developer 🔥

🧵
1️⃣ GetWaves

A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!

getwaves.io
2️⃣ Fancy Border Radius Generator

A visual generator to build organic looking shapes with the help of CSS3 border-​radius property.

9elements.github.io/fancy-border-r…
Read 12 tweets
9 Jul
Form library for React 🔥

1️⃣ Formik
2️⃣ React Hook Form
3️⃣ Informed
4️⃣ React Form

A thread 🧵
1️⃣ Formik 💁

Formik is the world's most popular open source form library for React and React Native.

- good docs with examples
- medium package size
- supports only controlled components

formik.org
2️⃣ React Hook Form 🗒️

React hook for form validation without the hassle.

- uses react hooks API
- good performance / minimum re-render
- small package size
- uses uncontrolled components and refs to register fields

react-hook-form.com
Read 6 tweets
4 Jul
CSS :valid & :invalid pseudo elements 🔥

🧵
1️⃣ :valid

The :valid CSS pseudo-class represents any <input> or other <form> element whose contents validate successfully.

2️⃣ :invalid

The :invalid selector allows you to select <input> elements that do not contain valid content,
Checkout the codepen here👇

codepen.io/suprabhasupi/p…
Read 4 tweets
4 Jul
Found Amazing 4 Websites for Web Developers 👇

🧵
1️⃣ Boring Avatars 💁‍♀️

Boring avatars is a tiny JavaScript React library that generates custom, SVG-​based, round avatars from any username and color palette.

boringavatars.com
2️⃣ The Button Cheatsheet 🧾

You can find Button actions; Common button styles; Button colours & styling; Button states and feedback; Button labelling; Touch targets

buttoncheatsheet.com
Read 6 tweets
3 Jul
Algorithms you should know as developer 👇

🧵
1️⃣ Sorting 🔥

Sorting Algorithms, Arrange the items of a list on order

➡️ Bubble Sort
➡️ Merge Sort
➡️ Quick Sort
➡️ Heap Sort
2️⃣ Search 🧐

Find a element in a data set.

➡️ Binary Search
➡️ Breath First Search
Read 8 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(