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 13 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 many ways.

Web designers will often have to use technologies like HTML5 and CSS3 to perfect their designs. At the same time, 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.

The following development guide resources will cover the basics of most popular scripting languages and 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 find good content for how to work with the web from the perspective of a developer and 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 perfecting 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

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 JavaScript, CSS, and HTML technologies.

Photoshop Etiquette

Photoshop Etiquette A Guide to Discernible Web Design

Photoshop is 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.

Screen Sizes

Screen Sizes

Screen Sizes takes a different approach and instead outputs the hard data about different screen sizes, their operating system, and 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 extra more devices to the list and outlines some important development information for each device. Knowing this information can be crucial if you know the kind of devices you are building your apps and websites for.

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 a developer’s perspective. You can use the JavaScript console to execute custom client-side code, inspect the elements of the website structure, and do things like monitor the network and file activity. Each browser’s developer tools are different. 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 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 become useful, and you only have to bookmark it once to return to it whenever. Highly recommended for beginners.

Browser Hacks

Browserhacks

Front-end web developers spend a lot of time in the browser, experimenting, executing code, tinkering and so much more. 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. Using a GitHub pull request, you can also share your own tips and tricks.

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 making any compromises.

&what;

-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, Greek letters, icons, etc. markup-significant & internationalization characters. It works by clicking the Load button at the top of the website and then using the search function to find the kind of characters you wish to use for your project or anywhere else you plan 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.

Was this post helpful?

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.

This Post Has 0 Comments

Leave a Reply

Your email address will not be published.

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.