Ultimate Web Developer Course Learning By ARYAN MAREDIYA (PART-1)

Hi guys, and welcome to the ultimate web developer course.

 My name is Aryan Marediya and I'm going to be the instructor for this course, and I'm going to be teaching you guys a lot of awesome things. We're going to be learning three very specific technologies in this video course. The first one is HTML which defines the elements on a certain web page. So you can put text in it, and that's basically where you tell what needs to appear on the screen. We're then going to be learning CSS, or cascading style sheets, and that defines how those elements look. And then we're going to be finishing off the course with a little bit of JavaScript which is behavioral, as shown in this image here. And what that means, basically, is if I click an element on a webpage, JavaScript is a bit of code that's running in the background. It's listening for button clicks, for example, and when I click a specific button the JavaScript can be programmed to perform a certain function, which manipulates the page content. So, if I click this X here it closes that, and that's a bit of JavaScript that's running on this website. So, again, what we're going to be doing is we're going to be learning html5, css3, and then a bit of jQuery, actually. So jQuery is a framework for JavaScript, it's simplified, it's meant for rapid development, but I would also like to teach you guys full-on JavaScript as a programming language, because there is so much potential for that on its own. But, I don't think we're going to have time in this course to do that, so I'm most likely going to be putting on a specific dedicated JavaScript course after this. So if you guys want to learn that kind of stuff, that's going to be awesome. So, look forward to that. So, without any further ado, let's get started.


1. ATOM SETUP
Alright guys, welcome back. Let's get started writing code. And so first off, I just want to be very upfront about this, there are multiple ways to create websites. The most common one is to actually write the code in a text editor.However, there are methods where you can use a site builder or a graphical tool to point-and-click a website into existence, and we're not going to be covering that, and I would recommend against that at all times. And that is because first of all, it's very limited and restrictive in what you can actually do.You have so much less control over the final version of whatever you're building than if you write the code, and if you're going to be a web developer you are not allowed to use a point/click
web site creator. So, now that that's out of the way, we need a good text editor to write this code. Now, when we think about a text editor we think about maybe Microsoft Word or notepad even, if you're on Windows, and with notepad we can definitely write the code that we need to write in here. This is a little bit of HTML, and we can totally write that and save it, and that would run in the web browser as HTML code. So, it's all text, that's all a
website really is. However, this lacks a few fundamental and basic features that
we need nowadays when writing web pages, and that is first of all syntax
highlighting. As you can see here in the page behind, this is syntax highlighting.
It's a different color for each type of statement within the page, and so this
makes it incredibly easy to read through and navigate through the code,
that notepad just doesn't have. And the second one is auto completion, or code
completion. What this means basically is if I open up a tag here, what should
happen is the closing tag would appear on the right-hand side of my cursor, and my cursor would stay here so that I can just start typing. That's another very
important feature and notepad lacks both of them. So, what I need you guys to do is
go ahead and go over to atom.io, and we're going to be downloading this text editor. So just click the download button. If you want to see other platforms, click that other platforms
link. If you're on Mac or Linux, I mean if you're on Linux you're probably going to
be installing from the package manager anyway, so that's not going to be a
problem. If you guys are new to Linux and need help with that, let me know in the
discussion for this video and I will try and help you out with that.
Make sure to get the correct version. If you have a 32-bit system do not download a 64-bit installer. If you have a 64-bit system feel free to download a 32-bit or
a 64-bit installer, however I recommend the 64-bit installer if you have a
64-bit processor and operating system.Now that that is out of the way let's go
ahead and launch it. It's going to make you install it, and it can take a
few minutes, so if you guys want to pause the video now, that would be great. Now,
what happens when you launch the text editor for the first time you see this
welcome screen, and we need to just close these files here. So, there we go, and I'm
not sure...oh, that's loading from my web server directory, interesting. Let's
remove that folder. So what we're going to be doing in this video, we're going to
be working within here. Now it has a file browser on the left hand side, and
it has the code, it will be a tabbed interface right here. So what we're going
to be doing is right click here, I want you guys to click add project folder, and
what you need to do is find your project folder. If you don't have one yet create
one. I like to keep my projects all within a projects directory, and then
each one in its own directory that. So for this course, I've created a
web course directory, and I'm going to be using that. Right now it is empty. Once
you guys have your folder added to the project, go ahead and right click, and
click new file, and we're going to name this index.html. So all HTML files
that we create are going to have the HTML extension, and this is what you're
going to see, a blank text editor. So we're going to do is we're going to do
something really simple right here, and do I have the ability to open? Can I drag it? Alright, we'll go ahead and open this in a moment. What we're going to do is type out just Hello World. So, no tags right now, we're just going to print out some text. I'm going to save it, and then here's my project directory here, what I'm going to do is I'm going to drag it
and drop it in to Chrome, and it's going to open. As you can see, there is my text
exactly as I had written it here. So,you've just written your first web page,
go out and make some money. I'm kidding. What we're going to be doing is this was just a
basic example to help you guys get set up, so in the next video we're going to
start learning about the individual tags and what an HTML tag.


