Learn programming by playing games๐ŸŽฎ

THREAD๐Ÿงต๐Ÿ‘‡
๐Ÿ“Œ Grid Garden (CSS)

๐Ÿ”น A game for learning CSS grid layout in 28 different levels

๐Ÿ”— cssgridgarden.com
๐Ÿ“Œ CodeCombat (Python, JS)

๐Ÿ”น The most engaging way to learn Python or JavaScript by writing small code snippets

๐Ÿ”— codecombat.com
๐Ÿ“Œ Unfold (CSS)

๐Ÿ”น Not a kind of game but here you will learn all about transform property in a more interactive manner

๐Ÿ”— rupl.github.io/unfold/
๐Ÿ“Œ Ruby Warrior (Ruby)

๐Ÿ”น If you want to learn Ruby, then Ruby Warrior is the game for you. There are beginner and intermediate tracks to suit your skill level

๐Ÿ”— bloc.io/ruby-warrior#/
๐Ÿ“Œ CodinGame (Almost all)

๐Ÿ”น One of the great things about CodinGame is that you can play with friends or colleagues, and also enter international coding competitions. It supports 25 programming languages

๐Ÿ”— codingame.com/start
๐Ÿ“Œ Screeps (JavaScript)

๐Ÿ”น Learn to code JavaScript by playing game

๐Ÿ”— screeps.com
๐Ÿ“Œ Flexbox Defense (CSS)

๐Ÿ”น It covers the flex properties align-items, justify-content, flex-direction, align-self and order in 12 different levels

๐Ÿ”— flexboxdefense.com
๐Ÿ“Œ CodeMonkey

๐Ÿ”น Itโ€™s aimed at coding for kids, but itโ€™s definitely fun for adults, too๐Ÿ˜ I enjoyed it a lot

๐Ÿ”— codemonkey.com
๐Ÿ“Œ CSS Diner (CSS)

๐Ÿ”น In this game you will learn all about CSS selectors. It contains 32 levels. Try to master them

๐Ÿ”— flukeout.github.io
๐Ÿ“Œ Check IO (Python, TS)

๐Ÿ”น Coding games for beginners and advanced programmers where you can improve your coding skills by solving engaging challenges and fun task using Python and TypeScript

๐Ÿ”— checkio.org
๐Ÿ“Œ Flexbox froggy (CSS)

๐Ÿ”น In this game you will learn all about flexbox by writing small code snippet. Definitely check it out

๐Ÿ”— flexboxfroggy.com
๐Ÿ“Œ Untrusted (JavaScript)

๐Ÿ”น Untrusted is a JavaScript adventure game that tests your JavaScript skills to solve problems

๐Ÿ”— alexnisnevich.github.io/untrusted/
๐Ÿ“Œ Cyber-dojo (Almost all)

๐Ÿ”น Practice your JavaScript, Java, Python, PHP, Ruby, etc skills here on the virtual space

๐Ÿ”— cyber-dojo.org/creator/home
Learn by playing is better than learn by doing ๐Ÿ˜‰โœจ

โ€ข โ€ข โ€ข

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

Keep Current with Pratham ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿš€

Pratham ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿš€ 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 @Prathkum

20 Feb
A quick beginner's guide to CSS Media Queries

THREAD๐Ÿงต
Media queries plays an important role in Responsive Web Design
Though this is not the only use of it. Media queries can also be used as

- Apply different styles for different media types
- Orientation (landscape or portrait mode)
- Resolution
In this thread, our point of focus will be using Media Query in order to make a web page responsive.

Sounds interesting? Let's go๐Ÿ‘‡
Read 11 tweets
19 Feb
Responsive Web Design is an important thing to learn.
In this I'll try to give you a quick overview and tips to make you web page responsive

So what are you waiting for? This thread is for you๐Ÿ˜„

๐Ÿงตโฌ‡๏ธ
๐Ÿ‘‰ ABSTRACT

In this thread I have covered some quick tips and overview of RWD

1๏ธโƒฃ Use meta viewport element
2๏ธโƒฃ Don't use large fixed width
3๏ธโƒฃ Try to use Layouts
4๏ธโƒฃ Use box-sizing: border-box
5๏ธโƒฃ Media Queries are saviour
6๏ธโƒฃ Use "auto" in media
7๏ธโƒฃ Use frameworks if possible
Responsive web design is not a kind of program or framework. We can say it's a combination of various concepts using which we try to make our web page look good on all devices

The great thing is that you can achieve RWD using HTML and CSS onlyโšก

(3 / nn)
Read 14 tweets
19 Feb
The Z-index is a powerful yet confusing concept of CSS

Let's make it easy in this quick thread๐Ÿ‘‡

๐Ÿงต
z-index is a CSS property that controls stacking order of elements along Z axis.

Image a hypothetical line starting from your eye to screen, that is Z-axis
โญ Note that z-index only works on positioned elements.

You need to specify the position (relative, absolute, sticky, fixed) if you want to arrange an element using z-index
Read 5 tweets
17 Feb
Lately, I love writing blogs on @hashnode. Initially I wasn't sure how to start but now I get it that process is pretty easy and straight forward๐Ÿ‘‡
Why I prefer Hashnode over other platforms?

1. You can blog at your personal domain (blog.pratham.codes)
2. You can customize your blog design entirely
3. Inbuilt community of thousands of developers
4. Personalized Newsletters

CONT...๐Ÿ‘‡
5. Hashnode has a great UX and UI
6. You can add many pages to your customized blog

For example๐Ÿ‘‡
Read 4 tweets
17 Feb
Everything you need to know about CSS Flexible Box Layout๐Ÿ‘‡

THREAD๐Ÿงต
Start appyling display: flex; property to parent element
This will take the all the elements in horizontal direction
You can also change the direction of elements. For doing so, you need to mention the flex-direction property

The flex-direction property specifies the direction of the items within the flex container
Read 11 tweets
15 Feb
Beginner friendly thread to start with Web Development in 2021

THREAD๐Ÿงต๐Ÿ‘‡
Did you know you don't need any prior coding knowledge to start with web development.

You can start it with scratch. You neither need to install any software initially you can make your first site on Notepad or some online editor

(2 / 13)
๐Ÿ“Œ Tools you need

- An editor, where you can write some code.

There are two options

1. Install editor on your machine
2. Use an online editor

(3 / 13)
Read 13 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!