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

Ask HN: How do I get better at CSS?

news.ycombinator.com

Post reply on HN
Print view View original

21–30 of 40 posts

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

#21

Post by tbassetto »

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 develop a webapp that targets the music industry, and none of them is using old IEs. We have been using flexbox in production for more than one year :)

However, this webapp is used to generate websites that may be visited by anybody, really, so we have to support IE9 and we don't use flex box for them. It all depends on your customers / visitors base.

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

#22

Post by corywatilo »

If you know the basics, I'd say the best way is to actually build out some pages with different components and layouts. It's easy to code up one page, but when you get to having to build out multiple pages with different elements, it really makes you step back and start to componentize your CSS and make you think modularly. Nothing will beat experience and familiarizing yourself with different scenarios. When I was starting out, I went this route and utilized Experts Exchange when I got stuck. Great community over there (or at least 10ish years ago...)

If you're not a designer, take a popular webpage and build your own version of it, then look at the real source code and see how yours compares, or ask some CSS forum members to look over your code.

Build a library of frequently used styles. I have something like the following:

.small {font-size: 12px;} .big {font-size: 16px;} .bigger {font-size: 18px;} .biggest {font-size: 20px;}

...and it extends from everything like font sizes to colors.

.red {color: #f00;}

Then when you're building something out, you can reference generic styles from your own library. It makes things quick:

foo

I'd recommend against using something like Bootstrap early on. To really get the grasp of CSS, you'll want to work with ONLY your own code so you really understand how it works. Libraries are great, but you can only fully understand it if you control everything.

Hope these tips help!

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

#23

Post by LukeB_UK »

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.

> You're better off learning real CSS

Flexbox is real CSS, it's part of the CSS3 spec: http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/

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

#24

Post by mzjs »

tbassetto wrote: post #19
harperlee wrote: post #11

Earlier quoted context omitted.

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.

I'm not sure anyone really expects websites to look good in internet explorer anymore. As long as it's mostly functional, it's fine.

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

#25

Post by cleverjake »

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 work at WalMart.com - we have shipped flexbox in production for years now

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

#27

Post by teleclimber »

Sakes wrote: post #20

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

Yep totally. OP wants to "get better at CSS" but says they want ".. great looking buttons.."

Making things look great is more about an affinity for design than knowledge of fancy CSS.

OP, you might want to hang out on news.layervault.com in addition to HN. You can learn a lot by examining what gets shared and the comments.

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

#28

Post by S4M »

compbio wrote: post #9

- Design an application or website inside the browser (no photoshop mockup). - Find and read some front-end designer blogs. - Take a good (CSS) framework like HTML5 boilerplate and dissect its code. - Remake your last favorite designed site without looking at their code. Then compare afterwards. - Start creating your own framework for rapid prototyping. Add layout-rules to common UI elements: breadcrumbs, pane lists,…

> Find and read some front-end designer blogs.

Do you have some suggestions?

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

#29

Post by data-cat »

mzjs wrote: post #24
tbassetto wrote: post #19

Earlier quoted context omitted.

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

I'm not sure anyone really expects websites to look good in internet explorer anymore. As long as it's mostly functional, it's fine.

I think internet explorer users would disagree with you.

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

#30

Post by kanusterkund »

data-cat wrote: post #29
mzjs wrote: post #24

Earlier quoted context omitted.

I'm not sure anyone really expects websites to look good in internet explorer anymore. As long as it's mostly functional, it's fine.

I think internet explorer users would disagree with you.

But they can't, because the website doesn't work on IE.
Post reply on HN