Contents  >

Working with Text Editors

IBAT Next Course

Learning Goals

At the end of this Tutorial you will be able to:

Contents

Using text editors with HTML and CSS

Installing Microsoft Visual Studio Code

Changing user settings in Visual Studio

Installing Sublime Text

Pinning applications to your Windows Taskbar

Using text editors with HTML and CSS

You will work with two main types of files in these Tutorials:

Both HTML and CSS files are text files that can contain only letters (a,b,c, …), numbers (1,2,3, …) and various punctuation characters (;, ", ?, …) and symbols (€, ©, ®, …). Because text files can contain only those characters you can type on a keyboard, their content is similar to the output of paper documents created on old-style typewriters.

Text Files: Old and New

Text files can be created and edited with basic text editors such as Notepad (Microsoft Windows) and TextEdit (Apple Mac).

When working with often-complex HTML and CSS files, however, web designers and developers typically use text editors that offer a range of extra features that simplify the types of tasks they need to perform. In this Tutorial, you will learn about two such enhanced text editors: Microsoft Visual Studio Code and Sublime Text.

Installing Microsoft Visual Studio Code

Follow these steps to download and install Microsoft Visual Studio Code on your computer.

  1. Use your web browser to go to this web address:  https://code.visualstudio.com
  2. Click the Download (for Window/Mac/Linux) button. Download Microsoft Visual Studio Code
  3. Follow the usual download and installation instructions for your computer.

Visual Studio will install and then open on your computer. You will see that Visual Studio has added an icon to your Windows desktop and is listed with your other applications on your Windows Start menu.

Install Microsoft Visual Studio Code

Changing user settings in Visual Studio

Follow these steps to set the most convenient preferences in Visual Studio for working with HTML and CSS.

  1. At the bottom-left of the Visual Studio screen, click the Gears icon. User Settings Microsoft Visual Studio Code From the pop-up menu displayed, click the Settings command.   Visual Studio opens a new window named Settings. At its top, you can see a Search settings box. Change User Settings Microsoft Visual Studio Code

You can now change various settings in Visual Studio.

Typical Visual Studio settings for working with HTML/CSS

Here are some settings you may wish to change:

You can now close the Settings window.

Installing Sublime Text

Among the other free-forever or free-to-try text editors for working with HTML and CSS files are the following:

A popular choice is Sublime Text. Follow the steps below to download and install it.

  1. Use your web browser to go to this web address:  https://www.sublimetext.com
  2. Click the Download (for Windows/Mac/Linux) button. Install Sublime Text
  3. Follow the usual download and installation instructions for your computer.

Sublime Text will install and then open on your computer. You will see that Sublime Text is listed with your other applications on your Windows Start menu.

Sublime Text Setup

Pinning applications to your Windows Taskbar

You can start applications on your PC in a variety of ways. For those applications you will use frequently, it makes sense to add or ‘pin’ them to your Taskbar along the bottom of your Windows desktop. You can then launch any one of them with a single click.

To pin an application, follow these steps:

  1. Enter the name of the application in the Windows Search Box at the left of the Taskbar.
  2. When the application name is displayed, right-click on it.
  3. Choose Pin to taskbar from the list of options displayed. Pin applications to Windows Taskbar
  4. Repeat these actions for as many applications as you want to pin to your Taskbar.

If future, when you need to launch Visual Studio, Google Chrome or other pinned applications, you can simply and quickly click the relevant icon on the Taskbar.

Windows Taskbar icons


Return to Contents.