DEV Community

loading...

Discussion on: How did you get better at CSS?

Collapse
mattjared profile image
Matt Jared

Reps. You gotta get your reps in.

  • Make 50 tiny things. Some examples: 1. make three buttons all with different hover states, center all the buttons and then stack them on mobile. 2. make a dead simple resume on codepen for your favorite movie or tv character including a picture. think a bunch of text and an image. what's the hierarchy of the text? make the name HUGE, what units did you use to make it huge? what units are available 3. make a custom form field and check it on different browsers (including your phone) safari on iphones is wild as shit for buttons. Look that up. Fix it! 4. strip your personal site down to bare bones and rebuild everything up with real life content but only css that you wrote or tracked down. and so on and so on...
  • Get the basics down cold via reading CSS Tricks and MDN (and other blogs). Box model, grids the OG way and the new slick way. See how Sass and Less work. Muck with mixins, functions, maps on your next assignment which is....
  • Make 50 more tiny things (even smaller than what I wrote before. Everybody has "cards" in web design now. Make a card with some funky background colors and another one with an image as the header and a third that does a barrel roll.)
  • Read other people's code and muck with it. Download the Bootstrap source code and go through every single partial and figure out what's going on with the UI elements.
  • Make 50 more tiny things.
  • Share what you know and have learned

It all comes down to reps IMO. The more you hit save and refresh to see something changed (whether you intended it or not) the closer you'll be to mastery. Or at least comfort in your job! =]

Collapse
aizkhaj profile image
Aizaz Khaja Author

This is pretty cool. If you have the time and energy, you should create a CSS bootcamp! And we're not talking bootcamp similar to what we have in the industry, but more of a "ok! let's get these exercises done today, GO!" :D