Ask HN: How do I get better at CSS? • Hacker News Board

Re: Ask HN: How do I get better at CSS?

#11

Post by harperlee » Sun, May 31, 2015, 4:39 PM UTC

applecore wrote: post #10

acemarke wrote: post #6

I'm an applications programmer. My first meaningful web dev experience was a GWT app I built from 2011-2012 using the SmartGWT widget library. They completely bypass the standard CSS layout modes - everything is absolutely positioned using locations calculated in JS. Felt very much at home given my previous desktop UI toolkit experience. However, for the last two years I've been building a related web app that's all…

No one uses Flexbox in production. You're better off learning real CSS if you're just getting started with web development.

What is the reason for that? Is something wrong with Flexbox? Or just browser adoption?

Re: Ask HN: How do I get better at CSS?

#12

Post by Bahamut » Sun, May 31, 2015, 4:40 PM UTC

applecore wrote: post #10

acemarke wrote: post #6

I'm an applications programmer. My first meaningful web dev experience was a GWT app I built from 2011-2012 using the SmartGWT widget library. They completely bypass the standard CSS layout modes - everything is absolutely positioned using locations calculated in JS. Felt very much at home given my previous desktop UI toolkit experience. However, for the last two years I've been building a related web app that's all…

No one uses Flexbox in production. You're better off learning real CSS if you're just getting started with web development.

I've run into plenty of shops that use flexbox in production. This is just false.

Re: Ask HN: How do I get better at CSS?

#13

Post by janpieterz » Sun, May 31, 2015, 4:45 PM UTC

In my experience the best way to learn these kind of things is just to try!

You might have a list with ideas (they can even be stupid, or already existing). If not, try to make one, the craziest things can go on there. Then every week try to sit down and make the user interface for them. Look at other websites that offer familiar services and combine them. Learning while practicing putting your ideas into reality has been my best way of getting any real sustained progress in skills!

Re: Ask HN: How do I get better at CSS?

#14

Post by harperlee » Sun, May 31, 2015, 4:47 PM UTC

DanBC wrote: post #5

Teach other people - it's a great way to discover how solidly you understand something and where gaps in your knowledge are.

I believe this is a great answer. One way of doing that, in my opinion, is writing blog posts explaining things. When I do that, I invariably end up doubting about some things that I write, doing small experiments to see whether something is always true, etc. So in effect, the act of talking/writing/explaining something, makes you analyze what you think you know, and search for where that ends, how that breaks, etc.

Re: Ask HN: How do I get better at CSS?

#15

Post by marpstar » Sun, May 31, 2015, 4:48 PM UTC

applecore wrote: post #10

acemarke wrote: post #6

I'm an applications programmer. My first meaningful web dev experience was a GWT app I built from 2011-2012 using the SmartGWT widget library. They completely bypass the standard CSS layout modes - everything is absolutely positioned using locations calculated in JS. Felt very much at home given my previous desktop UI toolkit experience. However, for the last two years I've been building a related web app that's all…

No one uses Flexbox in production. You're better off learning real CSS if you're just getting started with web development.

We're using Flexbox in production for our next release. We only need to support IE10+, but with autoprefixer it's dead simple.

Re: Ask HN: How do I get better at CSS?

#16

Post by realrocker » Sun, May 31, 2015, 4:57 PM UTC

As a low level android middleware guy with little knowledge of css in practice, I found this guide: http://www.basscss.com/docs/guides/basics/ very effective. Especially the recommended order of css commands made a lot of sense to me: http://www.basscss.com/docs/guides/basics/#order .

Re: Ask HN: How do I get better at CSS?

#17

Post by thekevan » Sun, May 31, 2015, 4:57 PM UTC

One thing I found really useful was taking things others have built and modifying them. Think about the offline world, sometimes the best way to learn how to build something is taking apart and putting back together something someone else already built.

There's a bunch of different ways to do this, one I liked was downloading free Bootstrap themes and making them look different. An unexpected bonus was learning to find errors in the code.

Re: Ask HN: How do I get better at CSS?

#18

Post by klum » Sun, May 31, 2015, 5:01 PM UTC

janpieterz wrote: post #13

In my experience the best way to learn these kind of things is just to try! You might have a list with ideas (they can even be stupid, or already existing). If not, try to make one, the craziest things can go on there. Then every week try to sit down and make the user interface for them. Look at other websites that offer familiar services and combine them. Learning while practicing putting your ideas into reality has…

Also, make sure you understand why things happen the way they do. If there's an issue with the layout and you manage to fix this by trying some different things, take the time to figure out why the fix worked--things like the box model, collapsing margins and containing floats are all worth understanding. Your designs will feel less like a fragile house of cards, too...

Re: Ask HN: How do I get better at CSS?

#19

Post by tbassetto » Sun, May 31, 2015, 5:05 PM UTC

harperlee wrote: post #11

applecore wrote: post #10

Earlier quoted context omitted.

No one uses Flexbox in production. You're better off learning real CSS if you're just getting started with web development.

What is the reason for that? Is something wrong with Flexbox? Or just browser adoption?

Flexbox is not supported by IE < 10. And IE10 supports an old syntax but that can be mitigated by using the "autoprefixer" tool.

Re: Ask HN: How do I get better at CSS?

#20

Post by Sakes » Sun, May 31, 2015, 5:06 PM UTC

It sounds like you are more interested in design than the implementation of it.

For great looking buttons/fields you just need to be sensitive to font selection, padding, borders, & colors.

1) Refer to apps / sites that you think are beautiful

2) Dissect them for:

- Color palettes

- horizontal padding

- vertical padding

- margins sizes

- border thicknesses

- font stacks

- font sizes

3) always build on top of a css framework such as bootstrap

4) implement design tweaks referring to your notes of other apps you wish to imitate.