Photograph of tools on a bench
Part of the HTML Reading List

Goal: Setup an and for writing HTML & CSS; install and explore web development browser extensions. Advanced learners have the opportunity to install tools to enhance their web development workflow.

Prerequisites: Introduction to Web Development

Required skills: Basic computer literacy (Windows or OS X)

Total time (core material): 30 minutes

Core Material

  1. Introduction

Setup your operating system and its associated built-in text editor:

  1. MS Windows
  2. Notepad
  1. Mac OS X
  2. TextEdit

Set your chosen editor with an appropriate font for coding:

  1. Coding Fonts

Setup your browsers to make them a useful web development testing environment, harden their security, improve your web sense, learn some keyboard shortcuts, and understand browser development.

  1. Firefox
  2. Chrome
  3. Use Chrome Workspaces
  4. Safari
  5. Harden Your Browser
  6. Improve Your Web Sense
  7. Essential Browser Keyboard Shortcuts
  8. Browser Development
  9. 4 New Browsers

Intermediate to advanced learners may choose to setup one of the following as their editor:

  1. Notepad++
  2. DreamWeaver
  3. DreamWeaver Web Publishing Settings

You will also need to set up an image editor; the most popular in the industry are part of the Adobe Suite:

  1. PhotoShop

Advanced learners may also want to choose tools to speed up their development process:

  1. Emmet
  2. LiveReload

You may also want to set up version control:

  1. Introduction to Version Control Systems

Supplementary Material

Watch the fourth film in Jessica Hische and Russ Maschmeyer’s “Don’t Fear The Internet” series: Don’t Fear The Browser. (Total time: 4 minutes)

Watch Introduction to Text Editors at the Treehouse site (Total time: 6 minutes. Note that watching the full video will require a Treehouse membership).

Recommended Reading

Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics (2012) - read the end of Part I, Chapter 1: What To I Need To Buy, Hardware, and Software. Optionally, take the quiz at the end of the chapter.

Read HTML and CSS: Design and Build Websites Creating a Web Page On A PC and Mac (pages 29 - 32).

When You're Done

Once you’re finished setting up your tools and have learnt a little bit about them, you’re ready to start writing HTML, which comes in the next section.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.