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.

Delve into Browser-based Developer Tools (from CSS Master) and Browser DevTool Secrets to discover how to examine and modify styles after switching to print rendering.

Applying CSS Conditionally describes how to define @media query rules including print stylesheets.

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.

Finally, How to Create Printer-friendly Pages with CSS (from CSS Tools & Skills) provides a full print-optimization tutorial with tips to save ink and paper costs.

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?

Until recently, theme switchers typically required an additional set of styles with JavaScript-powered switching controls. However, modern browsers make life easier with CSS Custom Properties (variables) and the prefers-color-scheme @media rule.

Strategies for Theming (from New Frontiers In Web Design) provides a range of ideas and considerations when designing your new theme.

Applying CSS Conditionally (from CSS Master) describes how to define @media query rules including prefers-color-scheme.

Finally, Modern CSS: Adding a CSS Dark Theme (from Modern CSS) provides a full dark-theme-enabling tutorial.

The post 5 Projects to Help You Master Modern CSS appeared first on SitePoint.