Chris Staud Profile picture
Aug 15 β€’ 9 tweets β€’ 5 min read
πŸ“ŒΒ 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 Staud

Chris Staud 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

Aug 12
πŸ“Œ Top quality platforms to find remote work tech / web development jobs πŸ§΅πŸ‘‡ Top quality platforms to find remote work tech / web develop
1. We Work Remotely (WWR)

We Work Remotely is arguably the largest remote work community in the world 🌎

There are a ton of software development remote work job opps here, from small startups to the biggest tech companies like Google.

πŸ‘‰Β weworkremotely.com Remote work tech job platform - We Work Remotely
2. Himalayas

This platform is fantastic for finding tech remote work πŸ™Œ

The UX is great, they have a plethora of opportunities, and they give heaps of data and insights too! πŸ”₯

πŸ‘‰Β himalayas.app Remote work tech job platform - Himalayas
Read 9 tweets
Jul 28
πŸ“ŒΒ 10 Free sites to master frontend development πŸ§΅πŸ‘‡ 10 Free sites to master frontend development
1. Scrimba

ScrimbaΒ is a fun and fast way of learning to code!

Their platform is a highly effective resource for learning frontend development.

Learning HTML, CSS, JavaScript, and React are all available on the free tier πŸ”₯

πŸ‘‰Β scrimba.com Frontend development platform Scrimba
2. FreeCodeCamp πŸ•

Over 8,000+ tutorials and tons of challenges to complete along the way to test what you've learned.

Anything and everything web development. Whatever skills or technology you’re looking to build, there’s sure to be a tutorial πŸš€

πŸ‘‰ freecodecamp.org Frontend development site FreeCodeCamp
Read 11 tweets
Jul 24
πŸ“Œ 11 Awesome web development libraries for React.js πŸ§΅πŸ‘‡ 11 Awesome web development libraries for React.js
1. Material UI

Building components takes time ⏱

Wouldn’t it be great if there were a library of components already built for you?

Welcome to MUI 🀩

Inspired by Google’s material design.

Use them directly or as a basis for your own UI Kit πŸ’‘

πŸ‘‰Β mui.com Material UI  - Web development library for React.js
2. Next.js

Next.js can be thought of as React.js on rocket-fuel πŸš€

It’s React with extra features.

And those extra features are a huge deal πŸ™Œ

Out of the box:

β†’ Static site generation

β†’ Server side rendering

β†’ Route pre-fetching

β†’ πŸ’¬

πŸ‘‰Β nextjs.org Next.js - Web development library for React.js
Read 14 tweets
Jul 6
πŸ“ŒΒ How to think in React - the most popular frontend framework in web development πŸ§΅πŸ‘‡ How to think in React - the most popular frontend framework
React.js is the most popular web development library/framework πŸ‘‘

Over 44% of professional Software Developers use React.js πŸš€

The 2nd most used frontend web development library is jQuery at 29% (mostly legacy usage).

Let’s dive into understanding how to think in React 🧠 Web development framework usage statistics - Stack Overflow
There’s more than one way to build something in React βš›οΈ

Here’s a guide thoughπŸ‘‡

1. Break the UI into a component hierarchy

2. Build a static version

3. Identify the complete representation of the UI state

4. Identify where your state should live

5. Add inverse data flow
Read 16 tweets
Jun 28
πŸ“ŒΒ 9 free sites to learn web development by building projects πŸ§΅πŸ‘‡ 9 free sites to learn web development by building projects
1. Frontend Mentor πŸ‘©πŸ»β€πŸ«

Solve real-world HTML, CSS, and JS challenges whilst working to professional designs. Build projects, review code & help each other growπŸ’‘

They provide the style guide, static assets & everything else needed to focus on building πŸ™Œ

frontendmentor.io
2. JavaScript30 ⚑️

Created by @wesbos - this 30 day Vanilla JS Coding Challenge will see you build 30 projects in 30 days πŸ—

By the end of it, your JavaScript skills will be amazing! πŸš€πŸ”₯

javascript30.com
Read 12 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 on Twitter!

:(