Frontend Web Development Bootcamp Course JavaScript HTML CSS In this massive course you will go from having no coding experience to having the essential skills of a frontend developer You will learn various technologies and build a few projects along the way Zach Golwitzer teaches this course Zack is an experienced software engineer and full stack developer I m really trying to do here is connect all of these concepts together Html CSs and Javascript are not born in isolation they all work together to build a web page I want you to understand most importantly the relationships between these three and have a pretty firm grasp of each of them in isolation as well the first thing that we re going to touch on is something called browser developer tools We re going to be looking at something that you ve spent a lot of time with already and actually go to the other side of it and understand what s going on behind the scenes in this video I want to walk you through the most common parts of these developer tools and actually write some code Different parts of the web page are actually highlighted and I can click down and drop this down and get more specific at what I m selecting if I go to the bottom here These are all these stylings or the CSs styles that go along with the html again do n t worry about this We re going to get into these you know languages later into the course but for now I just want to show you the landscape the console is probably the second most popular tool within developer tools or at least in this series we re going to be using the console quite a lot and what the console is it s actually called a reple and that stands for read evaluate print and loop when I press enter it s actually going to change this on the page the console allows you to write javascript and Modify the document object model or the dom right click inspect element click on the console and boom you re ready to write Javascript so it s a great place to start so that we do N t have to set up all this elaborate stuff just to write basic Javascript There are a couple of other features within developer tools that I want to show you here but they re less important than the first two that we looked at Network tab is where you re actually seeing all the resources that are being transferred to and from over the network to this web page this will be very useful for us as we get into more the back end development where we re talking about Api request and you know http and all that kind of stuff So we ll come back to this We ll spend some time here a lot later in the series but I wanted to expose you to it Initially the goal of this program is going to be every time We click on Google s web page so when I click it I m actually clicking right now I want the background of the page to actually change color and I want that color to be a random color We can do this with Javascript code The last thing I want to do in this video is actually show you what coding is all about and have you write your first Javascript program we re going to assign something called an array so this array is going to contain various colors of our choice The next thing that we have to do is get a random index from this array and when I say index each of these values are at a certain index within this array we have to actually use a builtin javascript library called the math library to get this random index All we have to do is grab a variable that we saved up here called Html body and then we want to go to the style and then background color not clip background color we ll say the user clicked and set the color to and then concatenate this string in here and say random color okay our function is done Hopefully it works here and the way that we see if it works is by running it when new videos are posted to this series We re going to be talking about what is Javascript and why do we use it Javascript often abbreviated as JS is a programming language that conforms and I think I m going to stop right there Because this is not a useful definition especially for most people a Javascript framework or any framework is something on top of a programming language that enables a developer to do something more efficiently in less time Facebook is created largely with a framework A frontend framework called React Facebook could definitely have been built without a framework It could be built in just Javascript Html and Css