Tools We'll Use in the Course
In this guide I walk through the tools that we'll use in this course, including a discussion on what IDEs and Text Editors are best for HTML/CSS Development. I also examine the Espresso editor that I will use for demonstration purposes.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Before we dive into learning HTML and CSS, let us preview a handful of tools that we will be utilizing throughout this course.

The primary tool I will be using is called Espresso, as shown below:

large

I prefer this tool because it allows me to include HTML code. To view how it appears in the browser, I am able to click on the "Preview" icon in top left corner to open another browser that displays the real-time view of all my revisions. The efficient option to keep your editor and browser side-by-side enables you to have an instantaneous view of each change, visible after a quick "save".

large

Because Espresso is a paid tool, it is not entirely necessary for this course. A free option that I recommend is sublime text. Here, you can create a HTML file, add code, save it to a particular location, and open the HTML file in a browser. The downfall of sublime text is its lack of real-time editing. This generates a need to refresh the browser prior to each change to be able to see the result of the applied edit.

There are other editors that you can use besides these two tools such as Text Wrangler and Visual Studio. I, however, would not recommend Visual Studio because of its complicated built-ins. For PCs, Notepad ++ is also an acceptable choice. During the remainder of this course, I will be showing HTML demonstrations on Espresso, but you may select any editor that will best suit your needs.