Share this page!

Maybe Scrolly?
Andrej ⚑️ Profile picture
Twitter logo
Dec 18 β€’ 16 tweets β€’ 4 min read
🎨 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
Dec 12
⚠️ 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
Andrej ⚑️ Profile picture
Dec 11
🎨Being skilled in UI/UX will make you a better frontend developer.

Here are the top channels to accelerate your learning:
1. Flux Academy

Sharpen your web design skills and learn from world-class instructors.

Figma, Webflow, inspiration, design trends, tools, productivity... it's all there!

πŸ”— youtube.com/@FluxAcademy
2. Antony Conboy

With over 15 years of experience working for big-name companies like Vogue, Wired, and the BBC, Antony shares unique insights and advice.

Tune in to his videos for valuable tips and information.

πŸ”— youtube.com/@AntonyConboyUX
Read 10 tweets
Andrej ⚑️ Profile picture
Dec 7
7 cutting-edge developer tools you can use for free to build websites, apps, and APIs significantly faster:

πŸ§΅πŸ‘‡
1. Codux

React developers: meet, your first visual IDE.

Visually edit projects side-by-side with your code editor. See every change reflected instantly and get your work done faster.

Get it for free and see for yourself πŸ‘‡

πŸ”—codux.hopp.to/codux
2. Insomnia

No more tedious manual testing and fumbling with cURL commands.

Introducing Insomnia, a powerful REST client that makes API testing a breeze.

πŸ”—insomnia.rest Programming tool - Insomnia
Read 9 tweets
Andrej ⚑️ Profile picture
Nov 29
πŸ“Œ A notoriously difficult interview question:

"What is your weakness?"

How not to mess up the answer:
The way you answer this question can reveal important things about you:

- You are honest
- You are self-aware
- You have a growth mindset

Don't even try fake it. State a real weakness, but emphasize how you work to overcome it.
Don't say:

- I am not good with people
- I don't have good attention to detail
- I am bad at managing deadlines
- Or anything that's a match for job description

Don't shoot yourself in the foot by showing that you're not competent enough for the position.
Read 7 tweets
Andrej ⚑️ Profile picture
Nov 26
πŸ“ How to decide between frontend, backend, or full-stack developer careers:
Software development happens on many levels:

- Hardware
- DevOps
- Backend
- Frontend
- UI/UX Design
- QA
- Product Management
- And more...

You may choose to operate on one or N levels as a developer.
People operating on multiple levels are called generalists or simply "software engineers."

Being a generalist is highly desirable in big tech. Where it's often expected to be flexible enough to deal with almost "anything."
Read 8 tweets
Andrej ⚑️ Profile picture
Nov 23
πŸ“Œ I asked developers: "What's the best programming course you've taken?"

Here are the most popular answers:
The Complete 2023 Web Development Bootcamp by Dr. Angela Yu

Become a Full-Stack Web Developer with just ONE course. HTML, CSS, Javascript, Node, React, MongoDB, Web3 and DApps

πŸ”— udemy.com/course/the-com…
CS50: Introduction to Computer Science by Harvard University

An introduction to the intellectual enterprises of computer science and the art of programming.

πŸ”— pll.harvard.edu/course/cs50-in…
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 on Twitter!

Send Email!

:(