A Running List of the Best Free Resources for Web Designers and Developers
This post originally began as a list of the top seven best free resources for web designers and developers.
And then I started doing my research … and I quickly discovered way, way more than seven!
We really are now living in the golden age of resources. There is just so much information (much of it free) that is available to us nowadays.
With very little effort, I can quickly discover a treasure trove of resources to help me learn absolutely everything under the sun — from new JavaScript frameworks like React and Vue, to programming languages like Python, to running remote servers, and tons more!
So what I’ve decided to create instead is a running list of all the free resources that I come across in my research.
For now, they are presented haphazardly as I come across them. As the list grows, I’ll organize the content into groups.
Here it goes …
CSS Peeper (csspeeper.com)
Have you ever wondered what font a particular website used? Or what kind of gradient background was on that button?
Well, you could try to find that website’s design system online (if the company behind it is large enough), or else you could just click “Inspect Element” and dig through the site’s source code — and endless layers of div blocks — until you find what you’re looking for.
Or you could just click on a button and be done with it!
CSS Peeper is a Chrome extension that allows users to easily (and beautifully) inspect the CSS styles on any website. I use this tool constantly when I’m browsing online for inspiration or trying to recreate a particular style.
Just click on the little purple icon in your Chrome tool bar, and quickly view CSS properties like font family, font size, line height, margin, padding, background color, and more.
You can even export nested assets as a .zip file!
One last thing: As a designer, I appreciate good-looking products. CSS Peeper delivers a beautiful UI that is easy on the eyes and much more pleasing to work with than Chrome’s DevTools.
Lapa.ninja (www.lapa.ninja)
Screw the news! I check this website, along with Dribbble, every single morning while I’m enjoying my morning coffee.
Created to “help designers find inspiration, learn and improve design skills,” Lapa.ninja is a collection of the very best designs from around the web.
Publisher Tinh Nguyen does an excellent job of maintaining the collection, which currently features more than 1,000 designs, and provides updates (almost) on a daily basis.
Figma (www.figma.com)
I’ve talked about this one before in a previous blog post. But Figma’s just so damn good that I feel like I should mention it again!
It’s a one-stop shop for cross-platform, collaborative design work, allowing for easy communication among all members of a design team.
My favorite part about this application is the ability to easily send out project links to my clients, so that they can view design prototypes directly within their browsers!
I design just about everything in Figma nowadays — from design mock-ups to Dribbble shots and even icons — and it’s quickly become one of the cornerstones of my workflow and business.
Gravit Designer (www.designer.io)
Still think of Adobe Illustrator as the only game in town when it comes to vector illustration? Think again.
Gravit Designer is a full-featured vector design application that provides many (if not all) of the bells and whistles that you’ve come to expect from professional design software like Illustrator and Affinity Designer with one huge advantage … it’s completely free!
It’s also cross-platform, with native applications for the browser, macOS, Windows, Chrome OS, and even Linux. Files are synced across devices through Gravit Cloud.
Now, I admit that Gravit isn’t exactly in a position to dethrone Illustrator at the top of the vector design game anytime soon. But even still, for a free product, Gravit is jam-packed full of features that will serve most people just fine.
CodePen Projects (www.codepen.io/pro/projects/)
In the past six years since it was founded, CodePen has managed to become one of the web’s largest (and most thriving) communities for showcasing “pens,” or snippets of HTML, CSS, and JavaScript.
Over this time, it has functioned as a browser-based text editor as well as an open-source learning environment, where developers can create, test, and gather feedback on their pens.
CodePen has recently taken a huge leap forward by launching its own Integrated Development Environment (or IDE) called CodePen Projects, which allows users to create full-scale websites within their browsers.
Users on the free plan are limited to just one project and 10 CodePen-hosted files, but that should be enough to get you started. Paid options are also available starting at just $9 per month.
Syntax.fm (syntax.fm)
If you’re working in web development and you’re not listening to Syntax, then what are you really doing with your life?
Billed as a “tasty treats podcast for web developers,” Syntax.fm has been one of the most beneficial resources in my web development education.
I’ve only been listening for a few months now. However, it has quickly grown into one of my favorite, go-to podcasts to listen to while I’m in the car, at the gym, or just folding laundry at home.
Co-hosts Wes Bos and Scott Tolinski are insanely knowledgeable about all things web development, and each episode is jam-packed full of value, knowledge, and good humor.
So grab yourself a nice cold LaCroix and start listening at Syntax.fm.
The Geocitiesizer (www.wonder-tonic/geocitiesizer/)
Okay, so this one won’t make you any more productive as a web designer or developer — just the opposite, really. But it should be good for at least a few good laughs.
The so-called “Geocitiesizer” is a web app that promises to “[m]ake any webpage look like it was made by a 13-year-old in 1996.” And for the most part, it delivers on that promise.
Some applications are too complex to be effectively “Geocitiesized.” But plug in just about any other domain into the URL address bar, and wait for the glorious 90s-era designs to grace your monitor (spinning globes and all!).
