10+ Web Resources for Front End Developers
Things on the web move so fast they make the idea of “time flies” seem slow. The World Wide Web has been available to the public since 1991, 25 years this fall. Most people today couldn’t imagine life without the web.
Developers are faced with a tremendous challenge today. The web is a moving target. So much so that WHATWG (Web Hypertext Application Technology Working Group) has chosen to refer to HTML as a “living document”, meaning it is constantly being edited and updated.
This means the tools we use and the items we refer to change constantly as well. This list of 10 web resources includes sites I have used for years, and a couple I’ve just discovered. They range from color references to HTML references to best practices. Are they perfect…no. Are they all-inclusive? …no. But you gotta start somewhere!
If you’re designing for the web today you’re using HTML5. And if you’re using HTML5 you are still faced with browser compatibility issues. This site is a great location to determine what features are compatible with your users most commonly used browser(s).
Originally known as ColorSchemeDesigner.com, paletton.com is the one tool in this list I have used and referred people to the longest. It is a great color planning and utilization site. Others have come along but it is still my go-to color scheme planner.
This is one of those “others have come along” sites I just mentioned. It began as kuler.adobe.com and has changed the kuler part to color (kuler is a Mauritian Creole word that means color). One of the benefits of this site are the thousands of color themes available.
HTML5 Cheat Sheet
The one page, downloadable reference to HTML5 tags. It is available as a PDF file or a .png file. Grab a copy and throw it in a centrally located folder so it’s there when you need it.
If content is king, typographic characters and correct grammar are important! A great reference for those who “get it” and for those who don’t. After all, according to Oliver Reichenstein, web design is 95% typography (please feel free to discuss among yourselves).
In case you didn’t get the concept I think regular expressions are powerful validation tools, here’s another resource. The last site had lots of code to use, this site has more information on the how-to part of things.
I mentioned best practices at the beginning of this post and this is one person’s interpretation. A series of recommendations dealing with content, presentation, and behaviors.
We can’t fit just 10 on this list so here are some more very helpful resources:
“Write front-end code that’s durable, reliable and would make NASA proud”. It has to be good if it would make NASA proud, right? This article is all about settings standards and then maintaining them. A wise choice.
Google “color picker”
This is a handy tool embedded into Google’s search page that will allow you to pick any color you want and get the hex and rgb values. Very useful when you need a specific color quickly.
Page Ruler Chrome Plugin
This is a plugin for Chrome that allows you to measure items or space on a webpage. This helps with creating a layout if you need to figure out how big something should be or where it should be located.
Eyedropper Chrome Plugin
This plugin allows you to get the color value of anything on a webpage. Just select the tool, mouse over the item, and it will give you the hex value of the color you are pulling from.
Brackets Text Editor
CSS Zen Garden
This site is a contest of sorts. It gives all the designers the exact same HTML page and then they style it in any way they want. The different types of designs are incredible to see and can be helpful in inspiring you with your designs.
Want free fonts that are easily applied to a webpage? Google has you covered with this website. It gives you all the information and instruction you need to apply their fonts.