Tools that we will have to prepare include:
As soon as we start writing code for HTML, CSS, and JavaScript, we need a code editor. A code editor is an indispensible tool to develop websites. Technically, you will only need text editors such as TextEdit in OS X or Notepad in Windows to write and edit code. However, by using a code editor, your eyes will be less irritated.
Similar to Microsoft Word, which has been specially designed to make word and paragraph formatting more intuitive, a code editor is designed with a set of special features that improves code writing experiences such as syntax highlighting, auto-completion, code snippets, multiple line selection, and supporting a large number of languages. Syntax highlighting will display code in different colors, enhancing code readability and make it easy to find errors in the code.
My personal preference for a code editor, and the one that I will use in this module, is Sublime Text (http://www.sublimetext.com/). Sublime Text is a cross-platform code editor available for Windows, OS X, and Linux. It can be downloaded free for evaluation for an unlimited time.
One thing that I love most from Sublime Text is Package Control where we can search, install, list, and remove extensions from Sublime Text conveniently. However, Package Control does not come pre-installed with Sublime Text. So, assuming you have installed Sublime Text (which I think you should have), we will install Package Control in Sublime Text.
Perform the following steps to install Sublime Text Package Control; this will allow us to install Sublime Text extension easily:
- The easiest way to install Package Control in Sublime Text is through the Sublime Text console. Open the console by navigating to the View | Console menu in Sublime Text. You should now see a new input field show up at the bottom, as shown in the following screenshot:
- Due to the overhaul made in Sublime Text 3 that changed almost the entire API, the Package Control is now separated in two versions, one for Sublime Text 2 and the other one for Sublime Text 3. Each version requires a different piece of code to install Package Control. If you are using Sublime Text 2, copy the code from https://sublime.wbond.net/installation#st2. If you are using Sublime Text 3, copy the code from https://sublime.wbond.net/installation#st3 instead.
- Paste the code that you have copied from step 2 into the console input field, as shown in the following screenshot:
- Press Enter to run the codes and eventually install Package Control. Keep in mind that the process may take a while depending on your Internet connection speed.
As mentioned in the first chapter, we are going to use these CSS preprocessors to compose styles in two of the projects in this module. Having installed Sublime Text and the Package Control already, you can now easily install the Sublime Text packages that enable color highlighting for LESS and Sass/SCSS syntax. Go ahead and follow the instructions that we have just shown to install LESS and Sass/SCSS packages, their syntax can be found at the following locations:
- LESS Syntax for Sublime Text (https://github.com/danro/LESS-sublime)
- Syntax Highlighting for Sass and SCSS (https://github.com/P233/Syntax-highlighting-for-Sass)
Having a local server set up and running on our computer is necessary while developing a website. When we use a local server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).
There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.
As mentioned in the first chapter, we are going to use these CSS preprocessors to compose styles in two of the projects in this module. Having installed Sublime Text and the Package Control already, you can now easily install the Sublime Text packages that enable color highlighting for LESS and Sass/SCSS syntax. Go ahead and follow the instructions that we have just shown to install LESS and Sass/SCSS packages, their syntax can be found at the following locations:
- LESS Syntax for Sublime Text (https://github.com/danro/LESS-sublime)
- Syntax Highlighting for Sass and SCSS (https://github.com/P233/Syntax-highlighting-for-Sass)
Having a local server set up and running on our computer is necessary while developing a website. When we use a local server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).
There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.
of the projects in this module. Having installed Sublime Text and the Package Control already, you can now easily install the Sublime Text packages that enable color highlighting for LESS and Sass/SCSS syntax. Go ahead and follow the instructions that we have just shown to install LESS and Sass/SCSS packages, their syntax can be found at the following locations:
- LESS Syntax for Sublime Text (https://github.com/danro/LESS-sublime)
- Syntax Highlighting for Sass and SCSS (https://github.com/P233/Syntax-highlighting-for-Sass)
Having a local server set up and running on our computer is necessary while developing a website. When we use a local server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).
There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.
server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).
There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.
XAMPP is available for Windows, OS X, and Linux. Download the installer from https://www.apachefriends.org/download.html; pick the installer in accordance with the platform you are using right now. Each platform will have a different installer with different extensions; Windows users will get .exe, OSX users will get .dmg, while Linux users will get .run. Perform the following steps to install XAMPP in Windows:
- Launch the XAMPP
.exeinstaller. - If the Windows User Account Control prompts Do you want to allow the following program to make changes to this computer? click on Yes.
- When the XAMPP Setup Wizard window appears, click on Next to start the setup.
- XAMPP allows us to select which components to install. In this case, our web server requirement is the bare minimum. We will only need Apache to run the server, so we deselect the other options. (Note: the PHP option is grayed out; it cannot be unchecked):
- After confirming the components that will be installed, click on the Next button to proceed.
- You will be prompted for the location to install XAMPP. Let's just leave it to the default location at
C:\xamppand then click on Next. - Then, simply click on Next for the next two dialogs to start installing XAMPP. Wait until the process is complete.
- When the process is complete, you should see the window stating Setup has finished installing XAMPP. Click on the Finish button to finalize the process and close the window.
Perform the following steps to install XAMPP in OS X:
- For OS X users, open the XAMPP
.dmgfile. A new Finder window should appear, containing the actual installer file which is typically namedxampp-osx-*-installer(the asterisk (*) represents the XAMPP version), as shown in the following screenshot:
- Double-click on the installer file to start the installation. XAMPP requires your computer credentials to run the installer. So, enter your computer name and password and click on OK to give it access.
- The XAMPP Setup Wizard window appears afterwards; click on Next to start the setup.
- Unlike Windows, which lists the components per item, the OS X version only shows two components, namely XAMPP Core Files and XAMPP Developer Files. Herein, we will only need the XAMPP Core Files, which comprises Apache, MySQL, and PHP that we need to run the server. So, deselect the XAMPP Developer option and then click on the Next button to proceed.
- You will be prompted that XAMPP will be installed in the
Applicationsfolder. Unlike Windows, this directory can't be edited. So, click on Next to proceed. - Then, simply click on the Next button for the next two dialogs to start installing XAMPP. Wait until it is complete.
- When the installation is complete, you will see Setup has finished installing XAMPP displayed in the window. Click on the Finish button to finalize the process and close the window.
Perform the following steps to install XAMPP in Ubuntu:
- Download the XAMPP installer for Linux. The installer comes in the
.runextension and is available for 32-bit and 64-bit systems. - Open the terminal and navigate to the folder where the installer is downloaded. Assuming it's in the
Downloadsfolder, type:cd ~/Downloads
- Make the
.runinstaller file executable withchmod u+x, followed by the.runinstaller filename:chmod u+x xampp-linux-*-installer.run
- Execute the file with the
sudocommand followed by the.runinstaller file location, as follows:sudo ./xampp-linux-x64-1.8.3-4-installer.run
- The command from Step 4 will bring up the XAMPP Setup Wizard window. Click on Next to proceed, as shown in the following screenshot:
- The installer lets you select which components to install on the computer. Similar to the OS X version, there are two components shown in the option: XAMPP Core Files (containing Apache, MySQL, PHP, and a bunch of other things to run the server) and XAMPP Developer Files. As we do not need XAMPP Developer Files, we can deselect it and then click on the Next button.
- The installer will show you that it will install XAMPP in
/opt/lampp. The folder location can't be customized. Just click on the Next button to proceed. - Click on the Next button for the next two dialog screens to install XAMPP.
We have just set up a local server in our computer with MAMP. You can now access the local server with the http://localhost/ address through the browsers. For OS X users, however, the address is your computer username followed by .local. Say that your username is john the local server is accessible through john.local. The local server directory path is different for each platform:
As we will be using LESS and Sass to generate the style sheets of our responsive website, we will need a tool that will compile or change them into normal CSS format.
Back when CSS preprocessors were just gaining momentum, the only way to compile them was through command lines, which may have been the stumbling block for many people to even try CSS preprocessors at that time. Fortunately, we now have plenty of applications with a nice graphical interface to compile CSS preprocessors; the following is the list for your reference:
|
Tools |
Language |
Platform |
Price |
|---|---|---|---|
|
WinLESS (http://winless.org/) |
LESS |
Windows |
Free |
|
SimpLESS (http://wearekiss.com/simpless) |
LESS |
Windows, OSX |
Free |
|
ChrunchApp (http://crunchapp.net) |
LESS |
Windows, OSX |
Free |
|
CompassApp (http://compass.handlino.com) |
Sass |
Windows, OSX, Linux |
$10 |
|
Prepros (http://alphapixels.com/prepros/) |
LESS, Sass, and so on |
Windows, OSX |
Freemium ($24) |
|
Codekit (https://incident57.com/codekit/) |
LESS, Sass, and so on |
OSX |
$29 |
|
Koala (http://koala-app.com/) |
LESS, Sass, and so on |
Windows, OSX, Linux |
Free |
I will try to cover as many platforms as possible. Regardless of which platform you are using, you will be able to follow all the projects in this module. So, here we will be using Koala. It's free and available on three major platforms, namely, Windows, OSX, and Linux.
Installing Koala in each platform is pretty straightforward.
Ideally, we have to test our responsive websites in as many browsers as possible, including beta browsers such as Firefox Nightly (http://nightly.mozilla.org/) and Chrome Canary (http://www.google.com/intl/en/chrome/browser/canary.html). This is to ensure that our website is functioning well in different environments. However, during the development, we may pick one primary browser for development and as the point of reference of how the website should be put on display.
In this module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web development tool. Chrome comes with a set of tools that are ahead of the other browsers. The following are two of my favorite tools in Chrome when it comes to developing responsive websites.
One of the pitfalls of using CSS preprocessors is when debugging the style sheet. As the style sheet is generated and the browser refers to the CSS style sheet, we will find it hard to discover where exactly the code is declared within the CSS preprocessor's style sheet.
We may tell the compiler to generate comments containing the line numbers of where the code is actually written, but source maps solve this snag more elegantly. Rather than generating a bunch of comments that eventually pollute the style sheet, we can generate a .map file on compiling CSS preprocessors. Through this .map file, browsers such as Chrome, with source maps enabled, will be able to point directly to the source when we inspect an element, as shown in the following screenshot:
There isn't any substitution for testing a responsive website in a real device, a phone, or a tablet. Each device has its own merits; some factors, such as the screen dimension, the screen resolution, and the version of mobile browser, will affect your website displayed on the device. Yet, if that is not possible, we can use a mobile emulator as an alternative.
Chrome is also shipped with a mobile emulator that works out-of-the-box. This feature contains a number of presets for many mobile devices including iPhone, Nexus, and Blackberry. This feature not only emulates the device's user agent, it also turns on a number of device specifications, including the screen resolution, pixel ratio, viewport size, and touch screen. This feature can be extremely useful for debugging our responsive website early during development, without requiring an actual mobile device.
The mobile emulator is accessible through the Emulation tab of the Chrome DevTool Console drawer, as shown in the following screenshot:
http://localhost/ address through the browsers. For OS X users, however, the address is your computer username followed by .local. Say that your username is john the local server is accessible through john.local. The local server directory path is
As we will be using LESS and Sass to generate the style sheets of our responsive website, we will need a tool that will compile or change them into normal CSS format.
Back when CSS preprocessors were just gaining momentum, the only way to compile them was through command lines, which may have been the stumbling block for many people to even try CSS preprocessors at that time. Fortunately, we now have plenty of applications with a nice graphical interface to compile CSS preprocessors; the following is the list for your reference:
|
Tools |
Language |
Platform |
Price |
|---|---|---|---|
|
WinLESS (http://winless.org/) |
LESS |
Windows |
Free |
|
SimpLESS (http://wearekiss.com/simpless) |
LESS |
Windows, OSX |
Free |
|
ChrunchApp (http://crunchapp.net) |
LESS |
Windows, OSX |
Free |
|
CompassApp (http://compass.handlino.com) |
Sass |
Windows, OSX, Linux |
$10 |
|
Prepros (http://alphapixels.com/prepros/) |
LESS, Sass, and so on |
Windows, OSX |
Freemium ($24) |
|
Codekit (https://incident57.com/codekit/) |
LESS, Sass, and so on |
OSX |
$29 |
|
Koala (http://koala-app.com/) |
LESS, Sass, and so on |
Windows, OSX, Linux |
Free |
I will try to cover as many platforms as possible. Regardless of which platform you are using, you will be able to follow all the projects in this module. So, here we will be using Koala. It's free and available on three major platforms, namely, Windows, OSX, and Linux.
Installing Koala in each platform is pretty straightforward.
Ideally, we have to test our responsive websites in as many browsers as possible, including beta browsers such as Firefox Nightly (http://nightly.mozilla.org/) and Chrome Canary (http://www.google.com/intl/en/chrome/browser/canary.html). This is to ensure that our website is functioning well in different environments. However, during the development, we may pick one primary browser for development and as the point of reference of how the website should be put on display.
In this module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web development tool. Chrome comes with a set of tools that are ahead of the other browsers. The following are two of my favorite tools in Chrome when it comes to developing responsive websites.
One of the pitfalls of using CSS preprocessors is when debugging the style sheet. As the style sheet is generated and the browser refers to the CSS style sheet, we will find it hard to discover where exactly the code is declared within the CSS preprocessor's style sheet.
We may tell the compiler to generate comments containing the line numbers of where the code is actually written, but source maps solve this snag more elegantly. Rather than generating a bunch of comments that eventually pollute the style sheet, we can generate a .map file on compiling CSS preprocessors. Through this .map file, browsers such as Chrome, with source maps enabled, will be able to point directly to the source when we inspect an element, as shown in the following screenshot:
There isn't any substitution for testing a responsive website in a real device, a phone, or a tablet. Each device has its own merits; some factors, such as the screen dimension, the screen resolution, and the version of mobile browser, will affect your website displayed on the device. Yet, if that is not possible, we can use a mobile emulator as an alternative.
Chrome is also shipped with a mobile emulator that works out-of-the-box. This feature contains a number of presets for many mobile devices including iPhone, Nexus, and Blackberry. This feature not only emulates the device's user agent, it also turns on a number of device specifications, including the screen resolution, pixel ratio, viewport size, and touch screen. This feature can be extremely useful for debugging our responsive website early during development, without requiring an actual mobile device.
The mobile emulator is accessible through the Emulation tab of the Chrome DevTool Console drawer, as shown in the following screenshot:
compile or change them into normal CSS format.
Back when CSS preprocessors were just gaining momentum, the only way to compile them was through command lines, which may have been the stumbling block for many people to even try CSS preprocessors at that time. Fortunately, we now have plenty of applications with a nice graphical interface to compile CSS preprocessors; the following is the list for your reference:
|
Tools |
Language |
Platform |
Price |
|---|---|---|---|
|
WinLESS (http://winless.org/) |
LESS |
Windows |
Free |
|
SimpLESS (http://wearekiss.com/simpless) |
LESS |
Windows, OSX |
Free |
|
ChrunchApp (http://crunchapp.net) |
LESS |
Windows, OSX |
Free |
|
CompassApp (http://compass.handlino.com) |
Sass |
Windows, OSX, Linux |
$10 |
|
Prepros (http://alphapixels.com/prepros/) |
LESS, Sass, and so on |
Windows, OSX |
Freemium ($24) |
|
Codekit (https://incident57.com/codekit/) |
LESS, Sass, and so on |
OSX |
$29 |
|
Koala (http://koala-app.com/) |
LESS, Sass, and so on |
Windows, OSX, Linux |
Free |
I will try to cover as many platforms as possible. Regardless of which platform you are using, you will be able to follow all the projects in this module. So, here we will be using Koala. It's free and available on three major platforms, namely, Windows, OSX, and Linux.
Installing Koala in each platform is pretty straightforward.
Ideally, we have to test our responsive websites in as many browsers as possible, including beta browsers such as Firefox Nightly (http://nightly.mozilla.org/) and Chrome Canary (http://www.google.com/intl/en/chrome/browser/canary.html). This is to ensure that our website is functioning well in different environments. However, during the development, we may pick one primary browser for development and as the point of reference of how the website should be put on display.
In this module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web development tool. Chrome comes with a set of tools that are ahead of the other browsers. The following are two of my favorite tools in Chrome when it comes to developing responsive websites.
One of the pitfalls of using CSS preprocessors is when debugging the style sheet. As the style sheet is generated and the browser refers to the CSS style sheet, we will find it hard to discover where exactly the code is declared within the CSS preprocessor's style sheet.
We may tell the compiler to generate comments containing the line numbers of where the code is actually written, but source maps solve this snag more elegantly. Rather than generating a bunch of comments that eventually pollute the style sheet, we can generate a .map file on compiling CSS preprocessors. Through this .map file, browsers such as Chrome, with source maps enabled, will be able to point directly to the source when we inspect an element, as shown in the following screenshot:
There isn't any substitution for testing a responsive website in a real device, a phone, or a tablet. Each device has its own merits; some factors, such as the screen dimension, the screen resolution, and the version of mobile browser, will affect your website displayed on the device. Yet, if that is not possible, we can use a mobile emulator as an alternative.
Chrome is also shipped with a mobile emulator that works out-of-the-box. This feature contains a number of presets for many mobile devices including iPhone, Nexus, and Blackberry. This feature not only emulates the device's user agent, it also turns on a number of device specifications, including the screen resolution, pixel ratio, viewport size, and touch screen. This feature can be extremely useful for debugging our responsive website early during development, without requiring an actual mobile device.
The mobile emulator is accessible through the Emulation tab of the Chrome DevTool Console drawer, as shown in the following screenshot:
browsers such as Firefox Nightly (http://nightly.mozilla.org/) and Chrome Canary (http://www.google.com/intl/en/chrome/browser/canary.html). This is to ensure that our website is functioning well in different environments. However, during the development, we may pick one primary browser for development and as the point of reference of how the website should be put on display.
In this module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web development tool. Chrome comes with a set of tools that are ahead of the other browsers. The following are two of my favorite tools in Chrome when it comes to developing responsive websites.
One of the pitfalls of using CSS preprocessors is when debugging the style sheet. As the style sheet is generated and the browser refers to the CSS style sheet, we will find it hard to discover where exactly the code is declared within the CSS preprocessor's style sheet.
We may tell the compiler to generate comments containing the line numbers of where the code is actually written, but source maps solve this snag more elegantly. Rather than generating a bunch of comments that eventually pollute the style sheet, we can generate a .map file on compiling CSS preprocessors. Through this .map file, browsers such as Chrome, with source maps enabled, will be able to point directly to the source when we inspect an element, as shown in the following screenshot:
There isn't any substitution for testing a responsive website in a real device, a phone, or a tablet. Each device has its own merits; some factors, such as the screen dimension, the screen resolution, and the version of mobile browser, will affect your website displayed on the device. Yet, if that is not possible, we can use a mobile emulator as an alternative.
Chrome is also shipped with a mobile emulator that works out-of-the-box. This feature contains a number of presets for many mobile devices including iPhone, Nexus, and Blackberry. This feature not only emulates the device's user agent, it also turns on a number of device specifications, including the screen resolution, pixel ratio, viewport size, and touch screen. This feature can be extremely useful for debugging our responsive website early during development, without requiring an actual mobile device.
The mobile emulator is accessible through the Emulation tab of the Chrome DevTool Console drawer, as shown in the following screenshot:
pitfalls of using CSS preprocessors is when debugging the style sheet. As the style sheet is generated and the browser refers to the CSS style sheet, we will find it hard to discover where exactly the code is declared within the CSS preprocessor's style sheet.
We may tell the compiler to generate comments containing the line numbers of where the code is actually written, but source maps solve this snag more elegantly. Rather than generating a bunch of comments that eventually pollute the style sheet, we can generate a .map file on compiling CSS preprocessors. Through this .map file, browsers such as Chrome, with source maps enabled, will be able to point directly to the source when we inspect an element, as shown in the following screenshot:
There isn't any substitution for testing a responsive website in a real device, a phone, or a tablet. Each device has its own merits; some factors, such as the screen dimension, the screen resolution, and the version of mobile browser, will affect your website displayed on the device. Yet, if that is not possible, we can use a mobile emulator as an alternative.
Chrome is also shipped with a mobile emulator that works out-of-the-box. This feature contains a number of presets for many mobile devices including iPhone, Nexus, and Blackberry. This feature not only emulates the device's user agent, it also turns on a number of device specifications, including the screen resolution, pixel ratio, viewport size, and touch screen. This feature can be extremely useful for debugging our responsive website early during development, without requiring an actual mobile device.
The mobile emulator is accessible through the Emulation tab of the Chrome DevTool Console drawer, as shown in the following screenshot:
for testing a responsive website in a real device, a phone, or a tablet. Each device has its own merits; some factors, such as the screen dimension, the screen resolution, and the version of mobile browser, will affect your website displayed on the device. Yet, if that is not possible, we can use a mobile emulator as an alternative.
Chrome is also shipped with a mobile emulator that works out-of-the-box. This feature contains a number of presets for many mobile devices including iPhone, Nexus, and Blackberry. This feature not only emulates the device's user agent, it also turns on a number of device specifications, including the screen resolution, pixel ratio, viewport size, and touch screen. This feature can be extremely useful for debugging our responsive website early during development, without requiring an actual mobile device.
The mobile emulator is accessible through the Emulation tab of the Chrome DevTool Console drawer, as shown in the following screenshot:
We will need a number of libraries to manage a project dependency with Bower. In the web development context, we refer to a library as a collection of code, usually CSS and JavaScript, to add features on the website. Often, the website is dependent on a particular library for it to function its prime feature. As an example, if I built a website to convert currencies, the website will require Account.js (http://josscrowcroft.github.io/accounting.js/); it is a handy JavaScript library to convert regular numbers into currency format with the currency symbol.
It is common that we may add about five or more libraries on a single website, but maintaining all the libraries used in the website and making sure that they are all up-to-date could become cumbersome. This is where Bower is useful.
Bower (http://bower.io/) is a frontend package manager. It is a handy tool that streamlines the way we add, update, and remove libraries or dependencies (libraries that are required for the project) in our project. Bower is a Node.js module, so we first have to install Node.js (http://nodejs.org/) on our computer to be able to use Bower.
Perform the following steps to install Node.js in Windows:
- Download the Node.js Windows installer from the Node.js download page (http://nodejs.org/download/). Choose your flavor for your Windows system, the 32-bit or 64-bit version, and the
.msior.exeinstaller. - Run the installer (
.exeor.msifile). - Click on the Next button of the Node.js welcome message.
- As usual, when you are installing a software or application, you will first be prompted by the application's license agreement. Once you have read the license, click on I accept the terms in the License Agreement and then click on the Next button to proceed.
- Then, you will be prompted for the folder where Node.js should be installed. Leave it as the default folder, which is in
C:\Program Files\nodejs\. - As you can see from the following screenshot, the installer then prompts to ask if you want to customize the item to be installed. Leave it as it is and click on the Next button to proceed, as shown in the following screenshot:
- Afterwards, click on the Install button to start installing Node.js.
- The installation process is quite fast; it takes only a few seconds. If you see the notification that says Node.js has been successfully installed, you may click on the Finish button to close the installation window.
Perform the following steps to install Node.js in OS X:
- Download the Node.js installer for OS X, which comes in the
.pkgextension. - The installer will show you a welcome message and show you the location where it will install Node.js (
/usr/local/bin), as shown in the following screenshot:
- The installer then shows the user license agreement. If you read and agree to the license, click on the Agree button and then click on the Next button.
- The Node.js installer for OS X allows you to select which Node.js feature to install prior to installing it into your computer. Here, we will install all the features; simply click on the Install button to start installing Node.js, as shown in the following screenshot:
Perform the following steps to install Node.js in Ubuntu:
Installing Node.js in Ubuntu is quite straightforward. Node.js can be installed through Ubuntu's
Advanced Packaging Tool (APT) or apt-get. If you are using Ubuntu version 13.10 or the latest version, you can launch the terminal and run the following two commands consecutively:
If you are using Ubuntu version 13.04 or earlier, run the following command instead:
We have just installed Node.js and npm command, which enable us to use Bower later on through the Node.js Package Manager (NPM). The npm command line should now be accessible through the Windows command prompt or the OS X and Ubuntu terminals. Run the following command to test if the npm command works:
This shows that you can perform the node and npm command within the command prompt. As we have set Node.js and npm is up and running, we are now going to install Bower.
Throughout this module, we will be dealing with a number of command lines to install Bower, as well as Bower packages. Yet, if you are from a graphic design background like I was, where we mostly work on a graphical application, operating a command line for the first time could be really awkward and intimidating. Hence, I would suggest you take time and get yourself familiar with the basic command lines. The following are a few references worth checking out:
- A Designer's Introduction to the Command Line by Jonathan Cutrell (https://webdesign.tutsplus.com/articles/a-designers-introduction-to-the-command-line--webdesign-6358)
- Navigating the Terminal: A Gentle Introduction by Marius Masalar (https://computers.tutsplus.com/tutorials/navigating-the-terminal-a-gentle-introduction--mac-3855)
- Introduction to the Windows Command Prompt by Lawrence Abrams (http://www.bleepingcomputer.com/tutorials/windows-command-prompt-introduction/)
- Introduction to Linux Command by Paul Tero (http://www.smashingmagazine.com/2012/01/23/introduction-to-linux-commands/)
npm command, which enable us to use Bower later on through the Node.js Package Manager (NPM). The npm command line
should now be accessible through the Windows command prompt or the OS X and Ubuntu terminals. Run the following command to test if the npm command works:
This shows that you can perform the node and npm command within the command prompt. As we have set Node.js and npm is up and running, we are now going to install Bower.
Throughout this module, we will be dealing with a number of command lines to install Bower, as well as Bower packages. Yet, if you are from a graphic design background like I was, where we mostly work on a graphical application, operating a command line for the first time could be really awkward and intimidating. Hence, I would suggest you take time and get yourself familiar with the basic command lines. The following are a few references worth checking out:
- A Designer's Introduction to the Command Line by Jonathan Cutrell (https://webdesign.tutsplus.com/articles/a-designers-introduction-to-the-command-line--webdesign-6358)
- Navigating the Terminal: A Gentle Introduction by Marius Masalar (https://computers.tutsplus.com/tutorials/navigating-the-terminal-a-gentle-introduction--mac-3855)
- Introduction to the Windows Command Prompt by Lawrence Abrams (http://www.bleepingcomputer.com/tutorials/windows-command-prompt-introduction/)
- Introduction to Linux Command by Paul Tero (http://www.smashingmagazine.com/2012/01/23/introduction-to-linux-commands/)
from a graphic design background like I was, where we mostly work on a graphical application, operating a command line for the first time could be really awkward and intimidating. Hence, I would suggest you take time and get yourself familiar with the basic command lines. The following are a few references worth checking out:
- A Designer's Introduction to the Command Line by Jonathan Cutrell (https://webdesign.tutsplus.com/articles/a-designers-introduction-to-the-command-line--webdesign-6358)
- Navigating the Terminal: A Gentle Introduction by Marius Masalar (https://computers.tutsplus.com/tutorials/navigating-the-terminal-a-gentle-introduction--mac-3855)
- Introduction to the Windows Command Prompt by Lawrence Abrams (http://www.bleepingcomputer.com/tutorials/windows-command-prompt-introduction/)
- Introduction to Linux Command by Paul Tero (http://www.smashingmagazine.com/2012/01/23/introduction-to-linux-commands/)
Perform the following steps to install Bower:
After installing Bower, we have access to a set of command lines to operate Bower functionalities. We will run these commands in the terminal, or in the command prompts if you are using Windows, just like we installed Bower with the npm command. All commands start with bower and are followed by the command keyword. The following is the list of commands that we may use frequently:
|
Command |
Function |
|---|---|
|
|
Installs a library into the project. When we perform this function, Bower creates a new folder called |
|
|
Lists all installed package names in the project. This command also shows the new version if available. |
|
|
Sets the project as the Bower project. This command also creates |
|
|
Removes the library name from the project. |
|
|
Retrieves the installed library version. |
bower command. The -g parameter that we included in the preceding command installs Bower globally, so that we are able to execute the bower command in any directory in the computer.
After installing Bower, we have access to a set of command lines to operate Bower functionalities. We will run these commands in the terminal, or in the command prompts if you are using Windows, just like we installed Bower with the npm command. All commands start with bower and are followed by the command keyword. The following is the list of commands that we may use frequently:
|
Command |
Function |
|---|---|
|
|
Installs a library into the project. When we perform this function, Bower creates a new folder called |
|
|
Lists all installed package names in the project. This command also shows the new version if available. |
|
|
Sets the project as the Bower project. This command also creates |
|
|
Removes the library name from the project. |
|
|
Retrieves the installed library version. |
|
Command |
Function |
|---|---|
|
|
Installs a library into the project. When we perform this function, Bower creates a new folder called |
|
|
Lists all installed package names in the project. This command also shows the new version if available. |
|
|
Sets the project as the Bower project. This command also creates |
|
|
Removes the library name from the project. |
|
|
Retrieves the installed library version. |