Having a few favorite web resources in your toolkit can not only save you time and effort in building your site, it can also make you look like a hero. Here’s my list of favorite web resources.
What Kind of Resources Are We Talking About Here?
If it wasn’t for all the fantastic web developer resources available to us for building websites, we’d literally be putting 10 times the effort into our builds, or just leaving out all the really cool stuff. Developer resources allow us to build fancy, eye catching websites with very little effort.
Most of us in the web design / development industry have very specific skill sets. We are programmers, or graphic designers or skillful with HTML and CSS. With enough time we can put them all together, but most of us have only mastered a few of the many skill sets required to build a complete website without the use of additional resources.
I’ve put together my absolute favorite list of resource websites that provide complete solutions or examples of code, web page layouts or web components and animations that you can use in your own projects
Who Are These Resources For?
Designer and Developers!
I’ve worked with many designers and developers over the years with many of them building their first project. Creating web templates and WordPress themes is basically a resource all on their own as they include many of the functional bits and pieces you’ll need for your complete website.
But what about those really cool things you’ve seen on other websites. What about those things your clients have seen on other websites and now want in their own site!
Probably the most popular question or request I get from my own circle of web developers is:
“my client saw [some incredibly cool feature] on [somewebsite.com] and they want it for their own, can you do it, or can you help me do it?”
I Want That in MY Site!
In other words your client saw a bit of eye candy that looks really cool on someone else’s website and now they want it on their own. And as with many clients, there is a level of assumption that we web developers are secretly masquerading as magicians, and can quickly and effortlessly pull such things out of our backsides on a whim. Horseshoes!
With a little help from Google, or the resources I’ve listed in this article we can at least fain the image of sorcery and find something that will meet or at least get close to what they are looking for.
When I’m approached with a how to, can you or where do I find type question from my developers, I try to provide at least two answers or solutions to their question. I start with the most expensive answer or solution first as it usually entails some type of custom design or programming and falls outside the realm of ‘how to’ and into the ‘can you’.
Custom Solutions = Expensive
Custom solutions are both expensive and usually entail some level of scope creep. If the client is on a budget (and they always are) that usually means eating some of the cost, or wrangling the client in, neither of which are beneficial to the relationship. So the first option usually gets wiped off the table, leaving room for the more cost effective solution.
I’m pretty sure most of the developers I work with try a google search before reaching out to me, but I do find a lot of folks will send me questions or request help with client on topics that they may not know what words or which search terms to use in their google search. So basically they see something cool, their client sees something cool, and they don’t know exactly what it is or what it’s called but they want it.
This is where I do the research first, and check out a few of my favorite resource sites. Websites that provide script, tools and examples of really cool web gadgets or page layouts that you can use in your own projects, most of them complete with tutorials and example files. You may not know what it’s called, but I’m pretty sure you can find something that closely resembles it on one of the sites listed below.
Each of the sites I’ve listed in this article provide ready made resources that you can download and add to your own site. The
tutorials are excellent and you’ll often find additional information in the comments section from other users who have found new and creative ways of modifying the resource.
My Favorite Developer Resources
By far one of my favorite websites. Codedrops provides a huge amount of content, and is updated regularly. And not just the site, but the tutorials and examples as well. I like to use Codedrops as not only a web resource for scripts and widgets but also for learning ‘how’ to do they things they do and provide. For me the site offers 3 very heavily used sections:
Tutorials: Here’s where you’ll find many great examples of animation, jQuery, CSS and pretty much anything that is cutting edge in web development you’ll find here. Probably the first place I go to learn how to do new things, by first finding an example, going through the tutorial then pulling apart the demo code provided.
Playground: This is where the really new and cutting edge can be found. Much of the scripts being used are custom designed as well, created specifically for the component or animation. This is the section you go to when you want to find something that will completely ‘WOW’ your client. And the great thing is you can follow the steps and tutorials without really needing to know a whole bunch about the coding. I would always recommend that you have a good grasp of HTML and CSS when working with any of these resources but the tough parts have been done for you.
Blueprints: This section of Codedrops has a great many web page layouts, functional designs that would take days or weeks to create on your own. The blueprints are basically styled so you can easily add them to your own website and have them blend in with a bit of CSS tweaking.
The licensing agreement is very generous, at least at the time of writing this article.
When it comes to web page layouts, I think Codyhouse takes the lead with the examples they offer. There are so many examples of web pages and widgets for web pages that you can use to start your project with such as:
But before we leave, Codyhouse offers something that most of us can all benfit from: online courses. They are only offering a few courses at this time, but I think many of us could really benefit from them:
- Learn HTML & CSS: an introduction to front-end design
- Mastering CSS Transitions, Transforms & Animations
Tutsplus is more about online tutorials and eLearning but they do offer example files and demonstrations which you may find useful. But their biggest offering is the information they provide through their tutorials. Tutsplus offers a huge selection of how to tutorials that provide code examples you can copy, paste and adapt. What I found with Tutsplus that I don’t find on many other eLearning sites are the tutorials are quick, and to the point. Many of the tutorials are one pages that get you in and out in under 5 minutes.
The site for the really cool and sometimes bizarre! When I first found CodePen I was amazed by all the unique Picked Pens being displayed on the home page. My first impression was ‘holy __’, then my second was .. what would you do with these? So really cool scripts and animations you can find examples of to use, I’m just not sure how to use some of them, although I’m completely blown away by the effort put into designing them. I would recommend this site to anyone looking for something really eye catching, where an animation is required.
I love the quick and easy to navigation interface. And they have some really cool tools and scripts that you can use in your projects. Try the navigation panel out on the left side of the page and you’ll probably be impressed with the shear volume of categories. It may take a while to find what you like though, be warned. When I went looking for a specific type of script I got caught up a bit ( squirrel! ) looking at all the other bells, whistles and gadgets that I didn’t need.
On the Hunt
I’m always on the hunt for even more awesome developer resources. If you’ve come across any, drop me a line, I’d love to know about them!