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?
3. Rework a Form Layout
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:
- Production-ready CSS Grid Layouts (from New Frontiers In Web Design)
- Creating Layouts with CSS Grid (from Master CSS), and
- CSS Grid Layout (from Jump Start Responsive Web Design)
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.
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:
- 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.)
- 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.
- Experiment with SVG and CSS animations. Try creating attractive logos, charts, progress bars, activity spinners, and more.
Developer and browser tools:
- The DOM, CSS and Animations (from Browser DevTool Secrets)
- How to Use Gulp.js to Automate Your CSS Tasks (from CSS: Tools & Skills)
- Jump Start Sass
- CSS Debugging and Optimization: Code Quality Tools (from CSS: Tools & Skills)
- CSS Debugging and Optimization: Developer Tools (from CSS: Tools & Skills)
- Life-Changing Diets (from Jump Start Web Performance)
- Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
CSS Grid ideas:
- Redesigning a Site to Use CSS Grid Layout (from CSS Grid Layout)
- Easy and Responsive Modern CSS Grid Layout (from CSS Grid Layout)
- Progressively Enhanced CSS Layouts from Floats to Flexbox to Grid (from CSS Grid Layout)
- Redesigning a Card-based Tumblr Layout with CSS Grid (from CSS Grid Layout)
- Better Responsive Structures with Grid Systems (from Jump Start Responsive Web Design)
Responsive CSS techniques:
CSS transitions and animations:
- CSS Animation 101
- Transitions and Animations (from CSS Master)
- Using CSS Transforms in the Real World (from Modern CSS)
Combining CSS with SVG:
- Animating SVG (from Practical SVG)
- Using CSS with SVG (from CSS Master)
- Real World Use of CSS with SVG (from Modern CSS)
Now stop reading and get coding!