what's up y'all this is Hussein Nasser from IGeometry and I believe we are
recording alright welcome to the first episode of level 1 JavaScript by example
this earth JavaScript by example I'm trying to mimic audible but doesn't work
so sorry alright so you've come here right you want to learn JavaScript or
you want to actually let's correct that you want to build a cool application
that will change people's life or that will make your life easier you want to
build a mobile application you can do all that with JavaScript right what do
you need you don't need anything you don't need to know any skills all you
need is literally this computer I have a Mac if you have Windows that will work
too you have a Mac that will work definitely right
so all you have to need is just just a laptop and you can get a starter you can
build cool applications so in this series in level 1 we're gonna build
actually we're gonna build a calculator right this might seem trivial but once
you build it you're gonna say that hey I built this right and you can add your
own touches to this application alright so let's get started how about
that let's get actually started just go ahead and start it before you jump into
code and all these Before we jump into coding and writing different codes let's
just get to what do you need to get started so you just need a computer
that's where you establish that right nada so you need a certain things of
applications that you need to download to get started to run that code that you
can author and by the by the end of this series you will be able to offer
application your author your calculator and even run it on your own machine and
you can consume that application from your mobile phone and that will be
really cool things to show after after a few episodes but what do you need to get
started what do you actually need first of all you need a computer check the
second thing is you need to download a text editor
that is where we're gonna write code and I recommend sub the lime text sublime
text really simple free tool go ahead and download it it's just a text editor
if you prefer if you have your own text editor go ahead and use it
it just works anything really literally works right any text editor already can
type anything in right we need something to type things that the second thing we
need to do which is a more important thing is actually a web server things
that your code will execute on all right so you need to host a web application
you need to host a web server for your application to it to be executed on top
of that so how do how do you get that it's very simple I'm gonna link a video
that I did earlier in preparation for this video to prepare for the for this
series right and once you set this up you'll be good to go
right so I have on this machine so you can go ahead and pause this video and go
to the second video where you set up your
server once you come back you'll be exactly where I am and that's exactly
what you need to do right all good that's the two things we need let's get
started let's first of all let us fire off our web server right to find out a
web server here so I mean maybe some of you is not familiar with this
application called terminal so you can just type here literally terminal then
this will pop up right and then once you installed your web application or the
web server you will go to the directory of the installation in this case in my
case I actually installed it here right node modules HTTP server and then then
and that is my web server that's how by it by the way that's how you navigate
directly CDs change directory so once you are here right you have this is your
web server I am going to execute my web server and run it so that's how you
execute the web server you type node that's my note GS web server
by the way if you have Windows you can use your iis web server or any other web
server but you can just stick with this as well right as well any web server
will work node HTTP server and then very important is the dot right so this will
be my directory where I run all my code alright so it is literally Hussein
machine node node modules HTTP server Ben and that's the folder where
everything should be executed for and that's the hard part once you do that
you're done you have a web server running now it's time to start writing
some codes right so we said in the beginning that we're going to build a
calculator so this episode is probably just getting
started getting setup learning taking it very slow right we don't we're not in a
rush here we're building and learning in the process right so we have my web
server ready I have my text editor already what can I do now
what should I start with the simplest thing is we're gonna build a calculator
right so that's that's what our goal here but all our code will be in a
single file and that file is nothing but an actual HTML file so you might be
familiar with this file then when you browse the web and he said for example
Google Earth slash fine HTML do you saw some files ending with HTML so you're
gonna author the similar thing here you're gonna author an HTML file so
don't worry what you're gonna write of it but let's get started with this now
right let's type one thing let's just type i just wrote an HTML file simple
right and then we're gonna save that where are
you gonna save it you're gonna save it in the exact directory where you just
run your web server so in my case it's here so I'm gonna call it calc dot HTML
right stands for calculator I have a lot for ya but don't pay attention to them
so calculate HTML and then you click Save and just like that we created our
first HTML file so I want to go ahead and go back to my terminal here where
did you notice this when we executed that node.js application the web server
we have we we've given back an address right
we have two kind of addresses the one to seven to zero zero or one that's our
local machine and that's the IP address of our machine another way to execute
any code that is in this directory is to actually use the machine name if you
know your machine name which is baby this is something really simple to do is
just type host name and you'll know your machine man that's another way of
knowing your machine name and address so now if I copy this and I went to Chrome
right I paste that right and I type calc with HTML at the end I just executed my
I just fetch that HTML file and executed that and I brought that into my computer
into my screamed in general right so let's change that for simplicity because
it's very hard to remember that I'm gonna change that to my machine name my
machine name is Hussein Mac and that's the port number right
that's the port that this server is running on it could be any port could be
just a tee but happens to be 8080 and that's it that was the hard part
sitting up and getting started so we just gotta just draw ten HTML file we
have that we have my my address and that will be literally the code that you will
be refreshing over and over every time you write something here that's gonna
try it actually just write something more says yep and then I'm gonna hold it
and save by the way you save control this so you you'll notice that I do this
very quickly but I saved now a next time i refresh I get the new stuff right it's
kind of boring though it's just sex right so where you want to
build an actual application so we have to erase all that code and write an
actual HTML code our first HTML code right so just getting started that's the
first episode how to write HTML code very simple so what we want to do here
is to build a calculator right so slowly we're gonna build out all these elements
one by one but let's build this skeleton each HTML application starts with this
stack HTML you have to have that because have to tell this file that hey it
starts with HTML and it also and it ends with HTML if you do that just just close
that tag for you this is called a tag all right and then what are you gonna do
next is you do the body and that's where most of the code is authored right now
to do this the right way we're gonna do it here now it's gonna is oh hello ward
I just authored my first HTML page all right now when i refresh if you notice
none of these code will show up because none of these workshop but we know now
this is my buddy this is the HTML page and that's that's where you write
everything basically everything we're gonna write it here but slowly we're
gonna build out this application it's gonna be fantastic journey guys we're
gonna have so much fun all right another thing I want to discuss here is other
kind of tags that's for fun show you that different
kind of it because none of that tags actually did something to my code right
so let's do this if you wrapped the hello
with this be right and then at the end of that I close that tag that's how you
open a tag that's how you close a tag it's very simple
that's the beginning of the tag that's the close of the tag beginning close so
what will happen here is I am telling HTML or the browser in this case to
execute while it executes hey by the way anything between these tags make it bold
right let's try that to refresh that you notice I don't know if you know this
actually yeah it is actually bold right notice that whoa what happened it's
timing all right so another thing we can do is we can use
these tags h1 h2 right oh sorry close the h1 so what what happen is each
one is called header 1 which is a type of header which makes things really big
right and that was just basic introduction of HTML tags and whatever
you need you're gonna ask now I know you have questions hey how do I have how do
I do I tell it how do I do color how do I change my color how do I do
this and and this is the beginning of a journey of saying how do you do things
you just get started and you learn in the process you have now the canvas
right you are an artist and I believe that programming is art you have the
canvas go ahead and make art go ahead and do whatever you want right build
that thing from scratch build that thing all right guys now I'm gonna do actually
the actual code right my calculator refresh so that's just title
saying this is my calculator don't you dare touch that calculator alright nice
alright let's continue with our you know what let's stop here I think that's
enough we're gonna continue in the next episode for with more HTML and we're
gonna construct the calculator application alright I think this is a
logical way to stop and hope you enjoy this episode now you get a set out take
your time to set up your application ask me questions in the comment section
below and I'm gonna see you on the next one
goodbye