15 of the best free resources for Web Development. | Digital by Default

15 of the best free resources for Web Development.

Published on 11 Mar 2019 - Design & development - 15 minute read

When building a website or working on a web project, there are many different free resources out there to help you on your way to creating something that you are proud of.

After building the new Digital by Default site and with it being still relatively early on in the year, I thought it would be a good time to compile a list of resources that myself and the team use to give us the help we need when working on projects.


1. Stack Overflow

This has to be one of the most useful sites out there for developers. If you have any questions about coding or just want advice on the best practices for your code then this is the place to go. The lovely community on stack overflow usually answer any queries within minutes.


2. Cheat Sheets for Web Developers & Designers

Do you sometimes forget keyboard shortcuts, function names, code structures, arguments and all of that ‘stuff’? Then this will really come in handy for you too. I came across this website which houses all of the best cheat sheets for design and development from all across the web. And the best part? It even has a coolness rating for each cheat sheet to let you know which documents really are the best to use.



So if you don’t know the difference between the four or what they are then this article may help you but a local server is a great thing to set up if you don’t have one already. Sure, you can do things through a web server but it will be considerably slower than if you were using a local server. It also helps to have a local testing environment that you can experiment with so you can become familiar with the process of developing a website.


4. CSS Tools

This is a site I use often created by CSSmatic that makes generating CSS for gradients or box shadows that bit easier as it allows you to visualise the output and then generates the code based on that so you don’t have to use any guesswork.


5. Answer the Public

Answer the Public gives you a bunch of suggestions about what your audience may be looking for. This can help in many ways but it definitely helps give you an insight into the motivations and emotions of the people behind a search query.


6. GIT

This is a huge one. GIT, at least for us, is massively important and we use it religiously to help manage our projects. We mainly use it for backing up our work and keeping track of changes but its uses are very extensive.


7. Invision

We use Invision to give our team and our clients a better understanding of a project. We will mock our website designs up first and upload them to Invision so that we can see exactly how our websites will look and work before they are built and go live.


8. Codepen

Codepen is great for many reasons, it can help you practice that thing you have been trying to get working for the last week or it can provide you with a great environment for you to build really cool little projects in. It is also really helpful for finding snippets of code that you can fork and make your own.


9. Susy

Susy is a lightweight grid-layout engine for Sass. It was made to help simplify responsive grid layouts by doing all the math for you. With things like flexbox & CSS Grids becoming more and more widely used, it is slowly reducing the need for Susy, however, I feel like it still deserves a place on the list as those newer technologies don’t always work with older browsers but Susy does which makes it a great little tool for helping develop those tricky responsive grids.


10. Wappalyzer

This one is a bit of a hidden gem. It’s hard to come across when looking for useful technology online but once you have it, it is very useful for identifying the technology that is used on certain websites and can help you discover new technologies that you can implement on your own sites.


11. Nth-Child Recipes

There are two different sites I use for helping with Nth-children, CSS Tricks Nth-child recipes page and the Nth-test. Both allow you to figure out the best way to target certain children in a class as we all know this can sometimes become very confusing very quickly.


12. Can I Use?

If you are wanting to develop websites that work in all browsers, all of the time, you will need to check that the code you are using works on those browsers so that’s where ‘Can I Use’ comes in. It tells you if the code you are wanting to use is supported by that browser so you’ll never have browser issues again! (Hopefully!)


13. Gradients

Aaah… Gradients, The 2017 web designers favourite tool. Well, if you’re creating quick mock-up developments and need a gradient to fill a hole then this site is really helpful. It gives you the code for loads of stunning gradients and all you have to do is scroll through and find the one you want.


14. Advanced Custom Fields

Now, this is actually a WordPress plug-in but I’m including it in this list because it’s something that makes our life so much easier when creating our custom WordPress themes. It allows you to manipulate the WordPress back end so that you can add in and create sections that wouldn’t normally exist. It’s definitely a must have if you are focussing on custom WordPress development.


15. Fluid-responsive font-size calculator

So for the final one, I thought I would throw in something simple but underrated. This tool is so useful when building responsive sites. If you’ve ever had the trouble where your fonts are just too big on mobile and don’t scale right then this tool is going to save you a lot of time. All you do is put in your smallest font and screen size and your largest and then it does the math for you. Simple!