2. HTML STRUCTURE
Welcome back guys. What we're going to be learning now is about HTML tags and what a tag is. So, basically, in HTML you're going to write text in text, but anything that's not text you need to use a tag for it, and there's a lot of these, and we're going to be covering I think all of them. You know there's probably going to be a few older ones I'm going to
leave out, and that's just because you most likely will never have to use those,
and I'll try and mention them as we get to them. The first thing we need to do is
erase the text here. When you build an HTML file tags are contained within
pointy brackets like that. So, you open it,you type the name of the tag here, and
then you close it. We're not going to be writing tag because there is
no tag named tag. What we're going to be doing is when we open up an HTML
document you need...oh my god. Alright,when you start writing an HTML
document, you need to open on an HTML tag,so just as HTML, that wraps around the
entire page. So anything you write in this page is going to go between these
two tags. Now it's also good practice to indent whenever you open a new tag. So,
there's two top-level tags that we need to use to build a page. I guess we don't
need to, but we're going to. The first one is head, and that's going to close right
there, and then body. I'm going to need to configure code completion on this
because I don't like how this is working.Now in the head tag, everything
that's in here will not be shown on the web page, but it just tells the browser a
little bit more about the page itself. So, as you can see up there that's
by default going to show the title of the document, or the name
of the document, or file which is index.html. I can go ahead and put a tag
in here in the head called title, and then I'm going to just write whatever text I want to appear on the window, title bar, or the tab, depending on what browser you're using. I'm going to go ahead and save this, and we're going to refresh this, and now as you can see the title says my title, and it is not printed out in the page. So in the head tag, or in the header of the website, there's a lot of tags that we're going to throw in here that's going to
provide information about the webpage,and it's going to include resource files,
when we get to CSS you guys will see this, but basically just remember that with
the head tag anything that goes in there is not printed on the screen. As opposed
to the body tag, every bit of content that you put into a website, that's not
supposed to go to the header, should be within a body tag. And so if I write
hello world here, and save it, you're going to see that appear on the screen.
And so this is the basic structure of a web page, we're going to get
into very basic HTML elements in the next video, in the next few videos
actually, and we're going to be learning how to use them properly, and all that is
going to be within the body element here.So, an element, I'm not sure if I
mentioned this, but an element is the opening tag, all of the content within it,
and then the closing tag itself. So this is one element, this is one element, this
is one element, and then also this is. So,that's a little bit about the basics of
HTML structure. What we're going to be doing in the next video is again getting
into some basic tags.

3.HTML ELEMENT (div and span)
Welcome back guys. So let's get into the
actual HTML. We're going to be learning about tags, so again a tag is like this
and then also the closing version. And the closing tag is just the exact same
as the opening tag but it's preceded by this little forward slash, so just
remember that. So, we're going to be talking about...I'm just going to make
the the body of the document a little bigger so that we can actually write in
this, and also in HTML documents if you skip a bunch of lines and write
something here and then here, when you load it in the browser it's not going to
do that it's going to show them on the same line. So, let's write that, and then
way down here let's write world, and I'm going to save it and refresh, and as you can see it says hello world. If you don't believe me because that's what it said
before, maybe you didn't save, I'm going to write hello Nick, and there you go. So,
there are ways to break lines, and one of the easiest ones, and probably the one
you're going to use most, is a div element. So a div element you open it
like that,and you close it like that, and then you can type something here. So let's say hello this is a div, and save it, and let's refresh, and you see that appears in the same way. But, now if I go and put another div element under it, say this is a different div, or divrent,
like what i did there? Alright, I just accidentally zoomed in which is
another point. You guys are going to need me to zoom in. What is this
control-shift-equal. I think that's good.Yeah, so basically what I do these courses I have a 1080p screen and some of you may not, and so trying to read
high-resolution text on a lower resolution screen is very painful. So, I
apologize that I completely forgot that up until now, but now it's bigger. So,
anyway, when we save this and refresh you're going to see that it did do a
line break, and that's because div elements by default are full width which
means if you put another div it can't go any more on this line, so it has to
appear under it. So that is what a div element is. It's called a block element.
So in HTML and CSS what block element means is that it is however tall it
needs to be, or however tall you specify it, and then it's the full width.
That's what block means. The opposite of a block element is an inline element, and
it is not full width. It is only as tall and as wide as it has to be, and
that is called a span element. This is inline. So, yeah, if I type hello, how
are, and then drop down a few lines, you see what I've done there is I've created
two span elements that reads as though it should be only one
line, and if i refresh you will see that it is only one line and that's because
this is one span element, it's only as wide as it needs to be, and then this is
the other one. Let me open up developer tools. This is something else that you
guys are going to have to know.Control-shift-i brings up developer tools, this is what we need. So, let's look at a few things. When I hover over things in developer tools here this kind of highlights the elements on the screen. So, as you can see, the body element is full width and full height, and in the bottom left if you look at the bottom left of my browser
I'm not sure if you can see that, it says the exact width and height in pixels. So
that's neat if you need to know that. Now in chrome, the elements width and height,
the actual size of the element, is shown in blue, margin which specifies how much
outside room there is to each element is orange, and then padding is green. We'll
get into all that after. That's going to be more into the
CSS. You guys will see that before though.So let's drop down into the
body and you can expand each tag here within developer tools, and what I'm
going to do is hover over each of these things and look how its highlighted. You
can see that this now is the full width.Now, there is space to the top and the
sides of it, and that's about 10 pixels,because the body has a margin of 10
pixels. So this element is contained within this. This cannot be the entire
width of the page itself, it can only be the entire width of its
parent. So, div elements look like this,they are full width of their container
parent, and then span elements in contrast look like this. They're only as
wide as they need to be, and that's why div elements will show on different
lines, and span elements will show on the same line unless you tell it not to, and
that's also CSS and we're going to be getting to that as well, but not right
now. So, again, div elements are full width, span elements are only as wide as they need to be, and there are other differences and we will get to those aswell, but for the most part this is the main difference between the two, and admittedly these are going to be the two
elements that you use most in creating a webpage, but we're not going to use them exclusively. There is a name for that. When you open up a website and all you see are div elements that's called div soup, and that problem has been solved with html5 and the introduction of new elements that we can use instead of div elements, and we're going to be discussing a lot of those as well, and I'll point those out as we get to them. So, again, just to recap you build an element by opening and closing it, and then the content that you put within it is part of that element. The entire element is that.

Comments