HN Explorer

Ask HN: Any step by step guide to get better in CSS with projects?

14 points by dprophecyguy ↗ HN
I believe that you only learn when you truly build something. I have tried to learn CSS a lot of time but after learning selectors and some basic properties I forget them because I don't use them a lot. This time I am thinking to put around 15-20 days continuously but I need some structured course with projects. I am trying to find out but unable to really get what I need. I am aware of freecodecamp.org and I have already finished it in 2 days. All I need is to practice for next 20 days.

Please help me with some resources or challenges type project that aims to make you better at CSS.

9 comments

[ 2.0 ms ] story [ 32.4 ms ] thread
andrei_says_
I use CSS on a regular basis and forget the parts I don’t use often. So, even if you do one project, unless you continue using CSS Daily, you may find that you forget the some of the specifics.

I’ve found these CSS games very fun and useful for zero effort, pleasurable, highly effective and well structured learning:

https://flukeout.github.io/

https://cssgridgarden.com/

https://flexboxfroggy.com/

Some resources I find myself using all the time:

Https://css-tricks.com

https://developer.mozilla.org/en-US/docs/Web/CSS

Https://caniuse.com

Fsp2WFuH
I suck at CSS but I'm the only one working on my project, so I have no choice but to get good at it. I know I was writing bad CSS, so what I did was google videos recorded at conferences where they talked about refactoring CSS. Refactoring CSS is not exactly basics, but it helps you understand potential problems that arise from writing bad CSS so you know how to deal with it in the future or prevent the issues in the first place.

https://www.youtube.com/watch?v=kbGYPm9uYfk

deadcoder0904
I did that. The only way you learn is by building lots of projects. So I made 100dayz [0] where I coded for 100 days to build something beautiful & keep track of it.

The projects are different, sometimes just HTML & CSS & JS & sometimes just Node JS or something else.

Make your own projects & build it everyday for a year. That way you will learn stuff.

The best course that will teach you Advanced CSS & SASS [1] is from Jonas. It is the absolute best which teaches Cascading & how CSS actually works. If you do that, you won't need anything else other than practice. And if you can't afford it, there are tons of resources on the internet but are scattered everywhere but they will teach you how to do it.

[0]: https://100dayz.js.org

[1]: https://www.udemy.com/advanced-css-and-sass

afarrell
Of those projects, which would you recommend someone imitate if they just care about getting better at html+css layout and aren't focusing on javascript?
deadcoder0904
Ohh I don't even remember those projects now. If you want to get better at CSS, then I recommend check any website you love & try to imitate that.

Like I love Stripe so what I will do is I'll try to imitate that & I did [0]. For inspiration of websites which have great CSS, check HyperPixel [1]

Take 1 website & try to imitate that. Now don't just go on for 30 days making something that you won't use yourself. Make something useful too. Like a StopWatch like BigTimer [2] or Pomodoro. That way you make a useful application & get great at CSS. Remember its 99% inspiration & 1% perspiration.

TL;DR - Make something that solves a problem & raises your skill level at CSS. Don't make same application or on the same level like you might be making boxes all the time. Don't do that. Raise your level every time. If you are a beginner, do something that requires intermediate level skills. If you are a intermediate, then make something that requires experienced level skills. And while doing that share it with the world. Make it on CodePen so people can learn from you. Small victories will make you happy & you will continue to build something great.

[0]: https://codepen.io/deadcoder0904/full/MrLBwG

[1]: https://hyperpixel.io

[2]: https://www.bigtimer.net

dprophecyguy
Thank you, bro, it was really helpful. On the process of working through the basics first. Learning flexbox and grid system. Will start working on Projects through hyperpixel then. But thanks for sharing all these awesome resources.
dprophecyguy
Thanks for the resources. I was looking something exactly like this. I needed some inspiration as in some project that I which I can refer and built upon. Your project will definitely help me.
afarrell
One thing you might also want to do is make flashcards in a Spaced Repetition app like https://apps.ankiweb.net/ about the edge cases of CSS. You might also http://book.mixu.net/css/ a useful guide to go through while building these.

But as far as deliberate practice, I think it is a good idea, but don't have a good set of pages to try imitating.