Free online tools are the norm for modern designers. Why reinvent the wheel if you can save time with a free resource? If you search around, you’ll find plenty of tools for patterns and color picking . But you’ll have a tougher time finding resources built around gradients. Source: 10Read More →


All static page generators have a single and seemingly straightforward task: to produce a static HTML file and all its assets. There are many obvious benefits to serving a static HTML file, such as easier caching, faster load times, and a more secure environment overall. Source: Overview of Popular StaticRead More →

Last year, I assembled A Collection of Interesting Facts about CSS Grid Layout after giving a workshop. This year, I worked on another workshop and I’ve learned some more exciting facts about the layout spec we all so love . Of course, I’m not going to keep my knowledge toRead More →

There’s a meme going around on Twitter that reads: “Undergrad: want to solve the world’s problems?! Learn computer science! Grad school: Want to solve the problems computer science is creating in the world? Learn philosophy, law, and allllll the social sciences” Like most memes, it’s funny thanks to its melancholyRead More →

We launched our agile project management tool Scrumpy a month ago. Since then we’ve been asked almost daily how we built the animations on our landing page. So here is everything you need to know to start adding animations to your website. ️‍ Finding the Right format Whenever you want to includeRead More →

× Local Revisions Your browser has a more recent version of this Pen stored. Click the timestamp and save your Pen to save the new version.Read More →

× Local Revisions Your browser has a more recent version of this Pen stored. Click the timestamp and save your Pen to save the new version.Read More →

Data visualization is the key to better understand bulky or complicated information. There are many ways to visualize your data i.e. you can design cool infographics or create interactive charts ‐ it all depends on your data and how you want to present it. Source: 35 Tools, Scripts and PluginsRead More →

Making Avengers ID Card In HTML And CSS Kunal Sarkar 2018-06-04T16:00:01+02:00 2018-06-04T16:17:31+00:00 Let’s suppose Tony Stark would like to redesign the ID cards of the Avengers, and he needs our help to create them in HTML and CSS. Source: Making Avengers ID Card In HTML And CSSRead More →

The 17th May 2018 is Global Accessibility Awareness day, which makes today the ideal time to consider how inclusive our experiences are for those users who may be disabled, differently-abled, or temporarily inconvenienced. 2017 was a big year for website accessibility lawsuits. Seyfarth and Shaw reported that, by year’s end, there were 814Read More →

Every website and landing page should have a clear call-to-action button. This encourages the user to click and perform an action, whether to make a purchase, start a trial, or sign up for an account. There is no single best way to design a CTA and you can use manyRead More →

By Ana Tudor On April 16, 2018 conic gradients, css variables, mask Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to makeRead More →

By Chris Coyier On April 14, 2018 There is no shortage of videos out there where you can watch people code with an educational vibe. A golden age, one might say. Here are a few that I’ve watched and really enjoyed lately:Read More →

Have you thought about the size of your site’s CSS? If your style sheet is ballooning, it could be delaying page rendering.  Though CSS isn’t the largest asset type you’ll serve, it’s one of the first that the browser discovers. Because the browser is blocked from rendering the page untilRead More →

All of us have large references of our favorite tech publishers in our shelves, and we know the monumental guide sites à la SelfHTML and others. Oftentimes, we wouldn’t even need the massive encyclopedia, as a slim helper would suffice to do the trick. Just checking something real quick. WhatRead More →