skip to Main Content
Our free WordPress themes are downloaded over 5 MILLION times. Get them now!
Colorlib content is free. When you buy through links on our site, we may earn an affiliate commission. Learn More

Top 15 Development Guides for Designers and Developers

Developers and designers have a few things in common, both have to work with each other at least once in a while, especially those who are heavily focused on app and front-end web development. Whether it’s learning how to use typography in your app designs, or determining the kind of devices we should be building our website for, both can learn from each other in a number of ways.

Web designers will often have to use technologies like HTML5 and CSS3 to perfect their designs, while developers will want to explore more about User Experience and User Interface to make sure the software they’re building is according to the standard requirements of both standards. And what about the browser? Both designers and developers are heavily involved with the browser, and it helps to get some guidance and insight in that area as well.

The following development guide resources will cover the basics of most popular scripting languages, as well as shed some light on tools that may just become your new favorites because of how convenient it is to use them.

Web Standards Sherpa

Web Standards Sherpa

The Web is a large concept, it entails so much that sometimes it can be difficult to really find good content for how to work with the web from the perspective of a developer and/or designer. The Web Standards Sherpa resource is a list of articles and guides that talk about CSS, Design, Content, JavaScript, Web Performance, Business aspects of building for the web, and tips on how to perfect your workflow amongst many other topics and categories. If you need best practices as a front-end person, this is the place to get them.

UX Myths

UX Myths

UX Myths debunks the false beliefs about user experience, and give the readers an opportunity to gain fresh and insightful perspective on how you should approach UX in your apps, websites and software. Each point is thoroughly explained and given a number of examples to showcase the reverse possibilities.

Typo Pocket Guide

A Pocket Guide to Master Every Day’s Typographic Adventures

This pocket guide for typography is the perfect companion for designers who are keen to learn the ins and outs of the technicalities of typography. This particular guide covers the basics of dashes, apostrophes, typefaces, fonts and more.

The State of Web Type

State of Web Type

Typography is always evolving, but the browser isn’t. This means that sometimes we need to explore the capabilities of each feature on each browser separately, and this resource makes it particularly easy. Just select the type of feature you wish to work with and explore its capabilities on different browsers.


QuirksMode for all your browser quirks

QuirksMode is an amazing guide towards browser compatibility information on the Internet. Although you don’t get a lot of information in the form of written content, there are a lot of facts that can be useful to learn when it comes to developing for the web. The compatibility tables let anyone explore the browser capabilities of technologies such as JavaScript, CSS and HTML.

Photoshop Etiquette

Photoshop Etiquette A Guide to Discernible Web Design

Photoshop is without question the most popular graphic design tool amongst designers, and even if you have been using Photoshop for the last couple of years, there is always something new to learn and explore. The Photoshop Etiquette guide is six chapter guide that talks about several aspects of Photoshop best practices, including areas like layers, effects, and design quality. All chapters are reasonably sized, so you won’t be stuck for hours learning something new.

MyDevice your device screen informations

Having trouble finding out the screen resolution size of your device? This tiny platform will tell you exactly all the details you need to know about your device size, and the kind of features your browser can execute. Great for developers who are constantly on the move.

Screen Sizes

Screen Sizes

Screen Sizes takes a different approach and instead outputs the hard data about different screen sizes, their operating system, as well as their unique aspect ratio. You can view the same information for tablets and computers by clicking the individual icons on the right-hand side corner. Works great for both web designers and web developers alike.

Device Metrics

Device Metrics Google Design

Device Metrics from Google is similar to the two sites above, but adds a little bit extra more devices to the list, and also outlines some important development information for each device. If you know the kind of devices you are building your apps and websites for, knowing this information can be crucial.

Dev Tools Secrets

Secrets of the Browser Developer Tools Secrets

Each browser today comes pre-built with a thing called developer tools. It’s a separate console panel for the browser that allows anyone to explore each website from the perspective of a developer. You can use the JavaScript console to execute custom client-side code, you can inspect the elements of the website structure, and you can do things like monitor the network and file activity. Each browsers developer tools are different, and this resource is a specific list of articles and tutorials on how to make the most of the developer tools of your favorite browser.

CSS Guidelines

CSS Guidelines 2.2.4 – High level advice and guidelines for writing sane manageable scalable CSS

CSS is the coating of the web. Without CSS the web is naked, just like us humans would be without any clothe. And because there is so much CSS around us, it’s important to understand the very practical basics and the standard regulations that ensure the CSS we do put out on the web is optimized and according to the latest standards.

This particular styleguide is not meant to be a style guide, rather an insight into how standardized CSS works and what developers and designers can do differently to ensure that the CSS they produce will be of the highest possible quality, making it much easier to produce on a large scale, as well as maintain.

CSS Cheat Sheet

CSS Cheat Sheet

CSS is a huge scripting language, and it keeps growing every year. Sometimes, in the flux of things, we can forget the very basic syntax of the language, at which point sites like this CSS cheat sheet can really become useful, and you only have to bookmark it once to be able to return to it whenever. Highly recommended for beginners.

Browser Hacks


Front-end web developers spend a lot of time in the browser, experimenting, executing code, tinkering and so much more, and as each developer has progressed over the years, they have left behind some interesting snippets and tricks that anyone can use to ease their development workflow. Learn about hacks for media queries, selector hacks, and even some cool JavaScript hacks for all of your favorite browsers. You can also share your own tips and tricks using a GitHub pull request.

Browser Diet

How to lose weight in the browser

The current trend in web development is a lot about performance; how to optimize for the best possible performance without losing quality. And this is what Browser Diet guide is all about — how to optimize for the web. It’s a list of insightful tips and experience reports that document different JavaScript, HTML and CSS features that can be either altered, or removed altogether without having to make any compromises.


-what Discover Unicode HTML Character Entities

amp-what is a quick, interactive reference of 30,000+ HTML character entities and common Unicode characters, 8859-1 characters, quotation marks, punctuation marks, accented characters, symbols, mathematical symbols, and Greek letters, icons, and markup-significant & internationalization characters. The way it works is you click the Load button at the top of the website, and then use the search function to find the kind of characters that you wish to use for your project or anywhere else you planned to use it. Such an extensive resource that you could spend hours playing with unique icons and characters that can spice up your apps and designs.

Disclosure: This page contains external affiliate links that may result in us receiving a commission if you choose to purchase mentioned product. The opinions on this page are our own and we don't receive additional bonus for positive reviews.

Alex Ivanovs

Alex is a freelance writer with more than 10 years of experience in design, development, and small business. His work has been featured in publications like Entrepreneur, Huffington Post, TheNextWeb, and others. You can find his personal writing at The Divine Indigo.

Back To Top

If you wish to withdraw your consent and stop hearing from us, simply click the unsubscribe link at the bottom of every email we send or contact us at [email protected] We value and respect your personal data and privacy. To view our privacy policy, please visit our website. By submitting this form, you agree that we may process your information in accordance with these terms.