HTML & CSS

5 Projects to Help You Master Modern CSS

Craig Buckler
Share

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 Modern CSS 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.

3. Rework a Form Layout

Examine a form on your website, such as an enquiry or registration form. Unless it was coded fairly recently, it’s likely to be implemented with container DIVs and float-based layouts which possibly break on smaller screens. Older forms may use unnecessary JavaScript or have poor accessibility.

A Registration Form (from Form Design Patterns) describes the best ways to design, style, and code a form using HTML5.

CSS Grid allows you to eradicate unnecessary markup and make bulletproof responsive layouts without resorting to media queries. The following CSS Grid tutorials will get you up to speed:

Finally, Make Forms Great with CSS Grid (from CSS Grid Layout) provides a full tutorial which provides a grid-based form layout with float fallbacks for older browsers.

4. Make Your Site Faster

At the start of 2020, the average web page requires a 2MB download which takes 20 seconds to fully appear on an average mobile device. CSS accounts for 65KB spread over seven files. That may not seem significant, but stylesheet properties can make a difference.

Spend a few hours examining your existing site to determine whether it’s possible to replace or optimize images, fonts, and JavaScript effects with more efficient CSS. Your CSS code may grow, but overall weight will fall and performance will noticeably improve.

Testing Tools (from Jump Start Web Performance) and Debugging for UI Responsiveness (from CSS Master) explain how to use modern browser DevTools to assess performance and discover optimization targets.

Loading Assets on the Web (from New Frontiers In Web Design) describes how to use techniques such as critical CSS and progressive CSS loading to ensure stylesheets are loaded effectively. 20 Tips for Optimizing CSS Performance (from Modern CSS) provides a selection of practical tips.

Finally, Jump Start Web Performance contains dozens of quick, more intensive, and life-changing development suggestions to ensure your site remains fast for everyone.

5. Start a New Project or CSS Component

The project suggestions above can be used to improve an existing site, but there are no limitations or constraints when starting a new project from scratch. Options to consider:

  1. Build an online résumé. Bonus points for ensuring it’s responsive, prints well, and encoding all assets into a single HTML file which can be sent via email. (Tip: avoid adding JavaScript to ensure it won’t be blocked by email systems.)
  2. Build an interactive portfolio. A graphical list of all your sites with additional information when an item is clicked. A Grid layout is ideal but, if you really want a challenge, try a masonry layout. (CSS Grid cannot implement this yet, but consider how it could be achieved using CSS columns or a vertically ordered Grid layouts.)
  3. Code a graphical design. Perhaps choose an attractive idea from Dribbble or a similar design community and code the HTML5 and CSS3. Bonus points for creating it without a framework or JavaScript!
  4. Create CSS-only Images. Create a set of useful icons powered by pseudo-elements and CSS shapes, or build an image using gradients and shadows.
  5. Experiment with SVG and CSS animations. Try creating attractive logos, charts, progress bars, activity spinners, and more.

Developer and browser tools:

CSS Grid ideas:

Responsive CSS techniques:

CSS transitions and animations:

Combining CSS with SVG:

Now stop reading and get coding!