Adobe Brackets is the free code editor that we suggest you use for this course. We are very impressed with Brackets and think that you will be too. If you don’t have brackets on your computer, visit http://brackets.io/ to download and install it.
BTW, one of Bracket’s best features only works with Google Chrome. If you don’t have Chrome already, please install it now as well.
Once everything is downloaded and installed, open Brackets.
Features of Brackets
- Open Folder. Your computer is full of files and folders but Bracket’s ‘open folder’ feature offers a way to narrow the focus to just the ones that you are using to build a website. Let’s put that feature to work.
- Click File and then click on “Open Folder.” Browse to the mysite folder that you created in the previous lesson, click on it, and select open. At this point you should see the css folder and the images folder that you created earlier. As you fill up the mysite folder with your work, the value of the open folder feature will become obvious.
- Extensions! This is a wonderful feature of Brackets that keeps getting better. There is a very active community of open source contributors who constantly provide new extensions that increase Bracket’s range and efficiency. One of my favorite extensions is html skeleton, which generates all of the basic elements of a webpage with the click of a button. In other words, it saves you a LOT of typing! To enable html skeleton:
- Click File and select Extension Manager and then click the available tab as shown below. Search for html skeleton and install it.
- Now that you have enabled the Skeleton extension let’s put it to work.
- Create a new file (Command N or File New).
- Click the Skeleton Icon on the right side of the Brackets window. A new window will pop up. Under elements, check the box for Basic HTML Skeleton and click Done.
At this point, everything you need for starting an HTML file should be inside of your new file. Be aware as well that you can add individual bits of code, such as an external stylesheet link, to your document.
- Type “Hello World” between the <body> and </body> tags and save the file as hello.html inside of the mysite folder.
- Create another new file and populate it with the Skeleton extension. Enter your name (Emuel for example) between the <body> and </body> tags and save the file as index.html in the mysite folder. You will revisit index.html in a future lesson.
- Add the beautify extension.
- Again, click File > Extension Manager. Then, search for Beautify (not beautify.io), and then click Install.
- You will use Beautify later to organize all of your messy code into a clean, easy-to-read layout. Right now, of course, you don’t have any code :).
- While you are in extensions, explore additional extensions. You may find something you like. Whatever you do, don’t forget about extensions. As your career as a web developer advances, you may find uses for additional extensions.
- Screen Splitting: With this feature you can view and work on two files simultaneously. This can be very handy in a web development environment where multiple files, CSS and HTML for example, are required to produce a web page. To use this feature select vertical or horizontal split as shown below.
has some helpful features for linking all of these elements together correctly.
- At this point you should see both hello.html and index.html.
- Open the index.html file Start entering a link (just after the <body> tag) as in
<a href=” and connect to hello.html.
. All you have to do is browse to the hello.html, select it and then finish off the rest of the link Check out this dramatic! ten second video to see the process in action (FYI: the video shows a file named classmates that is not yet created).
- Use a similar process for integrating images into your webpage. For example, as soon as you enter <img src=” Brackets will, once again, display a list of files and folders. To select a file, simply click on it’s name. At this point, you probably don’t have any images to insert, so just remember how for now. Also, to select a folder that is outside of the folder you are working in, enter ../ (that’s right, dot dot forward slash).
- Live Preview. Whenever you want to see what a webpage REALLY looks like, select Live Preview from the File menu (or click the lightning bolt on the upper right side of the Brackets window). Even better, if you exercised the ‘open folder’ option that was mentioned earlier, the live preview will automatically update as you make changes to the document in Brackets. For example, if you change a font size, background color, add additional text, etc. to a document with Brackets, the live preview version in the browser should demo those changes as you make them. BTW, live preview only works with Google Chrome. Try out live preview now, and click the link that you created earlier to see if it works.
- Color Picker. Yes, Brackets has a built in color picker that allows you to easily set or change a font or background color. We will demonstrate this feature in a future lesson.