Possibly the Ultimate Web Development Resources and Tools List

Becoming a programmer: Diary entry #5

Image by Sharon McCutcheon, available on unsplash.com

At this point of my coding journey I have ploughed through countless resources, online and in books.

I’ve carefully taken note of the most useful resources, categorised them, and listed them here. Some are learning resources, others are tools, others are inspirational.

All of them are free and I will continue to update this list over time as I stumble upon new resources and topics.

CONTENTS:

• Front end overview
• Code/Text Editors
• Integrated Developer environments/Dev Tools
• HTML
• CSS
• Fonts
• Responsive Web Design
• JavaScript
• Git & The Command Line
• Images (& Responsive Images)
• Icons, Vectors, Clip Art, Favicons
• Accessibility
• Visual Design Process
• User, Browser, and Device Testing
• Online Boot/Code Camps
• Hosting
• Getting Hired

Front End Overview

• Frontend developer roadmap — a graphical flow chart of the topics to study to become a frontend web developed.
• Step by step guide to becoming a modern frontend developer — a list of resources laid out to help someone become a frontend developer.
• The 2020 Frontend Developer Crash Course for Absolute Beginners — this two hour YouTube video provides an amazing overview of the frontend developer process.
• A Timeboxed, Day-by-Day #100DaysOfCode Front-End Development Curriculum — possibly the best method to get an overview of what you need to know quickly.

Code/Text Editors

• Visual Studio Code — a free, open source code editor.
• Live Server — a live server extension for VS Code (so you don’t need to keep refreshing your browser to see how your code looks).
• Sublime Text — a text editor for code, markup, and prose, with a free version.
• Atom — another text editor.

Integrated Developer Environments/Dev Tools

• CodeSandbox — a space to quickly prototype and test ideas.
• JSFiddle — as above.
• CodePen — as above.
• Repl.it — as above.
• Chrome DevTools — a set of web developer tools built directly into the Google Chrome browser.
• Firefox Developer Tools — a set of web developer tools built into Firefox. You can use them to examine, edit, and debug HTML, CSS, and JavaScript.

HTML

• HTML Tutorial — this tutorial follows the latest HTML5 standard and lets you practice as you go along.
• Learn to code: HTML & CSS — a great online text book that really starts from the beginning and explains HTML (& CSS). Try this one if you don’t like the above.
• HTML Element Reference — a list of all HTML elements and their use
• The Ultimate HTML Cheat Sheet — includes all the tags listed in alphabetical order, as well as the availability of the tag from the previous HTML 4 version for comparison.
• HTML Cheat Sheet — a page of links to almost every resource you though you might need regarding HTML.
• HTML attribute reference — a list of all HTML attributes and what elements they can be used within.
• A few HTML tips — good tips for beginners working with HTML.
• Six tips to set up a better HTML document — exactly what it says on the tin.
• HTML Color Names — a list of the 140 ‘named’ colors available on HTML/CSS.
• Markup Validation Service — use this tool to validate your HTML markup and find errors.
• HTML5 Accessibility — this website tests which HTML5 features are supported by the major browsers.
• HTML5 Test — same as above except this one directly tests the browser you access the site with.
• Code Guide — a great overview of some standards to follow in order to develop consistent, flexible, and sustainable HTML and CSS.
• WTF, HTML, and CSS? — a great list of many of the most common frustrations that HTML and CSS can present for beginners.

CSS

• CSS-Tricks — the definitive CSS page.
• CSS-Tricks: a complete guide to flexbox — everything you need to know about CSS flexbox.
• CSS-Tricks: a complete guide to grid — everything you need to know about CSS grid.
• CSS-Tricks: complete guide to centering in CSS — everything you needed to know about centering in CSS.
• CSS Grid Garden — a quick game to help you practice CSS grid.
• CSS Cheat Sheet — a page of links to almost every resource you thought you might need regarding CSS.
• Grid by Example — a collection of examples, video and other information to help you learn CSS Grid Layout.
• The Experimental Layout Lab — beautiful layout examples and experimental designs.
• CSS Gradient Generator — a tool to help you create CSS gradients.
• CSS Patterns Gallery — just that, a gallery of CSS3 patterns for inspiration.
• 25 cool CSS animation examples to recreate — an article to help you learn CSS animation.
• CSS3 Generator — an amazing tool that reverse engineers CSS code based on an intuitive design interface.
• CSS Tools: Reset CSS — a great intro to and example of CSS resets.
• Formalize — a CSS framework for forms.
• ConAirCode — 20+Toggle Menu CSS Examples With Source Code
• CSS Link Pseudo-classes — this article gives a solid overview of the CSS link pseudo classes.

