In this lesson I'm gonna go over the tooling that we need for our web development work and most gonna
give you a brief tour of the stop project for this module.
Now to create a Web site we're gonna have to write our code somewhere.
So the first thing we're going to need is a decent text editor and there's actually two text editors
that I quite like and can recommend.
And the first one is called Atom Atom was developed by the team at GitHub and it's completely open source.
It supports a large number of languages including all the languages that we need including javascript
each LCROSS and of course python.
Now the really nice thing about atom is it has a really cool real time collaboration feature so you
can work with others like in Google Docs which is great for team projects and if you're working on something
with friends it's really quite neat.
But GitHub the organization behind atom was actually recently acquired by Microsoft which brings me
to the second text editor that I'm quite partial to and that's the s code.
This code pretty much does everything atom does except maybe slightly faster.
Microsoft seems to have done some optimization behind the scenes.
So for this module I'm going to be using V as code now as always you can find the links to all of these
Web sites to download your favorite text editor on our course resource page.
The next thing that we're gonna need for this module are the Chrome developer tools.
Chrome is the browser I'm going to be using for this project.
So if you haven't got it already then install it now.
And once you've done that head over to the lesson resources and download the math underscore garden
on the score stub zip file in here you're gonna find the stop project that we're going to use.
So go ahead and extract the zip file and then you should get a folder with a bunch of files that we're
going to need.
Now you can put this folder anywhere you want on your harddrive but I recommend just putting it into
the MLK project folder that you're using for all your Jupiter notebooks.
That way all the work that you're doing is gonna be in one place.
If I take a look inside the stop project then you should see a number of files.
You've got this index that each to a nail file.
You've got a folder called C Ss and inside is a style starts the SS file and then you've got this folder
called images where there are some dots as Fiji files.
All right.
So let's take a look at all of these files in V.S. code.
Fire up visual studio code and then click on open folder on the welcome screen.
Or alternatively go to file open and then select the math on a square garden discourse stuff folder.
And after you've opened the folder you should see all the files and all the contents of that folder
come up here in the Explorer pane and now you can navigate between the files simply by selecting them
or double clicking on them.
If you double click on the files then they show up in this kind of like tab view on the right hand side.
Just kind of like browser tabs.
So this explorer pane is really handy for navigating between the different files and if it gets in your
way or you want to size it a bit differently than you can just click on the margins here and drag it
around or you can click on this icon here to hide it.
So now let's take a look at the different kind of files in the stop project.
So on one hand we have this index that each terminal file on the other hand.
We have this styles that see us as file and then thirdly we have these six different SPG files.
Now I personally think that SPG files are probably the coolest thing since sliced bread because even
though it looks like code it's actually an image.
Now images there usually in the more familiar formats of j peg or PSG.
So what's so great about SPG files.
Well let's compare a PSG file to an SPG file.
I've got an image here in my downloads folder and I'm just gonna open it with Firefox and I'm going
to zoom in.
So what you can see here is this whole thing pixilated the quality degrades as you zoom in to 300 percent.
But if I do the very same thing with an SPG file let's see what happens.
Again I'm going to 300 percent and it just stays tack shop.
It's almost as if we're in an episode of CSI and they're zooming in on the security camera footage and
able to see all this detail.
The reason that the SPG files don't pixilated is because they're actually code as Fiji is a vector image
format and we're going to be using this in our project so that our images stay sharp and looking good
no matter what type of screen that they're displayed on.
Now let's take a look at the second most important tools that we're gonna be using as part of this module.
And those are the Chrome developer tools.
So go ahead and right click on the next thought HCM Mal file and open it with Google Chrome at this
point you should see a website that looks something like this to pull up the Chrome developer tools.
Click on the overflow menu right here on the right hand side and then go to more tools and then developer
tools.
You can also make a note of the keyboard shortcut right here to bring them up more quickly.
Now the developer tools that you're seeing on your screen should look something like this.
You can of course position them anywhere you fancy so you can either have them on the right hand side
like me or look at them below like this but I prefer them docked here on the right.
It's quite good.
Now what are the Chrome developer tools really useful for.
Well first off we're seeing the code side by side with the browsers interpretation of our code.
So on the right hand side I've got the HMO and on the left hand side I've got what the user will eventually
see if they pull up the Web site and what's really really useful about the Chrome developer tools is
that when you hover over a particular bit of the code it will highlight that part on the left hand side
on the actual Web site.
So for example I've got the body of my web site right here and my body has two sections.
It has this section and it has this section.
If I click on the little arrow here I can expand the particular section to take a peek inside and see
what's contained therein in my first section.
I've got a heading which I can also expand and there I can hone in on a particular element like the
three here or the plus sign or the number two and in the second section I've got my button right here
so you can see that the different parts of code are highlighted on the right hand side.
But the really neat thing about Chrome is that I can also go the other way around.
So if I click on this little icon here where I can select an element in the page to inspect it then
I can highlight a particular element and it will point me to the line of code in the index that H.M.
l file where that pertains to this element.
So here for example I'm hovering over the button and this part of my index H2 mail file is highlighted.
I can even double click into here and change something so what says button text here I can overwrite
this and type something like Hello exclamation mark.
And when I hit enter then my render here on the left hand side will be updated but one thing to note
is that this actually has not changed the file that's saved on my computer.
So if we go back to visual studio code and I scroll down in the index that each time l file to where
I've got the button which is on line number 28 then I can still see that this is the original text.
So anything you do here does not actually get saved on the file.
So let's take a look if we can identify these elements in Visual Studio code.
So we've already identified the button which is right here and we can also identify our heading which
contains the number three plus the two and the equals the really nice thing about the S code is that
C you know this code is looking a little bit strange and you haven't seen it before.
One of the things you can actually do is just hover over one of these elements and read a short description.
So for example the H2 element represents a section heading and if I hover over this bit here that I
can read that the button element represents a button labeled by its contents and if I hover over body
that I can see the body element represents the content of the document.
So it actually is this index that each time l file.
Well this is the structure of our website.
It's in this file that we've got the different elements that are going to be displayed to the user.
So at this point there's only one file left to talk about right.
And that's the styles don't see ISIS file.
You can already tell from the name that this file is probably something to do with styling the SPG files
are the image files the index that each time all file is the structure of our website.
So the CSX file actually has something to do with the styling.
And we can see this again in the Chrome developer tools.
So if I've got the button highlighted here then a little bit further to the right I can see a bunch
of the buttons properties and these are the properties that style the button and we can actually see
what each of these properties does by taking her and taking any of them right here.
So let's take this border radius for example the border it is is 20 pixels and if I un ticket then I
can see that we've got a square with no rounded corners.
Now what about the padding.
What is the padding do.
Well let's find out.
We can simply take an antic the padding property and we can see the difference that it makes to the
styling of our button same with the font size if I uncheck font size of 70 pixels then the button gets
his default font size and the same of course is true of the font family simply by UN taking this style.
We go from the custom font which is called Just another hand to the default font and then I sing with
the Chrome developer tools as we can pretty much do this for every other element.
So let's take the body for example if we go to the body and we unstick the background color which is
this nice blue.
Then we simply get a white background.
So now that we know that these are the different styles.
Let's take a look at what this styles that CSX fire looks like in Visual Studio code.
And it looks something like this.
We've got a particular element C like the body and it's got a bunch of properties here that we're setting
like the background color and down here we have the styling for the button.
And just like with the index that each time l file a visual studio code is very very good at giving
us a little bit of background and quick help if we hover over any of these things.
So background hyphen color as the name suggests sets the background color of an element and the border
radius defines the radius of the outer border edge.
So every time you see something that you're not quite sure about.
Visual Studio code is really really good at helping you out and giving a little bit of background information
without having to go into Google and searching for it there.
So this concludes the very very quick tool of the stop Project and the tooling that we're gonna use
namely the US Code and the chrome developer tools.
And if you're gonna remember one thing from this lesson then remember this.
Remember that HDL has everything to do with the structure of the website.
It's in the H Jamelle file where all the elements of the website are listed like the headings and the
titles and the buttons and so on.
And in the SS file we've got the styling for all of these elements.
It's in the C Ss file where we set the font size and the padding and the colors and so on.
Now in the next lesson we're going to learn a lot more about each team L and C CFS and we're gonna be
writing some of our own code to style our website.
I'll see you there.