HN Explorer

Ask HN: Good resource for modern HTML / CSS?

3 points by aosmith ↗ HN
TLDR: I did HTML / CSS / Javascript a long time ago (think early 2000's and before). I've been a backend / infra engineer in the middle... I just want to be somewhat proficient, the last time I did html we were still using tables. Any links appreciated!

5 comments

[ 5.2 ms ] story [ 24.9 ms ] thread
acemarke
I have a "How Web Apps Work" blog post series [0] that I specifically wrote to target non-web devs switching over to web dev, as well as newbies. It covers HTTP and servers, JS, typical client development tools and workflows, and HTML/CSS/DOM.

I also really like the HTML tutorials at "Interneting is Hard" [1], and the CSS Tricks posts on Flexbox / Grid for layout [2].

[0] https://blog.isquaredsoftware.com/series/how-web-apps-work/

[1] https://www.internetingishard.com/

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

aosmith
2 is exactly what I was looking for, thanks!
blondin
frontend development, if we can still call it that, is the wild west right now. but a few youtubers shine at summarizing the mess down to essentials. i also don't do much of it nowadays but i like to stay informed.

one of these channels is traversy media: https://www.youtube.com/c/TraversyMedia/.

now, i tend to be picky with what i watch on youtube but here are a few tips for web development content:

a) skip any video older than 2 years. unless it's one of those aspects you know for sure doesn't change much.

b) skip any video longer than 1 hour.

this is a general rule for any programming content. this is also not a hard rule. i can tell based on the nature of the content if 30, 40 or 1 hour is too much.

c) skip any video that has a click-baity thumbnail.

sizediterable
> the last time I did html we were still using tables

I know the OP probably meant using tables for things like centering elements and doing page layouts (no longer needed since we have flexbox and grid respectively). But for those reading this that don't know any better, you should still use tables for content that is semantically tabular like displaying data. This makes the content more accessible to people using screenreaders.

Speaking of which, Flexbox Froggy and Grid Garden are fun and addicting ways to learn:

https://flexboxfroggy.com

https://cssgridgarden.com

And the Axe extension is a great way to learn about modern accessibility best practices:

https://chrome.google.com/webstore/detail/axe-devtools-web-a...