How to Become a Web Developer

How to Become a Web Developer

so you want to be a web developer but you're a bit overwhelmed with well everything well that's understandable and in fact most of us have been in your shoes hi there my name is Jeremy mcpeak and in this course I will help you understand the things you need to know to get started as a web developer first I'm going to walk you through the tools you'll need for not only this course but for your journey as a web developer we live in a fantastic time where tools are plentiful and it can actually be difficult to find the tool that we love to use next I'll give you an overview of how the internet works it's really nothing more than a huge network but a lot of technologies work together behind the scenes in order to make it function then I'll introduce you to the three technologies we use that work together to make great web pages first is HTML the language we use to create the foundation of our web pages without HTML our pages would be a jumbled mess of text HTML allows us to give our pages structure and it also gives us the ability to give certain text within our page a specific meaning but hTML is a limited language we use it only for marking up our documents in order to give our pages a pleasing look we use cascading style sheets or CSS with CSS we select certain pieces of our web page in order to change how it looks we can even change the layout of our page the third technology is a language called JavaScript and it's what we use to energize our web pages with JavaScript we can change our pages on the fly even goes so far as to remove and add new pieces to the page we can also change the CSS with JavaScript too we have a lot of ground to cover so when you're ready cue up the first video and we will get started what developers use a lot of tools for writing their sites and applications and we're not going to cover the vast majority of them because while they solve some very complex problems they also introduce a lot of complexity you're just starting out so you don't need to know all that stuff instead we're going to cover the most basic tools that you will need not just for this course but for everything else that you're going to do as a web developer so starting today these are tools that you are going to be using every day if this is something that you do every day we're going to start with the most obvious and that is a browser you need to download and install a browser now every operating system has one already installed but you should know that the browser is where our sites and applications execute so in that sense it's a lot like an operating system and just like all of the other operating systems in the world every browser is different Chrome ie edge Firefox all of these browsers while they have some commonality they also have some differences some browser supports features and technologies that other browsers do not now the very best web developers right there sites and applications to run in every browser and that is something that you definitely want to work towards but for the sake of simplicity and for just starting out we're going to stick with just one browser now it really doesn't matter what browser you choose because for everything that we're going to talk about in this course every modern browser is going to work just fine however I am going to use Google Chrome it is cross-platform which is of course very good but it's also our go-to browser anytime that we need to quickly test something or even as we are developing our site or application we typically just have one browser open because that just greatly simplifies the development process and then as we need to start testing in other browsers then we incorporate those and Chrome is that browser that we use it is essentially the de-facto standard as far as browsers are concerned today so browser is the first tool that you will need the second is a text editor because we're going to be working with a lot of text HTML CSS JavaScript these are all programming languages and we deal with them in text now every operating system has a built in text editor but you do not want to use them they will work but they don't have a lot of the features that we need for editing code because that is what we are editing code is text but code is special text so I have a replaced notepad which is the default text editor for Windows with a program called notepad – and has a lot of extra features like line numbers which is very useful there's also a feature called color coding now as we are writing code there are special things in code that makes it different from normal text so those are in a different color and you begin to recognize what things are based upon their color and every code editor is going to have these two things line numbers and color coding and there's of course other features that make code editors useful and there are many code editors a lot of them are free and a lot of them are paid for software so really what you need to do is find a code editor that you like no one can tell you what the best one is except you so I'm going to point you in the direction of several code editors and I encourage you to try them all just so that you can get an idea of how they work and what you like in a code editor we're going to start with a tool called brackets and this is what I'm going to be using in this course because this also has the third tool that we need for web development and that is a webserver because while we can work with our files on the computer and run them from the computer we really need to run our application from a web server and brackets makes it easy to run the things that we are working with as a web server so brackets dot IO this is made by Adobe but it is open-source it's also cross-platform in fact everything that I'm going to show you today is cross-platform so you will be able to run it in Windows OS 10 and Linux so download and install brackets try it out and of course right now you don't really know how to try it out and that's okay but I encourage you to use brackets as you are following along in this course because that is what I'm going to be using so brackets is one option there's another called atom you go to Adam made by a company called github and it has a lot of the same features as brackets but it too is cross-platform it is open-source least I think it's open-source but even if it's not it's another wonderful tool that you can use for writing code the third is made by Microsoft if you go to visual studio comm they have a tool called Visual Studio code now if you are on Windows you can install Visual Studio community however if you are just now starting out I recommend that you do not use Visual Studio that is primarily for people who are familiar with not just web development but development in general but Visual Studio is a wonderful tool if you are on Windows now they have something called a Visual Studio code which is cross-platform and it's a lot like brackets and Adam in fact judging just by the screenshots that you see they are a lot alike the only thing about code while I do like it it is primarily geared for more experienced developers especially those who are getting into the server side of things so while you can use code at this point in time I don't recommend it to start out with but do download it take it for a test drive because there are a lot of wonderful tools inside a Visual Studio code now the final tool that I'm going to show you is not free it is cross-platform and it's called sublime text and you know a lot of people balk about paying for software but also remember that if this is something that you are serious about you do need to spend the money on the tools that you want to use the tools that are useful to you if sublime text is one of those tools then fork out the money for it it's not very expensive it used to be about 60 bucks and it might be more than that now but if it has the tools that you need later on down the road then yes give them the money because they have spent a lot of time on this the current version is version 2 but they have version 3 in beta and you can use the beta if you are a hate customer for version two now any one of these is going to serve you well but once again I am going to be using brackets in this course so what I would recommend for you right now is to install brackets go through the course and then as you're more familiar with web development in general then download the other options and see which one you like better and then start using that because the code editor is probably the most important tool that you are going to use it is what you will use to create the sites and applications that you and other people are going to use you need to love the tool that you will use every day the Internet is a conglomeration of many technologies that work together and later in this course we're going to look at three of those in more detail HTML CSS and JavaScript these are languages that we use to create webpages and use them as the front end for our web applications but before we get into that let's first dig into some of the more technical aspects of the Internet starting with what is the Internet well really it's just one gigantic network and I guess it would be more correct to say that it is a network of networks well what do I mean by that well I am sitting in front of a computer in my home on my own personal network so I have this computer and I have a few others and devices so that they can all talk to one another and they are protected from any outside interference due to my router because it has a built-in firewall and it blocks any time anybody tries to intrude unto my personal network however all of my devices need to get out to the internet for some reason they need to go to web sites or contact services or things like that so in order to do that they have to go through the router which is our gateway they go through the router and then that traffic is just sent wherever it needs to go so the router is a piece of equipment that essentially joins one network with another so really my personal network is on the Internet if it didn't act we block people from just intruding then people would be able to access the computers and devices that I have on my network now in order to get unto a network you need to have what's called an IP address it is a unique number that is assigned to each computer and device on a given network so I have I don't know how many devices and each one has an IP address and they are all unique otherwise they would not be able to get on – first of all the network and contact the other computers and devices and they will also would not be able to get out onto the Internet so I'm going to run a command called IP config on Windows this shows the IP configuration now IP stands for Internet Protocol and what I want to focus on is this IP v4 address we have two types of IP addresses we have IP 4 and IP 6 IP 4 is an older addressing scheme however it is still used especially with internal networks and then IP 6 is a newer IP scheme that is a lot more complex than IP 4 now you can see here that's my IP address for this machine is one for each of these numbers that are separated by dots are called octets and if another computer or device on my network wanted to contact this machine it would do so by sending information to this IP address and if this machine wants to get out onto the internet it has to go through this default gateway that is my router and that is 1 9 – 1 6 8 0 to 20 now up here you can see ipv6 and you see that there are colons and then there are hexadecimal values in between the colons there's actually one two three four five six sets of hexadecimal numbers so it is much more complex but it also allows for a lot of devices and computers on the network right now the internet uses IP 6 although it still uses IP 4 I p6 is the new standard so everything on a network has to have an IP address otherwise you would not be able to access that computer or device for example we are going to ping that as we are going to send a packet of data to a computer on the internet so this is not going to be on my internal network the IP address is to 16.5 8.2 18.1 42 now whenever you ping something you're basically wanting to check if you can access that resource it could be a computer it could be a router it could be some other network appliance so by sending a ping we are essentially wondering if something is there so that packet of data is going to be sent to that IP address if there is something there it is going to see that so we are pinging it and it is going to send a response saying yeah I'm here and so it will do that 4 times and we see that we have four replies we also see the amount of time it took for the ping to go from our computer to the computer at this IP address and then back so this was 34 milliseconds for the first ping 40 milliseconds for the second 36 for the third and then 38 for the fourth and that's pretty fast now this actually happens to be a website but not every IP address that's on the Internet will take you to a website that just means that there is something at that IP address it could be listening for people wanting to view a webpage or it could be something more specific it could be listening as a web service so that's like a mobile app could send data to an IP address and the computer at that IP address will be looking for something specific in order to respond to it but in our case we're going to go to the browser we're going to type tou1 6.58 – and 8.14 – and we are going to see that it takes us to so we can type in that IP address and go to Google and that would work I mean obviously it does work however we don't want to have to memorize an IP address that's something that's we just don't want to do especially with I p6 addresses so instead we have domain names like is a domain name and that means that there has to be a system that map's a domain name to the IP address so if we go back to the console and if we type ping we're going to see that it goes to the same IP address but in order to find the IP address for it had to look up to a gigantic database of domain names and to their IP addresses that's called DNS it stands for a domain name system so whenever you want to go to any website your computer has to first contact what's called a DNS server the purpose of this server is to give your computer the IP address for the domain that you are wanting to access and then your computer can then go to that IP address so I'm going to go back to my console and I'm going to run IP config again but I'm going to use the all option this is going to list all of the settings for my IP configuration what I want to focus on is the list of DNS servers now I have several the first is one on my local network but then I have two others and these are supplied by my ISP and yours would be very similar to this you probably wouldn't have a DNS on your local network well you might it just really depends upon how your network is set up but you would definitely have the DNS servers for your ISP those servers will give you the IP address for that domain and then your computer will go to that IP address but how is DNS configured well that really depends as well I use a service called DNS simple because DNS can be a rather complex topic and dena simple just makes it easy to do there are several records for DNS and we're not going to really go over any of those but here is a record of type a and we can see that the name is mcpeak IO and then the IP address is 2 1 3 2 1 oh 1.1 807 5 now this is one of those IP addresses that will not take us to the actual website if we go here we see that we have an error and the reason is because of how Azure which is Microsoft's cloud service handles websites but if we go to McPeak dot io it's going to look somewhat similar but this is actually the page for MIT peek io I haven't done anything with this domain but this is active and it does work so for the DNS of my domain I had to link the domain name to the IP address and there's a few other things that I had to set up for a Jers service so that is how our computers get to resources that are out on the internet more specifically they are how they get to the computers that are serving web sites and in the next lesson we're going to look at web servers and how they work in this lesson I want you to open up a browser and go to any website I am going to open up Microsoft edge and use it for the first few minutes because Google Chrome eliminates some of the things from the address bar that I want to point out here now if you're like me you typically don't do a search and then pick whatever website that you want to go to if you know what that website is like if I want to go to Tut's plus com I just type this can access them without going to an actual web page the web on the other hand is nothing but web pages well that's not correct there are other what we call resources now that is a key term because of what we see here this entire thing in the address bar is called a universal resource locator or URL it is simply an address that we use to go to a resource on the web now what is a resource it can be a web page it can be an image or some other type of file it's really anything that we can access using HTTP that stands for hypertext Transfer Protocol and every website that you go to uses HTTP that is what the web runs on now there's also a secure version of HTTP called HTTPS and some websites do force you to use that a Google comm is one if we go to we should see HTTPS well we don't here until we actually click on the address and there that is now the reason why I wanted to use edge first is because Google hides some of this information from you and I can understand why because by this day and age we don't need to know HTTP and all of that stuff as far as a URL is concerned because that is the default if it's on the web it uses HTTP but you can notice that all we see here is tuts plus com and if we go to we will see HTTPS but the reason why we see this is because it's not standard HTTP it is the secure version of HTTP so if everything on the web is a resource that means that there has to be something on the other end of the line that is what we call serving a resource and that is what a web server does it sits on the internet and it's listening for what we call HTTP requests anytime that we try to go to a website we are sending an HTTP request to the server of that website so at tuts plus com there is a server listen for requests and it will send a response back saying either it can or it can't serve that request the reason why it might not be able to is because whatever we requested doesn't exist or it could be that the program or the application that's running on the server encountered an error now we can actually see the requests that are being made if you press f12 this is going to pull up the developer tools in chrome you will want to go to the network tab and then you will want to refresh the page and we are going to see a lot of requests in fact we see 47 requests now the reason why we see so many is because inside of this web page at touch + comm it is using resources so the browser downloads the web page for tuts + comm it then sees that it needs to download all of these other resources so it does so and it tells us whether or not it was successful in doing that it also tells us what type of request was made because there are different types now we're not going to go into the different types but you can see here that all of these are get requests that means that we are wanting to get a resource so then there's this status that says 200 now 200 means that everything is ok so the browser sent a request to touch + comm touch + comm responded saying that I found whatever it is that you are requesting here it is and so we have 200 now you can see that there are also status numbers of 304 this means that it was not modified since the last time that we made a request for that resource and if something goes wrong like if we made a request for something that doesn't exist then the status would be 404 or if the program that's running on the web server encountered an error then we would see a status of 500 now there's a lot of other information that goes on with each individual request if you click on touch + comm here we see what are called headers this is part of H ttp whenever a request is made this header information is sent with that request so we see what the request URL is we are requesting HTTP colon slash slash touch plus comm we are making a get request meaning that we are wanting to get that resource and the response from the server is 200 everything is OK and if we scroll down we can see what the server actually sent for its headers and there's a lot of header information there so you would be correct to say that the web and HTTP specifically is a client-server paradigm our client is our browser it sends a request to the server and the server sends a response either it contains what we requested or it contains information as to why the server couldn't give us what we requested now this is why I chose brackets for this course it has a built-in web server so whenever we run our page we will be making a request to a server that is on our computer and that is very helpful when you want to run and debug your pages HTML stands for hypertext markup language it is the language that we use to well mark up our documents and that is the terminology that we use we are working with HTML documents yes they are web pages but technically they are documents so you can think of it like a document that you would edit within a word processor all of the mark-up is still there it's just usually hidden from you and it's a different type of markup it's not HTML but whenever you set certain text as a heading or you bold something or italicize it or change the font size you are marking up that document and the same is true for HTML so while this document that I have opened here has some structure to it whenever we view this in the browser in a few moments we're going to see that – all of the structure is gone because it is not marked up but before we do that let's briefly go over brackets because this is the first lesson where we are actually working with this code editor so with it's the ideas that you are working with a project in a project is basically all of the folders and files inside of another folder so if we go to My Documents and I have a folder called web dev and this is where I'm going to put all of the source files for this course and then I have another folder called HTML primer that is the project for this lesson so if we go inside of this folder we see that I just have this index.html and if I had other files they would of course be listed here so whenever I opened up brackets I went to file open folder and then I navigated to the HTML primer folder because this is the project that I want to work with inside of brackets so whenever I selected that folder we see up here HTML primer that's the name of this project and then all of the files inside of this folder and that is just this one file called index.html now if I go back and open up the web dev folder then we're going to see that things change web dev is now the project and then inside of that is a folder called HTML primer and we know that it's a folder because you can expand it and see the other files that are inside of there but I'm going to change this back to open folder and then HTML primer and then once you open up your folder you can go to file new and then you would create a new document just save it and then name it in this case I called its index.html and you should do the same so create that file and then you will have something that you can start with for this lesson now this file is going to be available in the code download so feel free to download it and use that if you want to I don't expect you to write all of this most of this is just lorem ipsum text now the HTML extension is very important that tells the operating system what to do with the file it also tells the web server what to do with the file if it sees that it needs to serve an HTML file then it knows to do that the extension also tells the code editor how to display the text here now right now all we see is just plain text and that's because we don't have any HTML in this file but whenever we start adding HTML you will see the difference between HTML and just normal text because brackets will know how to color code the HTML so before we get into that let's go ahead and go over to this lightning bolt in the top right corner if you click on that that's going to fire up the live preview so that we can see this document in the browser now notice that all of the text is jumbled together and if we view the source code of this web page we're going to see that we still have the formatting here but here's the thing without any HTML the browser is just going to take all of the text and it's going to replace all of the white space with just a single space so all of these line breaks it removed and replaced it with just a single space that's why we have this jumbled mess of text so what we are going to do is add markup so that the browser will know how to display our document so let's go back to our code editor and we're going to start with the headings because there are some things inside of this text that stick out as headings first is this introduction to web development that could also serve as the title for this document then there is what you need and then tips to achieve greatness so as we are marking up this documents we can think of this introduction to web development as a large-sized heading and then for what you need and then four tips to achieve greatness then we would have a smaller size headings so that introduction to web development is the most important heading so we'll start by adding what are called opening and closing tags that is what we have in HTML a tag begins with a less than sign and then there is specific names for the tags now for headings we have h1 and then h2 and we can see from this code completion window here that we have several options we have h1 that is the highest or the largest heading list heading that we have is h6 so since this is the most important heading we're going to go with h1 so we have are less than signed then the tag name h1 and then a greater than sign and brackets already created what we call a closing tag so in between the opening and closing tags we have our text so basically we have marked this up as the largest heading that we can have and we did so with an opening h1 tag and a closing h1 tag now this is closing simply because it has that slash otherwise it would be an opening now most tags have opening and closing tags there are some that have just an opening tag there are others that can be self closing and we'll get into that later on but for now we're just going to go over the process of marking up this document with some very simple tags so we have our big heading now we want a smaller heading for what you need because this is a heading but it's less important than our first heading so we can go with something like h2 but I'm going to go with h3 and then I'm going to put what you need inside of these opening and closing tags so we have marked up this heading and we will essentially do the same thing for this other heading so we will have h3 there and we will put our heading text in between the opening and closing tags now I don't want to confuse you but we call these tags but the opening and closing tags together are called an element so if we have h3 and then closing h3 this is the h3 element and an element is made up of an opening and closing tag so we have our headings and if we go back to the browser let's refresh we see our headings now so we're getting somewhere but notice how the paragraphs are a little different this first paragraph look fine but once again if we view the source we have two paragraphs for the heading of what you need and whenever it's rendered in the browser we just have one so we needs to mark up our paragraphs so that the browser knows where a paragraph begins and ends we do that with an element called P so we have an opening tag of P and a closing tag of P and we put the paragraph inside of the opening and closing P tags so we will basically do this for all of our paragraphs and this is telling the browser that's we have headings and then we also have paragraphs so whenever we go back to the browser we are going to see the distinction between especially these two paragraphs and these two paragraphs so let's go back to the browser we will refresh and now we have our marked up document now I fully understand if this looks completely weird to you because we have all been in your shoes but this is how we create web pages we have our documents and we mark it up with what are called elements an element is made up of an opening tag and a closing tag and there are some exceptions to that rule but for right now just think of it that way these elements have special names h1 tells the browser to display a heading h3 tells the browser to display a heading but it is a smaller sized heading than h1 the P element tells the browser to display the text inside of the opening and closing tags as a paragraph and there are of course many many more elements and we will be going over quite a few of them within the next few lessons in the previous lesson we marked up a very simple document using heading and paragraph elements and when we viewed it in the browser we saw how drastic of a difference it is between a document that is not marked up with a document that is marked up now the interesting thing is that our HTML document is what we call invalid it's missing some very important things and this is interesting because even though it is an invalid document we see that the browser still renders it now there's a whole history as to why this takes place but all you need to know is that the browser is going to take your HTML be it a valid or an invalid document and it is going to try to render that document now we should always strive to create valid documents because valid documents means that our document is going to work or at least it should work the same in any browser and that is what we want to achieve so in this lesson we are going to take our invalid document and we are going to make it valid the first thing we need is a document type declaration this essentially tells any machine or program that's going to load or read our HTML document that it is an HTML document so on the first line we're going to add an open angle bracket or a less than sign whatever you want to call it followed by an exclamation point and then the term doctype toc typ e and then a space and then HTML and then a closing angle bracket so we have what looks like an opening tag for an element but it is not this is a processing instruction that says that the doctype or rather the document type is HTML so we have our dot type the next thing we need is the HTML element this is what we call the root element this is what is going to contain everything else within the document and an HTML document has a root element called HTML so eventually we're going to take all of our contents here and we are going to put it inside of the HTML element but there's a couple of other things that we need to do first we need to add an element called head this is inside of the HTML document because an HTML document is divided into two parts we have the head and then we have the body now the head is not the header at least as you would think visually you know if we go to a website let's try you know usually the header of a website is here at the top so what we see in this dark gray area would be considered the header this is not what I am talking about with this head element what is contained inside of the head element is header information about the document so we would have a title for our document and in this case we could use what we have for this h1 element introduction to web development so this could be the title of the document and so anything that opens up this HTML document for rendering or for other purposes it would know that the title is what we have specified here we can also add other metadata in fact there is an elements called meta and you can add a variety of other pieces of information we can also add our Styles here we can also add JavaScript here as well but we're going to refrain from doing that we are just going to have a title inside of the head element so we have head and then the body now the body is where the content of the document is going to be contained so that is everything else that we have so we want to take all of this let's cut it and let's paste it inside of the body element so we have essentially said that all of this is the body of our document and so we end up with a document that is highly structured an HTML document is a document made up of multiple elements and those elements can be contained inside of other elements so I'm just going to structure all of this at least visually so that if we were to open up this document in some other editor then based upon the white space we could tell what is contained inside of other elements so for example the head element is very noticeably inside of the HTML elements now we can get rid of the tabs and it's not going to affect how it is viewed within the browser but from a code standpoint we want all of this white space it just makes things a little easier to read so as we scroll down we can see that – all of these P elements and the h3 elements they are all contained inside of body now if they were not inside of body then we would have an invalid document because the body is where all of this stuff is contained while you can put this h1 inside of the head element that is invalid now if we go to the browser and refresh we're not going to notice really anything different here now we see this document does look different in fact we see that we have essentially two of the same document that we had before the reason is because it is updating as we update our documents in brackets so if we refresh then we see what we saw before but it looks almost the same there's a slight little difference as far as the styling is concerned but that's not very noticeable because it's padding and margins and things like that and we will talk about all of that whenever we starts talking about styling so now that we have a valid document we can start adding more elements to it because for right now we've just used h1 h3 and P elements but there are a lot of other elements that we can use in an HTML document and we will look at some of those in the next lesson HTML has a lot of elements and you can place those elements in a variety of different categories but in this lesson I'm going to focus on just two categories we have what are called semantic elements and then we have more generic element but first what do I mean by semantic elements well these are elements that by their very name or their definition they have some specific purpose so that whenever we see them in an HTML document we know what that is used for like for example in our documents we have h1 h3 and P elements these are all semantic elements because they are used for very specific purposes so whenever we see an h1 elements we know that whatever is inside of the opening and closing h1 tags we know that that is a heading the same is true for an h3 elements and because we have different levels of headings we also know the importance of those headings so just by looking at our HTML we can point out and say there's a heading there's a heading and down here is another heading well the same can be applied to P elements you know that means paragraph but what is a paragraph well it contains content so we can say the same thing that's anything inside of an opening and closing P tag is content and that is more the body or rather the main content that we are concerned with within the document so in this particular document we can look at all of the P elements so we can know that this is main content this is main content and this is main content now that isn't always going to be the case because there are some elements that are more generic and we can use them for just about to anything that we want now we want to use them only in times when there's not already an element for that specific purpose like for example one of the generic elements is called div just div that stands for division and basically you are dividing a document into different sections so if we wanted to have a sidebar we could do that and we could specify a sidebar with a div element and then if we wanted to have the main content inside of another div element we could do that so in fact let's do that I'm going to move these div elements to the top of the body I'm to take all of the main content that we have and put it inside of this other div element now the problem with just using div elements is that they are not semantic we don't know what these div elements are for now we know right now that this div elements contains all of the content for this document so we could guess that this is for the main content but with something like a div elements we want something specific we want to say that okay this div element is for the main content this div element is for the sidebar so that when anybody else is looking at our documents they know what it is and it's not just for other people as you will soon find out whenever you write a web page and you just leave it alone you come back six months later you will have no idea what you did inside of that document so we can give some semantics to our div elements by using attributes and there's a couple of attributes that we can use but in this lesson I'm going to introduce you to an attribute called ID now first of all what is an attribute well it just adds information to an element and an attribute goes inside of the opening tag and you can have a variety of different other attributes so there's this ID attribute here we have an equal sign and then a pair of quotes now you don't have to have the quotes but I like to have the quotes and then if we wanted to have another attributes let's find one here in this list and this isn't a complete list this is just what's brackets thinks that we can use here one of them is class and we will talk about class whenever we start adding style so we have an ID attributes and we have a class attributes but right now they don't have any values assigned to them but you can have multiple attributes here and that's what I wanted to show you for right now but let's get rid of class and we're going to stick with ID now this is a unique identifier this is a way that we could eventually find this div element based upon the value that we have with the ID so this needs to be unique and we could say that okay this is sidebar and then we will give another ID attributes to this other div element that says main – content now you can have dashes you can have underscores or you can have nothing in just one string I like to break mine up so that's we can see that this is main content and that this is sidebar although we could argue that it is side dash bar I'm just going to stick with side bar okay so we have essentially two sections within our document and if we look at this in the browser right now we're still just going to see kind of what we saw before it looks like that nothing else changed however let's add some content to our sidebar let's just have this is the sidebar and we're going to see that this will change oh there it is right there this is the sidebar that appears above where we have the main contents now a sidebar should be on the side and the main content should be next to the sidebar and throughout this lesson and probably the next one we're not going to see that because that is achieved with CSS but as far as our markup is concerned this is perfectly fine and this is more of what we would want to do but in a sidebar we would have more content that isn't really pertaining to this particular document but it would be something that would be used site-wide like a navigation pane and a navigation pane is just a list of links so we have a semantic element for displaying a list in fact we have two of them we have word a called unordered lists and then we have an ordered list the only difference between the two is that an unordered list has bullet points so that could be a little circle or some other type of glyph but an ordered list has numbers instead of bullets since this is going to be a list of links we're going to use the unordered list and that is simply ul and this is a semantic elements whenever you see ul you know that it is a list of things because what is contained inside of a list be it an unordered list or an ordered list is a bunch of list items this too is a semantic element it's simply Li and then we would have our link now we're not going to have actual links yet because we don't have any other documents but we could have something like home and then let's have another item here that would be article which would be this document that we are looking at so if we go back to the browser and refresh we now have our list of soon to be links and then our main content and while the browser is rendering this all as just one big large chunk of text our markup is where it is all separated and that is very important because whenever we come in and add style we will be adding that style based upon the mark-up that we have so we want to divide our web pages into the different distinct sections so that we can style them now there's one other generic element that I want to point out we have div the other is called span and the two are somewhat similar in that they are used to contain content or a bunch of different content but the big difference between a div element and a span element is that a div element is what we call a block level element whereas a span is what we call inline and that is something to that's we are going to be working with more whenever we get into CSS but I can demonstrate what these types of elements are if you right-click on anything within the browser I'm going to do so on this h1 element let's go to inspect element and then this is going to pull up the developer tools for Chrome now we want to go over to elements and this shows all of the HTML as it is rendered here in the page this is not like viewing source viewing source is viewing the actual HTML although we can see that brackets is injecting some attributes into these elements but what we have here in the developer tools is as it is actually rendered within the page so you can see here we have two div elements and if you hover your mouse over these two elements it highlights it within the page so first we have that first develoment for the sidebar and you can see up at the top that it is just a block and then the next div element is another block but it is underneath the first div element so whatever is inside of a div element by default is basically on a new line so in that sense it's a lot like a paragraph but it's more for structural purposes as opposed to just content and then if we drill down in this second div element and into the first P element that's where we put that span here we see that span and in this case it's on Epsom but the text is still on the same line so this is what I mean that it is an inline element it doesn't put the content on a different line it just keeps it inline as it already is and this is useful when you want to supply style to individual things within the text that is something else that we will be looking at in a later lesson so in this lesson I introduced some very important concepts the first is that we have semantic HTML and then we have more generic HTML we also talked about attributes and more specifically the ID attribute an ID attribute is a way that you can provide a unique identifier for a given element and you can use an ID attribute on just about any element we talked about div elements and span elements how they are used to add structure to our document and we briefly discussed the difference between a block level element and an inline element well we could spend a lot of time talking about HTML the different elements that they have the different attributes but we need to get moving on into style so in the next lesson I'm going to show you how you can add style to your document so that you can style your elements by itself hTML is very limited when it comes to changing or adding style to our documents and really we wouldn't want to use HTML anyway because we've been there in older versions of HTML we had elements that we could use to change the font such as the font style the size the color we could also do some other things and it was a nightmare so we have learned from our mistakes we don't use HTML to do anything as far as styling is concerned and I'm not going to go into the whole history of that because it's really irrelevant we use a language called CSS and that's really all that you need to know CSS stands for cascading style sheets and it allows us to completely separate our markup which is what we have here from our style and that's really what we want now we can add style using CSS in three different ways really one of those is the best way but I'm going to show you all three the first is what we really don't want to do unless if we are prototyping something because it's really easy to get started with and that is by simply adding a style attribute to our element and we can use this attribute on just about any element so I'm adding this style attribute to the body so this means that whatever I specify inside of this style attribute is going to be applied to everything within the body and I am going to change the color you know right now it defaults to black I'm going to change it to blue so I have color followed by a colon and then the value for color now in CSS terminology we have color which is the property and then we have the value for that property and instead of using an equal sign we use a colon so let's save this let's go to the browser and we are going to refresh and we see that the color of the text changes to blue now we are not limited to having just one property inside of the style attribute we can use a semicolon after that and then we just define another property there's one called text – decoration and we're going to say underline I'm going to go ahead and end that with a semicolon so that if we ever decided to add something else to the style attributes then we could just do that so the color is blue and everything should be underlined now so whenever we refresh yes we see that that is the case now the problem with this approach is that it's not very different from what we used to use with the HTML elements in this case the style is what we call tightly coupled to the markup so instead of using a style attribute on our element inside of the head we can add a style element and then we can do essentially the same thing that we did before when you want the color to blue we want the text decoration to underline but then we have to say okay what do we want to apply those properties to and we have what's called a CSS selector it's going to select an element within our document and it's going to apply those properties well in this case we want to apply those properties to the body element so we just say body that is the name of our element and I'm going to paste in those properties so we have the colors going to be blue the text decoration is going to be underlined and those properties are contained within a pair of curly braces so we have the selector which is the body element followed by an opening curly brace we have our CSS properties and their values and then we have a closing curly brace so we can get rid of this style attribute here we can go back to the browser and we're going to see the same results that we saw before now this approach is slightly better because now we have style that can be applied to the entire document as opposed to an individual element but we can take this a step further and we can define our Styles inside of an external file so that then we could link to that file and use it and not just this document but in any of the other documents that we might create so let's go to file new and let's call this first dot CSS so I'm going to save first CSS and we are going to copy this selector and paste it into this CSS file and let's format the whitespace so that it's a little bit easier to read and then we're going to get rid of this style element and instead we're going to use an element called link now there are three things that we need to specify here the first is an attribute called rel and this is going to be a stylesheet and we can see that brackets was prompting us for that value so we have a link we have the rel attribute set to stylesheet the next is type and once again we see that two brackets is prompting us with a value the type is text slash CSS and then finally we have the H ref attribute this is where that file is actually located and that is here inside of the same folder as our index.html and then we want to close that tag now there's not a closing tag like this for a link instead we can use something that's called a self closing tag which looks like that so now we can go back to the browser we can refresh and voila we have the same results and as I mentioned before the beauty of this approach is that we can use this CSS file in any webpage now so let's create another one let's save this as second dot HTML we're going to copy everything that we have inside of index and paste that into second HTML but let's change something instead of the title being introduction to web development let's just say second page and we can do the same thing for this h1 element Joe so that we know that we are looking at the second page and let's go to the browser let's duplicate our existing tab and let's open up second HTML we see that the same styles are applied so if we decided that okay we no longer want to have blue underline text instead we want red underlined text or now let's just change the color let's get rid of the underline because you know usually we wouldn't want our text underlined and if we look at both of these pages we're going to see that the color in both of them is going to be red so the second page the color is red let's go back to index.html the color is red as well so this makes it very easy to maintain the style that we have throughout multiple pages now contrast that with some of the other approaches they for example if we used the style here then we would have to change the color value so let's say that's color is blue and then we would have to change that to red then we would have to go to the second HTML and we would need to do the same thing here it would have the style attribute which would be set to blue and then we would have to change that to red so instead of going to each individual web page we just have to open up that CSS file make the changes that we want to make and then we would see those changes along all of the pages that reference that CSS file and so now that you know how to add style to your web pages in the next lesson we're going to look a little bit more at CSS we've seen how we can apply styles to a certain element by specifying that element name within our CSS but we can also select other elements using the different selectors and we will look at that in the next lesson in the previous lesson I very briefly introduced you to CSS the technology that we use for applying style to our documents in this lesson we're going to look at a couple of different things we will look at the more common CSS properties that we would use within our webpages we will also look at more selectors so that we can select more elements and apply styles to them well first let's talk about the terminology because we have some new terminology that we use with CSS the first is a CSS rule which is made up of two parts we have what's called the selector and then we have the declaration now the selector selects the elements that we want to apply style to so this selector is for the body element so the style that we have declared here will be applied to the body element and the only thing that we are doing right now is changing the text color to red so if we look at this in the browser we of course have red text but this isn't something that we would normally do with a white background we usually just keep the text black or it might be a darker shade of gray so we're just going to remove this property and then it's going to revert back to the default value of black now we don't control the default values that's done within the browser and the user can change those values in most browsers but most don't so we don't have to worry about that okay so we have our body well let's change the font of our body because yeah this is fine but this is the default font we want something a little bit more modern I guess you could say so we can type font and brackets is going to give us a variety of suggestions that we might want to use to modify the font for the body now what I want to do is change the font size so you can see that the property is font – size followed by a colon and then our value so let's do something that's fairly large and let's do 18 now it's not enough to just use a numeric value here there are different units that CSS supports and we need to supply the unit because by itself it's unclear if this is using points or pixels or if it's a relative value so let's stick with something that's an absolute size and we'll just go with pixels this means that the font is going to be 18 pixels high and if we go back to the browser and refresh the page we are going to see that the text does indeed change it is much larger than it was before but let's also change the font face itself and that's actually called the font family so font – family and we can do a variety of different things here we can use a named font Ariel in this case which every Windows machine has this font so if we go back to the browser and refresh we see that the font does indeed change now there are some computing systems that might not have the Arial font in which case we would need to supply a fallback font if we do that with a comma and then whatever name that we wanted to use so we could say Helvetica and so if a browser or a computer doesn't support Arial then it would fall back to whatever we specify here Helvetica so if we go back to the browser and refresh we're not going to see any difference here because Arial is being used now we can add as many fallbacks as we want we can say that okay we want to use Arial but if that's not available we can use Helvetica but if that's not available then we might want to use something a bit more generic and CSS has a variety of generic font names in our case Arial is without any serifs so it's sans-serif and I think Helvetica is as well I'm really not sure about that so we can come in here and we can say that okay if the computer doesn't have Arial or Helvetica then we just want to use a font that is sans-serif and that would be fine now we have two properties here but there's also a font property that combines several of the other font properties so with just font we can say that we want a font that is 18 pixels high and it is Arial or Helvetica or sans-serif and that will give us the same results now I'm going to comment out these two just for the sake of having them in the code download so that you know that they are available because if you want to change one of these properties then it's more useful to use that property itself instead of font now to comment out CSS you use a slash followed by an asterisk and then everything that follows that is going to be a comment until it reaches an asterisk followed by another slash so these two lines are commented the browser isn't going to use them it's going to use this single font property so just to show you that we get the same results there you go now we might want to adjust the line height that is the space between the lines and we can do that with the line height the property that is line – height and then once again we want a numeric value now you can see that brackets is suggesting two values inherit and normal now inherit is a CSS keyword that means that it is a special word that is used in CSS and it basically means that we want to use whatever value has been applied for the line height in any parent element now the body element doesn't have a parent element although it really does it's HTML HTML is a parent element and it has a child called body however we don't really apply any line height to the HTML element so in our case inherence really isn't going to give us anything instead we would want to specify some numeric value and I really have no idea what this is going to do so I'm going to do 24 pixels and we will just see what this looks like in the browser and I'm not really clear if that's added space we removed it so let's do something like 32 and that should definitely add more space there and really that might be too much we're going to leave that alone now we might want to change the background color of an element's in this case it's the body and we can say background color and we have a variety of named colors that we can use we can also use hexadecimal numbers a hexadecimal number starts with a pound sign and it's broken up into three groups we have red green and blue a background-color of zero zero zero zero zero zero is black so if we go back to the browser and refresh we're not going to see anything because our text is black and the background color is black now for this lesson we're going to leave the background color as white or whatever the default is for the browser so I'm going to comment that line out so that you can have that in the code download and for now we're going to skip on to the selectors because there are a lot of properties that we can use there are too many to list within this course and I will be using more properties and then following lessons and I will tell you what they are and what they are used for but for now let's just skip on to our selectors so we want to add some more style we have changed the text of our body but now we want to do some special things for like the headings and somewhere in here I believe we still have a span element so let's start with the headings let's do something special there they of course are different from normal text because they are typically larger and they are usually bold but let's also do something like italicize them so our selector is going to select both the h1 elements and the h3 elements and we can use multiple selectors within a single rule all we have to do is just separate them with a comma so we have h1 and then we also want to select the h3 elements so we have h 1 comma h3 and then our declaration now usually you would see this done on two lines so that it's very clear that this rule is for h1 and h3 elements and we are going to italicize this and we do that with a property called font style and the value as you can see here brackets is prompting us with italic normal or oblique we're going to go with italic and that will give our heading elements and italic fonts now it's going to keep the size as well as the weight of the font because we change any of those the only thing that we did is added the ability to make it italicized so if you wanted to change the weight or the size you would have to explicitly specify those properties so for the size we would have to go and use the font size property and then give it whatever size that we wanted to however in that case we wouldn't want to use both the h1 and the h3 elements in the selectors because we wouldn't want those to be the same size but we're not going to worry about that so let's just get rid of this font size property now if we look at our markup we have two div elements that have IDs one is an ID of sidebar the other is an ID of main content and we want to style these elements differently and we can reference both of these by their ID so we go back to our CSS file let's start with the sidebar in order to select an elements by its ID you start with a pound sign and then the name of the ID sidebar so pound in CSS means ID so this is the idea of sidebar and let's give this a background color of green eventually we are going to change this so that it is actually a sidebar but for now we're going to give it a different background color than what we would have for the main content and we would do the same thing for main content we start with the pound sign and then main – content and this is going to have a background color let's do something like gray or we can choose one of these values let's do light gray and then we will see in the browser that our sidebar is green and then our main content is gray so we can select elements by their name we can also select elements by their ID well let's go to our markup because we've used a span element in one place but let's use it in a couple of different ones and it doesn't matter where just pick some random spots and around it with an opening and closing span tag and I'm going to add a total of three and we are going to style these however we want to style some of these spans differently let's say that's we want this if some to be read because this would be considered an error of course it's not but just for the sake of this demonstration the ipsum is going to be an error but we want to use these other two span elements for something else so we can go to our style sheet we can type span and if we do color is red then we're going to see that two all of the span elements in our documents now have a color of red but we don't want that we want only the span elements that are considered an error to have a color of red so we need some way to make our error span to be different from the others and for that we can use something called a class a class is a classification it's something that we would apply to multiple elements so we're going to give this first span elements a class attribute and its value is going to be error and we will go back to our CSS and instead of this span rule we're going to specify that if it has a class of error it's going to have a color of red to specify a class you start with a period and then the class name error so the pound sign is for ID the period or the dot is for classes so if we go back to the browser and refresh now we see that if some is red but the other span elements are not but let's give those other elements as styles so we're going to add span once again and let's give this a color of purple something that's not red but it will be visible against the green and the gray so let's refresh and now we have our red for the error then we have the purple for our other spans but then later on if we wanted to one of these to also be error text we can go to that element and we can add that class so let's add this third element with a class equal to error and it's going to apply that style to that element so now we have an error here and we have an error here and then we have this purple text here now we can apply this class to any element so if we wanted to say that okay this heading is going to have the error color as well so we can say class equals error and then what you need is going to be in red and that's the beauty of a class you can apply it to any element that you want to however if you wanted to only apply the color of red to span elements that have a class of error you can go back to the selector and you can say that span dot error will have a color of red so this means that all span elements that have a class of error is going to have a color of red and only those elements so if we go back to the browser and refresh our heading is going to go back to black although it helps if you save the document first so let's refresh and you can see that that has gone back however if we wanted to have a different color for that heading elements we could say h3 and then error and for our headings if they are in error then we would do something not necessarily red but red ish so crimson that looks like a good color so let's use crimson for our headings and we will go back and we can see a noticeable difference between the crimson color and the red color now just like properties there are a variety of different CSS selectors and we could spend a lot of time talking about them and how they work however for the sake of this course we're going to move on to the next lesson and we will modify the layout of our page using CSS throughout this course we've been working with a single document we started with just plain text then we added some markup and we even divided our document into two distinct sections we have the main content and then we have what is supposed to be the sidebar but of course whenever we view this in the browser we have nothing like that now we see what is supposed to be in the sidebar as well as the main content but the sidebar is on top of the main content and if you'll remember the reason why this is is because we used div elements and a div elements our block level elements that means that it essentially creates a block within the page and that's very apparent now that we have added some background color to both of these sections but now we want an actual sidebar and so that is what we are going to do in this lesson but I'm going to do something a little differently I'm going to have both the editor and the browser up at the same time the editor will be on the left and the browser will be on the right the reason being because brackets has a wonderful feature that allows us to edit our code and it will automatically update within the browser now it's not the only editor that has this particular feature there are many that do but since we are using brackets it's worth demonstrating this feature because it is very helpful as you are typing you can see the ramifications of whatever modifications that you're making now notice that whenever I click on any one of these CSS rules on the right-hand side we see the browser select those elements like for example right now I selected the main content and we can see that there is a little blue border around the main content whenever I click on the sidebar rule we see that the sidebar has a blue border and it's kind of hard to see here because the background color is green however if we go down to the span selector let's click on that we see all of the span elements within the document are surrounded by a little blue border that's because this CSS rule is for span elements and so it is marking all of those elements that are selected with this selector if we go to the h3 selector with a class of error we see that only that h3 element is selected we will see the same thing for the span elements that have a class of error we have just two of those one in the first paragraph then one in the third so it's a pretty nice feature if you wanted to see what elements are being selected by a particular CSS rule then just put your mouse over at that and you will see that and it's supposed to do the same thing for HTML wherever we put our cursor it's also supposed to select the elements in the browser but for some reason that is not working right now but that's not very important what is important is that we do what we actually want to do and that is put our sidebar on the side of the page so we're going to go to the CSS rule for our sidebar that is with the pound sign for the ID and then sidebar we want to come in here and add a property called float this essentially says that we want to take this element and we want to float it on either the left-hand side or the right-hand side of the element that contains our sidebar now if we look at the HTML that is the body so it's going to take our sidebar and it's going to put it on the left or the right of our body and we get to tell it you know right or left there's actually four possible values there's inherit there's left there's none and then there's right but we want to go with left so I'm going to choose left and over on the right-hand side you can see that the page automatically updated so we can type whatever that we want to type and we can see what it would look like in the browser so that's what it would look like if we floated it on the right but we're going to do left now notice that the dimensions changed it's no longer as long as the entire page as it was as a normal div element so we want to change the width and we do that with a property called simply you width now we can come in here and we can give it an actual pixel value so if we wanted to say that the sidebar 150 pixels wide then we can do that we can also use percentages so we can say that the sidebar is supposed to be 25% of its container which is the body so it's going to calculate the width of the body and it's going to set the width of the sidebar to be 25% of that so as we would adjust the size of the browser we would see that the width would change for the sidebar so let's leave this as a percentage because that's more flexible than setting an absolute pixel value but now notice that the text within our main document just flows around our sidebar and that might be what we want it to do but in most cases we want two columns we want on the left to be a complete column for our sidebar and then on the right to be a column that contains our content so we will go to our main content and we can do a couple of different things the first thing we could do is float that on the right-hand side now notice that it puts our content on a new line the reason being because even though we floated it on the right-hand side the width of the element is too much to fit next to the sidebars so it put it onto a new line so we could come in here and say that we want our width to be 75% and then that would change the width of our main content enough so that it would then fit on the right side of the screen now that's one way that we could achieve this we can also not use a float so I'm going to comment this out and instead we would use something called padding now padding is exactly what it sounds like we are padding an element so that its contents are inside of that padding and we can pad all sides of an elements we can pad the top the right to the left and the bottom in this case we really just want to pad the left-hand side of the element so we can say that the having on the Left which is padding – left is going to be 25% and that puts all of the content inside of our main contents div element over here on the right-hand side now the element as you can see is still the full size of the body but the content since we've added that padding to the left hand side is padded on the left and now let's get rid of the background colors because that kind of ruins the effect so the sidebar no longer has a background color we will do the same thing for main content and now we will have our sidebar on the actual sidebar well we do have one other document it's that second HTML and let's go ahead and add a link to that inside of our sidebar so our home will be our index and then the article will be that second HTML and for this let's go to the full size editor and we are still going to use our unordered list and our list items but inside of our list items we're going to use a new elements called a it stands for anchor and anchors can be used for a variety of reasons but what we want to use in anchor 4 is what's called a hyperlink to another page to do that we use an H ref attribute inside of our a element and that is set to whatever document that we want to navigate to now our home is going to be this file index.html and then we will have text in between the opening and closing a tags that simply says home and for the article we will once again use an a element the H ref attribute is going to be set to second HTML and then for the text of our link is going to be article so whenever we view this in the browser we now have links and if we click on any one of these then it takes us to that page now notice that the second HTML page is also laid out exactly like our main page and that is because we reference the same CSS file so this once again demonstrates why we would want to use an external stylesheet because of both of these documents use the same markup the changes that we made to the CSS made it to work in both of those pages so by itself HTML really doesn't do anything except allow us to markup our documents and give them structure what really allows us to lay out our page is CSS well in the next lesson we're going to add some JavaScript which allows us to add behavior to our webpages we're not going to do anything fancy but it will add some pizzazz unlike HTML and CSS javascript is a full-fledged programming language and that's really good because we need a powerful language to do the things that's we need JavaScript to do we use JavaScript to manipulate our HTML by that I mean we can move elements around on the page we can change the document structure by moving an element to some other place we can remove elements create elements on the fly we can do just about anything that we want but we can also manipulate the style of our HTML through JavaScript so it gives us an extreme amount of power within our webpages and if you are getting into web development as a serious hobby or as a career you almost always have to know JavaScript so if that is what your plan is learn JavaScript because you will use it if you want to learn how to program start with JavaScript because it is a very good first language to learn now was saying that I am NOT going to teach you JavaScript I'm not going to teach you how to program those are two very complex topics and we have some courses here at tuts plus to teach you those exact things so I am going to explain what I'm writing so that you will have an understanding of what something does but I'm not going to teach you the fundamentals of JavaScript so in this lesson we are going to add the ability to hide our sidebar and at the same time we are going to expand the main content so that it fills up the screen so we're going to add something over here in the top right hand corner that's we can click on and whenever we click it's going to hide the sidebar and make the content fullscreen whenever we click on that thing again then it's going to set everything back so the first thing we need is what I'm going to call the control bar that's what's going to go in to the top right corner so that's going to be a div elements and I'm going to place this at the top of the body it really doesn't matter where we put it because we are eventually going to remove it from the document flow so this is a div element let's give it an ID of control dash bar and let's have some text something like toggle sidebar and we want to change the size because whenever we move it over it's going to get in the way of our title now right now this is just a normal div element so we see it as a block level elements but we aren't going to have that we are going to remove it from the document flow which is going to remove the block aspects of a div so in our CSS we're going to add a rule for control dash bar and the first thing we're going to change is the font size so we can do this in a couple of different ways we can use an absolute value if we wanted to do that or we can use a relative value with the e/m unit and this is what we are going to do just to demonstrate the e/m now one eeehm is kind of like 100 percent so right now the text of our control bar is at 100% of its size so if we wanted to decrease that we could say that 2.75 e/m and we can see that the font size changed but let's do point six zero EEM that's small enough that it shouldn't interfere with anything else and it's also well it's kind of readable I guess it really depends on how well your eyes are so we have our font size now we want to position this over on the top right corner but we also want to move our and the main content up to where it was originally now we do this very easily by setting the position property to absolute now position has several options and they all do different things but the one that we want is absolute you can see that's it removed the control bar from the document flow everything just kind of shifted up except for the control bar and this also allows us to position it anywhere within the document so we can do that with two properties we can say top which is going to set the top of the element to wherever we specify within the page and if we say zero then that's going to be at the very top now the coordinate system within the document is pretty simple the most top of the document is zero and a positive values will move the elements down so if we say that the top is 50 pixels then it moved it down 50 pixels if we say negative 50 pixels then it's going to move it up and we don't see it at all but we want zero now whenever you set a numeric value as 0 you don't have to specify any units because it doesn't matter what the unit is zero is zero so we're going to set top to zero now we're going to use right and that's going to set the right part of the element to wherever we specify and if we say zero here then that's going to be on the far right of the screen so if we set the right property to a positive value then it's going to shift that to the left there is a left property that is the opposite of right it starts at the left and any positive value is going to move it to the right because we are positioning based on the left in this case the left side of the element but we wanted to on the right side of the screen so we will use the right property the value is zero and we have that styled let's also change the cursor that's something that you can do whenever you move your mouse over something within the website you can change the car and in this case we want to use the pointer that is what you would see with a link so whenever we move our mouse over here we see that the cursor changes to the pointer so this is all that we need to do as far as setting up the CSS for our new element and now we just need to write our JavaScript that's whenever we click on this toggle sidebar it's going to change the style of our document so let's go to file new let's save this as toggle sidebar dot J s JavaScript files have an extension of J s now I'm not going to be following JavaScript best practices here I'm going to keep things as simple as possible so that you can understand what is going on because some of the best practices well let's just say it adds some complexity and confusion and we don't really need that here so the first thing we want to do is get the elements that we want to work with that is our sidebar and the main content so basically we need to go to the document and we want to request those elements so we start with documents this represents our HTML document and this has what's called a method called get element by ID now a method is something that we execute so this is going to do some work and in our case is going to get us the element by whatever ID that we specify we call this method or we execute this method with a pair of parentheses but it needs to know what ID that we want so we pass that and the first thing we want is the sidebar so this is going to give us that div element with an ID of sidebar now we do need to store this in what's called a variable so that we can reference it anytime that we want to because we don't want to call this every time that's a lot to type so instead we store it in a variable you can think of a variable as a box that you put things in so that you can retrieve them later on and you create a variable using the VAR keyword now a keyword as I've mentioned in a previous lesson is a special word but for JavaScript it's also reserved these have very specific meanings that we can only use them for their specific meanings and I'm going to turn off word wrapped so that it doesn't do any weird formatting here so we start with a VAR followed by a space and then the name of our variable and we can call this anything that we want we could call it s be short for sidebar but really we want something that's readable because whenever we come back to this in a few months we want to be able to quickly go over the code and see what's going on so sidebar well that's pretty clear as to what that is so we are getting net elements and we are storing it in the sidebar variable now we want our main content so I'm going to create another variable called main content now one thing about JavaScript is that it is what's called case-sensitive so this main content is different than a main content with a lowercase C so whenever you create a variable and later on we're going to create a function be very aware of the casing that you use because you could introduce an error or a bug in your code if you're not keeping track of what you called something now the reason why the C is uppercase here is because I'm using what's called camel casing we start with one word main and then every word after that begins with a capital letter it's called camel casing because we end up with humps within our names and camel casing is used in a variety of languages and it is the convention in JavaScript so we want to retrieve that div element with an ID of main content so we would do the same thing by calling documents not to get element by ID and then we pass in main content and that will give us that element so now that we have our sidebar and the main content elements we can manipulate them with JavaScript we will start with sidebar then we and then style now this style maps directly to the style attribute on our sidebar so if we look at the div element with an ID of sidebar if we came in here and sent style equals and then put something there then we would be able to access that through this style in our JavaScript now in our HTML we want to avoid that but with our JavaScript this is fine because this is one of the ways that we can manipulate the style so we're going to change a property called display and display as its name implies controls how an element is displayed if we set display to none then that element is going to not be displayed within the document so we are going to manipulate the display property for our sidebar and then we are going to change the main contents padding-left because if you'll remember whenever we set up the main content we didn't float that element like we did with the sidebar and said we just set the padding left so we are essentially going to do the same thing except that here we say padding left there's not a dash here that would be illegal in JavaScript instead we say padding left equals and we are going to set that to zero that's going to change the padding left so that it will fill the entire document and then whenever we want to restore everything we will essentially set these same properties but we will remove the values that we have assigned them so whenever we set display to num and padding left to 0 then we are hiding the sidebar and expanding the content whenever we set display to nothing here and the same thing for padding left and we are restoring those elements to their original state now we want to do these things every time we click on our control bar and so we do that with what we call an event an event is something that takes place within a web page and with JavaScript we can listen for these events so that's we can execute JavaScript code whenever they take place so we want to listen for the click event on our toggle sidebar so we want to retrieve our control bars so we're going to do that control bar and we will use documents get element by ID and the ID is control bar and then we are going to set up the click event handler we do that with a method called add event listener instead of retrieving something like get element by ID this is going to set up our event handler we need to tell it what event we want to listen for in this case we want to listen for the click events on our control bar and whenever someone clicks on this elements we want to execute some code and for that we need a function a function is like a method it's something that we can execute in order to do something in our case we are going to use a function to toggle the sidebar so I am calling this function toggle sidebar you define a function beginning with the function keyword followed by the name of the function and then a pair of parenthesis there's a few other things that we could add here but we're just going to keep things as simple as possible and then inside of this function we want to make a decision we need to toggle the state of our sidebar so we need to check to see if we have a value for our display of the sidebar because if we do if it's set to none then we want to restore everything back so really this is going to look like this we have an if statement and then we have what's called a condition a condition is something that is going to return true or false so that we can make a decision based upon that condition so we want to say sidebar style display now if we have assigned a value of none to display then this is going to be true which means that the sidebar is already hidden so we want to restore everything and we are going to do that we will put our code that restores the sidebar in the main content there and then if this condition is false then we have an else so we have if this is true then this executes otherwise whatever we define inside of this else block is going to execute and all of these things are surrounded by curly braces that is a code block so we have this toggle sidebar function we need to specify that here so we say control bar dot add event listener open parenthesis we pass in click and then toggle sidebar and that's all that we have to do except we do need to reference this script file in our HTML and I'm going to do that at the very bottom of the body of our document because and this is very important we are working with elements within our JavaScript if those elements are not loaded in the browser then we are going to run into some issues so if we put our JavaScript code at the very bottom of the document we pretty much ensure that the elements that we are going to work with that is the control bar the sidebar and the main content those are loaded so we won't have any issues there so in order to add JavaScript to our HTML we use a script element and script elements have to have a closing tag if you remember whenever we referenced a style sheet we used a self closing tag we can't do that with the script we have to have an opening tag and a closing tag now if we didn't have an external javascript file we could just put our JavaScript in here but since we have an external file we want to pull that in we use the source attribute and then we set the value of that attribute to the name of our javascript file toggle – sidebar and then we save it and we run it in the browser so whenever we go to the browser let's refresh whenever we click on toggle sidebar it should remove this bark and the content fills the entire browser and whenever we click on toggle sidebar again everything is restored now I'm well aware that if you are brand-new to JavaScript if this is your first experience you're probably scratching your head wondering what's going on and I can empathize because I've been there and everybody else has been there as well but once again my goal wasn't to teach you JavaScript it was to show how we can use JavaScript to manipulate the things within our page and I would say that this just scratches the surface of what you can do with JavaScript but that really doesn't do justice because of the surfaces rather thick we haven't really scratched anything before I leave you there are a few things that I hope you take away from this course first I hope you have a better understanding of how the web works in general and the first few lessons you learned about networks DNS HTTP and the web server now you want to use all of that information all of the time in fact you won't even have to think much about IP addresses and DNS unless if you are responsible for setting them up but you at least have an idea of how they work second I want to re-emphasize the relationship between the technologies that we use to create web pages today's web pages are written with HTML CSS and JavaScript we use HTML to add structure to our documents because without it we would have just a jumbled mess of text and while HTML used to have the ability to add style to our pages we now use CSS for that purpose by using selectors we can apply style to our HTML elements and even change the layout of the page without modifying our markup and then there's JavaScript we use it to find elements within our page modify the markup on the fly and change the style apply to our document it is an incredibly powerful language no wonder is the most popular programming language on earth thank you so much for watching this course please feel free to get in contact with me through Twitter or the tuts plus forums if you have any questions once again thank you and I will see you next time you

12 thoughts to “How to Become a Web Developer”

  1. Please so some video about codecanyon.
    How to make product of codecanyon like with the code html css js…. and the documentation file and upload process.

  2. Can you please give me some suggestions…. About digital marketing….. I am new… And want to do digital marketing…….

  3. Holy sh*t. After SO SO SO long and many other explanations, I finally understand what a DNS is. Great explanation

  4. Amazing content. Happy i found you. Keep going friend. Many like me need your knowlege.
    I am a computer degree holder of 80s . But I am out of the industry due to fly commitment. After learning web design with you how can I jumb back to the computer world? How can I earn an income?

  5. I'm 16 and want to become a web developer. I have mastered CSS/ HTML and learned most of Javascript. How long do you think it would take for me to actually get money as a web developer? Also is web development going to be a job that will last a long time in the future? Or will it be comepletely replaced by websites likes Wix?

Leave a Reply

Your email address will not be published. Required fields are marked *