Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Learn CSS

web.dev

Post reply on HN
Print view View original

21–30 of 196 posts

Re: Learn CSS

#21

Post by lifeisstillgood »

scrose wrote: post #18
swiley wrote: post #7

Earlier quoted context omitted.

I think most web users wished web devs understood CSS better (even if they don't know what it is.) I'd be willing to bet half the stuff things like React are used to do could be accomplished much better with a small amount of CSS and probably no javascript at all.

I’ve seen this more times than I can count… A lot of people think of CSS as if it’s not code itself. Modularize it and create patterns like you would for any other piece of code(ie. react components), and it becomes fairly straight-forward to do things that would normally take 100+ lines of code in JS, in just a fraction of the time and code.

Could you give an example? (not trolling - genuinely would like to see where the Venn Diagram between framework and CSS lie)

Re: Learn CSS

#22

Post by the_only_law »

hmoy wrote: post #2

I've always found CSS infuriating to use when working with it (albeit not often). This looks like a clean and easy to follow course so will be one for me to look at over the weekend.

Admittedly I’ve never been very good with CSS particularly the “newer” layout stuff I’ve never really used or learned.

That being said I’d rather use CSS than the abomination used for styling in WPF.

Re: Learn CSS

#23

Post by matwood »

raspasov wrote: post #13

In terms of Flexbox, this guide in the React Native documentation is BY FAR the best guide I've seen anywhere. It tells you just the right amount of things you need to know to be productive. https://reactnative.dev/docs/flexbox It's not React Native specific. It works for web-based CSS as well.

That's a nice site to learn. This is my goto reference (they even sell it as a poster).

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Re: Learn CSS

#24

Post by yakubin »

raspasov wrote: post #13

In terms of Flexbox, this guide in the React Native documentation is BY FAR the best guide I've seen anywhere. It tells you just the right amount of things you need to know to be productive. https://reactnative.dev/docs/flexbox It's not React Native specific. It works for web-based CSS as well.

This is my favourite resource for learning about flexbox: https://flexboxfroggy.com/>

And this for grid: https://cssgridgarden.com/>

Re: Learn CSS

#26

Post by domano »

deergomoo wrote: post #19
domano wrote: post #14

Earlier quoted context omitted.

I agree with your first sentence, but not with your second. For my own homepage i did not write a single line of css. I am very, very bad with CSS and can't wrap my head around it, but tailwind allowed me to create a very pretty, responsive homepage with very high lighthouse scores (bought tailwind UI too).

> I am very, very bad with CSS and can't wrap my head around it, but tailwind allowed me to create a very pretty, responsive homepage Congrats, you now know CSS! It sounds like I'm joking but honestly, Tailwind is essentially composable shorthand for CSS with a design system applied. If you grok Tailwind, you understand the concepts of CSS, you just might not know the full names for all the properties and values.

Yes, but when i try to apply this knowledge i fail every time.

I do unterstand the basic ideas behind CSS, but is just cant apply it. Tailwind allowed me to apply it.

If i could, i would prefer to write CSS! After 10 years i have given up though.

Re: Learn CSS

#27

Post by ctf1er »

This is your brain. this is your brain on css. any questions.. CSS is great, only problems are browser interpretation. Seems like now we healthily don't try and support all.

Re: Learn CSS

#28

Post by explodingcamera »

lifeisstillgood wrote: post #21
scrose wrote: post #18

Earlier quoted context omitted.

I’ve seen this more times than I can count… A lot of people think of CSS as if it’s not code itself. Modularize it and create patterns like you would for any other piece of code(ie. react components), and it becomes fairly straight-forward to do things that would normally take 100+ lines of code in JS, in just a fraction of the time and code.

Could you give an example? (not trolling - genuinely would like to see where the Venn Diagram between framework and CSS lie)

Animations, even 3d ones, drop-down, sliders, static scroll elements, are often implemented on horrible js with bad performance and accessibility, while trival with a small amount of css.

Re: Learn CSS

#29

Post by kaycebasques »

I'm the content lead for web.dev. Just wanted to give a quick shout out to the people who made this happen because it's not clear on the site. I think this is also useful information because you'll see that a lot of CSS experts we're involved in this project.

Adam Argyle [1] and Una Kravets [2] created the podcast series. Una mainly drove the overall project to convert the podcasts into this written series. Adam provided technical reviews on the written content and I also believe he created most or all of the self-assessments (i.e. the 'check your understanding' quizzes). Andy Bell [3] wrote all of the content (and demos, I think). Rachel Andrew [4] edited all the content. Rob Dodson drove the engineering work behind creating this new "courses" infrastructure on web.dev. I was hands-off on this project so I may not have gotten everyone's roles exactly correct, but I do know these were the main people involved.

[1] https://twitter.com/argyleink

[2] https://twitter.com/Una

[3] https://twitter.com/piccalilli_

[4] https://twitter.com/rachelandrew

[5] https://twitter.com/rob_dodson

Re: Learn CSS

#30

Post by swiley »

yanis_t wrote: post #8

It is absolutely amazing how many things we can do with CSS. It's as powerful as some programming language, while in fact being completely declarative and super fast at the same time!

One really interesting feature of CSS is that it's a regular language (you can write a regex that matches all valid CSS files.) This is unusual even for many config formats.
Post reply on HN