Now once you're ready go ahead and open up the Atom editor. 1
Now if you haven't yet installed Atom, 2
this is a good point to go back and have a look at those videos on how to install Atom for Mac or for 3
Windows, 4
because from here on out we're going to be working with the Atom editor to create every single one of 5
our web sites. 6
So it's really really important that you have it setup with all the packages that we've specified in 7
those installation videos. 8
But once you've got it installed and open you should be looking at a screen like this. 9
Now the first thing we're going to do is we're going to go to File and we're going to open a new project 10
folder to work out of. 11
So I want you to create a new folder either in your desktop or somewhere else that you prefer. 12
And it's going to be called Web Development. 13
Go ahead and hit Create and then select that Web Development folder and go ahead and click Open and 14
now you'll see your project folder show up in the sidebar over here and you can toggle it closed by 15
clicking on that arrow button over there. 16
So now that we've got our Web Development folder, this is where we're going to store all of our projects. 17
So the first project that we're going to be creating is our personal web site. 18
So go ahead and right click on the Web Development folder. 19
And we're going to create a new folder inside the Web Development folder, and we're going to call our project 20
HTML - Personal Site. 21
And now we're ready to create our very first HTML file inside this folder. 22
So again right click on this tab and we're going to create a new file. 23
Now as you get used to Atom you're going to start to want to use some of their shortcuts. 24
So for example instead of right clicking and selecting new file you can also just simply select the 25
HTML - Personal Site and hit A in order to do the same thing. 26
But in the beginning as you’re getting used to Atom I'm going to be using a lot of the mouse controls 27
so that you can see what's happening on the screen but feel free to start incorporating the shortcuts 28
into your workflow. 29
And as time goes on you'll find that they make life so much quicker and so much easier. 30
So now we're going to create our very first file and you can see the way that the files are structured 31
is that we're creating it inside this folder called HTML - Personal Site and inside that folder is 32
where our web page is going to be located. 33
Let's go ahead and create this homepage and by convention we're going to name it index.html 34
and that is usually the name that developers will give their home page. 35
So go ahead and hit enter in order to create that file. 36
And if you open up this folder you can see that's exactly where it's located. 37
And it should open up on the right hand or the main pane over here as well. 38
Now in order to create any HTML web site there's a little bit of boilerplate code that's associated. 39
Now you can either write it all out or because we installed the Emmet plugin,
We can simply write html and then hit enter and it will insert all of that boilerplate code for us.
Now if that didn't work for you you could also hit the tab key after writing each e-mail or typing an
exclamation mark and then hitting the tab or the enter key.
Try some of these combinations that you see on screen.
If it's not working for you.
So now we mentioned that this is a standard html boilerplate code.
Now in programming we'll talk about boilerplates quite frequently and it's similar to having a code template
something that you'll reuse for different projects.
And it comes from the days when the printing press would make these heavy iron plates that would function
as their printing template.
And because they looked very similar to the small metal plate that identified the builder of a steam
boiler they called it the boiler plate.
So that's just where this word comes from.
But when we're talking about it in programming we usually mean a code template that you can reuse.
Now even though we didn't have to do very much work in order to get all of this into our file it would
still be a shame to lose it,
right?
So, in Atom, whenever you see a blue dot on the tab bar of your file that means that there's unsaved progress.
And in order to make it disappear and to keep your progress you can simply go to File and then click
on save or use whatever shortcut that shows up for you over here.
It should be Command S on Mac and it should be Ctrl S on Windows.
For those of you who are interested I've included a link to some of the most commonly used atom keyboard
Shortcuts, and it includes the commands for both Mac, Windows and Linux for users of
all three platforms.
So go and have a look over there and start learning and using some of these shortcuts.
And once you've saved your phone at ATM you'll see that little blue dot disappear.
And now you can be rest assured that all your progress has now been safely saved.
Now there's quite a lot of stuff on screen.
So let's talk about this boilerplate line by line to understand what it all does.
So the first line here is where we declare the document type and this tells the browser when it opens
up this file.
What is the version of HTML that we're using now in this course.
We're working with the latest version of each HTML which is HTML5.
Now in previous versions of HTML, this doc type was incredibly convoluted and in fact I can show
you what some of them looked like.
So we can write HTML for example and then because we've installed Emmet if I hit enter you
can see this is what the boilerplate code for a particular HTML for version would look like.
And you can see that DOCTYPE is a lot longer.
And very often programmers won't be able to remember that so they actually have to look it up somewhere.
But since HTML5 the DOCTYPE declaration became a lot simpler.
And now it's just !DOCTYPE html.
And this tells the browser to render this file as an HTML5 document.
And there's a few differences between how things will appear or how things will be structured depending
on whether if the doc type was HTML5 or a previous version.
So that's the doc type.
Now we inserted all of this code using autocomplete from Emmet and if you want to look at all the other
things that you can do with Emmet then you can go ahead and have a look at docs.emmet.io/cheatsheet
and here you can see what all of those abbreviations look like and what is the result of
it as you're developing into a professional web developer.
It's a great resource to have in order to save yourself a lot of time when you get used to using these
common shortcuts.
Now the next line in our code is an html tag and this tells the browser that everything in between
the opening and closing tags is going to be HTML code.
And what does that code consist of.
Well it consists of a head and a body.
Now the head is the part of the HD file that holds information about the web page and it tells the browser
how it should handle the page.
So for example we might have a title tag in here that tells the browser what is the title of this particular
document or this particular page.
So let's go ahead and give our website a title. Let’s call it whatever your name is.
So mine is Angela,
Angela's Personal Site, and now if we go ahead and hit Save we can have a look at it inside our browser.
Now there's a couple of ways how you can open up the website that you're coding up inside your browser.
Now one of these ways is simply going into your finder or your explorer and finding that index.html
file and then double clicking on it.
And it should bring it up inside chrome.
Now the other way of opening up your web site is if you right click on your file inside atom and you
go to copy full path.
Then it copies the entire directory path to the location of your Web site.
So if you just go ahead and paste it into the bar here and here with this file path were telling the
browser how to find this file index for each HTML on our computer.
So first we're telling it to go into a folder called users then we're telling it to go into a folder
called angelayu, then we're saying go to Desktop, and then inside Desktop we're going to Web Development.
And finally we're going to HTML - Personal Site, and that is where we're going to find
that index.html site.
So let's go ahead and hit enter on that file path in order to do exactly the same as double clicking
on this file which is opening up our web site inside Chrome.
Now if Chrome is not your default browser then when you see the icon it's not going to have the chrome
symbol here.
So you can change that by going into your settings then scrolling down to Default Browser in order to
change it.
Now at the moment our Web site doesn't contain any content yet but it does have a title which you can
see here.
And it says Angela's Personal Site, which is what we created over here.
Now inside the head section there's also this meta element.
Now there's quite a few different meta elements, but this particular one is called character set and
the one that we're setting it to is UTF 8.
Now what does this line do?
The meta elements give extra metadata or associated data to your HTML document.
And in this case were telling the browser when it opens up this file that all the text inside our web
page is encoded using the UTF 8 encoding system.
So this is basically a list of all the available characters that we can use inside our website for it
to be rendered correctly.
Now sometimes when you open up a web page especially in an outdated browser like Internet Explorer or
an email that you got from a Bulgarian friend you might see some of the characters being jumbled up
like this.
And this is called mojibake and it's a Japanese word that stands for characters that are transformed.
And it occurs because your browser is trying to render the characters using the wrong character set.
So for example if we have a look at this wikipedia page for mojibake in Japanese you can see that currently
my browser is set to render all the web pages as unicode which is very similar to UTF 8 and you can
see that everything looks pretty legit.
It all looks more or less like Japanese.
But if I decide to change the encoding of my browser and for it to interpret all of the Web sites as
something else say Arabic then you can see that all of this web page is now messed up.
This is not a valid word.
And none of this has any meaning because it's encoded the Web site incorrectly.
So there's quite a few different types of encoding and they're specialized for different languages because
different languages use different symbols.
So for example if you have a look at the windows Greek symbol chart then you can see that the symbol
at position two to four looks like this.
But if you have a look at the chart for Windows Arabic then 224 actually encodes a completely
different character and that's why we get these messed up Web sites or strange looking e-mails when
it's interpreted using the wrong encoding.
Now UTF 8 is the standard encoding that you should be using when working with HTML5.
And the reason for that is because it includes all of those international symbols and in fact every
single symbol that is included in the unicode character set.
So if you go to unicode-table.com, then you can see a table of all of the unicode characters.
And if you scroll down it's got this nice little animation that shows you as we change locations going
from Latin.
so most of the English speaking countries, to Greek and Coptic, then going to Armenian, Hebrew, Arabic and
all of the different languages.
The other thing about Unicode is that it also includes emojis.
So for example if you have a look at the emerging chart let's look for heart symbols for example.
Then we've got all of these different emoji characters that we can also use on our Web site that's encoded
with UTF.
So let's go ahead and give that a try.
Let's find a nice looking heart symbol.
We can right click to copy it or hit command C or control C and we can paste it to the front of our
website title using control V or command V.
And now if I hit save and go back to my website and hit command R or control R to refresh or click
this refresh button here and you can see our title is updated with that emerging.
So everything that is Unicode can be encoded correctly using UTF 8 and it's something that you should
just have as your boilerplate code for any new website you create.
This gives your Web site the maximum chance of being rendered correctly on browsers that are from international
visitors.
Now if you're interested in doing a bit of background reading and learning more about Unicode and character
sets then this is a really good piece that I highly recommend by Joel Spolsky.
It's a roughly 10 minute read and it talks a lot about these character sets and how they encode different
symbols and why you should be using something like Unicode or UTF 8 in your websites in order to ensure
maximum compatibility.
So it's a good read and I'll include a link to it in the resources for this lesson.
Now aside from the character set attribute for the meta element there's also other attributes that you
might see on different websites.
So some of the Common ones include description or things like keywords about your website who the author
is as well as viewport and these meta tags tell the browser how it should render or display the web
page and also they give information to search engines about the content of the website.
So for example if we go to the Mozilla MDN Web Docs web site, the main page, so developer.mozilla.org
and we right click and we view page source.
Then we get to see the entire HTML file that's used to render this particular page.
So this is what our browser sees and does all the hard work of making it look nice and pretty like this
for us.
So here you go ahead and hit command f or control F on windows you can search for the description attribute.
Now it's not this first one but it is this third one.
And it's this exact thing.
And the description says the Mozilla Developer Network MDN provides information about Open Web technologies
including HTML, CSS and APIs.
Now if we go into Google and we searched for MDN you can see that the snippet of text that it shows
about the main M.D. and Web site is exactly the same as what we saw just here in the description a tag
and this is what search engines do they crawl the HDMI CML of your website and look for certain meta
tags in order to know what your website is about and also how to display it in their search index.
And there's a whole bunch of different attributes for the meta element and you can have a read about
either on W3 Schools or what I recommend usually is the MDN Web Docs so if you have a look at meta
over here then you can learn all about the different attributes how to
use them and what they're good for.
So in the next lesson we're going to be tapping into our body section and we're going to be creating
the content for this personal site of ours.
So for all of that and more I'll see you on the next lesson.