Learn to code with these interactive tools.

🧵
1. JSRobot (by @reaalkhalil)

Learn JavaScript by playing a platform game: Control a robot to collect coins, avoid obstacles and reach the flag at the end of the level.

Link: lab.reaal.me/jsrobot/
2. CodeCombat (@CodeCombat)

Learn typed code through a programming game. Learn Python, JavaScript, and HTML as you solve puzzles and learn to make your own coding games and websites.

Link: codecombat.com
3. jsdares (@jsdares)

Make your own games by learning JavaScript programming!

Link: jsdares.com
4. Coding Games (@CodinGame)

CodinGame is a challenge-based training platform for programmers where you can play with the hottest programming topics. Solve games, code AI bots, learn from your peers, have fun.

Link: codingame.com/start
5. Crunchzilla

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

Link: crunchzilla.com
6. Screeps (@ScreepsGame)

A strategy sandbox MMO game with a persistent open world where you play by writing JavaScript to control your units. They live within the game and operate autonomously even while you are offline.

Link: screeps.com
7. CSS Diner (by @flukeout)

A fun game to help you learn and practice CSS selectors.

Link: flukeout.github.io
8. Mastery Games (by @geddski)

Learn Flexbox and CSS Grid once and for all in the most fun way possible.

Link: mastery.games
9. Codepip (@playcodepip)

Codepip's coding games, including Flexbox Froggy, Grid Garden, CSS Surgeon, Code Crunchers, and Nester.

Link: codepip.com/games/
10. CSS Battle (@css_battle)

Use your CSS skills to replicate targets with the smallest possible code.

Link: cssbattle.dev
11. Interactive Vim tutorial

Learn what Vim is about without hassle.

Link: openvim.com
12. Coding Fantasy (by @nickbulljs)

Collection of coding games to learn HTML, CSS and JavaScript.

Link: codingfantasy.com/games
13. Knights of the Flexbox Table (by @beyondcode)

Learn and remember Flexbox with Tailwind CSS to overcome your cheatsheet.

Link: knightsoftheflexboxtable.com
14. CSS Ruler (by @katydecorah)

Explore CSS lengths.

Link: katydecorah.com/css-ruler/
15. TypeScript Exercises (by @mdevils)

A set of interactive TypeScript exercises.

Link: typescript-exercises.github.io
16. Design Patterns Game

A game to test your familiarity with the design patterns implemented in JavaScript.

Link: designpatternsgame.com
17. React tutorial (by @JoubranJad)

React Tutorial is an easy, interactive way to learn & practice modern React online. Understand how React works not just how to build with React.

Link: react-tutorial.app
18. Promisees (by @nzgb)

Promise visualization playground for the adventurous.

Link: bevacqua.github.io/promisees/
19. Git Branching (by @petermcottle)

An interactive Git visualization tool to educate and challenge.

Link: learngitbranching.js.org
20. Select Star SQL

An interactive SQL book.

Link: selectstarsql.com
21. Regex 101 (@regex101)

Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java. Features a regex quiz & library.

Link: regex101.com
22. Regex Crossword (@RegexCrossword)

A crossword puzzle game using regular expressions. Earn achievements completing puzzle challenges. Easy tutorials for people new to regular expressions.

Link: regexcrossword.com
23. RegexOne (@RegexOne)

RegexOne provides a set of interactive lessons and exercises to help you learn regular expressions.

Link: regexone.com
Did you find this useful?

Retweet the 1st tweet and help others discover it.

Happy coding!

• • •

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

Keep Current with Marko ⚡ Denic

Marko ⚡ Denic 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 @denicmarko

3 Nov
Useful websites for web developers.

🧵
1. AI Image Upscaler (by @Steven_Strange_)

Upscale and enhance your image by using the latest AI technology. Support batch process.

Link: imgupscaler.com
2. Icons8 (@icons_8)

Download design elements for free: icons, photos, vector illustrations, and music for your videos.

Link: icons8.com
Read 9 tweets
1 Nov
Free certifications for developers.

🧵
1. FreeCodeCamp (by @freecodecamp)

10 certifications available:

~ Responsive Web Design
~ JavaScript Algorithms and Data Structures
~ Front End Libraries
~ Machine Learning
~ Data Visualization
...

Link: freecodecamp.org/learn/
2. Fundamentals of digital marketing (by @Google)

There are 26 modules to explore, all created by Google trainers, packed full of practical exercises and real-world examples to help you turn knowledge into action.

Link: learndigital.withgoogle.com/digitalgarage/…
Read 9 tweets
29 Oct
JavaScript tips you won't see in most tutorials.

🧵
1. Copy to clipboard

You can use the `Clipboard` API to create the “Copy to clipboard” functionality: ```javascript function copyToClipboard(text) {   navigator.c
2. "Go back" button

Use the `history.back()` to create a “Go Back” button. The image contains a code block.  ```html <button onclick=&q
Read 14 tweets
22 Oct
Useful websites for developers.

🧵
1. Erase bg (@erase_bg)

Remove background from images and download high-resolution images for free. You can also edit and resize images as you like.

Link: erase.bg
2. vscode.dev (@code)

When you go to vscode.dev, you'll be presented with a lightweight version of VS Code running fully in the browser. No install required.

Link: vscode.dev
Read 8 tweets
20 Oct
CSS tips you won't see in most tutorials.

🧵
1. When you work with transparent images you can use the `drop-shadow()` filter function to create a shadow on the image's content, instead of `box-shadow` property which creates a rectangular shadow behind an element's entire box:

filter: drop-shadow(2px 4px 8px #585858); Two images shown. One with rectangular shadow around whole i
2. Center anything

Easily center anything, horizontally and vertically, with 3 lines of CSS: ```css .center {   display: flex;   align-items: center;   j
Read 18 tweets
17 Oct
Useful websites for web developers.

🧵
1. Mockuper (by Enrico Toniato)

The free mockups generator to create custom images to show your awesome projects.

Link: mockuper.net
2. Poet (by @reviews_experts)

Capture and share Twitter posts as beautiful images.

Link: poet.so
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

Thank you for your support!

Follow Us on Twitter!

:(