Chris Staudinger Profile picture
Aug 15, 2022 9 tweets 5 min read Read on X
📌 Master CSS Flexbox and Grid with these awesome free games 🧵👇 Master CSS Flexbox and Grid with these awesome free games
1. Flexbox Froggy

This game is personally how I learned CSS Flexbox several years ago, so it holds a special spot for me 😁

→ Get the frogs on the lilypads 🐸

→ By the time you finish level 24, you will be quite experienced with CSS flexbox 🚀✨

👉 flexboxfroggy.com CSS flexbox game — Flexbox Froggy
2. Knights Of The Flexbox Table

If you’ve been curious about Tailwind CSS or you’re already a fan, then you’ll love this one! 🤩

It’s the same concept as Flexbox Froggy but flexbox is implemented through the Tailwind CSS classes.

👉 knightsoftheflexboxtable.com CSS flexbox game — Kinghts Of The Flexbox Table
3. Flexbox Defense

Who doesn’t love some Tower Defense?! 😁😁

Position the towers to keep out your enemies using CSS Flexbox 🛡

👉 flexboxdefense.com CSS flexbox game — Flexbox Defense
4. Flexbox Zombies

David Geddes went all out creating this game. It is seriously good! 🔥😱

Awesome visuals, storyline, and a soundtrack. It's the whole package 🙌

Complete all levels in this game and you will be very proficient in CSS flexbox.

👉 mastery.games/flexboxzombies CSS flexbox game — Flexbox Zombies
5. Flexbox Adventure

Another great game to master flexbox ✨

24 levels to take you from limited CSS flexbox knowledge to being skilled.

👉 codingfantasy.com/games/flexboxa… CSS flexbox game — Flexbox Adventure
6. Grid Garden

Water only the areas that have carrots 🥕🥕

Do that for 28 levels and you will now be quite proficient with CSS Grid 👊🙌

It’s great game that will skyrocket your CSS grid capabilities 🚀

👉 cssgridgarden.com CSS grid game — Grid Garden
7. Grid Attack

This game is highly effective for learning grid.

There are 80 levels and 3 difficulty settings 🔥🔥🔥

Manage to complete all 80 levels and you will have mastered CSS grid 😎🙌

👉 codingfantasy.com/games/css-grid… CSS grid game — Grid Attack
That’s a wrap!

If you enjoyed this thread, don’t forget to like, comment, and retweet the first tweet!

I create threads, and hand-drawn illustrations to level up your software development game 🚀 🧵 🎨

Follow
@ChrisStaud for more free tips and free resources.

• • •

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

Keep Current with Chris Staudinger

Chris Staudinger 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 @ChrisStaud

Dec 8, 2023
Every component of a URL explained in under 2 minutes: Image
First, what is a URL?

URLs represent a resource’s location on the internet (webpage, image, file, etc). When you enter a URL, your browser travels a computer network to retrieve the resource at that location.

Components of a URL (in order) ↓
🔸 𝗣𝗿𝗼𝘁𝗼𝗰𝗼𝗹/𝘀𝗰𝗵𝗲𝗺𝗲: this represents the method used to fetch the resource. E.g. HTTP, HTTPS, or FTP.

🔸 𝗦𝘂𝗯𝗱𝗼𝗺𝗮𝗶𝗻: it comes before the domain and is optional. It’s used to organize different sections of the website.
Read 8 tweets
Oct 29, 2023
You can now simulate real-world traffic on your local machine to performance test your APIs.

And it’s available on Postman’s free plan.

Here’s how (in 4 simple steps):
Postman released built-in capabilities for testing your API’s performance on your local machine.

• Simulate real-world traffic
• Visualize performance
• Observe response times, throughput, & error rates

Step 1) Download Postman (link ↓)
drp.li/postman-downlo…
Step 2) Use Postman’s Collection Runner to set up a performance test

Select a collection, select an environment (optional), and click Run.
Read 5 tweets
Jul 20, 2023
SOLID principles are key in object-oriented programming.

But what does each principle actually mean, and why are they significant? 🧵 Image
SOLID represents five principles of object-oriented programming.

Whether or not you use OOP, knowing these principles gives you a lens into the foundations of clean code which can be applied to many areas of programming.
S — Single Responsibility Principle
O — Open/Closed Principle
L — Liskov Substitution Principle
I — Interface Segregation Principle
D — Dependency Inversion Principle

Let’s break down each principle ↓
Read 10 tweets
Jun 12, 2023
Give me 5 minutes and I'll teach you everything about object-oriented programming: Image
1. Object-oriented programming (OOP) is a programming paradigm in which programs are designed using classes and objects.

This design allows related functions and data to be grouped together in self-contained and reusable units.
2. A class is a template or blueprint from which objects are made from.

Classes define the properties and methods that an object can have, and objects are unique instances of a class.
Read 12 tweets
Jun 7, 2023
ChatGPT and Bard are phenomenal.

But these powerful AI tools save hours where ChatGPT & Bard cannot:
1. Scribe

Writing up docs and how-to guides used to take up so much time, but not anymore!

@ScribeHow creates auto-generated step-by-step guides, cutting down hours of work to minutes.

It's a must-have tool if you're working solo or in a team.

Getscribe.how/chrome
2. Gamma

ChatGPT x Presentations = Gamma

Generate docs, decks & webpages in seconds.

Provide a prompt of what you want, @MeetGamma will create:

• Presentations
• Pitch decks
• Webpages

Provide feedback to further personalize your creation.

Gamma.app
Read 9 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

Don't want to be a Premium member but still want to support us?

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

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(