Learn CSS Grid through interactive screencasts | Hacker News Reader

Learn CSS Grid through interactive screencasts

scrimba.com

206 pointsjudofyr40 comments

Here's a nice overview (no login required) of CSS Grid. Never heard of it today, but I will try it out.

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

And here is their similar guide for Flexbox which I actually have bookmarked and attached to a keybinding in my editor since it's so goddamn useful!

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

Recently saw this one on HN as well: https://darekkay.com/dev/flexbox-cheatsheet.html

I was going to post the same thing. Flexbox has a few conceptual hurdles, but is great once you get over them.

https://css-tricks.com = SEC_ERROR_EXPIRED_CERTIFICATE

oops

I actually have that saved as a PDF backup because it's such an easy and quick reference... and because I always forget the flexbox settings.

http://cssgridgarden.com/ is a gentle intro to grid in the form of a game.

http://flexboxfroggy.com/ is equally fun and instructive.

This is literally one of the coolest systems I've seen on hackernews over the last decade. This is going to change how people learn to code, and definitely going to change how it is taught! Great work, scrimba team!

Great tool and great tutorial! I have a sense that I have a good grasp of CSS grids now.

In my Firefox I did have an issue with the sound cutting out after a while. Chrome worked great.

And I think your voice sounded a bit robotic at times. I'm guessing the threshold on your mic is a bit to high.

Or from some segments I gathered that small sound fragments were being played in quick succession. If that is the case, I think fade in-out with some overlap would give a more natural sound. Though, do note that I almost never work with audio, so I may be far off here :).

I saw the same audio cut-out bug in Firefox 58.0b12 on Mac OS X, about 1 minute 10 into the very first episode and like you found using Chrome was a workaround.

We've been having some issues with Firefox yes. Sorry about that. Do you remember specifically which screencast it was?

Excellent screencast! Good pace, good explanations. Goodbye Bootstrap at last!

Which is worth learning in the long run, CSS Grid or Flexbox ? I'm confused over selecting one of them. :(

If you can only pick one CSS Grid seems more powerful. But they do mostly different things (with some overlap) so you really want to learn both if you can.

Just dive right into flexbox first, truly the best answer is to learn and master both, they were made to be used together for powerful layout combinations!

What about you learn both and then pick the most adequate in each situation? ;)

This scrimba looks like a pretty good technology for learning, but some of the highlighted videos are not up to par.

Have you guys recently started? Why not highlight quality videos at the top, to showcase this learning platform?

What technology is it exactly? I’ve never heard of interactive screencasts until now .. really cool!

Funny. I was just throwing together a little website and was trying to decide whether I should include Bootstrap for the sole purpose of laying out a grid. This looks like a better option.

Take a look at https://mincss.com/ if you are looking for a css framework that is really really small!

Min looks pretty cool, it's a shame it's no longer maintained.

I've been using spectre just out of happenstance, if anyone knows anything comparable I'd like to look around a bit.

https://picturepan2.github.io/spectre/

Thanks. I will look into this.

Also take a look at susy grid sustem (v.2 for maximum compatibility). Fully semantic.

If you can get away with it, try out native css grids.

I will try. I didn't even know they were a thing.

My CSS fluency is on a need-to-know basis!

Just when I was getting a really firm grip on Flexbox... now Grid is becoming usable everywhere.

I shouldn't be complaining, this fast pace of adopting useful tools is a paradise compared to the stagnation we had 5-15 years ago.

Don't fret: they're actually very complementary. I often use flexbox for arranging content within Grid cells.

This is a big thing people don't always get at first with Grid. It only replaces Flexbox where Flexbox was being used in a convoluted way to imitate what Grid does. It doesn't replace the more "natural" use of Flexbox to control the direction, spacing, and sizing of what for want of a better term I'll call "things in lines that may wrap".

I keep seeing CSS Grid mentioned, now I have something to get up to speed on it, thanks!

I'm not really a fan of frontend but I did always like CSS (probably due to its declarative nature) more than JS.

great concept, definitely one of the best product to come out of StartupLab.no

It is unfortunate that the course can't be taken anonymously and requires either a github login or an email and password. I understand the general motivation for that (a quid pro quo, an exchange of a bit of information for a valuable resource) but even then it is a disappointing trend to require personal identification for such type of valuable resources.

We've spent over a year building this product and about a month creating the content. Now we're giving it all away for free. I think it's fair that we ask people to authenticate.

But of course, feel free to disagree.

I was going to check this out, but couldn't find a privacy policy or other statement re what you might do with harvested email addresses. https://github.com/scrimba/community/blob/master/TERMS.md seemed like the obvious place to look. I'm not remotely anticipating anything malign, but clarity of intent is important.

One nit: I like listening to tutorials at more than 1x playback speed, and I was overjoyed that you added the feature but it’s not persisted between videos which is a bit annoying. But other than that This product is amazing!

Thanks for the feedback. I've filed an issue here: https://github.com/scrimba/community/issues/188. Will try to implement next week!

Gives away hundreds of dollars in value in exchange for an email address, any email address.

HN complains.

It's a potentially reasonable quid pro quo, but it would obviously be reckless to sign in to scrimba without any information on what they plan to do with the collected information. I'm looking forward to seeing what the platform can do once they have published relevant disclosures.

Can't you just create an anonymous GitHub account or a throwaway email address?

inboxalias.com usually works

Reply on news.ycombinator.com