5 Projects to Help You Master Modern CSS
Many claim CSS is not a programming language. I agree — it’s tougher. A mastery of CSS requires skills in design, determination, inventiveness, experience, as well as coding (especially when using preprocessors such as Sass).
CSS suggests layouts and styles to the browser. A browser can interpret those suggestions whichever way it chooses and, even then, the user or device can ignore or override any properties. Creating high-performance code which works well across all devices and screen resolutions is a challenge that few attempt or successfully complete. However, the rewards can be exhilarating.
Starting with the easiest, the following project suggestions will help you on your journey to CSS mastery using books available at SitePoint Premium.
1. Make a Site Printer-friendly
Visit a site you’re working on and attempt to print (or print preview) a page. Are you happy with the results?
HTML pages are a continuous medium which do not necessarily work well on printed media. Inappropriate sections, scaling, text sizes, column dimensions, and missing or cropped content all lead to an inaccessible printing experience that few developers consider.
Fortunately, print CSS can be developed within a few hours. It’s generally a matter of resetting styles (black on white), removing unnecessary sections (menus, hero images, forms, social media widgets, etc.), linearizing the layout, and reducing the paper and ink requirements.
Applying CSS Conditionally describes how to define
@media query rules including
Consider your Strategy Guide to CSS Custom Properties (from New Frontiers In Web Design) to determine whether CSS variables could help with printing properties. Also consider Accessibility (from CSS Animation 101) to switch off animations or print them in the best state.
2. Apply Theming to an Existing Site
A single color scheme is boring! Everyone expects a dark mode option in their OS and applications, so why not add one to your website?