HTML & CSS

5 Projects to Help You Master Modern CSS — SitePoint – Website Design Article

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…

Read More

10 Ways to Hide Elements in CSS — SitePoint – Website Design Article

There are multiple ways to hide an element in CSS, but they differ in the way they affect accessibility, layout, animation, performance, and event handling. Animation Some CSS hiding options are all or nothing. The element is either fully visible or fully invisible and there’s no in-between state. Others, such as transparency, can have a range of values, so interpolated CSS animations become possible. Accessibility Each method described below will visually hide an element, but it may or may not…

Read More

How to Edit Source Files Directly in Chrome — SitePoint – Website Design Article

This popular article was updated in 2020. A web developer’s typical day involves creating HTML web pages with associated CSS and JavaScript in their favorite editor. The workflow: Open the locally hosted page in a browser. Swear. Open DevTools to investigate the layout and functionality problems. Tweak the HTML elements, CSS properties, and JavaScript code to fix the issues. Copy those changes back into the editor and return to step #1. While tools such as live reloading have made this…

Read More

How to Create Printer-friendly Pages with CSS — SitePoint – Website Design Article

This article was updated in 2020 to reflect latest best practices in CSS print styling. In this article, we review the art of creating printer-friendly web pages with CSS. “Who prints web pages?” I hear you cry! Relatively few pages will ever be reproduced on paper. But consider: printing travel or concert tickets reproducing route directions or timetables saving a copy for offline reading accessing information in an area with poor connectivity using data in dangerous or dirty conditions —…

Read More

Understanding and Using rem Units in CSS — SitePoint – Website Design Article

CSS units have been the subject of several articles here on SitePoint (such as A Look at Length Units in CSS, The New CSS3 Relative Font Sizing Units, and The Power of em Units in CSS). In this article, we increase the count by having an in-depth look at rem units, which have excellent browser support and a polyfill if you need support for old IE. This article was updated in December, 2019 to reflect the current state of rem…

Read More

9 of the Best Animation Libraries for UI Designers — SitePoint – Website Design Article

This article was updated in October 2019 to reflect the current state of animation libraries. We’re going to run-through 9 free, well-coded animation libraries best-suited to UI design work — covering their strengths and weaknesses, and when to choose each one. Take your CSS skills to the next level with our book CSS Master, 2nd Edition by Tiffany B. Brown – covering CSS animations, transitions, transformations and much more. Front-end web design has been through a revolution in the last…

Read More

How to Build Unique, Beautiful Websites with Tailwind CSS — SitePoint – Website Design Article

When thinking about what CSS framework to use for a new project, options like Bootstrap and Foundation readily jump to mind. They’re tempting to use because of their ready-to-use, pre-designed components, which developers can use with ease right away. This approach works well with relatively simple websites with a common look and feel. But as soon as we start building more complex, unique sites with specific needs, a couple of problems arise. At some point, we need to customize certain…

Read More

UI Code Challenge #1 – Heartbeats — SitePoint – Website Design Article

Do you ever find that the UI screens that we see in blockbuster movies, television, and games are so much more fun than the UIs we might build at work? Here’s your chance to code something fun and maybe even win a $100 Amazon Gift Card. Starting from today, we’ve got 4 quick fortnightly UI coding challenges to test your skills and problem-solving abilities. You get the chance to show off your skills while maybe learning a trick or two…

Read More

A Beginner’s Guide to Pug — SitePoint – Website Design Article

SitePoint Premium gives you an entire collection of books covering developer essentials like Pug, Gulp, Git and more. Join now. As web designers or developers, we likely all have to write our fair share of HTML. And while this is not the most difficult task, it can often feel a little boring or repetitive. HTML is also static, which means that if you want to display dynamic data (fetched from an API, for example), you invariably end up with a…

Read More