Fonts

• 8 Definitive Web Font Stacks — an article on web fonts and how to make sure you have a suitable font on any browser.
• CSS Font Stack — a complete collection of web safe CSS font stacks.
• Google Fonts — the web fonts available for use from Google.

Responsive Web Design

• Responsive Web Design Is… — a beautiful website focused on RWD with great examples as well as learning resources.
• Responsive Patterns — A collection of patterns and modules for responsive designs.
• Responsive Navigation — support to help you get your navigation bars responsive.
• Responsive Navigation Patterns — more support to help you get your navigation bars responsive.
• Mediaqueri.es — a wonderful gallery of examples of responsively designed websites.
• awwwards. — 50 examples of responsive web design.

JavaScript

• JavaScript crash course for beginners — a 1:40:29 Youtube video JS crash course for beginners.
• Learn JavaScript by creating a Tetris game — exactly that!
• 15 JavaScript Projects — hone your JavaScript skills building 15 projects
• [More coming here soon…JavaScript is the current focus of my studies.]

Git & The Command Line

• What is version control — a tutorial on version control.
• Conquering the Command Line — book on Unix and Linux commands for developers (first chapter available free).
• GitHub Git Cheat Sheet — key git commands in one place.
• 5 Git Commands you should know — exactly this, with code examples.
• (Another) GitHub Git Cheat Sheet — key git commands in one place.
• Resources to Learn Git — a list of resources to learn Git from.
• Learn enough Git to be dangerous — tutorial on getting started with Git.
• How to write a Git commit message — article on writing good commit messages and why this matters.

Images (& Responsive Images)

• GIMP (GNU Image Manipulation Program)— a freely distributed program for tasks such as image retouching, image composition, and image authoring.
• Responsive Breakpoints — a responsive image breakpoint generator to generate optimal responsive image dimensions.
• Optimizilla — an online image optimizer to shrink JPEG and PNG images to the minimum possible size, while keeping quality.
• Unsplash — freely usable images.
• Flickr, Creative Commons — creative commons images.
• Responsive Images 101 — a series of articles covering everything about responsive images.
• Responsive Images — examples and tips to get you started.
• An Alt Decision Tree — this page describes how to use the <alt> attribute of the <img> HTML element in different situations.

Icons, Vectors, Clip Art, Favicons

• Open Clip Art — an open clip art source.
• Freepik — graphic resources, including free vectors, stock photos, and icons.
• IcoMoon — free vector icons and more.
• InkScape — a free and open source vector graphics editor.
• Boxy SVG — a tool for editing SVG files.
• FavIcon — a favicon generator.
• ICO Converter — another favicon generator.
• Favicomatic — another favicon generator.

Accessibility

• Funkify — an amazing extension for Chrome that helps you to experience the web and interfaces through the eyes of extreme users with different abilities and disabilities.
• Web Content Accessibility Guidelines — from the Web Accessibility Initiative.
• Guidelines for Accessible and Usable Web Sites — a paper on observations of users who work with screen readers.
• WAVE — a web accessibility evaluation tool.

Visual Design Process

• Style tiles — a tool to support the visual design process that lays somewhere between a mood board and a mockup.
• Style Guides — a collection of website style guide resources.
• A Living Style Guide for GOV.UK — a great article about how the UK Government create and maintain their GOV.UK style guide for a site with a consistent look and feel.

User, Browser, and Device Testing

• Building a device lab — advice on how to build a device lab based on experience.
• Open device lab — find out where your nearest device testing lab is.
• Cross Browser Testing — test how your site looks on different browsers and devices.

Online Boot/Code Camps

• The Odin Project —perhaps the most comprehensive free, online web development boot/code camp with a full stack curriculum.
• FreeCodeCamp — free, certificated, and offers a wide range of tracks including Responsive Web Design (among many, many others).
• 700 Free Online Programming & Computer Science Courses — this is an amazing list from FreeCodeCamp of free online courses (and it keeps expanding).

Hosting & FTP

• Getting Your Pages on the Web — a great article about how to actually get your web pages live on the world wide web.
• Cyberduck — a free File Transfer Protocol solution
• FileZilla — another free File Transfer Protocol solution.
• Web Page Test — use this tool to test a website’s performance.

Getting Hired

• How to write a developer resume hiring managers will actually read — an article with advice on CV drafting.
• How to Write Freelance Proposals — a great article on drafting freelance proposals with a free template.

Follow my journey in <The Self-Taught “Coder”> on Medium.