Resources

VS Code is a modern Integrated Development Environment (IDE). We will be using this extraordinary text and source code editor to create web sites.

Install VS Code

  1. Download and install from VS Code

Switching to a New IDE

I know, I know. I am switching IDE’s again.

IDE’s are a plenty; and at the end of the day-I see them like surf boards. I don’t surf. I just know that there are different surfboards - and the surfers I have talked to say surfboards do make a difference, but, really, its the surfer that does the surfing. Feel the same way about IDE’s. You will find the one that gets you where you want to go faster. Try them all, and see which one fits. Like surfboards, not every IDE is created equal. My colleagues recommended I try VS Code. After resisting (mostly cause it is built by Windows - I know we all have our biases), I finally moved away from Sublime Text and Atom. Both are amazing apps and paved the way for VS Code.

VS Code is:

  1. Open source (so is ATOM, and a good contendor)
  2. Works out of the box. The other editors require a lot of initial setup to make them go. As an instructor this decreases the barrier to entry. Setting up students that have never used an IDE (or touched code) a complicated setup process creates more overwhelm, anxiety, and confusion. When you are learning something new overwhelm, anxiety, and confusion are a default. We fear the unknown, and its my job to build trust and inspire students to code. By simplifying the process, students will feel more confident, and can focus on coding and completing the homework.
  3. Hella-fast. Sublime Text 3 is fast. For some reason Atom is sluggish in comparison (not sure why-I can just feel it).
  4. Feels like home. As a full-stack developer PHP Storm looked attractive as well, but VS Code seems to have all of its features, and after test driving both felt more like home for me.
  5. One of the school’s I teach at makes it really challenging to install software (too much red tape). VS Code was already approved and installed.

VS Code Plugin Essentials

Out of the box (unlike other open source IDE’s) VS Code just works. The rest is personal preferences and augmentation.
That said, you may see some cool things in my editor that are not in yours. The following is how I got there.
Think of it like driving my car. You will want to adjust the seat, mirrors, etc, to fit your needs.

HTML, CSS, and JS

Top JavaScript VSCode Extensions for Faster Development

You can cherry pick the ones you like. Pretty much installing all of them will set you up. I think I omitted one or 2, but all of em are good. Just personal preference.

PHP Dev

PHP IntelliSense
Essential Visual Studio Code Extensions for PHP Developers

x-debug for debugging PHP (optional)

PHP debugging is a little more involved then JavaScript. This is not 'cause of VS Code, but because PHP is server-side. To debug PHP, you will need something to catch the process of php - and link that to your editor - so you can step through your code. Something Chrome’s browser inspector does for JS - since its all in the browser.

To set up debugging in PHP, we use x-debug. You can install PHP-FPM so you can switch between each version of PHP - so you can develop for 5.6 and the different flavors of PHP 7. Each version if PHP you install, you will want to install X-Debug. Once that is installed/configured , you can use the following VS Code extension.
PHP-Debug

I still play with Node.js as a server-side - I imagine it’s simialr obstacle for debugging.

Google Chrome is a modern web browser with tools to help you develop/analyze/troubleshoot websites.

Install Google Chrome

  1. Download and install from Google Chrome

Why Google Chrome?

While it's important that you test in all the common web browsers, for the sake of common ground I will be using Google Chrome to teach the concepts covered throughout each course. To enhance your learning experience its required that you download and use Google Chrome for the duration of my classes.

Install Google Chrome Plugins

The following are plugins that I use in Google Chrome to provide additional functionality (e.g. guides, screenshots).

  1. Check My Links
  2. GuideLinr
  3. Page Ruler
  4. Full Page Screen Capture
  5. JSon Formatter
  6. Keyboard Shortcuts to Close Other/Right Tabs
  7. WhatFont
  8. Marmoset
  9. YSlow
  10. Web Developer
  11. Web Developer
  12. DevTools Autosave
  13. Instant Wireframe
  14. PHP Ninja Manual
  15. PerfectPixel
  16. IE Tab
  17. Chrome Daltonize
Git is version control. Github is a place to publish the work that you do and share with others.

Create a Github Account

  1. Create a free account on Github. Will also make it easier if you do this before downloading git desktop client, as it will ask for your Gihub account.

Install Git

For Mac

  1. Open Terminal, Copy and Paste the following command
  2. git --version

If Git is already installed, you will get the version number. If not, it will prompt you to install XCode Command Line Tools (yes you should install the XCode Command Line Tools).

For Windows

Install Git For Windows Video
  1. Download and install Git For Windows

Windows Atom Tip

The Platformio IDE Terminal Plugin gives you the ability to open terminal right in Atom. Since Windows uses Git Bash, its a good idea to point Atom to Git Bash for quick access/

Set the default shell in: Edit>>Settings>>Packages>>Platformio Ide Terminal>>Settings>>Shell Override

You can use the git's bash as proposed here as you probably already have git installed.

C:\Program Files\Git\bin\bash.exe

Why Git?

Git is the Industry standard for version control. Makes it easy to roll things back, try things out, and work in teams without concern for doing too much damage. You cna make a mess, and have the ultimate undo at your fingertips. You can merge your work with others, without worrying so much about conflicts. Well, it helps you manage any conflicts that arise as they come.

Why Github?

Github is a place for you to publish and collaborate on your work. The free version uses public repositories, wher paid for versions let you privatize your projects, if need be.

Photoshop is the digital hub for most Graphic Design projects. While there are other apps out there, it is the industry standard. We will be using Photoshop to develop and manage our digital image assets for the web. At the end of the day, I won't know if you used Photoshop or another application. However, I will be teaching from Photoshop, so if you want to reduce the learning curve - this is a must have app.
  1. 10-day Free Trial of Photoshop
  2. Full Creative Cloud Suite Student Discount or there is also a discounted membership for the Creative Cloud Photography plan, which is Photoshop and Lightroom only can all be found here
CONTENT