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.

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

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

Fonts

Responsive Web Design

JavaScript

Git & The Command Line

Images (& Responsive Images)

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

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

Online Boot/Code Camps

Hosting & FTP

Getting Hired

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

Overcoming a fear of public displays of writing (PDW) while teaching myself coding and hoping to make a career transition.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store