If you are taking INFO 343, or just want to learn Client-Side Web Development by going through these tutorials, you need to install a few tools and sign up for a few accounts. All of these things are free and available on all major platforms (Windows, OS X, and Linux).
Building a web site or application means wrangling a lot of files. If you work with others, coordinating changes to those files is almost impossible without a good version control system (VCS). The most popular VCS these days is git, which is often paired with the repository hosting service GitHub.
If you are on a Mac and have Homebrew installed, use it to install git:
brew install git. Otherwise, download and run their installer. After installing, open a new terminal window and use this command to verify that it's working:
If you see a version number, you're good to go. If you get a "command not found" error, something went wrong. Try installing it again and watch for error messages during the install process.
Sign-Up for GitHub
If you don't already have a GitHub account sign-up for a free account. This will let you create centralized code repositories in the cloud that are always backed-up. Free accounts can only create public repositories, but students can request the GitHub Student Developer Pack, which gives you free private repositories, and a slew of other discounts.
If you're taking INFO 343, you will use GitHub Classroom to create a private repository for all of your solutions to our challenges. Click the link in the first challenge assignment on Canvas to get started.
Building web sites and applications from scratch requires a good code editor that is optimized for web development. There are many to choose from, and you are free to use any editor you wish (including
vi 😱 ), but here are a few I recommend:
- Sublime Text: A very fast cross-platform code editor that sells for $70 (no student discounts, but you can register the license on many machines). It ships with less features than VSCode, but it can be easily extended using the Package Control add-in. It's written in C++ so it is much snappier than VSCode and does a better job with large files.
- JetBrains WebStorm: An incredibly powerful IDE optimized for web development, from the same people who develop IntelliJ IDEA. They charge a yearly subscription fee, but you can get a free license while you are a student. It's implemented in Java, so it takes a little while to start, and can sometimes feel more sluggish than Sublime or VSCode.
Standards-Compliant Web Browser with Developer Tools
Other Helpful Tools
- Node.js: if you are on a Mac and have Homebrew installed, you can use it to install node with the command:
brew install node. Otherwise, just download and run their installer.
- Live Server: This little command-line tool will auto-reload your browser whenever your source files change. This is insanely handy when doing client-side development, and will save you a ton of time. It requires Node.js to run, and you can install it using
npm, which comes with Node.js. Run
npm install -g live-serverat the command line. If you are on a Mac and this command reports an error about not having permission, use
sudo npm install -g live-serverinstead.