Intro to Coding for Designers

Onboarding Checklist

• Sign up for Slack and say hello in the Coding for Designers channel!
• Install Zoom
• Install Atom or other Code Editors (listed below)
  • I will be using Firefox for the Inspector Tools throughout the course
• Sign up for Github account --> send me your username (make sure you're ok with it being your web URL, ie. username.github.io)
  • Github is where the class syllabus and demo files are stored!
• Sign up for a Figma account --> send me your Figma email
  • I'll invite you to the ICD project on Figma so you can see all our activities throughout the course
  • optional: Install Figma for desktop and intel mac

Virtual Background

Optional: Install the Coding for Designers virtual wallpaper in Zoom so we can all be in the same "space"

Code Editors

Suggested based on my personal experience as a designer who codes. As a designer, I am biased towards Atom, which has a better UI, larger font size, and better readability by default. I struggled to find a comfortable theme with Visual Studio Code, but you might have better luck with it.

Atom

Install Atom

Free, open source, developed by Github. Can update Github repos (and Github Pages) directly within Atom, although I've had trouble getting this to work. As a result, I still use Github for Desktop.

Suggested Settings

In Settings > Editor, enable Soft Wrap so your code wraps to the next line

Suggested Plugins

• Tag Closer - autocomplete HTML closing tags when you type </
• Beautify - I recommend enabling "Beautify on Save" in the package settings
• Live HTML preview - Browser window preview updates without having to save file
• Autocomplete file paths - complete file names while typing (ex. img/long-image-name.png)
• CSS Color Name - autocomplete CSS color names (ex. aliceblue)
• Color Picker - I set default to HEX
• Smart Quotes Plus - select text and use a shortcut to replace all quotes and apostrophes with smart ones. Don't use on HTML markup!

Visual Studio Code

Install VS Code

Free, open source, developed by Microsoft. Recommended by Adobe as the official replacement for Brackets. Can also update Github repos (and Github Pages) with this Github Extension. Features a built in hex code visual picker.

Suggested Plugins

• CSS Peek - View/edit CSS for current element in HTML docs
• CSS Class Completion - Autocomplete CSS classes in HTML docs
• LiveServer - Live HTML preview

Brackets

RIP. Brackets by Adobe will be discontinued on September 1, 2021. I've found Atom to be a suitable replacement, even though it lacks certain plugins like CSS Peek and CSS Class Autocomplete. If these are important to you, try Visual Studio Code.

If you are still using Brackets and want to upload to Github, please install Github for Desktop.