Tweet

Oliver Jumpertz

13 Jul, 15 tweets, 6 min read

Let's be honest, CSS can be pretty difficult.

I had a hard time learning it, but there are a few resources that can definitely help you to understand the style language of the web.

Here is a collection of my favorite ones.

A thread.

1. codrops

An extensive CSS reference that will serve you even better than MDN.

Definitely, my go-to resource when I want to look something up.

tympanus.net/codrops/css_re…

1/11

2. The box model

Everything in HTML and CSS has something to do with a box. Some elements are block elements, others are inline elements.

This concept can actually be pretty difficult to understand.

This article on MDN makes it clear for you.

developer.mozilla.org/en-US/docs/Lea…

2/11

3. CSS lengths

There are so many length units in CSS that I often forget half of them.

Gladly, this article covers all of them and explains what they are and do in an easy-to-understand way.

css-tricks.com/the-lengths-of…

3/11

4. Basic CSS Selectors

There are classes, ids, and elements, and you can select them as is, or when they are nested, or...yea...it's a lot you can select.

This article covers all the basic selectors you will need in CSS.

sitepoint.com/css-selectors/

4/11

5. Advanced CSS Selectors

Basic selectors are great, but there is much more you can select.

You can select elements based on attributes, or when a is nested in b and has an attribute c, and...okay, ... that's complicated.

This article will help.

smashingmagazine.com/2009/08/taming…

5/11

6. Using CSS variables correctly

CSS even has variables!

But there is a lot you can do wrong.

This article is a great guide on how to work best with them.

madebymike.com.au/writing/using-…

6/11

7. CSS Layouting

Okay, I learned CSS because I wanted to layout my websites. I guess you are doing so, as well.

Yea, there is CSS art, but the main purpose is layouting, isn't it?

This one is a great guide to exactly this.

book.mixu.net/css/

7/11

8. Flex

No, not flexing where you show off. Flex in the sense of aligning elements with CSS.

Flex is great for inline layouting, and this one-page guide definitely shows you everything you need to know!

css-tricks.com/snippets/css/a…

8/11

9. Grid

Grid-layouting is insane. There is no better way to completely restructure your page based on the device a user visits your site with.

Another awesome one-page guide that teaches you everything about it.

css-tricks.com/snippets/css/c…

9/11

10. CSS Transitions and Transforms

Animating things is pretty cool, especially when it actually helps your users and is not only looking fancy.

A great beginner's guide to animating with CSS.

thoughtbot.com/blog/transitio…

10/11

11. Thread end

Okay, you've made it to the end of this thread.

I hope there was something useful in it for you!

And now, hack the world with CSS, or make it at least a little better. 💛

11/11

12. Bonus Round

Some awesome members of this community have responded with a few more awesome resources.

Time to add them here!

@Hus_Dev

13. Web.dev by Google

Google itself shapes the web a lot. They don't do this alone, but they contribute massively.

So, what's better than to learn from them?

(Thank you @Hus_Dev!)

web.dev/learn/css/

@Prathkum

14. @Prathkum's CSS cheat sheets

Pratham is definitely a CSS master.

Although his cheat sheets cost money (a mere dollar), he also tends to give them away for free for those in need.

They are absolutely worth it!

(Thank you @hrdk_codes)

prathkum.gumroad.com/l/css-cheat

• • •

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

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @oliverjumpertz

Oliver Jumpertz

@oliverjumpertz

14 Jul

Testing JavaScript can be difficult.

It sometimes can be hard to write excellent tests that assert that what you developed really works.

To support you, I compiled some beginner-friendly JavaScript testing resources for you.

A thread.

1. JavaScript testing for beginners

This is a course that delivers one lesson each day to your inbox.

You can do it at your own pace.

Perfect for beginners, with some great advice.

marclittlemore.com/javascript-tes…

1/9

2. Introduction To JavaScript Unit Testing

This article is a great guide for beginners.

It walks you from your code as it might be, over making it actually testable, to finally covering it with tests.

smashingmagazine.com/2012/06/introd…

2/9

Read 10 tweets

Oliver Jumpertz

@oliverjumpertz

12 Jul

I've created many more visual tips and explanations since I posted my last collection in June.

This is a new collection of visual tips and explanations for JavaScript that can help web developers of any skill level with even more content!

A thread.

1. The Anatomy Of A For-Loop In JavaScript

2. The Anatomy Of A Do-While-Loop In JavaScript

Read 40 tweets

Oliver Jumpertz

@oliverjumpertz

6 Jul

Initially, coming from a class-based React context, I had a hard time understanding hooks.

And the hook I had the hardest time with was useEffect.

Gladly, I understood it, and I now want to show you what useEffect is and how you can use it.

A thread.

0. A quick hook introduction

Hooks were added to React in 16.8 and enable us to write functional components while still using state and other React features like lifecycle methods without a need for classes.

1/15

Some hooks also enable you to set state in functional components.

This doesn't sound like much, but unlike class components, where you had to modify your component's state for React to notice, you need to tell React when something changed in functional components, too.

2/15

Read 16 tweets

Oliver Jumpertz

@oliverjumpertz

5 Jul

I found some awesome resources that teach you about blockchain technology.

They are short videos explaining blockchain technology to you in simple words.

A thread.

1. Asymmetric encryption

Encryption is one of the foundational building blocks of a blockchain. Knowing what it is and understanding how it works is definitely beneficial.

1/6

2. Zero Knowledge Proof

Blockchains are public databases.

Everyone decides what the truth is, and this video explains to you how it works.

2/6

Read 7 tweets

Oliver Jumpertz

@oliverjumpertz

3 Jul

Knowing and understanding the four visibility modifiers of Solidity is a base requirement for any Solidity developer.

These modifiers are:

1. external
2. public
3. internal
4. private

And each has its own use case.

A thread.

1. external

Only functions can be marked external.

External functions are part of the contract interface and can be called from other contracts and transactions.

They can't be called internally.

This leads to external functions being cheaper to execute.

1/14

Arguments of external functions can be directly read from the calldata.

They don't need to be copied over to memory like for public functions.

2/14

Read 15 tweets

Oliver Jumpertz

@oliverjumpertz

2 Jul

Some of the most important tools beginners in web development should take a look at:

- ESLint
- Prettier
- Babel
- Webpack/Parcel/Snowflake/esbuild
- Mocha/Jest

Let's go over them individually.

A thread.

1. ESLint

ESLint can take care of both code quality and code style.

Code quality covers issues like unused variables.

Code style covers issues like mixing spaces and tabs to indent code.

A good rule of thumb is to use ESLint to check your code quality.

1/9

2. Prettier

Prettier is a code formatter.

It takes care of code style and rewrites your code such that it conforms to your style guide.

Use prettier to take care of your code style while ESLint covers code quality.

2/9

Read 10 tweets

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!