- [Instructor] Authoring HTML requires little more
than a text editor.
As we discussed earlier, HTML documents are really
nothing more than a text file with a .htm
or .html extension, so really, almost any text editing
tool will suffice.
However, authoring websites can be a tedious process,
and you're usually going to be writing multiple languages,
like HTML, CSS, and JavaScript.
So, writing all of that by hand can be
really time consuming.
A good HTML editor can help speed up the process
and catch syntax errors that you might miss.
At a minimum, you're gonna want to have a code editing tool
that has line numbers, code formatting options,
syntax highlighting, and code support
for all of the languages that you're gonna be authoring.
If you're working on a team that already authors
or edits HTML, chances are your team has a tool
that they're comfortable working with.
Now this might be a desktop program like Dream Weaver,
Coda, or Sublime, or it might be within
the authoring environment of a CMS, like WordPress
or Expression Engine.
If you're already using a desktop editor
in your work environment, I recommend
using it for this course.
If your team is using a CMS, I recommend choosing
a basic editor for this course and then focusing on
learning the CMS after you've mastered the basics
of writing HTML, and that way, you don't have to focus
on learning HTML and the CMS at the same time.
Now if you're brand new to web development,
and you haven't picked a tool yet,
I actually recommend trying out several
different types of authoring tools before settling
on a favorite.
My web design fundamentals and CSS fundamentals courses
both have movies in them that give you an overview
of a wide range of HTML editors.
Try downloading trial versions of a few of them,
and experiment with them as you begin to learn HTML.
You're bound to find one that fits
your personal preferences.
For this course, I'm gonna be using Brackets.
It's free, it's cross-platform, and it has all the HTML
features that you'll need for this course.
I'm gonna give you a brief rundown of where you can
download it, and how I set it up, but I'm not gonna go
into using Brackets beyond some of those basic points,
and if you decide to use it, there's plenty of documentation
on their site to get you started.
So you want to go to Brackets.io, and you're gonna find
a big download button.
You'll notice it notices that I'm on OS10, so I'm just
gonna click that and it's gonna download the DMG file
for me.
And I open up the DMG file, if you're on a Windows machine,
you'll open up the EXE file, and it's a fairly simple
installation.
Either you're gonna run the installer on Windows,
or on the Mac you're just gonna drag the icon
into the applications folder, and that's it.
I'm gonna use a new finder window to go to my applications,
and there I'll find Brackets.
I like adding it to my doc, just because it makes it
a little bit easier to open up.
And if you're on a Windows machine, you're gonna go
into program files and find this, you can pin it
to your start menu, or if you're using Windows Eight,
you can make a tile out of it, however you want to do it,
you just want to make sure you can access it
in a fairly easy fashion.
So Brackets is pretty easy to set up.
There aren't a lot of preferences, so you're not gonna
see me going in and setting up a lot of themes
or anything like that.
It's gonna open up initially to this page.
What's really neat about this is it's letting you know
that Brackets is built out of HTML, CSS, and JavaScript.
So you can edit the editor with the editor itself.
It's great, it makes it easy to customize,
there are a lot of extensions and things out there
for it, so if you're interested in using Brackets,
it's really easy to get it set up exactly the way
you want it.
Now, one of the things that I'm gonna do is I'm gonna
increase the font size a little bit.
I can do that by clicking in the window and doing
Command plus.
The only reason I'm doing that is just to make it easier
for you guys to read.
Now the other thing I want to show you guys
is live preview in Brackets, and this is one of the things
that I really like about this.
So you have to have Chrome installed.
So if you don't have Google Chrome installed,
you want to install that, and if Google Chrome is installed,
when you have an open HTML file, like I do here,
you click on this little lightning bolt icon,
it's gonna open this page in Chrome.
Now what's really nice about this is this becomes
kind of a live preview.
If I go back into Brackets, for example, and make a change,
getting started with Brackets, and maybe I add
an exclamation point there, this is your guide,
maybe two more exclamation points because I'm very excited
about that, if I switch back to Chrome, you can see
that it goes ahead and adds those, and it even tells me
where I'm focused in my code.
So if I were to click a little bit further down the page
and select an item, you can see that it shows you
exactly where on your page you've selected,
which is really neat.
So this is a live preview, you can just sorta kick
back and forth and check out the changes that you're making.
If you wanna close it, all you have to do is again
click the lightning bolt icon, and you've closed it.
Now once you start working on a new project in Brackets,
it's pretty easy to work from a root directory.
You can see right over here on the left-hand side,
I have a little pane that says getting started.
When I click on that pull-down menu, I'm prompted
to either open a separate folder, or if I've been working
in other projects, it'll just go ahead and list
my most recent projects.
If I click on open folder, I can browse anywhere.
I'm just gonna go out to the desktop to the exercise files
that we copied over earlier, and if I say I highlight
chapter one, and click open, I'm gonna see a list
of all the directories in chapter one, in this case
01 02 is the only one in there, but notice that I can
go ahead and check out that directory structure
and open up files simply by clicking on them.
So it's very easy to navigate through your projects
using Brackets.
Remember, for this course, it really doesn't matter
which code editing tool you use.
You just want to find one that has all the features
that you need, and that fits your personal preferences.