I am, how can I put this, uninspired when it comes to design. I know a fair bit of CSS, but I’m not brilliant at it — my forte is in “the code” not “the style”. And, I don’t think I’m alone here — I hear “I finished X project but it looks awful” pretty frequently. It’s a widespread issue, not just with Junior Developers, but also for us oldtimers who’ve been coding forever but who are relatively new to webdev.
I always stray to “the code” and, as a result, my ability to style a page stagnates. I see wonderful, brilliant, styling — and it remains “that thing people who are better than me at design can do”. Sure, I can set colors, apply shading, setup fonts, and know how (technically) set the layout of the page using old-style floats/media queries, flexbox or CSS grid. Yet, I remain a coder — most of the truly inspiring things people who are great at CSS implement on their pages are beyond me.
With that in mind —
I’ll be announcing a new challenge for the month of November.
- Challenge: CSS (Specifics will be announced November 1, 2017)
- Duration: November 1–30, 2017
- Format: Series of challenges, finish as many as you can, as fast as you can.
Prep for those who want to hit the ground running:
Total Basics — if you’re just starting out with CSS:
- Learn to Code HTML & CSS — focus on the CSS portions
- CSS Tutorials for Beginners — Overview of the basics.
- CSS Positioning Tutorials — Basic CSS for positioning content.
Further Study — if you want to prep more for general CSS:
- Learn to Code Advanced HTML & CSS — focus on the CSS portions
- CSS Flexbox Tutorial — Additional tool for positioning content.
- CSS Animation Tutorial — Quick yet informative overview of CSS Animations.
Advanced Study — A further boost:
- SASS Tutorial — Quick tutorial of the basics of Sass
- CSS Tips & Tricks — A few quick Tips that may come in handy
- Getting Sassy with CSS — In depth coverage of Sass
- SVG Tutorial: With CSS Animation — Quick intro to SVG for drawing images which you can then manipulate with CSS
- Sass Workflow & Dev Server From Scratch Using Gulp — for setting up Sass in your local development environment
- Jade/Pug Tips in 90 Seconds — for those times you need to use a for loop to make a lot of HTML elements
- Emmet For Faster HTML & CSS Workflow — awesome tool for coding quickly (if you’re not already using it, check it out)
Topics to focus on:
- Complex Selectors
- Sass — will be very helpful
- Pug — could be helpful for speeding up HTML creation
The challenge will be open to all, beginners, experts, and everyone in between. Even I will participate. You can participate to whatever level you are comfortable, either by setting personal goal and striving for that, or by jumping into the fray and competing against others to see who can complete the most, to good quality, the fastest.