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

101–110 of 196 posts

Re: Learn CSS

#101

Post by lucas_codes »

greggturkington wrote: post #95
lucas_codes wrote: post #90

Earlier quoted context omitted.

What exactly about sizing text causes issues? Do you mean fluid/responsive sizing? AFAIK, the best modern way to do it is `font-size: clamp(0.75rem, 1rem + 2vw, 3rem)` (the use of rem as well as vw is to not break zooming for accessibility)

Never use viewport-relative units (like vw) for text sizing, it is not a best practice for accessibility (part of the reason it's not in the examples here). Modern browsers handle zoom just fine, regardless of units. We use rem in case a user has set their own preferred base text size (the same reason we don't use viewport-relative units).

That's why it's rem + vw, to prevent accessibility problems

Re: Learn CSS

#102

Post by suyash »

astatine wrote: post #86
kaycebasques wrote: post #29

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 prov…

It is interesting that this uses a podcast + text rather than what would have been a more conventional video based tutorial. The use of a podcast for describing something so fundamentally visual as CSS looks really unusual. I just started going through and came back here to note that it somehow seems to work well!

Yes, I found that odd as well, no plan to listen to 15 min podcast on a web-page when Im just trying to quickly learn something I need to know to fix my code. Though overall the aesthetics of the site are nice, very clean look and nicely organized.

Re: Learn CSS

#103

Post by regus »

kaycebasques wrote: post #29

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 prov…

Hey Kayce! How come you no longer do the chrome dev tools update videos on YouTube?

Re: Learn CSS

#104

Post by throwaway088 »

Is there a site where I can practice relatively simple css challenges. For example for this html, center the text and align text in all three boxes, etc. Css battle is great but there are only finished answers not explanations.

W3schools have some but they are too simplistic.

Re: Learn CSS

#105

Post by mbostleman »

goto11 wrote: post #33

Looks great! Small pet peeve regarding tutorials: When learning a new technology I don't care about the headaches people had 20 years ago. My first concern is how I use the technology and what it can do for me. The section about layout starts with: " In the early days of the web, designs more complex than a simple document were laid out with elements. Separating HTML from visual styles was made easier when CSS was wi…

I think it depends. Anecdotally, I personally feel very unanchored and semi-anxious when someone just dives in to the explanation of "how we do it" without the context of why we do it this way and how we got here.

I find it similar to the use of acronyms. When an explanation introduces domain-specific acronyms I always ask what the acronym stands for. It's important to me because just memorizing key "ABC" and associating it with some kind of outcome forms a very weak bond in my brain. If I know what the acronym stands for, the bond is far stronger and larger pieces of the picture are revealed. Interestingly, I find that when I ask an explainer what an acronym stands for there's a couple classes of responses. In my experience, most are simply that the explainer doesn't know. And among those explainers, most don't care. But some will be curious and look it up. A few will know and you can tell that they find it important too. Fewer yet, will explain the definition when introducing the acronym and maybe even comment about its origins.

I'm guessing that these classes of people would also correlate closely to those who prefer turn-by-turn directions vs a route on a map with the full context of other routes in the area.

Re: Learn CSS

#106

Post by mattwad »

stupidcar wrote: post #82
hbn wrote: post #47

Earlier quoted context omitted.

Nah, I think the history is important, especially for web development where modern tech stacks are technologies built on technologies built on technologies, and pretty much everything has to be backwards compatible. I've run into so many situations while learning web development where a design decision seems like nonsense until later when I learn about the history of how it evolved. First example that comes to mind i…

History can be important, but I don't see what knowing that developers used to (ab)use for layout explains about modern CSS. By all means, include historical context if it helps explain why something works the way it does, but otherwise drop it. And while backwards compatibility remains a concern for browser vendors, it's much less of a concern for web developers nowadays given the vast majority of users are using au…

tables are still relevant for layout if you work with email at all. In fact, if you want to be able to do email well, you have to be able to do layout like it was 10-20 years ago. There's also lots of legacy code out there to be working with, and sometimes the "old way" of doing it is still better than the new way. A pet peeve of mine is seeing flexbox everywhere, when a simple 'display: inline-block' might work. In my opinion, it's all still relevant so long as it still exists as part of the language.

Re: Learn CSS

#107

Post by mattwad »

This is the first CSS tutorial that explains _why_ CSS works a certain way. I think so many new devs struggle with CSS because they don't understand why it is the way it is, which helps explain how it is supposed to be used.

Re: Learn CSS

#108

Post by mattwad »

globular-toast wrote: post #4

I've used CSS for close to 15 years. I've just never got around to really learning how it works. Every time I have to do it I manage to just about get by without actually learning it for real. But it's frustrating. I think it's about time I learnt it for real.

it's just like not learning how your IDE works. You can coast along OK, but it's like you have sand bags on your feet. It's amazing how few devs actually know CSS; In my opinion you can really stand out if you're willing to spend a couple afternoons learning concepts like the Box model. CSS/HTML is much easier to work with when done correctly, too.

Re: Learn CSS

#109

Post by contriban »

liquidise wrote: post #91
goto11 wrote: post #33

Looks great! Small pet peeve regarding tutorials: When learning a new technology I don't care about the headaches people had 20 years ago. My first concern is how I use the technology and what it can do for me. The section about layout starts with: " In the early days of the web, designs more complex than a simple document were laid out with elements. Separating HTML from visual styles was made easier when CSS was wi…

It is relevant in html emails, which are basically a time machine to inline styles and table layouts if you want consistent rendering. This would make no sense to a developer unless they understood the progression to where we are today.

Email development is pretty niche and its own category of expertise. CSS straight up doesn’t apply there the way it’s used regularly (via selectors)

Re: Learn CSS

#110

Post by Jemaclus »

kaycebasques wrote: post #29

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 prov…

Just as an FYI, I'm seeing a certificate error when loading web.dev. I'm on latest Chrome Version 90.0.4430.212 (Official Build) (x86_64) on Mac OS Big Sur

Screenshot: https://d.pr/i/gvj3fA

I've been trying to visit web.dev for days for various reasons, but I just get this and neither Chrome nor Safari will let me visit. But apparently a bunch of you can see the page, so I'm confused as to why I seem to be the only one seeing this... but maybe you or someone there can help? Thanks.

Post reply on HN