Ask HN: Learning modern web design and CSS

#1

Post by themanr » Mon, Sep 25, 2017, 9:24 AM UTC

So I've been mostly doing back end stuff for a few years. My ability to fix float issues in IE6 just isn't relevant any more. What's the best way to get an understanding of modern CSS and web design? Preferably simple approaches that don't involve horrible, huge, redundant class names or bloated, overbearing frameworks.

This is for a couple of personal projects. I may ultimately end up hiring designers but I want to know what I'm taking about and I'd want to be able to maintain their output.

Re: Ask HN: Learning modern web design and CSS

#2

Post by KGIII » Mon, Sep 25, 2017, 9:50 AM UTC

Covered previously:

https://news.ycombinator.com/item?id=11048409

The answers should still be salient.

I used to be able to say, "Right-click and read the source." I'm not sure that's realistic anymore.

Re: Ask HN: Learning modern web design and CSS

#3

Post by themanr » Mon, Sep 25, 2017, 9:56 AM UTC

KGIII wrote: post #2

Covered previously: https://news.ycombinator.com/item?id=11048409 The answers should still be salient. I used to be able to say, "Right-click and read the source." I'm not sure that's realistic anymore.

Thanks. That was two years ago. I wonder how much has changed since then?

Re: Ask HN: Learning modern web design and CSS

#4

Post by zichy » Mon, Sep 25, 2017, 9:58 AM UTC

Read this:

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

https://css-tricks.com/snippets/css/complete-guide-grid/

Re: Ask HN: Learning modern web design and CSS

#5

Post by jmkni » Mon, Sep 25, 2017, 10:00 AM UTC

Pluralsight has a new feature called Paths which I think is pretty good, I would recommend working through their HTML5 path - https://www.pluralsight.com/paths/html5

Re: Ask HN: Learning modern web design and CSS

#6

Post by thinkMOAR » Mon, Sep 25, 2017, 10:06 AM UTC

zichy wrote: post #4

Read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-grid/

It works quite nice, only some old browsers that don't support it properly. Still advised to check for grid support via css, but don't think this will be required for long.

https://caniuse.com/#search=grid

Re: Ask HN: Learning modern web design and CSS

#7

Post by blauditore » Mon, Sep 25, 2017, 10:10 AM UTC

themanr wrote: post #3

KGIII wrote: post #2

Covered previously: https://news.ycombinator.com/item?id=11048409 The answers should still be salient. I used to be able to say, "Right-click and read the source." I'm not sure that's realistic anymore.

Thanks. That was two years ago. I wonder how much has changed since then?

I'd say not too much from a high perspective. Browser support for new HTML5/CSS3 specs got better, so it's safer to use stuff like flexboxes now. But resources for learning the basics from then should still be relevant, and potentially got updated anyway.

Regarding JS, there's an ongoing shift of hype between various front end frameworks like React, Angular or Vue. Others go back to vanilla JS, as it has better standardization and more power nowadays. But maybe that's not too relevant for you.

Re: Ask HN: Learning modern web design and CSS

#8

Post by singletoon » Mon, Sep 25, 2017, 10:20 AM UTC

A recent and very valuable resource for modern web design : https://internetingishard.com/html-and-css/

Re: Ask HN: Learning modern web design and CSS

#9

Post by herbst » Mon, Sep 25, 2017, 10:46 AM UTC

themanr wrote: post #3

KGIII wrote: post #2

Covered previously: https://news.ycombinator.com/item?id=11048409 The answers should still be salient. I used to be able to say, "Right-click and read the source." I'm not sure that's realistic anymore.

Thanks. That was two years ago. I wonder how much has changed since then?

This is pretty much the time Bootstrap 4 is in beta now. So not much has changed actually

Re: Ask HN: Learning modern web design and CSS

#10

Post by herbst » Mon, Sep 25, 2017, 10:48 AM UTC

I would suggest getting into Bootstrap and try to understand their paradigm. Many other CSS Frameworks work like that, and you should do your own in a similar way to keep it clean. Bootstrap will also help you makeing pretty things in a standard way fast, plus the examples and templates all come with the typical modern layouts.