The surge of online businesses launching in the pandemic is an exciting trend that creates opportunities for web developers. There are a number of free resources for new web developers to learn best practices for a professional site. If you are interested in web design and development, try out these free resources on this list I’ve put together.

Learn to code for free!

Learn at your own pace and be a part of a well-established open-source (free) coding community. Spend some time on Free code camp’s courses and get familiar with how the different disciplines connect.

Free web developer resource image, Free Code Camp home page showing course list

The structure of coding has changed drastically over the last several years. There are so many paths to take in the digital world. The technology industry is heavily male dominant. If you are a woman or another marginalized group, be sure to network in the community for support. My advice is to get really good at something and build your own empire with like-minded folks.

Workout designs and practice coding on Codepen

Grab a free Codepen account and start building whatever the heck you want.

Codepen is great for building elements of a site like a menu, a footer, or a whole page layout. You can store your code and use it as a template for your projects.

Free web developer resource: Code Pen editor and display screens
colorzila free gradient generator screen
Colorzilla Gradient Generator User Interface.

Colorzilla Gradient Generator

This is an extension for Chrome and Firefox browsers.

Choose a readymade gradient from the Presets menu or create your own by clicking the color tabs on the custom color bar.

Once you are happy with your design, copy the code and paste it into your CSS file.

Generate endless color palletes with Coolors home page

This free tool makes choosing color palettes so easy for new web developers. Match up new combinations by tapping the space bar. Then save all your palettes in one place. Color codes can be easily placed into your style guides.

W3schools css attribute page

W3schools for reference and learning

Coding is always evolving and it’s important (and exciting) to keep up.

W3schools is the first reference I use when looking up CSS attributes. They provide examples and a space to work out a few examples for each attribute.

Contrast checker for WCAG compliance

If you are not familiar with Web Content Accessibility Guidelines (WCAG) it’s a way to ensure web pages are accessible to people with disabilities.

These guidelines run parallel to good coding practices and SEO. Compliance means using title tags, providing ‘alt’ tags for images, and transcripts or closed captions for video and audio content, for instance.

The guidelines are not optional for public websites, however not all web developers are aware they exist. Consequently, there have been several lawsuits between disabled citizen groups and businesses over inaccessible websites. Take advantage of open-source resources like to make sure your site is in compliance. You don’t need to be in compliance to have a live website, but you need to be ready for anyone who visits your site.

Leave a comment and let me know what digital design and marketing topics you’d like to know more about.