Lesson 1: Software Installation

This semester we will be using several tools as we learn more about HTML and CSS. Below is the list of things you will need to install and setup. Even though we will not be using many of these for several weeks I highly recommend getting them all installed and verified as working this week. You will have a much better semester if you do.

NODE and NPM

Node is a Javascript runtime that has gained a lot of popularity in the last few years. There are many helpful tools and utilities that can be run using it. NPM is the Node Package Manager. It gets installed automatically with Node and is used to add and remove utilities. (For more detailed instructions visit:  http://blog.teamtreehouse.com/install-node-js-npm-windows)

BEFORE following the instructions below make sure that you do not already have Node installed. Open up a terminal (Mac) or CMD prompt/powershell (Windows) window and type node -v. If it gives you a version and NOT an error you already have Node.

Windows Users:

1. Download the Windows installer from the  Node.js® web site. You will want to grab the Recommended version (LTS) instead of the latest version!
2. Run the installer (the .msi file you downloaded in the previous step.)
3. Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).
4. Restart your computer. You won’t be able to run Node.js® until you restart your computer.
5. To verify that it worked type the following in the command prompt: node -v.  If you get the version number back you are good to go.

Mac Users: 

For the mac we are going to install the Node Version Manager (nvm) tool first, and then we will use that to install Node. There are a couple of advantages to doing it this way...the biggest of which is that it makes it really easy to switch versions of Node when needed (happens more than you might think as a developer) Before we can install that however, we need the Apple developer tools. You can get those in one of two ways:

1. If you think you will ever want to build native MacOs or IOS apps download and install XCode. Apple’s XCode development software is used to build Mac and iOS apps, but it also includes the tools you need to compile software for use on your Mac. XCode is free and you can find it in the  Apple App Store but it is quite large!  After you install it, open it at least once to accept the Terms.  The next step won't work unless you do.
2. *Recommended for most! If you don't want to download and install the full XCode (It's quite large), you can install just the developer tools by typeing the following into your terminal:

   xcode-select --install

Installing Node and NPM with nvm is pretty straightforward.

1. To install nvm, open the Terminal app and type: 

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

2. Once nvm is done installing you can grab the latest copy of the Long Term Support (LTS) version by typing the following:

   nvm install --lts

3. To verify that it worked type the following in the Terminal: node -v.  If you get the version number back you are good to go.

touch ~/.zshrc

SASS

We will be learning to use the SASS CSS Preprocessor this semester. SASS must be compiled before sending it to the browser. We will be using a Node.js Sass compiler. Becasue of this make sure to complete the Node installation instructions above before continuing.

• Open your Terminal or Command Prompt. On the Mac the Terminal.app comes installed by default. It's located in your Utilities folder. On Windows, run `cmd`.
• Install Sass. In your open terminal window type: npm install -g sass This will install Sass and any dependencies for you.

• Double-check. You should now have Sass installed, but it never hurts to double-check. In your terminal application you can type: sass --version

  It should return something like: 1.14.1 compiled with dart2js 2.0.0. Congratulations! You've successfully installed Sass.

  Sass actually has two versions of it's syntax. The original syntax is called just Sass and uses a .sass extention on your files. The other syntax which has become more popular and which we will be using is the SCSS syntax with a .scss file extention. The SCSS syntax is still considered Sass...and the compiler we just installed will work for either. The file extension will tell it what it needs to know.

StyleLint

• Open your command line (Terminal on the mac, Run->cmd on Windows)
• Enter the following:

  npm install -g stylelint stylelint-config-standard

Analyze-css

Like CSS Lint, analyze-css inspects your CSS for complexity and performance. 

• Open your command line (Terminal on the mac, Run->cmd on Windows)
• Enter the following:

  npm install -g analyze-css

UnCSS

UnCSS looks at your HTML and CSS files and removes unused CSS! This is great especially if you choose to use 3rd party libraries like Bootstrap.

• Open your command line (Terminal on the mac, Run->cmd on Windows).
• Enter the following:

  npm install -g uncss

SitePoint

We will be using materials from SitePoint.com (http://sitepoint.com). You will need access to their premier resources. The University has set up a special pricing for students of $13/semester. You must purchase an access code through the BYU-Idaho bookstore (ISBN: 2810000042072). Then use the URL that accompanies the access code to create a SitePoint Premium account.

CodePen

CodePen is a site that allows designers and developers to quickly test and share HTML, CSS, and JavaScript code. We will be using it to do the same this semester.

• You can sign up for a free account. To find the free plan you need to navigate to the CodePen website, click the Sign Up in the upper right hand corner, and then scroll down. The free plan option is below the paid plan options. Click Sign Up and enter your information.

Code Editor

• VS Code (https://code.visualstudio.com/): Free, Mac/Windows/Linux, good general purpose editor with great Git support.
• Brackets: This is an open source project run by Adobe. It excels with HTML/CSS/JS. It also has a strong following and many useful enhancements. Mac/PC/Linux - Free
• Atom: This is another great open source project. It also has some very good plugins, and has great builtin git support. Not quite as strong for HTML/CSS as Brackets, but probably better for other languages. Mac/PC/Linux - Free