Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Andrej ⚑️ Profile picture
@reactive_dude
Dec 18, 2022 β€’ 16 tweets β€’ 4 min read β€’ Read on X
Scrolly
🎨 CSS Grid is one of the most important and often used layouts in web development.

Refresh your knowledge in this visual thread:
Introduction CSS Grid allows us to create two-dimensional g
CSS Grid Container An element with display: grid; set on it
CSS Grid Cells & Lines Just like cells & lines in a spreads
CSS Grid Tracks & Areas grid track is a column or a row in
First Step You can create a grid container by setting the d
Column Template The grid-template-columns CSS property defi
Row Template The grid-template-rows CSS property defines th
CSS Fractional Units The β€œfr” unit represents a fractio
CSS Sizing Keywords auto: taks all available space min-cont
CSS Grid Areas Grid areas can be named using the grid-templ
CSS Grid: repeat The repeat() CSS function allows us to des
CSS Gap Property The gap CSS property sets the gaps (gutter
If you want to learn CSS Grid:

- Don't try to memorize any of this: build something
- A fun alternative: learn by playing a game πŸ‘‡

πŸ”— cssgridgarden.com
Thanks for reading!

If you enjoyed this thread:

1. Follow me @reactive_dude for more web development and programming tips

2. RT the tweet below to share it with your audience

β€’ β€’ β€’

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

Keep Current with Andrej ⚑️

Andrej ⚑️ 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 @reactive_dude

Andrej ⚑️ Profile picture
Feb 13, 2023
Different ways of handling results of multiple promises in JavaScript:
Whenever the results of promises do not depend on each other, we can potentially speed things up by creating them concurrently.

For example, API calls can be sent in parallel by the browser (or other I/O-bound tasks)
Promise.all:

- Waits for all promises in an iterable to resolve.
- Returns values as an array.
- Rejects immediately if any promise fails.
Read 5 tweets
Andrej ⚑️ Profile picture
Jan 19, 2023
πŸ“Œ Free Resources for Web Development

β€’ Fonts β€’ Illustrations β€’ Images β€’ Icons β€’ Inspiration β€’ Hosting β€’ Games β€’ CSS Generators β€’ Headless CMS β€’ Free Courses β€’

πŸ‘‡
Fonts:

πŸ”— fontsource.org
πŸ”— fonts.google.com
πŸ”— theleagueofmoveabletype.com
πŸ”— losttype.com
πŸ”— fontspace.com
theleagueofmoveabletype.com
Illustrations:

πŸ”— undraw.co
πŸ”— freepik.com
πŸ”— drawkit.io
πŸ”— blush.design
πŸ”— interfacer.xyz
πŸ”— iradesign.io
humaaans.com
Read 13 tweets
Andrej ⚑️ Profile picture
Jan 4, 2023
If you refuse to utilize AI, you're wasting time and money.

These 7 AI tools can help you automate tasks, improve your results, and increase productivity:
1. DeepL

- AI-powered translation tool
- High-quality, accurate translations
- Understands the context and produces human-like translations.

πŸ”— deepl.com/translator
2. Looka

Why spend hours and a small fortune on logo and branding design?

Let AI handle it for you in record time!

πŸ”— looka.com
Read 9 tweets
Andrej ⚑️ Profile picture
Jan 2, 2023
πŸ“Œ Frontend development skills are in high demand and very well paid

Find all you need to start a programming career in 2023 here: Frontend Developer Roadmap 2023 1. HTML + CSS 2. Build 2 we
1. HTML + CSS

Scrimba: scrimba.com/learn/htmlandc…

Udacity: udacity.com/course/intro-t…

Udemy: udemy.com/course/design-…
2. Design Inspiration

Read 10 tweets
Andrej ⚑️ Profile picture
Dec 21, 2022
πŸ“Œ Forget breakpoints! Use CSS clamp to size your text based on the viewport width.

Sandbox + details below πŸ‘‡
CSS Clamp property scales your value between min and max. Image
Don't stress about doing the CSS clamp math yourself - there's a calculator available to help!

πŸ”— utopia.fyi/type/calculato… Image
Read 4 tweets
Andrej ⚑️ Profile picture
Dec 12, 2022
⚠️ If you're working with React in 2022, STOP making these mistakes:
1. Fetching data in useEffects

Nothing wrong with that. But, you're reinventing the wheel for state management, caching, refetching, prefetching, request cancellation, etc.

Try React Query, or SWR instead.
2. Syncing internal state in useEffects

useEffect hook was designed to communicate with external systems, outside of React.

Don't use it to update the state of a component based on other state.

In those situations it's better to derive the state and use "key" attr for resets.
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!

Send Email!

:(