Learn CSS by Playing Games.

A Thread 🧵👇️
1. cssgridgarden.com

Learn CSS Grid Layout by planting trees and growing your garden with 28 different levels.

{ 1 / 6 }
2. mastery.games/flexboxzombies/

Flexbox Zombies is a fun game where we use Flexbox to position hero’s crossbow and hit the zombies and survive.

{ 2 / 6 }
3. flexboxfroggy.com

Learn Flexbox by guiding the frog to the lilypad using diffent Flexbox properties you have learnt.

{ 3 / 6 }
4. maketecheasier.com/games-learn-cs…

CSS Dinner is a game to learn different selectors in CSS and organising them in a way to prepare a good looking meal.

{ 4 / 6 }
5. flexboxdefense.com

In this game, we use the CSS Flexbox properties in building a strong tower and stopping enemies.

{ 5 / 6 }
6. cssbattle.dev

CSS Battle is a online interactive playing platform where you can invite your friends and make use of CSS properties to build certain shapes and battle against them.

{ 6 / 6 }
Thank you for reading!

Hey, I'm Savio 👋
I write daily threads on web development and developer resources.

If you found this Thread useful:
- Follow me (@saviomartin7) ✅
- Retweet it
- Turn on the notifications

Thank you for the support friends! 🙏

• • •

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

Keep Current with Savio Martin ⚡️

Savio Martin ⚡️ 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!


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 @saviomartin7

1 Nov
Googling is a must have skill for developers.

Here are the pro tips to search on Google.
( A thread with examples 🧵↓ )
1. Asterisk *

Use * to fill in missing words or phrases.
🔎 Example Search: how to * in JavaScript

{ 1 / 8 }
2. Search:

Using search: you can search within a website.
🔎 Example Search: search:quora .com arrays

{ 2 / 8 }
Read 11 tweets
28 Oct
Useful GitHub Repositories every developer should know 🔥

List of 15 awesome GitHub repositories to save hours and increase productivity.

A Thread 🧵👇
1. github.com/kamranahmedse/…

Useful visual roadmap to becoming a web developer in 2021.

{ 1 / 15 }
2. github.com/sindresorhus/a…

Useful lists about all kinds of interesting topics and technologies.

{ 2 / 15 }
Read 16 tweets
21 Oct
10 Killer Websites for Web Developers and Designers!! 🤯

Amazing websites to save 10+ hours every week. The ultimate list of the best developer tools.

A Thread 🧵👇️
1. 3dicons.co

3d Icons is a collection of beautifully crafted open source 3D icons completely free to use.

{ 1 / 10 }
2. flowbite.com

Newly built Tailwind CSS components library with collections of built in elements, easy to use.

{ 2 / 10 }
Read 12 tweets
21 Oct
How to build a URL Shortner with Next Js and Rapid API?

Complete step-by-step tutorial on building your URL Shortner service from scratch.

A Thread 🧵👇️
1. Go to rapidapi.com/BigLobster/api… 🔗

Rapid API is a collection of 35k+ APIs. In this project, we use this Free API.

Create an account on Rapid API and get your key. Test endpoints and you can directly grab the code from that API.

{ 1 / 3 }
2. Now create a Next Js x Tailwind Project

Create a similar markup with your favourite tools.
Head over to github.com/RapidAPI/DevRe… to see the code I used.

{ 2 / 3 }
Read 6 tweets
20 Oct
Learn Web Development for FREE

1. developers.google.com/web

Web Fundamentals by Google has everything you need to learn as a complete begginer. Text and video content by experts.

{ 1 / 10 }
2. w3schools.com

W3Schools is one of the most popular place to learn web development technologies with exercises and live editor.

{ 2 / 10 }
Read 12 tweets
19 Oct
Good design is essential for a successful website.

Here are 10 amazing sites to get free design inspiration to create world class products.

A Thread 🧵👇️
1. dribbble.com

Dribbble is the leading destination to find & showcase creative work.

{ 1 / 10 }
2. awwwards.com

Awwwards is featuring the most beautiful works on design, creativity and innovation on the internet.

{ 2 / 10 }
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

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!