Course Web Design Toolkit

The good news is that there’s no shortage of free and paid tools that you can use to use to create your website. Everyone has their own preference and you’re welcome to use whatever tools you’re comfortable with that align with the overall project goals. First, let’s look at some of the types of software that you’ll need:

Prototyping Tools

Before we even get to coding, we need to create our designs. Depending on the fidelity of prototype, you’ll need more sophisticated tools. Most of the tools listed here charge a monthly subscription fee, but can be evaluated for free on a limited trial basis. In this course, we’ll be creating high fidelity digital prototypes. In this course we’ll be using Adobe XD, which is available at no charge.

Graphic Design Tools

You’ll need access to tools that let you work with images. Professional designers will generally work with in Adobe’s Creative suite (Photoshop, Illustrator), but if you’re looking for lower cost, simpler options, you can try free image editing tools like the ones mentioned in this TechRadar article on free photo editors.

Code Editor

You can write code in any text editor (like Window’s NotePad or Mac’s TextEdit), but it’s better to use a built-for-purpose tool to help you write and debug your code. Again, there are no shortage of options and you’re welcome to use any tool that you like for coding, but a suggested starting place would be to check out Brackets, Adobe’s open source code editor, or Atom from GitHub. Both are free.

Need help? Check out the Getting Started with Code Editors page

Web Browsers

Websites behave differently across different browsers (and browser versions). It’s ideal to have access to the most common browsers, like Chrome, Edge, Internet Explorer (9-11), Safari, Firefox, and Opera, so that you can test your site and make sure that you don’t have any surprises. You’ll also want access to a variety of mobile devices to see how your site behaves across Apple and Android devices and on different screen sizes.

File Transfer Tools

All of your files will need to be hosted on an external web server to work on the Internet. You’ll need a file transfer protocol (FTP) application to move files from your local repository to the web. A free FTP tool is FileZilla.You can also FTP directly from certain code editors or version control systems like Git.

Repository & Version Control

Another commonly used tool is Git. Git is an open source distributed version control system that allows users to collectively work on projects. In Git, every developer’s working copy of the code contains the full history of changes. A popular front-end client for Git is GitHub. The code editor Atom integrates with GitHub and supports the FTP protocol. Project teams will want to set up a Git repository to share and synchronize files.

Need help? Check out the Version Control with Git & GitHub page

Web Hosting

In the course, we will be using web hosting on my personal web hosting services. Web domains will be provided to students as the teams are set up.

Task Management

In this course, we’ll be using Trello taskboards to manage the sprints and design/development tasks for our team web design project.