
Ask HN: Any step by step guide to get better in CSS with projects? - dprophecyguy
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&#x27;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.<p>Please help me with some resources or challenges type project that aims to make you better at CSS.
======
AlexITC
As another user said, I recommend
[http://cssgridgarden.com/](http://cssgridgarden.com/) too.

Also, if you like to practice, you are welcome to improve the UI of this
project: [https://cryptocoinalerts.net/](https://cryptocoinalerts.net/)

------
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](https://100dayz.js.org)

[1]: [https://www.udemy.com/advanced-css-and-
sass](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](https://codepen.io/deadcoder0904/full/MrLBwG)

[1]: [https://hyperpixel.io](https://hyperpixel.io)

[2]: [https://www.bigtimer.net](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.

------
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://flukeout.github.io/)

[https://cssgridgarden.com/](https://cssgridgarden.com/)

[https://flexboxfroggy.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://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](https://www.youtube.com/watch?v=kbGYPm9uYfk)

------
afarrell
One thing you might also want to do is make flashcards in a Spaced Repetition
app like [https://apps.ankiweb.net/](https://apps.ankiweb.net/) about the edge
cases of CSS. You might also
[http://book.mixu.net/css/](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.

