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 front-end developer you will learn various front-end Technologies and build a few projects along the way Zack golwitzer teaches this course Zach is an experienced software engineer and full stack developer hey everyone my name is Zach and today in this 20 plus hour course I'm going to take you through the Core foundations of front-end web development now before I get into what that actually entails I wanted to spend a minute to thank free code camp for having me

on the channel it's always a privilege to share my content with such a broad audience um reach so many different people and I genuinely hope that you find this course helpful if you do be sure to give them a big thumbs up and a subscribe they're an awesome Channel contributed to a lot of my early Learnings as a web developer so without further Ado let's get into it the first thing that I wanted to start off with is some background context because a lot of the content within this course was obviously not filmed all at

once it's quite long um it's something that I worked on over the course of a year um pieced it together lesson by lesson and a lot of the content is on my YouTube channel um just separated out into different videos I wanted to compile it All together um as it does follow a very logical sequence from start to end end and it's perfect for the complete beginner so this should take you from never having written a single line of code in your life to having at least a solid grasp of what coding languages are particularly

JavaScript and what is web development particularly front-end web development you should be able to build basic web pages and understand basic uh fundamentals of coding after this course Is complete while this course is mainly geared for the complete beginner some of the later chapters of it where we get into CSS flexbox and stuff like that could actually be more intermediate level and be useful to anyone so be sure to look through the chapters below and you can skip around to what interests you so basically the structure here is the three main tenants of front-end web

development and those would be HTML CSS and JavaScript now often times you'll See tutorials kind of start with HTM ML and CSS and then move into the more complicated more challenging JavaScript I've actually reversed that a little bit we will be starting with JavaScript which is going to be the biggest section um and I think it's useful to do that because number one if you're going to be a frontend web developer you have to know all three anyways and also I think there's a lot of Concepts uh that you'll pick up learning a general programming

Language like JavaScript that will kind of help you catch on to the HTML and CSS in Bring It full picture for you my goal with this course is to be the course that I needed when I was starting out and what I'm really trying to do here is connect all of these Concepts together HTML CSS and JavaScript are not um born in isolation they all work together to build a web page and I'll talk about this analogy a little bit later but you can think of these three core tenants of Front-end web development just like

you would building a house so when you build a house you've got the you know the framework the structure which is the concrete foundation all of the 2x4s that go up and the roof that would be your HTML then you get in there you put some wiring in there you put some Plumbing all the other stuff that would be your JavaScript which makes it actually functional and then finally you put the finish on you put you know the roof Tiles you put paint on the outside the inside you just make it look good and that

will be the CSS if you walk away with anything from this C 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 last thing before I actually get started is to let you know that in the video description there's going to be a link and that link is going to lead you to a Page that gives you all of the resources that you need for this course we'll have some time stamps some chapters um so you can navigate around

the course and then I will leave code Snippets solutions to any of the challenges and even some additional resources in next steps for certain topics if you want to take them a little bit further so that's it without further Ado let's jump into front-end web development foundations I want to start here with a Quick win I want you to see the power of code and see what we can do with it very early on so that you can kind of have that confidence to know that you don't have to go through You Know download a

bunch of crazy things onto your computer and and write a bunch of crazy lines of code in a terminal to actually do something cool since we're going to be jumping into code here in the first lesson before you know anything about it you're going to be confused and that is Very okay don't worry about that I promise we'll go back through everything that we talked about in this video in couple videos from now you will probably be able to actually do what we're going to do in this video so if you're a fan of the

Netflix series stranger things you might remember in the first season the kids were talking to their Professor about this thing called the upside down and basically what the professor was talking about was A lot of physics Concepts and stuff like that but basically he was talking about this tight RPP where there's a human on the tight RPP and then a flea on the tight RPP and the flea can actually go around this tight RPP and see all different sides of it but the human cannot and that's ultimately what we're going to be doing throughout this

series 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 and the first thing that we're going to touch on is something called browser developer tools now you might have seen uh something like this before this is called a web browser and you probably use it every day of your life but have you ever right-clicked and clicked inspect element and gone into this uh tool on the right where there's all these different you

know Applications that you can go through to see what's going on on this web page as a fullstack web developer or more particularly a front-end developer which is kind of a subset of fullstack development you're going to be using these developer tools a ton and you're going to get very used to them and in this video I actually want to walk you through the most common parts of these developer tools and actually write some code within them to give you an idea of What this is all about the first thing I want you to do

though is download the Firefox web browser so just type in Firefox download go to the download and get that onto your computer I want to be working with the same tool across the board although you have developer tools within any other browser whether that be Edge or Chrome or Firefox you have these developer tools there but I want to make sure that you're looking at the same thing that I'm looking at and Firefox is Actually a great web browser for uh developers because it has some really Advanced developer tools and in my opinion has probably

some of the best developer tools of any browser so get that downloaded and then once you have it downloaded go to google.com and take a look at this pane on the right and if you don't remember I just right clicked anywhere on the page and I clicked inspect l now the first thing we're going to talk About here is the inspector now the inspector is probably the portion of developer tools that you will become most familiar with and the reason is it allows you to basically as you might expect to inspect the page that you're

looking at or the web page so as I'm scrolling over these different lines of HTML code you'll see that 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 so I can basically see what's going on in this web page and then if I go to the bottom here these are all these stylings or the CSS styles that go along with the HTML again don'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 and to really show you what's going on let me open up uh another tab here go to google.com/ IM Imes and let's just type In dog let's grab any dog here I like this one here and we want to open this in a new tab so let's say copy link location now we come back here to the page and let's click this button up here this is kind of our selector uh for different elements of the page and let's click on this image here you

can see at the top there well I can't show you but there's an IMG or image HTML tag let's click that and then let's go into this Source attribute and paste in that link That we just uh grabbed of the dog photo once we press enter you'll see that our web page has actually updated and we can close the developer tools and google.com just got a makeover now this is not permanent changes obviously this would not be permanent changes but we can uh rightclick inspect element again let's click on the image and let's make this

a little bit uh smaller so let's put a width of 100 and now you can see that the dog is a little bit uh more styled On Google's homepage but as I said this is not permanent these developer tools are great because they allow you to make very temporary changes to your web page so you might have the code that you're writing you know on the back end and uh in your terminal or your code editor and those are the live changes but you can come here to just make little changes like you saw how

the picture was too big so I went in and and changed it to a different dimension and I can kind of Test out these different changes and the power of this is just it allows you to do things in real time but the second that we click Refresh on the page you're going to see that it goes back to the original web page so you are the only one seeing these changes within the inspect utility nobody else sees them and the changes are not permanent like I said we're going to be spending a ton of

time here so don't worry if none of this really made sense but as you can see We're clicking through we can click on different elements so let's maybe click this little icon down here and you'll see how powerful this is once we get into this stuff in the bottom right where we can see the Box model and we can actually uh look at the document object model or the Dom we're going to get into all of these things but the next thing I want to show you is this thing called the console now the console

is probably the second uh 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 repple and that stands for uh read evaluate print and loop now you don't really need to know that what I want you to remember about this console is two things number one it allows you to write JavaScript and number two it allows you to actually modify the document object model or the Dom and we're going to talk about that a Little

bit later in the series but these are the two main things that the console allows us to do and to show you I'm going to just give you a short example of how we can use the console to make some of the changes that we are also making here in the inspector so if you remember we kind of changed the image uh within the inspector we can also do that within the console so let's grab a different dog picture here just for fun grab this uh this one here like this and Copy the image location

and all that's doing is just copying the actual uh file that we're looking at from here we can go back to our our page and what we want to do is actually select the image tag on this page so all we have to do is say document. query selector and then type in IMG and you can see that when I do this this little element here that we were editing earlier is highlighted and down here it's actually printing out what we're going to get uh when we press Enter so when we press enter we get

this uh image but we actually have to save that in a variable real quick so let's say our image and again don't worry about what's going on here we'll talk about all of this later but we'll say document. query selector IMG we'll save that so now our image is actually representing this element on the page and then we can say our image . set attribute and what I want to set is the source and I want to set that equal To the link that we just copied from that dog photo and when I press enter

it's actually going to change this on the page and I can also resize this just like we did earlier so our image. set attribute um or actually no it's not set attribute it's style dot width equals let's say 100 I'm sorry it's actually not it is an attribute so let's set the attribute sorry I'm doing this in real time here uh so let's go with width and we'll go For 100 here and you can see that it goes down resizes accordingly so this is just a short example of how we can use the console to

actually edit uh the document object model or we can just think of it as the web page for now not only that but we can also write pure vanilla JavaScript within this repple or this console and to show you that I've actually already showed you that because I saved our uh element in a variable a JavaScript variable but we could also Write a function so we could write a function that says change image or something like that and it takes a URL and then it's going to actually change the image so let's go ahead and

make that function and what that's going to do is going to say document. query selector IMG do set attribute and we're going to say source and then we're going to pass in the URL once again don't worry about what I'm doing here this is just examples and Then I'm going to say enter down and that's our function so now I can execute this function and I can paste in that URL and click enter and I guess it's already there so it's not going to change but if we went over to a different dog picture and

run this function you'll see that it changes the image in the browser so we can write JavaScript we can modify the web page all that stuff within the console and we're Actually going to be learning a lot of the initial concepts of JavaScript here in the console because it is so easy to set up and get going all you have to do is as we showed you just rightclick 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 you don'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 so the inspector and the console now just to remind you right click inspect element and from here I want to go up to the network tab so this network tab is something that you will be using uh a lot later on and if we refresh the page you're going to see that there's some activity here and what the

what's happening here in this network tab is you're actually seeing All of the resources that are being transferred to and from Over the network to this web page so Google's backend servers are actually Rec uh sending resources to the front end and you're actually seeing all these resources displayed in the browser so an example of that would be this Google image right here and if we click on the images part you can see that the December holidays uh in the response is actually the image that we're looking at here and if you Wanted to see

other things about this such as the timings how long it took to load um you know you can look at the HTTP headers all that kind of stuff this will be very useful for us as we get into more of the backend 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 uh initially so you can see that this is Something that we will be

using now another thing we will be using if you click this little arrow over here is storage and storage is useful for a couple of things storage is going to be useful for tracking user behavior on a site so uh not to to play the blame game here but when we talk about Facebook and all the cookies that Facebook puts on uh your web browser on your mobile phone and all that kind of stuff this is where this is being stored so you can see Google is storing these cookies about us as the user and

although these probably won't mean a whole lot to us as people using the site these have specific IDs and all sorts of identifiers that um allow Google to know things about the user this is also great for authentication this is how we're going to actually log in uh and register people to our app and when we build our backend dashboard for editing our blog for our personal website we're going to Need authentication because we don't want just anyone coming and editing our blog so this storage tab is what we're going to use to actually do

that and while it's a very Advanced topic that comes later down the road I also wanted to show it to you everything else that you see here whether it be the inspector console debugger Network style editor all this kind of stuff um everything else is not quite important enough for us to cover here so I'm just going to Leave it there for now you probably won't even use anything outside of what I talked about for at least several months or even years or maybe even ever as a web developer all right so I think I've

covered mostly what these developer tools are about just to review rightclick anywhere on a web page inspect element and you'll get to these developer tools now 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 well you probably will not understand the concepts behind the code we're about to write I want to get you in the habit of actually writing code and you know get you uh feeling comfortable in this console that we talked about earlier so open up

a web browser hopefully the Firefox browser you just downloaded put this video on the side open up the console so right click inspect go to the console you can Even type clear with uh two little parentheses to clear the console and we are ready to get started now 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 um 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 and I'm going to walk you through line by line how we're doing it and kind of explain um What each line does just to give you a feeler again don't worry about how everything's working we're going to go into the details of the JavaScript language in future videos the first thing we have to do is save the body HTML tag in a variable so when I say body HTML tag every web page that you're going to go to has this thing called the body and this represents kind of the

container uh for the entire web page aside from of course the topmost uh Container which is called HTML so we want to select this body and this is what we want to actually change the background for so we can actually do this manually and we can come down here and right now you see on the body the background is uh # FFF which is just the hex code for the color white now we can type in green and you can see that the background actually changes in our web browser now what I want to do

is do this in vanilla JavaScript and do it every Time we click the screen so in order to do that the first thing that we have to accomplish is saving that body tag so let's type clear to get a clean space and then let's type in a variable so here's our JavaScript variable we want to set that equal to document. query selector and then we want to get the body tag so when we press enter that's going to be the h HML body you can actually print that out and see that we have successfully retrieved

that and Stored it in that variable from here we actually need to create a function now this function we're going to save in a variable and I know this is getting a little bit confusing at this point but bear with me and type along as I'm doing this so we're going to go through this uh function and we're going to assign something called an array so so this array is going to contain various colors of our choice so you can put as many as you want in here separated by commas I'm Just going to put

in a couple random colors here that I've saved so 29 42 these are just hex codes so you can actually go uh hex codes something like that um you can go to Google and you can see all the different hex codes here there's various tools that you can use for this um but anyways we're going to save these as a comma separate array and let's go add a few more and then you can also uh a valid CSS value would be something like red Blue or green so we can also type in red blue uh

green yellow orange and maybe even purple all right so we have saved this colors array now 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 and we'll talk more about this later again but this one would be the zeroth index this would be the first index the Second third so on and so forth to get this random index we have to actually use a built-in JavaScript library called the math library and we

need a random random index between zero and let's see uh 1 2 3 4 5 6 7 8 uh there's eight items within this array so we want a index between zero and seven because uh arrays are zero index they don't start at one so we'll get a random index here that'll be equal to math. floor and we're going to pass in Math.random please don't worry about what's going on here this is just an example and this will give us our random index and I actually pressed enter a little bit too early so we actually

have to rewrite this function okay I've kind of returned to where I was before I pressed enter and screwed this all up um but basically we're getting a random number between zero and seven and the way that we do that is actually get the length of the array by typing colors. Length so let's not make that mistake again let's enter down a couple times and now we have to actually grab the random color and save that in a variable so we'll grab the random color um that'll be equal to colors and then we'll insert our

random index that we have generated then we are going to actually style the body so all we have to do is grab this uh variable that we saved up here called HTML Body and then we want to go to the uh style and then background color not clip background color and then we want to set that equal to our random color here so that's going to actually do what we showed earlier and change the background color and then the last thing I want to do is just print to the console a confirmation that this worked

so we'll do something like this we'll say the user clicked and set the color to and then We'll concatenate this string in here and say a random color okay our function is done hopefully it works here and the way that we see if it works is by running it or executing it so we'll do random click function and it looks like the user has clicked and changed the color now to finish this program off the last thing we have to do is set an event listener on the HTML body element now this is a little

bit Advanced but it's kind of a cool feature uh of you know JavaScript and all that kind of stuff so all we have to do is go to HTML body and say onclick so it's saying when the user clicks I want to execute this random click function all right so once I press enter now we have wired it up so that every time we click it's going to change the the color so I'm going to click couple times since it's random we might get a couple duplicates here but then we can even close this and

keep clicking and get all Sorts of different results here so it's actually a pretty cool program that we just wrote and you can see you know even you who have never written a line of code before were able to kind of follow along and type what I was typing and write your first little program in other words you just did something that almost everyone in the world does not know how to do and will never know how to do your brain is probably in utter confusion right now but don't worry in the next Couple videos

we're going to actually be deep diving into this JavaScript programming language and we're going to be learning how I wrote this program what are all these different symbols that we're typing into the console and all that kind of good stuff so don't worry if you're completely confused this video was mainly to give you an introduction to the developer tools that you can have within any browser we're using Firefox um but it just gives you That introduction and also just some exposure um in some comfort levels actually writing real JavaScript code and that's it for this

first video be sure to hit the Subscribe button and also that little bell so you're notified when new videos are posted to this series and thanks for watching today we're going to be talking about what is Javascript and why do we use it let's see what Wikipedia has to say because we know that's going to be Simple 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 watching this what you can remember JavaScript as is

just a programming language and more specifically it's a programming language that is made for the web you have other languages like C++ python PHP Ruby um C all these different languages and they all kind of Have their unique characteristics and javascript's unique characteristic is that unlike these other languages that cannot run in a web browser JavaScript can't this has been the case for quite some time but recently as you can see the 1.0 version of web assembly has been released in four different browsers which does let you write all of these other programming languages to

run within the browser but for now just think of JavaScript as the programming Language of the web because it's the easy to write in the browser and even with web assembly there's a lot of complicated steps to get all of that set up so you say JavaScript is the programming language of the web but is that all it can do well the answer is no but if you asked that question 20 years ago you might have been laughed at since that time though JavaScript has gained a lot of traction in development communities and was the

most used Language in the stack Overflow developer survey of 2020 and to name a few things that you can do with JavaScript let's pull this up here you can create web applications so there's lots of front-end Frameworks like angular here you've also got react I think this is the most popular one at the moment um you can do backend uh pieces of your web application or backend servers with things like nestjs you can also create desktop applications if I pull up my Visual studio code which is a code editor this is actually a desktop application

that was built using this tool called or framework called electron so you can build desktop applications for various operating systems you can also create mobile apps with react native and Native script and then finally you can do Ai and machine learning data science projects with tensorflow.js and a couple other libraries so to say that JavaScript is Not a powerful language is a bit of a miss here because JavaScript has many different applications the next question that you might ask is can JavaScript get you a job and the answer to that is a resounding yes but

JavaScript alone is not going to do it you have to actually learn Frameworks such as the ones that I've gone through here angular react nestjs electron react native all of these Frameworks um that are built around JavaScript are what you get hired For and speaking of Frameworks what is a JavaScript framework or any framework for that matter well the way that I think about it is the framework is something on top of a programming language so it's an abstraction on top of JavaScript that enables a developer to do something more efficiently in less time Facebook

is created largely with a framework a front-end framework called react and this is a very popular framework we just went over it and Facebook could definitely have been built without a framework it could be built in just JavaScript uh HTML and C SS but the reason that it wasn't is because the developers there decided hey this is getting really repetitive and we have certain things that we do over and over and over again that we want to kind of automate and therefore react was born react is something that the developers at Facebook kind of created

in order to make their jobs easier and more Efficient we can use a little bit of a construction analogy to think about Frameworks if you're trying to build some commercial real estate building are you going to use a shovel and a ladder to create this whole entire building and you know drive all the materials back and forth in pickup trucks the answer is no you're going to get huge trucks you're going to get bulldozers you're going to get cranes you're going to get all sorts of uh big materials in order To build this huge building

and it's the same thing with building web apps or honestly anything that you would build with code if you're trying to do it with just a language anguage like JavaScript and you're you're not using some of the popular Frameworks that have been built on top of that you're basically showing up to a construction site with a shovel and a pickup truck so you don't want to do that in order to be employable you need to understand how to use these Different Frameworks like angular or react or even a framework like electron which is uh enables

you to write desktop applications like Visual Studio code all right I think that's enough on Frameworks for now could do a whole video on on it let's go to the next question which is is Javascript the same as Java or at least similar and the answer to that is no if you search enough on the internet you'll probably stumble upon uh the analogy of a car Versus a carpet they both have car within the word but they're nothing alike and that's kind of the story with JavaScript and Java now Java was actually the inspiration for

JavaScript way back in the day and JavaScript was meant to be a companion to to Java so they do have some similarity but when you're writing each of the languages they could not be more different the next question is Javascript better than python or honestly insert any language There the answer to that is always going to be it depends and the reason that I say that is because all these different languages that you're choosing between have different unique use cases and while they can all kind of do the same thing they all are programming languages

so some of them are better for certain types of Industries than others so if you're asking me to build uh an app like Facebook I'm probably going to go with JavaScript and use some JavaScript Frameworks because that's what those are made for they're made for creating apps like Facebook but if you wanted me to do some machine learning and do you know build out the computer that sits in a Tesla I'm probably not going to use JavaScript I'm probably going to use Python because py Pyon has a much uh more mature ecosystem around this topic

of machine learning AI data science all that kind of stuff so when you're asking whether you should go with JavaScript or Another language it really depends on what kind of industry you're getting in what you're trying to build all that kind of stuff if you're trying to build a web app like Facebook JavaScript is great if you're trying to do some machine learning python is great if you're trying to create an extremely efficient uh we'll say banking application or something like that a language like C++ which is much faster in execution than a JavaScript would

be A good choice there's no right answer here but there are um different ecosystems around each of these languages and you'll kind of notice as you study them that certain types of developers kind of gravitate towards different languages another question that you might have is HTML and CSS required to work with JavaScript and the answer to that is yes and no it it kind of depends on where you're actually running that JavaScript now let's start With the front end because this is a little bit easier to explain and then we'll move on to the back

end if you don't know the difference between those I actually made a video on the difference between front end and backend development anyways let's go over to my browser here on the left side of my screen I have an HTML file that is actually open in notepad here on the right not doing any fancy editors here just want to get a few points across so Let's create a basic HTML document here I know I haven't actually gone through how this all works yet but we will get there I promise at some point here in the

body of the HTML I'm just going to create a button that says click me so when we refresh the page we should see all of this reflected on our web page and you see that we have a very unstyled button which is just click me so this is a example of a web page this is no different than you know the Homepage of Facebook except for the fact that it is not including both CSS and JavaScript so this is HTML alone now if we add CSS to the picture we're actually going to be able to

style this now we can uh add some styles to this button so let's do that right now we'll add a background color of transparent and then I want to say um the border is going to be one pixel solid Navy then I want to add some padding to it so we'll say 20 PX we want The font size to be 1.4 REM just somewhere in that range and let's go ahead and close that bracket off save it and refresh the page you can see that we have a much better styled button here we can also

add some hover styles to it so let's go down here and say button hover and now I want the background color to be Navy and I want the um let's see the Border uh to be none I want the color of the text to be white so that it stands out on that Navy Background save this refresh and you can see that we have a styled button that uh changes Styles when we hover over it so this is the power of CSS but if I click this button if I click this button it's not going

to do anything does nothing it's just a static element on the page and while it looks like it's changing looks like it's doing something that's only being done with CSS in HTML now in many web applications you have various buttons And forms that users can click on in order to do things within the app so I'm sure you've been to uh a login page before where you enter your email and your password and you press log in well that is actually being triggered by JavaScript and while you do need the HTML and preferably CSS if

you want a web app that people are going to visually like you need JavaScript to actually react to different um uh interactions on the Page by the user if You just have HTML and CSS your login form is going to not do anything and you're going to have a useless app to kind of give you an idea what I mean obviously this is not real real istic but um I added some JavaScript to this HTML document that also has CSS and you can now see that every time I click on this button it's going to

add an element to the page so I'll click it and you can see that I'm adding a P tag with the text clicked the button every time I Click it and this is just to demonstrate how once you add JavaScript to your HTML and CSS you can actually interact with the page rather than just looking at a static website well in this case all I did was add some stupid text to the page you can see that how every time we click the button we can fire an event and maybe send in the login credentials

to our backend server authenticate get the response back and then redirect that user to a different page of our site When we're working with Java Script on the front end or in the browser HTML and CSS are pretty much required for JavaScript to run now yes it could run without them but it would be completely useless you'd just be running it in the console like we did in the previous lesson so it has to have something to actually interact with now on the back end since JavaScript is both a front-end and backend language uh we

can actually run JavaScript without any HTML in CSS And it can be extremely useful when we're working with JavaScript in the browser HTML and CSS are required to make this JavaScript do anything useful because ultimately the JavaScript in the browser is all about taking those HTML elements and modifying them and and interacting with backend data all that kind of stuff so HTML and CSS are required in the front end on the back end if we're using the node.js runtime which is the way that we can run backend JavaScript we don't need HTML and CSS let's

write a simple node.js program to demonstr that we don't need HTML and CSS in order to do that once again we have not covered this in this series yet so bear with me um but we need to create a sample. JS file and then we'll open this up with Vim which is going to allow us to edit this so once we have this again haven't covered this either uh but we can make a uh do math function something like that where we can enter in two Values and get some you know result so let's do

a multiplication problem so we'll just uh we'll say return x * Y and close the braces and then in order to actually run this program we are going to actually store it in a result variable so do math and we'll say five and 80 something like that big enough where we can't necessarily do it in our head we'll do like 87 or something and so it's going to store that in the result and then we want to print the Result to the console so from there we can save and quit and then we can clear

the console and run this sample. JS program and you'll see that it did that M multiplication for us so obviously this is very useless and you wouldn't ever do such a simple function but think about back when we were working on the front end and when we clicked that button so let's say that was a register form you add your email and your password you click the button the JavaScript in the front end is going to say okay the button was clicked I need to do something and so what it's going to do is grab

all that data the email and password it's going to send it over to your backend server and your backend server is going to run the nodejs you know version of JavaScript and it's going to say okay I got an email and a password let me look up this email in the database uh hash the password and compareed the hashed password to the one Within the database and then I'm going to send some data back to the front end in order to tell it whether the user has successfully authenticated so you can see how these uh

different uh sides of JavaScript work in different ways but the point is no you don't need HTML and CSS on the back end but yes you need it on the front end and the last question that I'm going to cover is what is the difference between something like es5 or ES And JavaScript well there's actually an organization called uh ecma International not even sure if I said that right but this is just a standards organization and in order to really visualize this I want to go into a quick example of something that's not related to

JavaScript well not entirely and that is the iso 8601 date standard so we're going to go through this example and then I think everything else is going to make a little bit more sense so if I Open up the console like we did in the first lesson of this series and I run let me save uh a date into a date variable and then I want to print this date as an ISO string and you can see that I have this uniquely formatted date and it looks very standardized and that's because it is and it's

actually standardized by this you know uh organization called ISO which is is I think the international standards organization and there's actually Organizations like this across the world for various you know different standardized things and the same thing applies for JavaScript and that is where ecma International and the ecmascript specification or in other words you might hear this as es5 or es6 all different versions of this spec this is where these have originated and so JavaScript is actually an implement ation of this specification and the reason this is so important is because Of browser compatibility among

other things so if you go to this mdn uh web docs article you can see a grid of all the JavaScript apis that are supported within different browsers and the reason that this uh ecma standards is so important is because the specification just needs to be updated and maintained in one place and then all of the different browser developers you've got different teams for each of these different browsers they can look at that Specification and Implement their browser knowing that all of these specifications are not going to just randomly change when you know say someone

uh working on the JavaScript language decides that they want you know a new API feature so just remember JavaScript is an implementation of the es6 or es5 or uh whatever version you're working with it's an implementation of that specification all right I think that does it for this first rapid fire Uh Q&A session that was not very rapid fire whatsoever but this last part of the video is totally optional it's for the people who really want to uh learn the ins and outs of web development and want to continue on with this series here and

what we're going to be talking about in the last part of the video is just the question of what is a programming language so we talked about how JavaScript is a programming language and it's kind of unique CU it can run on The back end and the front end and a browser but we didn't really cover what is a programming language and I think that this is a very important question to ask because if you're going to be writing a lot of code you probably should understand what's happening behind the scenes at least at a

high level so for this last part what we're going to call a programming language is is a group of tokens or symbols that when combined together in a very very Specific way uh can be translated by something called a compiler into machine code or ones and zeros that all computers know how to run you can think about it like this um let's let's take a spoken language um something that I don't know which is pretty much every language except for English um but we'll call it I don't know something like Portuguese if you started speaking

Portuguese to me my brain would not be able to comprehend what those words and Symbols and expressions actually mean semantically although I can't understand Portuguese what I can understand is the body language of someone speaking it so if you've got someone speaking Portuguese and they have a very you know sad demeanor to them I can understand generally that what they're saying is not a happy thing and it's the same thing with computers well a computer cannot understand JavaScript it cannot understand python it cannot understand C++ it can't understand any of these languages but if we

use something called a compiler which is just another program more code that actually reads other code and compiles it down into ones and zeros that a computer can actually understand so it's taking a language and it's compiling it down into one on and zeros or we can think of them as body language because all computers understand ones and zeros now this is where it gets really complex and I'm not going to Actually dive into it during this video um once we start talking about compilers then we have to get into the topic of Operating System

Theory and which you know what is our Target runtime that we're dealing with like where are we actually executing these ones and zeros because each computer is going to have a slightly different CPU slightly different uh ALU or arithmetic logical unit all of these things matter when we're compiling code down and for each Different language and kind of each different operating system you have to have slightly different compilers and other tools that I'm not mentioning here in order to do that now if you're someone who really wants to understand this in a great level of

detail something that was very important to me then I recommend reading this book right here which is the elements of computing systems and you'll see within this book you know I'll see if I can show like a Little page here but we actually get into things like the arithmetic logical unit and how these ones and zeros are actually uh translated into commands for the computer now I will say if you're going to read that book I will warn you right now it's going to take you months and it's very difficult to get through um that

said I came out of it learning in a ton and I was really happy with what I learned from that book but if you're trying to get a job quickly You're trying to become employable as fast as possible do not read that book it's going to take you too long it's going to distract you from actually writing web applications now if you're someone who wants to understand this stuff but doesn't have time to build a computer from scratch which is what you'll do in that book uh I recommend a book called code by Charles petel

and this is going to give you all that information it's going to teach you the Ones and zeros compiling all that kind of stuff but it's going to do it a little bit quicker and you're not going to be quite as Hands-On with it and the final question of this video is where does JavaScript actually run and the answer to that is very similar to the question that I asked earlier it um which is is HTML and CSS required to run JavaScript and I said well it depends whether you're running it in the front end

or the back end and what we're Asking here is where does JavaScript run and this is where we get into the topic of something called a runtime and a runtime is basically uh an environment where code is run and it gets into those topics that we just talked about with compilers and how do we target different platforms and compile down to ones and zeros and there's actually two run times for JavaScript and that would be the node.js runtime and then the browser runtime and and uh believe it or not the Browser run time within Google

Chrome uses something called the V8 engine and this is going to actually do all of that compilation that I was talking about and it's going to get into a bunch of other stuff some optimization um using the just in time compilation method all that kind of stuff it's going to basically take your JavaScript code and convert it to something the computer can read and node.js which is kind of the backend version of JavaScript or the runtime That we're going to use for our backend JavaScript servers and stuff like that that also uses the V8 engine

which is similar to Chrome so you can kind of guess that the creators of nodejs and the creators of the V8 engine that runs in Chrome and node.js they kind of become good friends here over the last couple years but this is not the only way that we can run JavaScript you know you have node.js which which is probably which is the most uh popular way to run Uh JavaScript on the back end and Google Chrome which is one of the most popular browsers but in this course we're using Firefox as our web browser because

I think the developer tools are a little bit better there and with Firefox we're not actually using the V8 engine in order to compile the JavaScript down we're using something called spider monkey which is the original engine for JavaScript that was built with within the Netscape browser uh way back in the Day and as a side note if you really want an interesting podcast to listen to look up browser Wars I think it's by the podcast called business Wars and it's a really cool story about Netscape and how all this all these browsers gained market

share really worth checking out in my opinion so in summary JavaScript can be run on the back end or the front end and if it's run on the back end in node.js it's being compiled down using the V8 engine if it's running on the Front within Google Chrome it's also using the V8 if it's running in Firefox it's using spider monkey if it's running in Safari it's using some other uh compilation method and that I can't think of off the top of my head but ultimately these are all different run times and you do have

to be aware of you know where you're running your JavaScript code because it's going to run differently there are things that you cannot run within the node.js run Time if I tried to let's say open up uh the nodejs runtime here all I have to do is Click uh type node and it'll bring me into the the console if I tried to say document. query selector and then grab the body tag of the HTML and I press enter it's going to say uncaught reference error document is not defined and that is because in the node.js

runtime the document object model does not exist like it does in the browser so you have to be aware of these different Run times and understand that certain types of code can run um in the different run times it's all JavaScript but you kind of get what I'm saying here and at this point per usual I've uh a Dron on way too long longer than I ever thought that I would but you have reached the end of the second lesson of my full stack web developer roadmap series and while we haven't written any JavaScript yet

well I guess we did in the first lesson but we haven't actually Learned JavaScript yet we do have a lot of context around it now which was the purpose of this video I really wanted to put this video together in order to give you that context so that when we start getting into the details you know variables and data structures and functions and Loops all that kind of stuff you have a little bit of a background uh to understand it from if you liked this video please give it a thumbs up and subscribe to the

channel If you want to follow along with this series and Series in the future and with that hope you enjoyed the video and I'll see you in the next [Music] lesson in this video we're going to be talking about JavaScript variables and data types and be sure to stick around till the end of the video because I have some challenges and some practice questions that you can use to apply the skills that you learned in this video Before we start talking about variables and data types I just want want to mention that as we go

through this series I'm not going to be covering everything that there is to know about the JavaScript programming language there are a lot of different features within JavaScript a lot of built-in uh functions and and you know syntax shortcuts and all sorts of things like that that you can do but they're not absolutely necessary for you to write JavaScript code for example let me create a basic array here so we'll say my array and then we'll put some numbers in it and this is actually what this video is all about so don't worry if you

don't understand this quite yet but JavaScript has some built-in methods that we can use on this array so we could say my array. push and then we can add a number to the end of this array so it just returned the length of our new array and if we print it out you can see That there's the number 50 at the end of it now that is an example Le of a very useful and commonly used built-in JavaScript uh prototype method that we're going to be covering in this series but there are other methods and

there are a lot of them that we will not so for example we can say my array. reverse now this one's pretty simple all it does is it reverses the order of the items within that array as you can see but this is not critical for you to Learn to write good JavaScript codee and be a web developer so I'm going to selectively exclude things like that and try to focus in on the most important things of JavaScript likewise there are also some very complex topics that we can discuss around the internals of JavaScript and

how it works behind the scenes and how prototypes work and why it's technically not a class-based language and all these things are important for you to understand later Down the road but when trying to get you from from you know zero to deploying your first full stack web application they're not uh completely essential per se and believe it or not a lot of web developers that work full-time jobs and are employed getting paid lots of money don't fully understand the internals of JavaScript and that's why this series called you don't know JavaScript written by Kyle

Simpson or his GitHub username is getify and he's written this Wonderful series or book series on JavaScript and how it works and you can go to each of the series on GitHub and actually read all about you know how JavaScript Works under the hood and he has a tremendous understanding of this language and explains it in great detail but I would say that you would use this as a reference and personally I think it's geared towards someone who has written JavaScript for some amount of time and it's something that I reference Back to even now

after writing jav JavaScript for about four plus years it's still a great resource to look back on so just know as we go through this series I'm not going to be covering absolutely everything and if you have questions be sure to just Google it or go to this you don't know JavaScript series and uh pick the section you want to learn about and kind of read a little bit more about it and finally if I can get through this long intro we'll Finally get to variables and data types but I want to show you one

thing real quick and that is the console.log statement so when we're working within the JavaScript console in our Firefox Dev tools you can print a variable by using the console.log statement and this is built into JavaScript you can use it uh on the front end in the JavaScript console or the back end in the nodejs console and we can print something like Hello World we've done this already once In a previous video but this is how we're printing we print different variables so if I just say my first variable and set it equal to 20

and then console.log that first variable you'll see that it prints it to the console that's going to be used heavily within this series so I want you to be familiar with it the next thing is the concept of comments so if you put two forward slashes before your code and then you write something this is Obviously invalid JavaScript and you press enter it's not going to throw an error on you while if you type it like this it's going to say that there's a reference err because we haven't commented it out there's another way to

write comments let me clear the screen here and you can put a forward slash and then a star and then you can enter down write whatever comments you want and then you just have to close it out by a star and then a forward slash and when We press enter it's not going to yell at us with any sort of error because we have written a comment so I just just want wanted to basically introduce those Concepts the console.log the single line comment and the multi-line comment you're going to see them a lot and they're

very useful for um you know marking up your code and remembering things about the code that you've written a big congrats if you're still watching this video it means that you Are dedicated to learning how to code and for that reason let's jump into variables and data types in JavaScript so when I think of a variable in JavaScript I just think of a data container and a good analogy for this is the Amazon warehouse so they've got these big vertical yellow uh stacks of containers with different products in them and then on the bottom they

have little robots that kind of Drive these containers around according to when the Item items in the containers are meant to be shipped and I like to think of this as an analogy because JavaScript variables are very similar in that Amazon warehouse each container is registered and all the robots know exactly where to find the container and the products that are within that container same thing goes for JavaScript variables your computer knows exactly where to find all of these JavaScript variables that you declare And assign values to and it's able to retrieve them instantly so

you can think of JavaScript variables as you know you write them and then they are are basically like little Amazon products that get put into these containers and put in the back of the warehouse but the computer at all times knows exactly where to go in that warehouse to find the values of these variables in computer language we wouldn't really call it a warehouse we would just call It memory but it's a good analogy to go by and I think it'll help you remember what variables are all about just like Amazon's containers can have various

types of products stored within them so can JavaScript variables and we can look at this here we're going to just go through a couple examples of variables the first one will be we'll say your first variable and we'll say learning to code gives you superpowers or something like that so That would be one example of a variable and that is actually a string variable we'll go into that a little bit later now you can have your second variable which will be equal to number this time so equal to 10 and finally we'll say your third

variable and that'll be equal to an object and we'll say that this object has a property that says something like hello world and this is also a valid variable and to print these variables once again we can use this Console.log statement and we can print your first variable something like that and you can see that it printed out to the console so these are just examples of writing variables and now I want to go into each component of these statements so as you can see we have this keyword called const we have a little space

here then we have what seems to be our variable's name then we have this equal sign then we have some sort of data in a semicolon at the end These are all really critical parts to writing uh JavaScript variables because when the compiler goes to basically interpret um the code that you have written it reads it in a specific order and it looks at every single uh what we call token within the code so for example if I tried to define a new variable and this time I'll just say another hello world something like that

this would be valid but if we took out just even this single little quotation And pressed enter it's going to give us a syntax error and you're going to get a lot of these syntax errors when you first start out because they basically say Hey you haven't written this JavaScript program correctly you've missed a a specific token within your code now a lot of times you don't have to actually worry about these syntax errors what I have pulled up here is Visual Studio code which is a code editor we're going to work with a little

Bit later in the series we're not there yet but what I want to show you is that if we tried to say new variable and then then we Define hello world with a semicolon at the end it's going to look fine but if we go over here and delete this little uh quotation you're going to see that Visual Studio code picks up on the fact that there's an air in this syntax so a lot of the times when you're writing code we're not going to see it you know Here in the console which is what

we're using right now but once we get into code editors it's going to point these things out and you don't really have to worry too much about getting everything right um as you're writing your code the next thing we have to talk about with JavaScript variables is the concept of Declaration and assignment to properly use a variable you have to do that uh sequence of steps in order so you first have to declare the variable then you Have to assign a value to it now if we typed in you know something like new variable and

I'm going to actually refresh the page so we clear out all of the uh variables that we have already written so if I say new variable something like that and we say hello world that is going to not only declare but also assign this variable at the same time so in many cases we're doing it simultaneously but we can also break It out into individual steps and we can do that by using the let keyword and we'll say uh let another variable equal we'll say 20 this time um or actually no we need to just

put a semicolon at the other end of it and by doing that we have actually declared the variable and now we have to assign a value to it and we don't have to put the let keyword at the beginning we just assign a value and we can print this to the console by saying another Variable and you can see that it equals 20 so in the second example I declared it then I assigned it and it's important to understand this concept you don't necessarily have to you know think about this while you're coding but I

wanted to point this out and it brings up another good point about this const versus let versus VAR keywords at the beginning of your variable Expressions let me go ahead and write the same uh variable per se in three different ways so first we Can say variable 1 equal 10 and that's using the con keyword then we can say let variable we'll say two this time equals 10 that's valid and then we can say VAR variable three can't type here equals 10 and you can see that all three of these ways of writing a JavaScript

variable are valid so you might ask the question well how do we decide between const let and VAR you need one of them at least to uh create a variable if if we just tried to Say um you know random random keyword and then variable 4 equals 10 it's going to give us an error because random is not an assigned keyword such as conet or VAR let's go ahead and start with VAR and that is the only keyword that I would recommend against using it's kind of a legacy keyword within JavaScript um it's something that

existed in the old versions in standards of JavaScript and nowadays we have the constant let Keywords which will pretty much cover every situation that we need to now the reason VAR is not used anymore is because it can be uh redeclared so if we say uh VAR my variable equals 10 and then we say VAR my variable equals I'm sorry I can't type today equals 20 it's going to actually update the value of that variable without yelling at you at all but if you use a key word like const so we'll say another Variable equals

10 and then we say const another variable equals 20 it's going to say that there's a syntax error and it's going to yell at us for redeclaring a constant variable with the VAR keyword being able to redeclare a variable seems con convenient and it actually is when we're working within the console but when you're actually writing code it can be kind of dangerous and you can have some unwanted Side Effects by being able to redeclare a variable the next key Word I want to talk about is let and let is something that you will use

whenever you expect to reassign a variable at some point in your code so we just kind of talked about redeclaring a variable and that's very different from reassigning a variable so if you remember you first declare the variable which is basically saying um go back to our Amazon analogy where we're talking about you know the containers and the robots have to remember where those Containers are in the warehouse well your computer has to First register or declare these variables and then once it's declared it kind of allocates some memory space um on the hard drive

or something like that or in Ram to basically remember where to retrieve that variable from so that's the Declaration step and then the assignment step is where we take an actual value and we say okay put put this value in this variable and so the computer will Go find that variable that was declared into memory and assign your new value to that you know little memory slot so we will always use let when we expect to reassign a variable so let me show you what this uh basically looks like so let's say that we have

a counter and we start that counter at zero and then we want to actually increase the value of that counter so we can say counter equals counter + 1 and we can also say counter Plus+ that will do the same Thing as the previous line that I just wrote so now we should have it equal to uh two and you can see that it is now equal to two and you can see that we are reassigning the value of this variable multiple times now if we tried to uh Let me refresh the page real quick

so that we can use this variable again and if we tried to say counter equals zero with the const keyword and then we tried to say Plus+ it's going to Say that we have a type error because we can't assign or reassign a value to a constant variable so that's when you want to use constants uh is basically when you expect the value to never change so a good example of that is say we have a program that calculates some sort of uh I don't know income statement you want to put in a tax rate

for this individual so you might program in something like a tax rate and that will be equal to 0.08 for 8% and you press Enter and now this constant variable is never going to change your tax rate's never going to change and that is the best use case for a constant variable so just remember you use let when you expect the value to be reassigned to a variable and you use const when you um expect the variable to never change values now the the concept of a constant is pretty Universal in programming and it spans

across many languages often times you'll see constants written Something like this so we'll say tax rate equals 0 8% and you can see that the variable has been written in all caps and separated by an underscore now you'll see this very often but this is just a semantic difference and it's functionally the same as what we had written before and that actually leads us into our next discussion which is about variable naming conventions I'm going to paste a Couple different versions of variables in here and we'll press enter and you can see that all of

these are actually valid in JavaScript they're all written slightly differently but they're functionally kind of the same so these are all saying your First variable but JavaScript recognizes them as different variables that's why we're allowed to declare all of these at once and they all functionally operate the same but there are a couple of these that are More preferable in the JavaScript programming language than others so for example the first variable that we have here is written in something called camel case and that is basically where the first letter of your variable is lowercase and

then each successive word or logical separated word within your variable is going to be capitalized so this is called camel case and then there's another version down here which is called Pascal case um Which is basically where it's the same thing as camel case except the first letter is capitalized the second variable here where we have underscores in between lowercase letters is called snake case then you have this one right here that we just talked about which is called constant case and then finally you just have a totally lowercase variable and these are all different

semantic styles that you can put on a JavaScript variable or any programming Language variable and often times these indicate to other programmers something about your code I'll talk about what these mean in just a second but first want to talk about what makes these valid so you can really think of a variable in JavaScript uh kind of like a Twitter hashtag so if you were to write a Twitter hashtag and we'll say the full stack road map which is the one that we have for this series this would be a valid Twitter hashtag because it's

all One word now if I put a space here at the end then Twitter is only going to recognize that first part or full stack and then it's going to treat road map as just normal text and that's exactly how JavaScript works with variables if we tried to Define this as a variable so let's say const full stack road map equals 10 it's going to give us a syntax error because we have a space in between uh these two words to have a valid JavaScript variable you have to put Everything in one word and use

one of these conventions up here at the top now there's also a few things you can't do so we we cannot do something like this where we say full stack equals 10 you can't have these little quotes here um this is not going to work and then you also cannot start a variable with a number so you can see that I put one at the beginning of this variable it's going to throw an air but if I put full stack one at the end so now we have our Number at the end of the variable

that works just fine so these are just some of the things to watch out for it's fairly intuitive and you'll get the hang of this uh really quickly and if you don't get the hang of it the JavaScript debugger is going to yell at you and it's basically going to give you a bunch of syntax errors all right so now that you know how to validly declare and assign a variable um let's talk about something called a style guide and this Goes back to the concept that we see up here where we have all these

different semantic ways to write a variable they all work but some of them are more preferable than others depend depending on what language you're writing in and what you're trying to do with the individual variable that you're declaring if you type in JavaScript style guide into Google you'll find a couple different style guides by different companies so this is Google's JavaScript style guide and here would be airbnb's JavaScript style guide so basically what these are are specifications for the employees of these different companies that says here is how we want you to write your JavaScript

for our company and what this might entail is different naming conventions different um use cases of different JavaScript features um all that kind of stuff there's a plethora of things that you'll find Within These Style guides but the one I want to look at is naming conventions so we can find this within uh each of the style guides kind of have to look for it here real quick so here is naming for Google so we have the naming style guide for Google and Airbnb and you'll see that um each of them recommend camel case so

we can see uh package names need to be lower camel case uh class names are upper camel case let's go down to um uh normal variables So non-constant field names should be lower camel case um local variables lower camel case you kind of get the point they're all pointing towards this lower camel case um convention and if we go to Airbnb you'll see here that it says use camel case when naming objects functions and instances this is a bad example this would be a good example so you'll see Within These two different companies they're both

recommending camel case and that's actually a Recommendation across all of the JavaScript community so you'll see a lot of JavaScript code written in this camel case as we saw here with our first variable and this is what I would recommend you as you're starting to learn how to write JavaScript the last thing I want to talk about with naming conventions for variables is what we're actually naming them so you'll see here that these are very descriptive um this is clearly indicating to the programmer That you're practicing you're writing your first variable but there's also going

to be programs where you're going to have multiple variables within a single function or a class and you need to identify between these different variables so tell me would this be an appropriate way to name a variable if we just said Q equals 20 well the answer is no because how are you going to ever know what that Q is supposed to represent maybe it rep represents a Counter in a for Loop uh maybe it represents uh I don't know the the tax rate on something you know whatever it means you need to uh name

your variable accordingly so if this 20 represents a 20% tax rate or something like that we need to call it tax rate for net income or something like that where you're clearly specifying what this value represents now there's also the the case where you can get two complex with this and write out a variable that's way too Long and in that case it gets hard to write that code because you're constantly having to type this super long variable and it takes you longer so you want to find that middle ground where you're not being so

vague where it's just saying the the variable's name is q and you're not so specific that you can't you know write your variable within 10 seconds the next thing we have to talk about is the left side of the variable expression and the right side Of the variable expression so let's write our first variable JavaScript gives you superpowers something like that we'll press enter and let's take a look at this so on the left side when I say the left side I'm talking about everything left of this little equal sign in the middle and when

I say the right side I'm talking everything right of this little equal sign in the middle so it's very important to make a distinction between The left and the right because uh depending on what you're putting on each side you're going to get different behaviors the left side of the equal sign is always going to include two things it's going to include either const or let and you could use VAR but I don't recommend it and then it's going to have a single space right here and then it's going to have your properly constructed variable

name and then I always use another space uh this is just Good code formatting after that and then an equal sign and everything left at the equal sign is considered the Target or that container that you're trying to put some sort of data or value into so this is where you're storing your container now on the right side of the equal sign you have the actual value that you're assigning so the right side could be one of many different things and this is where we get into the concept of data types in this case we

Have a string on the right side of our equal sign and Then followed by a semicolon that's to indicate the end of the uh variable expression so I want to touch on real quick let's say that we had uh one variable equals 20 and then const second variable equals 30 this would be a valid expression we wrote them on the same line but we ended each statement with this semicolon now if we were to pull this up again all I did was press the up Arrow key to get my last Statement in the console that's

a quick short cut for you and if we were to take out this semicolon here and let's go ahead and I don't know rename these variables so that we can actually experiment around with them so one and second and then press enter it's going to yell at us because we don't have a semicolon at the end of our first variable declaration and that's why that semicolon is so important it kind of indicates the end of an expression just For an example here's a bunch of code that I wrote that is demonstrating that we can have

multiple different things on the right side of our expression so you can see in each line we have our basic variable declarations but on the right side we have anything from a number to another variable to a string to an object to an immediately invoked function to a combination sorry it keeps disappearing a combination or addition of variables and if we were to Console.log variable six here you're going to see hello my name is Zach and basically what that's doing is it's taking the value derived from variable five which is returning us this hello my

name is and then it's adding to variable three which is Zach so you can see how we have a lot of different options on the right side and this is always going to equal the value which could uh come from a function or a specific data type it can Come from a lot of things and that is assigned to the Target container on the left side of the equal sign all right let's go a little bit simpler here again I'm going to paste in three variables the first one we have is a number the second

is a string and the third is a Boolean so let's talk about these different data types A little bit there are a couple different data types in JavaScript and the three most common are sitting on this screen right now these Are kind of the prim primitive data types now you might notice that as we we have declared and assigned these variables we didn't really mention what data type we are specifying here and in a lot of languages such as C or C++ or Java they actually require you to specify what type of data you are

assigning to this variable um another example of that would be typescript which is actually a suet of JavaScript that we might talk about a little bit Later in the series but basically it's a it's a language that compiles down or it's actually transpiled down to JavaScript and it allows for type uh checking or static typing so this is how you would declare a variable within typescript so we would say the variable one equals a number and that is equal to 10 so in this declaration and assignment we are saying okay we have this variable one

this is a number and here's the value which is a number a assigned to it And this is what we would call a statically typed language and when we say statically typed all we mean by that is the fact that you are uh before you run your code telling the compiler what types of data to expect now JavaScript is what we would call a dynamically typed language and you can see this above where this variable one the compiler is going to have no clue what type of variable this is until it actually eval valuates uh

the assignment Value that you've given it and figures out what type it is and you can actually see the type of each variable so if we typed in variable one using this buil-in type of function um we can also say variable two and variable three to see the different types of the variables so you might say well if JavaScript is dynamically typed and we don't really need to specify the data type that we're assigning to the variable then why should we even care well that is exactly The reason you should care because if you're writing

code like this and you're assigning all sorts of different values to uh these variables it's really important that you always recognize what types of values you're assigning to your variables so that you know you don't try to do something like this where you say variable one plus variable 2 and then it will say 10 some value so clearly something happened here you tried to add a number and a string Together but JavaScript has magically coerced the um first variable which is a number into a string and it has combined those or C concatenated those strings

together into a single string so without understanding the different uh data types that you're assigning to your variables things like this are going to get very confusing and you might try to add things together or combined uh variables together and you don't know why they're combining in the way that They are this right here is actually called implicit coercion of a variable type we're not going to talk about this quite yet but basically what's happening is it's taking variable one which is of type number and variable two which is of type string and it's saying

I want to coers this number into a string and then combine the values together so you can have a variable such as number one will equal to will be equal to 10 as a string and then we can say number 2 equals 20 As a number and if we said the type of number one it's going to give us a string and the type of number two is going to be a number but what we can actually do is explicitly rather than implicitly coers these two uh variables together so if we implicitly do it and

say number one plus number two it's going to give us 1020 because it is uh basically coerced this number of 20 into a string and concatenated together with this uh first string which is 10 but if I wanted to add these two together as numbers all I have to do is use the built-in math function to uh or not math I'm sorry number function to put the number one which is a string into a number and then I can add that to number two which is already a number and now it's going to give me

the correct answer um which is 30 and that is the addition of those two numbers so you can see that if you're not paying attention to the types of data that you're working with You might have unexpected results as we saw right here when we added a string and a number together all right so now that we've talked about the importance of data type let's go through each of them and just get an overview of what they look like so let's clear this out so the first one we're going to do is a string value

and there are actually two ways that you can declare a string value you can first say something like hello world with these single quotations and That would be valid you can also say another string value and specify with double quotations hello world and that's going to work just the same there's no better you know way to do this but I would say just like we use lower camel case for uh writing JavaScript variables the convention within the industry is generally going to converge on these single quotes and a lot of uh code linters which actually

um a code linter Is something that will take a big style guide like the ones we looked at before and it'll actually write these rules into code and then while you're typing your code within a code editor like Visual Studio code it will take all those rules and it will apply it to the code that you're writing as you're writing it so a lot of these code linters are going to specify that they want your code written with these single quotes rather than the double quotes um That you can also write a string as moving

on to numbers these are a little bit easier all you have to say uh let's say number value is our variable all you have to do is specify a number and there's nothing nothing to it here now the one thing that you might mess up on at some point let's just make this a different variable you might try to add a comma in there to specify a larger number and when you press enter here it's going to give you a syntax error Because this is not a valid way to write a number you always have

to just write the number as one big number there's no commas or anything that you can put in it booleans are are also pretty simple so if we want to write a Boolean uh Boolean value is going to either be equal to true or it's going to be equal to false so that's pretty simple there's only two possible values that you can put in there um that's booleans now the next one is arrays and this is where we Start to get into a little bit more complex data types so let me clear the screen to

work on this real quick and if we wanted to say first array and then we want to put in some numbers here we can do that and you can see that an array is specified by these opening and closing brackets and then values here that are separated by commas so you can think of an array and I know computer science uh people would yell at me for saying this but you can think of this array as just Basically a list and this list is uh separated by commas and within this list you can actually put

any data type that you want so we have numbers in this first array but we could also put in a variety of data types so we can put in a number uh a string here we can put in an object we're going to get to that in a second and we can also put in another array so we just put in another array within this array so these are all Val things you can put in an array and you Can kind of mix them together you probably won't do this very often where you're mixing data

types but just wanted to uh say that you can do that and that's part of javascript's dynamically typed language feature now the important thing to understand about arrays is that they are indexed and when we say index each of these values uh separated by commas are uh identified by a single index and these indexes start at zero so they don't start at one as you would Think so in this first array you might say oh this value 10 is represented by the index of one well no that's not the case this is represented by the

index of zero and then you just count up in order so uh 10 would be represented by zero 20 would be represented by 1 30 by 2 and 40 by 3 and we can retrieve these values from the array um by saying first array so you type out your array variable and then you use brackets just like you uh did to write them but this time you pass In the index so if we wanted to grab this uh value of 10 from the first array we just type in the zeroth index and press enter and

it's going to give us that value from the array now we can also retrieve uh these other values so say from the second array let's say that we wanted to uh get this last value which is actually another array we could say console.log uh second array and then we can use brackets and we'll count this is Zero this is one this is two and then this would be the third so we can say three and that's going to give us this array we can even tack on another set of brackets and we'll say we want

the third or the actually the second value I'm sorry I'm misspeaking totally here we want the fourth value from this array by using the index of three and then let's say we want the zeroth value or this value of one from the the array that we've grabbed there and now you can see That we can grab uh values from nested arrays so that's the important thing to know about arrays you have to pay attention to the indexes and then you use bracket notation to retrieve those values from their respective indexes the next thing we'll talk

about is objects and in JavaScript these are very important important you might even hear the phrase that everything is an object in JavaScript um and that that is true I don't want to get into the Subtleties of it today but it is very important nonetheless to learn how these objects work in JavaScript because you're going to be using them in every single program that you ever write to understand objects just think of them as a complex container so going back to that Amazon analogy where you have those carts of different containers and then within the

containers uh let's say that you have other containers that have the Amazon products so let's say that you Have some sort of jewelry product um that is sold on Amazon you might have a big container and then you might have 30 different little containers within that big container and then within each of those uh 30 little containers you have uh different pieces of jewelry so that is kind of what a JavaScript object is all about you can make it infinitely complex infinitely nested um there's just so much you can do with it so let's jump

in and and see what a basic object Looks like so we'll say uh object variable and then this is indicated by these little curly braces um this is what you enclose an object in and then within an object you have to give it properties so these properties are written just like a JavaScript variable and you can kind of think of them as variables contained within the object so we might say prop one and then you use a little colon to say okay that variable I want to assign the following value to so We'll say we

want to assign uh the number 20 and then to create another property you have to put a comma after the first property so it's sort of kind of like an array where you have um a bunch of different values separated by commas but in this case you kind of have to think of it as a key value pair so this is the key which would be the prop one or the variable and then this is the value right here on the other side of the colon if you want to say prop two And then we

want to set that to 50 you can do so like that and then you put your semicolon at the end press enter and now we have the object variable with prop one and prop two now to access these prop properties within the object we use something called dot notation so unlike the array where we would say object variable and then you put little brackets and say uh zero or something like that we can't do that that's not going to work but if we said object Variable do prop one like that then we're going to get

the value of 20 so we access the properties using notation and this can be infinitely nested so let's construct an object right here um we'll say it's a nested object and it'll be equal to uh we'll say layer one and then Layer Two and we're just making a bunch of objects nested within each other and then we'll say Target value will be 20 and so this target value is simply a property nested within Uh several other properties within this object so we'll press enter and then to get that value you just say nested object. layer

1. layer 2. layer three and then Target value and you get the value of 20 so you can see how this dot notation allows you to basically grab the values of the properties off of uh the object and notice how when I'm using this dot notation I'm specifying the property so we could also do this um so we're going Back to our object variable right up here so we can also like I said you can't use this zero here but what you can do is you can use this bracket notation you just have to define

the property that you want to grab uh in that bracket notation so that's another way to retrieve a value from an object um I prefer the dot notation usually but in some cases you might need this because maybe you know the name of the property so you know the name of the Property is property one so instead of explicitly writing this uh property as a string you might store it in another variable and then pass um the property value variable into your object um I don't want to get too far into that because that's going

down a little bit of a rabbit hole but you may need both of these in certain situations the last thing we'll talk about is functions and we're not really going to talk about them much but I did want to say that Functions are valid uh things that you can assign to a variable and this goes back to the concept of everything is an object in JavaScript so let me just show you a brief example uh we'll say uh function container variable just to be descriptive here and then we can write a function like this um

and this function will maybe return the value of 20 so we are storing that function in this variable and then we can actually uh Call this function like this and get the value of 20 that was returned from it but we haven't learned how functions work return values all that stuff so don't worry about this I just wanted to show you that this is a variable and we can actually assign a function to that variable so that's a valid uh thing to put on the right side of that equal side all right if you're still

here huge congrats you're probably one of very few people that uh have the patience to sit Through a video of mine uh that goes into sometimes excruciating detail about things but thank you for watching um I just want to go through a quick summary of what we learned here and then offer you some exercises that you can um use to actually practice the concepts we learned in this video so just to summarize when using variables we first have to declare it and then we have to ass assign it a value and these are often done

in the same line of code the Same step um when we are using the different keywords so let const and VAR uh we probably never want to use VAR but when we use let it's because we want to reassign the value of a variable and when we use const it's because we expect the value of this variable to not change within the program next up the left side of the equal represents the variable that will hold The value that you're assigning so it's kind of the target for that data um the right side represents the

actual value there are many ways to write a JavaScript variable but camel case is the preferred way you'll see this most often in the JavaScript community and then there are five main types of variables you have strings numbers booleans arrays and objects and those functions that we just talked about kind of fall into that object data Type so the final thing is that a semicolon represents the end of a JavaScript expression you always put that at the end except if you're using an object in which case you can enter down on the multiple lines and

you actually have to use commas to separate those different object properties that's it for the summary now let's move on to the challenges and practice for this video so like I said you're not going to be able to just watch these videos and Learn how to code you have to actually apply them and at the end of each video I want to at least give you a few challenges to work through to apply your knowledge so I'm going to just put these challenges on the screen here for a few seconds and you can go ahead

and work through them in the console within the Firefox Dev tools that we talked about in the previous uh lesson and how to use that and the answers are going to be on my GitHub account and I'll link to those In the description so that you can see if you got them right all right on to the challenges for today good luck and I will see you in the next video [Music] today we're going to be talking about JavaScript operators and be sure to stick around till the end because I have a handful of challenges

for you to try out and solve on your own to practice the skills that you learn in this video before we talk about JavaScript Operators I want to do a little review of what we talked about in the previous video which was JavaScript variables and and data types because they're going to actually come into play during this video so if we rightclick anywhere in our Firefox web browser and click inspect element uh let me make this a little bit larger for us so that we can see and then you go to the console you're going

to get into a repple or I think that stands for read evaluate Print and loop which basically allows you to execute JavaScript uh without setting anything up so we're going to be using this to to uh code in this lesson but also to review what we did last time so last time we talked about JavaScript variables and the way that you declare and assign a variable is one of three ways we can say uh const and then a space and then the variable name we're just going to call it a here and then you give

it some sort of value this is a Valid way to define a variable we can also do it with let a equal 20 and we could or not we can't use a actually because we already declared this up here with the const so we need to do something like B and then we can also use VAR but I don't recommend using this because it's kind of an outdated Legacy feature of JavaScript but nevertheless it still works we can still declare and assign a variable that way now we also talked about how you cannot reassign um

Something that you assigned as cons so if you wanted to say value will will not change as the variable name and you set that equal to 20 and then you try to say value will not change equals 30 it's going to give you an error because you assigned it with const but if you say instead of const you say let and then value will change equals 20 then you can come down here and say value will change equals 30 and it lets you do that so that's the difference between const and Let again we don't

use bar because it's kind of a Legacy uh keyword in JavaScript now we also talked about the different data types that you can use so I'll just use the const keyword for our variables here we'll say my string equals hello world so we can define a string value which is represented by these little uh quotations the single quotations and declare that as a variable now we can also again I just pressed the up arrow on my keyboard to Get that last command that we typed and we can kind of circle through all of the commands

that uh I have typed along the way um but anyways we can declare a string so we'll say the second string uh this is basically just a different variable and we can use double quotes to do the same thing so these are functionally equivalent some style guides would recommend that you use single quotes others would recommend double quotes it doesn't really matter You just got to pick one so that's how you define a string and if we wanted to define a number so my number we just give it a number that's pretty easy we also

have booleans which are going to either be true or they're going to be false so that's pretty easy there's only two answers that you can possibly have there and then finally we have arrays and objects let me clear some space here so we'll start with my array and we can fill that With pretty much anything so we can do some numbers right here so that'll be our first array and then maybe we can say our second array will be uh something like string one and string two and if you remember we can access the properties

from these arrays by using bracket notation so we just look for the index um this would be the zeroeth index the first index the second and the third so we use that here to identify different objects or different uh values Within that array and then finally we have objects which are going to be a little bit more complex and they're kind of the the Cornerstone of JavaScript um but we can say property one equals some value and then so that's a string value and we can access that by just saying using dot notation so we

just say my object Dot and then property one and that's going to give us some value we can also with objects use bracket notation and if we pass in the string Version of that property it will still give us some value so that's just a quick review view of how JavaScript variables uh work and all the different data types now we're going to take these Concepts and extend them a little bit further in talking about JavaScript operators so the first thing we got to basically resolve is what is an operator well an operator is something

that exists in all coding languages not just JavaScript the one we're working in You'll see these operators in anything from JavaScript python uh you know Java C C++ all the these different languages have this concept of operators and there's not a really great way to explain it without just jumping in but basically how I'd summarize it is an operator is something that allows you to either compare two values or more than two values um you can modify values modify variables you know combine them together it just allows you some more Flexibility and in kind of

to test the uh different equalities of different variables so I know a kind of a tough explanation but let's just jump in you'll see what I mean now there are four main types of operators we're looking at arithmetic assignment comparison and logical operators you'll see how these kind of fit in in just a second when we jump into them we'll start with some of the easiest ones which would be arithmetic operators so This would be plus uh minus or addition subtraction multiplication and division so you can see how this works it's pretty easy easy we

can have a series of numbers and and remember we're using a JavaScript console which basically reads the value of a JavaScript expression and then prints it back to us once we start writing code in files later in the series we're not going to be able to um like let's just say some random variable here equals 20 and you can see that all We have to do is type in some random variable and press enter and it's going to evaluate what the uh variable actually has stored in it we don't actually have to use this console.log

statement that we have been uh looking at in Prior videos you know you definitely can and it's going to print 20 but you don't have to you can just type it the variable so this is going to be very useful when looking at these operators here so in any JavaScript Console you can just take numbers like this so we'll say 20 + 50 and that will equal 70 and it shows how it evaluates those and this plus sign in the middle is considered a JavaScript operator so you can already start to see what these uh

operators actually represent you can also do something like 50 minus 20 I'm trying to space it out here for us but we can say 50 - 20 = 30 and we can also do some division so 20 / 2 is 10 um as well as multiplication 2 * 2 is going to Be equal to 4 so these are all what we call operators this plus operator the subtraction operator Division and multiplication and these are the most basic arithmetic operators at this point you might be wondering well what are we doing here I've never seen this

uh syntax written before well this is not actually valid JavaScript code um it works here in the console but if you tried to write it in a file it's not going to work out so well generally You're going to be doing these operations and assigning the value to an actual variable so let's say that we want to do a result variable and we want to say 20 + 50 / 2 or something like that and we save that and now we print out the result and it's going to be 45 because we did 20 +

50 is going to be 70 / 2 is 45 and then it stores it within this uh result variable so what we call the right side here and this is going back to the prior lesson we talked a Little bit about the left side of the equal sign and the right side of the equal sign um so this equal sign right here so we got left and then right everything on the right side is what we're going to be calling a JavaScript expression and so we're using all of these different values along with the operators

to create some sort of expression that is going to be evaluated in full and then once it's evaluated it's going to take that that single Value that it um came up with and assign it to the variable on the left side of that equal sign there are actually a couple more arithmetic operators as well so we can use something called a modulus operator so let's do 100 and then a little percent sign and then we'll say 50 and that's going to equal zero and basically what this is doing is doing a division problem so 100

/ 50 and then it's figuring out what is the remainder of that division problem in this case 50 Is a factor of 100 it goes into 100 two times with no remainders so we're going to get zero but what if we said 100 modulus I don't know 77 well we're going to get 23 because 77 goes into 100 one time with a remainder of 23 so this may not seem very useful to you right now but I promise you there's going to be times when you're coding where this modulus op operator will come in handy

moving on we also have the exponent operator so if we Wanted to say I don't know 8 to the power of two so generally you would see it written like this well this is not actually what the exponent operator looks like we would have to put in two stars here and we'll say 8 to ^ of two is going to equal 64 8 * 8 is 64 and that's how we use the exponentiation operator so that's two little stars you can remember that where the multiplication is going to be one star so 8 * 2

is 16 and then if we do 8 Double star 2 that's 8 to the power of two so that's the exponent operator and then finally there's a couple operators that are not going to kind of fit into this um this schema that we've been looking at so far it's going to be a little bit confusing but I'll try to explain it best I can uh one of those is going to be the increment operator and then the next will be the decrement operator so let's say that we have a variable I'm going to intentionally mess

This one up so let's say that we have a starting number and that will be equal to zero now notice what we used here we used the const um keyword here so we cannot reassign this value so the operator that we're trying to use here is called the increment operator and the way that it works is you take a iable or some value and you put two plus signs at the end and when we press enter you're going to see that it's invalid because we have a const declaration or a value That cannot change now

if we wanted to declare this with the let operator so we'll say start number this is a different uh actually let's just clear the whole screen so that we're we're very clear on what we're doing here so we'll say let starting number equal 0 now this value can be reassigned so all we have to do is say starting number Plus+ and when we press enter it's going to say zero but the actual value of the starting number variable is Actually equal to one and we can see that by printing it out once more and if

we do this increment operator again and then we print out starting number again we're going to get two so you can see how it's adding one to the variable and this is actually equivalent to saying starting number equals starting number + one so you take the previous value and you add one so if we press enter now you're going to see that the starting number is equal to three now we can also Do this with a decrement operator so we can say starting number uh actually let me clear the screen real quick we'll say starting

number which is currently at three and put two little minus signs at the end and it's going to now equal two and we can do it again couple minuses and now it's equal to one so you might say well why is this useful in many cases when you're going through Loops which we're going to talk about in a future video this is going to come in Handy so we just made it through the arithmetic operators but now we can move on to something called an assignment operator and believe it or not we've actually already covered

this so when we write a variable my variable equals 20 we're actually using an an operator already so this equal sign that we've talked about so much is actually an assignment operator and believe it or not this is the only assignment operator that you're ever going to need although This is all you'll ever need um pretty much forever I want to show you some of the other assignment operators that we can use just so that you know that they're out there but once again these are not required and quite honestly I don't even use these

a lot of PR programmers that have been coding for 20 30 years will never use these so they're just this is just for educational purposes honestly I would recommend just writing your code out long form and I'm Going to show you what I mean in just a second let's say that we had a value we'll assign a variable equal to 10 notice how we use this let keyword so we can reassign this variable and what if we wanted to add five to it well this would be pretty simple all we would have to do is

say X equals and then we want to take the previous value of x which is currently equal to 10 and we add using the addition operator five so that's the end of our expression press enter and Now X is equal to 15 well there's actually a shorter way to write this and all we have to do is use a different assignment operator so the way that we would do this let's start over I'm going to refresh the page clear out all this nonsense up here and let's say that we have our variable again equal to

10 well we can also write it like this we'll say plus equal 5 and when I press enter this is actually going to reassign that variable of x From 10 to 15 so add five to it and you can see that if we print out X it's now equal to 15 so you can see this little operator here the plus and then the equal sign this is an assignment operator uh which works the same as just our normal equal sign but instead it's going to take whatever's on the right side of it and it's going

to add it to the variable on the left side we also have this for every different operation so we have the plus equals so let's Let's just start with X we'll use this as a example here again so we'll say plus equals 5 this should turn it into 20 uh we also have uh X minus equal to 5 which should bring it back down to 15 um we have x / by equals and then we'll say three so that should equal five and then finally we have X multiply equals uh we'll say two and that's

going to equal 10 so you can see how we have several different assignment operators that are just shortcuts for us to do Something that we could already do uh writing it out L hand and what I want to say about this like I said you don't need these operators all you really need is this one right here and that's the equal sign and the reason being is sure you could save a few characters of Code but it's just a lot more clear if we wanted to take our value so let's get X this is currently

equal to 10 it's much more clear in my opinion if we just say x = x + 5 rather than saying X Plus or equal to 5 and it just eliminates the need to memorize a bunch of stuff um you really just don't need these and I would recommend just not worrying about them so just to do a little recap we have our arithmetic operators so let me just write this out in a comment so we have our arithmetic operators and this is going to be plus minus multiply divide modulus um increment decrement and I

believe that covers all of it um I Apologize if I missed one here but these are all arithmetic operators and they allow us to basically uh modify different variables we also have assignment operators so assignment um operators and this is going to be the equal sign that we're very familiar with um the plus equals minus equals multiply equals and divide equal equals these are all valid assignment operators but once again I just recommend learning this one And being done with it now the next sort of operators that we can talk about are comparison operators and

in my opinion these are the hardest to understand because um it introduces a concept that we haven't really looked at a lot yet let's go ahead and start with a basic example so let's assign a result variable and we'll assign it equal to the following JavaScript expression and when we print out this result variable it's going to equal true and if You can just kind of logically think through this um not to be confused with logical operators um but if we can just think through this 20 is greater than 18 this is actually the greater

than operator we're going to talk about all of these in a second but you can basically figure this out intuitively this is bigger than this so the result should be true right well let's bring in something a little bit more complicated so um let's say something like I don't Know constant result 2 is going to be equal to 20 equal sign three times and then 20 so in this case it's a little bit harder to understand what we're doing here we've got an equal sign here and then we have three more over here and this

has probably got you thinking like well what's going on here the answer to this expression is going to be true and that is because 20 does equal 20 but we have to understand what's going on here on The right side of the equal sign before we can really think through this so to really understand this we have to get super super clear when we're talking about the left side of the equal sign and the right side of the equal sign we talked about this in the last lesson but we're going to go into this even

deeper now so if we look at this second expression that we did this is the assignment operator and we have to be clear what we're looking at here so the Left side is going to be the variable that we're assigning the right side over here too so this right side as I talked about a little bit earlier is going to evaluate to some value some single value and this is what we call a JavaScript expression and in this case we're using a special operator which is the triple equal sign and this triple equal sign behaves

in a certain way that basically says well is the left side of it and the right side of it or maybe this a little Bit confusing is 20 equal to 20 in both value and type so we talked about data types before and this is where that all comes into play so as we go through these make sure that you're being clear about what you're looking at so the left side versus the right side these equal signs over here are not doing the same thing as this equal sign right here think of this as kind

of like the master equal sign that kind of determines um everything about this whole JavaScript Statement and then any other equal sign that you see are actually going to be operators that are doing some sort of comparison when we're talking about comparison operators in JavaScript there are four main comparison operators that have to do with equality so we have the triple equal sign we have the double equal sign we have the not equal sign with two right there and then we have the not equals with one so you can think of these two so this

this one right here And this one right here these are kind of opposites well the double equals and the single exclamation and single equals are kind of functionally opposite now what do they actually do well to find out we need to start playing around with a few values so once again just like we could do 20 plus plus 20 and get 40 we can also evaluate uh different expressions using these comparison operators so if we said 20 dou equals 20 that's going to evaluate to true we Could also say 20 triple equals 20 is going

to evaluate to true so what's the difference between the two well the difference is it has to do with the data type that we're working with so if you remember from the last lesson 20 written like like this is going to be very different from the 20 written like this in the first case we're looking at a number in the second case we're looking at a string and you can see that the expression evaluates to true but we're Not quite there yet so let's say um we want a number value and that'll be equal to

that 20 and then we also want a string value which is going to be equal to I don't know we'll say 50 but notice how we have these single quotations we could also have done uh double quotations here doesn't really matter it's just another way to write it and so now we have a number value and a string value and if we use the type of operator this is actually one that will um we've We've already used a little bit but this is actually an operator itself um and then we put the number value it's

going to evaluate to number and we can also put in the string value and that'll be a string so we know that this number variable and the string variable are of number and string types but we can try to compare them um with each other using the double equals and triple equals equality so I kind of messed up here I meant to say that this string value Should be equal to 20 so let me just go ahead and redo this once more so we'll say string value equals uh 20 and then we'll say number value

equals 20 and we're back to where we started here and now what we can do is we can say string value double equals number value and this is going to be equal and it's going to return a value of true which is a Boolean and the reason being is because while these are not the same Data type they are the same value so if we were to convert um this string value into a number so we can use the built-in JavaScript number function and pass in the string value we're going to get 20 which is

a valid JavaScript number and what's happening here when we compare the string value to the number value using the double equal sign what it's doing is it's first converting them to the same data type so it might convert the string value to a number and then Compare it to the number value so it's comparing Apple to Apples and then it checks whether the actual values are going to be equal to each other in this case they're both equal to 20 so we have a resultant uh expression uh of true now if we try to do

this with triple equals so string value triple equals number value we're going to get false because this time if we do triple equals it's not going to convert the types to match each other so basically what it's saying Is um well yeah the numbers the actual values are the same but the data types are not so therefore this expression evaluates to false so when we're looking at these different the double equals and the triple equals the double equals does not care about the data type while the triple equals does care about the data type and

in almost all cases I would recommend using triple equals because we're just being a lot more explicit about what we're writing in our code That way well you can see that string value does uh resolve the true when we compare it with the double equal sign this is only because it is implicitly coercing the data type of these uh values now if we did it with the triple equal sign it's obviously false because they're different uh values but like I said we could do the number string value so this is explicitly not implicitly like JavaScript

does with the double equals but we are explicitly coercing This string into a number and then we can triple equals compare it to this number value and it's going to equal true like I mentioned these comparison operators are probably the most difficult of all the operators to kind of grasp your head around um nevertheless hopefully this makes sense when we're talking about double equals versus Triple equals and then furthermore if we were to set a a uh result variable equal to the value of String value triple uh or double equals number value which we know

equals true right here then what's going to happen even though we have these equal signs on the right side remember right side versus left side we have these this expression this entire expression on the right side of this equal sign and therefore what JavaScript is doing is it's saying okay first let me look at this this expression let me evaluate it and see what it uh Results in in this case it results in true so now I have a true value on the right and now I want to assign this into the result variable so

we press enter and we're going to get the value of true in that result variable now moving on to the not equals or this little exclamation point with the double equals or the exclamation with a single equal sign these are basically the opposite of what we were doing with the double and triple equal signs so let's try this Once more we'll say uh we want a number value of 20 and then we want a string value of also 20 but this is in string form so these are not going to be equal if we use

the triple equal sign because that cares about the value and the type but it will be equal if we use the double equal sign now if if we just plop in this exclamation part uh point it's going to reverse everything so if we do the exclamation point with a single equal sign and then we say string value That's basically saying um is the number value not equal to the string value and in this case it is equal to the string value because we're using only one equal sign so the answer is false I know that's

a little bit tough to wrap your head around but if you think about it long enough it'll make sense now if we plop in this double equal sign and put in the string value uh this is going to evaluate to true because remember if we have the uh in in the case of let's say Hold on one second triple equals this is going to carry uh care about the value and the type so it's the same deal with this uh exclamation point in the double equals so basically it's saying the number value is not equal

to the string value because the types are not equal and it evaluates to true because no they are actually not equal to each other so just try to reverse it in your head don't think about this too much um when the time comes you'll figure out how to Use these but I just wanted to uh briefly go over them and show you that they're just the exact opposite of double and triple equals now with these equality operators it gets a little bit tricky when dealing with different data types so thus far we've only compared numbers

in strings so if we said 20 triple equals 20 that equals true CU it's uh a number in comparison to a number and they're of the same type we can also say 20 double Equals 20 because you know that's kind of saying the same thing it doesn't care about the types the types are the same doesn't care but the values are the same so it equals true we can also compare strings so we can say hello world and that is going to be triple equal equal to hello world and that's going to equal true and

we're also able to remove one of those equal signs and it's going to give us the same answer because the values are the same the types are the Same it doesn't really matter there so we can use it with numbers and strings we can also do booleans so if we said true triple equals true that's going to give us true now I know that's a little bit of a uh a tongue twister there but we're saying that the value of true which is a Boolean is equal to another value of true so that expression evaluates

to a truthy value and it prints true so I've said true about 50 times in the last 30 seconds uh so let Me stop doing that but basically we can do strings numbers and booleans with our equality operators now if we try to do arrays and objects the game changes a little bit so let's say that we have an object which is equal to uh we'll say property one some value and then we'll we'll go down um actually I needed to hold shift down while I did that so let me redo this real quick so

starting over we have my object and this will be equal to property one which is equal to some String value and then we have we'll say Property 2 is going to be equal to a number and there's our object we also will Define my array and this will be equal to 1 2 3 4 five just a bunch of numbers in there and all we have to say to prove this out is um is my array equal to my array and the value here is going to be equal to true because you're comparing the same

variable with itself but let's say that we created another array and this time it's going to equal The same exact thing so I'm going to put in the same exact numbers it's going to look exactly the same we'll press enter and now if we compare my array triple equals another array it's going to equal false so in the first case when we were comparing the same variable with itself it equals true which makes sense but why does this not equal each other why does my array not equal another array they look exactly the same and

this is one of the quirky parts of JavaScript you'll Hear that a lot but um I'm not going to get into why these are not equal and actually how to compare two different arrays um using JavaScript it's just too complex for what we're talking about but just know you cannot compare everything and the same goes for objects so if we said my object triple equals my object it's going to equal true because we're comparing the same exact object but if we say another object and we make that equal to the same exact one so property

One is going to be equal to some value and then Property 2 is going to be equal to 20 so this is the same exact object that we had up top but this time if we say my object triple equals another object we're going to get false and you might be wondering well maybe this is just because we're using triple equals well that's not the case even if we used my array double equals another array it's still going to be false and if we use my object double equals Another object it will also be false

so you cannot compare with these comparison operators arrays and objects you actually have to use a different library in a lot of cases and a lot of developers turn to a library called Low Dash so if we uh just type in low Dash into the browser you'll you'll see that this is a utility library that basically provides you with a bunch of different methods that you can use to um do a bunch of common JavaScript operations That would otherwise take you um writing a good amount of code to do but again this is way too

complex for what we're doing right now so we're going to go back and keep going with our discussion on operators so we've gotten through the bulk of these comparison operators the hardest ones are done now we just have to talk about numeric comparison operators and these will not come as a surprise we have the greater than less than greater or equal to and less than Or equal to operators and you can see how these work uh 40 is greater than 20 that's true uh 20 is less than 40 that's also true uh 20 is less

than or equal to 20 that is true and 20 is greater than or equal to 20 so you can see how these uh all work they're pretty common and if you took any sort of math class you'll know exactly how these work now the final operator that falls into this comparison operator category is something called the Turner operator and That is spelled let's see if I can spell this tary is what I'm saying here and this tary operator is going to look like this so we'll say we want to assign a result variable and we

want to assign this equal to the following expression so we'll say 20 triple equals 20 we'll add a little question mark and then we'll say values match and then we'll add a colon and we'll say values do not match and we'll press enter and you're going to see that The result is values match so this is a very confusing expression to look at at first glance but you will get used to this this is something that a lot of programmers really like some of them do not like it because they think it makes it more

complicated um we haven't talked about conditionals yet but I think you'll be able to understand this a little bit so I'm going to try to explain it real quick this this expression right up here is going to be Functionally equivalent to the following expression so we'll say if 20 triple equals 20 then we'll say um return or actually no we need to redo this real quick we need to First say uh or declare a variable so we'll say result variable and we don't need to assign a value to it yet we'll say if 20 triple

equals 20 then we want to assign the result variable equal to values match and if it does not equal so else Then our result variable is going to be equal to values do not match if I can spell right okay so when we press enter it's going to say that it evaluated to values match just like it showed up here when we printed the result and if we type out result variable you can see that it has been assigned that value so I wanted to show you this even though we haven't gone through the if

else statements yet the conditionals um but I think it's fairly Intuitive to understand we're saying if this expression evaluates to true then I want to assign the variable to what is after this question mark or the values match otherwise this lse statement which is going to be substituted by the colon we want to assign it to values do not match so in other words this question mark is kind of like the If part and this colon is kind of like the else part and this uh everything left of the question mark is going to be

the Expression that we're actually evalu Val ating and remember this is where it gets you know this is where it's kind of confusing when you're first starting out remember we have to keep the right side and the left side separate in our head so we're looking at this equal sign what is to the left side of the equal sign well that is the result variable now what is to the right side of the equal sign well that's everything here so this entire expression is to the right side And when JavaScript looks at this the first

thing it does is it says what's on the right side and furthermore how do I evaluate that and then it uses the rules of this tary operator to say Okay first I want to look at 20 triple equals 20 what does that resolve to well that resolves to true for reasons we discussed before and therefore I'm going to grab this value right here now if it would have resolve to false then it would say okay I don't want this I Actually want uh this one over here and then once it's found that answer it's done

all of this work on the right side it's come to a single answer which is the value values match now it's going to assign that to the result variable so you have to be very clear with yourself whether we're talking about the right side which could be a really long expression or the left side which is the target variable that we're assigning the end result of the right side too we are Finally done with the comparison operators I know I know this took up most of the video but they are very important and you'll see

why once you start writing a good amount of code you're going to use them a ton now the last type of operator is what we call a logical operator and there's only three of them we have this uh double and sign we have the double pipe sign and then we have the exclamation point now the exclamation point is kind of the same as What we talked about earlier with this exclamation equals but it's kind of going to function in a different way using it as a logical operator we'll start with the and sign and basically

all this is doing is it's saying it's looking at two different Expressions so 20 uh triple equals 20 and then we put the and sign and now we can say 10 triple equal 10 and what it's saying is okay on the left side we have this expression 20 equal 20 which evaluates To true and then in order for the entire expression so this whole line in order for this to be true both sides have to evaluate to true so in this case we get true but we could also say 12 and in this case it's

going to be false because the left side does equal true but in order for the entire expression to be true both sides have to be true and you can see on the right side these are not equal so we get false now the or operator if we did the same example and We said 20 triple equals 20 and then we use these double pipes this is basically or and now we can say 10 triple equal 12 and it's going to be equal to true because it's saying this entire expression is going to be equal to

true if one of them is equal to true so in this case the right side is equal to true and that's all that we need for this to work now if we tried to write this expression where both sides are actually false I actually did that wrong There we only have one pipe in there somehow so we'll say 20 triple equals 18 double pipes 10 triple equal 12 both of these are false so it's going to be false now the last one that we're talking about let me clear the screen is going to be this

exclamation point what the exclamation point does is basically reverses everything so generally we're going to be talking about a Boolean value here so let's say that we have an expression 20 triple equals 20 which Evaluates to True obviously if we put some parentheses around this and then we um it still equals true but then we put an exclamation at the beginning of that statement it's going to reverse it to false now it's important to note you cannot put this at the end that's not valid you have to put it at the beginning of the expression

that you're trying to reverse so that's what this exclamation point does and it's a little bit different than if we were to put in The exclamation and then the double equals um that does a slightly different thing as we talked about earlier in the video so just to show you a practical example of how you might use one of these um this is a pretty common one that I've seen and I've used in my apps and we're not going to actually be writing the code that I would write in an app but you'll kind of

get the point so we'll have a variable that says is user logged in and we'll set set it Equal to true so our user is going to be logged in in this case and then we'll say does user have permission and we'll say false on this one so it might be a pretty common thing to see if we were to uh check both of these values to see whether a user can per perform a specific action in an app so what we might do is we'll say uh can user perform action and then we'll set

that equal to is user logged in and does user have permissions and in this Case if we were to evaluate this expression on the right side of this equal sign the is user logged in is true but this does have permissions is false so this entire expression resolves to false so in many cases in our apps we might say if can user perform action or something like that then we can allow them to perform the action so that's just a a practical example of how we might use these operators in the real world and the

Final part of this video before we get to the actual challenges that I'm going to give you is going to be combining all of these operators and this is where this concept of an expression really comes to life so I'm going to put a pretty complex expression on the screen here and we're going to walk through how it's actually working so we'll we'll say result is equal to uh exclamation point we're going to put a couple parentheses here say 40 / 20 equal 2 and then we'll say um something like I don't know true and

then we'll say on the right side um try to make this clear we'll say or and then put another parentheses yes triple equals to no and when we evaluate this expression we're going to see that it equals false and this is actually a totally valid uh JavaScript expression um although it's very confusing to look at but if we take this step by step I think you'll Understand how we can combine all these operators into a single expression now I will say before we get into this you generally are not going to be writing something this

complex if you're writing something that is this confusing to read then you could probably break it out into several steps and it's not a sign of intelligence when you're trying to make it so complicated like this you want to be as simple as possible and in many cases um you're going to write more Lines of code in order to improve readability of your code so this code is not readable this is something that would take someone you know let's say that I wrote this code and you had to go review this code this is going

to take you you know at least 20 seconds to figure out what it's doing and in most cases we want it so that you can see exactly what the code is doing as quickly as possible nevertheless we can see how this evaluates by breaking it Out into different steps so I'm going to just store each step in a variable and then we'll kind of work our way down to understanding the entire expression so if you remember we're talking about the right side versus the left side left side is the variable right side is the entire

expression so we'll say say step one is going to be equal to 40 / 20 so we'll start right here so we'll save that into step one now the second step is we take this 40 divid 20 and use the Equality operator to set it equal to two so we'll say step two is going to be equal to Step One triple equals 2 okay so now we can check this at this point we're equal to True right now and the next step is going to be taking this entire expression that we just uh basically combined

into step two and adding the and sign in putting it to true so we're going to say um conep 3 is going to be equal to step two double and true and you can guess that since we Already had it equal to True right here and we're doing another Boolean value of true it's going to equal true so step three is actually equal to True uh true right now and you can see that right there and now we want to combine this with um we've we've already done this entire expression here so maybe we want

to store this in a variable so we'll say step uh four is going to be equal to yes triple equals no which is Obviously going to be equal to false so that's our step four so now let's take our step three right here and our step four and combine them uh using these double pipes so we'll say step five is equal to step three double pipes and then step four and that's going to be equal to let's see step five will be equal to True um I'll try to scroll up here so we've got this

one um this one and this entire expression evaluated so the last thing We need to do is just add the um exclamation point at the beginning of everything so all we have to do here is say step six is going to be equal to not step five and step six is going to be equal to false and if you see up here the total result of this entire expression is equal to false and all of these steps that we did down here were just intermediary steps that we used to kind of break out this entire

expression and figure out what the result variable Was ultimately assigned so in summary an expression on the right side of the equal sign can be as complex as you want it to be and furthermore it can actually be something other than just what we've been working with um we've been just looking at um simple variables like numbers and strings and and simple comparisons but it can be much more complex than that so you could even have something like um a function evaluating to a specific variable so let me refresh The page and we're going to

set result equal to a function and we haven't covered this yet but I just want to demonstrate uh what I'm talking about here so in this case we're going to return 20 from that function so what's happening here is again we have to be very conscious of the left side versus the right side so left side is going to be our result variable and right side is going to be the entire function so in this case We're going to set um the right side equal to a function that returns a value of 20 now this

is not going to automatically execute itself so we have to actually assign it uh using something called an immediately invoked function and once we do that we're going to actually be assigning that result variable on the left equal to whatever this function here returns when it is evaluated so you can see result is equal to 20 and this kind of just demonstrates For us how the right side of this equal sign can be infinitely complex and that's why it's so important to understand um that an expression should be solved in individual steps um that's how

the computer looks at it and that's how I would recommend you to look at it when you're trying to figure out what it's going to set that variable too like I've been saying throughout this series um watching these videos alone is not going to do it for you you have to Actually practice so let's jump into some of the challenges that I've put together for this video and I'll say that as we get better writing code and as we go through all of the different parts of JavaScript not just variables and operators but you know

getting into loops and functions and conditionals and basically learning how to write code we're going to actually migrate ourselves over to to a site called Cod Wars so if you go over to uh Cod Wars.com you're going to see this is actually a pretty popular site for um doing different programming challenges and I'm going to actually start uh recommending challenges from this code War site and we can basically work on them out of a profile and you know you can kind of go through these challenges on your own but for now we're not quite Advanced

enough to look at that so I'm going to pop up a few challenges on your screen and then I'm going to walk you through each of them and how we go about solving them if you want to get the most out of this I recommend trying them on your own first so pause the video for each of them and try to work them out in your browser uh or your Dev tools console and then once you figured them out I'll kind of go through the explanation all right so this is the first Challenge and the

question is why does this code not work and the answer is going to be Because of the const Declaration that we've made at the beginning of the code so if you remember when using const we cannot reassign the value so if we say const number variable equals 0 and then we try to reassign this using our increment operator it's going to give us an error but if we go ahead and change that to let instead of const so we'll say let number variable equals 0 and then we can say number variable Plus+ number variable Plus+

and then do it one More time we're going to be able to do that and then in the end if we console.log number variable it's going to be equal to three so that is the solution to the first challenge challenge number two so this one is a little bit of a trick question um these are not going to evaluate to the same value I think you could probably figure that out but the second part of this question is um which one of these would you recommend and the answer To that I would not recommend either

of these blocks of code so the first one is going to um evaluate to false because we're using triple equals while the second one is going to to evaluate to true because we're using double equals but in this case the problem is not either block of code but um the variables that we're declaring so this is how I would actually write this rather than what we have in both of those code blocks so we'll say first Number equals 20 we'll say the second number also equals 20 and instead of the string value let's just put

a number in there that's the real solution right there and then from there we can Define our result which will be equal to first number triple equals second number because we always want to favor triple equals be explicit when we can and then now we can print out the result which is going to be equal to true so that's how I'd solv that problem Challenge number Three now this one is a little bit trickier but I think you probably could have gotten it um let's refresh this screen real quick now the question was what does

the expression five resolve to and the answer to that is that expression five let me make sure I get this right here um answer five is going to resolve to false and this is why it's going to do that so let's just walk through each of the lines and see what they resolve to so we have 100 we'll Save them in the variables so expression one is 100 modulus 50 and if you remember 100 / 50 is 2 with no remainder so we should get zero for this so expression one should be equal to zero

you'll see that here now Expression 2 is going to be equal to 100 / 50 which does equal 2 so that's going to be equal to two then Expression 3 is going to be equal to expression 1 is less than expression two and in this case expression one was equal to zero And expression two should be equal to two so this expression right here should evaluate to true so let's press enter on that and see if that's the case uh we'll say expression three that equals true as we would expect now expression 4 is going

to be equal to expression three we'll use the and symbol and we'll say 300 + 5 triple equals 305 so this is a little bit trickier how we look at this uh using the order of operations is we First first look at this one on the right so we'll say 300 + 5 what does that equal that equals 305 and then so we replace this basically and say 305 is triple equals to 305 which is going to be equal to true so then we kind of replace that with true and expression three is true so

they're both true and expression four is going to result in true and then finally we're just going to reverse that so expression five is going To be equal to exclamation or the reverse of expression 4 so it's going to flip this true to false and we're going to get false for the final answer and if you tried to solve um the problem of getting this all into one expression I'm going to just copy this into the console and just show you how it works um you can see that we get false just like we just

looked at um and this is how I would combine this into a single expression remember the order of Operations matters here moving on to challenge number four this is actually a slight review of last time combined with the concepts that we learned in this video so we're looking at an object and an array so we'll say my object I'm just going to write this out so that we have something to work with and we'll say prop one is equal to First value and then prop two is going to be equal to 20 so there's your

object and then your array so my Array here is going to be equal to 40 50 and 2 now if you remember from last time the way that we access properties from objects and arrays is with DOT notation and um bracket notation respectively so if we wanted to say get this value of 20 from this object all we would do is say my object. prop 2 you could also use the bracket notation with a string um for prop two and that will give you 20 but I would always Prefer using this dot notation so we'll

just get it this way all right so if we wanted to get one of the values from this array say we wanted to get 50 we would have to use bracket notation and if you remember an array is zero indexed so this is index zero this is index one and this is index 2 so if we wanted to get that 50 all we would say is my array bracket and then we want to pass in one because the index of 50 is one and that will give us that value of 50 so knowing That this

problem gets pretty easy so we said in our result array we are saying my object. propop 2 triple equals and then my array 0 divided by my array 2 so if you remember um we'll we'll store that in the result variable for now but you just have to basically break this down into different pieces so what is my object. prop 2 well that equals 20 Now what is my array uh with the index of zero well that is going to be equal to 40 and then What is my array with the index of two that

is going to be equal to two if I can type it out here so we got two so basically what this expression is is it's saying 20 triple equals 40 / 2 and if we look at that expression that's going to resolve to true because 40 divid 2 is 20 set equal to 20 is true so if you break it down into pieces it's not all that hard now challenge 5 is a little bit of a tough one but we're going to use the same Method that we did in challenge 4 to solve it so

I'm going to actually just copy in the object and the array or basically just all the code here so we'll we'll copy this in we'll resolve it and let's uh open this up and we need to print the result which is going to be true now we have to walk through each step of this one by one to really understand it so the first thing that we have to remember is how to access different properties so if we wanted to Access the quantity of nested object one all we would have to do is my object.

nested object one. quantity and and that's going to give us a value of five down here if we were to evaluate that expression now the only tricky part here is this line right here we're actually putting the array um or we're assigning each of these nested objects as the values of this array so to access this nested object number two we could do one of two things we could Say my object nested object 2 and then we might say the price which is going to give us 150 now since we put this into our array

here we can also ACC access it like this so we can say my array and then we would say um we want the nested object number two which is the uh index one so this is index zero this is index one so we're going to grab index one and you can see it's really nice in the console you'll see exactly what that evaluates to and then from there we can Use notation to get the different uh attributes from it so the price which is 150 so knowing this it's pretty easy to evaluate this expression so

if we looked at my array Z uh. price which is the first part of our little expression this is going to evaluate to 100 um then we can say my array 0. quantity which is going to be five and then in the second part of this uh expression we have the second object in The array and we're just getting the price and the quantity so really what this result variable is saying is it's saying we want to look at 100 * 5 and compare that we'll say that's greater than and then we'll say 150 *

2 and what this evaluates to is true because 100 * 5 is 500 which is greater than 150 * 2 which is going to be 300 so that's going to give you the result variable and you can see how if you just break it down into little steps You'll be able to figure out what the expression equals and you can actually a access um nested objects and um array properties um by mixing them together in today's video like I said we're talking about functions conditionals and loop and in the previous videos in lessons three and

four we talked about um JavaScript variables how to we declare and assign a variable and then also JavaScript Expressions which includes um All of the different operators whether those be arithmetic operators assignment operators logical operators Etc that's what we're going to do in this video we're going to cover a lot of ground here um and then we're going to supplement it with a ton of practice problems so I'm making a video where we're going to have 25 JavaScript challenges and I'm going to walk you through them and kind of explain how I'm going about solving

them what I'm Thinking about and we're going to use the topics that we covered within this video and the previous lessons to kind of uh solve these problems and we'll fill in a lot of the gaps that are not covered in the main content all right let's jump into conditionals in JavaScript so we've actually covered this already um just briefly in previous lessons we haven't talked about how it works though so let me show you a basic conditional Statement we're going to say if some string so we're talking about a string data type is triple

equals to so we're comparing value and data type uh another string so these are obviously not going to be equal because although the uh data type is the same the value is not if that is the case we're going to console.log the strings are equal and then if it's not we're going to say else and we're going to Console.log the strings are not equal all right so that is our basic conditional statement when I press enter you're going to see that the strings are not equal so it basically went into the second code path that's

what we kind of call it is the the different paths that the code can take so we're saying if this is equal then I want to execute the code code Within These two brackets otherwise so else we're going to execute the code between these two brackets so There's a couple things I want to point out here just to connect the dots for the previous lesson that we talked about so let's just get the basic structure of an if then statement we have if and then else and this is basically what we're looking at and obviously

there's indentation uh line breaks all that kind of stuff that's just format adding but this is the basic structure so in this parentheses we have a JavaScript expression and then we have some Brackets that contains the code for the truthy uh code path so if that expression evaluates to true and then we have a brackets where we can put our code for the falsy path um so if the expression is false and we've previously covered expressions in JavaScript um in terms of variables so we might have said something like uh I don't know say 20

triple equals 20 and um 50 triple equals 50 so obviously both of these are uh going to evaluate to true and then you Combine it with the and operator and the whole expression evaluates to true and then we assign that True Value to the variable right here now that's all we've looked at um in Prior videos but you can actually take this expression which is right of the equal sign and you can drop it into this uh parentheses for the conditional statement so just a different way to use an expression you'll see it a lot

and it's um something that I think is worth pointing Out I'm going to drop a couple of different ways that we can write conditionals on the screen so it's a lot of code we're going to walk through each of these um so let's open this up so I've declared a couple of variables up top so we have a number two number variables 20 and 10 and then a JavaScript expression which is basically saying is the first number greater than the second number which is going to result in true and then we've put these In some

different conditionals so the ba most basic one that we can do is going to be uh a basic if statement so you don't even need to have an else statement um at the end of this you can just use if and this is actually really useful you know you'll see as you start coding when this comes into play so we're saying if this JavaScript expression is equal to true that's what we mean by just putting it in there so usually you're you know kind of getting Used to seeing like an equal sign put in an

expression well if we're uh looking at a Boolean all we have to do is drop it in the parenthesis and it's going going to evaluate to either true or false so since this does equal to true we would expect that this console.log statement will be reached and it'll print this expression is true and if you come down the first uh console log has been printed right here now moving on to the next one we have an if else Statement I'm going to skip over this because we just covered it basically if JS expression is true

um console.log this otherwise this and then finally we can um include other conditions so not only can we do an if else statement we can also add some other uh code paths for our code to to go down so if this is equal to true we want to console.log the expression is true else if the first number is greater than zero so basically what we're saying here is let me sorry I Closed that out there but if the JS expression is false we're going to skip this first uh block of code and then we're going

to go to the next condition so we know if we get to the next condition that first one is going to be false so we know JS expression is false and then we're checking if the first number is greater than zero if that is the case then we're going to say the expression is false and the first number is greater than zero but if it is false So if the expression is false and the first number is uh less than or equal to zero we're going to fall into the else statement which is basically a

catch all for any other condition that we might have so the expression is false in first number Z or less so in this case obviously the variable is true so we uh go down this first code path and you see this expression is true down here or I guess this yeah the expression is true and then finally the last one that we Have is just a formatting uh difference so we have an if statement but we've put it all on one line and this is just to demonstrate that we don't have to format it um

you know all pretty like we did up here although it's helps for code readability and in other languages such as python the indentation and formatting actually does matter for running your code but in JavaScript it doesn't it's more of uh just a readability thing the last type of conditional that you might See is called a switch case statement and this is equivalent um in many ways to the if else if else if else if else uh type conditional so if you have a lot of conditions that you're testing then a switch case statement might be

appropriate for you so let me paste um some code on the screen again and we're going to execute this um the output is the color is blue and we'll see exactly why in a second so first I put an array up here and I put the indexes or indices On top so the first one is an index of 0er 1 2 3 4 and then we have to get a random index so this is just uh some code that I wrote you don't have to understand this but um we're basically going to get a random

number between 0o and four and assign it to this random index variable so just think of this random index variable as carrying any value between 0 and four which happens to correspond with the indexes of the colors array then we're going to Grab a random color from the array um so remember we can get um something from an array by passing in the index value using bracket notation and since random index here um carries one of those values we can pass that in to the colors array so this the right side expression is going to

evaluate to one of these colors but we don't know which one because we have a random index being generated then we come down here and we can write some basic conditionals so if The random color so again this is going to be uh one of the array values if it's orange we're going to say the color is orange and then you can kind of look down here and just see it's doing the same thing for all of the different conditions if we get to the last lse statement there was no color found but that's never

going to happen because we uh know that we have an index between 0 and four in this case the color turned out to be blue but it was a random color Random choice we didn't know that as the developer before it happened now the reason that I bring this up is because this if else if statement where we have a lot of else ifs in here it gets very confusing and it's tough to read sometimes so this is why we might want something like a switch case statement and I'll show you the same code written

in the switch case for format oh and by the way if you're tired of getting uh into this browser console um remember You just rightclick inspect element to get here um I promise you we're going to get to an actual code editor soon but I just want to keep this um focused on JavaScript we're not getting into setting up a local development environment yet so anyways here is that switch case statement um same thing up here same colors array same random index same random color obviously since it's random it might not be blue which I

think is the one we last saw so let's Press enter it did turn out to be blue um might have been a coincidence there but basically what we're doing is everything's the same up here but we come down to the switch statement and what we're saying is that we have a switch statement and we put the expression that we're evaluating in the parentheses so similar to the if then or uh or the if else statement um we can put in that condition into the parentheses and then we come into these Little uh brackets which is

going to contain a bunch of cases so if the case is orange or in other words if the random color variable evaluates to the value of orange then we're going to hit this code right here and when we hit this code sorry about that when we hit this code the color is orange it's going to print that to the console and then this break statement is a special statement that we can write to basically say okay I found the correct case now Stop executing the code entirely so if we were to get the random color

orange it's going to print it to the console and then it's going to break and then basically all of the rest of this code down here will never be reached because we broke out of that statement so that's what it's doing it's basically just going um down the the different cases it's saying okay what is random color equal does it equal orange no okay does it equal green no does it equal yellow No purple no and then we finally get to Blue which it does equal and so it's going to console log that and then

break out of the uh switch case statement now there's this last condition down here which is called default and this is basically the catchall this is the else statement uh in our conditional and it's saying if random color does not evaluate to any of these cases let's go to the default value which we're just going to say no color is Found so that is the basic switch case statement let me write this uh Let me refresh and I'm going to write this in a little bit simpler format so we have switch and then here we

have case um or the different cases and then the break statements so this is obviously not valid but we have a switch then we put our condition in here which can be any JavaScript expression and then between the brackets we put all the different cases so switch state or switch case Statements how often are you going to use them well in my uh experience I haven't used them a ton usually an if statement or an if else statement is going to be sufficient and often times if you start using too many uh switch case statements

there's that's kind of an indication that you may not be writing the most efficient code but that's to worry about later uh right now just want you to kind of be aware of this understand how it works and uh just Be familiar when you look it up and try to use it for the first time all right continuing on lesson five so conditionals functions and Loops we're going to talk about loops right now and looping in JavaScript is a very effective concept and you will use it all the time so you really have to understand

this um there's not a whole lot to it but I think the hardest thing is understanding why we need Loops in the first place as we go through coding Challenges uh a little bit later and you do more coding challenges just in general um you're going to use Loops a lot but it's generally just to solve some sort of challenge so you often will wonder to yourself well why do we actually need this in the real world and the reason um at least in my opinion the reason we have loops um or the most common

use case of a loop is to iterate or Loop over a set of resources so when we're talking about something called a Resource um that's basically saying that uh we have a bunch of uh pieces of data that are very similar to each other so often stored in a database and that might include something like um if you have a Blog it might be a blog post um I'm trying to think of of another thing if you're running an app you have a bunch of users and there's a lot of different concepts that you can

um replicate but basically resources is a list of similar types of data and when We have those it's more efficient to actually Loop over those than to manually print them out so again if we have an array something like this so I'll just say array and then we have 20 40 60 something like this we can go ahead and print to the console using this bracket bracket notation so array of zero and then array index one and array index 2 so that's how we can manually print each value of the array but when you have

a thousand uh Different blog posts that you want to render onto a web page it's not going to be efficient enough for you to just go into your code and start typing out each and every index not only that but once we add new blog posts to our our database we're going to have to go in and change the code which is going to be extremely cumbersome it's not recommended you you just you won't get away with that in software engineering you have to do things more efficiently And that is when Loops come in to

demonstrate this let's take a look at uh maybe a sample array of blog post so this is not something that you have seen before in uh my tutorial videos because we've been writing arrays on a single line but AR Rays just like you know conditionals and anything else in JavaScript can be indented and broken onto different lines this is all just a formatting uh thing so basically what we're doing here is we have three Different objects so here's one object then we have another object and a third and you can see these objects are very

similar looking in each of them we have a title property an author property uh publish date and content now obviously the values of these properties is going to be a little bit different for each of the objects but you can see that you know you can already start to infer that if We're looping over this array of blog post we can use the fact that they have Similar properties and let me just show you something really quickly that we could do using a loop now I'm not going to explain how the loop Works yet but

just to show you what I'm talking about so let me collapse this um so that we have room here and I'm going to paste in this line of code this is what we call a loop and there are several ways to write a loop but again I'm not going to cover that quite yet but what you can see is that instead of hardcoding the index uh The indices that we are passing in to our blog post array so in other words we want to retrieve a certain uh blogpost uh object from that array we would

need an index to do that instead of hardcoding it we're using this variable called I so all I'm doing with the first four variables here is I'm grabbing a specific object from this array so I'm only grabbing one of them and then I'm taking all of the properties and grabbing the value of those properties And assigning it to each variable then I'm printing the variables below so when I press enter you're going to see it Loops through all of our blog post pretty much instantaneously or at least it seems like it to our our human

brain um and it's going to Loop through and it's going to print uh each of the values for each of the blog posts so this is our first one what is Javascript it's by me December 20th 2020 and some post content here and you can see that That is the first object in that array and then we go to how do arrays work and then how long does it take to learn coding so you can see that here and then finally here at the bottom so we have looped through every blog post in that array

now let me talk about how these arrays actually work we're going to go into a little bit simpler examples so that you can really isolate these Concepts in your head so let me write a basic Loop in JavaScript so we're going to let I equals z we're going to go until I is uh equal to 100 that's just an arbitrary number that we're coming up with you can obviously pass a variable in place of this like we did with that first example and then we're going to to increment the value of I so remember this

from the last um lesson this is basically the same thing I'm going to come out here just for a second that's the same thing as saying I equal I + 1 so basically Saying if I is zero then we're going to increment it by one and then we're going to put some brackets here and press enter and so everything within these brackets here is going to be considered one iteration of this Loop so the code Within These brackets is going to be executed as many times as we do this Loop in this case we've set

the uh stop condition at 100 so let's walk through each of these and kind of connect the dots between the previous lessons that We've talked about in this series and I think you're going to really understand this so the first thing that we see here is we declare this for Loop using the four keyword so this is similar to how we have an if statement so we say if and then we put parentheses in some brackets now we're just saying for now in the parentheses is going to be the loop conditions the first one is

going to be the variable that We're looping over so let I equals z and notice this semicolon To end that statement we're just starting I at a a value of zero and the reason that we start it at a value of zero is because arrays start at an index of zero so it makes sense that if for looping through our array we want to start at the first value in that array which has an index of zero you might also ask why do we choose I what is I well I is just a variable we

could put in anything that we want we could say my iterator or something like that and then All we have to do is replace each occurrence of that with our new variable so we can choose whatever variable name we want and if you see this entire expression this is very similar to or it's the exact same thing that we use to declare a variable in JavaScript now the one thing you'll notice is that we're using the let keyword and that is really important it's important because this iterator variable so I'm going to flip this back

to I really quickly because This is kind of like an industry standard a lot of uh developers will just use this as a convention uh when looping so we're going to use the let keyword because I is going to be reassigned throughout the loop as you can see at the end we talked about this is going to add one to I after each iteration of the loop so that's basically the same thing as reassigning it and if you remember from the previous lesson when we try to use This increment operator on a variable that was

declared with the const keyword it doesn't work it throws an air so that's why we need the let keyword in here and then finally we have this uh code in the middle which is probably the most difficult to understand this is the stop condition so basically what we're saying here is we want to go through this Loop we want to do as many Loops until I equals a value of 100 so each time we go through the loop it's going To increment by one so basically since we're starting at zero and we're saying less than

we're going to go through 100 iterations of this Loop so all I'm going to do here is just demonstrate this I want to console.log the value of I and you're going to see when I press enter it's just going to go um 0 to 99 so we press enter and we got 99 here at the bottom and we started at zero so that's 100 iterations remember starting at zero ending at 99 and the significance of This is you know we printed console.log we just printed a number here but you can do all sorts of things

um like we saw with the blog post array you can Loop through the blog post array and um assign values and all that kind of stuff to finish this topic off let's just go through a super simple example so let's make an array uh we'll call an ARR for array and then we're going to put in um a couple different values here so I'm just going to put some random strings in Here these are string values nothing of significance um you know just put whatever we want and then let's put in some numbers and then

a couple more strings and what we're going to do here is combine our uh knowledge of conditionals that we looked at in the previous video um and looping to do an example so let's write our Loop here we'll say I equals z and then we want to go Until um the array is complete complete so you'll use this quite often where you're going to look at the array you're looping over and you're going to grab the length of the array um because that basically means we're going to Loop until there's nothing left to Loop through

so that's a very common thing that you'll see within arrays and then of course our increment operator and then we'll jump into our Loop and then in this case we want to set a Conditional so we're going to say if the type of um array and then we'll pass in I so remember this I is going to be incrementing um each Loop of the uh or each iteration of this Loop so it starts at zero and then it goes 1 2 3 4 5 all the way up to the length of this array so when

we pass in I we're basically saying okay I want to grab whatever's in this array at the index that I is current currently at so it'll start with Zero and we'll grab this first value then it'll go to one and we'll grab this value so on and so forth so we're saying the type of the array value so basically this is equivalent uh for the first iteration of this array if we copy this down here um the first iteration is basically going to be saying type of this value and of course this is going to

return string as we've seen in in Prior videos while the numbers are going to return the type of number so let's uh Bring this back to what we had previously so we grab the array variable and we pass in I and what we're going to say is if the type of the array and I actually didn't even put a condition in here if it equals number so that's what it will return if we have one of these numbers then I want to console.log the array at that index so BAS basically what this uh loop is

going to do is it's going to Loop through that entire array and it's going to look at The value see if it's a number and if it is it's going to print it to the console in other words we're going to skip all of those gibberish strings that we put in there so let's press enter and you can see that we have only the numbers printing so this is just a super simple example that demonstrates how we can use an array to quickly iterate over um or use a loop sorry to iterate over an array

in this part of lesson five we're talking about functions and we finally Get to do something fun with JavaScript in the previous videos previous lessons we've been talking about the uh rather mundane parts of JavaScript things that you can't really do much with but when we combine all of those concepts with functions we have Limitless possibilities that we can um have with JavaScript of course there's other things but like I said in this video series series I'm taking you through the most important parts we're not going Into the super fine details yet we're going to

do that through practice problems and through real world practice we're going to fill in those gaps there so again we're talking about functions in this video and the first way that I want to start this out is by writing out a basic function so here is how we write a function in JavaScript we're going to say my function so if you notice this is kind of similar to what we've been doing with The if uh statements the conditionals and the loops we have some sort of keyword at the beginning then we have so well this

is different we have a name of the function and then we have a parentheses so it's kind of similar syntax and then we have these uh brackets here where our code will go so with the function we have to give it a name here and in the parentheses we don't actually have to put anything in there we'll talk about that in just a Second let's go ahead and print something hello world this is my first function we're going to end that statement with the semicolon and press enter and what you'll notice is that it doesn't

do anything and this is different from what we've talked about with some of the previous Concepts um where everything happens at once so remember if we you know declare a variable set it equal to 20 something like that when we press enter the Variable is declared and it's assigned at the same time and with functions what's happening is we break out those steps into two steps so up here what we've done is we've declared the function but what we haven't done is called this function or what we call invoked this function those are kind of

synonymous terms in order to do that we just grab the name of the function which as you can see similar to this variable this my function uh word right here this Is just a variable that the computer remembers so since the computer remembers it since we already declared it it's going to uh recognize it when we type it out so if we said type of my function it's going to give us function because it remembers what that is and to execute this so I'm kind of using all these different words to execute a function to

call a function and to invoke a function uh for our purposes they are all the same thing So anyways we call the function using these two parentheses right here and a semicolon and when we press enter it's going to say hello world this is my first function because it ran the code within the function so just to review with functions you first have to declare it and then you have to call invoke or execute it all the same kind of terminology now there is one way that we can uh declare and call call the function

in the same step and although You're not going to use these all that often I do want to show you them just so that you have an awareness of them and what these are called is an immediately invoked function so let's say that we write um another function so another function here and we enter down we say console.log hello now if we pressed enter this is going to just declare it but all we have to do is wrap this entire function in some parentheses and then put our parentheses that we used to Call it at

the end semicolon and you're going to get this function to declare and execute um at the same time obviously the computer does it in different steps but for our purposes it's happening all at once this is what we call an immediately invoked function and like I said you're not going to use this a ton but just be aware of it you might it pop up in some stack Overflow answers or you might even use it at some point so we got a basic function but It's not useful like what are you going to do with

the function that we just wrote obviously there's more to it and the thing that I want to introduce next is the concept of parameters and arguments and what I would say with these two terms is they're kind of uh two sides of the same coin and once you get into more advanced programming uh programmers are probably going to be using these parameters and arguments uh terms interchangeably because like I Said they're two sides of the same coin but for our purposes we're going to distinguish between these so let's write a function we'll say my function

again and we'll enter down onto a new line now what I want to do to add into this parentheses is going to be something called a parameter now these parameters are basically saying uh to the computer hey computer um I'm going to pass in uh some sort of values into this function so be ready for them so basically what I'm going to say to this function is hey I'm going to pass in some number and then I'm going to pass in some string value now obviously with JavaScript it's a dynamically typed language so you don't

have to say like some number or some string this is just an example maybe we could even say something like Pam one and Pam 2 so let's just go with that these are arbitrary names that we have and then what I want to do is console. log Pam one and then we'll go On to a new line oh I accidentally messed that up let me go ahead and try this once more oh we really messed up here okay one second let's refresh the browser clear it out and then we need to enter to a new

line and console.log pram 2 all right so what we're doing here is we're taking the value of Pam 1 and the value of Pam 2 which in this case within the function these are variables these are variables that we can retrieve the value from and Print out so we're going to declare that function well as you can see uh it's a little bit later in the day here so I had to take a break but getting back to what we were talking talking about with these parameters so the question is what are they equal to

what is pram 1 and pram 2 equal to well the answer to that is we don't know yet and we don't know because we haven't assigned them as what we call arguments so we know that this is a declared function but we still have To call or invoke it and to do that you know how to do that you just put in the little parentheses at the end and you'd press enter now if we just press enter right now it's going to return undefined because we didn't pass in any parameters so when this code tries

to execute and it tries to reference these parameter variables there's no value to grab because we never gave it a value so to answer the question of what they represent well they represent the Arguments that you pass into the function so if we have this function we can pass in say a number and then some string of some sort and and now these are what we call the arguments now like I said arguments and parameters are kind of the you know two sides of the same coin but in this case whatever we pass in the

values we pass in are called the arguments and then the initial variables that we were declaring would be the parameters so 20 is going to correspond To Pam one and then some string is going to correspond to Pam 2 so we should get uh 20 and then some string printed out when we run this function don't worry about this little undefined here that's just kind of part of the console we got our 20 and some string printed in order according to the function that we wrote so that's just a basic overview of uh arguments and

parameters now the next thing that we're going to talk about is a brief introduction to Scopes in JavaScript so when I say scope what I'm generally referring to is where these variables are available in the code so in other words we notice that Pam 1 and Pam 2 were used within this function but if we were to just try to print Pam one into the console it's not going to work and the reason is Pam 1 is not available in the global scope it's only available in the function scope which is any code that's written

between these two little brackets right here so we pass in these Values but these are only available to the function it's not available to the rest of the code that you're writing in the file or the console that you know you're writing the code in so that's just a basic introduction to Scopes there's a lot to this topic and as I said we're not trying to cover every last detail of JavaScript um that's something that I think you'll have to fill in kind of uh outside of this tutorial and as we do practice problems And

get into some more like real world examples you'll start to understand these Scopes and I'll try to you know Point them out as we go through like I said the you don't know JavaScript series is a great way to get a super deep dive into things um topics like the topic of Scopes but beware it's very complicated and there will be a lot of confusion if you kind of go down that route up until this time I've shown you how to write a function as we see on the Screen right now but there is actually

another way to write a function and let me show you how that's done so let's go ahead and clear this uh this console and we'll create a function just like we are used to creating so no parameters going in there just a basic function and we'll console. log something all right so that's our basic function now another way that we could write this is by assigning it to a variable so so in this case the my Function variable is already defined and it represents a function so we can't use that in our variable declaration but

we can say something like another function and then we want to set that equal to a function so this is just a normal variable and all we have to do is say function define it and we'll console.log another thing all right so we set that equal to another function and if we say type of another function it's going to give us the type Of function now I'm saying this word a lot so I got to slow down here but anyways if we wanted to invoke this function or call it it works the same way that

we were using it before so just like we call my function just like this and it prints out something we can invoke another function the same exact way even though it is a variable now there are a few little uh subtle differences between these two uh ways of writing functions and like I said it Gets into some details that we're not quite ready for and I'm just going to leave out for now it's not and these details are not essential for you to write good code and get it up and running they're more like edge

cases where your code doesn't work and you can't figure out why well it's because of this subtle Nuance so I wouldn't worry about it too much all right so we've got these two different ways the main difference that I want you to Recognize is the fact that this function right here does not have a name this is what we call an anonymous function and the reason we can use an anonymous function is because we are assigning it to a variable so we're giving it a name now up here we just do it all at once

we just give it a name and we're done so if you tried to write a function without a name so something like this you're not going to get it to work because this is an anonymous function And you need to declare some sort of name and you see the syntax there it says function statement requires a name so that is not valid because it's Anonymous you have to assign it to a variable now there is another way to write functions and this is a little bit tricky but I'd like to cover it because you're going

to be using this next type of writing a function a ton so as of 2015 when the es6 standard came out so if you remember back from I think lesson Two we talked about ecmascript standard and um how there's a standards body that basically defines the spec for the JavaScript language well they upgraded that spec in 2015 with es6 and they came out with something called a arrow function so that Arrow function looks like this um so we'll say Arrow function equals and then we'll put some parentheses we'll put an arrow and then write it

just like normal so we'll say I am an arrow Function all right so we press enter and like our other functions we can call it or invoke it the same way so we just press Arrow function with the two parentheses at the end and boom it executes so it's functionally equivalent in a way um again there's some subtle nuances that we're not going to get into but this Arrow function is mainly here so it improves readability and another benefit that it has is it um really helps out with the Scopes of your you Know your

code and specifically the this keyword which we'll get into much later but um it does improve on that that's why they came out with it in the first place so this is a very um different way of writing a function but here's the basic syntax you just have this little parenthesis which is basically here's where you put the parameters then you have this Arrow that's why they call it an arrow function so an equal sign and then a right carot or greater than sign And then you have these two brackets just like you would any

function once again you cannot just use this alone this is kind of similar to that Anonymous function we looked at and you can't just Define a function like this and you know this this won't work because it doesn't have a name so you don't have a name specified um it didn't throw an air like the previous one but you have no way of referencing back to this you don't know how to actually call It because there's no name for it so you have to assign these Anonymous functions and arrow functions to some sort of variable

these Arrow functions or Anonymous functions can also be used in something called a callback but again that's going to be a little bit later down the road all right from now on I'm going to be focusing a lot on these Arrow functions I'm going to be writing them for the most part now obviously if you're defining a function on its own You have to write it you know with the normal syntax so you have to write it with the name and then the parentheses just like this but for a lot of cases we can just

assign it to a variable and I'd like to get you practicing the arrow functions because you're going to use them so much so the next thing that we're going to talk about here here is the concept of return values in functions so far we haven't returned anything from our functions and if we're Writing these so let's say my function save it to a variable and use the arrow function syntax and then we just console.log something all right very simple my function does not actually return anything so if we were to assign a result variable to

it so we're going to say my function and and then we're going to call it so remember this is just uh executing the function we defined above and then it's assigning the result of that function to the Result variable so we press enter and this is just the console.log that was executed as part of the function but if we type out result it's going to give us undefined and the reason is because our function didn't return anything so if we want our function to produce a value we have to put a return statement in there

all right so let's go ahead and do that um return function that's what I'm going to name it here that's just a variable we'll use the arrow Syntax enter down and this time we're going to return a value of 20 and we also could have returned you know some string or we also could have returned a variable so if we wanted to you know make a variable called a and that equals 20 um oh I accidentally uh hit enter there but if we wanted to we could come down here and return a now it's going

to bug out on me because I've already declared it like right here on accident so let's let's refresh the page real Quick so that we can get back into this so um we'll just say my function this time we've got the fat Arrow function enter down we'll Define a variable set it to 20 and then we will return that variable now we could also return like some sort of expression so what if we wanted to return a is greater than 30 which it's not obviously so this would return false so let's just see you know

how these different uh return types affect the function we're just going to Return a which will be 20 and now we want to set that equal to a result variable so we'll get my function we're going to execute it and then assign the result to that result variable and now when we print out the result it's going to equal 20 because it took the result value the function and assigned it to that variable like I said you can um do Expressions here so if we wanted to Define another function we'll just put two at the

end so it's Unique and then We want to say a is less than uh 30 which it is this will return true I'm just going to put a comment there and therefore we would expect that this whole function is going to um evaluate this last expression here and then return it so let's press enter and then we'll say result 2 is equal to my function 2 and then if we get the value it's going to be true so you can see that there's a lot of different things that we can return from a function heck

We could even return a function from a function but that's getting into way too much detail and it's not necessary for what we're trying to do so going to skip that hopefully this gives you a brief overview of return values now the last thing that we have to talk about is is what happens after the return value so let's say that we had I'm going to go ahead and clear the screen um we'll say improper return Function and then we're going to set that equal to our Arrow function and we're going to return 20 or

no let's go ahead and set a variable um I mess this up again it's kind of tough working in the console but we will eventually get to a code editor which is going to be a lot easier on us so let's say my function do this one more time and in this case let's Define a variable so we'll say let um my number equal 20 and then we're going to Return my number now let's enter down onto the next line and then we'll say my number equals 50 all right so we're going to press enter

and it's going to give us an air it says unreachable code after the return statement you won't get this from all like this is just in the console you may not get this error anywhere else but this is giving us a hint that we've done something wrong here but it is still valid so basically what we're saying Here is we're going to run the function it's going to return 20 and that's because we've returned the value before we reassigned it so this is valid code to write but it's it's useless because this last line right

here is never going to be reached no matter what happens it's always going to return beforehand and you'll never return a value of 50 so just know that for the return values whatever happens after it doesn't matter and you pretty much will never have um a Return value before the end of your function so let's say that we have a global variable um we'll just say something like um my number equals 20 all right so we're going to set that in the global scope again Scopes are going to get important here soon so just kind

of keep that in the back of your head now we're going to define a function so we're going to say um let's go ahead and use let because in case I screw up again and we have to reassign it so we're Going to go ahead and say uh my function and we're going to set that equal to an arrow function now we're going to say if my number so this kind of seems like going against what I told you earlier about Scopes so if there's a parameter that has a function scope it cannot be accessed

at the global level but if you have a global variable you can access it from within a function so it goes one way but not the other when it when it Comes to Scopes so since this is in a it's in technically a higher scope than the function has it the function can actually recognize what this variable is equal to so we're going to say if my number and then we're going to enter down um and actually I need an expression here if my number is we'll say less than 15 then I want to return

uh returned the function early all right and then we're going to enter down and then we're going to return uh 40 these Are all random numbers I'm making up here but it's just trying to show you that um if you have a condition where you know if the number is less than 15 which it is not in this case you can actually return multiple things from the same function so my number is not less than 15 so we're going to actually skip this return function and return 40 but if we change that so let's say

um we Chang that to less than 50 and 20 is left less than 50 so we're going to Actually return this function early and we'll never reach the second return statement so let's go ahead and enter that down and execute it and you'll see that we get that returned the function early uh output so you can have multiple return statements within a function just you can't have like two of them on the same line so if I were to recreate this function and maybe have you know like a return statement of 50 and then return

40 right after it both of these code Paths are going to be reached so this doesn't make any sense you only want to return one value so that's just an overview of return values we're going to get a lot more into this as we start writing some more realistic code just wanted to give you a brief overview the last thing that I want to do prior to getting into the 25 practice exercises or coding challenges I have for you I want to talk a little bit about objects and functions together so this is a Little

bit of a confusing topic but it's going to hopefully help you understand um when we start talking about the built-in functions of JavaScript we're going to talk about that in a few minutes um hopefully this will help you understand that better so let's go ahead and Define a function we're going to call it my function again and then let's I don't know return a value of 20 from it so this is a very simple function um we'll go ahead and execute it just to Demonstr straight it returns 20 now what if I wanted to set

this equal to um another variable I can actually do that even though it's already called my function so I can say um you know Alias you know an alias is just another name for something so we'll say Alias variable equals my function all right so if we press enter now Alias variable is exactly equal to this function declaration that we made um above so if we wanted to execute that As Alias variable we're going to get the same answer of 20 so we can assign it to different variables which means that we can also assign

it to object properties so let's go ahead and clear the well I guess we don't need to clear the screen let's go ahead and create an object so we'll say my object and then we'll set that equal to prop one we'll just give it some random value just to have something there and then we'll say prop two is going to be equal to my function All right so we have declared my object in prop two just a random property name that I've given it is going to be exactly equal to the function declaration just like

we made this Alias variable equal to the function declaration so what does this mean well we can actually execute the function by accessing a value of or by accessing a property of the object so if we come down here and let's just um go ahead and say my object and then we need to get a Property from the object so let's go ahead and get property two and you'll see in the autocomplete down here it's pretty much telling us that that is equal to my function now if we wanted to execute it we can still

put those little parentheses at the end and it's going to execute and give us the same answer so what we did here was was we grabbed an object we grabbed a property off of that object using the dot notation and then once we had that we just threw those Little parentheses at the end and executed it so I just wanted to get you familiar with this because what we're about to talk about is the built-in functions of JavaScript so JavaScript has a bunch of builtin functions and objects and all sorts of other stuff that we

can use without having to write any code and if you go to there's there's several resources that you can use to see these I'm on tutorials point which has a good List of them but they're they're all over documented pretty much everywhere and within JavaScript there are different data types as we have talked about so you have strings you have uh booleans you have numbers and all of these different uh data types will actually have some built-in functions that you can call on top of them so if we go here and just look at some

of different methods so method is another um I guess synonym for function we can Call like it's not completely synonymous but if you have like an object and then you have a function attached to that object as we just showed that's called an object method so it's kind of the same thing and you can see that we have number methods we have Boolean methods and we have string Methods and we have array methods probably down here somewhere so array methods and depending on the variable type that you're working with you can use all of these

to modify Your your variables and just take a bunch of shortcuts with your code so let me go ahead and show you a few of these um just to give you an idea of how they work because when we go into the coding challenges um throughout this course we're going to be using these uh as much as we can now the first thing I'll say here is don't try to memorize these these are not to be memorized there is documentation for a reason so that you can Google it and look it up when you Need

it you'll pick up on a few of them over time but for the most part I only have a few of these actually committed to memory all right so let's go ahead and try out a few string Methods so let's say that we wanted to I don't know use this replace method we go back to the console let's clear everything out and let's define ourself a string so we'll say my string equals um Zach and then we're going to use the replace um method so maybe I spelled my name wrong This is how you spell

my name but what if there's a k at the end so I might want to replace it so I can say my string. replace and then I'm going to replace the H with a K and when we press enter it's going to return Zach with a K and now my string um is actually going to still be equal to the original because it didn't replace the value it just returned a new value so it doesn't alter the original value here it just returns a new one so if we wanted to say Uh new name we

can just say uh my string. replace H and K and then we set that uh equal to new name and now now my new name is going to be spelled differently now something that I want you to notice when we're looking at this is that we're using the same notation here that we used um earlier when we accessed that property of the object and executed it as a function now this works a little bit differently than that but you can Kind of think of it that way so maybe the my string is considered your object

and then you use do notation to get a property off of that object called replace which happens to be a function that takes two parameters and the first parameter it takes is the letter or string that you want to find within your string so I want to find the letter H within my string and then I want to replace it with the uh string K just a letter um so my string will be replaced So these are the parameters and if you were to look at the replace method and you go ahead and click on

it it gives you a description of this and we're going to learn how to you know read through documentation a little bit later but anyways you can go down here and just see what kind of uh parameters are required for this so here's the syntax and it gives you um the parameters that you want to search for then the parameters you want to replace it with Couple examples some output all that stuff so that's how I've you know figured out how to use that again we're going to go through it quite a bit as we

go through the coding challenges I'll just go through a couple more examples just to get you comfortable with what's going going on here so let's go ahead and use my string uh once again and this time I want to use the string method called two uppercase and you can see what that does is it returns us the Uppercase version of our variable now I know we got a lot of different versions going on here so let's go ahead and clear that out and reprint my string so that is what my string variable is equal to

right now we can also chain the methods together so this is a little bit of an odd concept uh to someone starting out but you'll see how this actually works um once we get into the challenges so let me just do a simple example here we have my string um equal to Zach but Let's go ahead and say uh we want a new string or something so let's call it um I don't know let's make a new one we'll just call it Str Str for string and this one we're going to say hello world in

there so that that's the string right there and what we want to do is first make it uppercase so we'll say two uppercase and we'll execute that you know method that sits on the string object and that's going to Output us hello world as it's kind of telling us Here now we can put another dot there and we can chain these methods on top of each other so I'm going to use another method called split and what split does is it's going to take whatever delimiter that you put put um as a uh as a

parameter or not a parameter as an argument so if we put in a space right here it's going to look at the string and it's going to say there's one space in there so I want to split hello and World apart from each other and then What it does there as you can see down here is it actually changes the data type from a string to an array where the first uh part of that array is the first the hello and the second is world so let's set this equal to a variable we'll just say

a result variable is what we want and our result variable is now an array and from there we can actually do array methods so let's go ahead and go back to the documentation here and let's scroll down to some of our array Methods that we can use so what would be a good one to use so we'll use the index of method so this just basically gives us the index of a value so we'll say result. index of and then I want to search for the word world and when we press enter it's going to

return us one because this is an index of zero and this is an index of one and that matches the string that we are searching for that we passed in as an argument to this function now of course you don't have to Do this by chaining them together you can do it in separate steps so in the case of above we made this to uppercase and then we split it into an array in a single step but if it gets too complex for you and you just want to stick to the basics you can do

this in different steps so we'll say uh first let's see what string is equal to it's still equal to hello world because we you know while we did this right here we didn't modify the original variable we just assigned It to a new one so string still represents hello world and in this case uh we'll say step one variable we want to take that and we want to make it uppercase all right so we'll make it uppercase and then maybe just type it out to make sure that it worked now we're going to do step

two right here where we say uh step one so we want to grab whatever values in step one and then we want to split that based on a space all right so we set that to step Two and then step two we can print out and we see that it's an array and then we come to say step three and we'll say step two whatever values in that variable and then we'll say um index of like we did above and then we'll search for the word world and we'll set that to step three and we

get an index of one so you can see we can split these out into different steps but I just wanted you to know that as you see some different syntax when you're reading through code This is a valid way to use these built-in methods in JavaScript all right there was a lot here there is a lot going on in this video and um I would never expect you to take it all in at once and process it and understand every last bit of it and that is why we're going to use um a bunch of

practice exercises or coding challenges to brush up on these skills and really cement some of the concepts we've talked about variables we've talked about op Operators we've talked about um conditionals so if else if else or else if doing a tongue twister there we've talked about loops and we've talked about functions so there is a lot going on here and to combine it all together and actually write code um I think it's useful to go through some exercises in this video we're going to go through 25 maybe a few more we'll see how it goes

um but we're going to go through some coding challenges and these Are going to be at the very beginner level so like very beginner level of coding and what I want to do with this is walk you through my own thought process and help you understand how I'm thinking about this and how you should use the previous lessons that we have gone through so lesson uh three and four where we talk about the basics of JavaScript I want to apply those to actual coding challenges like I've said throughout this series I'm not taking You extremely

deep into the JavaScript programming language um there are other people who have done that and um I I think at this point when you're just trying to get off the ground um digging into complex topics like you know hoisting and um Advanced Scopes and stuff like that it's not necessary for when you're just starting and you can fill in the blanks as you go later on and partially why I'm making this video with these challenges is to help you do That so if I haven't talked about it in the previous lessons hopefully we'll kind of

fill in the blanks here with these challenges and to do so we're going to do this on a site called code Wars and if you go here um pull up the screen um this is going to be the collection that I've put together so there's 25 exercises here um that I've put into a collection we'll see how it goes I might add a few more um if we blow through these but basically just go To hit hit the link in the description um to find this uh series of questions and then get to this page

right here create a profile go ahead and follow me too um let's see what my profile is uh Zach go just look me up follow me I'll follow you back so that we can do this together and then once you get to the collection um again Link in the description you'll go to this uh top left corner and click train now and when we click this it's going to drop us into Each of the problems uh that I have basically chosen for this video and I just want to give you a quick tour of code

Wars if you've never been on here before um I actually just started using it for this purpose just to go through some practice exercises um but basically on the left side here we have the instructions so it's going to tell us the instructions this code does not execute properly figure out why basically fix it um you Can see the output here this is when we actually run our test so if we run our test obviously it's going to fail um and this is where we see the output and then over here is where we write

our solution so we can write valid JavaScript code over in this uh terminal over here and then finally at the bottom this is the the sample test that we can look at so um obviously this is a little bit more advanced than we're um probably accustomed to at this point if you're Watch watching this video but this is going to basically be a bunch of code that actually tests the code that you write so it takes the inputs that um or it takes a set of inputs it puts those inputs through the code that you've

written and then it um gets the outputs and checks to see whether um that matches the expected output so that's just a brief tour um just a few other things you'll notice that we're writing in the JavaScript language uh that's What this video is about uh node is going to be the runtime so node.js is kind of the backend version of JavaScript but you know just like we've been working on in this series we can you know this is the browser Dev tools console um and this would be you know the same code that we're

writing here so um nothing new here and then finally this Vim versus emac thing if you click either of these it's going to actually drop you or it's it's going to create This editor right here um into like say a Vim editor I have a video on this if you want to check out the Vim code editor or text editor but don't click this for now that's a whole different uh ball game that we would get into if we started using those so keep those unchecked all right so from this point we're going to go

through the the exercises I'm going to walk you through how I'm thinking about them the first one is rather simple um if you've been Following along with this uh road map series you'll know exactly what we need to do here it's saying this doesn't execute how do we fix it well right now if we you know ran it and did the output we ran it earlier it says it expected undefined to equal one so basically that's saying that um we haven't returned anything from this function and therefore we just need to add a return statement

right here and then we can test it and it should pass so we pass it Go ahead and click attempt at the bottom right corner it passed all of our test so we'll submit it all right once you submit a solution and you did it correctly it's going to show you other people's solutions to the same problem and this can be useful but also detrial so listen up here um the way that this can be useful is by scrolling down and you know just seeing the possibilities because you can solve every one of these problems

in many Different ways and so sometimes it's fun to see how other people have solved them and it also can open your eyes to different types of thinking that you you know wouldn't have thought about so it is good in that way it's not good um because sometimes people will solve these in very clever ways and when I say clever that does not mean the best way now I'm not a competitive programmer um I don't claim to be I I don't really have any plans on becoming one um but When you get into the world

world of competitive programming it's all about optimizing Your solution writing the least amount of code or the fastest code um that kind of thing and I'm not that I just want to write some code that helps you understand the solution and help you read the code in the simplest way possible and some of these Solutions down here for example this one right here this is unnecessary um there has you know nobody said that you have to Check and validate all of the ARG inputs so uh in this case A and B are the inputs to

our function and what this person has done is basically checked to make sure that you know the uh the inputs are not some you know invalid input it it makes sure that they're a number and this is totally unnecessary for this solution it never told us that we have to check that and this is just overly complicated in my opinion you'll see that there's uh a lot of votes for The clever and in many cases when you see a lot of votes for the clever solution it's probably not geared towards the beginner it's probably not

what we want to focus on right now at least now I will point out one that's um a little bit useful for us and that's down here so this would be our Solution that's what we came up with we just added a return statement and called it a day now there's another way to do this that is actually it's it's very clever But it's also something something that we talked about in a previous lesson so the I think it was the previous video we actually might have mentioned this at one point but basically if you

have an arrow function which is what um we don't have an arrow function in the original solution we just have this you know standard function a named function but we could set this function equal to a variable called multiply and then we set it equal to uh an arrow function and With an arrow function if um you put it all on one line you don't actually have to put a return statement in there so this is a nice uh nice thing to look at because it gives you kind of opens up your world to understanding

oh I can write it like this as well all right so enough on this um we're not going to spend this much time on every challenge but I wanted to walk through uh how you think about these Solutions here all right so if you would if you clicked That button so let me actually go back to make sure that we're clear on this we'll go to collections go to the lesson five practice challenges and if you just click on one of these challenges it's going to take you to that challenge but when you click next

it's not going to keep you within the collection so make sure that you've clicked this train now button so that when you solve the problem and click next it takes you to the next one um in the um collection so I guess we got to solve this one again real quick so we'll attempt it with that solution we passed it let's submit it all right and now we can pre press next uh next Kata or Kata I don't actually know how to say that I'm sure there's a reference to that that I'm not getting be

sure to leave that in the comments if uh you do know what it means anyways this is the next problem that we have so let's go ahead and actually is this yeah this is it so let's train again I guess I've already opened this at one point um yeah when I was putting the collection together so the function is not returning the correct values can you figure out why so this is going to actually get us into the switch case statement that we talked about um just in the previous couple videos and if you remember

with the switch case statement this is basically like saying if and then else if and then a bunch of else ifs to test a specific condition if you Remember from the switch case statement syntax we are missing something right here that is causing our solution to be wrong and I think what's going to happen if we execute this we're going to get Neptune uh every time so let's let's see if that's the case yeah so we got Neptune every single time and the reason that's happening is we don't have any break statements here so in

other words we're getting the ID um passed in correctly so that's passed in as an Argument ID is the parameter uh that we're defining within the function and then what it's doing is it's looking at that ID so that's in the switch statement and it's saying what does the ID equal and then once it figures that out it goes to all the cases and so it says does the ID equal one okay if it does we'll set the name equal to mercur Mercury and then we'll return the name down here but the problem is since

there's no break state It's always going to hit the last case so let's say that the ID um you know we go down to the test and they're passing in two as an argument and we're expecting that that will return Venus so if we you know pass in an ID of two it's going to get passed in and then we're going to look at case one and say okay ID does not equal one so let's go to the next one all right ID does equal two so let's set the name equal to Venus but instead

of breaking and coming down to The return statement and returning that answer it doesn't do anything it's just going to keep going down all the cases so it's going to say does case equal 3 does case equal 4 does case equal 5 so on and so forth till it hits the last one so we need to add some break statements in here and all we have to do is just put in break with a semicolon and we'll do that for all of these lines all right so we've got our break Statement Let's test this once

more and this time we're passing it so that's all we needed to do we just this was purely a syntax error and it's something that you would have had to kind of look up the documentation for a switch case statement or watch my previous lesson to figure out so let's go ahead and attempt it we know it's going to pass and we'll submit it all right let's see what everyone else was doing um there's some clever Solutions here obviously this one Is very clever but I would not recommend doing this at our skill level right

now um so looks like we did it did it okay in this case this person has opted to use a return statement which is valid but a break statement works just as well so um you can see that this was the I guess the top solution most common and that's kind of what we used there the one thing I'll point out is I put a break statement after Neptune but that wasn't really necessary since it's the Last one all right we'll go to the next uh challenge this is reversing a string so let's go ahead

and train on this so basically all we're doing is taking this string and reversing it and I know how to solve this solution um with just a single line but I don't actually know exactly how to do that I can take a guess so let me try and just return string. reverse and see if that works okay so reverse is not a function As I kind of suspected so in JavaScript as we talked about in the previous video there's a bunch of built-in functions uh that come with JavaScript and you can look these up so

we'll just say JavaScript builtin functions um and then we'll we'll go to tutorials point I like this one pretty simple and then if we go to the string Methods that's where we want to go because what we're trying to do is reverse a string so anytime that you're Trying to modify um a certain data type you can First Look to those built-in methods so you don't have to do something manually so in this case we're working with a string and we need to reverse it so let's go ahead and see what we can do um

using the string Methods and it turns out if we're just looking through these different string Methods there's nothing that says reverse here um I had actually for some reason Thought that we did have a reverse method um don't know how that slipped my mind but we don't so we have to think of another solution now realistically if we were solving this problem um you know in the real world where we had to write some code that reversed a string what I'm going to do is this I'm opening up Google and and then I'm going to

type in how to reverse a string JavaScript all right and usually there's going to be a stack Overflow post um because stack Overflow is where you basically get the answer to anything when you're coding and what's going to happen is we're going to find a solution here so I wasn't that far off we actually do have a reverse method but this is not going to be entirely apparent uh to you if you're like a complete beginner but what we're doing in this solution here is we're actually converting this to an array first so let's go

back this is all I need to see for now um let's go back To our our documentation and take a look at the array methods so if we have a data type of an array we can actually reverse it so uh looks like there's a reverse method right here and I'm going to go ahead and go to the dev console um just right click anywhere on the screen um let's just show you how to do that right click inspect element if you've been watching the series this is not news to you and now we can

type away with any JavaScript so let's see how we Can do this with an array we'll just set an array uh equal to 1 2 3 and if we want to reverse this array we can just say array. reverse and it's going to reverse the values in the array so basically what this stack overflow flow solution is telling us is that we first need to convert the string into an array by letter and then we need to reverse it and then we need to join it back into a string so this is a you know

one-step solution where we can basically do it All in one step we talked about chaining uh these built-in methods in just the prior video but I want to break this out into individual steps uh just for clarity so let's go ahead and do that right right now the first thing we want to do is split the string into an array so basically it's going to take every character in the string and it's going to make each character uh a value of that array so again let's come back to our console um let's say that we

have a String and that's equal to hello all right and then we want to say string dot um what were we using here we're using split and we're going to uh just split it with an empty character so if I can get back here so we'll say string dosit and we'll put in just an empty character and that's going to give us an array where we have each uh letter being separated in the array all right so now that we have the array we can split or we can reverse it so um let's just go

Back and do that here so the first thing we have to do is uh put it into array so string do spit and then we just need to pass in an empty character and then from there we can reverse it so as we saw so we'll say we'll save it into a reversed variable so we'll say array. reverse all right so that's going to assign it there and then often times when I'm solving a problem like this I'm going to write some code and then actually test it out before I move on so let me

go ahead and Console.log the Reversed value and then we'll click test which is obviously going to fail but what we do see is that we get some output so you'll see that we logged this to the console and this to the console which basically tells us that we have our like our reversed variable is an array and that array is reversed from the original string so the last thing we need to do since we have it in the form of an array data type is we need to take that reversed array and Just combine it

together into a string and to do that I think all we have to do is um join it so if we do string dosit um and then we say join it's going to join it uh by a comma so we actually will have to replace those commas let's see how the stack Overflow solution did it okay let's see and we have to when we join it we have to also enter that empty string right there so that's just a a little tricky part to this so let's go back to Our problem um and then we'll

say Final Answer equals the Reversed array so this is an array and then we join it by that empty character and then we go ahead and return the final answer and let's go ahead and test that you can see that we passed all of the tests so let's attempt it I think we'll be fine here and we solved it so that's just how we take it out into different steps um of course we could have solved this by um just saying we Want to do string dosit do reverse dojin and this uh we can delete

all these uh intermediate variables right here we can test this and it's going to pass everything let's go ahead and attempt it and submit it so like I said there's a couple different ways to solve it but um you might be asking at this point well you're cheating like you went on stack Overflow and figured this out That way and well yes if I was doing a programming competition um I would be cheating and that's you know that's why I'm not a competitive programmer I'd never want to be because Google is you know your best

friend when you're a programmer and it is not cheating to Google something so um we'll try to do more of these on our own for the remainder of the video but for now I just really wanted to beat that into your head that it is okay to go to Google and search something like that and that's how pretty much everyone that operates in a real world environment is going to do so uh just a tidbit of knowledge there um take it for what it is all right so we'll go to the next challenge see what

we got here okay even or odd let's see what we are trying to solve so it says create a function or write a script in Shell that's not something that we're going to do um that takes an integer as an Argument and returns even um so notice that they're asking for a string a capitalized string that says even uh for even numbers or uh capitalized odd for odd numbers all right so let's see what we can do here the first thing I'm thinking about is maybe a modulus operator but I don't even think that we

need to do that or do we yeah that is correct so a modulus operator if we were to divide something by two right okay I I don't I Know what I was thinking here so just divide it by two right so um let's let's go over to our little playground here and refresh just so that we can test a few things out so if we got 20 / two that comes out to an even number if we have 21 which is odd divided two we have a decimal now we would have to complete some additional

steps to actually figure out which one's a decimal which one's a whole number so I kind of like the idea of the modulus operator because if we do 20 instead of divided by two but modulus 2 it's going to give us zero um but 21 modulus 2 is going to give us one so basically every time we have an even number uh doing modulus 2 is going to return zero because there's zero remainder if we do that division operation so in previous lessons we talked about this modulus operator um in my video video about operators

and basically what it's doing is it's doing a division problem and it's returning What the remainder of that division problem is so as we know going back to basic math if you divide something and there's no and there it goes into it evenly there's going to be a remainder of zero which we're going to see for any even number so if we do 40 modulus 2 that's zero if we do two modulus 2 that's zero so that's basically how we're going to solve this um and we could do some intermediate steps but we can actually

just return the Solution um or actually no we do have to do some intermediate steps so if we need a conditional in here we want to say if the number so we're grabbing that from the parameter um and then you know the test cases are going to pass in different arguments and then the parameter called number just think of it as a variable available to this function um is going to uh be different per the test case so replace that number with whatever argument you have and then what We want to do is write an

expression that says the number modulus 2 all right so we want to say if that is equal to so we'll use triple equals to check both uh the value and the data type to be the same and we want to set that equal to zero so if the number modulus 2 equals 0 then we know that it is an even number so we'll drop down into our if statement and we'll return what we need to return based on the instructions over here called even all right and then we'll put An else statement so we know

that if it's not even it is odd so we're going to just return odd in that case and let's test this out all right we passed all our test let's go ahead and attempt it and we passed all of our test so let's submit this answer and see what everyone else uh did to answer this I'm sure there's some more clever solution than what I came up with all Right so this is just using the Turner operator um we talked about this very briefly in the operator's video but it's basically just a shorthand uh clever

way to write an if else statement and we could have used this but I just don't want to confuse anyone unnecessarily uh this looks to be our solution um actually there's not not much variance here so these are just abbreviate ways abbreviated ways to write our function they're just using The arrow functions rather than um our classic function here so um we did pretty good on that one let's go to the next challenge all right we are counting sheep in this challenge let's see what we got here okay we are returning the number or the

count of the vowels in the given string we will consider AE IO U as vows for this uh problem but Y is not going to be in there okay so that's good to know the input string will only consist Of lowercase letters and or spaces all right so this is another point that I really want to bring up um if you're you know just starting out you're a beginner and you're solving problems this is kind of how an interview question might be laid out where the last part is going to tell you something about the

input so obviously the the functions that we have been writing here um they're being executed by something and that something are the automated test um these are this Is a sample test down here but um there's code that's going to run when we actually click this test button this site is going to execute our function with a bunch of different parameters to make sure that we um implemented it correctly you know you don't want to just test it with one set of parameters you want to put in a bunch of different things and with that

we could have an infinite number of things passed into this function as arguments and often Times in uh more complex problems and and harder challenges they're going to challenge you to handle all of the different edge cases that might come up and when I say edge cases you know it might be something like okay what happens if I uh pass in uh an undefined value as my argument or what happens if I pass in um you know a number instead of a string into this as an argument well all of these things need to be

handled by your code so this last Sentence here is it doesn't seem um very useful and you might even ask like why is it here but this is telling you something about the input it's basically saying to us as the programmer it's saying hey this is only going to give you lowercase letters and or spaces and that's basically saying in other words we're not going to pass in numbers we're not going to pass in undefined values null values Boolean values you know all you need to worry about are you know Single lowercase letters and spaces

all right so that is very useful information it's going to save us a lot of time when we're solving this problem all right so it says enter your magic here spelled incorrectly at least in English I don't know how spell it in other languages anyways um let's see what we got here so we have uh a starting point now one thing I'm going to fix here they're using uh the VAR um keyword and in the lessons I've basically told you we're Not using this and I also stand by that so let's go ahead and set

that equal to let um because it looks like we're going to have to reassign this at some point all right so this is actually a fairly easy solution um once you've been programming for a little bit um how I see us solving this is first let's put in our input into an array um of some sort and then I want to Loop over that array and check if it's a vow all right so um Let's go ahead and do that um there's actually a lot of ways that you can solve this but let's just stay

consistent with what we did in the previous one so we'll take uh we'll we'll convert this to an array by saying string. split and then we want to pass in that empty character so if you remember what that does is it takes every letter of the string and it puts it out it expands it out into an array so going back to this tab um we'll just Say you know let's look at an array and then or no we'll we'll look at a string so the string will be hello and then we can just say

string. split and then that's what it's basically going to do here so it's going to split it into an array and then from an array we know that we can write a loop so this is kind of the previous couple videos that we've been talking about loops so we're going to Loop over Every single value in that array so to do that we're going to say let I equal 0 this is just the syntax we use for uh looping and then we want to go for the length so the array that we just created has

a certain length has a certain amount of characters uh but we don't know that beforehand so we're just going to pass in a ray. length and then we're going to increment I using the increment operator all right so we're going through this Array and now we're just going to write a s uh simple if statement so we'll just say if um let's say we'll grab from the array each of the indexes so remember I is going to increment it's going to go from zero to 1 to two to three to four and all the way

till it reaches the end of that array which has the individual letters um of this you know input argument so we're going to grab that like basically this array um or ARR bracket I is going to represent a single Letter of that array so we're going to ask whether that equals um any of the vowels so there's there's actually some really short ways that you can write this but I'm going to go ahead and do this the clunky you know really drawn out way just because it's the most clear for a beginner so we'll say

if the array or actually we can use this switch a switch statement um as we saw in a previous challenge so the the thing that we want to evaluate is that single Letter and then we're going to come down here and we're going to say case does it equal a all right if it equals a then I want to take this vows count variable and increment it by one so that's what we're doing there and then we will break out of the statement remember that's very important all right so we're going to do this for

all of the different vows and we're just going to paste this code below here and it's going to get all messed up with formatting so let's See and like I said there is a much quicker solution um and I'm sure that we'll see someone that used it um but this is you know in the scope of what we've talked about already so I just want to stay consistent with what we've talked about you know not throw any huge curve balls here all right so we're getting to our last one let's pass that in we actually

don't need a break statement for this last one here and so basically what what's going To happen here is we're going to Loop through this array so basically we're going to look at every single letter in the array from that original string and we're going to ask does it equal a if it does we're going to increment the vels count does it equal e increment the vs Count and if it doesn't equal any of those the vows count variable is going to stay where it is so at the end of this loop we're going to

have a total count and then we just return it at the Bottom so let's go ahead and run the test on this and see what we get you can see we passed one of the tests so let's go ahead and attempt it and we passed all five of them so we obviously got this correct so let's submit it guess it didn't submit so let's try that again sometimes this is a little bit slow it has to actually run a bunch of tests so all right so let's see what we got here the first answer very

clever um this this gets into regular Expressions which We haven't even come close to touching on and I don't want to so we'll skip that um this right here looks um a little bit similar to what we did so this is actually a double Loop so we're actually looping through two different arrays I really don't want to get into to that either because that that will make anyone's braid and spin to be honest um got some more regular Expressions see I'm just looking for the one that I Was thinking of that would be a lot

okay there it is so we looped through this array and what we could have done is just checked instead of writing out this switch case statement um all we would had to do is put the vowels in an array and then we would have to you know take that array and use the includes method and then Loop through all the letters and check if that letter um was included in that vowels array so that's what I was thinking of just a little bit easier Way to do it looks like this person kind of solved it

like us but like I said there's a ton of ways to solve each of these challenges you know we can solve them however we want so let's go to the next one um looks like Jenny's secret message I wonder what Jenny's secret message is so let's train on this I got to take a little break here solving all these these challenges it's tired all right here we go so Jenny's secret message Jenny has written a function That returns a greeting for a user however she's in love with Johnny and would like to greet him slightly

different that's romantic all right she added a special case to her function but she made a mistake so let's look at the function it looks like we're just trying to edit some code here all right the first thing I'm going to do here is just run the test see what we're getting um kind of gives us some Clues um all right so now let's look at The code let's see what What's Happening Here is that we have a single parameter called name so that's basically saying all right this function expects a single argument to be

passed through it when it's executed and that is called name um then we're going to use that name to figure out if we're dealing with Johnny if we're not dealing with Johnny then we don't want to add you know um any specialized message we just want to say hello to that name so up here this is How we would do that we're just concatenating a bunch of strings together um so we're saying we have a Hello string and then we're adding the name that is passed in and then an exclamation point so this is basically

what we want to return for everyone except Johnny all right so that's what we want to return there let's space it out a little bit and then if the name is Johnny we want to return hello my love all we have to do here I think is Reverse these so what's happening right now is we're going through this function and it never even gets to this if statement because we're already returning something so basically every time we run this function it's returning hello you know name with an exclamation point at the top it never checks

to see if Johnny is the name because that's like this code block down here just never gets reached so all we have to do is cut that from there and put that at The top so if the name equals Johnny return hello my love so let's go ahead and test that and it's going to pass now something that you might be wondering about right here if you've been watching the videos is this if statement so normally we write an if statement with these brackets and then we would put the return right in there and that's

how I prefer to see it but um JavaScript has a bunch of little quirks and if you have a simple if statement like that where just Where you're just returning a single line you don't actually have to add the brackets that's just a syntactical thing this is totally fine if we run the test again it's it's going to pass and let's go ahead and attempt it so we passed the test let's go ahead and submit just going through a couple of the possible answers again this is another uh Turner or no it's not yeah this

is using a Turner operator so it's basically enclosing that Turner Operator within parentheses and then it's putting it in the middle of that string concatenation that we're doing so very clever but it's not something that we need to do totally unnecessary and it's honestly not not quite as readable as what we have done um all the other ones these are uh rather simple this is a nice one this is a good solution if the name is Johnny we return this else we return something else we kind of did something similar we just didn't add the

Lse statement all right let's go to the next problem the next problem is n divisible by X and Y let's see what we got here okay so we got quite a bit of uh quite a few examples create a function that checks if number n is divisible by two numbers X and Y all inputs are positive nonzero digits so again this last sentence is useful because it's telling us hey we're not going to throw any you know crazy arguments through This function you don't have to worry about handling you know different types of data um

you know know you don't have to worry about uh a string being passed into this data in that case you might have to convert it or just throw an air but in this case all inputs are positive nonzero digits so it's going to be from one to Infinity basically all right so here are some of the examples we might as well use these um so n = 3 x = 1 y = 3 this is true because 3 is divisible by 1 and 3 all right and + 12 x = 2 y = 6 true

because 12 is divisible by 2 and 6 all right so it's basically you know looking at all these numbers trying to figure out if they're divisible by each other all right immediately I'm kind of thinking about that modulus operator again because anytime we look at something that says is it divisible by um that comes in handy so and then also the other thing that I'm thinking about initially is that it's saying checks if Number n is divisible by both of these numbers so this and is capitalized which tells me that we're probably going to be

using this and operator at some point so just keeping that in mind as we solve it um again all inputs are positive non zero so basically what we're going to do is uh we're going to do two different math problems so we'll say result one is going to do is going to be equal to n / X and then then result two is going to be n / y all right so We're just running both of the math problems and we're getting it into a result variable and then from here all we have to do

is basically um divide let's see so let's let's go ahead and console. log out these results just so so that we can see some output that we're receiving so we we will test it obviously everything failed um but you can see what we were getting here so we're getting some decimals as we might Expect if it doesn't go into it evenly now a good way to check whether a uh number is a whole number or a decimal is using that modulus operator and if you think about it if we divide a number by one it's

going to always go into itself right unless it is a decimal so if we were to let's go over to our play ground here um if we divide this by 1 it's going to give us 20 19 / 1 is 19 but 2.5 / 1 is 2.5 so it's not a whole Number it's a decimal number and because of that the modulus operator is not going to return zero so if we did 20 modulus 1 that's zero 19 modulus 1 is 0 but 2.5 modulus 1 is 0.5 so any whole number is going to if

we do modulus one is going to return us with zero so we can use that in our solution here so we'll say if Result One modulus 1 equals 0 and then this is where that and statement comes in and result two Modulus 1 equals 0 then we know that we have a correct answer so let's see what it wants us to return again it says checks if it's divisible okay okay so we're returning true or false so in this case we're going to just return true and then if that's not true then we return false

so if the if the first result the first division problem and the second division problem if both of those are not equal to zero when we Use the modulus operator then uh we return false down here so let's test it see what we get looks like we passed that's great let's attempt it and you can see that we passed all the test let's see what everyone else was doing here for this I'm going to guess that a lot of people solved it this way but but of course there's always these clever folks out here that

are just solving it in one line um this one this is interesting Right here I'm not going to go into it you know these are these are not totally relevant to us we solved it in a very straightforward way wasn't clever but it was very straightforward and that's all we're asking for here so feel free to look through these let's go on to the next challenge at this point I'm going to try to solve these a little bit quicker um just so that we can blow through the Rest of the video I'll Point things out

as we go of course but um I've kind of you know harked on a lot of the most important things like how to how to look at a test how to think about it how to Google all that kind of stuff so we'll kind of we'll try to speed through these a little bit faster all right so this one is return negative in the simplest assignment you are given a number and have to make it or in this simple assignment you are given a number and Have to make it negative but maybe the number is

already negative all right so it's kind of implying to us that we have to check whether the number is negative first and then we have to apply some sort of operation on it so immediately we know that if we multiply something by a negative one then it turns it you know the opposite sign that it was so if we all we have to do is say if the number is less than zero we we know that it's negative so we're just going to return The number because it's already negative otherwise if it's not less than

zero then we're going to return the number multiplied by -1 and that should be the solution right there we passed I think this is going to work it's a pretty simple straightforward answer so again if you have caught on to this when we're using the if else statements um that's an opportunity to use a Turner operator and you're going to see that in um some of These Solutions so here is the Turner operator at work it's basically the same exact thing that we did has a little bit of a a different thing so if you

can just put a negative at the beginning of your variable to flip the sign of it that's just a shortcut in JavaScript um but then there's another solution this is actually interesting if you use the built-in um math function called the absolute method that's going to turn any number to a positive value so if we just Turn everything that we get to a positive value and then reverse that to a negative we're always going to get a negative value so that that is a clever solution and honestly I think that's the best solution if you

just thought of using this but of course if you're a beginner you're not going to think of using the math. absolute meth method because you probably don't know about it but again you can look up these JavaScript built-in functions and I'm Sure that it um this one might not show you yeah so we have the math methods down here and you could um once again I'm on tutorials point I just searched for JavaScript built-in functions but we have these math methods and the first one is the absolute method so it Returns the absolute value of

a number and if you knew that you could think of it and just use that for our solution so anyways like I said we're not going for the most optimized solution we're going For the most straightforward and clear solution for a beginner all right so we're finding the smallest integer in the array for this one all right given an array of integers Your solution should find the smallest integer all right so this looks like a perfect opportunity to write a loop and you can see in our solution here this this is actually getting us into

the concept of classes which we we have not talked about one bit so far but Basically um each class is going to have you know several different instance methods um and then the F smallest int is actually an instance method so I'm not sure if we we might be able to edit this let me see well as you can see in the test it's instantiating this new class so we can't really do anything about it but I'm just telling you don't worry about the class right now all we have to do is e um implement

this method and we should be Good so within this method we're going to get some uh arguments this is actually what we would call this would be params um because that's what the prams are what we Define within the function declaration and the arguments are what we passed through it but again in those previous lessons I told you that arguments and parameters are two sides to the same coin and in this case that's been demonstrated there um we're using Args and prms interchangeably all right so we'll just change it to prams to say stay consistent

here and then from here we're going to go ahead and loop through this array so the pams that we're going to receive is an array of integers all right so and then it says at the bottom you can assume for the purpose of this challenge that the supplied array will not be empty so we don't have to handle the case where it's empty but it doesn't Say anything well actually yeah it does we're going to get an array of integers so we're good so let's go ahead and um assume that the pams is an array

so I actually want to name this something even more descriptive so we'll call this array of numbers just so that we can remember what we're doing and now we're going to make a for Loop so basic for Loop here and let's go ahead and go until we get to the End of this so we're going to grab the length of that array of numbers and then for each number in the array we're going to check if it is the smallest integer so to do this we actually have to declare a a variable here that's going

to keep track of the smallest integer as we Loop through the array so let's just call this the small number and we're just going to declare it because we have not um looped through any of the numbers yet so or actually Yeah let's go ahead and declare it the smallest number that we can possibly get um it's an array of integers and we might get negative numbers so let's just go ahead and initialize this at zero so just for comparison purposes you'll see what I mean in a second so as we Loop through this array

the way that we're going to get an individual number from the array is by using this syntax here so we're going to grab the array itself and then we're going to pass in the Index which should be I which is going 0 1 2 3 all the way till the length of the array so that's going to represent our number and just for clarity I'm going to go ahead and say that so we'll just say individual number equals that so that's what we're going to do for each loop we're going to um declare and assign

a variable for that then we're going to check and we're going to say if the smallest number is greater than the individual number you also could have Said if the individual number is obviously less than um the smallest number either way works then we're going to set it to a new value so if the smallest number is greater than the individual number so the indivi well maybe we should name this something more descriptive so individ ual number uh array we'll just say array number that's a little bit more descriptive I'm sorry this is this is

not right even at all I just need to Take a little break here from talking um so what we want to do is we want to say if the array number that we're looking at you know in this iteration if this is less than the existing smallest number then what we want to do is we want to set the smallest number equal to that array number so it takes its place as the new smallest number and basically what's going to happen is as we Loop through the array um it's going to check each number and

if it's not smaller then It's just going to skip it and it's going to go to the next iteration of the array so we really can come down to the bottom of this and return from this function the smallest number after we've looped through all of the numbers in the array let's go ahead and test this looks like we failed some so I think this is because we didn't handle negative numbers let's see oh actually this is just a mistake on my part so I initialized this at zero But this is a problem if we

have positive numbers because if we have an array that are you know full of positive numbers so let's say that we had an array that looked like this we had two we had five and we had six it's going to Loop through all three of these numbers and it's going to compare it to our already smallest number of zero and none of these are smaller so the smallest number at the end is going to return zero so we need to actually not declare This we're going to actually just declare it and not assign it and

then the first thing we going to do at the very first iteration of the loop we're going going to set the smallest number equal to that first number so we're just going to say if I equals 0 which basically means we're at the very first iteration of our Loop we want to set the smallest number equal to the array of numbers and then we want to grab that index of I and actually we can we can Actually put this below so uh let's get the number that we're talking about first and then we can replace

this now with array number okay so just to review what what I just changed here what we're doing is we're saying we're going to initialize this or declare this variable it's not going to have a value yet so we have to assign it a value on the first iteration of our array so um you know the first value of the array basically and we know That that's always going to be when I is equal to Z so first let's get the number that we are looking at in this specific iteration we'll assign it to the

array number variable and then we're going to ask is this the first iteration of the array if it is I want to set the smallest number variable equal to the first number in the array so now we have something to compare against and in the same iteration so still on the first iteration of this array we're going to Compare the array number to the smallest number they're going to be equal so we're not going to get there it'll go through and now it should work a little bit better for us and now we have an

infinite Loop because I'm just getting scatterbrained here and I actually set I equal to one when I was looking at this conditional and that is a big no no because what's happening is now we're going through this for Loop in each iteration of the Loop we're resetting I to zero and therefore we have an infinite Loop and that is actually something that you'll stumble upon a lot and infinite Loops are not fun so uh make sure you don't make that mistake let's replace this with triple equals which is going to actually do a equality comparison

we should be better off this time so we passed all of them let's attempt it and we pass the test this point I probably take a break cuz I'm getting a little Bit a little bit fuzzy in the brain here so let's submit this and let's just look at what other people did obviously there's a better solution in all cases um but I don't think any of these are at the level that we're at right now at this point I just can't even think anymore so I'm going to take a break and we'll come back

and finish the rest of the problems the next challenge is grasshopper summation so we'll see what that's all About says write a program that finds the summation the sum of every number from one to the variable called number or num the number will always be a positive integer greater than zero remember pay attention to this right here we don't have to worry about negative numbers in this case let's just look at an example cuz I I want to go through that first so if the number is eight it's just saying go from one to 8

and add everything together in Succession so the first thing that we'll notice here is that it's only adding one so not it's not only adding one but the number that we're adding only increases by one so it looks very similar to a for Loop so we can probably write a for Loop so let's go ahead and template that out so we'll let I equal uh zero to start we might have to change that actually and then we'll say I is less than num um yeah I is less than num because We want to go through

as many iterations um as we need to get to num or the the value that's passed in and then we'll say i++ so we start at the value of zero and if we add zero to something that you know adds zero so that doesn't matter so we're fine doing that and then it wants to go until I is less than the number so in this case we may have to actually start this at I 1 and then we say I is less Than or equal to number so let's go ahead and do that let's start

it at 1 and then go up to the number and for starters I just want to print this out to the console and see what we get so I want to print out I each time in the loop and since it's not a very good you know place to do that I'm just going to go over here to my Dev tools console and we're going to paste that in there um um and of course num is not defined because uh we don't have that in past's a Argument or anything to the function so let's just

put a random number let's put 10 in there and press enter and what we're going to see is that it counts 1 2 3 4 all the way to 10 which since we started it at 1 we get to 10 but if we were to start this at uh zero like we normally do for a loop and then we take away this equal sign it's going to go from 0 to 9 and if we add all these numbers it's not going to add up to the right sum so it's very Important that we start it

at an iteration of one and then we go all the way up to 10 so we put that little equal sign we also could have you know deleted that and gone up to less than 11 but you kind of get the point just be conscious of that now all we have to do is make a variable called the sum and we'll uh initialize that at zero because we start at a sum of zero and then all we have to do is say sum equals sum plus I so when I starts at one so we're saying

0 + 1 then I increments to two our sum is going to be stored at 1 so we do 1 + 2 and then we go I = 3 so our current sum is going to be um 3 because we had 1 + 2 so then 3 + 3 is 6 so on and so forth so that's going to give us our sum another way we could write this if you were paying attention during the uh previous video where we went through the mathematical operators you can just do plus equals and then you can say

I so What this is going to do is it's going to take sum and it's going to say what is the value of the variable called sum and then once it finds that value it says take that value and add the value of I to it so this is a abbreviated version of doing that but again I'm going for readability here so I'm just going to say sum equals sum plus I that's the most clear way that we could probably write that so then we get to the bottom we've gone through all of our Iterations

so the sum variable should equal the sum of all of those different uh I values so now we just return the sum let's see what we get we pass both test cases I think we've got it all right so we passed all 105 test cases not sure why anyone would want to write 105 test cases for this but nevertheless let's submit our answer all right let me just check to see where we are within This series we'll go to collections all right so we are on get the mean of an array so let's see where

we are here all right so we're right here we have one two three four five six seven eight left all right not bad let's go ahead and train on this so get the mean of an array all right the instructions say it's the academic Year's End fateful moment of the school report all remember that the averages must be calculated all The students come to you and entreat you to calculate their average for them easy you just need to write a script all right when they say a script that's basically just saying you need to write

some code return the average of the given array rounded down to its nearest integer the array will never be empty so you're always going to get a number in this array and it says round it down and what I'm going to think about immediately is we going going to use one Of those utility functions or the built-in JavaScript functions so how do we round a number down let's go to the built-in functions we're already looking at the math methods and we can see that if we uh look at the floor method or function it says

it Returns the largest integer less than or equal to a number so basically rounds it down so math. floor is going to round our numbers down and if we go to the console here let's go ahead and Clear this because we got so much stuff going on and if we say math. floor um and then pass in a number 2054 it's going to give us 20 so it just rounded it down so that's basically the round down function we're going to use that in our practice or our challenge here um this is kind of a

useless comment once again this marks marks right here I don't like the name that they've given this so I'm going to rename it uh cuz we can name our Parameters anything that we want so I'm going to say uh score array so we're going to have all the test scores or whatever scores we're doing here now within that array um let's see what do we have to do again we have to get the average okay so what is the average the average is going to be the sum of all the numbers divided by the count

of all the numbers all right so that's your average formula pretty simple there so to get the count That's the easy part we'll just say the score arraylength so that's going to give us how many numbers are in this array and then for the sum unfortunately this is something I know from uh just writing code there is no uh sum function of an array like built into JavaScript so if you were to go to Google um let's go to Google and search how to sum values in Array JavaScript and let's go to stack Overflow um

you can use this uh method called reduce and then you can actually use an arrow function um but this is rather complicated and it's not really at the level that we're trying to be at right now right now we're just trying to do it in the most straightforward way possible and this kind of comes later when you're more experienced writing JavaScript code so in our case we can do it a little bit easier with a for Loop so all we have to do is write ourselves A loop started at index of zero we want to

go until we've hit all the numbers in the array so we can actually in this case we've already gotten the length of the array so all we have to pass in here is the variable count that we stored that in so that's a way to simplify your code and then finally let's break down here all right so we're going to Loop through each of these and what we want To do is add them all together so kind of similar to the last problem we did but in this case we want to assign um so we

don't want to count uh we don't want to say the same variable so we'll say the sum equals z right now and for each iter ation we're just going to say sum equals the existing sum amount so it starts at zero and then each time we iterate through the array to the score array we're going to grab that individual number that we're Looking at and add it to the existing sum so now we get down here to the bottom we have the count and we have the sum so let's go ahead and just return the

average which is going to be the sum divided by the count let's see what this results in all right so we passed two of them but we failed one of them and the reason is because we forgot to round down I forgot that requirement so all we need to do is surround this with the math. floor Function and that should return the right answer I could have broken this out onto the uh another line just for Simplicity so we'll say the average is the sum divided by the count and then we can say rounded down

equals math. floor and then pass in the average so take the variable we just assigned here and then we just want to return the rounded down variable and that should give us the same answer hopefully we get This right this time and we did let's attempt it we should be able to get this awesome so that's just how we would solve that problem so as you can see just to take a slight break and and review what we're doing here um a big part of solving these problems is um obviously getting the instructions right and

understanding what type of input we're going to be receiving into this function the second part um with these easier um these easier challenges we're Going to do a lot of um looping through arrays and stuff like that and that is actually really consistent with the real world um when we're writing code and building apps we're going to be doing you know stuff like this quite a bit we're not going to be solving useless problems like this but we're going to be looping through arrays a lot and setting counter variables and sum variables all that kind

of stuff so this is actually going to be testing us on on very useful Skills that you're going to use in the future all right so if you remember from that stack Overflow question they're talking about reducing it um to get the average and you can see that that's exactly what the the top solution or I guess the the best practice solution is doing um it's it's basically using marks. reduce so this is going to get us the average then we're going to divide it by the length and then we're going to put it to

the floor so basically uh Round it down so that's that's what I was talking about with this stack Overflow solution honestly if you ask me it's kind of weird that the array uh arrays don't have an average method seems like a very common one to have but nevertheless we don't so all right so this challenge looks like we have a picture to look at let's let's do some rock paper scissors okay so it says let's play you have to return which player won in case Of a draw return draw okay and this is just a

reminder of how rock paper scissors works I think most people would know that um immediately when I look at this I'm not a huge fan of this so we're naming the variable that we're storing this Arrow function in as RPS or rock paper scissors um I'm going to just rename this because we need to have meaningful variables here so we're going to name it rock paper scissors Spelled out and then P1 and P2 again these are not very um uh descriptive so let's replace those parameters with something that makes more sense so uh player one

and player two all right so now we've got this written out I like this a little bit better now let's go through our different cases so first thing you might want to do is write some pseudo code so pseudo code is basically um you know just writing out like logically how This should work and maybe this isn't even considered pseudo code but let's write out all of the different scenarios that we can have so uh we'll say rock is our paper is p and scissors is s all right so for player one over here and

then player two and then the result so let's go ahead and write these out um we have player one we'll do rock and then since There's three different possibilities we're going to have just a matrix of possibilities so we'll rock rock rock paper paper paper scissors scissors scissors okay so that's all of the possible plays that player one can do and then obviously we will go through with player two over here and we'll alternate so we'll go rock paper scissors and then again we'll go rock Okay so in this comment we've written out all of

the different possibilities and who's going to win in each case so you can see that there's three draws um three times where player two wins and then three times where player one is going to win as we might expect so how can we convey this what we're seeing right here in code and to answer that um there's there's a couple methods that you can go about doing it but once again I'm going to try to go with the simplest Most straightforward and easy to read method so seeing this written out like this where we have

all these different scenarios I think that we can say that we're going to go with player one and just have three if statements so if player one chooses Rock if player one chooses paper or scissors so we'll just put out those if statements real quick so we'll say if player one equals Rock and then we're going to copy that down okay so we got rock paper scissors So these are the three scenarios for player one and then for player two um we're obviously alternating between these so let's say uh player one plays Rock so um

we could probably put a switch statement in here but I don't know if we need to so we'll just say if player 2 equals Rock then that's going to be a draw so we're going to return draw then we'll say if player 2 equals paper then that is going to be return player 2 one and then finally if player 2 equals scissors then in this case return player one one okay so now we can basically just copy these same three down into each of these and this is going to work so uh this one's complete

let's just fill out the rest of the results so if player one Uh chooses paper player two chooses Rock it's going to be player one so if we're going paper against paper it's going to be a draw and then player two for that last one all right and then scissors versus Rock so we're going to say player uh two one this one will be player one and then this one will be H raw let's go ahead and test this looks like we failed um and it's complaining that RPS is not defined and That's just because

I changed the name of the function at the beginning of this which I guess I can't do after all but I would not prefer to see it like this it should be more descriptive so let's go ahead and test that and it looks like all of them passed so we fulfilled all of our different scenarios that we wrote out for ourselves but I can guarantee you that there is a more efficient solution because in many cases we have like overlapping scenarios but if you're Just thinking about this logically and you want the the easiest thing

to read that you know even a beginner could go through and understand what it's doing this solution works okay so let's attempt it we passed our test and let's see how someone who is going to optimize it a little bit more would have solved this problem okay so here's the first one so it's saying if P1 is equal to P2 then we return a draw so that eliminates Three of our scenarios that we had to write out in separate if statements so that's already reducing our amount of Code by a lot then what they're going

to do is they're going to put the rules within um an object which is actually quite interesting so they're basically saying that for one player here is the rule so rock is always going to beat scissors paper is always going to beat rock and scissors is always going to beat Paper so that's very interesting How they're doing that and then um they're saying if P2 so player two is equal to the rules so it's grabbing whatever player one responded with and and then it's going to grab the value of that and compare it to what

player two uh responded with yeah so this is a very very smart solution very efficient um but at this point after solving how however many we've solved here 20 or so my brain's a little shot And we're going with the simple answer here now this is something a little bit closer to what we might have been able to do so we could have combined the conditions into Expressions so rather than separating it out into a bunch of if statements we could have combined them together this is how we kind of started doing it so obviously

there's a lot of solutions to this problem all right this next one looks relatively straightforward oh it says it's pretty Straightforward so your goal is to create a function that removes the first and last characters of a string you're given one parameter the original string you don't have to worry with strings with less than two characters okay so this is going to be a great um time to use one of these built-in functions so let's go to the string Methods and see what we have available to us and string so this is what we're looking

at um so we could use This character at um because we could specify the end of the string and the beginning of the string with zero and then you know we could find the length of the string to find the last character um that seems a little bit indirect though um let's see we can also return a substring this is actually going to be the most direct route here so a substring is going to return the characters in a string beginning at the specified location through the specified Number of characters okay so I'll show you

how we're going to use this um but first let's kind of get an idea of how it works so if we have a string and that string is hello what we can do is say string. substring and maybe I want to start at the very beginning which is going to have an index of zero now we haven't really talked about this we've always talked about arrays having indexes but strings also do as well you can think of each Individual character within this string as being a separate index so H is going to be an index

of zero E1 L2 so on and so forth so if we're starting at index of zero that means we're starting at h and then the next uh argument that we get to pass in according to the instructions um that we looked at here I kind of know how to use this already but you could click on here and it's going to say we're going to pass in what we want to start with and then the length That we want to grab so let's go ahead and grab two characters from this string so we start at

H and then we grab two full characters starting there and we get he so if we would omit this we're just going to start at zero or start at the beginning and get all of the characters but if we replace this with one we're going to get all the characters except for that first one so we're actually um partially to our solution we've got the first character Removed now we have to figure out how to remove the last character and to do that we have to figure out how long the string is in total and

to find out how long the string is is I believe there might be I think there's a method for that or a function so there should be yeah string. length so let's try that out um let's get rid of this and we'll say string. length is equal to 5 so if we know the length of the string and we Know that the string starts at an index of zero we then know where our substring is so all we have to do is say uh string. substring we want to start at index of one one because

that omits the first character of our string and then we want to end or not end we want to grab how many different letters well we want to grab let's see the string. length minus uh what would it be two yeah it would be two because we've Removed the first letter and we want to remove the last letter so we want to grab just the total length of the string minus 2 okay so that is our solution right there let's just go ahead over to our problem and write it out so this is pretty easy

we just return string. substring or maybe we can break this out so that it's you know clear as day for you uh length of string is going to be equal to string. length and notice how I have not added These parentheses at the end that is just the nature of this function and I just know this by experience but you'd figure it out uh probably by Googling it or at some point after you try doing this so let's say we try to do this as we would think this makes logical sense but it's going to

say string. length is not a function now go ahead and copy this just copy this and paste it into Google and you're going to get stack Overflow answer that tells you how to do This and it says oh you have to use just length and you don't have to add those parentheses so that's how might figure that out on your own but I happen to know that that is how we write it so string. length and then we need to get the substring so we'll just return that straight away string. substring we want to start

at the first character or actually the second character and then we want to get the length of string minus two Characters okay so let's see what we get pass the test as we expected okay let's submit it now as you can see there's a maybe even simpler way to do this so we can use the slice method um if we go to the built-in functions if we would have looked so we grabb the substring method but there is a slice method uh which is right above it so extracts a section of a string and returns

a new string well in this case I was just not being smart I overlooked that and didn't realize but if you just read through these this would obviously be a better selection than substring but it does give us the idea that you can solve this in multiple different ways and I'm sure that at some point yep down here someone solved it the way that we solved it um in this case they're doing string. length minus one which is very interesting oh so this is actually not the same so substring is different than the one that

we used as You can see we have the one that we used used and then substring so these are two different methods they work kind of similar a little bit different so that's why that one works that way but you can see that uh this person used exactly what we did so multiple ways to solve a problem let's see if we can blow through the the last couple of these so let's go to sum of positive you get an array of numbers return the sum of all of the positive Ones okay so we're going to

Loop through this we're going to grab every number from that array and then we're going to say if the individual number that we have grabbed is greater than um or no yeah we'll say greater or equal to zero um I guess we don't even need that we just say greater than zero then we want to sum it but we need to have a sum Variable so let's initialize a sum variable and set it equal to zero and then we'll say if it's a positive number we're going to say sum equals sum plus the number that

we're using there and then at the bottom we just return the sum variable and we should get the correct answer passed it all this is pretty similar to a previous question that we did uh in this video so we'll submit This as you can see this is uh a well- commented solution that is kind of the same thing that we just did so we didn't do too bad now obviously you can use a simpler method so reduce similar to how you'd find the average of an array um but once again this is this is pretty

complex like you're using a pretty complex um function on an array and you're using a Turner operator within here so that's you know that is optimized to the Max so we got some basic mathematical operations let's go ahead and go here it says your task is to create a function that does four basic math operations it should take three op oper or arguments so we want the operation which is going to tell us are we adding subtracting mult multiplying or dividing and then the two values we're doing so this is this is rather simple um

this person has formatted this function a little differently than we're used to this is Just a different way to format it I'm just going to bring it back to how we're used to seeing it doesn't really matter okay so the basic operations so the first thing we want to do is write a switch statement you're probably getting used to this at this point and for the switch statement we want to pass in the operation so it's going to evaluate that and see what the operation is and in the case that the operation is a plus

we'll do something add a break statement and Then we'll fill in the rest of these with case statements then I believe all we have to do is just fill these in so we can return uh from here or we could set it equal to um you know a variable so since we added the break statements let's go ahead and just initialize a variable we we'll call it result and we're going to say the result is equal to Value 1 plus value two we can copy this same line down And then at the end we can

return the result whatever we get so let's indent these correctly doesn't really matter just for readability and then we'll just change the sign here so we can put a minus sign here we can put a multiplication sign here and a division sign here all right let's go ahead and attempt it all right that worked I have a feeling that someone solved this in one line We'll see this is how we did it yep right here so this this is very um simplified but let me explain what this is doing so if we type in eval

let's look at uh JavaScript eval and we're going to learn about this a little bit so what this does the eval function evaluates or executes an argument so if we have three uh arguments passed in we have the operation we have the first number and the second number and it's always going To be the same um for each one so each one we're just substituting this operation well you might think oh hey let's or let's go ahead and train again on this one so that I can show you exactly what I'm talking about so let's

go up here and in this case we might just say return the or the value one and then the operation and then value two now this is going to obviously not work that's not valid JavaScript right here and all We're trying to do is we're trying to turn this operation into a JavaScript operator and all we have to do to make that happen is surround it in this eval statement right here and basically what it's going to do I believe you separate it by comma separated values or no you put it in one big string

so let's go ahead and create our uh string so our operation string is going to equal value One Plus operation plus value two um and In this case some of these are going to be numbers so we yep that should work because value one is a string so everything else is going to be um coerced into a string so that should work so operation plus value one value two and then I want to just console. log that so that we can see what it represents here so we'll console log that and comment out this return

value for just a second so let's test that and you're going to see that the console log Is giving us the following operations here and if you you know look at these these look like you know valid MTH operations but right now we just have them as a string but once we enclose it in uh the eval function so we say eval and then we pass in our operation string it's going to evaluate that string so in other words it's going to evaluate the string of 4 + 7 and then we can just return the

result and this should work the same as Our much longer code that we wrote so let's let's go back and just see what that one person wrote there they just you know abbreviated everything but did the same exact thing so just another way to solve it more efficient next up we have a string repeat write a function called repeat string which repeats the given string Source exactly count number of times okay so this is what we're going to get they're going to pass We want to repeat it six times or five times and here's the

string that we want to repeat this is another classic example of where you can use um a loop so we'll just set a loop equal to um just the basic syntax we want to go until I is less than the I is less than n so let me replace these number of repeats and then the string that we want to Repeat so number of repeats okay so We're looping through this and let's go ahead and make a starter string and we'll just set that equal to just an empty string here now all we're going to

do is concatenate strings as many times as this Loop goes so we'll just say starter string equals whatever exists in that starter string plus the string value and this should return the correct answer for Us it works pretty consistent with what we've done in previous problems with the loop and then we have a variable up here that Stores um some sort of value that we later return after we've modified it several times with values in a loop and of course there's a an easier solution so you can see down here that we can just use

the repeat function I didn't actually know this was a function um but if you go to the string Methods there should be some sort of Repeat so let's see not seeing it right now what are they doing here so that is a string method did I miss it let's search for it on the page don't see it here this might be a new method okay so maybe maybe use W3 schools it's more updated that must have been a recently added method of some sort yeah it looks like this came out in es6 which is the

newest version of JavaScript uh spec so that's probably why it's not on the other site there interesting so you can use a repeat string to uh repeat a string number of times very interesting okay go to the next problem convert a string to an array this should be very easy because we've already done it um at least I think we've done so many problems at this point I think all we have to do is say string Do uh split and then we split it with an empty character oh that's not how we do it okay

uh we don't want to split it like that so let's see oh oh okay so we want to split it by spaces so there's a space in between these words so all we have to do is press the space bar in between these quotes and it adds a space in here that we want to split it by and this one does Pass you can see that pretty much everyone solved it the exact same way here should be getting to the end of these problems here congrats if you are still around and solving these problems with

me I would presume that uh very few people would be so remove string spaces so remove the spaces from the string then return the resultant string now this one feels like there is some Sort of built-in method that we can use uh since we didn't find the newer methods on tutorials Point let's go to uh W3 schools I'm thinking something called trim yeah like trim might do this says remove white space from both sides of a string I think that's what we're looking for here so let's go ahead and return X which should be a

string like I don't know why they're calling it X here just call it a string so string. Trim see what that does uh this is not going to work looks like there's some numbers uh put in here and it looks like the trim method is only going to do this at the end of the string so let's try this out in our uh Dev console let's do a test string uh string that has spaces between oh I'm just blanking out completely I got to name this variable so string equals that sorry about that I'm kind

of losing it here all right so if we use string. trim it looks like what's happening is it's only removing the spaces at the end kind of as this um tells us so I wonder if there's another method don't know if there is so what we're going to do is we're just going to combine the methods together so first maybe we put this into an array so we'll say string dosit and we want to split it by a space so now That we have um everything split out now we want to go through each of

these in the array um and we want to remove the white spaces around them so let's let's go ahead and write this code out and see what we get so we'll turn it into an array so we'll split it by spaces and then we're going to Loop through this array as we've been doing and for each item in the array we're Going to uh remove the spaces around it and we're actually going to build a new array so this is going to introduce the push method so uh we'll say new array. push and what that's

going to do is add an element to the end of the array so right now it is an empty array and we can push items into the array and what we want to push is going to be the trimmed version of each string that we have or each different array item which just happens To be the subsets of that original string so in this case we'll say trimmed string just breaking this out for clarity is going to be um equal to the uh what are we looking at so the array at index i. trim so

now we know that this string is trimmed together there are no spaces anywhere and now we're going to push this into the array so at this point let's go ahead and console.log that new array That we're getting so let's test that and you're going to see that we have an array in every case that's going to have you know the characters with no spaces around it and in this case it's just an empty string that's not even a space or anything so if we combine that it's not going to add any spaces of any kind

at this point we can use um a method called join so all we have to do is um our final string is going to be equal to Our new array. jooin and we want to join it by that empty character there and at this point we can return the final string and I think that that should solve the problem all right so we passed it looks good okay I think we're we're closing in on the end here beginner lost without a map given an array of integers return a new array with each value doubled okay

so there's actually um it says for the beginner try To use the map method and this is basically just saying um to you as the beginner like hey you could solve this in you know an easier way but go ahead and try to use the map method so we'll we'll do that we might as well so we're going to get uh some array I'm just going to rename that so that it's not undescriptive and then we're going to go and look at the map method and this actually belongs to arrays so we go to JavaScript

arrays and then we go down to The array methods or functions and you're going to see this one called map down here and what this map um function is going to do is it's going to take the original value in the array and it's going to apply a transformation to it and that transformation is just basically going to return a brand new array where every unit of that array has been transformed so previously we have been going through these for loops and storing things in variables and in Creating new variables and stuff like that but

we could always use this map method um so let's go ahead and try it so we're going to return the array. map and then in this case we actually have to pass in an Arrow function so this this is what we call like a a call back function we'll get into this uh a little bit later but we're going to have a callback function so this right here let's just break it out you know into a separate space so you can see what we're Doing so all we're doing is writing an anonymous function or a

arrow function and then within that Arrow function we're going to break down into the new line and we're going to return a value so this is a very weird um setup here so I'm actually going to um I'm going to go ahead and remove this so I'm going to say our result array is equal to whatever this map function returns and then we're going to return the result later so that We don't have that weird syntax so basically whatever we return from this map method or this this function that's actually embedded within the map method

um whatever we return is going to be the transformation and then whatever we pass into it so um we can just provide a parameter so uh array item is going to be what's going to be passed in into there as an argument so we're going to just say array item multiplied by two which is what they want us to do with Each value so this is going to return us an array with the values doubled in it and we return the result we passed um I would suggest reading up on that method trying it out

a little bit but just realized that what we've done here is we've put a function within this other function that takes that function as an argument so um to to summarize this we've basically passed in a function as an argument to another function and then that function actually Executes our function that we passed in so it's it's a bit of a tongue twister but you will understand this with due time and I would definitely put this on your radar as something that's very useful in JavaScript at this point I'm doubting myself for picking 25 problems

this is exhausting but again congrats if you're still around um let's keep going all right is he going to survive a hero is on his way to the castle to Complete his mission however he's been told that the castle is surrounded with a couple of powerful dragons each Dragon takes two bullets to be defeated our hero has no idea how many bullets he should carry Assuming he's going to grab a specific given number of bullets and move forward to fight another specific given number of dragons will he survive return true if yes false otherwise okay

so basically what this is saying to Us is that we don't know how many bullets are coming and we don't know how many dragons are coming either but we still have to figure out if this hero is going to defeat the dragon so let's see how we do that the rule is this each Dragon takes two bullets to be defeated okay so basically what we could say is if the bullets is double or more than the amount of dragons then we return true so we'll basically just say in in This case let's go ahead and

use the Turner operator I know it's late in the video brain's probably fried at this point but let's use the ternary operator we'll store it in a result variable so we'll say if the bullets divided by dragons is greater or equal to two then we're going to return true otherwise we'll return false and then we can just return the result but we don't even need to do that we can just return that tary operator So let's go to the beginning and hit return so basically what it's doing is it's looking at this expression and it's

uh evaluating whether that expression is true or false um and then if it's true we return true if it's false we return false so there's actually some duplication going on here we don't even need this Turner operator in the first place all we have to do is return that expression because if this uh evaluates to true then the hero Defeats the dragon if not then we return false so we should be able to just do this you passed it and it works so that's how you would solve this in the most simple way possible and

honestly it's just a math problem plus uh JavaScript expression with some operators array plus an array so let's train again I'm new to coding and now I want to get the sum of two arrays actually the sum of all their elements I'll appreciate for your help huh it Looks like this person was not writing a challenge they were asking a question okay PS each array includes only integer numbers output is a number two maybe they weren't asking a question very very weird wording for this okay so this is not going to work let's go ahead

and test it as it's written you can't just add an array together um but what you can do is you can Loop through each um value of the array and this is actually a perfect uh Time to talk about embedded for Loops let's go ahead and do that first we're going to write our outer for Loop which is just what we've been writing all this time so we're going to say until I is less than array1 or array one. length i++ and then we go into it okay but we also want to grab um the

values of array to so basically what we're trying to do here let's say that we have an array of 1 2 3 and an array of 2 3 4 our resultant array should be 3 5 7 because we added uh we added the number at index zero for both arrays then we added the number at index one for both arrays and then we put it into a new one so that's what we're going for I'm going to leave this down here for a second just for our reference but in this first Loop all we're able

to get is um actually we don't we don't need an embedded for loop I don't know what I was thinking there all we have to do is this we just have to say um array one Value is going to be equal to array 1 I and then we can come down and say array 2 value is is array 2i all right and then we want to uh say added value something like that so we'll say array one Value Plus array 2 value that gives us the sum and now we want to start building a new

array so new array equals something empty and like we did in a previous uh problem we can use the push method to push a new value to that array so we'll just say the added value here And now when we get done with this for Loop right here we should have this new array populated with our new value uh which should be this resultant summed array so let's return the new array and see how it goes looks like we failed in in a lot of cases okay let's see why oh so I misinterpreted this question

entirely uh we want to actually give a single number okay so I'm new to Okay blah blah Blah so we got two arrays we want to sum all of their elements okay so we don't need a new array we just need a sum variable which is going to start at zero so the added value we can keep that then then we can just say the sum equals the sum plus the added value and then return the sum at the end this time we passed it okay just m misread the question and honestly I I Don't

know if this was the best question to choose I think this is our last uh easy question coming up maybe so all right so this one has some nice clear instructions that's nice so the introduction the first century spans from year one up to an including the year 100 the second from year 101 up to and including the year 200 the task is given a year return the century it is in so the century of 1705 Returns the 18th Century okay I mean this is just uh pretty basic so let's go ahead and solve it

now it looks like the catch here is going to be these two examples so 1900 is going to be the 19th century while 16001 is going to be the 17th so like it says if it's you know one greater than the even year then we go up a century okay I believe we can use some sort of modulus operator here let me try um so let's let's let's Say that we have a century of 1901 um let's go ahead and do modulus we'll just start with 100 okay so 100 goes into 1901 a uh well

it would be what 19 times with a remainder of one but if we had 1900 modulus 100 we get zero okay so that's interesting so what we could do is we say if the Sentry we have modulus 100 returns a zero then we want to just grab the first two letters Or first two digits of that number and return it so in this case 1900 we just want to return 19 I believe right so we just want to return 19 so let's just say that this is this may be a bad solution but let's try

it so if the year modulus 100 equals 0 then that means it's an even uh even sentury so we're going to just say we want to return the first two digits and to do that um we can um let's go ahead And look at some of the the number values okay so pretty much what we're going to have to do is we're going to have to convert it to a string grab the first two you know digits or characters and then convert it back to a number this may be an indirect way to do it

but we'll try it anyway so we'll say year two string then I'm going to chain um chain something on here and I want to grab the substring in this case I want To start at zero and grab two characters and then I want to turn this entire thing into a number so we'll just cast it into a number this way and let's go ahead and test that to see if we solved a couple of these excellent so we solved the ones where it's an even now if it's not then we know that it's not an

even year so it's always going to be one greater so 1705 returns 18 so again we can grab that substring so we're going to grab first two digits it's going to Be equal to the year two string substring 02 so that gives us the first two digits and we want to keep that as a number and since we're repeating ourselves here let's go ahead and put this at the top of our code and just get that from the very beginning and now we can take this expression here and replace it in here so all we

have to say is first two digits so now that works the same we're turning that into a Number but down here what we want to First do is we want to return a number of course um well it's already okay never mind so this is going to give us a string we need to return a number so um the first thing we need to do is turn that into a number by saying first two digits and then we want to add since this is a number then we want to add one so I think this

may work actually okay so the problem here is the Test for year 89 since we're doing modulus 100 of course this is not going to work if it's less than 100 so in this one Edge case we could just put this at the top at the very top and say if the year is less than 100 we just return one so that takes care of that case and we test it should pass all of them we'll see if it passes all the test okay so clearly that was not that was a quick fix solution it

didn't Actually solve our greater problem so let's dig in to see what we're dealing with here obviously there are larger numbers num at stake and much smaller numbers at stake so our uh attempt at using modulus 100 is not going to work very well so I believe our solution may be close I'm actually going to go ahead and see if there's something in the discussion down here so you can always look at the comments and Suggestions to see what other people are thinking about um we'll see okay these are very useless okay so this is

not really helping us that much at this point my brain's so fried we're going to go ahead and search this on Google stack Overflow uh we'll just say Century from year JavaScript stack Overflow just curious to see how other people solv this okay so it looks like what they're doing here is using the the math. sealing function let's see what this is okay so here's the the ceiling function it returns X rounded upwards to the nearest integer so we'll go back and attempt this again and see all of those different Uh test cases so let's

just grab one of them here so 400 390 and let's see what math. ceiling returns for that oh and we have to divide it by 100 so let's do that again so 404 which is what we're trying to get at because we round this up to the nearest 100 okay so that's basically the answer then um couldn't think of that on my own here Today so let's go ahead and try that um instead of all this stuff let's just return it math. sealing is year over 100 and this may not may not get the cases

where it's an even or maybe it does let's attempt it all right there you go so that's that's very clever but um I guess in this case when I was trying to solve it here um I did not go through the scenario in my head where the years would be you know greater than say 1720 or 1930 like I didn't think about what if we have like year 20,000 something like that so in this case it's a little bit of the instructions like they didn't you know say a whole lot about what the input was

going to be they didn't say that were going to you know go up to a huge uh input like they ended up doing so that's partially the instructions and then it's partially you know I should have thought of all the edge cases and should have Thought of the fact that the number could be greater than four digits like this so we solved the problem with a specific set of input but not all of the possible input and that's just that's very common when you're solving coding challenges you always have to think of the edge cases

so while I didn't get this the first time it's definitely a good learning opportunity um just to see you know how it is when you're trying to solve coding challenges all right for This one we're converting cat years and dog years and human years so we're only going to get whole numbers and we're only going to get human years one or greater okay so 15 cat years for the first year nine cat years for the the second year and four for each year after that uh 15 dog years for the first year nine for the

second and five after that so notice we have some similarities in the first two they both go up by 15 and N in the first two years okay so what are we getting here what's the input um I have a cat and a dog I got them at the same time as kitten and puppy that was human years ago so we're going to get a number passed in here return their respective ages now okay so the easiest one is going to be human years plus or no we just say human years in there so that

should be the answer to The first part of the array the second two are a little bit harder so we have to get the dogs and the cats all right so the first thing that we want to do let's see let's say human years is one well in that case we're going to return 15 for both of them so let's make a variable here and then we'll say if human years equals 1 we want to return um this right here So so we're going to say human years and then we're going to say the cat's

age is going to be what 15 and the dog's age will will be 15 if the human years are equal to two let's see we're going to add nine to that so we're going to return something very similar but this CA uh this time we're going to return 24 here all right and then the remainder we're going to say uh in the first two years We get to 24 for both the dog and the cat but then they increment by different amounts so how do we solve this okay so so let's say um cat excess

years is going to be equal to human year minus 2 or we'll just say we can just say excess years and use this for both so we're basically trying to find you know how many years above the first two years are we looking at here and then from There we can probably just multiply it by whatever this multiple is so um we'll say extra dog or no we'll start with cat extra cat years equals excess years time what 4 and then for the dog years we're going to do five so we're just going to make

a new variable and say extra dog years so then we just return at the bottom here if we have not hit either of these uh logical statements um because if we return from here everything's done we don't reach Any of the code below but if we have not reached either these code paths we're going to reach this and we're going to always return human years just as the number of years but then we're going to say um we know that we've got at least two years if we reach this code so we'll say 24 plus

the extra cat years and then we'll say 24 plus extra dog years let's see if this gets it right awesome we got it right so that's how I would solve that problem let's see How other people would solve it okay so this is interesting it's it's similar concept we asked if it was the uh year one or year two and then we basically just um did the same thing just in less code so I feel pretty good about that we did pretty good on that one so especially not being able to think I've been going

at this for a while now all right I think we have like two more in total I'm going to make it to the End our football team finished the championship the results of each match looks like X colon Y results of all the matches are recorded in the collection all right write a function that takes such collection and counts the points of our team in the championship the rules for counting points if x is greater than y three points if x is less than y 0er points if they're equal one point there are 10 matches

Total and X is going to be between 0 and 4 or not between it's going to be inclusive of 024 and then Y is going to be 024 okay so this games let's just make this more specific that's going to be a games array um we'll initialize by saying let total points equal zero and we're going to set up a for Loop all right so we're going to go through each and we expect each value to Equal something like this so we'll just say value and that's going to be games array with the index of

I which starts at zero so just for reference I'm going to say sample value in a comment and this will be 3 colon one all right so the first thing I going to think about doing since three and one are used for calculating this I'm going to split them so we're going to say parts are going to be equal to value. split and we're going to split it by a Delimer of a colon so now let's console. log the parts of this array and we're just going to see what that looks like so these are

the values that we're getting in each iteration of the for Loop so we're getting you know one and one two and two three and three so on and so forth and now what we're going to do is we're going to say all of these different scenarios so we're going to say if Parts zero so the first one if the First value so X yeah so X and Y so the first one is X so if Parts zero which is going to be X we might as well break this out into a descriptive variable so there's

your X and there's your y the first and second value of that array and we're going to say if x is greater than y we're just following the rules over here basically we're going to do something And if x is we'll say else if x equals y and then finally else which is just basically going to be that last condition which means X is less than y okay so let's just put it in there we'll say total points equals total points plus and in this case it's going to be three then down here let's just

use a shortcut cuz we can so we'll do plus equal this is just an operator that does The same thing as here except just in a shorter way so we'll do plus equal and then in this case it's a tie so it's one point and then otherwise it's zero points so in this case we actually don't even need this last block because it's adding zero which doesn't even matter matter let's return the total points here all right we passed it awesome not even going through the explanation there I will assume that You're pausing the video

to do that oh that's an interesting solution right there not going to get into that though okay at this point I believe this is the last question no we finished it h looks like we finished all of them I I don't know I think we skipped this last one The Vow count no we did that at the beginning anyways if you enjoyed this video give it a like um subscribe to the channel uh Please I'm very tired right now from going through all these challenges together with you be sure to follow me on code Wars

and I'll follow you back and stick around for the next video in this lesson series see you [Music] later now in the last couple of videos we have talked about um the basics of JavaScript essentially so we started with some variables and we went through you know functions and loops and Operators conditionals all that good stuff so at this point we're ready to jump into some of the built-in um functions in objects within JavaScript which is going to save us a ton of time when we're actually writing our code because it basically uh it's a

bunch of shortcuts essentially and also just kind of the basis of the JavaScript language here's what we're going to cover in this video and the next couple videos but all encompassed within lesson six of the Series so we're going to learn how to read documentation that's a really important thing as a developer uh we're going to do a quick start kind of an overview of callback functions they're a little bit confusing but we'll get through them and then we'll talk about primitive values versus um object values within JavaScript talk about dates regular Expressions string Methods

array methods um the math Library air types and then a couple data types that we Have not actually covered yet that would be not a number or n an and then also null and undefined values so we've got a pretty pretty big laundry list of things to cover uh in this lesson it's going to take a little bit of time but I promise you when we get to the end you're going to have a much uh bigger overview of what the JavaScript language is all about now the one thing that I'll say as we go

into this lesson is this is probably going to be the last one where We're just focusing solely on JavaScript we have to get through a lot of different things so we have to cover HTML and CSS and then a couple different other things before we actually writing our web apps so this will be the last kind of lesson that we're talking about JavaScript alone now there are other things in JavaScript that we will not cover quite yet so that would be like the async AWA and promises and classes objectoriented programming you know it All kind

of goes together and those are some more advanced JavaScript topics that I'm going to pick up later down the road when we've actually written uh some sort of sub substantial web app so hold tight on that I'm not going to cover it yet but we are going to get through the basics here and then we'll start getting into actually building that web app of ours the first thing that I want to do is actually go through how do we read documentation and we can start at the Milla web docs which is called mdn for short

and we've looked at this previously um in the code challenges from the last lesson 5 but we didn't actually go into depth on how to read this documentation and I think it's really important uh to do so so you get to the homepage of the mdn web docs you go to Technologies and you'll find JavaScript now JavaScript is documented in a variety of places this just happens to be um what most people consider the Official JavaScript documentation so once we're on the JavaScript homepage you can see on the left you've got this navigation bar uh

there's some tutorials that you don't need to go to because this is a tutorial about JavaScript but then what we're interested is the references so when we talk about references that's generally going to be a big part of any sort of documentation that you're looking at generally with documentation you're going to have some Sort of quick start guide just to get you started with whatever library or framework that uh you're reading the documentation for then you're going to have some sort of tutorial usually and then finally you're going to have an API reference um sometimes

they just call it a reference like they do here sometimes they call it the API sometimes they call it the API reference uh whatever the case it's all kind of centered around okay here's the core of of this library Or language or framework and this is where you need to go to learn more about using it so that's what we're interested uh in for JavaScript in particular right now since this video is all about the built-in objects and functions uh we can go to this built-in objects drop down in here you'll scroll down and you'll

see a variety of different uh types of objects and um these objects have things called instance methods uh it kind of gets into object-oriented Programming and I don't want to go there but that's why I'm saying objects and functions um now it's going to say objects here but the functions are kind of uh what we call a method on top of these objects that that you can call from the object so um you can scroll down and see a bunch of different ones most of these are going to be irrelevant to you as the complete

beginner and quite honestly they're going to be irrelevant to you um Even as you get better so the point of this video is to point out the most important ones the ones that you're going to be um that you're going to need to get the most familiar with and we'll go through them uh in more detail but I just wanted to give you an overview of this and then as you click through a specific object so let's say we go to string which as you'll learn in a little bit a little bit later in maybe

the next video or Something uh a string is actually an object in JavaScript like everything else so it's a little bit confusing but you'll get the point in a little bit now once we're on the string uh documentation page or reference it's going to give you an overview of everything and this is kind of the the main homepage for this string object now in JavaScript everything kind of behaves as an object and it has these things called Methods on it which are the Functions I'm talking about when I say method you can just think of

it as a function um that is you know attached to that object so as we scroll down here on the left you're going to see this thing it says string. prototype. whatever method we're talking about now the Prototype part that's a complexity of the JavaScript language that we have not covered and we will not cover in this series that's a little bit uh above our pay grade and we don't need to get into That to actually start writing the code once again I've said this in previous lessons if you want to understand the Prototype chain

and all of these complex things about JavaScript um of course after you've kind of mastered the basics you can go to the you don't know JavaScript series series um it's completely free so you don't know JavaScript and it's actually hosted on GitHub um I think his name is Kyle Simpson um I would go to the first Edition Branch here and then you can scroll down and just see all of the different books that he's written on JavaScript it's a really good guide that's going to take you through uh the nuances of this language anyways coming

back to here so we have the object at the beginning prototype and then the method so let's click on one of these methods and see how we actually read the spec or the reference for each method I think a good one to start with um let's See which one do we want so we want to start with the pop method this is a really easy one to um get used to and this is not part of the string spec so we need to go to arrays actually so let's go to JavaScript and then we'll go

to built-in objects and click array now same thing you have all these methods here and we're going to go down here to the pop method now when we get to the pop method reference you're going to see a little summary and Then an example and this is the case for all of these different methods usually you should be able to figure out or get the gist of what this does and how to use it from just the starting section but it's really important to start developing the skill of learning how to read documentation and often

times it can be a little bit confusing um especially since each uh language and site and framework and Library it depends on how they've written their Documentation it might look a little bit different so anyways the pop method removes the last element from an array and returns that element this method changes the length of the array all right so we know it is mutating or changing um the existing array that we're working on now if we come down to the syntax section this is what I want to focus on in this video because if you

are a more experienced developer you should be able To um kind of figure out all of the nuances of a specific method or function from this syntax section now when we look at the pop method it just gives us this basic little syntax and you can see that there's nothing in this parentheses um nothing that you pass in and then when you come down to the return value it says the return value is the removed element from the array and then it says undefined if the array is empty so it tells you here's what the

normal return Value is and then if you by chance pass in an empty array which you probably won't um unless you're looping through it or something then it returns undefined so this is a really basic one and just by looking at this you can see how it works and we can come over to our console we can create some sort of array here so we'll just put a couple numbers in here now if we print the array it's one two 3 and then array. pop it's going to return The length of the array so three

is the length of of the array but now if we print the array we only have two elements in it because it removed the last one now this is a really simple one but the next one that we want to look at is going to be the joint method and that's because it's going to add in a little bit harder documentation for us to read now before I do that though let me go back to the pop method so we got this overview section the syntax the Description just gives you some more context around it

and then you have some examples now as we get to the specifications this is going to actually take you to the specific link within the ecmascript um spec and we talked about that in I think lesson two when we talked about what is Javascript um but this spec is going to we might as well click it and just see where it takes us so it should take us to the pop method you can see up here And this is the spec for you know the JavaScript language so just takes you there it's not something that

you'll be probably clicking on all that often and then finally you come down here to browser compatibility and you'll see all of the different uh browsers and then you'll also see a runtime over here so so node.js is not a browser but it's a runtime that runs JavaScript so it shows you the compatibility for this method within all the different browsers in This case uh the pop method is one of the oldest array methods in JavaScript so it's supported by all the browsers but as you'll see with some other methods that we look at it's

not supported in all the different browsers and often times it's Internet Explorer that doesn't support it so not a big deal all right so anyways let's go back to let's see not the pop method we wanted the join method which is going to be somewhere here all right so looking At the join method this is going to be a little bit more complex I'm going to kind of skip over this first section just to get an overview it says it creates and returns a new string by concatenating or joining all the elements in an array

all right so that's the basics now coming down down to the Sy tax where we're trying to focus on you'll see that this um this code block here has a little bit more complex uh syntax going on so it says array. jooin And then in here we have this uh word called separator and we have these little brackets around it now what these brackets mean within the JavaScript or the mdn documentation it means that they are optional so the separator this is just a description like that word is arbitrary so it says separator just to

give you an idea of what type of parameter it takes as I guess an argument so remember we talked about parameters and arguments two sides of The same coin parameters are what we Define when we declare a function arguments are what we pass in to that function when we actually invoke it call it um you know whatever you want to say there so this in this case we have separator and we can read more about this here so the separator specifies a string to separate each pair of adjacent elements of the array the separator is

converted to a string if necessary if omitted the array elements are separated With a comma if separator is an empty string all the elements are joined without any characters in between them so if you are following along with the 25 practice problems from the prior lesson we use this method a couple of times and we actually had to use that empty string to join all the elements together with nothing between them so this is where we would have found that now of course it's optional so if you don't pass anything in there it says if

Omitted the array elements are separated by a comma so it's optional and then we come down to the return value and it says a string with all array elements joined if the array length is zero and empty string is returned so we can go ahead and test that too so let's go into our console we have an array here um let's let's actually create a new one so let me clear the screen and we'll say string array and then we'll say hello world all Right so what if we wanted to combine those together now we'd

use the join method so we can say string array. jooin now as we see it right here we omit all of the arguments um it just joins it with this little comma down here now if we go back and look at what else we can do so uh if the separator is an empty string it joins it without anything between them so let's put in an empty string here and you can see that it uh joins those together into One string with nothing between them now we can add a space here and press enter and

this is probably closest to what we would want if we were doing this so that's just how you would read this now the last one I'm going to look at for reading documentation is a little bit uh trickier and we're going to have to kind of use these Concepts we just talked about to get through it the example that we're going to do is the array. includes method so let's click on that wherever It is now this includes method determines whether an array includes a certain value among its entries returning true or false as appropriate

now we're going to cover this a little bit later uh in this lesson so I'm not going to go too deep into it but let's go ahead and look at the documentation here it says um this is the code block that we're looking at and you'll notice that we have a value to Find and then we have uh the brackets here and the from index so breaking this down from how we understand it there are no brackets around the value to find which tells us that there is that is a required parameter you really can't

run this method effectively without that required parameter now it has this comma here which basically means okay we're going to the next parameter that this function will take um and then it's surrounded by these brackets at the Beginning and end which means that the second parameter is going to be optional now if we look down into the parameters description value to find is the value that we're searching for and it says it is case sensitive so that's nice to know and then the optional parameter is the from index and it's basically saying you can start

looking within this array at a certain index so you know if the value to to find is earlier than that index you specify it's not going to include it So that's just how we would read the syntax of this and again we're going to go through this a little bit later in the lesson so I'm not going to do an example right now and just to point out what I was talking about earlier if you scroll down so includes is actually a little bit of a new method I believe um I could be wrong on

that but I thought that it was offered only in the latest spec of JavaScript um so if you scroll down to The browser compatibility you'll see that Internet Explorer has no support for this method so if you're developing an application for that has to run effectively in Internet Explorer um probably the only case that that's going to happen is if you work for like a really large company and that company kind of has Legacy systems and applications that still run in Internet Explorer you don't want to be using this includes method because it might screw

Up your application so that's just what I was talking about earlier in the next part of this lesson uh six here we're going to be talking about callback functions when I first started I was really confused about these and I honestly think that it's just because I never stumbled upon a good explanation um something that really broke it out into the pieces that I could understand so hopefully in this video um I can do that for you and Prevent you from suffering from that confusion for several months like I did now the reason we're talking

about this is because the built-in functions that we'll see later in this lesson are going to use callbacks or callback functions heavily and if you don't understand them you're not going to be able to use those built-in methods so with callback functions they're not not any different from the functions we were writing in the previous lesson use you know use the Same syntax so you can use the regular function syntax you can use uh Anonymous functions or Arrow functions it's all the same it's just a different way of using functions and it's just a little

bit different way of thinking in general to start us off I'm going to paste in some code that we're going to actually understand by the end of this little lesson so this would be an example of using a call back function go ahead and pause the video just so that you can Take a look at it and get yourself acquainted so I'll press enter here and you can also simplify that code that we just looked at um into this right here so it does the same exact thing um you can see the answer is the

same and I would just pause the video and just look at those two code blocks just for a few seconds to just get your mindset uh around what we're doing here now the entire reason that I'm walking you through callbacks here is because often Times you're going to see code that looks like the second option here which is simplified yes and it's how I would write it but it definitely does not display the concepts that you're supposed to be understanding very well so in this section I'm going to be writing code that I normally would

not write um just because it's a little bit longer form and more broken out than I would write it you know if I was developing an application but hopefully You know that longer form of the code is going to uh clear up some of these concepts for you and really help you understand what callbacks are all about so let's take a look at each of these code blocks um let me clear the screen and just get us the um main code block and I have some comments pasted in here so let me clear the screen

and we'll paste this in here maybe space it out a little bit so that we have some room to work with all right and if we look at This code here uh there's a couple things going on the first thing is we have two different functions here um the main function right here and then the Callback function so often times you'll see the Callback function kind of just uh embedded within that main function um but in this case like I said I'm breaking it out for clarity so this main function it takes three arguments the

first argument is going to be some number I just called it random number It's arbitrary um and then should call so this is going to be a Boolean value uh value which is basically going to ask whether we should go into the call back and then the call back itself so walking through this code let's first look at result so the result variable is going to be set equal to the random number now what is random number now of course random number is a parameter to this function and therefore whatever we pass in as the

argument uh to the function is Going to be the value of random number so if we go to the bottom where we actually invoke or call this main function you'll see that the random number is going to be 20 right here so in this case random number equals 20 and therefore the result variable also equals 20 because we're assigning it now if we come down to this next part uh there's some comments here that's not affecting the code at all we just have a simple if statement so we say if should Call so if you

remember we can pass a Boolean value alone we don't have to put any equal signs or anything and we can place that within a conditional to evaluate it so if should call is true then we're going to reach the code within this uh this conditional block if it's false then we just skip this conditional block and we return the result so basically if should call is false then we're going to skip this in the result is currently equal to 20 and Then we return the result so the return of this main function is going to

equal 20 but of course it returns 40 as we see down here so therefore the should call is true as we see here in the invocation of the function now the last part is the tricky part that's the call back now the first thing I want to point out here is that callback this name that I've given it is entirely arbitrary you'll see this very often you might see um either this as call back or you might See uh the letters c and b for called back and that's probably a convention that you're going to

come across but it doesn't have to be that way you can call that whatever you want it's just a normal uh parameter but in this case instead of passing in a number or a Boolean like we did for the first two uh parameters we're actually passing in another function so basically what we're doing is we're passing in a function to another function and we're asking that You know parent function to execute the function that we passed in in this case my call back is what we've passed in you can see in the arguments down here

at the bottom so we've passed in my call back which has just been declared hasn't been executed yet and so call back right here is going to equal the Declaration of this function called my callback so if you know how to uh run this if we wanted to run my call back all we have to do is put these Parentheses at the end and pass in some sort of number and you can see if we execute this we get 40 which is the same answer of course that would be the more direct way to do

this but this is a contrived example that's hopefully going to explain callbacks to you all right so we've got this value called callback and that is equal to a function uh a function data type that has not been invoked yet so just a declaration and we can basically call This just like this but in this case the call back is actually the function that we want to call so we're doing that sorry about that we're doing that in this line right here so if should call that is true so we get down to this code

right here and what we're doing is we're taking that function that's been passed in and we are executing it with the random number par parameter which happens to equal 20 so we're basically doing what we did down here but within The main function we're letting our code actually execute the function so we're setting that equal to result which returns 40 and then we're going to return result at the bottom so that's going to return 40 and that's how we've gotten to our answer now like I showed you um with that second example a little bit

ago um it's a little bit more abbreviated way to do this and you do not have to write a separ SE function called my callback in order to you know Basically run a callback function so what we could have done in the first case this is how we executed main function we passed in 20 we passed in true and then we passed in a predefined function that we had already written up here but we could abbreviate this so let me collapse this main part and what we can do is say main function and we know

that we have to pass in a random number so in this case we'll stay consistent we'll pass in uh a value of 20 we want The call back to actually be called within the function so we need to pass in true as the should call argument and then we need to pass in the function so in the first case we just put in my call back and it worked but we also could do it like this so we could write a uh Anonymous function and this function is going to take a number so that's just

the parameter that we're defining and we know that if we go up to the main function here it's going to pass in this Random number as the argument so that's what number or num is going to represent and then we have to break it down here and then we have to return the num * 2 which is going to ultimately return us 40 and that's another way that we could write that call back there's other simpler ways so we can also do it like this so let's do main function pass in 20 true and then

in this case let's just put in an arrow function so we have num and then we use our Arrow function Syntax and then we return the num * 2 and once again we get 40 so just another way to pass that in and we can even simplify this a little bit more so we can pass in the same parameters we don't actually need these parentheses here because it's a single argument so we'll take num and then uh we also don't need to break down onto the second line we can actually just take num * 2

and that's going to return it the same way and now we've gotten our answer of 40 Once again so as you can see that's how we get from the most you know contrived simple elaborate example to the code that you're probably going to be seeing in a lot of examples this is what a lot of people use because it's just a much simpler quicker way to write a callback function so hopefully this section um I know it's a little bit confused but rewatch it again if you are not totally clear on this because we're going

to be going into the built-in Functions that use these callbacks very heavily and it's going to be important that you understand how they're working so you might understand callbacks now but why do we actually need them they seem overly complicated don't they well the reason we need them is in my opinion um this is just based from on experience and just observation the two things that it enables is reusability and asynchronous programming now I'll talk about each of these we're not going to Go too much into asynchronous programming in this video for reasons I'm about

to explain but let's start with the reusability thing and that is going to be crucial to really connecting the dots when we get into some of those more advanced array built-in methods that we're talking about later in the lesson to really understand the reusability thing we're going to look at a common array method that's called map so we're going to look at this a little Bit later in the video too but I really want to show this as a lesson of why we need callback functions so what this map method does if we look at

the documentation is it creates a new array populated with the results of calling a provided function on every element in the calling array so it's basically doing a transformation and you're um able to define the function that has all that logic to figure out what it's doing to each element in the array let's take A look at a very simple example now this isn't going to make total sense but it will kind of connect the dots from what we just did with that uh original callback example so what I'm doing is constructing an array very

simple one at that and then I'm going to Define my custom map operation and we'll just say call back so we want to be very specific with what this function represents to us um and then the parameter is going to be the item from the array that we're Mapping over and what we're actually doing here is we're kind of iterating over the array so when we get each element of the array which is going to be passed in as an argument uh into this function we want to return a value and that value is going

to be the transformed value that will kind of occupy the new array that we have so we're going to take the item from array and we're going to multiply it by two so we're we're basically going to take this Entire array up here and uh for each element we're going to multiply it by two so we've got that function defined so far it's not really doing anything but if we take my array and then we actually we need to set this equal to a new array because that the map method is going to actually return

the modified array it's not going to um modify the original array so we're going to take my array map so we're just calling the function that's built into our array and What it requires is going to be a callback function and in this case we've already defined that so we're going to pass in my custom map operation callback and then we're going to execute it now if we look at the new array you're going to see that every element has been doubled and what it's done is it's looped through it's started at two then it's

taken that value of two multiply by two to get four so on and so forth so you can see how um we've kind of Iterated over the array and applied some sort of transformation defined by our callback function now here is where we really understand this concept of reusability so in this case sure it works we're multiplying something by two but it doesn't really convey to us why this call back is so useful now when the creators of the JavaScript programming language introduced this map array what they wanted was to enable the developer to use

this same method for a variety of Use cases so what if we had an array that was full of strings so let me copy in a new array here um I need to name it something different so we'll just say string array and this is going to have a bunch of strings in it and you might say okay well I need to find a different built-in method to map over this and do some sort of transformation well because we have a callback as one of the parameters of this predefined function we have a lot of

flexibility and instead Of looking for a new method we can just redefine our custom map operation now in this case I'm not going to do it long hand like we've been doing I'm going to show you the shortcut so we'll say not my array but the string array which we just defined we're going to call the map method on it and then we're going to pass in a callback function so let me template that out I'm going to have an arrow function right here and what I'm going to pass in is going to be the

item From the array so we'll just say item from array we don't need any parentheses around that because it's a single argument and now the transformation that we're trying to do so if we do this on one line whatever is right of this arrow is going to be returned from that function so all we have to do is transform per it in some different way so maybe we wanted to construct just the first letter of each of these words so maybe we wanted a new array that has the Letter h w m n i and

Z all we have to do is maybe return um the item from the array and actually what I'm going to do here is pass in um no I don't need to I'm just going to take item from array and then I'm going to get it give it the zero index because you can access the first letter of any string by using the zero index second letter by one third by two so on and so forth so you can see that we've returned the first letter of each of these elements in the array and We did

this for an array of strings by just redefining that callback function so that's the value of these callback functions it enables us to reuse the same function over and over again so in this case the built-in map function and kind of modify it for or whatever needs that we have and we can do something way more complex than just multiplying by two we can have conditional logic in here we can say you know if the number is prime then we want to multiply it by Two um if it's not prime then we just want to

return the number itself you know you can do all sorts of different things with this as complex as you want it all right so I think you probably understand why we uh why callbacks enable reusability why they're important you know how they work all that kind of stuff now let's move on to the asynchronous topic so I told you that um callbacks enable asynchronous programming and what that gets us into Is a whole another topic that I'm only going to briefly touch on here so when I say asynchronous all I'm talking about is code that

does not run um immediately so with the code that we've run here on this screen you'll probably notice that when we press enter it executes immediately it's it pretty much seems instantaneous to our human brain now there are times when we're writing code that it might even take up to two three or 4 seconds for a piece of code to Execute and a good example of that is let's say our application database that stores all of our data is you know on a in a different continent from where the user is actually uh clicking so

maybe host my database here in the United States but someone from um I don't know Italy or something is visiting my web app and has to access uh the web app from their browser in Italy and so it's going to send off a a request to my server and then to the database and that Request to get all of the uh information for that web app and perform different functions is going to take a certain amount of time and it's not instantaneous so we have to handle that with our programming and you might just say

well okay let's just wait until it's done and then execute the next line of code well in that case with a web app you're going to have multiple asynchronous operations going at the same time so you're going to have Multiple calls to a web server that are going to take you know half a second uh one and a half seconds maybe even a little bit more and if you added all of those together and you just did it in order your web app is going to take 30 seconds to load and in that case nobody's

going to use it so we have to run all of this code kind of at the same time and for that reason we have asynchronous programming which basically allows us to um run some code and then Run other code while that previous code is still running now I know this kind of gets into the topic of like threads uh execution threads on a computer it's not really what we're talking about here and I really don't want to get into all of the details of this but as we go through this series we're going to be

talking about uh asynchronous callbacks promises and the newer um es6 async and await so these are all different ways that we can write asynchronous JavaScript code You'll see how it comes into play a little bit later in the series if you've been following along with this series you might have heard me say that everything in JavaScript is an object but I haven't really EXP explain myself on that one and since we're uh talking about all the buil-in objects within JavaScript in this lesson I really want to give an overview of this concept of Primitives versus

uh the actual objects themselves I'm going to Put some code on the screen that will hopefully give you a little bit of an introduction and some things to think about here so when we run this code um you can see that we've defined two different strings and we have compared these strings with each other so in the first case we've got this weird syntax here where we're actually using this thing called a new uh it's actually the new operator we're going to talk about in a second and then we are Defining our string with this

uppercase string which looks like some sort of object or something and if you go to the JavaScript docs so or documentation so let's go to JavaScript built-in objects and then you go down to string right here that is the same syntax the string that we Ed to Define this um string right here so string one is actually an object now string two is what we call A Primitive now this is because we didn't you know uh Instantiate it with the object syntax and you can see if we compare the equality of these two the triple

equals which Compares both value and type is going to return false because in the first case we're looking at an object in the the second case we're looking at a string primitive and if we use the double equals they're of course true because they are the same value they're just not the same type so at this point you're probably probably have a lot of Confusion in your head um you're probably thinking a couple things well you're telling me that string one is not actually a string and the answer is yes it's it is not a

string it is actually an object and then furthermore you're saying that this string down here so string to that is a string but how would we execute any of these built-in methods on something that's not an object so there's a couple floating questions here and to understand them you have to know A little bit of the behind the scenes stuff that's going on with the JavaScript programming language let's start off by asking the question what is a primitive now A Primitive this is not a topic that is specific to JavaScript we talk about primitive data

types across varying languages so you know python Java C++ they all have their uh Primitives but in JavaScript A Primitive uh there are six different Primitives that we can look at and we can go to the Uh documentation here um for primitive and it will maybe show us all of the different um Primitives that we have so maybe it doesn't actually I thought that it did but anyways the six that we have are a string a number a big int Ian undefined and symbol some of these we haven't talked about but that's totally fine we

don't need to talk about it yet but what you can think about uh when we're talking about Primitives is that it is the simplest form of something so If a coding language had a periodic table of elements then The Primitives would be those elements of the periodic table so that's kind of how I would uh think about it and those Primitives can actually be used to build up um other things now as you would expect a primitive data type does not have any sort of methods or functions that you can call on them so it

doesn't make any sense if we were to come here in the console and let's Define a string here so we've got some string and now I'm going to put a dot at the end of it just like I was calling a function or a method on an object and if I were to take this sum string and say uppercase so that is actually a built-in function on strings so if you go down to um the bottom here you can see that two uppercase is a built-in um method on the string object but if we're saying

that this is a string primitive then it shouldn't be able to work right well Wrong it does work and that is because behind the scenes when we have a primitive value like this where we Define it with those little quotes or the double quotes even it actually wraps it in that string object so what we did up here right here this is actually happening behind the scenes when you call a specific built-in method on a primitive um data type within JavaScript now this is kind of interesting and all but what do you actually do with

it well The answer to that is not really anything this is more of something that you should be aware of it's just good to know type of information so that you're not wondering in your head well what is going on here you know we're talking about strings but if we go to the documentation it sure looks like this is some sort of object here so it just clears that up for us and if you go to the string built-in object and scroll down um a little bit we have this Section called string Primitives and string

objects which kind of explains the same thing that I just talked about so feel free to read that and really dig in if you want to understand this a little bit better so the takeaway here is that you should not be using this syntax up here with the string Constructor um this is not the way that you write strings I taught you the correct way to write strings in the previous videos this is just for Clarification now if you go to the actual documentation you'll see in this section on string Primitives and objects um down

here it says for these reasons the code may break when it encounters string objects when it expects A Primitive instead so the documentation even recommends to not Define them like this CU JavaScript takes care of it for you but anyways that's just some information around here now the next thing that I want to talk about is that Keyword that we looked at because this is also a little bit confusing and as we go into the next couple sections of this lesson it's going to be important to understand and that is this new keyword which is

actually considered an operator although we didn't talk about it when we um covered operators in a previous lesson in the next section of this lesson we're going to be talking about JavaScript dates which you actually have to use that new operator for to actually Create so if we wanted to create a date here what we have to say is new and then we pass in the date object with these parentheses at the end and this is what we call constructing um a instance of that date object so you can kind of think of this um

in terms of like you have this template that you're working with so the date object would be the template and then you're going to actually take a copy of that template and store it in a new Variable um that has all of those attributes of the template it does everything that that template has kind of predefined it to do now this is kind of an object-oriented programming uh discussion I don't want to get too far into it but just know that this new operat Ator is a special keyword in JavaScript and that's what it's doing

so if you actually look into the new keyword it's going to do a couple of things so it creates a blank object and Then it links that blank object to the parent so when I talk about template and an instance of that template that's what I'm kind of referring to so there are additional steps that get into the Prototype chain again I'm not going to talk about um that because it's another complexity that we need to visit right now in the previous parts of this lesson we've talked about a lot of the essential Concepts that

we're going to be using when we're talking about these Built-in JavaScript objects and the first one we're going to be talking about is Javascript dates now these JavaScript dates are a little bit confusing and I'll be honest I think a lot of developers even more experienced ones have a little bit of trouble with certain types of dates and JavaScript and the reason is because um writing JavaScript dates is not really um All About coding skill you also have to understand how time zones work um and All that stuff when you're actually getting into uh implementing

the date objects and stuff like that now I've written a post on this so um I'm on my site here so I'll just scroll down um at some point here I talked about JavaScript dates so right here and with this date post I really go into detail about all of the different uh time zones and how we use dates and all the different nuances of it so I'd check that out if this is not enough detail For you but here we're going to actually go into the basics of writing dates and how we do that

uh I showed it briefly in the last part of this lesson but all we have to do is Define a variable and then assign a new date object or kind of a copy of that template which is date and we're going to assign it and now if we print out to the screen it's going to show us a a date object here and it's going to be the current time because we passed in no parameters or no arguments To that uh date Constructor now here's where dates get a little bit confusing what we have defined

here um the value that is stored within this date object actually represents the number of milliseconds that have elapsed since midnight on January 1st 1970 UTC time zone that's a lot to handle in one sentence here um and you might be asking why January 1st 1970 well the answer is not so simple and again I would read this post that I Wrote to really get a background on that but basically it's an arbitrary date and time that we are basing all of our future dates off of and what I mean when I say the value

that we're storing with within this date is equal to the number of milliseconds cuz right here it sure doesn't look like milliseconds that we're printing but if you said now which represents the date that we just defined and then you say value of it's going to print the number of milliseconds since January 1st 1970 and that is the in the coordinated universal time zone so if you converted this to years and then days you would get exactly to this with dates there are a variety of things that you can pass into that Constructor as an

argument to define a date and what I'm going to do is just paste a bunch of code onto the screen because we don't need to go through writing all of it you can pause the video look through this for a second I'm going to walk through It but again read that post if you want a ton of information about dates so the first example we're passing in um the the year the month the day and then the time or I guess hour minute second millisecond whatever and we're passing that in as comma separated uh arguments

to the date Constructor um we can also pass in just a string in a variety of different formats as you can see in this code uh right here and then going down we can um input a number of milliseconds So we can just give it the the value itself or we can pass it in as ISO 8601 format um again that post talks all about it and then finally you can do time zones down here you can pass in time zones um this last part the date. now um that's kind of an interesting thing that

we can talk about here so you know we're used to creating a date by saying new date but you can also create a date with a static method that's what this is called here and you just say Date. now represents the same thing as new date obviously not anymore because time has elapsed but it's just giving you the Primitive value of that date now we're here in this video to talk about some of the instance methods that we can use on a date object the built-in method so let's define a date so that'll be equal

to now or maybe maybe instead we'll just say uh my date because now is sometimes not descriptive because the second you press enter it's not now any Longer so that's a little bit confusing so let's create a date here and and that's going to represent pretty much you know right now minus a few seconds and from this date we can use a couple different methods so one of them will be the two string method and that's going to print what we've used here in the console but of course this is a repple so it kind

of read evaluate print Loop all that kind of good stuff so we can use this two string method to print out The um string of the date and this is actually going to print the value of that date which is stor stored in the un uh the coordinated universal Tim or UTC and it's going to convert it to our local time zone which is the time zone that our computer has stored on it so that's actually stored in some file on our computer I'm not going to go into that but um anyways here we go

for the next method so we have my date and then we can use the two ISO string so the iso String is a specific format and let's scroll down in my post here because we've got it up anyways and I think I have a little screenshot of the UTC time or not UTC but ISO 8601 um and let's expand this just a little bit and you can see this is going to be the format that we're using for the iso 8601 standard pause the video look at this if you're uh Curious all right so let's

bring this back and well not clear The screen and then my date get date is going to give us the actual day of the month so today is the 16th of January so we get 16 um we can also use my date. uh get month which is a little bit unique because this is going to return the zero um it's going to return the month of the year but it's going to use zero indexing so instead of January being equal to one January is equal to zero which is what we're seeing here Since this is

being filmed in uh January so we'll go to my dat. getet full year and that's going to return 2021 um so those are some of the the basic methods that you can use on a JavaScript date and honestly these are probably the most common ones you won't be looking at anything else for the most part but you can go to the docs JavaScript um documentation so again JavaScript built-in objects then you can go down to date and then you can see all Of the different methods that we're using here um something to point out uh

you'll see this a couple times within the documentation uh if you look at the date. getyear method it has this little thumbs down icon which basically means that it's deprecated and a deprecated method is something that is no longer going to be supported so you don't want to use those now if you click on the get year method you'll notice that in our Exam Le we got we used the G full year method and the reason is because it says the gete method Returns the year in the specified date blah blah blah and it says

it is no longer used and has been replaced by the git full year method so that's how I knew to go to that get fure method as a replacement so in the previous section we talked about JavaScript dates and now we're talking about the built-in object called regular expression and this is Not just a built-in JavaScript object this is an an entire topic like I almost think of this as um another language that you're kind of trying to learn in programming it's obviously not turning complete or anything but regular expressions are basically a way to

pattern match within strings and you might be asking well why would we want to do that and to show you why let me just open up um a web application we'll just go to uh you need a budget and this Is a budgeting app that I use and really like um but if you go to the login page um login right here and you type in your email address but you type it in incorrectly it's going to say please enter a valid email address and you might be asking well how does it know what is

an invalid email address it you know you may go through a bunch of different um you know types of emails like a big long list of emails that's probably not going to be efficient of Course but what we can do is we can use regular Expressions to pattern match and basically say okay I expect to see um these certain characters and then an at symbol because every email address has an at symbol and then some sort of valid uh domain or whatever for that email address so we can pattern match and that's why regular expressions

are so powerful you you can validate emails and you can also do a whole host of other things uh it's great for validation but It's not only for validation now as we're going through this just keep this in mind this is a very loaded topic as I said and you don't need to fully understand how to write these uh regular Expressions it's really not a high priority thing for you right now if you're trying to learn how to code because you can get away without regular Expressions um while writing web apps they're just very nice

to have they can really speed up your workflow uh down The road and you need to be at least exposed to them so all I ask here in this video is you understand what they are what they do and uh just how to read them in general just kind of understanding the symbols and be able to piece together what a regular expression is doing I wouldn't worry about uh learning and mastering how to write them so if we go to the JavaScript documentation um let's see here we'll go to Technologies JavaScript as we've been Doing

just kind of reiterating this then you go to built-in objects and then we can go down to the regular expression object which is going to uh be regex and it says it's an object used for matching text with a pattern so as I said pattern matching now let's go ahead and write a basic regular expression um I'll show you how to do this here so we'll say email validator regular expression and this will be uh kind of similar to what we just Looked at where it's validating whether the email address um is correct now this

implementation that I'm about to write is by no means uh exhaustive and it's definitely going to miss a couple cases and I guarantee you you know YNAB or you need a budget is using a much more complex expression than the one that I'm about to show you here so anyways let's go through this and just get an idea of what we're dealing with so let's say that our user input this is what we type Into the form so you know I go here I type into the form I type something that's what this user input

variable is going to represent and I might put in something like invalid email at G and obviously this is not a valid email so we should reject this by using this regular expression so we'll say a new variable we'll say it's uh is valid and then what we have to do is we take our email validator regular expression from up here and we can use one of the Built-in methods on it so if you come down to the left you can see all of the different built-in methods and one of these uh if we go

down to uh methods are we even on the right one here okay we're on regular expression okay I was just missing it completely so here are the methods um these are pretty uh confusing to look at but the two that we're looking at here is going to be exec and test so we can use test to just see if something is Valid so we're going to go ahead and do that we're going to use the test and then we're going to pass in our user input so we're saying take this regular expression or this pattern

that we've defined and map it up against this string that we have defined and if you press enter it's going to uh and then show what the value is it's going to be false because this is an invalid email and that expression up there that regular expression did not match it now If we look at this regular expression there's all these characters which probably look like complete gibberish to you um but I'll quickly walk you through what this is doing and then we'll go back to the basics and really understand it so this first character

just says I want to start at the beginning of the line this period represents all characters and then this uh plus sign that comes directly after the after the period says I want to match any Character one or more times then we have the at symbol which is just looking for the at symbol and then we have this period again so we want um any character one or more times and then we use this slash to basically escape and actually look for a period so if you have gmail.com we need that period and in order

for this special character to be escaped we have to use this uh backslash or right here and then we use another period for any characters one or more Times and finally the end of the line with the dollar sign so I know that's super confusing I would never expect you to follow along with what I just said but just to give you a taste of what we're dealing with here all right so let's go kind of to the very Basics here with uh regular Expressions I like to think of it in two pieces so you

have the identifiers and then you have the quantifiers and the identifiers can be one of a ton of different things it can Be special characters or just the characters or phrases that you're trying to match these identifiers are what you're actually trying to pattern match within the string so if we created a regular expression we'll say new regular expression and then we're going to pass in the letter G and now I'm going to pass in a couple of strings here so we'll say string one and string two and you'll see that if we're trying to

match the letter G it only occurs in the Second string right here so if we were to say the regular expression. test and then pass in string one we're going to get false but if we test it against string two it's going to give us a value of true because it did in fact match the G in the middle of the string but in this case our regular expression is just taking a single character and looking for it which is probably not what you're going going to be doing you're probably going to get a little

bit more complex Than that so maybe you test for an entire word so let's type another one so we'll say reg or reg re x 2 some people say reg X some Rex regular Expressions whatever um but anyways we're going to say this one is going to be equal to an entire word so in both strings we have the word favorite so now if we test the second uh regular expression up against both of the strings it's going to return true so no matter which string we put in there it's going to return true there

um As you can see so we can also match a full word um in addition to just a single character but the interesting thing about regular Expressions um or I guess maybe not interesting but important thing is that it's case sensitive so if I were to make another regular expression let me go ahead and just clear the screen for a second so we get some more room um and let's say our regular expression is going to be equal to um favorite with Capital letters at the beginning and the end and we of course need to

bring in our strings again because we refreshed the page but this count this time if we map up the regular expression and test it against string one we're going to get false because there are no Capital uh there's no word in there called favorite that has a capital f and a capital E so so you'll see string two also returns false so this is case sensitive you have to pay attention to the uppercase and Lowercase letters now you don't have to just use single letters or single words or phrases you can use special characters and

that's really where the power of a regular expression comes in so there are a multitude of special characters that we can use but I'm going to put on the screen a couple of the really popular or common ones so the first one is going to be anything that we put in two brackets um and another thing that I want to share here is that You don't have to write a regular expression like we did up here this is one way to do it just like we saw with the strings you can uh modif or create

a string in two different ways now the more common way that we're going to be creating a regular expression is you put two forward slashes and then you put in your regular expression here so in this case I could put in G um and that's going to be our regular expression that we wrote first we could also put in Favorite and that's going to be a regular expression and as we saw you can actually execute methods on you know a literal uh like this so we can test string one against this but if we go

back and lowercase these letters now it's going to return true so this will be good for me to uh show this syntax so we can quickly Loop through a bunch of different patterns here so we're just going to change the regular expression here and we're comparing it Against string one the first thing you can do in a regular expression is a character group and all you do is have these two brackets and then whatever you define in that character group is going to apply to the regular expression so what we could say is a to

z um uppercase and what that is doing is matching all uppercase letters now in our string string one there are no uppercase letters so we return false because it doesn't match but we can also pass in uh A to Z where we have all lowercase letters which obviously does uh does match at least one of these letters uh moving on we can also have 0 through 9 which is going to match all numbers within a string now there's no numbers here so it's not going to match returns false and then you can combine these together

so you can match all uppercase letters all lowercase letters all numbers and then you could even match spaces in here so if we added A space here we could match uh spaces and this is going to return true because uh we're matching the spaces the lowercase letters so on and so forth so that's what we're using with these brackets you have a lot of different options uh within those brackets now we talked about earlier that this period when used in the context of a regular expression represents any character uh whatsoever now this is going to

return true um because it represents any Character uh now the next one we'll look at is back SL D and this is going to match all numbers this is equivalent to saying brackets 0 through 9 so it's completely equivalent just a different way to write it in this case there's no num so it returns false we also have uh back SLS which will match any wh space characters there's spaces between uh the words in these strings so it does match um then we also have uh back slw which matches all letters and numbers so alpha

Numeric so these are just some shortcuts that you can use as I said when I was interpreting that uh email validator this little carrot represents the beginning of a string so if we put in the carrot and then we put in an F it's going to return false because the first letter of the string we're testing it against so string one is actually M now if we put in M it's going to return true but we could put in the F returns false because we're starting at the beginning Of the line but if we take

that out it then returns true because we're no longer constrained to the beginning of the line now what we could do also is the end of the line which is a dollar sign so uh f is not the last letter of the stre string it's actually K so that's how we would make that return true um and then finally we have these uh little groups that we can make so if you put parentheses here and then you can say um you could say code or uh Stake or something like that and that's going to match

either code the word code or the word stake and in this case we're looking at string one uh stake is in there so it's going to match so those are just some of the different ways that we can write the identifiers and you can see how flexible this is and how creative you can get to match different um patterns within a string or like a line of text now the next thing and the the Second piece of this equation is going to be quantifiers now so far we have been using this test method to basically

show whether or not we have matched a certain character in the string but if we um let's rewrite this here so let's say that we want to match um all lowercase letters which returns true that's all that's telling us is that in string one we have at least one lowercase character now if we come over here and change this test method to exec It's going to do a little bit different operation and you can read about this here in exec um it shows you kind of what it returns the different values of this array that

it returns but basically what this is telling us here is that all that it matched when we wrote this regular expression is the letter M because it started at the beginning of the string it matched that one lowercase character and it said okay that's all I need to match now if we want to match More than just one character we want to match a section of a string then we have to actually tell it that and the way we do that is through quantifiers so there are a a couple different quantifiers and I'll try to

roll through um all of them and explain all of them just really quickly as this again is just an overview so the first one is a star and the way that this works is you put your uh identifier um at the beginning and then You follow that by a star or another quantifier that you're trying to use and so what this is saying is that I expect or I'm trying to match uh any lowercase letter and the star is saying I want to match any lowercase letter zero or more times so in this case it's

you know since we're matching zero or more of the preceding character it's pretty much going to return something every time now we can change this to a plus sign which is going to um match one or more of the Preceding character and then we can put a question mark to represent either zero or one uh quantity of that previous character and in this case you see that the uh matched value is going to be only the first letter because we're looking for zero or one now we can be explicit about this so we can say

we want to match a certain amount of uh characters but before we do that I want to add a little space within this uh uh identifier because right now we're only Matching this first word here so if we add a space in here now it's going to start matching the entire uh sentence or string so if we put in the plus sign you can see my favorite food is steak so it matches the entire string because they're all lowercase letters now if we wanted to be specific we wanted to match a certain amount all we'd

have to do is these little brackets as a quantifier and then we can pass in a specific number so let's say that we wanted to Match say five characters well it's going to get the first five characters so my space that counts fa and that's going to match the first five characters now we can also do a range so um we can say we want to match between two and six of the preceding character uh that we're looking at so it's just going to match six because that's the upper bound but you can match like

a range of characters so these are all the different quantifiers Um and you can use these to take the pattern that you're matching and tell it how much of that pattern you want to match now before we go into kind of a final example to just tile the concepts together I want to show you one other thing um and that is going to be in the documentation there is this thing called a flag so if you define a regular expression so we'll say our reg X is going to be equal to you know a new

regular expression but we could also Write it with these two slashes you can also pass in a flag and that goes at the end of these two slashes and here are all the possible Flags in this case we might want to do a global search so it will search for the pattern um even if it occurs multiple times and if you wanted to use that all you would have to do is write your regular expression here so we might say we want to match uh all lowercase letters one or more time and then at the

end we put a g which Represents that flag so that's just a um a slight Nuance to this and you'll see this so just be able to recognize it um anyways let's move into a basic example where we can just apply those concepts of the identifiers and then the quantifiers and then we'll wrap it up for this uh section on regular Expressions so we're going to write um first a string so here's the string that we're going to uh want want to match so we'll say Hello World um and then let's Put in a couple

numbers 2021 and then let's put in a couple spaces here uh and we'll put in I don't know we'll put an at symbol in here as well and then more of a string at the end and our goal is to basically write a regular expression that is going to match this entire string so we can do it in a multitude of ways but I'll just uh go with the most obvious ways that I can think of so we'll write our regular Expression and we're going to use this syntax here so the first thing that we'll

notice is that we have some lowercase letters uh to start so uh we can use the brackets here so this is again not the most simple way to do this but this will uh hit home all these concepts for you so we'll say that we want to match lowercase letters and spaces so let's add in that space right there and we want to match that one or more times and then um actually I'm Going to um do this in real time so that we can see what's happening so instead of putting it in a variable

we'll do it how we did it before so we're going to look at um all lowercase letters and then add a space and then I'm going going to execute that against the string so we can kind of begin to see what we're matching here so we're looking for all lowercase letters one or more times so we got the hello world then we're Looking for a comma we can just put the comma in as it is um then we're looking for some spaces and numbers so why don't we pass in 0 to 9 and then another

space and we want to match that one or more times and then we want to match the at symbol and then we want to match uh lowercase letters so again A to Z and then we need a space in there and then we say one or more times and then for good measure this is not necessary but we can just Put this little uh upwards carrot to indicate the beginning of the string and a dollar sign to indicate the end of the string you can see here that we have matched this entire string now of

course we can do this a lot lot simpler all we need to do is put a period in there and a plus sign which matches any character uh one or more times and there we match the whole string but hopefully this was just a brief overview a very basic explanation of regular Expressions um It's a built-in object within JavaScript like we talked about that you're going to stumble upon and eventually it may come in handy for you but most importantly just have an understanding of what they are what they do and how to read them

so we've covered a lot in this lesson but we're finally making it to the string built-in object in JavaScript um so again let's come to the beginning so Technologies JavaScript built-in Objects and then you go down to string right here so we kind of talked about uh the string object versus Primitives got an overview of this but what we didn't do is talk about some of the methods that we can use on this string and what I want to do as I've been doing in this lesson all along is basically give you the most important

methods the ones that I've used a lot myself that other developers use commonly and just give you a brief overview of them so that They're kind of in your memory bank and you have them for recall uh later when you have to use them in your code or maybe some code challenges or interviews or whatever so we're looking at strings and you can see there are a lot of different string Methods that we can uh use and again this little downwards thumb means that it's a deprecated method so don't go trying to use uh any

of those um but again there's a lot of them here and I want to point out some Of the most important ones so what we're going to be looking at um let's go ahead and refresh this oh I don't know what I've done here okay there we go we'll clear this the screen and what we're going to be looking at is the replace all method we're going to look at the two uppercase method the substring method the trim method and the match method so that's what we're going to be covering here and again just basic

examples of each as we Go through these I'm going to show you the documentation first because I really want you to get used to um reading it and understanding how it's working so let's go to the replace all method it says this method returns a new string with with all matches of a pattern replaced by replacement the pattern can be a string or a regular expression so we just learned about that and the replacement can be a string or a function to be called for each match now We're not going to get into that function

piece that's a little bit complicated but if we look at the syntax here you'll see some new uh symbols here so this little pipe means that there are multiple types of parameters that you can pass in um or not multiple types of parameters because obviously there are multiple parameters but for this single parameter there's multiple types of data that you can pass in so in this case it's saying either a regular expression Or just a string to match and then the second parameter so we have the comma here to say okay we're on a new

parameter uh a new substring so just a regular string or a function that will return basically whatever we want to replace it with so come down here to the parameters you can read a little bit more about that but we don't need to because I'm going to show you how to use it so let's go ahead and Define a string really quickly so uh we'll say my dog Jumped on the bed my dog is a bad dog all right and you'll notice that I have some weird capitalization in here which is going to be what

we're replacing so we want to say we want a new string and then for the string we want to replace all so this is different from the replace method because um obviously we're replacing all occurrences of the match rather than just the first and that's why I use this one uh more frequently Because in most cases I want to replace all rather than just the first match so in this case we could just say we want to replace the word dog with cat and that's going to assign the new string to our variable and you're

going to see my cat jumped on the bed my dog is a bad cat which obviously makes no sense whatsoever because we missed one and that's because this is case sensitive but what we can do is write a regular expression and we just learned about That so we might as well do it all right so we're going to say correct string equals my string do replace all and then in this case we're going to pass in a regular expression and then we're we're going to replace that with uh lowercase cat so all occurrences of the

the word dog uppercase and lowercase are going to be replaced with this right here so in this regular expression we are going to put a character group and we're going to say we want either an Uppercase D or a lowercase D and then we want to match exactly so we're going to put these little brackets and put a one in there so we're going to match exactly one of these characters either uppc lowercase and then we're just going to pass in uh OG because it's always going to end in OG in the lowercase form so

then we're going to finally pass in Let's see we need to pass in the global flag because we want to um replace or find all instance of instances of that So let's go ahead and press enter and see what we got so the correct string it looks like we have cat in all of the instances so we replaced it correctly again this g at the end is just the global flag and um there's a bunch of different flags that you can bring into a regular expression but this just means uh match all occurrences not just

the first the next method we're looking at is the two uppercase method this is a pretty easy One let's go to the documentation and take a look it says two uppercase Returns the calling string value converted to uppercase um um and the value will be converted to a string if it isn't one all right so very simple um very simple function here and we can pretty much figure out what it does by just experimenting around so we'll say uh that we want my string to be equal to sust string and then all we do oh

it's saying I redeclared my string so I need To refresh the browser because I already did that so my string equals some string and then we say my string. 2 uppercase and you'll see that it capitalizes every single character within that string so it's very straightforward um you'll see where this comes in handy in just a second so the next one we're looking at is the substring method I use this quite a bit um if we go to the documentation you're going to see that there are actually two Methods and if you have been following

along with this tutorial in the prior video the 25 challenges I actually used the wrong method here so um you can see that we have the two methods we have the substring and then we have subst and this substr has the little downwards thumb which means don't use it it's deprecated and of course I used it in the previous video so um apologize for that but we're going to be using the Non-deprecated method and it says it Returns the part of the string between the start and end IND uh indices so if we we go

down to the uh function signature uh you can see that there's one required parameter it's not surrounded by those brackets and then one uh optional parameter and these represent the index of the first character that we want to include in the return string and then the last character if we uh want that otherwise It's just going to take everything um after that first character so let's go ahead and give this a try um we'll use the same string here so we'll say my string do substring and let's say that we want to get um everything

starting at I don't know the letter M so if you think about this the S has an index of zero the O has an index of one M will be 2 E3 the space will be four and the second s will be five so maybe we'll start it at five so we just Get the second word and then if if we don't pass in a second parameter it just goes to the end of the string which is kind of what we want but you could also pass in something like seven and it kind of cuts

it off there so that's kind of how the substring method works now I want to provide you with some common ways that we might use all these methods and one of the common ways that I've found to use the substring method um is if you want to maybe capitalize the First word of a sentence so let's say that we wanted to take take my string which is some string with all lowercase and we just wanted to capitalize this s and combine that into the full string so basically what we're looking for is this right here

now if we wanted to convert that here's what we would do we would say um let's just assign it to a result variable so we will say my string and then we want to grab the first letter of the entire string which is going to be That s now we're going to use that two uppercase method that we saw in the previous uh method right there and what that's going to do is it's going to grab that s and then it's going to capitalize it so all we're getting right now is a single letter so

we can use the plus sign we can concatenate uh two strings together so now we have to get the remainder of the string right here and the way that we do that is using the Substring method so we'll say my string um and then we want to use the substring method and we want to start at an index of one because we've already got the first uh the zeroth index of s so we want to start the substring at one all right and then we can go to the end of the string so all we

would have to do is basically just leave it like that and we're done but if you I don't know maybe have a good reason to do this you could also grab my string Length to get the very last character in the string as our bounds of that substring so if you press enter and then you type out result you can see that we have capitalized uh this string or sentence if it was longer so that's just a common use case of the substring method combined with the two uppercase method and you can start to see

how when we combine them together it makes our job a lot easier the next method we're talking About is the trim method and this may not seem um all that useful when we first start looking at it but I will show you why we might use this in the real world so the trim method removes white space from both ends of a string notice it says both ends it doesn't remove white space from in the middle of the string um Whit space in this context is all Whit space characters space tab no break space Etc

um and all the line Terminator characters so um a carriage Return here but we don't need to worry about that and the uh call Signature the function signature is very simple you just call it on the string and it removes the Whit space so again you might say well this is not very useful but what if we got some external data that looked like this so this might be some data that you retrieved from an external database or something and you have no control over how you receive it and in this case we have some

spaces um In these strings so how would we go about remov removing those and returning an object that has uh kind of a cleaned up um piece of data well we can do that using a loop and the trim method so let's just write a loop a for Loop so we did this a lot in the challenges the code challenges from the last lesson and then we also um learned it in the last lesson so you should be familiar with this so we're going to write the loop um I Plus Plus now we're going to

Loop through each piece of data and what I'm going to do is actually break this out so I'm going to say the current title is going to be equal to external data then we're going to grab the index that we're on. tile and then we're going to go down and we're going to grab the current author equals external data iauthor now we're coming down here and this is where we're going to uh reassign the Values of these properties to the trimmed version of them so we're just going to say the external data I do title

is going to be equal to the current title. trim so it's going to trim the whites space and assign it back to that property then we'll do the same thing for the author so external data author equals the current author that we're iterating over trim and there is our for Loop so if we print out external data and we look at the array here You're going to see that all of these values have been trimmed of the white space so that's just um a way that I've used it in the past um something that has

come in handy for me so I just wanted to show you that method for that reason now the final method that we're going to look at the built-in method on a string object is the match method now this is going to be very familiar to you because we learned about regular Expressions already so I'm going to Actually bring in something that we've already looked at here so let's write a regular expression and we'll just say we want to match uh any lowercase characters in a quantity of one or more and that's going to be our

regular expression and then our string is going to just be a bunch of gibberish let's write this correctly bunch of gibberish and then maybe some numbers in here and then some more gibberish letters all right so there's Our string and there are actually two ways that we can test this the first way is something we've already seen where we just run the exec method on the string and of course since we're matching lowercase letters in a quantity of one or more it's going to grab all of these until it gets to the numbers and then

it no longer matches so that's one way we could do it but we we can also do it in reverse like it does the same exact thing except we're doing it from the String method so all we have to do is say string. match and then we pass in the regular expression and it's going to show us kind of the same thing now this is going to be exactly the same as long as you are not using the global flag so if we were to put in um let's say you know if we defined the

regular expression and we put in a to z you know one or more and then we put this Global flag in there that would be when these two methods do not behave identical but For our intents and purposes you can use either one it really doesn't matter just pick one and go with it to this point in this lesson we've talked about dates regular expressions and built-in string Methods but we haven't talked about arrays and this is where it gets really fun now I will say that this list of methods that we're going to be

going through you can actually see them on the screen um all these different methods here so we have The push pop shift and unshift those are kind of grouped together we have slice splice that these are actually different we have find index and index of they're kind of grouped together map for each includes filter and reduce and I chose these because these are the ones that you're going to be using most of the time and these represent kind of the bulk um you know if we can kind of go with that whole 8020 rule this

is this is the 8020 rule of array methods and it's obviously not exhaustive um and I'm not going to go into every last detail of each method but I hope that Um this can basically walk you through the basics of each so that when you have to use them it's not a complete shock you kind of know what's available to you um which is kind of half the battle sometimes just remember these are not to memorize don't try to memorize these um like any built-in method you can always look them Up and as I've been

going through in this video you know how to read the documentation now and I'll continue doing that for each of these array methods so that you can just get better and better at um you know acquainting yourself with the different uh syntax of this documentation so let's get started we'll start with the push pop shift and unshift methods and we're not going to really go through all of these in the documentation because they're so similar Well let's go to JavaScript again built-in objects and we're going to the array object which has instance methods that we're

going to be looking at here all right so we will start with pop we've actually already looked at this when we talked about reading documentation this is going to remove the last element from an array now we also have uh shift right here this is going to remove the first element of the array then you have the method that We're going to be using using the most out of all of these um which is the push method this just takes an element and uh or an element or more than one element and adds it to

the end of the existing array and then finally the unshift method um down here somewhere this is going to add an element or elements at the beginning of the array again I think the push method is probably going to be the most uh widely used but let's just go ahead and see what we're deal de with Here so we'll make an array we'll add three elements in there and um maybe let's go ahead and put a gap in there so we'll skip four and we'll put in five and six or something like that all right

so there's our array so what if we wanted to um basically add the four in there so basically all we have to do is array. pop that's going to take off the six and it returns six not because the value is six but because there are um six elements or maybe maybe It did it does return the element that they that it removed from the array I'm sorry about that all right anyways we will go and do that again because we need to remove one more so now our array looks like this we just have

1 2 3 and now we can push four five and six to the end and we are back to what we started with but this time it has all of the uh numbers in order so of course we can add the zero at the beginning so we just say array. unshift Put a zero in there and now our array has zero through six so you can kind of get an idea of how this works and there's not a whole lot to it all right let's move on to the slice method now this one is going

to come in handy um when you need to make a copy of an array and this is not going to be apparent why this is useful right now but once you start getting into um front-end programming where you're uh writing code in either angular or react Or uh view JS or something like that there's this concept that we call state which basically um it it's how the data flows through the front end of your application and when a user updates their profile or whatever and that data update affects another part of the application um the

state is what makes those changes propagated across the entire application and when we're dealing with State we often deal are dealing with IM mutable objects things That cannot be changed so making a copy of the data that you're um putting into state is going to be extremely useful and to do that you can use this slice method so let's look at it um in the documentation we'll go to slice um it says it returns a shallow copy of a portion of an array when it says say shallow here that just means that you have like

if you have nested objects or arrays it's not going to uh pick up on those it only gets like the first layer Or whatever um you'll need a more advanced method to do like a deep copy of an object and I'll talk about that a little bit um later in this lesson so basically what it's doing is it's taking two optional parameters um so if we don't Supply any sort of parameters at all then it's just going to let's see what it says so if we don't put any parameters at all it's just going to

create a copy of the entire thing otherwise it will create a copy of a Specific part of an array so let's see how this works we have an array already right here but um let's say that we wanted to take out two three and four or something like that so we've already got an array on the screen and let's say that we wanted to make a copy of the entire thing so we can say copy of the array is going to be array. slice we don't need to pass in any parameters cuz we just want

the entire thing and now the copy of the array is going to be a Perfect copy now if you were to compare these so copy of the array versus the array they're not going to be equal so I say that Loosely but that is a concept that we talked about when we uh looked at the JavaScript operators in a previous lesson all right so if we wanted to grab like a specific part of this array so another copy and we want to grab um everything starting at three till the end of the array you might

say slice and then you want to give it an Index of uh not zero not one not two but you want to start at three so you want to give it an index of three and now another copy is going to be equal to 3456 so that's just a uh quick overview of the slice method the next meth method that we're dealing with is called splice and it is not to be confused with slice so if we go to the documentation click on splice it will say that this method changes the contents of an array

by removing or replacing existing elements And or adding new elements in place so in other words this is useful if unshift and push those two methods we learned about are not sufficient you want to actually replace something in the middle of the array rather than just the beginning or the end now I want to look at the function signature on this one because it's kind of interesting so it's there's a lot going on but the only required parameter is this start which is the index at which you want to start Changing the array then the

comma here it says we're going to a new parameter we want the delete count so it's basically saying we want to start at a specific index and now we need to specify how many items of that array aray are we going to delete starting at that index now if we don't provide this because it is entirely optional it says if this is omitted or if its value is equal to or larger than the array. length minus the start we don't need to Get into that then all the elements from start to the end of the

array will be deleted so let's say that we you know specified the start as index of one then it's going to basically delete everything except for that first element so um the next part that we have are these interesting brackets where we just have item one item two and then the dot dot dot this is basically saying that you can have an infinite number of parameters um that you can replace and It looks like if we come down here to item one two dot dot dot it says the elements to add to the array beginning

from start if you do not specify any elements splice will only remove elements from the array so this kind of changes the behavior of the entire method we go from removing elements to adding elements to the array so you can see how reading the documentation can be very helpful in our case we're just going to go through a basic example so We'll say that our array is going to be equal to 1 2 3 and then we'll put in some string that doesn't belong there four five six all right so what if we wanted to

well hold on I cleared the screen but did not refresh and I tried to redec that array variable so let's try again so 1 2 three four five six and what if we wanted to remove that string from there so all we'd have to do is array. splice and then we want to Specify that we want to start at the index of three so this is 0 1 2 and then three so we want to start at the index of three we want to remove a single element so we just want to put in a

one right there and then at the end we can put in um let's say what we want to replace it with so in this case we want to remove this string and replace it with something so maybe something in between we'll put 3.5 or something all right so it Returns the uh item that was Removed and now our new array has the replacement value in there so at this point I think it's a good time to just briefly mention um the fact that we are mutating this array right here now when we looked at string

Methods none of those methods actually uh modified the existing string and that is because an array is not a primitive value now a string is a primitive value and for that reason it is immutable and you cannot change it now an array is mutable so That means that these uh methods that we're using are actually editing the array itself and um you don't have to basically create copies you could if you use the slice method though all right so the next one that we're dealing with is going to be the find index and index of

method so here's the find index it Returns the index of the first element so only one that satis satisfies the provided testing function all right so this is where we start Getting into the Callback functions that I talked about so if you don't understand callback functions be sure to go to that prior part of the lesson here and really uh wrap your head around those because from here moving forward we're going to be dealing with them in pretty much every array method anyways it says if there's no match so if your testing function does not

match an element you're going to get a value of negative one so we know that if this Method returns us Nega -1 then what we're trying to match does not exist in the array otherwise we get the index uh to grab it from now this is kind of similar so the find index is kind of similar to the index of method so if we come down here and grab the index of method it's just going to return the first index where the given element is found there's no such thing as this you know callback function

that matches or anything we're just searching for a Specific string um and again this will return NE -1 if that is not present now this is a little bit less powerful and like I said uh callback functions enable reusability in this case we just search for a raw string with the find index we can specify an entire testing function so in this case if you can grasp your head around these callback functions the find index is going to be a little bit more powerful for you so let's see if we can Come up with a

good example for this we'll use what we got for the index of method so again array is equal to this right here and we could just say array index of and maybe we want to look for that value of 3.5 and it's going to give us an index of three so what we could do here is we could basically say Okay I want to get that uh value here so we can say array then we can use the bracket notation we obviously have to pass in an index and Then we can find this index it's

kind of uh circular here but I'm just trying to show you how this might be used and then we pass in there and now we can actually get the value so previously we just looked at for the index right here but now we're actually getting the value returned because we used that index and grabbed it from the array all right so that's how you use index of now let's uh talk about how you might use the find index method for a little bit more Powerful search now what if you had a more complex array um

like this this is obviously got a lot more to it it's got objects that have two properties first name and last name now if you tried to use the uh index of method so more complex array and then you used index of and then you started putting an object in here and typing out first name um equals Bob so on and so forth you're not going to get a match it will never match because you can't do that Kind of uh equality comparison so all we have to do is use the find index so this

is going to return us the index of the first match that we have identified within this array so let's say that we want to identify um any or we want to identify the first item in this array where the last name uh does not equal Smith so that's obviously the last um value and that would be the 0o 1 2 third index so we expect an index of three to be returned and what this expects as an Argument if we go to the find index again you'll see that we uh need to return a call

back and that call back is going to have a couple of uh arguments that we uh can use here so let's look at this real quick the Callback has an element so that's the current element being processed in the array that's not new to us we have the index of the array we don't probably don't need that and then we have the original uh array that we're looking at and we probably don't Need that as well um and then finally we have uh another argument after the call back and it says optional object to use

as this when executing the call back we haven't talked about um the this keyword yet so we're not going to worry about that all right so we need to pass in a call back let's go ahead and populate that with the array item and that's all we're going to use here we could have passed in the index and the original array but we don't need to and then in This case since we're searching for anything that does not equal Smith we can just say where array item. last name does not equal uh Smith All right

so what this is going to do is return us a value of three which is the index of the first element that is not Smith which happens to be this last uh object down here John Doe so so you can see how powerful this is as compared to the index of method um There's a lot more things you can do with it but as I said this is just an overview of each method the next method we're looking at is the map method now we've already looked at this in the documentation a little bit earlier

in this lesson let's look at it once more um this was the method we kind of used to prove out the reusability thing um but basically if we look at the parameters that we can put in here it says that we have a a callback function And then similar to the um the previous method we just looked at we have the this ARG which we haven't covered anything about that so we're not going to get into it so basically if you remember this is just a transformation function and it's going to Loop through an array

and per uh perform a transformation according to your callback function on each element in the array so let's consider this array right here where we have blog posts from a Database and in this case all all of them are uncategorized so what if we wanted to return a new array but in the new array the category is going to be set to something like web development well all we' have to do is use the map method now of course you could you know type it out and say blog post from database and then go at

zero and then type in the category and set it equal to something but that's going to Get really clunky and slow so what we need to do is say blog post from database. map now this is where we pass in our map function so we're going to pass in the array item so as we go through each item the first thing that we need to do is we need to modify that actual property and then we need to return um the item in full so we'll say array item. category equals web development all right so

there we have modified this individual Array items category property and now we're going to return the array item which has been modified all right so we'll press enter and now you can see this map function Returns the following array and in this case we now have the category updated for all of these properties so this would be a really useful function to do um in the real world and I've actually used um something very similar to this example uh in some of my app so it's super Realistic and super helpful it will save you a

lot of time next up in our lineup is the for each method and until this point we've been looking at arrays uh and looping through arrays in one specific way so this is how we've been doing it if we have an array that has a couple values in it now we write our for Loop so we initialize I to zero we go until I is uh less than the array. length and then we increment I then we drop down into the for Loop and we're Going to do something here so maybe we're just going to

print the uh element of the array that we're at so there you go print it and we can do all sorts of stuff within that code block now there's another way to write a for Loop that we haven't talked about yet and that is the four each um method on an array so here's how we would do that we would um say array. 4 each and now what's going to happen is we have a callback function that gives us the Array item and then we drop down into the function and we can once again console.log

the array item all right so that's just a simple way to replicate that array up there you can also get the index so if we looked at the documentation uh of the for each method it's going to say here's our call back that we're looking at and it's going to pass us the current value and it's going to pass us the index and the original array so again this is this signature Right here the the function signature is going to be very similar if not the same for pretty much all of these more advanced array

methods so in this case if we wanted to take this uh for Loop so let's clear the screen once more here's our array that we're looking at and if we wanted to do the for Loop we use four each uh we want the array item and then we can grab the index so in this case we have two things to work with and we'll console.log say the array Item and then we will enter down and console.log the index and you can see that we are printing uh the value of one which has a zero index

the value of two which has a one index and the value of three which has has number two index so this is really useful um a little bit quicker than our other for Loop now there are a couple differences but nothing that we need to talk about right now you'll find those out as you start programming and I'll try to point them Out within this series if we stumble upon them the next method that we're talking about is the includes method so this is going to help you find um a single element and determine whether

it exists within an array so there are multiple ways to do this and I'll show you a couple different ways uh and kind of prove out why the includes method might be the best in a lot of cases so let's say that you have the following array you have my colors you want to Figure out whether um the color orange exist within this array using some code now there are a couple ways that you can do this but one way that we can use is what we're basically um accustomed to seeing and we're going to

initialize this variable right here we'll say that it's false and then if When We're looping through this array if any of the colors equals orange then we set that variable to true and now we can figure out if orange exists which should be True so that's one way to do it but there is a simpler way to do it with the for each method so we could say um something like this so we've already got the orange exist um variable and all we'd have to do is Loop through it that way set it to true

and we can say orange exist and that is going to be equal to true now there is a even simpler way and it's using the includes method so all we would have to say is my colors do includes and then type orange and it's Going to tell us true that does exist in the array so as you can see it's a lot easier to use a method like this then go through all of those for loops and you know store the value in a variable and stuff like that now just to connect the dots here

and show you that there's a variety of ways to solve problems within uh coding you could have also used the index of method so if we would have said my colors and then you say index of and then you type orange and you return that It's going to give you an index of three so basically all you would have to say is that statement right there and you say if that does not equal -1 then our item exist with the in the array because if it returns NE -1 then it didn't find it and we

know that it doesn't exist so that's just another way to solve it and hopefully You' seen that there are in this case there are four different ways that I went through something like that of checking whether something exists in An array the next method that we're going to use is filter and this is probably the most um frequent in method for me uh this is the one that I use the most probably I don't know for sure but um this one and map are probably the two that I would use the most within my code

now the filter method does exactly what you think it would do it filters out different results so let's say that you go on Amazon and you go to your orders page it might look something like this You know this is fictitious it's not actually what their data model is going to look like but you can see that maybe we have some different properties on our ERS array and this is going to represent all of the orders but you know when you go on Amazon you can click on buttons and filter those orders by date um

by whether they're open open whether they're cancelled or whether they're digital and we can do this with the filter method which is basically going To return us an array that has been uh filtered based on a callback function that we provide to it so with this array you can see that we have this is digital property so we could find all of the uh digital products uh we could save that to an array by saying digital orders and then we'll set that equal to all orders. filter and now this is where we pass in our

callback function which again receives the array item and then we will pass that into our function and return Anything that is digital so we'll say array item. is digital which is a Boolean so if it's true then we're going to return return a true value and it's going to be included in our resultant array so now our digital orders if we print that out you'll see that we have two of them and it says is digital true so we know that we match those correctly now there's a couple other filters that we could do we

could paste in this and say okay we want all of the digital and Cancelled orders so we're returning a condition where it says we want to check if it is digital and it is canceled so in this case we can print this array digital canell orders and we only have one of those uh where you can see is digital is true and is canceled is also true so this is a super useful method and it's often used on the front end where you're like I said on your orders page on Amazon and you click the

button and it might execute uh this Filter method and just show the user whatever is filtered so this is really use I use it all the time um on the front end and you can even use it on the back end a little bit as well now I saved the hardest for last um of course because I didn't anticipate the fact that I'd be talking uh for such a long period of time but we're going to go ahead and try this anyways this is the reduce method so if we look at the reduce method um

within the Documentation it's going to give us a very interesting um callback function so instead of the array item and then the index and then the original array that we get passed into our callback it's going to give us some interesting parameters so it gives us the accumulator it gives us the current value and then it gives us some optional parameters here index and then the original array and then finally we pass in uh in addition to the call back an Initial value that we want to initialize this accumulator to so I'm not going to

go through all of these I'm going to put this into terms that I think we can all kind of recognize so let's go ahead and paste this in and this is the code that you're probably used to seeing so if we wanted to find the sum of this array so we wanted to add all of these numbers together this is how we would do it and this is how we did it in the 25 coding challenges that we practiced for the Previous lesson so in this case we initialize a sum variable to equal zero so

we start the count at zero then we Loop through our array and for each element in the array we add it to the sum using the Plus or plus equals operator and then at the end we conso log the sum which is going to equal 99 uh because that's the sum of all of these values in the array now what I want to point out is the fact that this sum variable is essentially accumulating Value values so it's basically called our accumulator so if we go back to the documentation it shows that the first argument

of this call back is the accumulator so you can think of this as our sum variable that we just wrote right here so what I'm going to do is right below here I'm going to rewrite all of this code but using the reduce method so the first thing I'll do is write our reducer callback function and what this callback function is going to Do is it's going to accumulate the value so if you uh look at the documentation it's going to First Take This accumulator parameter which is basically going to act as this sum variable

right here so up top we defined it like outside of the for Loop but here we can just pass it in as a parameter to the Callback and then we have an array item so that's going to be another parameter and we have others but we don't need them so let's go ahead and just use this And now what we're going to do is we're going to return a value so we always return a value from the call back for each array item and in this case this sum variable is going to be uh accumulated

over the course of looping over this array so the reduce method automatically takes care of that and makes sure that that accumulates a value so all we have to do is say sum Plus or equal array item and what this is going to do is exactly the same thing that We're doing up here but we're adding the array item and we're doing it all within a callback function so let's define that and now we can say that we want our result to be equal to array. reduce so we're uh using the reduce method and we

need to pass in our reducer call back and then we need to pass in one more thing so if you go over to the um syntax you'll see that we have the call back which is encompassed uh in the Highlight right here but then you'll see after That highlight we have a comma and then another uh parameter called initial value and if you come down and read about the initial value it's basically saying that this will represent the starting value of this sum variable that gets passed in for every iteration so we want to start

that at 0o just like we started the sum up here at zero and when we press enter and print the result we're going to get 99 which has done the same thing as our code above so while it Looks very confusing um it is very confusing you can kind of anchor yourself to this more uh simplistic code that we've already written and already understand so that is the reduce method and the last thing I want to show you about it is how you can use this to basically uh get the average of numbers in an

array so we went through some practice problems um in the 25 practice Problem video previous to this lesson and we had to calculate an average of an Array I believe and of course there is no average method on the array object I'm not sure why doesn't make a whole lot of sense to me but you can use this reduce method to actually calculate your own average of the array in just a single line here's how you're going to do that all right so we're going to say array. reduce and then we're going to of course

pass in the sum and then the array item so we're writing the same thing that we have written already we're Just going to do this in one line so we're going to take the sum Plus or equal the array item all right so what this should give us right here is going to be equal to um of course after we pass in our initial value that's going to give us the sum of the array and then all you have to do is divide that total by the array. the length and now you have uh retrieved

the average of this array so that's just a way that this can be really useful and You might take a second to look at this code and see what it's doing because it's a little bit confusing um as a oneliner like this but anyways that's just a really practical example of something that I've used before in uh writing actual code all right so that is the end of the uh most common built-in array methods now you might be wondering well what happens if I find an operation that doesn't have a method um already built for

it and the answer to that is You probably will be using some sort of external library to do that and the most common one uh for us JavaScript developers is going to be the low Dash Library so if you type in low Dash and you click here this is a modern JavaScript utility Library delivering modularity performance and Extras and if you go to the documentation you'll see on the left that at the top we have our array data type and you'll see that we have a bunch of different methods that We can do all sorts

of really um interesting things with so we have a limited set of built-in JavaScript objects but the developers of low Dash have taken it a step further and basically um created some additional methods so if you remember something that was tough for us is comparing the equality of two objects so if we go in here and create uh two objects so we'll say object one and we'll set that equal to prop one and Some value all right and then we have object two and then we want to just set that perfectly equal to this all

right so we put that in there and now if we try to compare them it's going to say false and that's going to stay false even if we use double equals and that's because we can't compare the equality of of two objects and if you wanted to write a function that actually compares the equality of two objects it's going to take you hundreds of lines of code But if you use the low Dash Library you can actually look at something um let's go down here a little bit and we have this method called is equal

and this is equal can actually take two objects as you see here so these are basically the example we just came up with and it checks if they're equal and it returns true and behind the scenes this library is running hundreds of lines of code to make this comparison and you can See how we can extend our functionality by using external libraries so let's go ahead and look if we go to the documentation on mdn Go to JavaScript go to built-in objects and go down to the math object you're going to see that there's a

lot of built-in math functions and as a developer you might be saying well hey I'm not writing a bunch of Finance applications I probably don't need this well I'll show you in just a few seconds why it might be Useful for you all right so if we go down here this is a little bit different than we're used to seeing so if we come into the console and talk about like dates or something we know that we can make a date by saying new date all right so that's the syntax that we're used to It's

called The Constructor syntax because we are constru ing a uh I guess copy of this uh date template or the object I mean these are all terms that I'm kind of using in quotations because They're not uh perfectly true but you kind of get the point all right so this is the way of constructing an object now with the math Library you'll see that all of the methods we're just taking the actual object we're so we're saying math and then we're just executing the method against it so instead of saying let's say my date equals

new date and then we say my dat. getet uh date or something like that we are uh first constructing the object and then using a method on it And this is how we've done it with all of these so you might say well why don't we say uh math equals new math and you press enter and it's going to say math is not a Constructor well this gets us into uh the concept of object or oriented programming um the math Library actually has rather than instance methods so uh with the previous ones with the date

object and the string and the array we have to first construct the actual object and then we uh call Methods on top of that object which are called instance because we have an instance of that object and we call methods on top of it now with the math Library we're just using static methods so we just call it directly from the object and it's pretty simple so let's just go through a couple of quick ones that you might um you know find useful so uh let's see what my list shows right here so let's clear

the screen and here are some of the common Ones so we have math. Pi that's going to give you the value of pi um we have math. so this is I think ul's constant or something like that that might be something that you use um and then we start getting into the methods so we have the absolute method and we can actually um pass in a negative number and get a positive or absolute value of that we also have the uh math. sealing method which is going to round up to the nearest integer so Let's

say that we pass in math. piy we're going to round 3.14 up to the nearest integer of four likewise we have the floor method so we take math. piy again and it rounds it down to three and then finally we have the math.round method and again if we put in math. pi it's going to round it to three because 3.14 is closer to three than it is to four all right so those are some quick uh methods that you can use you can also use the Min and the Max uh method so if We had

Min you can pass in a couple numbers and this is going to give you the smallest number and then of course Max will do the opposite so same numbers but we get the highest number all right and then the final one is math.random so this is going to give you a random number or random decimal between 0o and one now this has implications that you probably don't understand but we've actually used this to get a random index of an array for previous videos and I'll Show you exactly how we can do that all right so

let's decompose this into steps so first let's get a random number and set that equal to math.random all right so this is going to equal something between 0 and one let's just see what it equals right now all right so it equals 97 all right so we know that if we multiply um something between zero and one by another number it's going to give us a whole number between zero and whatever number we're multiplying it by So if we multiply random number times 5 we're going to get a number between 0 and 5 so we

can use that to say that we want a larger number we'll just call it that and we'll say that will be equal to random number um times a you know we'll say 100 so now we get 0 to 100 and then finally this is going to be a decimal when we look at it but if we wanted to bring this down to a whole number we just say math. floor and then pass in the larger number and now We have 97 all right so we can combine this with our knowledge of uh the length of

an array to get um a range of random numbers that are within the bounds of an array so let's just Define an array real quick and we'll just say some values blah blah all right so we got four values in there um the length of this array is four so here's how we get a random index Of our array we'll say random index and we'll be setting that equal to all right so we will say math. floor because we know we need a whole number now we want to pass in math. random so a number

between 0er and one and then we want to multiply that by the array. length so that we can get from zero to the length of the array which is always going to give us a valid index all right so we will set that equal press enter and now we can just take our array and pass in Our random index and it's going to give us a random value of that array next up we have to talk about air types within JavaScript and we're going to combine that with some of the data types that we haven't

quite talked about um up to this point all right so air handling in Java JavaScript is something that a beginner is not going to um find the value in most likely I know I didn't when I first started out I could not understand why we need to handle errors Within our code but there are some really important implications to this so if you have an external library that you're calling or maybe you're fetching data from an external database um or something like that you don't know what the behavior of that external code is going to

be so it could give you an air or for that matter let's say that you're building an app that's similar to say Instagram and your user who maybe is got some spotty internet at the time is About to press post on their Instagram photo and as they're pressing post their internet goes out all right so clearly the code that's going to be run is going to fail and what we want to do is handle that correctly so when you try to post and you got no internet you're probably going to see a message on the

screen that says something like no internet please try again when you're connected now that is proper air handling because we have detected that something went Wrong and given the user a meaningful message um for that now if we didn't handle errors and we just you know ran our code and just you know threw caution to the wind and said hope it works well in that case when that user post post the photo and the internet goes out the whole Instagram app is going to crash so we obviously don't want that to happen that's a terrible

user experience and that is the value of air handling now in JavaScript there are three main types of Airs there are actually more so if we go to the um documentation JavaScript built-in objects and then we go to air now this is going to be what we call the B class this is the like you know parent air type and within this air type there are several um subtypes of erors that we might see now there are three of them that I consider the most common and you'll probably see the most often and those are

the ones that we're going to Talk about here in this video so the three we're going to talk about are going to be the reference air the syntax air and the type air and I'm just going to walk you through a couple situations where you might encounter these and just explain like what they are and then finally we're going to talk about how to actually handle an error in JavaScript so the first one is going to be a reference there so let's click on that and this reference error it says is Going to represent an

error where there is a non-existent variable that is trying to be referenced basically all right so a good example of that is if we don't have a variable defined but we try to maybe print it to the screen or use it so let's just just Define some variable we'll set it equal to 20 and when we try to reference that by just typing it into the repple or the console it's going to give us a value but if we were to type in um another variable and Press enter we're going to say it's an uncaught

uncaught reference error because another variable is not Define so when we think of referencing we're basically trying to find a reference in the computer's memory of that variable and if we haven't declared it yet then it obviously doesn't exist and we have a reference or a lookup err so that's the basics of a reference error now a syntax error is the next one so let's look at that um we'll go back to the main eror Page go to syntax error this is where you're writing invalid JavaScript so this one's not very hard to replicate all

you have to do is write invalid JavaScript so um let's say that we write an object and we set it equal to this right here so we'll say prop one some value and put a semicolon at the end enter down and another value and put another semicolon semicolon at the end and it's going to give us a syntax error because These semicolons right here don't need to be there those those should be commas not semicolons so we wrote invalid JavaScript and we got a syntax erir because of it so this one's pretty easy now the

last one the type ER this one is a little bit more confusing so let's look at it real quick go back to the main documentation go to type air now it's going to say a type air represents an air when the operation could not be performed because you're doing it on you Know a variable or a data type that doesn't have that operation so something that you might think is going to throw this kind of air is I don't know adding two objects together so let's say that we have object one and we're going to

set that equal to uh I don't know say 20 here and then we'll come down and do another object this is just totally arbitrary I'm just making some examples now what if we said object one plus object two You would think that in instead of returning this string with like meaningless object uh notation we would actually get a uh type A because we're trying to do something um that can't be done we can't add two objects together like this they're not uh integers or or numbers when you're going to get a type air is when

you're trying to um pretty much call a method on the wrong data type so let's say that you have a number all right so we'll set that equal to 20 And on that number you're going to say two uppercase now we know from earlier in this video that two uppercase is a method attached to the string object not the number object so in this case we get a type air because it's not a function now this might also happen um we have these objects up here and our property on the object is not a function

but if we tried to call it like we call a function it's going to give us a type Eror because prop one is not a function so that's what a type air is all about now the last thing that we have to talk about is actual air handling and as we talked about it's important because you want to give a user um the correct message when they you know run into an air and you also don't want your application to completely crash every time an air happens because it happens all the time with code so

to do this we use something called a try catch block So the first part we put um the word try and then we put these two brackets so we enter down and whatever code goes in these brackets is going to be um checked for errs and if there's an air then it's going to throw that air and send it to the um catch block so let's write some code that actually throws an air so let's say that same example of we have a number and then we try to make that number uppercase which is obviously

invalid so we know that's going to throw An air but because it's within this Tri block we're going to pass that air it's going to be thrown and then this air is going to be um populated with that new air object so this could be anything we could make it E we could make it air or ER r or we could make it air it doesn't matter it's just a parameter like we've seen before so let's enter down into the catch block and now we can actually check to see what this erir is is now

I'm not going to just console log it CU Then you might get confused like okay what happened so let's go ahead and um actually first let's let's just cheat real quick I'm going to put a VAR here so that we can use this code block again um so let's press enter and you'll see that nothing no errors were thrown here and the reason is we had some invalid code but it got caught here and then we didn't run any code in the catch block so if we try this again no pun intended here um we

can actually print some Details about this air so let's console.log something um where we say air is an instance of we'll say type air and in this case it is a type ER because we're trying to call a method that doesn't exist on this data type and this instance of operator is basically going to look at whatever is to the left of it which is that newly populated air object and it's going to say is this an instance of or kind of like a copy of the template that we call type air now That's going

to hopefully return true if it does what we expected and then an airor actually has a name um attached to it or a message so we can say air. message and print out whatever that air message is so you can see that if you looked at the um instance properties we have message so that's how I knew how to access that all right so we press enter and now we get the value of true because this evaluates to true and then this sentence right here is going to be the Air message so you can see

that we have handled an air what we call gracefully we have not crashed our application and this is going to come in handy when we're using external libraries that we don't know how they're going to behave and finally kind of going along with these error objects we didn't talk about those much we also have three more data types that we have not touched on so let's clear the screen and look at what we're talking about the first one is Going to be n for not a number so that's actually a data type then we have

undefined um or actually let's go with null we'll talk talk about null first and then we have undefined and you can see if we go to the documentation um we go to the main JavaScript documentation with the built-in objects you will see that we have not a number right here so you can see little bit about that you can also see if we um look at the built-in Objects that we have undefined somewhere so here's undefined and then finally we have null value right here all right so these are all you know built-in objects and

in like when we're looking at this the null and undefined I believe are Primitives so let me just check that make sure I'm talking about that correctly so yes the the undefined and null are going to be Primitives um as we talked about a little bit earlier so let's start with the least common one Which is going to be not a number so this is kind of something that it's not really used all that often you probably won't even see it all that often it's just nice to know about because you may get this response

um at some point so basically not a number is uh meaning exactly what you would think it would mean it's saying that something is not a number so if we had a string and we set that equal to some String and then we tried to coers we've done this before if you surround a uh number or like a string value so let's say that we had this number Constructor or whatever and then we pass in a string but that string is equal to a number value this is going to work fine but if we tried

to pass in my string you're going to get not a number because you can't possibly convert a string like that into a number so that's where you might get not a Number you also might get it if you're trying to you know add uh that string with a number that doesn't work either um and then you also will get it if you say my string multiplied by two / two uh or minus 2 you're going to get not a number in all of those cases again you're not going to see this very often so I'm

just going to move on from here the next one is going to be null so unlike not a number you're going to encounter null values pretty Much all the time and what this represents um how I think of it is going to be the intentional absence of a value or a placeholder that you put in to a variable so if you were to Define a variable so we'll say let uh PL or no not placeholder we'll just say let my number and then we'll set it equal to null um it says we're redeclaring it because

uh we've already defined my number so we'll just say num equals null and we've redeclared this so I've Been typing into this console uh too much and using the same VAR variables so let's go ahead and refresh the whole page all right so this should work better we'll say num um does not equal 20 it'll equal null so this is a placeholder value um and this evaluates to a falsy value so if we say um num triple equals false then it's going to say false because it's not perfectly equal to a Boolean but we say

if num and Then we get into a conditional block um we'll console. log this will not be reached because this will evaluate to false so this block will be reached and when we press enter you'll see this will be reached because we said if num and num equals null so it's a falsy value so this does not get reached so that's just something uh nice to know as you're using conditionals and then finally we're talking about undefined which is very Similar to but instead of being an intentional um assignment of value so kind of a

placeholder this is when you just declare a variable so let's say we um declare a variable called myar and we don't assign it to a value now you've probably been seeing this undefined happen within the console but that's not actually um representative of what we're talking about here so if you were to type console that log myar you're going To get undefined and you're going to get it twice because it always prints undefined within the browser console but this actually does equal undefined and if you were to pull up this conditional statement again and you

put in my VAR it's still going to print this lse statement because you didn't reach um this because this evaluates to a falsy value all right so that's it for this lesson number six it was a very long one um obviously split up into multiple Videos um but if you made it here congrats and I look forward to talking about some more complex subjects we're going to try to get a little bit away from JavaScript um but in the meantime I do have some practice problems for you and you can continue on to practice some

of the things that we have learned within this lesson we've done practice problems in previous lessons um we did 25 of them that took over 2 hours to do um in you Can check out this video to go to those those will be a little bit easier for you but now in the previous lesson or lesson six um I guess it's this lesson we went through a lot of the built-in objects and then the associated functions uh for those objects within JavaScript so we have a much broader understanding of what's available to us and therefore

we'll be a lot better at solving these challenges so I'm going to walk through each of them I recommend That you try them out first on your own and then you can go through through my solution we'll kind of look at some community members Solutions as well now in the previous uh code challenge video where I did 25 of them I didn't zoom in so I made sure to have a nice big screen that you can see um that was a little bit annoying to actually edit that video so hopefully this will work out better

but anyways go to the link in the description to get to the collection We're going to be working on so this is my profile on code Wars um and if you go to my profile or no this this is my profile if we go to my profile here you can come down and you can see the collections and you can see that for lesson five we did 25 um problems and then for lesson six we have some challenges and once you get here you can click on the train now button which is going to take

you into all of these uh problems that I've laid out for you here On the right and there's 10 of them so we'll go ahead and click train now which is going to basically put us in this list and keep us there when we press you know next uh Kata or whatever that's called I think it's something that has to do with jiu-jitsu I uh didn't know in the previous video but I think I learned since then um again leave it in the comments if you know uh totally what it means anyways let's get started

with our first code challenge which is going to Be list filtering now if you remember from the previous uh couple of videos we went through the built-in methods and one of those was the filter uh method on an array so in this case I would guess that we're probably going to be using that to solve this problem now I haven't seen any of these um or I've seen them I picked them but I haven't tried to solve any of these so we're going to be going in real time um but I think the filter methods

probably going to be what we Want here so it says in this Kata you will create a function that takes a list of non- negative integers and strings and returns a new list with the strings filtered out so this is a perfect uh use of our filter method we'll go here and as we always do let's um change our parameter name so it's more descriptive so we'll call this um so num list or even better num array and what we have to do is basically return num array and then we want to add the filter

method on The end of that and the filter method as you might remember is going to basically take a call back function and whatever that call back function returns um if it returns true on the individual element that We're looping through then it's going to keep that in the array if it returns false then it's going to throw it out and not include it in the resultant array so just for the sake of clarity I'm going to actually break this out into a separate function and then We'll refactor it so that it's a little bit

uh more concise so we'll say our callback uh function is going going to take an array item so that's how all of these uh methods on the arrays work they pass in the array item to the call back and then we're going to return a condition so in this case we want to look and see if we have a non- negative integer so any negative number or string is something that we need to filter out so we'll say um first off if the the Type of array item um which is going to return us with

the type of the the variable if that is not equal to a number which we actually have to put in quotes so let's go to our our little uh playground here and if we have a number something like this and we say type of 20 it's going to give us number in quotes and then if we put in some sort of string it's going to give us string we're using that uh knowledge and we're saying if the array item does Not equal number then we want to filter it out and then we also want want

to add a condition um we can say if it's not a number or with these two pipes or if the array item is negative so how do we figure out if a number is negative well we could just multiply it by NE -1 and if that turns out to be positive um that's the case but we we could also do something else so in our callback function we need to return either true or false which will determine whether This individual array item that We're looping over will be uh returned in that final array so in

this case we have two conditions so we'll put this in a comment we'll say our first condition is that it is um it is a number our second condition is it is positive so all we have to say is if the array item is greater or equal to zero um and the type of the array item is equal to number then we want to return true otherwise we return false here and exclude it so this Little type of operator we've looked at it before a couple of times just to show you what I'm talking about

um I have up here if we say type of uh string or put a string in there it's going to return the value of string but if we put in say a number it's going to give us number so that's what I'm doing here I'm saying if the type of the item is equal to number then we want to keep it all right so there's our callback function this should work and all we'd have to do is Say return num array. filter and then we pass in our callback function and let let's see if that

works when we test it so it does work but there's a couple ways we can refactor this the first way is that we don't need this conditional all we have to do really is return this expression right here which if this expression evaluates to true we want to keep it and if it evaluates to false we want to throw it away so if we just Return the expression it should work just the same now another way we can refactor this is by taking this entire callback function and simplifying it so instead of passing it in

as a declaration or whatever we can just Define it right here so we can say array item and then use an arrow function to actually return this so let's break down onto the new line and we will return this expression right here and then we can get rid of this second function test It again and we should pass it now the last thing that we can do we don't even need these little brackets here um we can get rid of those and get rid of the return statement because if we put it all in one

line it should work just fine so let's go ahead and test that um looks like we got some sort of syntax error uh yeah we have this little semicolon at the end which is not valid so let's go ahead and test it now and we're passing it so that's how you might take this and Refactor it to work correctly let's attempt the solution and we pass them all so so we solved this one uh just okay so we'll submit it and see what other people have used to solve this um solution all right let's go

down here and um let's see this one did something very similar to us looks like they're saying if this is equal to number so I don't know if they accounted for negative numbers but maybe there's something about this that Does um down here let's see well maybe I misread this actually so I wonder what the instructions were maybe go back and and see I guess maybe we didn't need to uh look for non- negative numbers um I don't know all right let's move on uh it's not super important you can go back and kind of

look at that on your own all right our next challenge is array. diff so probably getting the difference of an array of some sort so Let's go into the instructions it says your goal in this Kata is to implement a difference function which subtracts one list from another and Returns the result it should remove all values from list a which are present in list B okay so looking at this we see that one is in both of these arrays so it's going to remove that and leave us with an array of two um in this

one we have two present in both arrays so we're going to remove that two and we're left With one and three which gives us us our result so that's basically how this is working um and hopefully we can use one of our built-in methods to solve this so just a fun fact if you go to the low Dash Library um this is something I talked about in a prior lesson or not a prior lesson in this lesson in a prior video you can go to the documentation and there's actually a method here um so we

can go to the Intersection um the intersection method is going to find what is alike within the arrays but we're trying to find the difference so we can go to the difference method right here so ultimately our challenge is to implement this method which we can use in low Dash it's very just kind of an interesting thing to know and if you start using the low Dash Library like we might do kind of later in this series it will come in handy for this reason so what we're Trying to do is find the difference um

and I think the way that we can do this is by using the array. includes method let me pull up the mdn documentation so we'll go to the web docs Go to JavaScript go to built-in objects click array and now we can go down to the uh includes method which we talked about in a prior video in this lesson so this is basically going to figure out if something is uh included in another array or if a value is Included in another array so if we were to Loop through one of these arrays and then

ask is each value included in the other and if so just remove it then that might help us solve this problem the first thing I want to do is check for the edge cases so if you see in the test down here there's a couple times where the first array might be uh nothing or the second array is nothing and in those cases we just have to return whatever is in the other array so let's say that if Um a.length is equal to zero um then we want to return B so we want to return

the other array and then we'll say if b.length is zero then we want to return a and let's go ahead and test that to see if we got a couple of them right and you see that we passed one of the test because it uh passed in as an argument in empty array so now have to actually solve the question of how do we get that Intersection and figure out um what is actually different between the two arrays so I'm just going to open this up here to full screen and then maybe we can put

in an example just so that we're uh anchored to something so let's put in something like three five six six five and two and then the second array will be something like three and six so we know that we want to have in the final array we want five um five and two so let's see that how we can Actually solve that so what I think we should do is Loop through this um one of the arrays so we'll say a do4 each and then we have to pass in our callback function which will do

something on each iteration so we'll say array item and then we also probably want to grab the array index and I'll show you why in just a second so let's Dro down into our function here and this needs to be um stored in a result we could also just return it but we'll store that in a Result and then we'll return the result at the end of the function so every time we iterate through this we're going to actually um use each item check if it exists in the other array and if it does exist

we're going to remove that item from both of the arrays um in each iteration of the AL Loop in order to do that we need something that removes an item at a specific uh index of an array so let's go on to the documentation and just refresh ourselves on this method Called splice now this is something we talked about in a prior video of this lesson but this is going to change the contents of an array by removing or replacing existing elements so we can remove um an element at a start index and then we

can um that's kind of how we're going to solve this so we'll say that if the array item or actually let's say we're we're iterating through array called a so if B so the other array includes the array Item if if that includes the array item then we want to remove it so I'm going to put some comments here we have found this element in uh both arrays so we know that we need to remove that so how do we do that well we have to probably get a new array for each of these and

then now we're going to be working with that as that uh you know most recent array so let's make a variable up here for we'll say current array Um a and we'll just set that equal to to I don't know we'll put a placeholder in there called null and then we'll say let current array b equal null so that will be the placeholder that we're going to assign these if we have mutated the array so now what we want to do is create two uh separate arrays so we'll say new a and then we'll come

down here I'm not done with this yet but we'll say new B So we're going to grab two arrays that have these values removed from and the way that we do that is basically by saying a. filter so we're going to use the filter method and then I'm just going to uh pass in the name of the item is item because we don't want to conflict uh with this right here that we've used in kind of the parent call back that we're using and then let's go ahead and return this so long as this item

that We're looping through does not Equal the array item that we want to remove so as long as item does not equal array item we want to put that into the new array and we can actually use the same um syntax down here we just need to replace a with B so this will be the new array um for each of them and all we have to do here is replace this with our placeholder so current array a and I'm actually going to just call this new a just for Simplicity And then new B and

we'll change that here so new a and new B and so now each time we basically what we're doing so far here is We're looping through every element within the a array and then we're going to um basically create a new array for both of them with the only the elements that have not been matched across both of them so let's see what this is returning I'll exit out of here let's just test It um looks like we've got something going on here so let's go ahead and print what the result is before we actually

return it so let's print the result and see what we're getting so a big mistake that I made that I just realized is that I'm actually modifying the original arrays and we don't want to do that because that's basically saying Okay We're looping through both of the or through this array but within the loop we're modifying it at the same time And we definitely do not want to do that so let's open up the code block once more and now what we need to do is we need to get a copy of each of them

so we'll say a copy is going to be equal to a. slice which is just going to create a copy of that array and then B copy is b. slice so that's just going to give us two copies of the array and now what we're going to say is instead of of a. filter and b. filter we're going to do the a copy and the B copy and that's how We're going to uh sort through these let's go ahead and test that and see if it gets uh us an answer here so looks like we're

getting undefined for our result and I wonder why that's happening so let's see oh that's because okay I'm just not thinking here so we're not going to assign the for Loop to a value CU it doesn't return uh in a r it just Loops through it doesn't really return anything so uh returning the result is going to not work so what we Need to do is just return either one of these I believe so let's see what happens if we console log new a and then maybe return it okay so we're passing more of them

now um let's see it looks like this sample test it says if a is an empty array then we want to return an empty array so I think I messed that up here um okay so here we have the first one empty so we want the result to be empty so if a.length equals z then we just Want to return an empty array rather than the BR array so let's test that looks like we passed all of them let's go ahead and attempt it I'm not sure if this is going to pass um it looks

like we got some uh problems if we have negative numbers Maybe let's see what we're dealing with here okay I think something that I'm doing wrong here is I'm taking a copy of the original array each time but we probably want to take a copy of the um New array that we've Created so each time it Loops through it's going to remove you know one of the elements but if we keep uh making a copy of the original array we're going to keep adding back those ones that we REM removed already so let's go go

ahead and instead of making a copy here I'll expand this out we'll make a copy of new a and new B so this should represent um the updated array so how this is working I just want to take a second to explain this let's say that we have um the Following example so we have 1 2 two and three and then maybe we have two and three or something something like that so what's going to happen is we start with array a and we're going to Loop through it with this for each Loop so we're

saying okay we're going down into our code uh new a is going to be equal to null to start and we're going to be uh taking a copy of that which is going to give us uh null and then we're going to say if B includes the array item so In this case the array item is going to be one so we're saying if this array B includes the value of one then we're going to drop into this code right here and if that's the case then we're going to take new a and we're going

to filter it um and set it equal to or we're going to filter the copy and set it equal to new a so we probably need to initialize this um to be equal to the original array so we'll say we'll start it with a and then we'll start it with with B There so now we're starting with the original array and each time we get down into the loop we're going to take a copy of whatever has been updated and each time in the loop we're going to check okay is one included in this second

array yes it is so now let's set new a which was the original array at the beginning but now we're going to filter out um this item that we found in both of them so now as we go um through the second time it's going to uh be removing Elements so in the first iteration of this Loop one is not found here so we don't do anything the second time that we come around we look at two and we see that two is included in both of these arrays so we are going to drop down

into this if statement and we're going to reassign these uh placeholder arrays um with our filtered array that does not include the two anymore so it's going to just have 1 and three and then two and three and then finally we get to the Last one after a couple iterations we see it's in both we remove that and then we assign it to New a and new B so let's see if um this works a little bit better looks like we passed the easy ones and then we passed all of them so this was a

tough question like if you look at the difficulty of it it's 6kyu and I once once again have not gone through this beforehand like I don't know I didn't know how to solve this problem before I looked at it so um Hopefully that gives you a good idea of how thinking through this works like it takes a lot of iterations it's not something where I'm just like all right we're going in and solving it I know exactly how to do it you have to try some things you have to test it you know you realize

oh I didn't account for this didn't account for that and eventually you will get to the answer so this was a really tough one I would definitely not call this a beginner uh JavaScript Problem but hopefully you can see in our big solution here how we have used um a bunch of different methods so we used slice we used filter we used includes and we used four each we used all of these in the same problem and that's how these built-in methods of JavaScript can really come in handy and it looks like after solving that

since it was a tougher problem looks like I have leveled up here um I started this Cod Wars thing uh to make These videos so that's why I'm not a little bit higher up all right enough notifications here let's go to the next problem looks like we have another tough one 6kyu um so let's see if we can solve this a little bit quicker than the uh first one that we did here okay so let's look at some of the uh potential inputs and at the bottom it says note all the hashes are prevalidated and

will only Contain uppercase and lowercase letters um a little uh Dash and looks like a period so that's all that we would expect to see um and then looking at the examples you see we have a list of objects where each object has a property called name and as we scroll over okay that's all that we're working with there um so in this case Bart Lisa and Maggie so it looks like we have to put a comma after the first one um probably a comma after The second one if there's more than three but in

this case there's three so you put the and instead of the comma okay and then in this case where there is nothing in the array so it's empty we just return an empty string so that's a really easy one to start with um I'm going to actually zoom out this is a little bit zoomed in I wanted people to be able to see everything but um in this case we running out of space So let's go if the names. length equals 0 then we want to return an empty string and if we test this we

should pass pass at least one of them um for that empty array so we did that we got that uh test case covered now we have to actually go through each of these so let's see how that how we can do that we'll probably be iterating through the array with a four each Loop um but let's see okay let's try that so we'll say Names do4 each and then we can say name will be the uh argument that we're dealing with let's put some parentheses in here because we're actually going to need need the array

index which is the second argument of the for each callback um and again if you wanted to see that if you wanted to actually figure this out on your own if you go to the for each method so I go to Technologies JavaScript built-in objects array and Then I go to the for each method and then you can read all the syntax and it says the call back is going to have these parameters right here so it first passes in the current value then the index of the array That We're looping through and then the

original array so that's how I knew to add in the name and then the array index and you could have just called this the array item to be a little bit more clear so let's break this down onto a new Line all right so We're looping through and that's not going to return anything so we'll probably need to store this in our final string which will be equal to nothing to start all right so we'll Loop through um and actually if this array has a length of zero then this for each Loop is not going

to do anything so we probably could just return the final string and instead of having this if statement up there we'll just have this so let's test that and make sure it Works with that empty array which it does all right so back to here we're basically going to be grabbing the name property so we'll say name is going to be equal to the array item. name because we know that the array item is going to be an object like right here and it has a property called name all right so we have our name

um and we just want to add that to the final string so let's see um we need to first check if the array index does Not equal um the total names array. length so Bas so basically what we're saying is that if we're not on the last index of the array then we want to do something so if we're not on the last uh index of the array we want to take our final string and we want to add the current array item uh name which is stored in the name variable that we put right

here so that's going to just add the names and then of course we need the comma so we Want to add the name um so let's just remove this equal sign um and then we'll say final string equals final string plus name and then plus a comma and then a space all right so that's going to basically reassign that final string and add the names with the commas so let's uh console.log the final string as we have it it's definitely not going to be right but we'll see what we're getting okay so we have Bart

comma Lisa Comma Maggie comma Homer comma and Marge comma all right so that's kind of what we're expecting here but now we have to add in the and symbol and you can see in the last one right here we've um put in a comma so let's see what this one actually was passing in as a test okay so one mistake that I made if the array index is not equal to the names. length remember the uh length of the array is going to be um literally how many elements are in the array but the Array

is zero indexed so we'll actually never reach the um index that is equal to the length of the array so we have to say the names. length minus one and if we test this we should not see um this output here we should basically skip that one so you see that we skipped Marge this time so that is actually correct now um we'll put an else condition in here so otherwise if it is kind of the last element of the array so in here We'll put the final string will be equal to final string plus

the and symbol and then plus the um name itself all right so I don't think this is going to work perfect perfectly but let's test it yeah so we're seeing and Marge without a space here so all we need to do is add a space in there and test it all right so this looks a lot closer to what we're um expecting so what we're missing here why it's failing is because we still have This comma here and when we have the and symbol we don't want the comma at the end so basically um this

condition is not going to be correct so we want to actually Identify two different situations we want to identify when we are on the second to last and then um when we're on the last one so instead of saying not equal to let's say um equal to so if the index that we're working with let's go ahead and expand this a little bit so if The index that we're working with is equal to the last one um that's when we're going to paste in this right here so we want to put and name okay um

otherwise so else if the array index equals names. length minus 2 so the I guess third to last we want to say the final string will be equal to final string uh plus the name but we don't want uh any of the commas going on here and then other otherwise we just want to return the final string will be equal to Uh final string plus the name plus a comma and a space so let's try this out and see what we're getting as output uh you can see that we're getting a lot closer so we

have everything correct except we need a space right before the and symbol so let's just add that real quick here's where we're doing and let's just put a space there and test it again and now you can see that we're passing most of the test cases now We have one down here um it says wrong output for a single name so if we have a single name we probably need to just return the name itself okay so we can just cover that in a separate test case so we can say if the names. uh length

is equal to one we're going to just return the names um z. name so that should cover when we have a single Name so we passed all of them let's attempt it and we passed all of them so this was another really tough one um probably not a beginner problem necessarily but hopefully again you see how we're iterating through this and and trying out different things until we get to the final solution all right so let's submit this one and go to the next as you can see someone solved it with the reduce method which

we learned about in the prior uh uh video of this Lesson um but I didn't think of that so that's a that's a useful one and basically anytime that we're using like an accumulator so in this case we had the variable called final strings so go back in the video to see that if you have a accumulator variable followed by a for Loop that modifies that that's always a good use case for the reduce method I didn't think about it in this uh particular scenario but that's that's always a good use case um this one's

Very interesting I'm not going to go through all of these but be sure to look at them because people come up with some very clever Solutions all right so let's look at this one this again is a pretty tough one so I guess we're getting all the tough ones in a row and then it's going to get a little bit easier here so in this problem it's basically um the name is take a 10-minute walk and it's saying you live in this city blah blah blah where the roads are laid out in a Perfect grid

and you arrive 10 minutes early to an appointment you want to go take a walk um you've got an app that generates a little route and you can go either north south east or west and each unit is going to be a single block all right right so we need to figure out um if a given array of directions is going to put us back at our original destination and it's going to take exactly 10 minutes and it says that um each block is going to take you one Minute so you takes you one minute

to Traverse one city block so we're basically returning true if it does false otherwise and then it says note you'll always receive a valid array containing a random assortment of directional letters and you're not going to receive anything other than north south east or west so in this case I think I have an idea of how we might solve this just initially so let's open this up and say the first condition um We know that if there's not exactly 10 elements in in the array it's going to take us more or less than 10 minutes

so we'll say if walk. length does not equal 10 we're going to return false all right so if it doesn't equal 10 we're returning false and not going to the rest of the code if it does equal 10 then we'll go into the rest of the code and see if it gets us back in 10 minutes to our original destination now in this case I think what we're going to do is Um initiate or initialize four different variables so we'll say uh North offset equals 0 uh West offset equals Z and we're going to do

this for all of the directions so East offset and South offset all right so now we're going to uh loop through the array so we're going to use the for each method and we're going to pass in instead of array item Let's start learning how to actually um name our parameters to be a little bit more descriptive so we'll say Direction which will represent the direction that we're going to receive and then we'll go down into the for Loop and for each direction we're going to set um our variables uh offsets so we'll use a

switch case statement so we're going to put in the direction in the switch statement and then we're going to say case if it equals n then it's going to Be North all right so we're going to put a break statement in there if it is west all right and then we'll just put the cases for all of the other ones we don't need that last break statement because it'll get there no matter what okay so we're going through all the different cases and in each one we're going to change the offset so if it is

North we're going to say the north offset is going to be plus or equal 10 all right so that's just going to say um Or not 10 we'll just say one so we've gone North one block if the case is north and we're going to do that for all of these different cases so we'll say uh West offset will be plus or equal 1 and then um let's see East offset Plus or equal 1 and then in the last case we will say South offset Plus or equal 1 so if we reach our destination like

if we get put back to our destination then I think the sum of all of the offsets Should net to zero um or not not the sum you have to subtract them so the north offset will offset the South one and then West and then East so basically if North minus South equals 0 and West minus East equals 0 then we know that we have returned to the original destination so if we go down to the uh for Loop here we'll say if North offset minus South offset equals z and West offset minus East offset

equals z then we will return True otherwise we return false now in all of these cases you're going to start catching on that when we just return true in a conditional often times we can just return the expression itself so let's copy that and instead of this complicated block let's just return the expression itself all right so let's break out of here and test it and see what happens and we passed all of them so my assumption was correct you just Calculate the offsets they should net to zero if you subtract them and if the

you know left and right offset is zero and the top and bottom offset is zero then you've returned to your office or your appointment so let's attempt it see if we covered all the cases and we did so awesome let's submit it now this one I think was a little easier than the last two that we did but still required a little bit of thinking and I'm sure someone solved it in a much more Efficient way so when it loads we'll see all right so the first solution here um pretty much the same thing that

we did so we did pretty good on this one all right once again we have a 6 Kyu so might be a little bit tough but let's uh jump in and see it says write a function called persistence right here that takes in a positive parameter num and returns its multiplicative persistence which is the number of times you must multiply the digits in Num Until you reach a single digit so I don't understand this fully at first but let's look at the examples all right so if we pass in 39 it says we do 3

* 9 which is going to be 27 right here and then you do 2 * 7 will equal 14 and then 1 * 4 will equal 4 which is a single digit okay now does it always do positive numbers okay it says positive parameter okay so we know it's going to be a Positive number so we know how to identify what whether the solution is a single digit we basically say you know if it is less than 10 it's a single digit okay so we're probably going to go in some sort of loop here to

iterate over each new solution and we might actually use something called recursion I'm not sure about that yet but we'll see so let's see if this works so we'll say um how do we get the individual pieces of this Number though so let's go um I can't actually remember if you can do this but let's take a number like 299 and see if we can access individual pieces of it looks like you cannot so we have to figure out how to get the first um digit of each of the numbers so in this case I

probably should know this but I don't and in the real world this is what I would do I would just open up a new tab and say find um or maybe not find we'll say get first Digit of a number in JavaScript so this will work get the second digit of a number okay so looks like we're turning it into a string grabbing the first digit and then converting it to a number okay so let's put a num equal to 299 and then say num to string okay it gives us 299 and then we can

grab the first uh piece of that and then we will convert that to a number now there's a quick way to do This um you could just put it wrap it around with this number object and it'll turn it back to a number or what you can do this is a shortcut you can just put a plus sign at the beginning and it automatically coerces it into a number so this is the pattern that we're going to use we're going to grab each of the um digits of that number number and then we can see

you know multiply them together basically so the thing I'm curious about Is whether uh we have okay so if we have three digits here we have to multiply all three of them okay so that's good to know so it could be up to maybe you know four or five or six digits so we have to do you know this times that times that times that so that's um something we have to take into account here now if it's already a one-digit number it says to return zero so let's just say that first we'll say if

num is less than 10 which means it's a on- digigit number We're going to return zero and if we test that we should get at least one of these correct so if if it passes in a on digigit number we got that correct okay so the next part let's see so what I think we should do here is we should convert the number to a Str string and then maybe instead of doing what I was showing you over here converting it back to a number maybe what we can do is take the string and put

it into an array so let's go ahead And do that um string version is going to be num. two string and then from the string what we know we can do is actually convert that to an array so we'll say array version is going to be equal to the string version and then um let's see I actually can't remember exactly what we used there so let's go to the documentation um and go to the string Methods is what we're looking for the reason we're looking for a string method Is because we're trying to convert this

string here into an array so let's go to built-in objects string down here and then let's look through the methods I know that there's a way that you can can turn this into an array okay so it should be the split method yep that's what we need I don't know why I couldn't think of that but um if we take a string so let me just use an example so you remember we can Actually write a string literal so um some string example and then we can take that literal string and chain a method on

top of it um because it wraps it in the actual string object that has methods automatically so what we can do is say split and then if we just pass in a empty string it's going to split it by each of the uh values here and that's exactly what we want to do so let's go ahead and see how that would work so if We say num. two string so we first convert it to a string and then we say do split and we pass in an empty string it's going to give us each of

those um numbers um in string form all right and then from here we can basically convert those to numbers and multiply them together a good way that we can do that is by using the reduce method so if we chain on one more thing here we can say reduce and then we can say the the um accumulator which is going to be Accumulating that multiplication uh operation um but we have to pass in a call back function so we'll put the accumulator and then the actual array item or the number so maybe we'll just pass

in Num for number and then now what we want to do is accumulate so multiply equal so it's going to take accum like whatever that's equal to now and it'll multiply that by the new number and store that in the same variable called ACC for Accumulator so we'll just do that multiplied by a number and we get the answer of 162 all right so that's our that's our solution here so if we do 2 * 9 * 9 we get 162 which is our answer here so this is basically what we're going to do and

we can do it in one step like we've done here but we can also see it a little bit more clearly if I break it out into steps so let's go ahead and do that we've already converted it to a string Now we want it to be in an array so we'll say split by an empty string and then finally we want to get the uh multiplication value is going to be equal to array version. ruce and then we of course have our accumulator and our number and then what we want to return from that

callback function is the accumulator multiply not added sorry multiplied by that number okay so that's our call back Function multiplication value should get the multiplication of all of them and then we'll say if multiplication value is less than 10 then we want to return true so you can already see where this one's going we can just return multiplication value is less than 10 so if it is less then we return true otherwise we return false um now the problem with this is we have to figure out how many times um we have to iterate Through

this before we get something that is less than 10 so we're not quite done with this solution yet so this I believe is where the recursion comes in and recursion in uh coding languages is probably the hardest concept that you could um learn so this one don't beat yourself up if you don't understand what this is doing fully um this is something that took me a long long couple hours uh early on in my journey to fully understand like how it Worked so don't beat yourself up um but I'm going to show you how I'm

going to do this and hopefully it will actually work so I'm not talking a bunch of nonsense here all right so for this solution I had to turn off the camera um I didn't realize that we'd be dealing with recursion here um until I looked at this problem but a trick that you can use for recursion and just to kind of explain this code just at a high level and again You don't need to understand exactly how it's working because recursion is a very tough subject but basically what we're doing is we you know go

through this code which I explained a little bit earlier and this is going to give us our multiplication value and then for recursion where we're you know calling the function multiple times on itself you need a stop condition okay so the stop condition is um when multiplication value is not greater or equal to 10 so Basically in this uh else return and what we're doing here when we say return one plus the uh persistence what it's doing is it's this is just a trick of recursion and if you read up on how recursive functions work

in JavaScript you'll see this notation right here but basically what we're doing is we know that if the stop condition is met then we return the value of one otherwise we're going to keep calling the persistence function until we reach that So if we add one to the return value of each iteration or recursion then we're going to accumulate a total value of how many times we went through this so again this is a little bit confusing it was really confusing to me I had to brush up on recursion a little bit to solve this

problem but basically this is I think the best solution that you're going to find for this problem so let's go ahead and attempt it we passed all of them so let's see How other people solved it maybe there's a way to do this without recursion um but nevertheless this is probably the most efficient solution okay so actually the first solution might be more simple than um what we used here so this doesn't use any sort of recur verion at all this is simply um using the reduce method kind of as we had used so we

we did this exact thing um but it's looping through while the the numb numb counter is Greater than one so and then it uses this times variable to kind of collect the number of times that we've gone through this um this one right here this is like this is as concise of a solution as you could possibly get this is basically what we did um it's a little bit syntactically compressed so you have a lot of little JavaScript tricks going in here but you can see the where we do one plus the persistence function so

we're recursing over it so that would be The most clever solution as you can see here um but once again recursion is a very tough subject I wouldn't expect um any beginner that's watching this to really understand how to do that but of course you could have solved it this way which didn't require recursion like I used okay so we're on a 7 Kyu um problem which should be a little bit easier so let's see if that's the case it says ATM machines allow four or six-digit PIN codes and PIN codes cannot contain Anything but

exactly four digits or exactly six digits if the function is past a valid pin string return true else return false so this one looks pretty easy we're going to be using regular Expressions here um so this is exactly four digits um this is four digits but it's alpha numeric so there's a letter in here so it's not valid so this one should be pretty easy we can go over here to actually look um at these uh regular Expressions a little bit so let's say that we have a string and the string is uh four digits

here and then we want to match that against a regular expression of some sort so if we want to do that we're looking for numbers between 0 or 9 and we want either four or six so the way we can do that is we can basically I think I think we can just wrap this in a parentheses and then repeat it with an or and then instead of four we pass in six here so let's see if that works if We add in one more it should not match it but if we add in two

more it should um no so that's not working we could just separate this into multiple regular Expressions because I can't remember exactly how to do this um for both of them so in this case we're looking for any number so this will exclude letters automatically in a quantity of exactly four and we could be even more specific by saying the start of the line and end of the line with the Dollar sign and basically if we're matching this then we're good so if we come up with anything here now if we put in uh five

of them we're going to get an answer of null so we know that if we get an answer of null then it's not correct so let's go ahead and just write two regular Expressions so we'll say four digits regular expression is going to be equal to what we just wrote here so let's just paste that in and then we can come down here and Say six digits regular expression and just change this right here to a six so we're either matching all numbers uh in a quantity of four or all numbers in a quantity of

six so we can basically return you know if both of these are null that means that we didn't match either of them so the answer is false but if either of them are true so they have a you know they're not null then we can return true so let's let's say we want to return Um four digits R Rex um and we have we actually have to match this up against the PIN code so let's do that real quick so we'll say result one equals and then if you remember you can take the string pin

number um I'm not sure if it is a string okay so it's pasted a string value so we're good so we'll say uh pin. match and then we'll pass in the four Digits regular expression and then we might want to look for result number two and pass in the s six digits regular expression so here's what we can say we can say um return result one. length is greater than zero or no because if it's null then we don't have an array that we can check that on so basically we can say if result 1

equals null and result 2 equals null then we want to return false otherwise we want to return true Because we matched one of them so null values um default to falsy values so we can actually remove this um and say if not result and not result to and you can see that it passed uh now we can simplify this even further uh so if we say let's see if we just return this expression can't spell so if we're saying if both of these are equal to null then we uh return false so let's See if

that works it may actually be the opposite yeah so it's it's going to be the opposite um let's see so all we have to do is reverse this by wrapping it in parenthesis kind of reversing the result and this time it should pass so this is a decent solution but I guarantee you there's going to be solutions that are a little simpler than this where we don't have two different regular Expressions there's definitely going to be a Solution where we have a single regular expression that checks for both of them and I'll point that out

when we get there okay so this one would be the best one uh the back slash D represents the digits so that's the same thing as our brackets and then 0 to 9 and you can see that it's doing the same thing that I was kind of trying to do I must have just messed up part of the syntax there um but it's just testing against this regular expression so um that's Basically um the best solution and this is the one I'd recommend using if you had the time to actually figure out how to write

the regular expression that covers both cases now this is another regular expression this one should be even easier um because it's 8 Kyu so it says your task is simply to count the total number of lowercase letters in a string okay so let's take one of these complicated ones here and just take it Into our um little sandbox that we've been using so I'll paste that into the string and we'll start over with our regular expression so in this case we're counting the number of results that we have so we probably want to pass in

the global flag to our regular expression so put that at the end and then we want to look for a through z uh lowercase letters and that's basically going to give us our answer I believe so if we just pass in a through z and then we Pass in This Global so if we take this off it's just going to match the first lowercase letter but if we put it back on it will give us all of them so that's pretty much all we're having to do here and then we just need to count the

length of the array so let's do that we will just say return string. match and then we'll pass in lowercase a to lowercase z we'll pass in the global option and then we'll return the length of that Array looks like we failed one of them um so cannot read property length of null so in this case there's probably no array that we're getting right so if there's nothing if there's no lowercase letters we're not going to get a valid array and you can see that here if we were to take out all of these lowercase

letters you're going to get a value of null so we need handle that instead of just tacking on the length we have to first check whether it is a Truthy value so let's see how we could do this kind of Simply so we can use a Turner operator to do this so if we C if we um basically say if this is a valid expression so as long as this does not equal null then we're going to get put into um this part of the Turner operator so let's let's go ahead and save the result

so the result is going to be equal to our regular expression evaluation um and then we're going to Say if the result is a a truthy value then we're going to return result. length and otherwise we're going to return false or something like that let's see what it says in the instructions okay so if there's nothing we want to return zero so sorry about that it shouldn't be false it should be zero all right so we passed it this time let's just clean that up and attempt it cool so this one was rather simple a

little bit easier than our previous Regular expression and again as I said in the lesson you don't need to necessarily know like all of the details about writing regular Expressions it's just good to be able to read them and that's why I wanted to go through this as an example so the next one we're doing is going to look at some basic dates and this one is asking is the date equal to today so it says write a simple function that takes a parameter as a date object Or um takes as a parameter a date

object and returns a Boolean value representing whether the date is today or not okay so this last part is basically just telling us like hey there is um going to be you know the 10th of January and the 10th of February so you can't just look at the day of the month which um we will look at but not exclusively so let's just make a bunch of variables here so our um check day so this will be the date that we're passed We can just use the get date method that's going to give us the

day of the month all right so check month is going to be date. month I believe we can go to the date methods so if we go to um the mdn document ation go to built-in objects and go to date you'll see that we have the get month method um the get full year method and the get date method now you might say get day um but this is the day of the week not the Day of the month so we need get date instead so this will be day or this will be month of

year and then this is zero indexed so that's important to remember so January is going to be zero and then uh the check year is going to be the date. getet full year all right and then our uh date today is going to be very similar so let's just copy all of this code down here and we'll say today instead of check and then we'll replace all this With um the actual current date so today is going to be equal to a new date that's how we initialize it and then we can pass this in

here in uh place of the date so then we just return um check day equals today day and all of the other ones match so let's just write that out all right so it's a little bit of a long expression but it should work all right So we passed it now the quickest way to do this um it looks like is this solution so what are they doing here so they're creating a new date converting it to a date string and checking if that is equal to the date that was supplied to date string I

actually didn't know that you could do that because this will give you different times but I guess it matches if you have uh different times of the day so let's Just try that real quick in our um console just to see if it's true so we'll set a to a date and then we'll set B to a date and then see if B equals a which is false so if you go um obviously those are not going to be equal because the value of the date is milliseconds since whatever January 1st 1970 at midnight um

but if we convert it to string so two string and then try it with b.2 string that's going to give you a false Value too so I'm not sure what's going on here oh to a date string okay that's what that's where we went wrong we're using to date string so that should work now okay so that equals true so let's take a look at that um method on our documentation so it says two date string which is not some not one of them that we covered in our lessons which is why we didn't use

it here but it says this Returns the date Portion of the date object uh so that's basically going to strip off the time um and check if it's the same day so that's a good solution didn't think of that but that's a lot more concise that than what we did this is what we did we just checked it up against um all of the different methods that we had covered in our lessons all right so let's go to the next challenge and this is alternate capitalization given a string capitalize The letter letter that occupy even

indexes and odd indexes separately in return as shown below index zero will be considered even okay so we're going to return basically two strings for each argument here the input's always going to be lowercase with no spaces okay okay to solve this we first need to get this into an array so we need string to be into an array and then we'll uh capitalize them separately and then We'll combine them back into a string and assign them to different array values so how that's going to look um let's see we will say array is equal

to string dosit and we're going to split it by an empty string which will just separate all of the characters by a comma all right so if we just did that and console. logged it here's what we're going to get here's our string right here so We've got all of each letter uh broken out and we know that we have to take this array and we need to capitalize it in two different ways so we'll just say array one is going to be string dosit and then we will also have array 2 and then we're

going to Loop through these arrays so array 1.4 each and we'll say for each item then we also probably want the index because we got figure out if it's even or odd and Then we'll say array two but let's not do that quite yet we'll just figure this one out first so for array one we want to check um if the index is we'll say even so this will be even capitalization can't spell here all right so if it's even that would include zeros um so how do we find out if a number is even

well we could use the modulus 2 operator so if we came to our little playground here in the Console and we said okay 0 modulus 2 is going to be zero one modulus 2 is going to be one two modulus 2 will be zero and three modulus 2 will be one so basically anything modulus 2 that returns us with zero is going to be even everything else is going to be odd so that's all we have to do here we'll say if the index modulus 2 equals 0 then it's even and for that case we'll

say array one at the index that we're looking at um and then we want to set that to Uppercase Okay so we've got array one completed and let's go ahead and console. log that and see if we did it correctly and we didn't do this correctly I don't know what I was actually thinking here we already have the array item so we just need to take the item and make it uppercase I think okay so we have a problem here we're trying to modify the actual item which is not going to modify the Original array

um I just realized that so if you go to the array methods um and Go to JavaScript built-in objects and go to array you're going to see if we look at the for each method which is right here the Callback function takes the current value the index and the array so we want to actually grab this third parameter and modify it within our uh problem here so we'll pass in the item index and then the original array and in this case we'll take The original array we'll pass in the index of that and and then

we'll set that equal to the item. two upper case so I believe this one should work now we'll see and you'll see that we did capitalize the first so that's even lower case on the second uppercase on the third um so that should be working um and I believe we did that right but let's check one time um so Capital capitalize the Letters that occupy even indexes index zero will be considered even okay so we did that correctly so array one is done and then we can basically just do this again for odd capitalization change

this to array two and then instead of saying when it's equal to zero we'll say when it's not equal to zero and then we just need to return a final array and we pass an array one and array two and I think that should get us this to An Answer U maybe we did this in the wrong order let's see oh I'm sorry I'm not doing this correctly so our arrays are um split out into IND individual letters so we have to convert those back to Strings so let me do that real quick um array

one string is going to be array one um and then join by an empty string which will or actually yeah I believe by an empty string which will uh join them all together and then we can do the same Thing for array two string pass in Array two and then we will return those like this and see what we get all right so we passed them this time let's just open this up and review what we did so as you see we're going to first take these um strings and turn them into an array so

if we go back here if we have some sort of string and then we say split and we use a empty character it's Going to put it all into an array then we go and we Loop through that existing array with the for each method and we know that the Callback function that we're using is going to pass the item that we're looking at the index of that item and then the original array that we can actually modify within that Loop and that's we knew this because we looked at the documentation here um otherwise uh

you probably would have to do just a regular four Loop which acts a little Bit different than a 4 each so anyways we are going through and we're asking if the index is uh modulus 2 equals z which indicates it's an even number and when it uh equals an even number we take our original array we pass in the index into the brackets to grab the item and we set that equal to the item itself in uppercase form and then for the odd capitalization we just um basically do the opposite if modulus 2 does not

equal zero then we want to make it uppercase Then finally We join those back together so um if we go to this array here so we split them into an array and then if we add join with an empty character it just joins them back together to the original string but we've obviously capitalized a few of them in the middle so we join them back together and then we just place them in a new array and return that array and that should give us the answer okay I think this is getting to the end one

of our last ones here if not The last one uh it says given a number return the maximum number that could be formed from the digits of the number given only natural numbers passed to the function numbers contain digits 0 through n inclusive digit duplications could occur so also consider it when forming the largest okay so that's a good hint for us to remember here's an example so uh three goes first two goes second and one goes third that makes sense that's the maximum number that we Could form okay so basically we have to take

our number and we have to order it from greatest to least so I think a good way to do that is we might have to convert it into an array possibly so basically what this is asking us to do if we think about it um you know all of these numbers are going to be in the uh descending order so you have the largest one first and so Basically what this is asking us to do is sort an array because we know that we can take this number convert it to a string and then separate

that out into an array and if we can just sort that array then um we got the answer but the sort method does not do it correctly when we have numbers here so let's just type it in to Google um this is just an algorithm so sort array numerically in JavaScript and we'll see what the answers are so it Says how to sort an array of integers correctly and let's see okay so we can just use the sort uh function we actually can use it we have to pass in a call back um that will

compare the two numbers so um let's see the sort method takes a compare function okay so I was just reading this incorrectly so we can take a call back and look at the compare function and return the greatest number so let's go ahead and do that uh just practice real Quick so let's say that we have an array of numbers so two 631 and we want to sort that so we will pass in our single num and then we want to say let's see what does it pass into this call back so let's look the

first element and the second element is what it's going to pass in there so if we go to our little playground here it's not just one number but we'll have the first and second element and so If the second element is greater than the first um then we'll return true I believe so let's see how it did it in this stack Overflow answer it says return a minus B so actually it's the other way around so if a is greater than b um we return that as true and then that's going to actually sort our

array for us so let's test that out real quick we just want to return First - 2 and now we have it sorted in ascending order I wonder if we take it second Minus first okay so that's going to do it in descending order so we want to do second minus first for our problem here all right so the first thing we need to do is get this into a string so we're just going to try to do this all in one line because it'll help us kind of visualize chaining the method me together so

we're going to return n uh two string okay so that converts it to a String and then we want to split it into an array now we've got it into an array of numbers here and then we want to sort it and pass in the first number first number and second number and then we want to return second minus first okay and then that's going to give us um a sorted array of numbers so maybe we won't do this um let's just store this in a result for now and then console.log that Result and see

what we have so far so we'll test that and you'll see that it prints to the console a descending order of that array now we know that we can take an array of numbers and we can actually um just combine those together with join so maybe that's all we need to do we just at the end here so hold on one second let's return this again no let's not do that let's keep it in the result and then at the end here I'm going to break out um for a second And we can actually uh

put these down onto separate lines so we'll say split do sort and then the last thing that we want to do is we've got it in the descending um array so then we can join it back together as a string and that's going to give us one big number and then we need to just convert that to a number and all we have to do is add a plus sign at the beginning to do that so now let's see what our result equals Looks like we're getting the correct number here so all we have to

do is return this result now so we don't even need to store it in a variable we can just return it and let's see how it works looks like we passed everything and again this is just some indentation it doesn't really matter how you do this um we're just chaining all of these methods together and you could certainly have broken that out into separate steps so let's attempt it looks like we passed Everything and see what um others use to uh solve this problem okay so this person um did not pass in a sort call

back they just passed in no um no function whatsoever and that's going to default to ascending order as you saw up here so it says um the default sort order is ascending so here they're going to split it into an array they're going to sort it to ascending then they're going to use the Reverse array method to make it descending and then they're going to join it together and then wrap it in a number which we did by adding the Plus at the beginning of the entire expression so you can see I believe yeah this

one right here is the exact solution that we used so pretty good um pretty happy with that one and with that I think we are done with these problems um hopefully you learned a little bit I know some of these were uh more Complicated and challenging than you would expect for a beginner and certainly when we talked about recursion there for a little bit that's getting a little bit over the pay grade of someone just starting out but it is an important topic to explore and kind of understand um it definitely will come up in

some sort of coding interview if you're doing those um but yeah hopefully you enjoyed this um if you care to drop a like on this video I'd really appreciate it Subscribe to the channel for future lessons um and hit me up on Twitter I'm at zgd uh tell me what you thought of this video and um how the challenges went for you all right so I will see you in the next lesson I believe that is lesson seven this is an HTML crash course and I'm really excited to walk you through it and I want

to show you exactly what we're going to build over the next couple of videos so here is our ultimate Challenge that we're trying to create and what this does is you've got a bunch of buttons here on the right where we can click them and a random meme is going to be shown to the screen or you can have a joke displayed on the screen a quote or a riddle where you're going to get the riddle and then you have to reveal the answer here so this is going to be a really fun project but

before we get into it we have to learn a little bit about HTML now you'll notice that It's styled pretty nicely and this actually has some CSS in it but we're not going to be covering that in um this lesson number seven of the series in the prior lessons of this series we've been talking a lot about JavaScript and basically how to program in general now we're going to jump into HTML and then in the next uh lesson series we're going to jump into CSS and we're ultimately going to complete our introduction to front-end web

development before we dive Into to the details of HTML I want to start with a little bit of an analogy that will help us uh kind of going forward in this crash course and then also the CSS one in the next lesson so that analogy is building a house if you were building a house you basically have three steps first you have to build the structure so that would be the wood the concrete the brick the roofing all that kind of stuff then you have to set up the function of the house so that would

Be the plumbing the electric the water lines all of that kind of stuff has to go into the house to make it functional and then finally the third step is to make it look good you obviously don't want to build a house that doesn't look good you want to paint it correctly and you want to do some landscaping around it put some siding on it all of that stuff is very important for the market value of the house so if our house was a website the structure would be the HTML Now the function uh the

electric the plumbing all that kind of stuff would be the JavaScript and then the styling so the the paint and the Landscaping that would be the CSS now you could live in your house with just the structure or the HTML um you wouldn't have any function so you wouldn't have running water you wouldn't have heat or anything that makes a house livable but you certainly could live um in that house and you'd have a roof over your head now If you add in the function you could live with just that too so you know add

in the electric and the plumbing and now you've got a house that is functioning but one that is not worth that much if you went to try and sell it because you haven't painted it you haven't put landscaping around it and you haven't made it look attractive to another buyer so that's where the CSS comes in that's where the styling comes in so ultimately the goal of this analogy is to say that HTML is the only true requirement of a web page but if you want it to do anything useful you got to add some

JavaScript and if you want to make it presentable to other people your users you have to add in the CSS so that's just a nice analogy to remember how everything relates to each other and how HTML CSS and JavaScript play nicely together to create a full user experience on the web while these all work together we're going to be Skipping the CSS part in this lesson so like I said we've learned a lot of about JavaScript in the prior uh couple of lessons of this full stack road map series um and now we're going to

learn about HTML so we're basically going to be focusing only on those two how do they interact and just as a hint it's going to be a big conversation about something called the document object model or the Dom and that's basically the model that represents the HTML and Allows us to plug our uh JavaScript into that HTML and make it fun functional but at this point we're getting too detailed uh we'll get there in a second first we need to understand what is HTML how does it work and how do we write it the first

thing that we have to ask is what is HTML and it stands for hypertext markup language and despite the last word language it's generally not considered a full-on programming language like something U like JavaScript that we've Been working with before it's something that allows you to structure um your text and all different components that you're going to put on a web page but it's not a full-on programming language you can't add in a whole lot of logic behind the scenes and make things Dynamic without adding in that JavaScript now there's a ton to talk about

with HTML but similar to how I've been handling other Concepts within this series I'm not trying to get into Absolutely everything and do a super deep dive into it my goal here is to get you exposed and learning the most essential concepts of HTML those things that you absolutely have to know to build web applications I think a great place to start is to understand the overall structure of an HTML document so something you have to understand is that every browser tab that you have open is going to have one and only one HTML document

is what we call it within it so That one document follows a standard you know boiler plate is what we call it structure and that structure is what I'm going to put on the screen right here this is going to be the most basic way to write an HTML document now everything within those HTML tags we call these tags um is going to define the whole document and then within that document you have a head tag which has a site title so if you look up into the browser tab um you know the the name

name that You see within that browser tab is defined by that title within the head and then there's other things that go in the head of the HTML document some things like um different stylesheets uh meta tags all that kind of stuff that we're not going to get too much in detail with in this lesson now what we're going to be focusing on is everything within that body tag so that's going to represent the bulk of your HTML document and it's going to Represent the stuff that you're actually seeing on that web page well the

thing that I have up on the screen right now is going to represent the most basic form of an HTML document there is a more standard boiler plate that you're probably going to see so I'm going to put that up right now so this boilerplate HTML document um pretty much has everything that you need to learn in HTML CSS and JavaScript I'm not going to go through absolutely everything that You're seeing here but I do want to cover a few things that are very important um we're not going to actually get into writing these but

if you'll notice you see within the head you see this link tag and you'll see that it um references something called a Styles sheet and then it gives a file that is passed in so this is actually called a CSS document and that's going to be fed into the HTML to actually style it if you look further down in this uh Document you're going to see a script tag which represents the JavaScript that is connected to the HTML and gives it function now in our case we're going to be working in an environment called codeen

so what I've got up on the screen is a basic code pen document I suggest that you create an account it's free and you'll be using it throughout this uh specific lesson on HTML so if you look on the left side you see HTML CSS and JavaScript now going back to that boil Plate that I just showed on the screen this is basically a beginner friendly way to write that so code pen has already taken care of connecting everything up so the CSS and the JavaScript are automatically connected to the HTML and within this HTML

area this is actually going to be what we're filling in to the body so you know how I talked about there's the the whole HTML document and then you have the head and the body well this represents the body And you can just assume that CSS and JavaScript are all connected up and ready to go with this I'm going to be using this code pen uh playground because it's going to be a very userfriendly way to explain what HTML is all about later in the series we'll talk about writing our HTML CSS and JavaScript in

our own local environment but as we've been doing with the JavaScript earlier in the series using the browser um Dev tools console This is kind of the same deal we're going to just get into an environment that's easy to use right off the bat like I said HTML represents hypertext markup language and it only has a few key things that you have to understand about it what we're going to be focusing on a lot in this uh HTML crash course are two things so number one we are going to be talking about HTML tags and

number two we're going to be talking about HTML attributes so what do I mean By those well let's take a look at this code pen and you'll see that we can write a basic HTML tag by using these little brackets here so this is this happens to be a paragraph tag um represented by P and within it you have this these little brackets here so the the tag itself is enclosed in the brackets and then between it this is where we put some text that we want to display in the browser and you'll see that

once it Renders we have some text um displaying within the code uh Cod pen browser all right so the end of this is going to be what we call the closing tag and you'll notice that we have this forward slash before the tag itself so I'm going to put up on the screen a basic diagram that gives you the anatomy of an HTML element so if we're breaking it down you basically have an opening tag then you have one or more attributes that you have defined for that specific element Then you have the content that

you put within the element which can be just text or it can be other HTML elements in certain cases we'll talk about that in a second and then finally you close it off with a closing HTML tag so you might be wondering you know what is this whole attribute thing about you'll see you know in that diagram that I put up we've got a class attribute which just happens to be one of many attributes that we can um Define for an HTML element in this Case the attribute we're talking about is a class attribute we're

going to talk more about the different types you can use but in this case a class attribute directly relates to kind of identifying the element with CSS now we're not going to be talking a whole lot about CSS in this lesson but I do want to show you just the basics of what this attribute is doing so so we might say some class um def defined within this class attribute and then we can come down into The CSS and Define that and then we can maybe give it a different color and now the text up

here is going to be red so that's what we're doing with this attribute but that doesn't mean that all attributes relate to CSS we also can have attributes that um are totally unrelated to CSS so for example if we wanted to add an image tag here and we're going to talk about this a little bit more later so don't worry about the syntax here yet we can define something Called a source attribute so this Source attribute is going to actually give us um the image URL that we want to display within that image tag so

let me get an image to put in there real quick and I'll show you what I mean all right so I'm going to put a dog image in here just as I normally do so we'll paste that in there and now you should see once it reloads a very large picture here so we're going to use another attribute that I just know from Experience about we can put a width property on here and maybe Define it to about 300 pixels so that it's much smaller and we can see the image all right so again you

should not understand you know the the P tag and the image tag you don't need to understand that quite yet we're going to cover it in a second but what I want to uh demonstrate here is that these attributes can you know serve a lot of different purpose purposes and they're ultimately the same Thing like you can think about them just like JavaScript variables so just like we're defining some sort of you know variable here or attribute and then assigning it some value you can do the same thing in JavaScript so you could Define an

attribute and give it some value here and that's the variable the JavaScript variable that we are so used to working with from the previous lessons so it's kind of a similar concept but these you know what we call Variables or attributes here are specific to these HTML elements that we are creating all right before we get any further into these details that you're not understanding quite yet I want to talk about the difference between an element so an HTML element and an HTML tag so when I think of an element I think of it as

a complete unit so it not only has an HTML tag but it also might have some attributes or maybe even some event listeners we're going to talk About that a little bit later too so let me write out a full element real quick just like we saw a second ago um so we'll say a paragraph element and then we'll close it off with our closing brackets so I think of this as a complete unit and a full HTML element and we can also add on some attributes so maybe an ID is going to be P1

or something and then we can add a class attribute now it doesn't matter what attributes you're putting here I'm just Trying to demonstrate this is a full HTML element now if we're talking about tags I like to think of those as the actual um indicator for what type of element we're creating so in this case we're going to put a P tag um indicated by the letter P right here so as we move forward think of the tag as the function or like what the element is supposed to be doing and then the whole element

as a general structure of that HTML the next thing I want to talk about is the types Of HTML tags that we can use so far we just looked at a paragraph tag and an image tag but there are obviously plenty more that we can use within our HTML documents so the first type of tag at least how I categorize it there's plenty more classifications that you'll find with official documentation but just just for our brains to understand it I think we can think about this in terms of normal HTML elements and self-closing HTML uh

elements or maybe tags would be A better way to say that so let me paste in a few of them here these are all you know different tags that we can use so the P tag the H1 tag div span and strong and all of these are what we consider kind of normal HTML tags because they have an opening tag right here and then a closing tag and then you put something in the middle of them to actually create the entire element so these are what we consider normal now there are some other HTML tags

that have some different Behaviors where they're actually called self-closing and I'm going to paste a few of those within our code pen here so let's get a rid of these and now we're looking at self-closing tags and this would be image input meta tags these go in the head of the HTML document uh link tags this is how we link up the stylesheets to our HTML um something that's going on behind the scenes here so these are self-closing which basically means we have everything we Need within this single tag and we put this forward slash

at the end of it so rather than doing this let me just give you a very specific example here so rather than saying image and then having a closing tag and then putting something between them that's not valid we just have to uh create one tag right here called image and then put the forward slash at the end of it to close it so these are the two types of tags that we're dealing with you'll start to Recognize them as you get more experience writing HTML um I'll be sure to point them that as we

go now the reason that I talk about the difference between you know normal and self closing tags is they have different behaviors so if you wanted to embed some content within a normal element so let's take a div uh element which I just think of as kind of a general purpose container that we can use in HTML and I can put some text in here it's going to work just Fine as you see on the screen I can also enter down and put in another HTML element uh maybe a paragraph tag here and I can

embed HTML within that div tag all right so that's a normal HTML element that has an opening and closing tag but if we Tred to do this with something like an image tag all right so this is a valid way to write uh an image and we of course need a source attribute so let me see if I can get another image here okay so let me get an actual image In here uh so that this is a valid image tag all right so it's working on the right but what I want to show you

is that if you try to put something within this tag so let's come right here and try to put maybe a p element in here and we'll put some text right there you're going to see that this is not going to work um all that well so you'll see these weird brackets here at the end and while the overall image is working and you still see some text uh printed to The screen this is not valid HTML to write this is um you know it'll render but it's not valid so just remember as we write

these self-closing HTML elements you can't put anything within them now a more subtle difference that I want to point out you know within these uh elements that we call normal or the tags that we call normal so for example a paragraph tag we've got some text that we can put in there now we can also put stuff within this but does it make sense To do so and the answer is probably not so if we have a paragraph tag and we put some text in here and then we also try to put maybe another paragraph

uh tag so we'll put some more text in there this does not make a lot of sense to me and it doesn't make sense in general when you're writing HTML because in general a tag such as the paragraph tag is not meant to have elements um embedded between it other than just plain text so there are some HTML elements that have Um these kind of container functionalities and then there are some elements that just are meant to store text and only text so while we don't want to put you know elements within a paragraph tag

if we just change this to a div that's going to be more appropriate so we can put you know as many other elements within a div as we want to because it's kind of structured and meant to do something like that it's kind of meant to be um a more of a con Container type uh HTML tag all right so we've gone through some of the nuances of you know what type of HTML tags you're going to be looking at now in this next section I want to actually walk through some of the most common

ones that you'll see and you'll use not only that but I want to show you how to actually inspect your HTML in the browser and also how do we look these different tags up in our documentation you know if you don't know what Something is or you don't know what it's supposed to be used for you can go to the documentation to figure it out like I said there are a ton of HTML tags um that you can use and I'm not going to be covering you know even half of them here uh that's not

the goal the goal here is to get you the most essential ones and help you understand how to find um and use different tags without having prior knowledge of them as we talked about earlier HTML is not styled it's all About structure so if you look at this page got pulled up on the screen you can see a bunch of really ugly um web elements um and we're going to walk through each of these very briefly just so that you can kind of get the gist of them and I'll show you you know for a

couple of them how we actually look them up in the documentation and see what they're for so just as a preview we've got some content elements up here we've got headings paragraph tags then we come Down into um some more content elements so we have uh span Elements which which allow you to kind of um custom style this this actually has some CSS within it um which we're not covering but um you can see how you can do things with the paragraph tags and make it a little bit more customized using span and em and

strong elements and then we can also use uh images and links so a would be a link image and then buttons here so we got buttons and then we have some list And then finally tables like I said we're not going to be covering that a whole lot um but this is just the landscape of most of the elements that you'll be using on a daily basis as a web developer but before we jump into that I want to show you exactly how we inspect these now you'll notice I jumped over to Google Chrome here

um I'm using that for a very specific reason that we'll kind of talk about a little bit later in this lesson but it's very Similar to Firefox all you have to do is right click and click inspect and then from here if you uh rearrange this you'll see that the elements panel is where you can actually see the HTML within this document so if we click down on the body you can see all of these elements and every time we hover over them it will actually you know highlight it in the browser uh itself all

right so you can scroll down and just basically see the source of this HTML document um Which is a great way to um understand it now I also o have this um this exact document linked in a code pen pen you can find that in the materials in the description of this video so you can just look through this on your own time if I go through something a little bit too fast here all right the first ones we're going to be talking about the first HTML tags are heading tags so that is H1 through

H6 now if we go to the documentation this is I'm going to just Go through this exercise with you so that you can get used to um doing this but we basically go to mdn we go to Technologies and click HTML and then we can go down to the references and click the HTML elements from here we can obviously go through and look for all these different tags that we can use and in this case we want the headings so I'll click H1 and you can see that it just has one page for H1 through

H6 because they're All so similar types of elements when you're on a documentation page it's good to read this first sentence here just glance at the demo but if you come down to usage notes this is where you're going to learn like what is this tag actually for you know as we talked about HTML is the structure of the web and therefore every uh tag that we're using has a very specific purpose so this one says heading information can be used by user agents to construct a table of Contents for a document automatically all right

so basically what that's saying for us is that we can um use the H1 through H6 to organize our web pages so let's start with an H1 uh element all right and we can give it a page title all right so that's kind of what H1 is used for when you go onto a web page there's always going to be a title of that you know blog Post article um or just the page in general and usually it's going to be H1 That's what Google searches for with the search engines so a lot of seos

will um you know recommend that you have this uh semantically laid out so that the H1 only occurs once on the page and then you have everything else as H2 or even smaller so we'll make some H2S here this will be a secondary heading and like I said this is going to lay out your document um semantically based on the order of importance of your text so I think you probably get the point of this You can do this for you know H3 all the way to H6 not all that complicated so we're going to

just stop it right here but you kind of get the point play around with this and and basically all I'll say about this is that H1 through H3 is probably the furthest you're going to go you might use an H4 every once in a while but generally those first three are sufficient to build a web page next up we have the paragraph tag which we've already used a little bit so if we come To um the mdn documentation and we go back to our well let me just go through the full process so we get

used to it so Technologies HTML HTML elements and then we can scroll down and look for the relevant tag so it'll come all the way down here to the P tag so it says the HTML P element represents paragraph paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks blah blah blah bunch of Uh jargon here that we don't really need to read too much about this is basically what you're going to see everywhere on the web so when you read an article blog post most of the text is going

to be a paragraph element and it's very simple to write as we saw we can just put some text between the opening and closing tags and you've got yourself a paragraph element now while we're here I want to highlight something kind of important with HTML and there actually two things So number one HTML is not case sensitive so if if we wanted to capitalize one of these tags and then have lowercase tags over here on the end it's still going to work just fine because HTML doesn't care about capitalization now it also does not care

about line breaks so if we had a couple elements here um let's just make a couple paragraph tags and we put a bunch of spaces in here and we entered it down a bunch um let's make some uh enter down In some more spaces you'll see that the output is going to be the same no matter what and that's because the spaces between the tags doesn't matter whatsoever basically when it's rendered in the web uh or in the browser it's just looking for the opening and closing tag and then it automatically knows how to lay

that out on the page so it's not case sensitive and these line breaks and spaces do not matter between these elements all right with that said we're Moving on to the next elements and that would be um some other content elements that allow you to uh basically style your paragraphs but I will say that as we talk about semantic HTML um the whole goal of the new HTML 5 standard which is the latest uh spec similar to when we talked about JavaScript in previous lessons how there's the ecmascript standard um and es6 all that kind

of stuff well there's also an HTML spec that is supposed to be followed and in The latest one the goal is to basically use HTML for structure and um function only so instead of using HTML to actually Style Elements you're supposed to use only CSS to do that that said you will see these Tags I'm about to show you uh quite often in Old code and people still use them um so you need to know what they are and what they do do so let's write a paragraph tag right here some text that I want

to emphasize and make Bold and styled all right so these words are going to be manipulated by other HTML elements and as I said earlier A P tag is generally not something you want to embed other HTML elements within so like I said you probably do not want to put another P tag within a P tag and put text in there but there are a couple exceptions and they relate to the uh strong emphasis and span elements so the first one is going to we'll look at is going to be span so let's go ahead

go Back to the documentation go back to this uh reference and look for the span tag okay so we'll click span and it says this element is a generic inline container for phrasing content which does not inherently represent anything it can be used to group elements for styling purposes or because they share attribute values so on and so forth so basically what that is saying is if you want something um an HTML element that's not going to break down to a new line it's just going to be in line with the rest of the text

but you want it to look a little bit different or function a little bit different than the rest of it you might use a span tag so an example of that we'll wrap this last word styled within a span tag all right and as of right now you see that it is red the reason this is Red is because behind the scenes I didn't tell you this but I wrote some CSS that will take any span element and turn it the color red using CSS so if I open this up you'll see that I uh

said for every span element I want the color to be red now I don't expect you to understand what that CSS is saying yet we're going to cover that in the next lesson but basically that's the point of a span is you can take a single you know piece of text within a paragraph tag and you can emphasize it in whatever way you want using CSS similar to a span we also Have the strong and em or emphasize uh tags so let's take a look at those in the documentation let's go to the EM tag

this is uh it marks text that has emphasis so basically italics is what it's saying and then if we go to the strong tag down here this indicates that its contents have strong importance seriousness or urgency which is another way of saying bold so like I said this in the new HTML standard you probably Should not use these uh tags but I'm showing you them because you'll see them often people still use them and they are valid HTML so if I wanted to emphasize this word or in other words make it italic I can surround

it with these uh with this em tag and you'll see that this one word is now italicized now we can also make a word bold by wrapping it with the strong tag and now this will be a bold word so as you can see we can use these Different HTML elements to actually style our HTML but again not recommended I would go ahead and use the best practices and style these with CSS instead and I know you're probably wondering what the heck that means and basically all that means is instead of using the EM tag

we might put in a span here for the emphasis all right and now that this is um wrapped in a span we can change the CSS so right now it's just making everything the color red but if We wanted to put an attribute in each of these so we'll put a class and we'll say um red color so for for this span it's going to be a red color um let me make this a little bit bigger and then for this span we'll put an attribute in there or a class called italics all right and

now we can come down in the CSS let me delete all of this so down here in the CSS I can BAS basically look at elements that have these specific classes again I'm I'm sorry for getting Too much into this but I really want to show you what this what I mean when I say you should style it with CSS rather than the uh em and strong tags so what we can do is we can select that class in CSS and then we can basically say the font style should be italic all right and once

we do that you'll see that this word is emphasized with italics again but this time instead of using the em element we're using a span with some CSS Styles now we can also come down and Select the red color class and just give it a color equal to red and now you can see that we're back to the original style that we had so again we're not covering CSS too much in this lesson but I do want to show you how it's working with the HTML um in unison all right so the next elements that

we got to talk about um I think a big one is going to be the div element now this is going to be one that you use all the time and it's very Important and I consider it to be just a general container element but let's look it up in the documentation and there's our div tag all right so this is called an HTML content division element and it's a generic container for flow content so like I said it's just like a generic container that we can basically separate out pieces of our HTML and you

know the the most important thing about it is we can take each of these individual units That are within a specific div and then we can style it so very similar to that span element where we're taking a individual piece of text and we're making it look different than the others we can also use some CSS magic along with this HTML structure to separate out our content so let me show you what I mean by that so let's say that we have two div contain containers all right and then Within These we have some elements

in container one all right and We'll just make a bunch of those and then we'll do the same thing for elements within container 2 so right now on the screen these don't look separated at all you know you basically look at this and say like oh it's all just one big piece together but since we wrapped these within div elements we can actually put some styles on here to separate them out and like I said you're not going to understand how these styles are working Quite yet we'll do that in the next lesson but I

do want to show you how the div is able to separate out our content so the first one we need to identify by div one just an arbitrary class name that we're giving it and then div two all right so what we're going to do is we're going to make some boxes around these so all we have to do is Select both of them and give them a border all right and from here you can see that now we're getting some Separation of our HTML elements and we can even put some margin around there and

now it's going to be very apparent that we have two very separate sections of our HTML document and that is the power of a div and you'll be using these div elements to section out your content all the time the next next element we're going to talk about or not element but tag is going to be the a tag which represents a link in HTML let's take a look in the documentation again just as A recap Technologies HTML HTML elements and then you can click a so this is actually called The Anchor element that's what

what a stands for and it says with its href attribute creates a hyperlink to web pages files email addresses locations on the same page or anything else a UR L can address all right so an anchor tag or a link tag is going to require this single attribute called the a href attribute now with HTML um tags most of them do Not have required attributes but with a couple of them there are some required attributes this happens to be one of them so if we were to come into our HTML as we have it here

and maybe we wanted to um make a link around some of these text so what I'm going to do is make an a tag surrounded by this first uh container one text and right now you'll see that nothing is happening over here when I click it there's nothing there But once I put in that href attribute and I put in a link so we'll say www.google.com now you'll see that we have this link styling and if we click this it should take to the appropriate link now one weird thing about code pen um since it's

kind of like an integrated uh environment that we can write HTML CSS and JavaScript when you have link tags within a code pen you can't click on them and actually go outside of codepen so I've actually pulled up um Let's let's actually look at the local file that I have so this is what I was showing you how to navigate around the different elements and if if we go down to where I have the link example right here so let's go ahead and click this um button up here to select a specific element and then

I can click on that and it takes me there on the right side and you can see that I have this a or anchor tag with the href um attribute right here representing my uh my personal Website all right so when I click this it's going to take me directly to my website and that's how an anchor element is going to work now there's one additional thing that we can add to an anchor element to affect the behavior of the link so if we were to go in here and we can actually edit HTML directly

within the dev tools and if we put a attribute called Target and then we give it an underscore blank value so if we were to go to the documentation to see This you'll see that there's a couple attributes available here HF being one of them but if you go down you can see there's a Target attribute and it gives you the possible values that you can put in there and it says where to display the linked URL as a name for a browsing context so basically it's saying where do I need to open this link

and if we go to blank it says usually a new tab and that's exactly what's going to happen once I put in this target equals blank And I click this link it's opening a brand new tab rather than taking me to that link within the current tab like I said there's other attributes on an anchor element but those are probably the most common two ones that you'll need and the href attribute is actually required to make it function as a link at all the next one we're covering is the input element and this one is

loaded with functionality especially when you start putting it within a form element All right so we're not going to talk a whole lot about this because this comes later in this series and we're going to talk a lot about it in the context of a front-end um web framework like react or angular uh vue.js but I just want to introduce it to you so we'll go to input tag um we got to go back on the documentation um it actually has an entire section just for input types and like I said there's a lot going

on here There's a lot um to do with forms within the web so let's open up the normal HTML reference and go down and find the input all right so we'll click input and it says it's used to create interactive controls for web-based forms in order to accept data from a user and that's pretty much where we're going to stop because that's all that we need to know for now I'm just going to show you a couple basic um attributes that you can use with this and just give you the General concept of what it

is so let's go to the um page we're working with here and let me just clear out everything and put an input tag now this is going to be a self-closing tag we talked about that earlier just like an image tag is and within this input you'll see that we already have something showing up here on the right that we can type some text into so right off the bat it's usable but if we just left it like this and we Tried to hook up some JavaScript to it it'd be very difficult to uh select

it and grab the data that the user typing in um from it so something that we'll often do is give an input a name and this is very important when you put this within a form so it can identify which input um it needs to grab data from so we'll just say this will be input one and then another thing that you can put another attribute you can put is going to be a placeholder and this placeholder Is going to be whatever shows up in kind of a grade out uh text to indic to the

user what they need to type so we can say enter email address here and you'll see that this placeholder gets put in there and then once you start typing it goes away so that's a very common element or attribute that you can use for the input tag now you can also put a predefined value in there so instead of a placeholder if we were to put uh value it's going to replace that placeholder With an actual value so you can see how there's text already in here and if you wanted to change it you'd have

to delete it and then type some new text so those are some of the common attributes that you can use for inputs and again I'm not going to cover inputs in very much detail at all right now because we're going to talk about them a lot later in the series next up we're going to be talking about image um tags and we've already looked at it a little bit so Let's go to our HTML elements reference and then look for the image tag there it is all right so the image element embeds an image into

the document all right and there's going to be a couple common attributes that you'll use for this and there's one that is required so the source attribute is required as you can see in the documentation and then the alt attribute is highly recommended so when we're Talking about web accessibility and we're talking about you know how do we know what this image represents if it doesn't render correctly that's going to be what the alt attribute does so I'll show you exactly what what I'm talking about here let's write our image tag which is self- closing

and then from here we're not going to see anything because we don't have our required Source attribute now let's go back to this dog photo we'll Put in the source attribute and paste in the link to that photo and it's of course going to be very large here because the image is much larger than our page here but we can also add in additional attribute and a quick tip with HTML you can actually enter these down so it doesn't have to you know all be on one line we can separate out the different attributes from

the the tags so we'll go with Source first and then we'll put in another common one which Will be with so you can also specify this within CSS but this would be a quick way to make the width of this image 300 pixels all right so that gives us a more manageable image to work with and then finally we have the alt attribute so we'll say a dog image or something like that to describe what our image is all about and the reason we use this is because if our link is broken so if I

just break the link real quick you're going to see when it reloads that It's going to give this little image icon and then whatever we put in the alt attribute it'll say a dog image so if the link ever breaks the user will know like oh this is supposed to be a dog image and I kind of know um what the context of this image is and then finally one of my favorite content elements is going to be button all right so this is what we get to click and do fun things with so how

we write this is we just basically write out button it's A normal you know opening and closing tag type of element um let's take a look in the documentation real quick go to HTML elements and we'll find the button element it says it represents clickable button used to submit forms or anywhere in a document for accessible standard button functionality all right so we click buttons all the time when we use web apps and it's basically brings our web apps to life it allows the user to know like okay I got to click this to Do

something so within our button we can give it some text so we might say click me in all caps and you'll see that now we have a button that we can click now it's not going to do anything right off the bat because we haven't hooked up any event listeners or uh stuff like that to it now there's really not any common attributes that you'll see on a button like this but there is one common thing that you'll have to have for a button for it to really do anything and that is A um event

listener now we're not quite ready to talk about events um within HTML but I do want to quickly show you what I'm talking talking about um with buttons so if I wanted to do something every time someone clicked on this button I have to assign it an onclick event now this is built-in this is actually not an attribute this is an event listener so in here it expects a specific function to be called every time we click this button all right so If I go down to the JavaScript section of this code pen and I

Define a basic function it says alert me all right so something like this where every time we click the button it's going to bring up an alert in the browser and it's going to say hi all right so very simple and now if we put that into the button right here and we click the button it's going to make an alert pop up and say hi every time we click it all right so that's just the basics of event handling within HTML and we're going to talk about that in a little bit more detail when

we get into the concept of the document object model or the Dom the next element I want to talk about is another content element and it's a list so with a list we can basically have bullet points or we can have numbered list all right so if we wanted to have a bullet point list we're going to use some tag called UL all right so what UL stands for is unordered list and if we go to the documentation Here we should be able to see that somewhere so let's go down to the HTML elements and

find UL all right so there is the UL and it's going to say this represents an unordered list of items typically rendered as a bulleted list all right so that's basically what that stands for and within it we have to put some um Li uh tags so you can see if we click lii this element is used to represent an Item in a list all right so we can put that here so we'll say Li and we'll say item one and then we can copy this down a couple of times and give it item two

and three and now you can see on the right side we have a bulleted list um of content all right and if we wanted to change this to a numbered list all we have to do is change the UL kind of container to an O container You can see it changed here on the bottom automatically and now you can see that it is numbered and if we go to the documentation um we should be able to click on o to see that this represents an ordered list of items all right so those are the two

types of list and these will be very helpful to us when we're uh laying out content and often times you'll see these list um corresponding to a loop so if we talked about in JavaScript earlier how loops Work and we can take an array of elements and we can Loop through them well it makes sense that we could basically Loop through an array of elements and display them in a list like this so just keep that in mind as we move forward in the series and then the last thing I want to cover is tables

and I know I said at the beginning we're not going to be talking about this all that often but I want to just glance over it very quickly and I recommend that you Look at this on your own if you want more details about it so if we go to the document ation once again we go down to HTML elements and table all right so we'll click table and it says represents tab tabular data and then it shows you the basic structure of a table you can see that we have the table as the main

container and then we have the T head tag will be the header tags and then the T body will be whatever data we're putting within our table within that That body we have TR tags which are going to be the rows and then within the TR uh tags we have table data for which we'll put TD tags in there all right so as you can see it's a pretty complex structure and like I said I recommend just using a table generator you can just search for it on Google um it's much easier than trying to

remember this structure now of course you could look it up and just copy in this example and get started that way too anyways let's Move on to the next part of our lesson and that's going to be talking about HTML attributes in a little bit more detail in this next part of the HTML crash course we're going to be talking about the HTML attributes now I know it's probably been a little bit confusing so far we've gone through a bunch of different HTML tags that we can be using we briefly covered attributes and how they

work but we didn't really talk about when do you use them how do You know when to use them you know what's fair game here so we're going to start by talking about the difference between a global attribute and an element specific attribute in short a global attribute is something that's available to any HTML element you know no matter what it is an element specific attribute is an attribute that only does something to elements that it applies to so a good example of this can be the image tag so let's go ahead and look at

That on the screen real quick so if we make an image tag and we give it a source property and then we give it a class or not property but attribute you can see the difference between a global and an element specific one so again let's go ahead and put the source in there and then let's make the width equal to 300 like we did earlier and what you can see on this um image tag um and then the total HTML element that we call an image you can see that we have The Source um

attribute which is specific to this image tag we also have the WID attribute which is also specific to the image tag now the class attribute is a global attribute which means it can be used on any element or any tag and to show that let's go ahead and make a paragraph tag below we'll put some text in there and then we'll give it a class all right so we've given it a class here and you can see that um it's not doing Anything right now but if we were to actually style these two different elements

we would use these class values as a way to select them within our CSS so as I kind of shown you uh showed you earlier you can actually select these different classes and um basically put some styles on here so what if I wanted to put a border on this uh image we we can do it like that we can make that border a little bit larger um and you can see how we can style that or we can Come down and select the other one so some class value and we can give this text

a different color so maybe we'll call it green and so now we can see that the text is green but this is not a CSS tutorial I just wanted to show you that that is a global attribute that we can use to connect up our HTML and our CSS but if I came down here and put something like a width on the P element and I gave it maybe 20 PX or something like that it's not going to actually do Anything because this is not um applicable to the paragraph tag and likewise if we put

a source on here and then we copied in the um image URL it's not going to do anything either because this is a paragraph tag it doesn't have a source attribute so it'll still render in the browser okay it just won't do anything and that's the difference between a global and an element specific attribute if you wanted to connect the dots with the previous lessons we've Gone through you can think of these element specific attributes just like we have JavaScript methods so if you remember if we have a string like this there are a certain

number of methods that are available to this string data type in certain methods that are not so for example if we wanted to um call a method like string. two uppercase all right something like that that's going to work just fine and I'm actually going to come over to um a Console that we can use to show this so we got a string all right right here and then if we say string to uppercase it's going to work just fine it's going to make all of the letters uppercase but if we said string. reverse it's

going to say type air because reverse is a method that's only available to an array um data type so we would need an array like this and then use array. reverse to actually use that method and the same thing applies to HTML attributes there Are just certain attributes that only apply to certain um tag types all right at this point we have covered quite a lot about HTML and I want to have you actually go through a practice exercise and a challenge to reinforce some of these Concepts um so that when we talk about some

um how we actually connect JavaScript to the HTML you're not still trying to figure out like how does html work so I'm going to give you this challenge if we go to my code pen let's See if we can open this up here all right so as you can see um this is the challenge that we're going to be working with and what I've done here is I've put a couple different HTML elements and your goal is to basically create this but put in your own personal details of course and um something that you can

share maybe on Twitter use the 100 days of code hashtag uh maybe hit me up zgd but anyways we're going to be building something like this but Personalized and I've given you a starter template so this will be linked to in the description below so be sure to check that out and you'll just open this uh starter challenge up and you'll see that within the HT ml I've kind of laid out a basic template for you and it says your code goes here now within code pen it actually this HTML part as I talked about

a little bit earlier represents the body part so really all we have to do is just start typing right Here so I'll leave you with that and you can just start typing some HTML so um you can put some text in there and you're going to see that it automatically shows up on the screen and furthermore it's going to be styled just like the one that I showed you because I've already written some uh CSS styles that will basically apply to your HTML you know no matter how you use it so I recommend that you

just browse through these Styles but don't worry about how They work just focus on writing the HTML that is necessary to create something that looks like this so just a few hints as we go through this looks like some sort of heading we've got some paragraphs in here we've got a link we've got a list and then we've got an image down here so that's basically all you need to do so go ahead and try that challenge out and be sure to share your results on Twitter I think this is a rather basic challenge um

not saying It's going to be easy it will not be easy uh starting out but it's basic enough I'm not going to go through it here on video but if you'd like to go down in the description and I also have linked to this code pen where I've Sol it so you can see the code that I wrote and how I wrote it um to compare against your [Music] solution the next part of this video we are talking about something called the Dom and that stands for document object model and it's very closely related to

HTML which we talked about in the previous part of this lesson now I will say if you have not completed the challenge that I gave um in the prior video go ahead and complete that and I would recommend that you have at least a basic understanding of HTML and kind of understand how to put something together within you know a code pen document or something like that because if you don't Have at least a basic level of understanding of HTML this stuff is not going to make any sense before we get into this I want

to show you a little bit about the code pen environment so that we can understand like how do we actually debug um JavaScript within the browser and you know take those Concepts we've been looking at in the prior videos where we've you know pretty much right clicked um so let's take a look at the screen here if we rightclick and Inspect and then we come to the console then we can write you know basic JavaScript within the console so we've been working in the console quite a bit but when we go to codeen since it's

kind of it's its own environment we have to do a few things to make sure that that console is working the same so if we come down to the JS section of the code pen this is a little bit different than what we've been working with in the console now if we were to just type Something like you know console.log hello now this is going to be printed to the console but it's going to do it over and over again every time the page loads because this JavaScript that we're working with here is directly connected

to the HTML document above so it's not really like a free form console that we can use to test out different um JavaScript now codepen does have a console down here at the bottom left and if you open it up you'll see that we Have that hello that we printed by writing that JavaScript code but we can also do something like that down here in the console and this is supposed to represent the same type of thing that we've been working with um when we rightclick and inspect and go to the dev tools console but

the problem is this is not a really nice and easy console to work with like if you started to you know Define a variable that's like a string or something and then you type a And you hit enter it's not going to say it's not going to like be defined and that's a problem because we want to be able to experiment around and work with um our JavaScript as we're building it so to solve that problem we're not going to be using the code pen console what we're going to do is rightclick and inspect within

the code document so it still opens up this um console and I will note I'm in Google Chrome not Firefox this is not work um quite as Well in Firefox unfortunately so I've switched to Chrome for that reason and if we go to the console you'll see some of the the hellos that we put there from earlier but if you go to this little drop down here when we first enter the document you might see something like top but in order to get the right cont text to work in you have to drop this down

and scroll down to code pen now we can actually um select elements from the code pen document that we've written Here and we don't have to um or we're basically going to have some responsiveness with our JavaScript just to quickly show you this and we're going to cover all of this stuff um in a little bit but let me put a basic paragraph tag in our code pen document and you can see it shown up there and if we have this context the JavaScript context set to top and we try to type document. query selector

and then grab all the paragraph tags it's not going to Grab us the right ones so this is a paragraph tag but it's not the one that we're looking for here so we have to go down to the right context so select code pen and now when we run this it should give us the correct element that we're looking for so that's just really important if you're trying to follow along with this like code along as I'm doing it just make sure that you're in Google Chrome you rightclick inspect element and make sure that the

context Is the right one it's under the code pen context all right now we got that covered um just want to make sure that you're able to follow along let's jump into what the document object model or the Dom is all about now how I would describe the Dom is a bridge between HTML and JavaScript prior to these lessons we've been going through how to write JavaScript code we've gone through all the basics of it so you have at least a a basic level of understanding Of how to write JavaScript we also just learned about

the basics of HTML which as you saw is a lot easier to learn than JavaScript now what we're going to do is we're going to take these two concepts and we're going to combine them together to make our um HTML come alive so remember with the house analogy HTML is the structure CSS is the styling and JavaScript is the function so um in other words with the house analogy HTML is the bricks and the concrete in the Wood the CSS is the paint on the house and the JavaScript is going to be the plumbing and

the electric and all that kind of stuff now the first question you're going to ask is why are we looking at the Dom in the first place how do we know that this is important well the Dom is basically at the root of any frontend framework that you're ever going to work in it's the only way that we can connect our JavaScript to HTML and while you may not see it directly it May kind of you know be doing a bunch of stuff behind the scenes when you're working with a framework like angular reactor vue.js

it's still there it's still using the Dom API we're going to talk about that in a second so it's important to know that it exists and know the basics of how it works and what it's trying to accomplish so what is the Dom now we know it's the document object model which gives us a little bit of a clue what we're talking about here but It's a little bit more complex than just that now I'll start with what it is not so the Dom is not a programming language it's also not natively part of JavaScript

so it only exists within the browser um and there's different browser implementations whether you're on Firefox or Chrome or Safari they all have slightly different implementations of the Dom for our intents and purposes we don't really care about those differences we just want to know you Know what it is and how it works so the best way to think about the Dom is an API for an HTML document now you may not know what an API is but luckily I have done a video on just that so go ahead and watch that if you're unclear

of what an API is but just as a you know 10,000 foot view what I consider an API and this is my personal definition of it that that makes sense in my head is a software API can be thought of as a user manual that allows developers to do Something useful with a third-party software or Hardware without knowing the inner workings of that software or Hardware so basically the API that we call the Dom is going to allow us to manipulate HTML without knowing you know how is HTML actually you know manipulated within the browser

all we have to know is how to write the HTML and then how to use the API that we call the Dom to manipulate it I know your head's probably spinning at this point So let's jump into a simple example to understand what I'm talking about so what I'm going to do here is paste in some HTML all right so this is going to be a basic HTML document I've got an H2 tag a paragraph tag and a button now if we click this button and we kind of talked about this a little bit earlier

when we click this button it's not going to do anything and the reason is we don't have any JavaScript connected up to it in order to connect it up all we Have to do is first identify the element that we're wanting to make interactive and then once we identify it we need to instruct it to do something via JavaScript so just as an example we can identify this button using pure JavaScript and all we have to do is type document. query selector and then we type in button because that's the tag that we're looking for

now of course I need to select the correct context to work in so we want the code pen context And then from here when we press enter we're going to see the button that is within our code pen output all right so that's how we would select that button now from there we can actually store that within a variable so if we were to rewrite that command and then just store it in a basic variable so BTN is our variable now we can reuse it and we can do things with it but at this point

you probably don't have any clue what all of these commands are like what is document Here what's query selector all that kind of stuff doesn't make any sense yet because we haven't talked about the Dom so to better understand it I want to bring in yet another analogy for us now when we think about an HTML document just a static HTML document that we've been working with so far so this one right here on the screen that is kind of the equivalent to a paper map so with a paper map there's only so many things

you can do with it um you can write on It of course but you're not going to be able to you know click into it and and see some more details about it but we can do that with a something like Google Maps we can click in and go to different places and do a bunch of other uh functions with it so the analogy here is that HTML alone is like a paper map but when we add the Dom uh API with that HTML then it becomes something like Google Maps where we have a lot

of interactivity that we can put into it so To really talk about the document object model let's take a look from 10,000 ft all right so we know some things about JavaScript that are pretty familiar to us so for example this is a string in JavaScript we know that all right and we also know that this is going to be a number all right all right but what about that button that we just um defined here so we saved it into the button variable so if we look at that variable what type of data is

that well We don't actually have a good indication of that all we have to do is say type of button and it's going to say object well clearly there's got to be something more specific than just object and there is when we start using the Dom or document object object model terminology from the Dom's perspective this element right here or this variable right here is considered an element so if we were to come to the document object model um uh documentation here you're going to see All sorts of interfaces and stuff it's it's a pretty

complex API that we're not going to even um cover half of but if we click in and look at the element this is the most uh General base class from which all element object object in a document inherit all right so that would be what we are looking at when we have saved that um selected element into a variable called BTN and once we know that this is of this element type we can come here in the documentation we can See there's all sorts of properties that we can look at and there's all sorts of

methods that we can use on this specific variable so we have a lot of functionality available to us but we have to first understand you know uh the the whole 10,000 ft view so what I'm going to do in order for us to understand it better is show you a picture that's going to represent um what the Dom is really trying to do so at its highest level the Dom has two um Built-in objects that are probably going to be used more than any other um objects that you'll look at so at the top level

the very top level you have the window object and what you can think of that as is literally the browser window that we're working in more specifically it's kind of referring to the individual tab browser tab that we're working in but in some cases it can cross over between tabs so you can actually program using that one object You can do all sorts of things within a browser so as a general user of a web browser there are several things that you do every day that you don't realize are programmable so one of those things

is scrolling down all right scrolling down or scrolling up every time you scroll you can actually do that programmatically with JavaScript now another thing you can do is you can resize the browser window so if you were to resize it like this you can actually Do that with JavaScript all right and finally if you refresh the page that's also something you can do with JavaScript and the way that you do it is by connecting in to the Dom via that top level object that we call Window all right so I'm going to quickly show you

how we can programmatically do these things by using that object but first let's take a look at this in the mdn documentation so we'll search for window and here is what we're looking for and It says the window interface represents a window containing a Dom document the document property points to the Dom document loaded in that window so basically it's saying that the windows the browser itself or the tab and then there's an HTML document represented by the document object within it all right so that picture that I just showed you kind of uh shows

that relationship how we have a HTML document that we are putting in that browser window now from Here this window object like I said has all sorts of properties and methods that we can um use to do things that we commonly do um just by clicking around in the browser on a normal basis so you can see down this left hand side these are all of the different um you know things we can do with it so for example we have this alert method so let's go ahead and inspect element so we're in the browser

console and if we type window. alert and then we say I love Programming or something like that and press enter it's going to open up an alert window and you can see how we're already starting to program this browser window using that object here's another thing we can do we can open up um new tabs so if we say window.open and maybe go to Google all right when we press enter it's going to open a new tab and put us at google.com so that's pretty cool um let's see another thing that we can do is

we can scroll so you have to Obviously be on a page that has a scroll bar which this one does and from here we just say window scroll by and and then we give it a bunch of options here these are all documented within this method so if you were to um go down to the methods of window let's see if we can find them all right so we found the methods here and let's see if we can find this scroll by uh Method All right so we have scroll by we can click on that

and it just tells us Okay you can pass in some options here and those options that we're passing in are scroll two options all right and then from here we have the top left and behavior so we're going to Define we want to scroll um from the top we want to scroll window.in height which is going to be a built-in property of that window object which basically says here's how tall this entire HTML document um is all right so from the top we want to scroll down the entire length Of the page essentially we're going

to the bottom of this page all right and then from the left we want zero we don't want to scroll left and right and the behavior that we want is going to be smooth we don't want to just jolt down the page we want to smoothly scroll all right so when we do this and close out this method and press enter you got to watch the screen now it's going to scroll all the way down to the bottom of this you know page or whatever and I Guess it didn't go um all the way down

because I actually explained that wrong so window.in height if we look at that inner height is only going to Define how large the visible window is so it's not going to uh Define how large the entire document is so obviously this is a much larger document so it's only going to scroll down one entire page and then finally we've are able to actually reload the page so we can tap into the window.location property and then that Location property has a method called reload and you could have found this in the documentation if you looked hard

enough but I don't want to write now just for sake of time so let's press enter and you can see um you may not have seen it but it reloaded the entire page um programmatically so you can see how that top level window object is basically our control over the browser and the way that this is happening is via the Dom API so the Dom again is just An API to connect in with our browser in HTML document now another thing to mention about this is It's a global object which means we don't have to

actually specify it every time we use it so I showed you before that we could do window. alert and then type in something to get an alert all right so we can also do this by dropping window like we don't even need that because it's Global and we can go ahead and get the same results there all right so so that's important To keep in mind with the window object and the document object these are both Global so we don't need to specify them before calling their methods or properties so a couple common properties on

window we're not going to go through all of the methods and properties for all these objects but this is just such a high level one and important one that I want to so window has a few common properties that you might want to tap into one of those is going to be the Inner height and I spelled that wrong so it's not going to give me anything so we've got inner height is going to give us the height in pixels of the space that displays the HTML so the visible um area that's displaying that HTML

now if we said outer height that's going to give us the uh pixel height of the entire browser window so if you look at this value it's 1040 but if you uh make this browser window smaller and you say outer height it's going to give us a Different value 894 the same thing applies for inner width and outer width so inner width is going to give you the width of this space that's displaying the HTML so if you resized this you're going to get a different inner width all right so I don't want to spend

too much time on the properties but you can kind of get the gist of what that's showing you now another common property that we might look at here with window is going to be local storage all right right so This is going to be a big one that will come up as we start getting into more um uh Advanced web development Concepts and basically what this allows you to do is store data temporarily in the browser so if I were to go to the application here in Chrome it's called a little bit different thing in

Firefox I actually talked about that in like the third lesson of the series but if you click here you can actually see key value data pairs that can be set and retrieved Through the local storage object so if we wanted to set an item um we'll just say test and then we want to set it equal to 20 we can do that and then we come to application and you can see test um has a value of 20 here so it's a great way to store temporary values and that is accessed through the local storage

um uh object that sits on the window object all right and then finally I want to talk about the location um because this is going to basically Represent an object that has details about where you're visiting right now so right now we're on the mdn web docs and if we were to look at the window.location you're going to get all sorts of details about that um location we have in the address bar so these are some of the common properties um just one more or two more that I want to show you here before we

move on um window has a scroll X property which is going to indicate how much we have scrolled from The left side of the page or I guess right and left horizontal scrolling and then we have window. scroll Y which is going to indicate how much we've scrolled up and down um so you see this scroll bar here this is going to change the value of this property every time we scroll a little bit so these are all going to come in handy as we work with the Dom later on and we want to you

know programmatically do things within this browser window now I've briefly Mentioned it before but we can have these things called events happening um within the Dom now this is going to be a little bit complicated but I want to just show you a basic example of this um something that you can do on the top level window object so we can say window onscroll so basically we're saying we want to tap into the onscroll event which basically every time I move that browser scroll bar it's going to fire this event and what I want to

do every Time I scroll I want to execute a function so right here I'm using an anonymous function and I'm just going to console.log high all right so something very simple and now we have set an event listener on this the entire window all right so now when I touch this scroll bar we're going to get this Printing High to the con conso for a lot of different iterations here so that's just a basic event now I just want you to know that that is available and it's Something that you can do but we're not

going to really dig into the the super nitty-gritty details of it in this lesson all right so now that we've talked about the window object which represents the entire You Know Tab that we have open or I guess the um browser that we're working in let's talk about the document object so let's put that back up on the screen that um 10,000 ft view of the Dom API we've got at the top we've got the window object and then a Property of the window object is going to be document and this is where the real

fun begins because document is basically a representation of your entire HTML document that you've written so let's take a look at this I'm going to refresh the browser so we don't have that onscroll um event firing every time but we have window at the top and then we have this property called document all right so we press enter on this and you now see that we have this um big Object that has basically the HTML document defined within it and while we can expand these different things um visually within the console there's actually a lot

of things that we can do programmatically using this document object we can add or remove HTML elements from the existing page we can modify existing HTML elements and we can even set events on specific HTML elements we saw how we set an event on the entire window but we could set an Event um like we talked about earlier in a in the prior video something like that where we have a button and we want to wait for a click event and we want to fire some sort of function that does something every time that button

is clicked so this document object is very powerful and there's a lot of things that we have to cover to understand what actually does so let me show you a basic example of this uh we'll go back over to our um code pen which we have a basic HTML document here and I'm going to type document and let's take a look at what we're um dealing with so right here we have this top level HTML wrapper which we talked about is um going to happen for every single HTML document in codeen you know you'll notice

over here we don't have that written but code pen is automatically wrapping our HTML within the HTML wrapper all right so we expand this down we have a head code pen takes care of this and a body and then from Here this is where the actual HTML and JavaScript that we're writing is going to be placed so you'll see that we have our H2 element our paragraph element and our button element and then you also see some scripts down here at the bottom and basically these scripts are what are represented here in the JavaScript so

any JavaScript we type here is connected up to our HTML document via these script tags so again don't have to understand how that all works we'll get into that In future lessons but um I just wanted to show you the anatomy of this document object now if you've been following this series all the way through and you went through the JavaScript series you know how to write basic JavaScript and you also know that if we have a JavaScript object we can access properties of it so let's define a basic object with a property all right

something like prop one and prop two nothing fancy here but if we were to actually let's make a Nested object as well um we'll say nested right here and then we will end this all right so object. propop 2. nested is going to equal our value right here because we use the dot notation to access the different um embedded uh properties and values within this object now you would think that we could do the same thing with the document object but we can't all right so if we try to do the same sort of access

let's clear the screen and if we try document um and Then let's go ahead and look at it one one quick second so we obviously have document then we have HTML then we have body so if we typed document. htmlbody it's going to say we cannot read the property of body because it's undefined so we clearly cannot just access these different HTML elements with notation we have to use um the document object model API to do so and it's a little bit different takes a little bit of getting used to but Hopefully we can walk

through some of the more common ways to use it here in the remainder of this video so I'm going to put on a new HTML document here with some additional uh parts to it so that we can really visualize what this Dom is all about all right so we can think of the document object model as a tree and furthermore we can think of this tree as um kind of like we think about ancestry um trees or whatever where you have grandparents and Then you have parents and you have uh children and stuff like that

so what you're seeing on the screen right now is this HTML document that we just created in this code pen um represented as the Dom tree all right so you can see that we have the document at the top then we go down to HTML and then from there we have the head and the body and underneath the body specifically we have all of this HTML that we have written here and within that HTML we have a lot Of siblings but we also have some children so for for example um let's look at this main

div right here for the main body so the main body div is going to be the parent to this H1 tag these two P tags and this UL or unordered list tag all right so that's going to be the parent to these uh four now if we look at the list items its parent is going to be the unordered list and its grandparent is going to be the main body div so you can see how these Relationships to build and furthermore we have you know the concept of siblings so all of these list items these

are all going to be siblings within the document object model and this unordered list the P tags and the H1 they're all siblings so what do we call all of these elements well in the document object model we call them all nodes now this is very different you should not um confuse this with nodejs we'll talk about that later in the series but that's basic basically The backend server side version of writing JavaScript this is a totally different concept all of these elements are considered nodes within the Dom tree now of course they're all different

so they're all different types of nodes and I'm going to put the um image back on the screen that we looked at in um the prior part of this lesson when we talked about the basics of HTML So within this um element that we have defined it's a total unit we we have different types of Nodes here so at the simplest level we have something called an element node and that's going to be represented by the P tag all right and then we have an attribute on that uh HTML element and we call that an

attribute node and then finally we have a text node which is going to be the content that we're putting between the starting and closing paragraph tags now to prove this out to you I'm going to actually take this element And create it in JavaScript and then insert it into the page that we're looking at right here all right so the first thing we have to do is Define each of those three different types of nodes all right so the first one is going to be an element node and let me let me actually zoom out

a little bit here so we've got an element node and we have to use the document object and then we use create element and before we do that I keep forgetting we have to change the Context to code pen so that we're working with the document that we're seeing over here rather than the whole document all right so sorry about that and what we're going to do is create our element node which is going to be a P tag all right so we're just creating that element we just put on the screen so let's press

enter and we have created our first element node and if we look at that it's just going to be an mtyp tag there's nothing In it yet all right so now we have to create our text node all right right so we're going to type document. create text node and then here we're going to put in the word content which is the stuff that was between the P tags all right so we press enter and right now this element node is still empty all right so we still have an empty P tag and the reason

is we haven't assigned the text node to that element yet before we do that let's create our last node Which is going to be an attribute attribute node so we'll create an attribute and we want to call this a class attribute because that's the type of attribute we had on this uh HTML element all right so at this point let's look at what we have here so we have element node which is a empty P tag then we have the text node which is going to be content as a string or more specifically a Dom

string and then finally we have Our attribute node which is going to be class equals to empty so basically we haven't assigned a value to this attribute yet but we've initialized it the first thing I want to do is I want to take our text node and I want to put it inside our um P tag or element node so all we have to do is say element node. append child and then we pass in the text node press enter And now when we print out the element node it's going to be a P tag

with that content placed Between it now we are starting to build out this element the next thing that we have to do is give a value to our attribute so if you saw before we have class equal to an empty string all we have to do to do that is we say attribute node and then we say value equals Su class all right so now we have this attribute node if we print that it's going to say class equals Su class so we're getting closer the only thing that we are missing is this attribute is

Not connected up with our um paragraph element so to do that all we have to do is take our element node and we say set attribute and then we pass in the attribute node and it says it failed to execute um because there are two oh okay I messed it up so not set attribute we have to set attribute node all right so we press enter there and now the element node is going to be our full HTML element that we saw in the model before the last thing we have to Do is insert it

into the document and the way that we do that is we use the document object so we type document and then we use the append child method we haven't talked about this yet but I just want to show how it works and now we just pass in element node and if you look at the bottom of our code pen you're going to see this element inserted into the document and it's going to say it failed to execute um because I'm messed up once Again I forgot I need to add one more piece of code in

here I need to say document.body so instead of just inserting it at the end of the document which represents the whole HTML um document I need to specify that I want to look at the body specifically so if we go over to elements and we look at the entire well I guess this is not a good example cuz code pen is adding a bunch of other stuff but basically we need to put in the body element so let's Press enter and you can now see that our content has been inserted into our existing HTML document

so you may not have recognized it but we're actually tapping into the Dom's API to do everything we just did we created a new HTML element with JavaScript alone and you can see that we use things like Set uh set attribute node and a pen child and we've used create attribute create text create element these are all methods that are defined within the Document object model all right so we are actually using the Dom as we speak here now you might ask what's the point of this every time we refresh the page so if we

refresh this page reload it we're not going to have those same elements inserted into our document anymore and um not sure what I'm doing here okay so HTML I actually need to copy in some stuff here it's because I didn't save the actual code pen but whatever the case That content at the bottom is going to be temporary and you might ask well what's the point of inserting stuff with JavaScript and the answer to that is for user experience so when a user creates a calendar event on Google Calendar you'll see a calendar event pop

up immediately on that calendar and that was done via JavaScript you know tapping into the Dom all right another example is a user adds a to-do item to their to-do app or a user creates a post on Facebook all of These things are using JavaScript via the Dom so the Dom's API to insert elements and modify elements that are existing within the HTML document but they're only temporary and it's because we want a better user experience so we want to immediately change that you know web page and then later we kind of save that to

the database and reload it with new data later all right so at this point we have gone through a lot of different angles to think about the Dom With but we haven't actually you know buckled down and tried to understand you know how do we actually use the Dom here what are some of the methods available to us um what exactly is the Dom like you know we've been working with the window object and the document object but there's so much more more to it we can also work with individual elements and with each element

we can do certain things with that just like we talked about with HTML and JavaScript before The purpose of this series is not to make you an expert in any one thing it's to take you from zero to launching your first full stack application and deploying it so we got to cover a lot of ground so I'm going to walk you through an example of using the Dom we're going to cover some of the common uh methods and um you know properties that we can use within the Dom but we're not going to cover everything

and quite frankly most developers don't know everything About the Dom it's very complicated and there's a lot of stuff that you will never end up using within your career anyways let's get started let's go ahead and put some new HTML in our code pen all right and this one says welcome to my HTML tutorial click the button below to begin and this button what we want to do with this is we want every time we click it we want to add a new paragraph element to the bottom of this page so how do we do

that well it's three steps Number one we have to find a way to identify the button element so that we can start working with it number two we have to register a click event on this button which is part of the Dom it's part of the Dom API and then number three we need to write a function that will insert a new paragraph element in the web page every time we click it so let's take a look at our button here we have a global attribute called ID every HTML element is um able to have

this ID Attribute and we also have a global attribute called class every HTML element is El eligible to have a class on it so we have multiple ways to identify this button so let me take you through a couple of those ways to better explain some of the methods we have on the Dom here's the first way we can do it and this is probably the most generic we can say document. query selector and then we can just type in button because this is going to be um button is going To represent the tag that

we're looking for so what this is going to do um right now is it's going to look for any button on the entire page here including um code Pen's you know interface and the reason is we don't have the right context text so let's go down to code pen again and try this again so we're going to select button and what this is going to do is it's going to look through the HTML document that we're working with and it's going to find the First occurrence of a button tag and if it doesn't find it

it's just going to return null now the question is how did I know to use this document. query selector all right the reason I knew that is because if you go to the documentation you go to apisd then you go down to Dom and you find that document object so this is that document object that we talked about it represents the HTML document Itself this has certain properties and it has certain methods that are available for us to use so if we scroll down all the way to the methods you will see a couple of

different query methods um so we have query command enabled you won't use that much um couple others but you can see query selector it's actually listed twice I'm not sure if that's meant to do not meant to be that way um I don't think it is actually but we can go to query selector and this will tell Us basically how to use it so we can put in selectors it says uh a Dom string containing one or more selectors to match the string must be valid um CSS selector string so we don't know a whole

lot about CSS quite yet but basically what that means is if we pass in um to this query selector if we pass in something with a hashtag at the beginning that represents an ID so if you remember we've got this ID equal to btm-1 so if we put the hashtag and type BT BTN D1 we should be able to find this element again of course we got to go back to the code pen uh context it's very annoying um that I have to do that but um I promise it'll get a little bit easier in

the future so we'll go BTN D1 and we can find that element that way now we can also use a class selector which is a period all right so you can see our class is my- BTN so if we do period my- BTN we should be able to find the same button that way as well and These are just more specific ways to find a single element with within the Dom now of course as with anything in programming there's lots of ways to solve the same problem and if we go back to this documentation let's

go back to the main document object and if we look at some of the methods here we've got these query selectors which are kind of generic query selectors that I basically it's all I use to find elements within the HTML document but you can also get An element by ID all right so that's another way to Lo at an element so if we were to replace this so we say get element by ID and then this time all we have to do is pass in the ID you don't even need a hashtag at the end

oh I messed this up here all right let's try that again so get element by ID and button one and we should be able to find that button once again by using a different method so as you can see there's many ways to skin a cat here Here and um with the document object model you can get very creative with your code now the reason that um selecting it by an ID is the most specific way to do it and probably the best way to do this is because you cannot have two elements with the

same ID so if I tried to copy this button down here and it's got the same exact ID as the other button it's going to have a conflict so this is not really valid HTML it'll still render but it will Cause you problems if you're trying to use any sort of front-end framework or even locate things with the Dom so what I'm going to do here is paste in all of the different ways we can identify this one button let me get rid of uh the button here the second one and then it's going to

kind of refresh put me back in the wrong context so I'm going to go back and now if I paste in all of these different methods so you can see there's quite a lot of different ways to Identify this button but these are all valid ways to do it and this only executed it looks like one of them um but if you were to type each of these in individually it's going to locate at each time but obviously there are some that are more specific than others and we always prefer to be as specific as

possible when identifying elements within the Dom all right so now that we know how to identify this element let's go ahead and write that in our code so So far we haven't used this JavaScript section quite yet but what I'm going to do is I'm going to say add paragraph and we're going to make a function that's going to be actually called every time we click that button so from here all we have to do is locate the button and assign it to a variable so we're going to use one of those methods I just

will choose the query selector and we're going to pass in the ID of that button in order to identify It all right so this button variable should represent our button and from here we should be able to do something with it every time it is clicked and I'm actually going to not put this within the function this will just be in the uh Global scope of our uh JavaScript document here I'm going to close out this console so that we have some more room to write just for a second all right so now we have

this button being identified and then we have a function That's going to add a paragraph all right and the last thing that we have to do is we have to add an event listener so this is how we do that we just say add event listener and then we specify the event that we're trying to listen to and then the function or the call back that we're going to pass in to execute on that event happening now this is the first way to register an event on a specific HTML element this is one way to

do it another way to do it it is if we Take our element button and then we say onclick and then we set it equal to add paragraph then that's going to also register that event on the button and then a third way we can do it is in the HTML itself and this is what we looked at previously in this tutorial if we come here to the button and we say onclick and then we set that equal to add paragraph and then we actually execute it within those parentheses then that that's going to register

that click Event as well so there's three different ways that we can register a click event but in this case I want to do it directly with JavaScript so we'll go ahead and go with this one this is a pretty simple one but you might be asking like how do we know that that's a event that's valid and the reason we know that is if we go to the event reference within the mdn web docs um this is going to give us all of the different events that we have for Elements on the web all

right so not all of these are going to work with like say a button but um a lot of these will just work for various components within a web page so here we have Mouse events and you can see the click event and this is going to um tell us that the event handler property is the onclick which is what we put in right here so you'll get used to un you know you'll basically pick up on all of the common events um with due time um there's only a few of Them that are used

on a frequent basis and the onclick method is actually one of the most common events that you'll use in web programming so at this point we have our event wired up and this add paragraph function is going to fire every time we um click the button so let's say the button is working all right and if we go ahead and open back up that console so rightclick inspect go to the console and we're in the correct context it looks like and we can Just say or click the button and it's going to say the button

is working and it's going to do it over and over again every time we click it so the goal here is to insert a new paragraph element every time we click that button right now it's just console logging some a string to the console but we can also construct a new element just like we did before and this time around I'm going to show you a few shortcut Cuts that's going to make it a little bit easier to Create this paragraph element now we want to have some random uh data to be printed to each

new paragraph element so I'll just generate a random number um we'll say random num is going to be equal to math. floor this is a trick that we learned in a previous lesson and we'll just do between zero and 100 something like that all right and then we're going to say the P content this is what we want to actually add with within that paragraph element we're going to Combine this with the random number we're just going to say the random number is and then we're going to add via string concatenation that random number all

right so now the P content is the random uh string and let's go ahead and just test that out real quick by printing our random string to the console every time it is clicked all right so we will click me and it's going to say the random number is eight all right so that's done now we need to Actually create our paragraph element the way that we do that is going to be um we're going to define a new element variable and we're going to use the document. create new element Method All right so if

we go to the mdn docs and we go to Technologies apis Dom and then we go down to the document object right here and then we go down to the methods all right so we're going down to the methods here in the documentation we Should see a create element right here um so it's not create new element I don't know why I said that here we're just going to do create element and then we need to pass in the type of element that we're looking for so if we look at the create element documentation it's

going to say that our tag name is the only required property um or parameter of this method so any tag name Works in this case we're going to pass in P for that tag name and now we have a new Element assigned to a variable the next thing that we'll do is we're just going to instead of creating a new text node like we did in that first example we're just going to take the new element and we're going to use a property called text content which exists on it and we're going to set that

equal to the P content variable that we created prior all right so if we go to the um documentation here and we go to um let's see the element reference so this is Going to be of type element and then the text content is going to be part of that so really the fastest way to do this is just type text content um and it's going to be part of the node um interface so if you remember the Dom tree is just constructed of a bunch of nodes and no matter what type of node we're

working with it's always going to have the properties and methods of this node interface so you can see in the properties if we scroll down to text Content you can see that we can actually set this to new content uh directly so we'll do that here and now we just need to basically add this to the document um at the very end so the way that we do that is we come down here at the bottom we say document m. body. append child and then we put in the new element which has our random text

content we'll get rid of this uh console.log here all right so here's the whole um function that we're dealing With so we have ADD paragraph we get a random number we Generate random content from that number we create a paragraph element we assign the random content as the text content of that element and then we append it to the end of the HTML body which is basically going to be after this button all right so let's go ahead and test this out so we press click me and we're going to get a new paragraph element

with a random number every time we click it so it's pretty Cool um like this is where programming starts to get kind of fun is when we actually can start building things that are interactive and we can click buttons and get results so hopefully this um brings you a little bit of excitement obviously it's not something useful but we will soon get there in future videos as you can see with some of the examples we've gone through there's really only a few um methods and properties that you kind of have to remember with the Dom

um We got the query selectors so how do we identify the element we want and then the methods where we can create new elements and modify both their content their attributes we haven't talked too much about that yet um but we can do a bunch of stuff with these elements so the next thing we have to talk about is going to be how do we navigate an HTML document now I talked about the Dom tree and how there's you know siblings and parents grandparents child all that kind Of stuff and that's going to come into

play here how do we actually navigate through a complex HTML document to do this I'm going to copy in a predefined HTML document here that you'll see we've looked at this before and we're going to basically figure out how this Dom um all the Dom interfaces actually work here when I talk about you know Dom nodes and you know elements and how elements kind of inherit from a Dom node like what does that all mean and that's going to Become more apparent when we work through the navigation of this HTML document so let's put that

um diagram back up on the screen where we can see this document right here visualized as a tree and from this um this visual you can see that um these list items are going to be siblings and they're going to be Children of the unordered list so how do we select this unordered list and then get all of the children of it with JavaScript well this is actually simpler Than you might think so we've already been able to identify um elements from the Dom so we use document. Query select ctor and then we pass in

either a tag or an ID or a class name something like that to identify it since we only have one unordered list in this entire document we can just put in UL as the tag name and that's going to when we change the context here and try it again that's going to select this list right here now let's go Ahead and assign this to a variable so that we have something to work with so we'll say our list is equal to document. query selector and then we're grabbing the actual HTML tag so we press enter

now we have a list and that's going to be um showing us the HTML here now obviously this is just a visual representation of the object um but if we wanted to figure out you know what is this variable representing you know what does the list variable actually Represent we have a way of doing that if you're ever confused what type variable you're working with you can use this handy property that every node in the Dom tree has all right so if we say list. node type it's going to return us a number all right

and we wonder what is that number well if we go to the documentation and we type in uh node. node type so if you were to just type in node type you can find this and once you click on it and scroll down to The constants so these type constants this will tell you what type of element you're working with so in this case we got the value of one and that tells us that we're working with an element node and from here we can click element and we can see okay this is the type

of um node within the Dom that we're working with and here are the properties and methods that are available to us so if we were to scroll down and look at the properties of the element We see this property called children all right so if we click on that it's going to say the parent node property children is a readon property that returns a live HTML collection which contains all of the child elements of the node upon which it is called all right so let's go back to our um document here and we'll say list.

and you can see that we're getting returned this HTML collection now from here HTML collection is of course Another thing that we don't understand but we can once again go back to the documentation and click on HTML collection to see what we're dealing with and from here we can once again go over to the methods and properties and there's this one method called item on the HTML collection which is going to return us the element at a specific index of that HTML collection so basically like an array that we've worked with in JavaScript before but

It's not quite an array you can't just um come over here and pass in Brackets and put in a zero or a one um at least I don't think maybe you can um I'm not sure okay maybe you actually can do that but um if we put in list. children. item and we select one this is going to select the second item of the list so this is the way that I've always um done it in the way that the documentation kind of presents it but it looks like um at least in the browser I'm

working in the bracket notation works as well from here though we can identify specific elements within our list and then we can set those equal to variables just like we did the list itself so if we come over to the left and we say um list item is equal to the second one in the list and we press enter now we have that that entire HTML element stored in a variable and we can use um different properties on it to modify it so if we came over here and we Said list item which is representing

that second item and we said text content all right this is list item number two but we can set it equal to some new content all right so we did this already but watch what happens in the HTML document when I press enter it changes the content so this is just kind of kind of showing you how you can you know look at the whole Dom tree and you can say okay here's the parent and then I can get children and then I can select One of the child elements of that you know set of

children and then from there I have a standalone HTML element that I can do all sorts of things with I can set event listeners on it I can change the text content and I can do all sorts of other things that are defined by the documentation that I'm working with now once again maybe we don't know what this list item um represents what is the node type of it well all we have to do is say node Type and we get the answer of one once again which means it is an element and from there

we just go to the documentation we can just go back up here and just search element and then from here we have all the properties all of the methods all of the event listeners that are available to this specific element that we have stored in the variable all right the next thing I want to do is I want to dig a little bit deep into this concept of nodes so I've Been beating around the bush here a little bit um talking about how everything in the Dom tree is considered a node but we've also been

looking at elements and HTML Collections and stuff like that and it can get very confusing like all of these different interfaces what's going on here like these are all different data types they all have different properties and methods how do I know where to look what has what available to it so on and so forth well Before I get into into this this is a object-oriented programming concept and that's not something that we've covered yet um we may cover it in future videos um but this gets into things like classes and inheritance and um class

methods and static methods and all that kind of stuff and the thing that I want you to recognize right now is that we have all these different interfaces defined by the Dom all right so at the very top we have this thing called a Node so let's go back to to the node and what I want you to remember is that everything in the Dom inherits from this node interface so everything below it so an element um or an HTML element interface these all inherit up to this node interface which basically means these elements have

all of their own properties and methods but they also have access to this you know master node uh interface as well so if we were to go look at some of the things we have Available on this node um you can see this aen child method that we've been using quite frequently and let's see if we can find a couple other ones um it looks like that might be the only one um that we've been using but we also have text content so we've been using that to modify the um text within an HTML element

and we have node type we've used that one before um let's see what else uh it looks like that's pretty much it but you can see that this node has a Bunch of properties and methods that are available to anything below it so in other words if we come back to our um document here our HTML document and we know that we have this unordered list stored in the variable called list all right and we know that list if we say list. node type is is of type element which inherits from that you know uh

node interface that basically defines every element from here all we have to do is we say list. appen child and That's going to be a valid method because it's part of the node interface as we just saw and from here we can insert an HTML element and actually add it to the end of this list but first we have to actually create that element and this will be a good opportunity um to show another method that we've already seen but didn't really dig into yet so what I'm going to do here is I'm going to

take list. Append child and I'm going to say document. new um or no create element and we're going to make it a list item and this is going to be completely empty no content within it and you can see that we have a new list item showing up at the end of this list and all we have to do now is we say list. and we select the final element um or no we have to say item and then we select the final element and then we say text content and we can put in some

Content here and now we have added a new item to the end of the list and modified it so you can see how we can start parsing through and navigating through this hierarchy um pretty easily once we get the hang of now what I want to introduce is something a little bit tricky and this is where we really have to think when we're um navigating through the Dom because in this HTML document you can see that we have two P elements that Don't have an ID and they don't have a class and that basically means

we have no way of identifying these in an easy specific way so the first way that we can you know think about identifying um one of these elements is by the query selector method and what we're going to try to do here is basically insert another element between these two paragraph tags and if you go to the documentation um and you go to the I believe it's the Node let's see yeah so the node interface has this method called insert before and what that does is it basically inserts a HTML node or element um that

inherits from node node um before a specific reference element so basically in our case we're going to use this method and we're going to have to figure out how do we identify this second P tag right here now the way that we would think about doing this is we say document. query selector and then we Grab anything that has a P tag all right and in this case when we press enter we're going to get the wrong one because the query selector method only gets the first occurrence now what we can do is we can

change this to query selector all and what this is going to return us is a node list so unlike an HTML collection which we got when we looked at the children of that unordered list now we have just a node list which is a slightly different data Type if we didn't know what this meant we can just go back to the documentation we can type in node list and let's see what this does all right so node list objects are collection of nodes usually returned by properties such as node. child nodes and methods such as

document. query selector all which is what we used and let's look at a few more things we have some properties we have the length of it and then we have methods so we have this Method called item similar to HTML collection where we can select something with an index so we can go ahead and do that and we can actually just chain it to the end of this so we'll say item and then maybe we'll pass in item number one and that's going to get the first index so remember it's zero index so the first

P element will be zero then the next one will be one so now we have selected the second element and what we want to do is we want to assign that to a variable so We'll say uh P element is equal to that and now we want to use the P element um let's first say uh node type and we're going to get a type of one which means it's an element type and we know that element is kind of like a a child or um it inherits from that node type which is the base

class so we're getting the node type and so we know that the P element or P LM is going to have this insert before me meth so let's go ahead and Learn how do we use that so if we go back um to what we were looking at previously so we've got node. insert before now let's look at the syntax we learned about this in Prior lessons how to read this documentation and what we're seeing here is that we have um the parent node right here is going to be the parent of the newly inserted

node so we have to ask ourself what is the parent to the node that we're trying to insert let's go back to our uh HTML Document and maybe we can even pop up the diagram on the screen and see that what is the parent to an element that we insert between these two paragraph tags in other words what is the parent of one of these paragraph tags well the answer is going to be the mainbody div all right so we need to pass in a reference to this main body div as that first um parent

node right here so we know that we have to select that and then we have to put in a new node which is going to Represent a new element that we create and then finally a reference node so the reference node as we can see down here is going to be the the node or the element that our new one is going to be inserted before um or we're going to insert it before this element all right so if this is null then the new node is inserted at the end but we don't care about

that because it's not so let's go back and the first thing that we need to do is identify that parent so we'll say Parent is equal to document. query selector and then this time since we have a class to select it by we're going to select it with the class notation so we have parent we'll just check that that we're getting the right one and now we just have to say parent. insert before all right and then we have to make a new node so the new node is is going to be a p element

so let's go ahead and create that real quick so or actually no We yeah we need to create a new element so new P tag is going to be document. create um element of type P and then we're going to assign some text content we'll say programmatically added between all right so now we have our new element and finally we're going to take the parent we're going to insert before we're going to pass in the um new element that we're putting there and then we're going to um reference the element that we want to insert

it before So that would be P LM all right so we did that up there before so let's see if this works and you can see that we have program programmatically added this paragraph tag between these two paragraph tags right here so this was a little bit of a tricky example and we kind of ventured out into a method that we definitely had to read the documentation for before we knew how to use it but this just goes to show how we can kind of navigate around The Dom by visualizing it as a tree and

really understanding what's the parent what's the child what's the sibling and you know what is the interface that I'm working with within the Dom all right if you are still watching this video um that's awesome um most people are not going to make it through this kind of conversation about the document object model but I will say that if you're at this point and you're very confused that is totally okay the purpose of this Video and this crash course um especially this section about the document object model is not to make you an expert at

it the purpose is to expose you to what it is what are some of the things we can do with it and just get you um started and thinking independently of okay if I don't know something how do I go figure it out you know we went through a bunch of examples where I didn't necessarily know how to use these Different methods or I didn't know what type of data we're working with but you go to the documentation you search for it and you figure it out so if you're confused that's totally okay keep moving

forward we're not going to actually be using the Dom all that much throughout the rest of the series but as I said in the beginning it's super important that you understand what it is because it is at the root of every frontend framework that you're going to work with you know If you start working in react you're going to hear something called the virtual Dom and if you don't know what the real Dom is it's going to be very hard to understand what the virtual Dom is and furthermore if you're working with like angular or

vew vue.js you know these all connect in with this Dom API to um basically expose their own API so you're G to you know have some easier ways of working with this HTML once we get into um frontend Frameworks but Underneath the surface those Frameworks are just connecting in with the same API that we just used in this video so to do a huge recap of HTML I think of it in two different parts first is going to be the static HTML and that's going to be just the HTML like the stuff you see on

the page here this is static HTML and no matter what you do it's not going to change all right now the next part is dynamic HTML and that is what we see when we start working with the Dom and We start manipulating and adding removing changing modifying those kind of things with the existing static HTML so there are two different parts the first one's pretty simple and I think you probably caught um you know how to use it pretty easily but the second one is very um confusing and even once you work with this for

years it's still going to be something that you're learning over and over and over again and perfecting along the way but what I Really want you to take away is that we can model an HTML document in a predictable way and then we can write a specification called the document object model and allow JavaScript to connect in with that API to actually modify the static HTML now the very last thing before we get into to our lesson um code challenge is going to be semantic HTML and I'm not going to spend a whole lot of

time here but when we first went through it at the beginning of this uh Crash course we were talking about the most simple elements possible so we've got divs we've got paragraph tags images um inputs list all of those kind of things with the new HTML 5 spec the um the new thinking on HTML is that you know consistent with the concept that we want to use it for structure um we also want to use it for intent so what do we intend to use these different elements for are we trying to section off a

part of the web page are we trying to make a Nav bar are we trying to make a footer you know normally you would just put all of this into uh div um elements so you can make a header and a navbar and a you know blog section and a sidebar and a footer you can make all of those things with just divs but in the new HTML 5 spec it's you know you're basically supposed to plug into some of the new tags that they have available and in this case instead of using divs for

all of these different um features of your Web page you should be using a nav bar um so the nav uh tag and for your section so like the blog section that should use a section tag as well as as the um the sidebar and stuff like that and then you have this tag called main which represents the main content of the page and then you have an article tag which might represent a single blog post and then finally you have a footer tag which obviously represents the footer so all of these give more semantic

uh more Meaning to the intent of how you're trying to use your HTML and it's not super important for you starting out but I wants you to understand um that it is out there and when you see other people writing HTML and people that are really paying attention to best practices you'll see those different elements pop up but remember you can always look at the documentation if you ever have a question about a certain type of HTML tag go to the documentation and type it Into the search bar and read about it that's the only

way and the best way to learn as you're reading through other people's code all right this has been a pretty long um HTML crash course but unlike some like shorter crash courses I really wanted to um walk you through my line of thinking and help you be more independent when thinking about HTML in the document object model so hopefully this was um informative and now I have a challenge for you that's going to really Uh test you this is a tough one but um I'll go ahead and solve it with you on video after you've

tried it yourself and hopefully by doing so you're going to learn a lot about you know how do we reason through some of these different uh Concepts and how do we take our static HTML and make it Dynamic and bring something to life so what you see on the screen I showed it to you before but this is what we're going to create where we basically have a random Generator for memes and jokes and random quotes and then riddles so we can reveal the answer and this will be a really cool project that I think

you'll be excited to share with your network and um be sure to tag me on Twitter with it um 100 days of code uh is the hashtag that you want to use but I'm really excited to dive into this so in the next video we're going to be solving it but I I recommend that you first try it on your own and see how far you can get so The link to the code pen starter pack is in the description and what you're going to be working with is basically uh this right here so let

me go back to the starter portion all right so we have some code already written for you so I've already put some buttons in here and I've already linked up some of the events um that are going to be called and then I've uh made some template functions for you that are going to Correspond to those click events and then finally I have all this random data down here so bunch of random quotes and uh meme URLs and stuff like that and then then I have a helper function uh called get random data where in

each of the methods that you're going to implement yourself it's already grabbing a random piece of data that you just need to figure out how to put into the HTML document and display it in the right spot once again I'm leaving a link Into the in the description so you can go through and see like what are the user stories so user stories are basically like what should a user be able to do when they're looking at this application and so I've got those written out I also have a few hints to help you out

um just point you in the right direction on this and then once you've tried it watch the next video of this series and we will solve it together welcome to the lesson 7 code Challenge and this is going to be basically an HTML plus JavaScript challenge where we're going to use the Dom to basically Loop in our JavaScript into our HTML and bring it live into a dynamic uh web page that's going to basically Generate random memes jokes quotes and riddles so if you haven't seen this before just you can click these buttons on the

right and it should generate something random every time we click it and we can do jokes and quotes And riddles and um you have to reveal the riddle answer uh by clicking this button right here so this is going to be a really cool challenge you can obviously see that there are some Styles already applied to it and since we haven't covered CSS yet in this uh full stack road map series um that's going to be the next lesson I've done this for you so I've already wired up all the CSS Styles and all you

have to do is write the HTML and the JavaScript um to make This thing come to life so let's go ahead and take a look at some of the user stories so this is from the blog post that I uh wrote here for this lesson and just as a recap a user story is something that we use quite often in programming to come up with requirements a good example of a common user story is every time a user enters his email um and password and clicks log in it the user should be you know dropped

into their homepage within the app you know That's a basic user story that just says okay when the user does this this happens and we have some user stories defined for this code challenge um the first one is a user should be able to click buttons on the right side of the screen to Generate random memes jokes quotes or riddles so as we saw we can click these buttons and get something random um obviously going in the correct location only one piece of content so this is the second one only one piece of Content should

show at a time so for example if the user clicks show a meme and there's a quote already showing the application should remove the quote and show a random meme so as you see every time I click a new button this content right here is going to disappear and it's going to replace it with nothing and then generate a different type of content so right now we have a riddle if we replace it with a joke that goes away down here and our joke shows up up here So that's another requirement um The Third One

content should be displayed under the appropriate heading so in other words if I click tell me a joke the joke needs to show up under tell me something funny rather than I want a riddle or something like that and then when showing a random riddle the answer should never be revealed um before the user explicitly clicks to reveal the answer so when I click riddle you're going to see that I Get the riddle but I don't get the answer and I have to click this reveal riddle answer in order to get the answer itself the

next one is if a user clicks reveal riddle answer and there is no Riddle an alert should show letting them know so in other words um there's no Riddle populated down here and if I click reveal riddle answer I get an alert up here at the top of the screen saying there's no Riddle for to show an answer for and then likewise if a user Clicks reveal riddle answer and the answer is already revealed an alert should let them know that it's already there so let's go to a riddle let's reveal it and then let's

click this again and the riddle um is going to say or it's going to say the riddle answer is already exposed all right so those are the requirements and of course I gave some hints here um the div element within uh with a unique ID or class name can be a Great way to establish a container for future content so I'll show you how that works um we also need to use the HTML element. hidden property so that has to do with hiding and showing that riddle answer um it says there's no perfect solution there's

obviously a 100 solutions to this and then we got some starter code all right so here is the starter code that we're working with and we have to basically take this which only has some buttons that don't do Anything yet and we have to turn it into this a working content generator so as we solve this I'm going to try to walk you through my thought process a little bit but I'm not going to spend uh in overly detailed amount of time on each of the components like the main purpose of this is to give

you the solution um not to basically build an entire app and think through every last detail of it so let's go to our starter and we'll keep this one up so That we have a template to look at of what we're trying to do um and then from this starter let's go ahead and get acquainted with what is here already so we'll start in the HTML section you can see in this HTML section we have let's zoom out just a little bit we have um some instructions so uh notice how we've use semantic HTML here

so at the end of the previous video we talked about semantic HTML how HTML should show intent and what we've done here is we've Created uh a main tag which is going to say here's the main content area and then we have uh one section which is going to be the content this is the empty uh area right here and then we have another section called sidebar which is where all the actions are okay so that's what we mean by semantic HTML um and it looks like everything has been implemented for us so we have

our actions our buttons and our buttons are connected up to click events um that are Down in the JavaScript section so our content what we're going to do is add it right here in the section with a class called content all right so then of course we have CSS this is just styling the whole web page for us but this is not required since we haven't really talked about how to use CSS yet so this should just automatically work for us and there's no action required by us uh in that and then finally we have

JavaScript all right so this one's where Where some of the tricky part is going to come in where we're going to be working with the document object model as you can see we have some templated functions and we have our to-do items so with each of these functions we need to show a random you know piece of content in the correct location and never show more than one at a time so similar to our um user stories this is just reiterating that so we have a show meme function which is going to be connected Up

if we look at our HTML it's connected up with this show meme button all right so if we were to um go down here at the bottom of this function and just console.log um is working all right so we've got that connected up and now we just click show Meme and if we open up the console so down at the bottom left and we see is working we know that this has been wired up correctly so lucky for us we've got This wired up already no work to be done there all right so we've got

a show meme then we have show joke which is um wired up to this button and then that does the same thing for quote and riddle for the next two buttons and then finally the reveal answers function is going to be wired up to this reveal riddle answer button all right and obviously this is styled a little bit differently but it's still a button uh HTML tag and then at the bottom um you can see a bunch of Code that I wrote uh already for you which is just a bunch of content that we can

use for randomly generated content and then it has a couple of helper methods so it has a data object it gets a random number and then it uses those two things um in this method right here to get random data so basically what we do is we pass in um we have a parameter called type and if we pass in memes we'll get a random Meme and if we pass in riddles we'll get a random riddle and You can see that I've already hooked that up to these uh functions that are wired up to the

buttons so as you can see we have for the meme one we have already assigned a variable to this random meme URL and if we were to just console.log what we're getting here and then we press show a meme um hold on so show a meme let's go to the console and you'll see that we get a link to an image which is going to represent the meme all right so that's The overview of what we're working with all we have to do is write some HTML and then finish these functions that have already been

templated out for us I think the first thing that we'll do is probably the easiest so in our template you can see that we have the these uh headings here so this output looks like an H2 heading um and these ones down here look like maybe H3 headings or something like that so let's go ahead and um put those in there so where it Says your HTML code goes here let's make an H2 so all you have to do in code pen it's pretty easy is type the um uh type the tag that you want

to make and then press Tab and it creates that element for you so we'll go ahead and type output and see what we get looks like we're getting the correct element there and now we have to go to the headings so we want in the next one we want uh an H3 and we want programmer memes so far so good we're looking Okay um tell me something funny so this will be jokes so another trick you can use in code pen and also Visual Studio code once we start working with it um if you go

to the end of a line and press contrl C and then press contrl V you'll get the same line um copied down so let's do that uh one more time and then replace the text within it so give me some wisdom and I want a riddle actually we need one more uh so we've got programmer memes oh we missed The tell me something funny so let's do do that real quick all right so we've got our output and all of our sections defined now if you remember in the user or in the hints um if

we go back here and look at the hints it says the div element with a unique ID or class name can be a great way to establish a container for future content so what I mean by that is if we go here and we look at these headings we obviously have to insert some sort of HTML element probably a paragraph tag after each of these now how do we you know how do we know where to put it like how do we select each of these headings and have a container to put it after them

well something that I think is smart to do is create a div element which is going to act as that container for all of our future paragraph tags which will have or paragraph or image tags which will have the content itself so let's see what we're going to do here So I think what we want to do is after each of these headings instead of trying to um dynamically figure out where to put these different pieces of content let's be explicit about it so let's make a div um so we'll type div and we want

to give it a class or an ID because we want to be able to identify um this individual div as the container that we want to to put the content in so for this one let's just give it a class and we'll call it meme Content all right so we'll enter down and basically what we want to accomplish with the JavaScript is we want to identify this div and then we want to insert our content within that container that's already sitting there ready in waiting for us now we could programmatically generate a div like this

but it just would be a lot of extra work unnecessary work and it would require a lot more code so let's do this with all of the Different sections so we'll go down here and now let's just replace these classes because we want unique identifiers for our JavaScript to basically be able to query so this one will be uh jokes content or joke content we'll stay consistent here and then quote content and finally riddle content all right so these should be able to be selected by JavaScript very easily all we would need to do um

let me save this real quick all we need to do is open up The console uh let me see if I can get this all right so the console looks like we're in the right JavaScript context and all we need to do is document. query selector and then since we have classes here here as the attribute we need to use the class selection syntax which is the dot preceding the name of the class so if we wanted to select this container right here called meme content we can just type in meme content and we should

get that div all right so from there all We have to do if we want to insert something in it is we save it in a variable so we'll maybe say a container and then from there we say container. append child and then this is where we pass in our generated HTML element so in this case let's just go ahead and create something um for that this is just practice to understand how we're solving this problem we're not actually doing anything yet so we'll say new element is equal to Document.createelement and then maybe we want

to put in um let's let's go ahead and practice this with the meme container so we need to put in an image so to do that we type in image tag all right so we're going to create that element and then we're going to use something called the set attribute property all right so um in order to create an image element we know how to do that so let's go ahead and practice that here if we say image it's going to Give us um a source attribute and an ALT attribute we're going to ignore this

alt attribute CU it's not like totally necessary and then then from here we can pass in a URL to an image and that will display it um within the browser here so let's just go ahead and go down to our data here and we've got this array of memes so let's just grab one of the URLs just to test it for a second and paste that into the source attribute of our image and you can see that our image is Coming in there nicely and I've actually written some CSS if you were to look in

the CSS portion I've actually selected all images here and I've said that the max width is going to be 350 pixels so it's already going to come in nicely for you you don't have to worry about doing that so this is basically what we want to insert into that um specific programmer memes area and if we wanted to do that we've already got our new image element and all we have to do here Is say new element. set attribute all right so if we were to if we didn't know anything about this this is how

we'd figure it out so first we say new element. uh node type so we talked about this in the prior video looks like we lost the context so we have to go back to the code pen context let's see if that still has this okay we got to redefine this real quick So first let's select the container so we just got to redo this cuz it lost the context that we were working in so now we have the container which is the meme content and then we have to create the new element all right so

we created an image and now we just say new element. node type and it's going to return us one now in the mdn documentation let's go to the mdn documentation real quick and let's type in node type this is a method we learned About prior um in Prior videos and you can see in the node constant or the node type constants a value of one represents an element so let's click on that element and then we come down and we can see that within the element there are methods and one of those should be if

I'm remembering this correctly is set attribute so if we click on set attribute it says that we give it the name of the attribute we're wanting to set and then the value we want to set so In this case if we were trying to um set the source attribute of an image we just have to say new element. set attribute source is the name of the attribute we're setting and then you know maybe we'll paste in that link that we had earlier so that will be the value of the source so we press enter and

now what we can do is basically take this new element that we have um and we take the container and we append append child we use the append child method to pass in That new element and boom we have a new image showing up in that section that we want it to show up in so like I said we haven't actually done anything this is just practicing and figuring out um in the live console like okay how do we actually reason through this what methods are we going to use all that kind of stuff now

we should be able to go down into the JavaScript and Implement some of these functions to do exactly this all right so let's close This out here we don't need this for for a little bit um and then let's let's refresh the page because we want a a clean slate here um it looks like actually not sure why this is still there um let's see oh that's right because we had put this in here already okay let's get rid of that we don't want anything to start off we want this to be empty and now

let's come down to our templated methods and in this case we want to show a meme Right now when we click the button and we open up the console it's going to print a random meme URL and we know that this URL should be set equal to the source attribute of an image tag or image HTML element so we also know how to create that so let's go ahead and start writing this method the first thing we need to do is grab the container that we want to put it in so we will say container

will be equal to document. query selector and then we Need to pass in meme content all right so we should have the container selected you could obviously test that if you wanted to um I think if we just pass it into console.log should be able to do that and show a meme and we get the container so we're doing good so far from here we need to say New Image is going to be equal to document. create um is it create element or new element I Can't remember okay so it is create element and we

want an image element now we just need to set the attribute so we want to set the source attribute and what do we want to set that equal to well we want to set it equal to a URL and we happen to have that already so we just drop in the r random meme URL and that should set the attribute for us and then finally we come down here at the bottom and we say container. append child and We pass in our new image okay so let's go ahead and save our our pen here and

when we click this show meme we should get an image populating in the right section and we do all right so if we click it again it should put another image in there um after this and it does and then another one and we could keep going with that but obviously the instructions one of the user stories is saying if there's Already something there delete it and replace it with the new one so we have to figure out how to do that and a good way to do that is by using an if statement so

if we come down to our method here of show meme um we need to ask before we uh insert that into the Container we need to say if the um if there's an existing image there so how do we do that one way that I can think of um is if we Take um is we'll just say set a variable is image equal to container. query selector and then we'll look for an image so basically what this is doing is it's saying this container which represents this div right here if we grab that container and

within it we look for an image element and if we find something then this value is image is going to represent the actual HTML element if we don't find anything then it's going to return null so we're going To get nothing so basically what what we have to do is we say if is image so if that's a truthy value um which should it should be truthy as long as it comes back with an image then we need to clear the contents of this container so a way that we can do that is by using

the inner HTML property and if we go to the mdn documentation I believe this exists on the Node uh interface so let's take a look uh looks like it's not here so let's Search for that so inner HTML okay so it's on element so on each HTML element there is this property called in HTML and it says the element property in HTML gets or sets the HTML markup contained within the element so a quick trick um this is something that I just have learned over time you wouldn't necessarily know it from this documentation is you

can pass in an empty string to this property to clear all the HTML from A specific container so if there's an image already there we're going to say the containers inner HTML is equal to an empty string okay so basically what we're going to do is every time we click this button we're going to generate a random meme URL then we're going to create a new image we're going to check if there's an existing image and if so clear it and then we're going to insert the new image so basically this is another way of

saying let's replace Whatever's there so let's try it out so we got our first image here and if we click this again it should replace it excellent so we are replacing it correctly we've got this in the right spot and for the rest of the methods we pretty much should be able to implement the same type of logic um and implement it for all the rest of the buttons so let's get rid of this to-do because we have done it we have implemented that Correctly um now one thing I want to do before we um

get any further is implement this clear all method now the reason I want to do this is because it's basically um since we see that we have buttons that kind of do the same thing we don't really need to write this logic right here um every single time all we need to do is we need to write one method that looks at all of the containers here and it clears all of the containers before we replace it with new Content so in order to do that let's go ahead and take some of this code here

so we'll take that out of there and put it in the clear all so let's rename this variable and we'll say meme all right and let's go ahead and grab this container so actually this is not valid code we need to type document. query selector and we need to grab the meme content container so we'll say meme container is equal to that and this should Represent um this div right here now we can do the same thing for the other divs so the joke content and the quote content and the riddle content so I'll show

you what we're going to do here like this will make sense in a second so just bear with me so we're going to copy this down four times we're going to say this one will be a joke container this one will be a quote container and this one will be a riddle container and then we of course have to replace this with Joke and quote and riddle all right so in this JavaScript that we just wrote we are basically selecting each of these containers that should have the content that we're putting in and from here

all we have to do is set the inner HTML to an empty string and no matter if there's something there or there's nothing there it doesn't matter we're just going to clear it no matter what so we'll say mem container. Innerhtml equals an empty string and we'll do that four times over and just replace these variables with the correct one all right so this clear all method is going to look in all of the different sections and it's going to clear them no matter what's there so all we have to do down in this show

meme thing is before we append a new image we just have to call the clear all method so that should clear everything out so let's try it out Let's show a meme and then click it again and and it looks like it's clearing it and putting in the new one and that's going to happen for all of these because we're just going to pass this clear all method into each of these template functions okay so the next one is show a joke all right so we've already got a random joke uh text but let's go

ahead and console.log the Random joke text just to see what we're working with so let's click the button make sure it's working and let's open up up the console all right it looks like we're getting a string that represents the joke so in this case we want to insert a paragraph element and put this text content in it all right so the this should be rather simple so we'll say new paragraph is equal to document.createelement and we'll put in A P tag and then we say p. text content is equal to the random joke text

so I'm taking the variable here which should be equal to a random joke and I'm assigning it to the new P element that I just created and then finally I need to clear all because I need to clear anything that's there already and then I need to insert it into the Container so before we wrote out uh a different variable that selects the container and then we did it in two steps but we can basically Just do this in one step so we can say query selector in this case we want to get the joke

content ah can't type and then at the end we can just chain on this append child and pass in the new paragraph element let's see if that works by clicking tell me a joke and it's saying p is not defined um that's because I for some reason uh just said P instead of new P so that should work better this time all Right so we're getting um some content here now this will be the real test if I click show a meme does this content get erased in a meme show up that's what should happen

so let's show a meme and we see that in the jokes uh section there's nothing there which is great so let's tell another joke and you can see that we have a joke but no meme so far everything's working great so let's go to the next method that we need to implement so this will be a quote All right so let's go ahead like we've been doing we'll console.log the random quote and we'll click the button and you can see in the console we get an object with two keys or two properties we have the

author property in the quote property both which are strings so what we want to do here is we want to display a p or a paragraph uh element and then another paragraph element right below it with the author so so let's do that so we'll say uh the quote itself is Going to be document.createelement and that will be a paragraph element and then we'll say the author is going to be document.createelement and that will also be a p element now for the text content the quote will be pretty straightforward we just say quote. text content

equals the random quote and then we need to actually get the quote property which is the quote itself now for the author text content we need to Grab the random quote again um and grab the author property but we also want to put that little Dash uh before it so all we have to do is make a string with a dash and a space and then we concatenate that with the um the author name all right so we've got our text content um or let's let's see if we did this right so we got our

quote and then our author stored in 2 p elements so now all we should have to do is first clear all so we clear everything out and then we come Down here and we say document. query selector we want to grab the quote content container and then we append child and we put in the first we want to put in the quote and then the next thing we want to do is grab the same container and put in the author so let's go ahead and run this looks like we got a random quote working just

fine but this is kind of messy I want to refactor this a little bit we never want to write the same thing two lines in a Row that's just bad practice so what we want to do is we want to store the container like we did before in a variable so let's put this right here so now we have the container in that container variable and now we just have to uh call container. appendchild for both of these and this should work still awesome so now we can do jokes we can do quotes and we

can do memes and they all kind of Clear each other out when um a new piece of content is generated now the last one is going to be the hardest one and that's because we only want to show the riddle itself but we don't want to show the answer to it until this reveal riddle answer is clicked so let's mark off our to-dos here we are done with the show quote we are done with the show joke and we're done with the clear all method so we're we're doing pretty good Here and finally we have

to show the riddle so I think what we're going to do is let's first see what we're getting it already shows us I already wrote in a com that says this is what you should get but let's just verify it oh is good practice so console.log Random riddle and let's click the button we get our random riddle with a answer prop and question prop so let's let's go ahead and um be explicit about this and I'm going to show you a little es6 or The latest spec of JavaScript I'll show you a trick on how

to uh destructure a believe that's the correct term for it but we're going to destructure properties off of this object so all we have to do is we say const and then we put these little brackets here and then we pass in the properties that we're looking for so we want a question and we want an answer and that will be set equal to the random riddle that we're getting so now we should be able to Console.log a variable called question as well as a variable called answer right here so let's see if that is

true all right so we got these printing out okay and basically what I did here this right here is the equivalent so let me comment it out for a second what I just wrote there is the es6 or the latest spec of JavaScript equivalent syntax to doing this so we say question is equal to random riddle do question And then answer is equal to random riddle do answer so these two lines of code can be simplified into this single line of code right here by putting these little brackets around there and selecting the property that

you want so that's just a little trick um thought I'd show you as we're solving this all right so we've got our question we've got our answer now we have to create our paragraph elements so I think we're going to show the question and the Answer both in a paragraph element um just like we did with the quote but we obviously have to hide the answer up front so how we'll do that is this we'll say the um question element will be equal to document.createelement we'll put a paragraph tag in there and then we'll set

the text content equal to the question itself and then let's go ahead and take um since we're inserting twice let's go ahead and get a single variable for the container So document. query selector and we'll grab the uh riddle we need a DOT at the beginning to select a class we want the riddle content div so that will be this riddle content div and that should work and now we want to say container. append child and we'll put in the question element let's see if that works okay awesome we have this paragraph element um representing

the riddle and now what we have to do is we have to insert the answer but we have to Make it hidden all right so I think the way that we're going to do this um if you remember from the hints it says you may need to use the HTML element. hidden property so let's take a look at what that is so the HTML element property hidden is a Boolean which is true if the elements hidden otherwise it's false and you can actually set this equal to true or false to navigate between something that shows

and something that hides so that's good to know uh we should be able To use that on any element that we're working with here all right so what we're going to do is we're going to create a similar to this question element let's just copy this down and this time it's going to be the answer so we'll do answer element and then that will be set equal to the answer all right now there's one additional thing that we have to do so we've got this button over here called reveal the riddle answer and that's Going

to call this function down here called reveal answers now if we're anticipating in the future um this is something that you'd probably figure out after you implemented it and you're like oh shoot I realized this now but I've already built this I know how it works so what I'm saying is that in the future we're going to have to click this button and we're going to have to figure out whether there's a riddle answer available and whether that riddle answer Is hidden or not hidden so in order to do that in order to make our

jobs easier we should probably set an ID attribute on this p paragraph tag we're calling answer so we've already set the text content um so let's let's go ahead and append this to the HTML so just so that you can see what's going on here um so we're appending the answer element so now when we say riddle me we get the riddle and the answer which is obviously not what we want to do but what we can Do here is after this we say answer element. set attribute rute and what I want to set is

an ID um and then what I want to do with that ID is set it to riddle answer all right so what this is basically going to do is down here in the riddle content it's going to create a P tag that has an ID equal to riddle answer okay and then the answer to the riddle will be sitting right there so later on when we click the reveal riddle answer button it's Just going to say okay go find me uh A P tag with an ID of riddle answer and if that's there then if

it's there and it's hidden I want to unhide it if it's not there I want to alert the user that it's not there okay so that's basically what we're doing with that code down here um and then of course we need to call the clear all method as we did with all the other functions and then the last thing we need to do is we need to hide this so we need to grab the Hidden property and set it to true on this answer element so when I click riddle me we should see just the

question and the answer should be hidden so let's click riddle me and we get exactly what we're looking for here so that's good now the last thing we have to do so we have completed this to-do I believe let's let's just test it by clicking out or clicking on some other ones okay looks good so far and now we have to implement this Reveal answers so let's go back to our requirements here our user stories say when showing a random riddle the answer should never be revealed until we click that button so we got that

um if the user clicks reveal and there is no Riddle and alert should let the uh user know that there's no Riddle there um if it's already there and it's already revealed another alert should be um popped up so what we need to do here is we need to first check um Let's see what do we need to check so what we need to check is if there is a riddle answer um or not or not a riddle answer but a riddle in general so the way that we do that is we first grab the

riddle container which will be equal to document. query selector riddle content okay so that should give us this div right here and then from there we can say the riddle is going to be equal to the riddle container. query selector and in this Case we want to search for a paragraph tag so if there's any paragraph tag sitting within that div we know that there's a riddle there and if we know that there's a riddle there then we know that you know we either need to reveal the riddle answer or we need to alert the

user that it's already revealed okay so now we're going to do an if else if statement so we'll say if there is a riddle if there's a riddle revealed and Then we actually we have one more step to do so we need to say the answer is equal to um document. query selector and the answer is going to be what we named it above right here so riddle answer is the ID that we're looking for so we just put this hashtag to search for an ID rather than a class and we type in riddle answer

okay so there's our answer and what we're going to say is if there's a riddle and there is an Answer then I want to alert the user there is already um an answer revealed or actually no because even if there's an answer Reve or even if there's an answer hidden it's still going to be registered under this variable so let's go ahead and test that out real quick let's comment this code right now and then we'll console.log answer okay so what we would expect is we've already created in this Previous method we've created this element

um with an ID called riddle answer but we've hidden it so it's there it's just hidden so what we want to check is when we search for this by its ID if it is hidden what value do we get so we're going to console log that answer I'm first going to click riddle me and then I'm going to click reveal answers I'm going to look at the console and you can see that even though it's hidden we still found the element within The Dom using this query selection Vector so in other words we have to

check whether it's hidden so we got to uh print out answer. hidden instead of just answer so let's generate a riddle and then reveal it and we're going to see that it that the hidden property is set to true so now what we need to do is uncomment this code and we're going to say if riddle and the answer is hidden then we need to reveal it okay so we need to say answer. Hidden equals false all right so that line of code right there should pretty much complete our um web page here with the

exception of those alerts so let's go ahead and generate a riddle and click reveal the answer and you can see that it reveals the answer right there okay and maybe we even want to come up to this method and instead of just setting the text content to answer we can put the answer is and then the answer so let's try that One says the answer is an echo so perfect now the last thing that we have to do is handled those other cases so else if so if the riddle is true so if there's a

riddle there and the answer is hidden we're going to reveal it if the riddle is there and the answer is not hidden so right here um so we basically this is redundant so if we make it to this else if block that means that the that either the riddle was not there or the answer was not hidden so if We get here and we say if the riddle is there that's all we need to check so if the riddle is there and we're trying to um uh we're trying to unhide it again and then we're

going to say alert the answer is already revealed okay so let's see if that works so we'll click the riddle we're going to reveal it and we're going to click the reveal button again and it says the answer is already revealed all right and then the last piece is just the lse statement which Basically means that we um don't have a riddle at all but we're trying to reveal the answer so we'll say there is no Riddle to reveal the answer to sorry the video cut out here I do not know exactly where I was

at but basically we were just completing the last part here where if you click on the riddle and you reveal the answer it reveals if you reveal it again it's already revealed um or if you have a random quote and you try to reveal the riddle answer it's Going to say there's no Riddle to reveal the answer to so we've pretty much completed this challenge um hopefully it was fun for you um a quick quick way that you can share this is click the share button down here and share it on Twitter be sure to

tag me uh at zgd and put in the hashtag 00 days of code um that's where you can get support from The Tech Community the webdev community on Twitter and hopefully um we'll see this popping up a couple times I I think this is a fun little web page to create with some interactive JavaScript and if you want to customize it a little bit you can go down to the JS section and replace some of these quotes and some of these memes and um jokes with your own favorites in this video and subsequent videos we're

going to be going through a CSS crash course so this is all about styling your web pages now before we get into a lot of the details I want to show You exactly what we're going to be able to build by the end of this and we're going to use a tool called front-end Mentor because this is basically uh a bunch of professional look web designs that have been implemented for us but they have not been coded so what you do is you click on a challenge and you can go in and get the design

and then you code up the design and submit it and get feedback on it so the three that I've chosen based on what I want to cover are Going to be this little uh single price grid component this will be the first one that we do right after getting through the crash course and it's a nice little introductory challenge you see that we'll make a desktop version and then a mobile version and then we will move on after we've gone through a couple other tutorials to this um testimonials grid section which is going to help

us get through uh the skills of flexbox and CSS grid which are going to Be super important to you as a developer before I get into the topics I just want to say that the prerequisites are basically you got to know how to write HTML the basics of HTML is all you need um we're also going to be working in the codeen environment so this is just an example right here um where we can type out HTML CSS and JavaScript so get yourself comfortable with that um and then optionally like I said we're going to

be combining all of our skills for Some of the code challenges so watching the previous uh parts of this full stack developer series is going to be important now in this lesson on CSS I want to go through what we're going to actually learn but more importantly what we're not going to learn I'll be completely honest when I put this together I got a little carried away I thought this was going to be a simple crash course in CSS but um was humbly reminded um that CSS has a lot of things Going on there's a

whole lot of things that we can cover and I tried to keep it honed in on the most important Concepts per how I've been trying to do it with this series but there's just a lot to cover so as you can see on the left we're going to be talking through what is CSS and the basics of it we're going to be walking through the Box model which is basically defining how much space and elements going to take up on your web page um that's going To get us into some discussions on Block versus inline

elements box sizing and layouts and then we're going to cover a bunch of other things and I'm pretty excited to share a four-step system that I use when I create HTML and CSS uh basically take a design and put it into code cuz thinking through that was really hard for me when I first started and I want to share that with with you so that's the main core lessons we also have some supplementary or optional Lessons which includes responsive design so what happens when your web page gets put and opened up on a mobile device

like an iPhone does it look the same is it going to have a pleasant experience for the user um in today's age that's required if you want to make a web app so we're going to talk about that in a separate video and then we're also going to have separate videos on flexbox and CSS grid which is going to allow us to lay out our elements a little bit and Like I said we have this project right here um which gives us a great opportunity to apply those Concepts and put this into a nice looking

grid now what we're not going to be covering in this crash course is going to be graphic design and wireframing now there's a good reason for that that we're using frontend Menor because they already have professional looking designs built out and implemented for us and I don't want to waste a lot of time on going into Design principles that I'm not really an expert at um so we're going to use and leverage existing designs and learn how to turn those into code on a web page don't get me wrong these are super important Concepts uh

as a fullstack developer you always start with your wireframing and your design and your requirements and all that kind of stuff but that kind of comes later down the road I really want to focus on the Core Concepts of how do we actually turn Things into code we also not going to cover CSS pre-processors I'm not going to talk too much about it but basically it's a more convenient way to write CSS and it basically allows you to write a little bit less code and it gets pre-processed or I guess transpiled down into vanilla CSS

through a bunch of code that does that so um SAS and less are popular uh pre-processors and you'll often find them on much larger projects where trying to organize your CSS Is really important but we're not going to be working with that we don't have huge projects going on and it's not essential to our journey what we're also not going to be talking about is CSS Frameworks so the last thing that I want to do in this full stack web developer series is lock you into a path um to something that is really popular right

now but may not be in two years and that's kind of the deal with CSS Frameworks when I was first learning Bootstrap was huge um every tutorial was talking about bootstrap and now Tailwind is a pretty popular CSS framework and all these Frameworks are doing is taking vanilla CSS what we're going to be learning and writing some abstractions on top of that and just making it more convenient to you know lay out elements on the page and style them more quickly and efficiently I think it's really important to understand the barebones basics of writing vanilla

CSS and Therefore we're not going to be looking a whole lot at these all right at this point I think we are finally ready to get into the CSS crash course um as always apologies for the long intro but I really want to make sure that we're clear on what we're actually going through in this lesson the very first thing that I want to dive into is the basic synx of CSS so we already learned about HTML and you might actually recognize this HTML diagram up here from The last lesson now CSS is relatively simple

and all we're trying to do is Target a specific HTML element and apply some sort of style to it or some uh some sort of layout to it in this example here you can see that we have defined an HTML element with a class called su- class and then down here at the bottom where we look at our CSS we're using something called a CSS selector and we are targeting a class um of some class so we're basically saying With this rule down here I want to find any HTML element that has a class of

this and then I want to assign this specific CSS property um to that specific HTML element or elements if there are multiple elements that have the same class now this is just one of many examples that we can go through so in this case we're targeting a specific class we could also Target um IDs or HTML tags and we can do a bunch of combinations um of the three so we're Going to be walking through how that works and then we're also going to be talking about these properties down here so similar to what we

talked about with JavaScript when we're looking at uh JavaScript objects where we have you know some sort of property and then a value um at the other side of that property same thing applies here with CSS we have a bunch of predefined properties that were able to use um to achieve different types of objectives Whether that be laying out you know HTML elements on a page so do I want to put something side by side with each other or do I want to just style it so do I want to make the background green or

do I want to make the text red or something like that we are of course going to get into all of the most common properties and selectors and all that kind of stuff but as with um all the other lessons that I've taken you through I want to basically introduce this documentation So this is the mdn web docs we have visited this many times uh in the prior lessons of this series but now if we go to Technologies we can go to CSS and then we go to the CSS reference and then we scroll down

and you should find this section called index and this is going to list out all of the possible CSS properties that we can use to achieve these layout and style objectives for our HTML elements so as we go through this if you ever get Lost you can always look up these properties that we're using on this documentation page so we've got the B basic syntax of CSS and we'll go into that even a little bit more but what is the actual purpose here like what are we trying to do well there are two things in

my head that CSS is really good for and that is going to be layout and style so how are the elements the HTML elements laid out on the page are they on top of each other are they next to Each other are they in a grid a table all that kind of stuff and then furthermore we can actually apply Styles so what color is the text what color is the background Do you have a a background image what kind of Font Are you you know working with on the page so what I did was I

put together a really basic example of this um this is nothing fancy but it just shows you um don't worry about the CSS uh quite yet here but it basically shows you how we can Combine the two so we've got a container on the left and a container on the right and then furthermore we have colored borders and a little bit of colored text within this along with you know some head things and paragraph text so this is kind of the ultimate goal of CSS we can not only you know do style but we can

also do layouts but if you zoom out even further the real goal of CSS is to Target a specific HTML element or elements and apply some sort of styling To that element or elements there are three primary ways that we can select and style HTML elements with CSS we can do it by HTML tag we can do it by a class which is the the syntax example that we looked at a little bit ago and then we can also do it by ID so if we look at this on the page here let's go ahead

and just make a simple paragraph tag and put some text in there so the first thing we can do is we can just Target that specific HTML tag and give It a different text color and you'll see that this turns red up here we can also add in a class so we can say uh paragraph you know element or something like that and we can replace this by adding a period before which indicates I want to Target a class and then you type in the class that you're trying to Target and then you give it

some sort of style and again we can see the red text there and then finally we can also have an ID on an element so Let's just call this one ABC or something like that and we can come down here and use a hashtag in the front and that's going to say I want to try to Target some sort of ID on the page and then you type the ID and then once again give it some sort of CSS property as you can see we've styled this red once again if you've been following along with

this series these look familiar to you because we talked about them with JavaScript already so if We were to come down to the JavaScript section and you know we go through our basic doc doent query selector and then we try to Target a specific HTML element on the page we use the same selector syntax so if we were trying to Target this element by its HTML tag we just drop in the letter P which targets all or targets the first paragraph element that it finds on the page we can also Target it by class so

once again we put a dot before and then We target the class that we're trying to go after and that's going to find find the first HTML element uh with that class on it and then finally we can do the same thing with these IDs so we can just type in hashtag and then the ID and we've selected it with JavaScript so this is actually a pretty familiar concept if you've been following along with this series and it's relatively easy to kind of grasp and hold on to but what is not so simple is understanding

What happens when you have multiple CSS selectors in a single stylesheet and they're all targeting the same element what happens there which CSS rule takes precedence over the other for example if I put in this CSS stylesheet um if I targeted the ID right here and gave it a color of green let's see if I can write that correctly and then I also come down and Target the class and give it a color of red you have to ask yourself which one's Going to apply we're going to cover that here in more detail in just

a second but I want to go through a couple other ways that we can actually Target HTML elements um when we have some more complex HTML in our web page aside from selecting HTML elements with tags classes and IDs we also have something called combinators that we can do um to parse through all the HTML in Target specific elements and to help us with this I'm bringing back a diagram that we Looked at in the prior lesson um on the Dom or the document object model and what the Dom describes is the structure of your

web page and how the HTML is laid out and in this diagram we talked about how there's grandparents and there's parents and there's uh children children and siblings um based on the level that an HTML element is at in the document so you can see that coming down here we've got you know an H1 A P tag another P tag and unordered list and all Four of these are considered siblings so that's just a quick review and what we can do with this is we can come back to our playground here and actually select different

HTML elements based on these relationships the first combinator that I want to talk about is selecting descendants in HTML so if we go back to our our visual doet Tre you can see that this div right here has several descendants so it has Direct children which are these four elements but then It has grandchildren which the children and the grandchildren are all considered descendants of that specific div so what we can do within CSS is we can Target all descendants with a single selector now I'm going to do it the wrong way first so that

we can see why this matters in the first place let's say that I wanted to style these list items right here one way that I could do it is I could Target the HTML tag Li and then I can give it some sort of style so Maybe I want the text color to be green I'm sticking with this color property because we haven't talked about all the CSS properties yet and it's pretty simple and easy to kind of intuitively understand so with this example I tried to select and style these list items and did so

successfully but by targeting it just like this we run into problems if we change the HTML structure the future and let's say that we put in some sort of footer so this isn't going to look Great but let's go ahead and make a div and then an unordered list and then you know footer link number one and then we'll put three of those in there so number two and number three so this list right here imagine this being down low in the footer and what we would want to do with that is we want to

actually make those align horizontally and we want to style them with a different text color and we probably want to give them a link and you see What's happening when we just select the LI elements all descendants we're actually picking up these footer um links right here and we don't want to be so there's a better way to actually Target specific types of descendants within a document um to allow us to have more specificity with targeting our HTML elements to make this example a little more clear let's go ahead and add some class uh attributes

here so this will be the we'll call it the main container and Then the second div down here is going to be called the footer now this is not semantic HTML like we talked about previously but it'll do the job here so what we're trying to do is we want to style just these list items so the the ones within the main container div but we don't want to Target the ones that are sitting in the footer because those are going to be styled a little bit differently the way that we can do that rather

than just targeting the LI tag What we can do is we can actually combine selectors so combinators is what we're calling this and I can say I want to Target the main container class and then I want to look for any list item that is a descendant of that main container class so the first div that we talked about here on the left um that's the only div that has this class and so therefore we're only going to be styling the ones that we're targeting at this point we can also add additional list Items to

our main container div and it's going to get that style so if we were to come down right after this list make another div another unordered list and then put in some text here you're going to see that that will turn green because it still is a descendant of that main container but once again we have our footer links uh you know avoiding that style because we've been specific in selecting only descendants of that main div now I want to stop for just a second And look at this syntax that we're working with so you

can see that we have a class selector with this period right here that determines that and then we have a tag selector separated by a single space so what we call this first one is going to be a pre- selector and then the LI is the actual selector so in this CSS rule that we have defined we're not really targeting the main container we're targeting list items so the one that is furthest to the right is Always going to be the HTML element that we actually want to style if we were just targeting the main

container here so if we dropped this down into a separate Rule and gave a color of blue per se you're going to see that not only list items but everything else there is going to get that style so it's very different saying I want to Target this main container class and saying I want to Target all of the list items that are descendants of this pre-selector main Container class all right I'm going to clear all of these Styles out I'm going to also clear the HTML that we're working with and let's go ahead and drop

in some different HTML because the second one that we're going to talk about the second CSS combinator is how to select children of a specific element with the descendants selector which is just a space separating two different selectors we're grabbing everything below a certain HTML element but with The children selector we're only grabbing the first children so with this div right here that we're calling an ID of main we only have three or we have four different children so we have the first three paragraph tags and then we have this div element which are all

going to be considered children so if we wanted to style just those elements then we can use a slightly different syntax so remember we're targeting an ID right here so instead of using a period we're Going to use a hashtag then we're going to pass in that ID drop down into our CSS Rule and now what we're going to do is give a color of we'll call it green again now this is just going to Target everything because we're just targeting everything in the div but if we added a child selector combin Ator we can

Target just those first three paragraph elements and how we do that is we use this little carrot right here and we type in paragraph tag right after that So what this is saying is I want to look at the div with an ID of Main and then I want to grab all of the children the direct children um that are P tags below that so the only three that qualify for that rule are these first three paragraphs and therefore we style them to have a text color of green so we know how to select descendants

we know how to select direct children now there's also a CSS combinator or combinators that we can use to select sibling elements now I Will make the disclaimer that I don't use these ever I don't know if I've ever actually used these sibling selectors and the reason being is because whenever you change your HTML structure it's going to affect the CSS rules so it's a little bit brittle um when you're putting these together but the reason I'm walking you through them is because you may see them in code somewhere and it's just good to know

that they exist and how they work to do this I'm going To copy in a little bit different HTML because we need a different structure to work with and let me zoom out just a little bit so we can see more so within this HTML you can see that we have another you know main container and then we have paragraph elements and list items uh separated uh throughout the HTML now I'm going to get rid of this CSS rule right here and now we're going to select some sibling elements let's say for some odd reason

you want to Style every paragraph element that directly follows a list group so in this case it would be this first paragraph here and the fourth paragraph here because they directly follow these list groups in order to do that we can use a special CSS combinator that selects only the first uh sibling of an element what we call this is the adjacent sibling selector so what we'll do is we will grab um let's see how do we do this we need to grab All unordered list so UL is what we're going to Target and then

what we do is we add a plus sign and then we target all P elements that are going to be adjacent siblings to those unordered lists and from here we can just assign we'll call it blue this time and what you'll see is that only the first paragraph and the fourth paragraph have been targeted now what I was saying just a little bit earlier is that if you change your HTML structure at all these Rules break so if we were to come in here and for you know some reason this is actually pretty common we

wanted to maybe wrap this last unordered list in a div so let's copy this in another div and then you're going to see that our rule that we wrote has broken down so this fourth paragraph here is no longer styled with blue text and that's simply because we changed the structure of that HTML so that's why I'm not a huge fan of these selectors um they're pretty uh Fragile in that sense now the last sibling selector we looked at the adjacent one which just grabs the first um sibling next to an element but we can

also grab all siblings next to an element so let's say that we wanted to style all of these paragraphs s um that are direct siblings to an unordered list the way that we do that is we open up our CSS and instead of a plus sign we're going to use this little till day um sign right here and what that's going to Do is it's going to look for unordered list and it's going to look for direct siblings that have a you know a type paragraph and give it this style so once again pretty fragile

um I don't use these often but they're good to know you know how they work and um you might see them in code at some point and hopefully you would fix them and make them a little bit more robust over the last few minutes I've talked about how fragile these selectors are but didn't really Offer you a better solution so that's what we're going to do right now if I had a situation where let me go ahead and remove these CSS rules if I had a situation where I wanted to Target this first paragraph and

this fourth paragraph what I'm going to do is just give them a class so I'm going to come to the HTML and on the first paragraph I'm going to say blue text color is going to be my class name and then I'm going to copy that same class down to The fourth paragraph and now I'm just going to select that class with our class selector and then I'm going to give it a color of blue and now we've achieved the same exact result but now if we change the HTML structure this CSS rule is not

going to break so that would be the preferred method at least in my head of doing that now believe it or not there are other ways to select HTML elements other than these the main three which is Uh tag class ID and then also the combinators um we have some other ways to do it so let's say that we had this specific HTML right here so we have a p element and a div element and they both have the class called regular text let's say for some odd reason we want to style all elements with

a class regular text a certain way but we don't want those styles to apply to a div element we only want them to apply to a p element well one way that we could do this is we Could come down to our CSS and write this funky syntax where we actually specify the class that we want to Target along with the tag so we're kind of um grouping them all together so what this is saying is I want to style only elements that are paragraph elements that also have this uh class so it's kind of

like an and statement and you come down here give it a color of blue we'll say and now we have selected only one of these as opposed to if we just Were to select the uh class and then give it a color blue it's going to apply to both of them so that's a kind of obnoxious way to solve this problem right here it's totally unnecessary but I just want to show you that there are other ways that you can do this and um I mainly would say if you're going down that route I would

use it on a caseby casee basis you don't need to go out trying to learn all the different ways because in the end the three main ways Tag class and ID are going to be totally sufficient uh for writing good web applications by this point hopefully you're at least somewhat comfortable with writing a CSS rule that targets a specific HTML element we also kind of talked about how you might Target multiple elements I'm going to write out a couple CSS properties that we have not covered yet so I wouldn't expect you to understand how they

work but just try to follow along um intuitively for the Moment and we'll get into them later so we've got this HTML right here where we have a div with a class of box one and then another div with a class of box two and what we want to do with this is we want to apply some styles that are going to be shared across these boxes and then some Styles which are going to be unique this is very similar to the example we looked at a little bit earlier where we have um two boxes

right here and some of the styles are the same so these are the Same sized boxes they both have borders but the borders and some of the text are going to be different between the two so how do we go about you know writing the least amount of code and achieving that same result here is going to be the most inefficient way to do it but it's still going to work okay so what we're going to do is we're going to Target box one by class and then we'll also come down and Target box number

two by class now at this point we can use some CSS Properties again we haven't learned all of these quite yet but maybe we want to give a border to both of them so I want to give box one a green border and then I want to come down and give box two a blue border so now we have borders around these elements and let's also add some padding to both of them so we'll give them 20 pixels of padding we'll talk about these units a little bit later in this crash course um and then

finally let's go ahead and write some Text in here we've got uh box box one and box two and I want to give these different colors so this box will have green text and this one is going to have blue text so far in this example everything's been a little bit different but let's say that we wanted to um make these the same width and height so let's say that we want box one to have a width of 200 pixels and then a height of 200 pixels and then we come down here with box two

and we give it a width of 200 Again and a height of 200 again so in this case we've got two boxes that have some different properties but some similar properties so one way that we can actually simplify our code a little bit and um share some properties is by this special CSS syntax where we just leave a comma between the two classes that we're trying to select or IDs or tags or whatever you're trying to select both at once so what this CSS rule is doing here um this box one and box two Is

it's saying I want to select both uh elements with a class of box one and elements with a class of box two so what we can do here is we can take these with and height properties and take them out of these individual Styles and go ahead and put them right here so we've basically eliminated two whole lines of code and we've followed the dry principle which is do not repeat yourself and that's a pretty important one that you're going to you know come Across as you develop you know bigger and bigger software as with

everything in code there's multiple ways to do this so we could write this rule right here where we're targeting two elements at once and applying um shared Styles now we can also achieve the same exact result by instead of targeting it in our CSS we can actually give multiple classes to a single element so instead of having just box one and box two maybe we have each of these have their own Classes but then they also have a shared class which is called box so instead of coming down into the CSS and targeting it like

this all we have to do is get rid of these and give them that shared class and now we're going to get the same exact result but in a slightly different way now honestly this is probably my preferred way of doing it it just is a little bit more straightforward and simple in my head but both of them are valid ways to you Know provide shared styles to your HTML all right for the most part I think we've covered a lot of the selector stuff with CSS but while we're here we do have to talk

about the pseudo selectors now we're not going to get into a whole lot of detail here because I don't think it's extremely important at this point but I do want to mention it I want to show you probably one of the most common ways of using something called a pseudo selector so let me get Rid of all this stuff here and paste in a simple button so you can see that we have a button right now and you know click it it doesn't do anything it's not styled nicely or anything like that but what we

can do with this button is we can apply something called I believe it's it's a pseudo class and that pseudo class will allow us to style this button differently based on different states of the button before we get into this there is a page on the documentation if you Just type in uh pseudo classes to the mdn documentation you can read up on it but let's go ahead and get back to this example and I'll show you exactly what this does so what we're going to do is first Target the button so maybe we want

to apply a couple styles to this button um again we haven't gone through the properties quite yet we're going to get there um but let's just say that we want to give a background color of Navy and then we want to give um uh we'll say Text color of white and you're going to see that we now have a slightly better looking button not really a really nice looking button so maybe we get rid of the border so that it looks a little bit cleaner and then add some padding in here all things we're going

to learn a little bit later in this course so now we've got a button that looks a little bit better um not great and what we want to do with this is we want to attach this hover pseudo class which basically Says I want to Target the button HTML element and when it is in its hover state so basically when I hover my mouse over it I want to apply these Styles so the first thing that I want to do is give it a different cursor so when you hover over this you'll see that the

curs cursor stays the same but I want it to be that little clicking cursor so all we need to do is come down and give it the cursor property and say we want it to be the pointer so now if we hover over this You'll see that the cursor changes to that hover pointer another thing we could do is we can change the opacity of this so maybe we want to give the background color uh 80% opacity so now we're going to get a different cursor and then it's also going to change color to kind

of indicate to the user that they can click this and it'll do something so that is all made possible by this hover sud sudo class and then if you were to go to the documentation There's all sorts of different pseudo classes um that you can use you know here are a couple of these um but we're not going to get into a whole lot of detail on that right now now the last thing I want to talk about while we're on the topic of CSS selectors is kind of differentiate between two that we've already talked

about so we've already seen these multiple selectors so let me go back um we've got this box example but let me let me bring This back to the multiple selectors where we have box one and box two being selected and let's go ahead and compare this to something like where we go with box one and then we pass in a P tag or something like that now these are they look very similar but they're very different in this case we're saying I want to Target box one and box two and then in the second rule

we're saying I want to Target any P element so the the actual selector that exist as a Descendant of the box one class element so they're very different try to keep those separate in your head as we go through this tutorial now that we've covered how to select HTML elements with CSS rules let's talk about this whole cascading concept so CSS stands for cascading Style sty sheets and what that term refers to is the concept of when you've got multiple Styles sheets which is possible and multiple CSS rules within those stylesheets that all Compete against

each other to style the same HTML element it's asking which one is going to win which one's going to take the most precedence and actually style the element before I start writing a bunch of things I want to show you a tool that we've actually looked at before um but we have not looked at yet with CSS so I know I've been working in Firefox previously we're in Google Chrome just cuz I've got this Google Slides up here um but we can do the same Thing we can inspect um elements with the dev tools and

when we come to the elements tab which is the first one that you're going to see in all browsers you can parse through the HTML and you know click through and drill down and figure out which HTML element that you want to look at and then in this right hand pane over here this is where all of the styles that are applying to that element are going to be housed and in many cases you're going to see multiple Styles so Let's go ahead and just click on one of these here so I don't know it

doesn't really matter um but what you're going to see on the right side is a bunch of styles and in some cases you're going to see that they're crossed out and what that basically means is that they have been um cancelled out by another stylesheet or uh CSS rule that takes more precedence over the one that was written so that's what you're going to be seeing all the time with your web Pages and I want to talk about how we determine which one takes that precedence let's throw some HTML on the page here one that

has plenty of things to select so we have a div with a paragraph element within it and the div has a class the paragraph element has a class and an ID so we've got plenty of ways that we can select this HTML element and we're going to do so so the first one pretty easy let's go ahead and just use a HTML tag selector and give it The color red now let's come down and select a class so we're going to select the P element by its class and we're going to give it a color

of blue so far we've changed what we're looking at here each time that we've written a rule let's come down and even a little bit more specific so let's uh select this by its ID by putting a hashtag and typing in the ID and then this time we're going to style it a color green so in the first case we Tried to style it red then we tried to style it blue and then finally green and as you can see within this document this last rule right here is currently winning it's it has the most

precedence and we're going to find out exactly why that's the case in just a a second but let's keep going there's actually multiple ways that we can you know select this single element and I'm actually going to paste them all in because I don't want to uh bore you and Waste your time by typing them all out but let's go ahead and paste all of the different ways that we can style this same uh paragraph element it's pretty pretty wild how many different ways that we can do this so we've got the three that we

wrote and then we've got all of these different ways that are all targeting that same element and the question is when we look at all of these how do we know which one is going to end up you know winning and which one's Going to apply now I'm sure the question that you're asking um is why would this ever happen why would you ever write 10 different rules that are going to style the same element well the answer to that is you probably would not but what could happen is you could have external style sheets

that are going to come into your project and they're going to have their opinions on how you know certain elements need to be styled and then you've got your own stylesheets um Locally within the project and those have styles so it's pretty common to see multiple stylesheets coming into a single web application and it's really important to understand you know which one's going to win so there are two ways that we can determine this or there's two factors in this equation uh so let's go ahead and just write this out two factors for determining CSS

precedence all right so the first way is going to or let's go ahead and make a an Ordered list because we're just practicing here so the first way is going to be uh the location of the CSS rule in the file and the second one is going to be the specificity of it so the specificity of the CSS Rule now we don't really understand either of these quite yet but the first one's pretty simple and the second one you'll catch on because we talked about it so much earlier in this lesson so let's start with

the location piece so location of The CSS rule in the file this is really what we're referring to when we say cascading stylesheets so if we came down here to the CSS and we targeted list items so these two list items right here is what we're targeting and we want to turn them a different color now I'm going to write this rule right here here and then I'm going to take the same exact CSS rule but just change the color to Blue and you'll see that it actually changes the color to Blue but it's not

Quite apparent why the bottom one is going to take precedence over the top one well that's just how CSS works you always read from the top to bottom and basically the way that I think about it is um the the CSS interpreter that's reading through and figuring out what to apply is going to just read read from the top and it's going to say okay I want to style all my list items uh with a text color of green and then it's going to say okay as long as I don't see Anything else in the

rest of this stylesheet or any other stylesheet that comes after it then that's going to be the style that I apply but if I do see something which I do hear then I'm going to replace that previous Style with the most recent one that I saw when I read it from top to bottom so that's what we're talking about when we say cascading style sheets and that's uh one way that we can determine precedence with CSS selectors now I know it seems a Little weird cuz when we worked with JavaScript you definitely cannot declare the

same variables and stuff like that so it seems a little odd that we could put the same exact CSS selector in one CSS stylesheet but this is totally valid that rule does not apply to CSS like it does JavaScript it's a totally different type of you know language that we're dealing with here so we know know that the last uh selector in the fil is always going to win unless we have a Selector that's higher up but has more specificity so that is the second piece of this equation and we're going to break this out

um real quick to see how it works so let's say that we have these list items right here and let's go ahead and add a class to both both of them so we'll just say list item something very generic here and we know that now that we have the class we can select it in two different ways so the question I have for you is If we try to select this with its tag so just use the LI tag to color the text and then we also added a rule that selected it by class which

one is going to win over and then furthermore does it matter which order we put them in in the file before I type this in just pause the video and see if you can kind of Reason through that uh for a second all right so let's try this out first we're going to select it by the tag and we're going to give it a color of green then We're going to select it by its class and we're going to give it a color of blue and you're going to see that it changes to Blue but

we don't quite know yet why this is the case because in the first rule that we talked about we said okay we read top to bottom and we're always going to take the last Rule and apply it so that would make sense here because list items the last rule in the file and it's got a color of blue so that's why it's styled that way well That's actually the wrong answer um the reason that it's styled blue is because the second rule is more specific than the first so if we were to take this and

put it before this other selector we're still going to see blue text because even though this is last in the file this first one is more specific so the question is how do we know what is more specific than another to figure this out we just need a little visual which says that um on a Continuum from the left to Right so least important to most important or in other words least specific to most specific we have tags then classes and then IDs so you might have picked this up by now but if we were

to put an ID so let's say list item number one and we try to style this um let's go ahead and put at the top of the file to make sure that we rule out this whole you know first to last uh stuff that applies and now we're going to select it by its ID and we're going to Give it a color of orange in this case you're going to see that this specific one um it's not applying to both because you can't assign an ID to two different uh HTML elements but when we're looking

at this first element we're selecting it uh one time right here another time right here and then a third time right here and this top one despite being at the top of the file is going to be the most specific because of this Continuum right here and therefore it's going to Be the one that wins out and applies the style to that HTML uh element if you're following along intently you're probably asking yet another question and that is what about these combinators that we talked about earlier in the video what happens if I get rid

of all these CSS rules and I come in here and let's say say that I select it by just its ID and I give it a color of green and then I also come in and I say I want to select um let's see I want to go ahead and look In all the ordered list and I want to Target all the list items that have an ID of list item number one so this is going to be the same exact element that we're selecting so it's going to be the first one right here but

let's go ahead and see if we can turn this a different color with this selector right here and we can and even if we take this and we put it at the top of the file we're still going to get the same result it's still going to be blue Because this rule right here is more specific than this one right here despite the fact that we're using the most specific selector according to this little Continuum so as you can see it gets a little bit uh tricky here when we start using combinators but there is

two ways that we can um identify pretty reliably which one's going to win out the first one is probably my favorite which is to just try it out and in this case it's really easy we're using Code Pen and we can just try it out and see what works but that's not going to give you a really good understanding of why it's working that way so there's another method that we can use where we can actually calculate with numbers the level of specificity of a CSS rule let me lay out this steps here um we'll

we'll go ahead and practice some HTML for a second so let's go after this first list item um actually the second list item because we're talking about Specificity and let's make another ordered list so the first step that we're going to do is we're going to count the number of ID selectors in the CSS rule so that's step number one then we're going to come down we're going to count the number of class selectors and then finally we'll count the number of tag selectors all right so if we're looking at these rules down here um

let's go ahead and apply this math and we'll First count the number of ID selectors in the CSS rule so both of these um have a single ID so they have one ID now if we go down to the next one count the number of class selectors they both have zero and then finally the number of tag select vectors the first one has one but the second one has zero so the way that this is going to work out we can write some uh CSS comments right here and I might as well just go right

above the actual rule so if we use this little Comment syntax which is a forward slash and a star and then a star and a forward slash to close it out and we can count this up so we'll say ID selectors this is going to be one we'll say class selectors it's going to be zero and then tag selectors will be one so if we add these together we get a number of1 if we do the same exact uh little math problem here let's copy it down to this next rule we can say that the

ID Selectors we have one we have zero class selectors and zero tag selectors so our number is going to be 100 so in this case the second rule has a specificity of 100 and this first one has a specificity of 101 which means it is one point or whatever you want to call it more specific and therefore it will be the one that applies to this element to really nail this concept I'm going to paste in some code so we don't have to type it all out and I'm just going to Walk you through uh

a few more calculations all right so we've got a little bit different HTML but all it is is a paragraph tag with a bunch of IDs and classes to give us flexibility on how we select them so in the CSS I've written several rules that are going to be at different levels of specificity and let's just walk through how each of them are calculated so our first example we have two classes so we get 0 2 0 and our total is 20 come down here we have Two IDs so this is going to be uh

actually should be oh no we're in the wrong spot here so we've got two IDs zero classes and zero tag selectors so our specificity is 200 come down to the next one we've got a tag and we've got an ID so we have 1 01 for 101 and then you get the point we just go down and do the same thing for the rest so the most specific one is the one with two ID selectors for a specificity of 200 and you can see that the color orange is What applies to this paragraph element in

the web page hopefully at this point it's making sense we know how to select things we know how to determine the uh order of Precedence but there are a few other little gotas that we need to walk through and one of those is going to be inline Styles so if we were to write a paragraph element with some text we can come down to the CSS and we can style it of course but we also have the option if we give it this style attribute which is Just an HTML attribute as we talked about in

a previous lesson we can pass in CSS style rules into this these little quotations so I can give it a color of blue and then maybe I can give it some padding of 10 pixels and we separate this by these semicolons and we can write as many rules as we want to now the interesting thing about these inline Styles is they take precedence over everything else so even if we were to come in here and let's say that we Give it an ID of you know paragraph or something like that so let's go ahead and

select our ID and let's give it a text color of orange you would think that because of this CSS importance diagram that this is going to be the most important Rule and the color is going to be orange but obviously it's not it's blue and that's because any inline style is going to take the utmost precedence over all Styles now there's one more thing that Even makes it a little bit more confusing and that is the important keyword so if we came down into this style right here here and we put a space an exclamation

mark and we typed important what that's going to do is it's going to override any style from any stylesheet and it's basically saying like this rule right here is very important and I don't want to look at any of the Precedence rules that we have defined within the CSS language so even Though we've got these inline Styles this is still going to apply and even if we came down here and changed this from an ID selector to a paragraph selector same deal we're still going to get this orange color because we've defined important on that

CSS property now we can use this important keyword on any property that we want I've been looking at the color property mainly just to stay consistent um and avoid confusion before we actually dive into all the Different properties but this can be applied to anything else so if you wanted to override the padding style in say 50px or something like that if we put put it in just like this not going to change anything but if we put an important at the end you're going to see that this text moves a lot because we've added

some padding so that's the whole deal with important but I would recommend that with both of these um types of selectors so the the inline Selectors and the important selectors um use them at a minimum in reality you almost never want to use these inline Styles because it just clutters up your HTML now I've of course used it all the time because it's very quick it's a great way to just quickly put a style on an element um and there's actually several CSS Frameworks that um do inline CSS only so you don't even have separate

style sheets you just all you write it all in the HTML document so it's kind of A contentious topic um among different camps but in general you probably want to stay away from these inline styles for now um just because it's going to clutter up your code likewise with the important style I think this is a more unanimous uh Viewpoint you should not be using this important keyword unless you absolutely have to and the only um example of this that I guess I've experienced that's a really good reason to use this important keyword is if

You've got multiple stylesheets so maybe you're using a CSS framework or a UI kit Library that's got a bunch of like buttons and modals and stuff like that those are going to have predefined CSS Styles and if you want to override them often you have to use the important keyword otherwise there's no other way to select them with enough specificity to override the existing Styles so once again use the important keyword only when you have to um pretty good rule of Thumb to stick with for the last hour or so or however long I've been

talking here we haven't really talked about CSS properties yet we've been using the color property uh among a couple others but there's hundreds of them that we can possibly use to both position the elements on the page and style them so remember CSS is all about layout and style and there's different properties that allow us to do those two different things so to start us off let's just see A super basic example something that you might uh have to do pretty often and that is let's go ahead and take a a div put some text

in it and then style that as a box with specific dimensions maybe a background color and a border or something like that so here's how I'd approach that with CSS so first you have to make the div then you have to put some text in there so some text and I guess what we want to do is first get that background on there so I'll just Select the div since there's only couple elements here and we'll give it a background color of I don't know we'll call it Navy we'll give the text color white we

want to give that div a width of say 200 pixels and a height of also 200 pixels so we've got us ourselves a square with some text in it but maybe we want to put that text in the middle of that square so we can do that that would be kind of a layout or a positioning uh Type property so one way we could do this pretty straightforward is going to be add a line height and set that equal to 200 pixels which is the same height as the square and then maybe we want to

just set the text alignment to Center so that's going to bring it to the middle of the square and then we can furthermore put on maybe a box Shadow something like that so let's just uh write something out really quickly and you'll see what happens is we get a Little Shadow uh showing on this box and then maybe we could even I don't know we could put a border on it or something so we could say border one pixel solid I don't know something like green it's not going to look great but you see that

we have maybe we can put five pixels instead of one to make it more visible and now you can see that we have a green border on there so this is just a super basic example but you can see how we use some style properties and we use some Positioning properties and this is actually not perfectly centered anymore and we'll talk about exactly why that's happening when we get into the concept of the Box model but let's get rid of this and as ask the question that you're probably wondering and that is how do we

know what CSS properties to actually use I just went through that example really quickly and I had these on the top of my head because I've just been doing it for a while but when I first started I would Have no idea how to do what I just did and have to look up every single property that I was using and furthermore I'd have to look up like if I wanted to do something I'd have to type into Google how do I Center a paragraph element within a div or something like that so it's really

difficult without experience to know what properties to use and when and there's really no great solution to that other than practicing and really um you Know just applying these Concepts that we're learning in this crash course in my opinion the best way to understand the Box model better is to just look at it interactively and a great tool to use to do this is the Firefox Dev tools so we've talked about this in Prior lessons um but we're coming back here and as you can see I've got this HTML document here in the browser and

then what I've done is I've selected the content element that I've Just made a single div and I've put some text in that div and what I've done is I've applied these five uh styles that are pretty directly related to The Box model to see how these play out you know on an actual web page so as you can see if we go to the layout section of the dev tools so we're up in inspector we go to layout and then we can scroll down to see the Box model and this gives us an incredibly

interactive way to see what each of these represent so if you go Through and you want to see how you know wide is the content and how tall is it you come into these little uh properties and you can hover over them and you see on the left side of the screen it gives you an outline of exactly what that is applying to furthermore we can see that we've got some padding in here and again it's highlighted up on the screen it gives you a really nice uh outline of where that padding sits furthermore we've

got a border it outlines that Really nicely for us and then even some margin on the outside now there are other tools that help you visualize this like in Google Chrome so if we came back to Google Chrome you can see that if we're just looking at a I don't know let's go ahead and just select one of these elements here then you can come down to the Box model and you can kind of see what's going on but in my opinion it's just not quite as good as Firefox so that's why we're working in

Firefox In the first place but tools aside what actually is the Box model well the Box model represents um these pieces that we're looking at but more specifically you have the content itself which is going to be you know text or just some space that we've defined by a width and a height and then outside of that content we then have some sort of padding or like it doesn't have to be set it could be zero padding but in this case I defined 20 pixels of padding and Then outside of that we have a border

and then outside of that we have a margin and within this box model uh I mentioned that it tells us how much space an HTML element represents within the web page and the properties that um play into that are going to be the width the height the padding and the border now the margin's a little bit different because while it does take up space it doesn't actually Define the space taken up by that individual element it kind of Adds like some space around the element um so that if you have two elements and they're squished

together you can just kind of space them out a little bit so those are the components of the Box model let's go ahead and dive in with some um I actually made a code pen that's going to allow us to interactively play around with this box model so on my screen I've got a code pen that's I've got some JavaScript written up in here you can drop down These uh select uh elements and select different CSS properties to apply to this Orange um paragraph tag up here and why I created this is because when we're

talking about the Box model sure we can get into width height padding border margin all that kind of stuff but what's really confusing about the Box model and CSS in general is that based on the values that you're passing to certain properties the rules of the game completely change and to highlight some Of those rules um I thought it would be helpful to put together this example and just visually walk you through like if we switch a certain CSS property what is that going to do to our HTML element that we're targeting the first property

that I want to really touch on and and dig into is the display property so this is a related property to the Box model and once again the Box model is not just one thing um but this is highly related to what we're talking about here and if We scroll down to our um documentation I've just gone to mdn Technologies CSS the reference and scroll down to the index and we can find the display property somewhere in in here so let's scroll down see if we can find it uh here's the d section and we'll

go ahead and click display so it says this property sets whether an element is treated as a block or inline element in the layout used for its children such as flow layout Grid or Flex so there is a Lot packed into this single property and honestly it's probably the most um probably the most complex property that you'll deal with uh when you're writing CSS but we're going to dig into into each uh piece of it and you're not going to have to read all this documentation I'm just going to walk you through it so you

can see that there's a couple of or there's there's a lot of different things that you can pass to this property um but the main ones are going To be block inline inline block flex and grid so if we came back to our Box model example if we came down to the display type right here and did the dropdown you can see that we have all of these different uh possible values excluding flex and grid and the reason we're excluding those is because flexbox and CSS grid are going to be totally separate videos um that

are going to require a lot more explanation so for now forget about those we're just going To focus on these ones right here so by default whenever you're dealing with most HTML elements you're going to have a display property of block but at this point doesn't mean anything to us like what does block mean what does inline mean since flexbox and CSS grid are kind of out of the equation here we're just focusing on block inline and inline block display types and based on what you set your elements they're going to interact with the page

and flow through The web page a lot differently so it kind of changes the rules of the game now by default each element is going to have a certain type of display now most elements are going to have a display type of block and you can see in this example that the default display type of a p element is block but if you were to look at another type of element so if you come up to the HTML that we've got here it's a little bit messy but this span element which is represented by This

green text that's actually going to be by default an inline element so the question is how do we know which elements are going to be by default a block and which which ones are going to be by default inline and then furthermore what do they actually do what what's the difference between a block and inline element to understand this um we've got this example laid out so watch what happens when I switch a block element to an inline element so I'll drop this down I'll say inline and you'll see that that orange um div is

going to jump up to the line before it and it's going to share that same space with the span element now that's the behavior of an inline HTML element so what you'll see here is that since a div element has a natural display type of block what it's going to do is occupy 100% of its container space and in this case the container is 100% of the body HTML tag so it's occupying all of that Space and furthermore the height if we don't give it a height specify it explicitly it's going to automatically take up

the height of of the content within it so however large this text is is how big of a height this element is going to occupy the second thing about block elements is that these elements occupy their own space they don't share lines with other elements so as you can see here our div in Orange with the orange background occupying all the Space and it's also on a different line than this green um span element that's right above it and the span element actually has a default value of inline rather than block so different rules up

there but since this one is a block then no other element can occupy the same space as it the next thing about a block element is that it respects its width and height properties so that doesn't make a whole lot of sense yet but you will see what I'm talking about in just A second so what I'm going to do is I'm going to drop down the content width and this is just going to apply a 400 pixel width to the orange element so you can see that it no longer takes the entire width of

its container because we've explicitly given it a width and then furthermore we can give it a height of 200 PX or pixels so now it's occupying a space of 400 by 200 so what happens if I were to do the same thing with an inline element let's go ahead and see so I'm Going to reset all of the properties so we're going back to the beginning and now what I'm going to do is come down here and set set our div to be a display type of inline and you can see when I click that

it comes up onto the previous line because inline elements actually can share space they don't break to a new line by default you'll also notice that they don't occupy all of the space they just occupy the size of the content within them so it's just occupying the Text that's within this div because we've set it to that display type of inline now the last interesting thing is that unlike a block element that obeys um or adheres to its width and height properties the inline element is not going to so even if we set the content

with to 400 pixels not going to change at all we can also try that with the height set it to 200 pixels not going to work so in other words if you set it to inline with and height CSS properties Are not going to work on it so as you can see depending on you know one proper properties value you have different rules of CSS which can get pretty confusing sometimes and it's why I'm spending so much time on it here now the last one that we have not talked about is a combination between the

two so just a review a block element it's going to take all the space of its container it's going to take a height of the content within it and it's going to break to a New line and respect its width and height properties an inline element is going to just be the width and height of the content within it it's not going to break to a new line and um it's also not going to respect the width and height properties if you try to set them now an inline block kind of adopts a couple attributes

of both so the the main difference if we were to switch this inline to inline block then the only difference is now it's going to respect Its width and height properties right now we don't have those or I guess we do have those set we have tried to set the content with in the content height but because we have an inline element right now it's not respecting that those Dimensions but the second we change this to inline block we're going to get those width and height properties back just like we saw with the block but

in this case we can still make it in line so although it's broken to a new line here That just happens to be the case because it's too large to fit on that line above so inline block just basically takes all the properties of inline but instead of ignoring width and height it now respects those properties and takes that space up this concept may not seem super important to you right now but I promise you as you go through um knowing whether you're dealing with a block element or inline or inline block is going to

be super important and then further down The road when we start talking about flexbox and CSS grid it becomes even more important to understand this kind of stuff let's go ahead and reset everything here and the next thing that we need to talk about are box model variations so to this point we just looked at the Firefox Dev tools and you can visualize the Box model pretty well but there's actually another way of you know conceptualizing this box model and using it just like the display property And all other CSS properties have their default values

um the box type down here is going to have a default value of content box so that's what we're seeing right here but we can switch this to be something called border box which is basically going to change um how all of those properties so width height padding border and margin it's going to change how those relate to each other within the Box model to understand this let's go back to our Firefox uh Dev tools and Let's go ahead and calculate the total size or space that this particular element is taking up so the way

that we would do this is by adding things together because the default box type is content box so basically what we have to do is if if we wanted to find the total height of this element over here we could of course just hover over it and we can see exactly you know what the height is but if we wanted to calculate this we just come down into the Box Model and we say okay what is the height of the content well the height of the content is going to be 100 pixels so we say

100 and then we add on whatever the padding is on both sides so we add the top padding and the bottom padding which on both sides is going to be 20 pixels so we go 20 + 20 is 40 plus the content height of 100 is 140 and then on top of that we add the Border Dimensions which is going to be five pixels on the top and the bottom so in total the total Height or space and height that this occupies on the web page is going to be 100 + 20 + 20 +

5 + 5 so that equals I guess 140 150 in total and then the margin the additional 20 and 20 or 40 pixels that's not actually going to play into the Box model that's kind of separate from it it doesn't actually indicate how the total height of this element so let's go ahead and see if we can hover over this and you'll see that if we hover over the entire element it's Showing in pretty small text that the height is 150 just like we calculated so again 100 + 20 25 and five is our total

height and then likewise we can do that with the width so we grab our content width which is 400 we add both of the paddings on the left and the right which is 40 so we got 440 and then we add the uh border which is 5 and five so we got 440 + 10 is 450 and that's that's when we hover over it is what the uh width is going to be so that calculation that we Did seems awfully complicated and it kind of is because we're having to add all these different components and

consider okay what's the left padding what's the right padding what's the left and right border you know it would be a lot easier if we could just Define I want this element to be 400 pixels wide and 200 high and be done with it and then have all the rest of the padding and border and stuff just be within it and that is what the Border box uh value Of the box type property allows us to do so all we have to do is come to the styles of the element and then we say box

type and we say we want border box now if we apply that um it's not going to work because let me see why um invalid property name oh I'm must be blanking on what we're actually using here let me let me see what we're talking about here here so box type so I was totally blanking out it's not it's not box type it is box sizing uh that Box type is just what I named it in our code pen but if you say box sizing equals border box you'll see that this changes just a little

bit so let me go ahead and uncheck this and watch the content up in the left top left you'll see that something is going on here and it's really hard to tell what that something is when we just have one element on on the page but what I've done is put together another code pen that really helps us visualize the Difference between the Border box and the content box now stick with me here because I know it seems a little bit boring and why would we need to worry about box sizing but when we start

making grids and we start you know putting elements within other elements it's going to become really important to know you know how much width do we need to give to Children element to fit within the parent containers so on and so forth so let's go ahead and dig into That example that I created and you'll see exactly what I mean so as I mentioned when we flip that box sizing from uh content box to border box it basically takes the calculation of the space that that HTML is occupying and it changes it so now instead

of taking the content height plus the padding plus the border to get our total height we just look at the height property and that is our total height and it's a lot easier to kind of reconcile in our brains and Furthermore it makes it a lot easier to put elements within other elements so as you see on the screen here um what we're looking at is a couple of divs and I've got a child div and a parent div and what I'm trying to do is I'm trying to fit the child div within the parent

and not have it break out of its space and if you see on the right right side where we've got the output of this you can see that the content box we've got the parent container which has just a that's Just a picture background that's not CSS um but that's the space that it's occupying and you can see that the child with that border on it because border you know has um an impact on the total size of a Content box you can see that by adding that border we're breaking out of that parent container

and that's really going to be a problem when we're trying to arrange elements on the page so furthermore if we were to add padding to this so um basically what this button Is going to do when we click it is it's going to take the child element which is the one with the border on it and it's going to add some padding to it so when we click this you'll see that it makes it break out of our parent container even more and that's because when we add padding or a border to something that has

a sizing of content box it's going to add space to that element it's it's always going to be additive now when we come down to a border box type element It's not going to so what's going to happen is the the content width and height is going to be adjusted based on how much border and padding there is so you can see from the start we're already fitting the child element which is uh got the black border right on top of the parent container and if we add some padding instead of getting larger it's just

going to make the content within it a little bit smaller so let's toggle the padding and you'll see that this text Right here is going to come inwards a little bit but we're not going to see the the Border break out of that parent container so I understand this is a little bit confusing especially if you're just starting out in CSS but I really wanted to introduce this concept because you will stumble on this down the road and you'll probably see like I said something like a CSS reset so let me let me go ahead

and grab that code that I'm talking about and show you Exactly what I mean often times you'll see in a CSS uh stylesheet the following thing and this is going to change the stuff over on the right a little bit but that's not the point what you'll see is that on the HTML element or the root element they're going to change the Box sizing to border box so it's going to take the root style and make it you know this nice little handy border box where you know the width is the width and the height

is the height and there's no math Going on there and then these next couple of rules um similar to what we talked about where if you put a comma there it will select multiple you know classes or IDs or tags or whatever that's what these are doing and this is a wild card character that's basically saying I want to Target every element in this entire document and and then what it's doing is it's saying I want to set the Box sizing property to inherit which is basically basically going to look up And say okay what

is the root element set to whatever that's set to inherit that down to all of the different elements on this web page so in effect what we call this is a CSS reset and it's going to uh change the default box sizing to this more um easy to understand border box you know box sizing all right I know we've covered a lot we've come a long way in this crash course so far we are not done yet but I want to do a quick little review on a Few things so we've learned about how do

we select things um how do we select HTML elements we've learned about what takes precedence when we have multiple CSS rules and we've learned about the Box model and what I want to review here is the Box model just go through a few things that you should keep on the top of your mind so first off the Box model describes how much space an HTML element occupies the space is heavily influenced by that box sizing property that we just Talked about whether that's content box or border box so content box you have to add the

content width and height to the padding in the Border well with the Border box you just take the width and the height and that is the total space that your HTML element occupies so the space is also or space and layout is also heavily influenced by the display property so whether we have a block element an inline element or an inline block element is going to Influence where those elements are sitting on the page so those two properties box sizing and display are going to really play together um deciding how our web page is laid

out and furthermore that display property has two additional um values that we have not talked about but will so flexbox and CSS grid which is going to allow us to make grids and it's going to allow us to space elements out really well so that's going to be super useful To us in the future and finally the most important components of the Box model are height width padding border and margin margin doesn't play into the total space it occupies but it does control the space around it and then finally all other CSS properties are going

to be kind of supplemental to these Core Concepts so whether we're styling the text color or we're doing a back ground image or making a different font those are all going to be just kind Of supplementary to these Core Concepts what I would recommend is that you come to this uh little example that I put together um it's in the description and just click through all of these uh attributes and or not attributes but CSS properties and see what happens with different combination so change the display type to inline and then try to set you

know different different margins and paddings and stuff like that and you'll see like okay the margin doesn't Really do anything when it's in line but the padding does and then if we set this to block and then change the margin then it is going to do something aside from the display property and the Box sizing and a couple other things we just talked about there's one other CSS property that you'll use pretty often and it will affect the flow of the elements on the page and that's going to be the position property so this position

property has Um I think about four or five different possibilities so let's go ahead and write those out um we need to make an unordered list and then put some list items in let me get my notes here so we can have a value of static we can have a value of absolute we can have a value of relative and then we can have fixed and the last one is going to be sticky so when I'm talking about this uh position property all I'm saying is that if we Came down and targeted this unordered list

and then we gave it a position we can say we want it to be fixed but what does this actually mean well this position property is going to be really handy when we have to uh lay out things on the page and like make things like nav bars so that's what I'm going to go ahead and show show you is an example of how we might make a nav bar and show how that will stay at the top of the page rather than scrolling down when we have Content that exceeds the total height of the

viewport or the web page that we're looking at a few notes I want to make um this first one the static is going to be the default value so if we came down here and defined uh the position of this unordered list to be static that's kind of redundant because it's already going to that by default and then the other note I want to make is uh the sticky property uh value is going to be a little bit newer it's unsupported in Some browsers and I'm not really going to touch on it because we can

achieve very similar things with this fixed property all right so those are the possible values let's walk through each of them and see what they actually do for our HTML so the first thing I want to do is create a nav element so we talked about semantic HTML in the prior lesson how we want to use what the intent of that element is and if we want to make a nav Bar we should use the nav uh HTML tag so within that nav we can make some sort of list which would be kind of a

list of different links or something but just to keep it simple I'm just going to put in some sort of heading so we'll just put in an H2 element and we'll say this is the navbar so you're going to see that pop up on the page and it's nothing special at the moment and actually let's go ahead let's make this an H4 just to be a Little bit smaller and what we want to do in the CSS is we want to Target that nav element we want to give it a background color of blue we're

going to talk about those background styling properties so bear with me uh here well we don't know about them and then I want to make the height of this equal to we'll call it 60 pixels so you can see we have some sort of nav bar sitting up on the page and I actually don't like this blue let's go ahead and do Navy and Then change the color of the text to White just to make it look a little bit better and what you'll see is there's some space going on around this we would you

know ideally want this to be at the top of the page you know have no white space around it and that's happening for two reasons by default this H4 element is going to have some sort of margin around it it's just a browser default that um is set on this element we didn't set it but it's already there likewise Code pen has a default that puts some either margin or padding um within the body element so anything that we write in this HTML is going to have a little bit of padding in there so that

you know we have this white space so all we have to do is just cancel that out by writing a CSS rule so we'll start with H4 and we'll just say we want zero margin on there see what that does remove some of the margin and then we want to come down and say on the body we want to have zero Margin I don't yeah I guess that's all we needed we just need to zero out the margin and now there's no space around this so looking good there and if we wanted to Center this

text within the navbar we can use a little trick um we can use the line height property to basically say Okay I want this text to be you know x amount of pixels tall and in this case we know exactly how tall the Navar is 60 pixels so what we need to do with this H4 is make the line Height equal to 60 pixels and now we're going to see that go right in the middle and the last thing we'll do is on the uh left side of that H4 element let's just put some padding

on the left of say 10 pixels and that's going to push it out a little bit so I know we haven't talked about a lot of these properties we will in a second but you can see how this is uh this nav bar is coming together but the problem is right now if we were to scroll down on this page the Navar is Going to kind of go away and we don't want that since there's no other elements when I scroll you're not going to see anything so let's go ahead and add a div that

has a bunch of uh boxes in here so we'll say we want to div with a class of box and then let's replicate that several times down and then we'll come down here and style all the uh classes of box and what we're going to do is we're going to give it a width of 200 pixels and a height of 200 Pixels and let's go ahead and give it a background color of uh I don't know Green is fine for now you're going to see just big one Big Blob because they're all kind of smoos

together um but all we have to do is add some margin around it and those are going to be separated out so the reason that I created those is just to give us more than enough content so that we can actually see some scrolling action so now you'll see the scroll bar here on The right because we've got too much content for the visible screen and when we scroll down what happens we're not going to see that Navar anymore and as you're probably used to with most sites the Navar needs to stay up top and

the way that we do that is by using the position property and we can just come into the uh Navar right here and we can say that we want the position to be fixed and what that's going to do is a lot of things that we don't expect and It's going to look a little bit intimidating for a second until we figure out exactly what's going on so when we put it to fix it actually takes that element out of the the flow of the the HTML document so previously we talked about how we have

block elements and inline elements and if we change those you know it kind of breaks them out of the flow of the content likewise with the position fixed property now what's going to happen is we have to uh Explicitly set the width of this so let's go ahead and set the width to be 100% of its container and that should span it across the entire uh web page here another way that we could do that is a property called 100 viewport wi so VW and that is actually the same thing if we just came over

to let's come over to our Dev Tools in Firefox and if you remember we could say window. inner height and get some sort of value here and this means that the height of the Visible window here is 966 pixels we can also get the inner width right here which is 773 and if we were to you know change this right here and run it again it's going to be a different value because the visible width of this uh viewport changed so these properties we know how to get them in JavaScript through the Dom but we

can also get them within CSS by using either 100 viewport WID or 100 viewport height so VH so that is just a Really useful um thing to know I use it all the time especially when I'm making full page layouts and nav barss and stuff like that now the last thing about a position fixed element is that you have to specify uh the offset that you have to its parent container now in this case the parent container of our nav is going to be the body element and that's going to be basically this visible screen

right here so all we have to do is come down and say from the top I want It to be zero pixels and that's going to pull it up to the top and then since we have it as 100% or 100% width we don't really need to Define this other one but let's go ahead and say we want it to be zero pixels from the left so at this point what we can see is that as we scroll down our navbar stays at the top and it's considered fixed positioning the last thing that we would

probably want to do is address this issue right here our boxes or our main content has Now spilled under our fixed Navar and the reason is because this fixed Navar doesn't take up any space so unlike a block element or even an inline element that takes up some sort of space to the HTML document this navbar occupies zero space whatsoever so to make sure that the main content is below it at all times we have to give a margin on the top of this um Box's div class so we come down to the CSS give

it uh Target that class and then we say we want to Give the mar margin top probably should be um a little more than 60 pixels so let's just go ahead and say 80 pixels and that should bring all of our boxes down and now it's working just fine so that is the fixed positioning and it's going to be really useful when you're trying to make a nav bar at the top even at the side on the right side or even a footer at the bottom of the page that's a really good use case for

this the last couple position uh property values we Can use so absolute and relative positioning um again we're not talking about static because that's the default and sticky because that's kind of out of the scope here but when we're talking about um a fixed positioning what we just looked at that's going to set the element it's going to remove it from the flow of the document and take up zero space and it's going to be positioned relative to the viewport which is always going to be the edges of the browser Window so as you saw

we said we want it to be zero pixels from the top so at the very top of the viewport and zero pixels from the left so the very left of the viewport now with relative and absolute positioning it's somewhat similar we're still pulling things out of the flow or at least with absolute positioning we're pulling them out of the flow of the document but we're positioning them relative to other elements so let's play around with relative positioning first So let me Target this first box right here and what I want to do is I want

to give it another class called real position just to give it some indication of what it's doing and then within this I want to make another div and I want to say this will be absolute position we're not going to do anything quite yet with that but I'll show you what it does in just a second so let's focus in on this relatively positioned box which is this first green Box that we're targeting we'll come down into our CSS and all we're going to do is give this relative position class a relative position and what

you're going to see here is nothing has happened yet but what happens when we scroll is now this first box goes on top of our Navar so only the first box though the rest of them go behind it and that is a direct result of setting that relative positioning on the element because what that does like I said with a lot of CSS Properties setting one value will kind of change the rules of the game it's no different here what this does is enables a new property called zindex which basically says okay we've got all

these elements on the page what is the Z index you know three-dimensional rather than two-dimensional so which one sits on top of another and when you put relative positioning or absolute positioning on an element it now has the Z index so now what we have to do is Define um what Needs to be on top of another so we need to come up to the Navar and give it a zindex of one to put it on top of this uh element once again so that's something really important to know about the relative positioning but what

relative positioning really does is it um as you saw it didn't really change the actual position of that box but now what we can do is Define find these um top left right and bottom properties um on this element and it will change its Position relative to itself so that's kind of a a confusing topic but basically the way you can think of it is if that green box is sitting right there right now if we give it a Top Value and we say 20 pixels it's going to go down 20 pixels and confusingly enough

um since our I believe our margin was 20 pixels exactly it's going to blend it into the other boxes so let's let's go ahead and make this 10 so that we see some separation Still but it basically takes the original position and if we add the top property it will go 10 pixels below where it was to begin with so it's a little bit confusing but it is a useful uh type of positioning um especially when you have some stubborn elements in your HTML that you just need to get to move just a little bit

but you can't quite do it with uh normal CSS properties and finally if you set the re uh the position to relative on a parent Element then you can set absolute positioning on the element within that parent element so what we can do is we can look at this div that we put within the relatively positioned div and we can take this class and Target it with our CSS so we'll Target the absolutely positioned element which is not showing up yet but let's go ahead and give it a width of 20 pixels and a height

of 20 pixels and give it a background color of say orange so we're going to have all Sorts of nasty colors here on the screen and what you'll see is that by default it's going to sit up there in the top left corner of its parent and that's because we haven't positioned it yet so let's give it the absolute positioning and what that's going to do is now we have those top uh bottom right and left offsets enabled on this specific element but instead of being an offset based on the viewport so with this fixed

Navar whatever we pass to those uh properties Is going to be in relation to the the edges of your viewport now we're going to be setting uh these top right bottom left offsets based on the position of the next highest element that has relative or absolute positioning and if there's nothing above it that has those positionings then it's going to use the HTML element or the root element so in this case we have something that is relatively positioned as the direct parent which is this green Box so if we were to come down to the

absolute position and say we want to put it 20 pixels from the top it's just moving it down 20 pixels relative to the edges of this parent container and then we can put it uh I don't know we can say from the right we want it to be 30 pixels so it's going to pull it over to the right and offset it 30 pixels off of that right Edge so that's what the absolute positioning does and it has to be used in relation with that relative Positioning once again if you don't have an ele a

parent element that is Rel ATIV L positioned so let's go ahead and remove this uh position relative and now it completely disappears and you probably are asking yourself where did this just go and the answer is it's I'm thinking it's probably behind the Navar so let's go ahead and give it a zindex of two which is greater than the Navar which has an index of one and now you can see it pop up up here in the nav bar And the reason it's up there is because since we don't have any relatively positioned elements as

its parent or you know grandparent it's positioning itself relative to the viewport just like we saw with the fixed positioning so now what we can say if we look at this absolutely positioned element if we change the top to be zero and the right to be also zero it's going to be perfectly up in the top right corner as you can see here in the screen as you Can see these position properties can really help you control where the elements sit on the page um and they're really powerful layout properties obviously you're not going to

be a master of them after just watching this brief tutorial or demo but hopefully it exposed you to what's possible and when you stumble upon it in the future or in the code challenges you'll know exactly what's going on if I'm being honest we've made it through the hardest part Of CSS in the first part of this course the remainder of this video in this crash course is going to be a little bit more fun a little bit more straightforward and you're going to really start to see the magic of CSS coming into play so

in the remainder we're going to talk a little bit about CSS units so we've looked at them already but uh pixels em REM units uh percentages maybe a couple others actually that's probably it and then We're also going to look at color codes and um different color stylings so we've been using the color property to change the text color throughout this tutorial but we're going to get into you know how do we Define different colors and you know how do we do color themes and stuff like that and then we'll dig into font properties so

how do we change the font that's on the page and different font families and import fonts and stuff like that and then finally we will talk about Background properties so how do we make an image as the background of your web page um and then at the end I'm going to talk about uh writing shorthand CSS so that's going to bring a few things together that um you may catch on to as we write it but that'll be pretty interesting and then um to cap it off I'm going to give you my kind of four-step

system of how I think through um putting together HTML and then styling that with CSS effectively so It's basically like get the layout first then put the you know styles on and you know iterate over that process before we get into the remainder of the CSS properties some common ones you'll use we have to talk about measurement units within CSS so you can see them on the screen here uh pixels pretty straightforward and common em and REM those are font units uh like measuring how large the font on the screen is and then percentages that's

going to really Play into some responsive design that we'll talk about in a later video so we'll start with pixels and it's you probably already looked it up seen me using it um It's relatively intuitive but your computer screen is made up of pixels and the higher resolution your computer screen is the more pixels you can cram into it so there's it gets into a pretty complex discussion when you actually start thinking about it too much um when you're looking at a web Page and trying to calculate how many pixels exist on that web page

but if you just look at it as a way to explicit set the dimensions of HTML elements it's pretty simple so for example you saw that we made this little Orange Box in the top right corner we set it equal to a width and height of 20 pixels so that's obviously somewhat small and something that I wondered when I was first starting out is how do I get a good grasp of how many pixels to assign To certain types of elements and it's kind of like riding a bike like as you go through and write

more and more CSS you'll get a feel for what are kind of the average pixel units that you'll be assigning to different types of things so for example I know that whenever I set padding or margin it's usually going to be in the range of 10 to 20 pixels um when I set a border radius it's going to be in the range of four to 7 pixels and so on and so forth you kind of get a Feel for how large um a pixel is after you've written CSS for a while next up I'm going

to skip down away from those font uh units so talking about em and REM I'm going to skip those for a second and talk about percentages now percentages are kind of the preferred way in a lot of cases to define the width and height of certain elements on the page because when you go from a desktop to a mobile device you're going to need relative dimensions rather than Just saying oh I want this element to be 500 pixels so a good example of this let me just take what I've got here on the screen um

and I'll go ahead and restyle this first box so it's the relatively positioned box um I'll leave it how it is and I'm just going to say that I want the width to be 600 pixels and what it's going to do is it's going to be wider now and the problem here is that when I resize this screen and we go to a mobile device it's going to get cut off so as I Make this smaller and smaller you're going to see that that box just goes off the screen completely and the problem with that

is you know you want to have responsive designs so a better way to do this is to say I want the width to be I don't know we'll call it 80% of the container so as we resize this you're going to see that that always stays 80% of the container that it's within and that's a great way to write response responsive web pages and Again we're going to be talking a lot more about that responsive design in a separate video but that's why percentages matter in the first place now something about percentages that can get

a little bit confusing is it's all relative to its container so let's go ahead and apply a few Concepts we've learned so the question is how do we get this little orange box back in the green box so that we can play around with this well all we have to do is set the Position back to relative so this Orange Box is going to now be relative to the green box so when I uncomment this property right here it's going to put this Orange Box in the top right corner of the green box so at

least I think that's what's going to happen and that's exactly what happened so we now have that there and now what I'm going to do is go ahead and reposition this so instead of being in the top right we're going to put it in the top left so we'll Put it in the top left and now what we're going to to do is give it a width in terms of percentages rather than pixels so what happens if I give it a width of 100% well now it spans the entire width of its parent element not

the entire web page because it exist within that parent element so it's going to occupy the width of the parent element in other words if we were to set um I'm just going to do this to make the math a little bit more simple but let's Go ahead and set this green box equal to say 500 uh pixels so the calculation for this orange element is going to be 500 pixels * 100% is equal to 500 pixels and if we were to change this positioning to call it 80% now it's going to be 80% of

500 which is I guess 4 400 pixels yeah about 400 pixels is what this is now so you can see it's relative to its container not relative to the entire web page when we Define percentages we've talked about pixels and percentages now Let's talk about em and REM units so these are specific to font sizes and we haven't really talked about fonts yet but we have looked at text on the screen so why don't I go ahead and put some text within our absolutely positioned div so now we've got some text here and we can

change the size of that text using the font size property we'll talk about that a little bit later but if we came down into our absolutely positioned element and we give it a font Size we can say it can be 16 pixels which is generally the standard font size of a paragraph element so you won't see it change because that's probably the default that it already is but if we went and changed that to say 18 pixels you'll see that the text gets a little bit larger now when we're talking about em and REM units

that's kind of the more preferred way to define text sizes within a web page and the reason being is if you're Going around hunting and pecking for you know trying to find all of the different CSS rules that you've defined font sizes in it gets pretty difficult you want to Define it at one level so at the top level of the document and then everything else needs to be relative to that assignment so what you'll generally see with font sizes is you'll see um the HTML element so if we target the root element itself and

we give it a font size you'll Generally see it be set to about 16 pixels from there you will then Define elements below that root element in relation to that uh 16 pixels so if I came down to the absolute positioned element so this text right here and I said that I want the font size to be one REM that means that it's going to be 100% of the size of the text in the root element or REM so in this case the root element is HTML and the font size is 16 so if we

Define it as one REM then that Means that we're doing 100% of 16 pixels or in other words 16 pixels and if we changed this to say 1.2 Ram that would be 120% of 16 pixels which I don't think I can do that in my head right now so um you figure that out with the calculator on your own but basically it makes it larger than the default font size likewise we can also use em units and that basically means relative to its parent element so if we have this Relatively positioned element which is the

green box right here and we set the font size right here to 16 or no we'll go ahead and say something a lot larger so that we can distinguish this so the relatively positioned element is going to have a font size of 24 pixels and then if we came down and we said we want 1 em in the child element it's going to set it exactly equal to this 24 pixels but if we change this back to REM units Now it's going to go back to the pixels because now it's relative to the HTML declaration

which at the top is a font size of 16 pixels so as you can see the benefit of doing this and using these em and REM units is you can Define it one time and then everything else is relative to that so let's say that you have your web app and you originally Define it to 14 pixels and then you start using the app and your users start complaining oh everything's too small Instead of going and changing every CSS rule all you have to do is go up to the root element change that and then

everything else is relative to that so that would be the benefit of using em and REM units speaking of fonts um let's go ahead and see how we can set custom fonts on our HTML so I'm going to get rid of all this because all these colors are driving me nuts um they're just so ugly I can't can't deal with them anymore so let's get a clean slate so Let's go ahead and put a heading element and some paragraph text and then maybe one more um we'll call this the original style text and what we'll

do here is this will be the original ID and what we're going to style this as is we'll we'll put these two as a new font style and then we'll keep this one as the original just as a reference point when we're dealing with fonts and my head at least there's about Four properties that are highly relevant that you have to know the first font property that we're dealing with is the font family which is going to Define what all of the text on your web page in your web app what that's going to inherit

and especially if you define it on the body or even the HTML so the the whole docu doent you can Define the font family and that's going to apply to everything within the document unless something is of course overwritten with A font family on a you know more specific element but let's go to the documentation I just searched for the font family property uh you could also go to technology CSS reference come down to the index and then somewhere in the F here we can find the font family looks like it might be at the

very bottom though okay so here is the font family so that's how you get there and as you can see we are giving two values to this or You don't have to but in most cases you're going to give two values to this the first one is going to be the font family that you're wanting to specify and there's a bunch of built-in font families that you can use um let me just see what we can find default font families there's probably a resource um I think this is the one I clicked on before so

w3.org it looks like this defines a lot of those default families that are Available in all your browsers so this first one is going to represent the family and then the second one or the second argument we we'll call it to this property is going to be the fallback font so there's only a couple of valid fallback fonts and they're literally just like the type of font so everyone knows like a serif and a Sans serif font and then like there's a monospace font which is more like a typewriter type thing um so Those will

be fallbacks for if the browser doesn't support the first one that you define but let's just go ahead and looking at an example in most cases you're just going to put them in quotes that first one because it'll be two words so let's copy this one in that's a good example um so we'll put that in there and you'll see how this changes and I can comment it out you'll see it change and then uncomment it and you'll see the change of this font now the Question is what happens if we want something more custom

what if we want like a really nice looking professional font well there's a couple ways that you can do this in CSS and a couple of them I'm not going to walk through but the easiest way is to go to Google fonts so let's open up Google fonts and go here and then from from this page we can search through all different categories of fonts so let's say that we want only Sarah fonts and then we can go down to Oh I guess different languages that they're available in and uh different font properties so let's

scroll down and just pick something um see if I can find one that might be a little bit popular I believe you can sort by trending or most popular so maybe we look at robo robotto slab all right so that's a good one and from here you just go down to all of these different font weights and styles and you click select this style so in this in pretty much every case You're going to select the regular um so we'll click select that Style and what you'll notice is that um in this link that we're

going to use in just a second um it looks like it's just pulling in a default link but the second we add in a different weight so let's say that we want the boldest version of this font and we click select style now you're going to see that there's this little parameter in here that defines that we want the weight of 400 and 900 and each Additional weight that you add is going to add a little bit more um size to this import so you have to be careful with that but for the most part

grab a couple and you should be good so in this case we have a regular font and we have a very bold font and all we have to do is take this link tag which is a valid HTML tag that we had talked about earlier and that's actually how you import stylesheets uh to an HTML document and we'll come back to our code pen Playground and come up to settings um I believe HTML and then in this uh section here stuff for the head we can just paste B in those link tags and now those

fonts have been imported into our document and we can access them with CSS now this is a little bit different than how you would do it if you were writing outside of the code pen environment so just for a second I'm going to comment out all of this HTML and show you exactly how you would do this um on your own so you're going to need an HTML a body and then of course the head so this is our basic structure of an HTML document and then you'll of course have a link um to your

styles.css or something like that um so this will rep be representing your stylesheet um not here but in a different document it would and then you can also copy in those link tags that uh we imported from Google fonts so this is how you would basically import a font to a custom HTML document that's outside of this you know nicely programmed code pen environment so anyways let's get rid of that we don't need that um we'll uncomment or not uncomment okay so we're back to the start and now all we have to do is replace

these two uh lines with the imported font if you go back to robotto or Roboto slab you're going to see that The CSS rules to specify this face family is right here so we can just copy that come back here and replace this whole line and now you'll watch the text change to this new font so that's how you would import a custom font it's pretty much how I always do it for a lot of my web pages and apps is used Google fonts it's free and very easy to use so that is the first

and most important CSS property when we're dealing with fonts we'll go ahead and give a font size of 16 pixels because we're on the root HTML element and that is a very standard value to be giving um an entire web page now what gets interesting is the font weight property so font weight determines the thickness of that font but the interesting thing about this one is you can only use the weights that you've imported if you're using something like Google fonts so if you remember when we were looking at this we only imported a weight

of 400 And 900 which means if we give the um let's go ahead and Target a specific element so in this case uh let's let's say this will be thick font and Target that by its ID and then give it a font weight of 900 and you're going to see that this goes bold because we're specifying it to be 900 but since we only imported that one weight if we change this to say say you know 700 it's not going to change anything on the page and the reason is We didn't import it but if

we were to change this back down to 400 then it's going to go back to normal because we did import the 400 or regular font size so that's that's how the font weight property is related to those Imports that you will do the last thing we'll talk about is line height so let me put in a paragraph tag and here let's go ahead and copy some laurum ipsum font which is basically just generic text that we can use and what you'll see on The page is very normal looking text now if we change the line

height so if we target the paragraph elements and give it a line height of call it 30 pixels you're going to see that it spaces this out a little bit more than the original and I believe the default line height is going to be the same as the font size but I could be wrong on that I I would have to check but basically let's let's see we can actually check that so we'll go one REM and it looks like no it's not the same as the font size because it definitely got smooshed a little

bit more um but anyways line height is basically going to give you the space between the lines of text when there's multiple lines of text we are getting to the end here we have a couple more topics to cover and one of those is colors so there's not a whole lot to know about colors but um I I do want to walk through some of the basics so far We've been talking about just basic you know colors so if we came into our paragraph element here we give it a color of say red Now red

is pretty easy to understand it's the color red but that is a built-in CSS property and I'm wondering if there's a resource that has all of those potential properties so if you go to the mdn documentation go to the color property so the color CSS property and then I believe there should be some sort of List of all of the possible colors that you can use let's see if we can find it here so it looks like here's a few of the color keywords that you can use um this looks like a list I don't

know if this is exhaustive uh of all of the possible ones but it sure looks like it so you can just go to uh color value is where that is on the documentation but that's what we've been looking at so far and there are also other ways that you can Define colors so you can Define it As a hex or hexad decimal you can Define it as RGB or you can Define it as rgba so we'll walk through all of these and I'll show you exactly what they do to help us out a little bit

we're going to use this built-in Color Picker um just type in RGB to hex or vice versa and usually comes up on Google there's other tools that you can use as well uh let me zoom in so that we can really see what we're dealing with here and you'll see that in this Color Picker we can Drag to look for different colors we'll just stop here on this green and what you'll see is all these different codes so we could just type in to our CSS we could just say we want green or we want

something like light green those are both valid values but if we wanted to be more specific and go with a color theme we're going to have to use something a little bit more complex and these color codes allow us to get to a very finite amount of detail with our Colors and what you need to understand is that each color is built with red green and blue which is defined by this RGB value so the first number is going to be red then green and then blue now these numbers go from 0 to 255 um

I believe that's one bite um is how much space that takes up in memory and each different combination of those bite values are going to give you a different color based on the blending of those uh red green and blue values And if you were to take these three values and convert them to heximal notation which is just a numbering system you get this code right here so the 128 would be represented by 80 in hexad decimal 235 would be represented by E and B in heximal and 52 uhoh just drag something around there 52

will be represented by 34 in a heximal so these are the same exact thing just expressed with different notation now there's one other thing that we can do and that is Add an rgba value so let's go ahead and copy this hex code in so we'll copy that into to our our color for text color and you'll see that it changed a little bit and that works we can also come back and grab the RGB values and then in our CSS all we need to do is type RGB put some parentheses and separate those values

from 0 to 255 by commas now there's one trick that you can use if you add an a at the end of the RGB you can Define one more value within this I I guess array Or whatever we're calling this and this represents the opacity that we're going to Define so if we wanted 100% opacity basically the same color we give it one and that's going to give us the same color but if we wanted 50% opacity you give it 0.5 and you can see how this has been kind of grayed out we can actually

use our um our new skills of absolutely positioning an element um let's go ahead and write a div in here and we'll say uh overlay and come down and style this so We'll say overlay is going to be a width of 200 pixels a height of 200 pixels and then we're going to give it the same exact color right here so and then maybe the P color will just be uh Black by default so that we can see it really well um and then this overlay is not showing up and why is it not showing

up hold on oh that is because we've set the color we need to set the background color to actually get something to show up now this is not Over the text yet but all we have to do is say position absolute and then give it Zero from the top and there we go so we've now got this box sitting on top of this text and you can see that we can actually see the text through it because we've given it this 50% opacity value if we flip that to one it's going to disappear because it's

100% opacity and it's covering all Of the text so that's what the rgba um CSS value is able to do with colors now speaking of colors um I recommend going to Adobe color which is a great place to kind of explore different color themes and it will show you like all of the different complimentary colors to certain codes and you can even go to explore or go to Trends and you can look through different color themes that people have put together um for different you know Niches so graphic design illustration architecture game design and you

can go in and click on these pallets and it will give you all of the hex codes that you need and you can set those up in your Global CSS values and then your whole web page is going to be themed in a uniform way all right let's get rid of all this stuff because we are ready for the uh I think the last category of CSS properties that you you'll probably need to be aware of and that is background Properties so far we have talked about background colors and um you've seen me do this

with these boxes where I'm just giving them background colors so that we can see them on the screen but you can also do background images and with background images there are a couple of properties just like we talked about before certain properties set to certain values kind of change the rules of the game for the rest of the the page and that is the same deal with background Images so I'm going to walk you through a couple use cases with backgrounds and how you might see them you know in in real life when you actually

start putting together web pages the first one is simple like I said we've already talked about it and let me just go ahead and make some simple text on the page just so just so we have something but but what we're going to Target is the body element so that's the whole web page and I'm going to give the body Element a background color of green and you're going to see on the screen that it turns completely green so that is the easiest property the next thing that you can do rather than just making a

a solid color background is you can put a background image on your web page it's actually pretty common for like a homepage here's my Golf website you'll see that there's a background image there and um this background image I've actually pulled this out um into its own Link so that we can use it within the code pen environment so let's copy this link so that we have it ready and now what I'm going to do is put a div up here and we're going to call it the main content and then we're going to put

the text in there just so that we have something to see and from here we will grab the main content and we're going to say background rather than background color equal to something like blue we're Going to say the background image is equal to a URL um and I guess I copied in the wrong thing here so let me grab that link again and now we have a URL so the problem here is it's only taking up this small amount of space and that is because we have not defined the size of this main content

so all we need to do is say the width of the content is going to be 100 uh% of the viewport width so again that's the Whole visible screen is 100% of that width and what you'll see is there's still some gaps here and that's because the code pen environment automatically adds some margin um around the body so what we need to do there is reset that so we'll go to the body and give it a margin of zero so that should bring it in line there and then we have this P element which has

some sort of margin on it too um which is adding this top margin so We'll make the P margin equal to zero as well and now we have this at the top of the screen so if we come down here and give it a height of 100% of the view viewport height now we're going to see this image across the whole page now obviously this image is not showing what it is like this is who knows what this image is and we need to position it a little bit differently so the way that we do

that is we'll use a property called background size and we'll go Ahead and set that equal to cover so that's going to cover the whole um container that we have it as a background for and then we want to make sure that we specify the background repeat to be no repeat just in case a screen size um you know is so big that it has to repeat and then finally I think we need to add in uh the background position which is going to take two values it's going to say I think you can just

say like bottom right Or something like that so let's go ahead and look that up if we go to the documentation and type in background position so it says the background position sets the initial position position for each background image it's relative to the position layer okay and you can see that there's multiple different values that you can give it you can give it values relative to different parts of the screen or you can just say position it at the top left Or Center um that kind of thing so what I will do is just

position it to the right um bottom right works but we can just position it to the right because our golfer here is on the right side and we need to pull it over so that you can see uh him in the background so this is our basic background image and then from here you can put text on the screen so what if we um went up here and said on the body we want the color of the text to be white so that we can see it and Instead of paragraph text maybe we have like

an H1 welcome to my site or something like that and then of course we need to remove that margin because it's messing it up um and we'll come down here give it some margin on the top which will be 50 pixels actually no we don't want to do that we want to do some padding on the top so that it doesn't bring the whole image down and Then maybe we'll say on the body that we want the text alignment to be Center so that's centered on the screen so we have a a welcome message says

welcome to my site and you've got a nice background image there's obviously a lot more that you can do here um I didn't even scratch the surface on all the different things you have to think about when you're putting together a background image and trying to actually get elements like this uh piece of text on top of it so That gets a little bit more complicated but hopefully this is just a nice overview of those background properties to see what's possible all right so the last thing I'm going to say about CSS properties is that

there is a short shorthand way to write them in some cases so to this point you've seen me just writing these properties and you know not really explaining okay I'm I'm giving it a margin of zero right here but what does that represent you Know is the zero margin going to be a margin on the left the right top bottom all four of them and the answer is it's going to be all four of them because this margin property is a shorthand CSS property and what you can do um Let me let me go ahead

and get us a better example here because this is not a good example um so let's make a div and Target that div give it a width of 200 pixels a height of 200 pixels and a background color of green just that we Have something on the screen and then from here um actually let's let's make a couple of these so that we see two of them and you can see that they're combined together because there's no margin but if we were to put some margin on this we can say the margin is just 20

pixels and be done with it or we could say that the margin top is going to be 20 pixels so that it doesn't space it from the left side of the screen so this margin property when it's defined just On its own is a shorthand property you can give it one value which makes the margin on all sides equal or you can come in here and you can give it four different values so let me make sure I got this right but the first value should be the top margin then you have the looks like

the right margin then the bottom margin and finally the left margin so you can Define different values for you know top right bottom left instead of writing it All out like this so we could say um this this line right here I'll comment it out and that's going to be equivalent to this so we'll say margin top is 20 margin right is 5 pixels margin bottom is 10 pixels and margin left is 20 pixels so these four properties combined together is the same exact thing is this one shorthand property so you'll see this very commonly

in CSS where um another great example of this is border you could say border is one pixel solid Black and you'll see that border pop up um or not very well let's make it five pixels so you can see it better and this is a shorthand property so what we could have done is comment this out and say uh border size is 5 pixels the Border color is black and then the Border I believe Style is solid and it looks like I got something wrong here cuz the size is all messed up but let's let's

look it up in the documentation so we'll type in Border and it says that it sets the Values border width border style and Border color so that's what I missed it's not border size it would be border width and now you'll see the same exact result as you saw um let's go ahead and comment this out just so that I can prove this out so we'll comment out those three properties and comment this one back in and the shorthand property has the same exact effect so shorthand properties are really quick and easy way to write

CSS You'll kind of get used to them and just wanted to let you know that that was going on because I know it's kind of confusing when you see all of these different properties being written and nobody explains oh what we can Define the margin right using like three different ways of doing it congratulations if you've made it this far and know it's been probably a couple hours at this point of me talking about CSS and properties and Concepts box Models all that kind of stuff um but hopefully that was a good introduction for you

and at this point we're going to kind of prep ourselves for the HTML and CSS challenges that we uh looked at at the beginning of the video so I'll be walking you through those on video in separate videos not this one but before we get there I want to introduce the four-step method that I go through when I'm writing HTML and CSS because it was not offered to me when I was first Starting out or I didn't find it on my own and I think it would be really helpful to you because it took me

a while to figure this out and uh really get into a good routine so this is a systematic way to write CSS in HTML and the first step is to figure out what you want what you want to put on the page and often times that comes in the form of a design now we talked about we're not going to go through wireframing or graphic design in this course we're just Going to use we're leveraging existing designs that have already been built but that is a huge huge concept here you never want to go into

it where you have no idea how you want to design the visual elements on the page and try to write the code and design it all at the same time it's really confusing and I've done it too many times and I would not recommend it now once you have the design or at least some sort of of wireframe that gives you a sense of Where you want to put the elements you have to think of step two which is how do I want to arrange those on the page with HTML now this is a highly

intuitive step you're going to get a lot better at this with experience and it's much easier after you've written a couple of apps to understand oh I need to put you know a div container here and then I need three div containers within that main div container and then within each of those contain containers I probably Need some text and then maybe another container so you'll get a lot better at realizing you know how to use divs and different semantic HTML elements on the page um as you go along the third step is how can

I use CSS to achieve that outliner layout and this is where all of the stuff we talked about in this crash course come into play if you don't know some of these properties and you know how they work and how they you know disrupt the flow of the elements on the Page then you're not going to be able to do this very well so like step number two you'll get a lot better with practice on this one and then finally step four I really think this is probably the easier uh step of this process and

that is how do I want to style these elements so once you've got them laid out on the page styling them is rather trivial you're just putting different colors and some padding maybe some margin that kind of stuff on them Maybe some text decoration or you know font sizes that kind of stuff and it's pretty trivial compared to getting the layout correct in the first place so to go through this process I'm going to give you a short example here at the end of this video and then make sure to keep it in mind as

we go into the challenge videos and I'll be sure to kind of adhere to this process as we're building those frontend Menor um code challenges so here is what we're going to build With this four-step method um this is we can think of this as the design so let me go ahead and change the view so that it's uh very clear so we're going to go to full page view and you'll see the design that we're trying to make it's nothing fancy but just looking at that visual design how can we lay that out in

HTML so we have to decide you know looking at this do we want some containers built out you know it looks like they're next to each other how do We accomplished that with HTML so let's go back over to our playground and start writing this out I'm going to actually put these side by side so that we can see them a little bit better when I look at this design the first thing that I see is two div elements so I'm thinking I'm definitely going to have two divs and usually when I put something together

with HTML I have a container div so kind of like the Overarching parent to all the elements so what I'll do here is start us out with a template we'll say div. container and press tab to make a div with a class of container and then from here I want to make a div with a class of box one and then I want to make another div with a class of box two so we've seen this before so if you remember you might be able to kind of figure this out but this is the basic

structure that I think I want um to lay that out and of course There's two pieces of text so in each of these divs I'm going to put some sort of H2 we'll call that box one and then we will say we want some text in there and then we can just copy this down into box two as you can see on the screen on the left this looks nothing like the one on the right and the reason I knew to put all of these uh HTML elements in this fashion is because I have experien

doing it and I just know that we have a overarching container each div is going To represent each box and then there's content within each of these divs that we can you know Center and style a little bit later so let's go back to our our four-step process here um we already asked how we want to arrange them that's the design itself so what we're looking at over on the right we said how does this Arrangement look in the form of HTML we already wrote that out it doesn't look anything like it yet but it

will and now we have to say how do we Use CSS to imagine that layout that we see on the right so from here we have to take CSS and get these boxes um I need to label this one correctly we need to get these two boxes and put them next to each other now what I'm most comfortable with is flex box I know we haven't learned it and that's going to be a separate video but I'm going to go ahead and use it here just to give an example and how you use that is

you basically take the main container and you Display that as a flex item and what that's going to do is it's going to put the boxes right next to each other now what you have to do is for each of the boxes we're going to give it a width or no we're not going to do that we're going going to give it a flex basis of 50% and we'll give that also to box number two so Flex is going to be 50% that's basically going to make them equal to each other and then we need

to Give them a border so that we can see what is going on and I think it's about two pixels is what the Border we're looking for is so we've got the Border here on box number one we can copy this down to box number two we want to make that one blue okay and the next thing that we want to do is probably give some margin around it because currently they're right next to each other so we'll give It a margin of say 20 pixels and down here we will give it a margin of

20 pixels as well looks a little bit big so let's reduce that to 10 on both of them okay that's looking a little bit better and then with the box one and box two we probably also need to do text align Center so that the text is all centered we're going to refactor this in just a second so now we're centered and at this Point we're pretty much spot on with our layout so we need to go to the last step which is how should each element be styled we already have a border so that's

kind of part of the process but um the only thing that we need to do really is give it a color of blue for the text on the right and then give it a color of green for the text on the left and there you go um we have a pretty similar layout I think partially why it doesn't look exactly the same is cuz It's smaller but maybe we gave this some different dimensions but I'm happy with this we accomplish kind of what we wanted here um the only thing that I would do is refactor

this CSS because currently you can see we've set Flex equal to 50% on both of these we've also set the text line and the margin um so we can combine those into one selector so put a comma there select both boxes and then get all of these common properties that apply to both of them in Here so we'll grab the margin and the flex basis and then we go ahead and delete that from these properties or from these selectors and it should look the same now so this is how you would go through that four-step

process to solve an HTML and CSS challenge let's jump in this is what we're going to be building here it's going to be a nice way to practice uh a lot of those basic CSS and HTML skills That we've just learned um there's nothing crazy going on here um but it will give us that good opportunity it looks like we've got a few different font Styles um font weights a little bit of color in here and then even a button down here that we can style and maybe add a pseudo class uh hover effect to

so it'll be a great comprehensive introduction to writing HTML and CSS this code challenge comes from the frontend Menor website which is a great Resource that you can scroll down and see a bunch of professional uh web designs for different things that will challenge you to use uh different skills in HTML CSS and JavaScript the one that I picked here is rather simple it's kind of on the the easier side of this um but we are going to walk through a couple others so as you see this Grid in the crowdfunding product page those two

will be coming up in future video challenges for this video I've Purposely not looked at this um yet and figured out how I'm going to do it so this is completely Raw and Uncut I really want to just show you my thought process we talked about this four-step system for writing HTML and CSS in the actual CSS crash course and I really want to apply this and walk you through my thought process um of how I take a design such as this one and think about how do I lay it out how do I style

it and what resources am I using to do so I'm not the best at writing HTML and CSS in the world far from it there are plenty of people that could come in and critique what I'm about to do uh in many many ways but my goal here is to show you just a realistic look at how we go about building something like this consistent with what we've been doing uh in the prior videos we're going to be using the code pen environment so you can start a blank code pen document and just follow along

as we go through this Challenge I think our first step is going to be going over to the frontend Menor website um we don't need this page anymore but if we go ahead and click the visit challenge hub for the single price grid component which I'm going to leave a link in the description to this so that you don't have to go searching for it you'll find uh some starter files a design file that we don't need this is more on the side of you know if you're using figma or sketch or even Photoshop Or

something like that to mock up the design it might be useful to see what are the components and layers going on there but like I said in the crash course this is not about graphic design or wireframing we're solely trying to take a pre-existing design and turn it into code scrolling down you can see that this is the Newbie uh difficulty level so it should be relatively straightforward forward to solve um Almost 10,000 people have tried it and about 2,000 have finished and I fully intend to be uh in this bottom category as should you

and the brief that we're given is pretty simple so it says your challenge is to build out this pricing component getting it looking like the design okay you can use any tools that you'd like um we're going to use vanilla HTML and CSS we're not bringing in anything additional except maybe a Google font or something like that um it Says your users should be able to and what I want to call out right here is this is called a user story and we've touched on it previously within this uh crash course when we built the

HTML challenge but a user story is something that you will write down in the requirements Gathering phase of building a web page or a web app and it's basically saying okay let's come up with a list of things that the user should be able to do if this is implemented Correctly so the first requirement is that we should be able to view the optimal layout for the component depending on the device's screen size we have not yet talked about responsive design that's I believe going to be the next video in this series um so we

may leave this part out I'm not quite sure yet we'll see how long it takes to build the first part but basically what that's saying is as we resize the screen or if we look at it on desktop or for our Mobile device it should you know look good to the user the second one is you should see a hover State on desktop for the signup call to action so in other words what they're talking about is this uh button down here when we hover over it we should see some sort of interactive thing happening

whether that be the button gets larger or it changes colors opacity something like that so we can get a little bit creative with what we're doing there it says download the Starter code go to the me file this will give you further details the style guide will give you the colors and the fonts that we need to use so I'm going to go ahead and open this up you'll see that we have some folders and some files if we open up the read me it's written in markdown um which is kind of hard to read

here so what I'm going to do is open all of these files in a tool called Visual Studio code which is the code editor that we will eventually be using Within this series but for now like I said we're going to be using this code pen environment because it's a lot more um interactive and you can see the changes happening in real time so let me get that opened and then we'll look at some of these files I've got all the project files open in Visual Studio code which again you'll get very used to as

we go throughout this course um but basically we're just using it to see the the files for now and if we open up read Me you'll see that it's written in markdown if you don't know what markdown is just go Google it real quick to understand it basically takes um these little two hashtags for example and this would become an H2 element within HTML so I've got it open in the preview it's a little bit easier to read than you know the stuff going on over here um most of this stuff is not new the

one thing that I'll talk about here is uh down here in the deployment section so They recommend that you use Git Version Control um to host this and push it to your reposit itory and deploy it um with forell now we're going to just put this up on GitHub pages and we're not going to actually be using the git utility because we haven't covered that in the series yet um but I do want to you know give you a way to see it live on the internet and GitHub pages is a really simple way to

do that I'll show you exactly how that works um but it will Not be the focus of this tutorial the style guide we don't really need to go through this uh all that much right now but we'll be referring back to it when we have to figure out okay what Font Are we going to use how large is this card going to be um and what colors are we putting in there so this will be a good reference so let's close that out and I think everything else looks like we have design these are just

uh preview images to reference and then images we just Have a favicon which is going to be kind of up in the browser Tab and finally we have this get ignore file which has to do with the Git Version Control utility we're not going to talk about that and then finally in index.html which has some predefined um HTML boiler plate to start with but once again we're going to be using Code pen instead of doing that just cuz it's a little bit more interactive for us all right let's get started uh coding this Thing so

once again we'll go back to this four-step system for writing HTML in CSS and for this um I use this four-step system on a component by component basis so in our case we're just building this uh simple card so we can pretty much use it one time through but if we had a much larger project we'd kind of iterate and do this process multiple times so the first thing is how do I want to arrange these HTML elements on the page that is basically talking About this design right here so how do I want to

design it we've already have that done for us so we can go to step two how do I uh make this Arrangement look uh using HTML so um the way that we can figure that out is primarily by experience just knowing how you can write HTML that will be turned into something like this um but I'm going to walk you through my thought process and just kind of start to give you that experience so just taking a look at this Design the first thing that I'm thinking about is how do I um lay this out

with HTML so what are the container elements that I need to use and as we talked about a div element is a great you know container type element so what I'm thinking about is there's probably going to be four main containers that we're looking at from a high level the first one's going to be the entire um design itself so that will be one div then we'll have something for this white box Right here the bottom left box and then the bottom right box so really what we're going to be looking at is something like

this and excuse my uh poor drawing I'm using a mouse so this is kind of tough but if we break it out like this and then we draw something around it this top one is going to be a div and then we'll have another div here and we'll have a div here and a div here so we're going to have four in total and That's going to represent our entire design as we move down to this this bottom left section which will be contained in a div it's going to be a little bit trickier than

this top one um because of this part right here so you see how we have some text and some more text styled right next to each other horizontally and as we know elements are block Elements by default usually so we're going to have to find a way to lay that out so that they're both on the Same line and they have two different styles so that'll be interesting to see how we do that and then finally at the bottom we've got a button which we'll spend a little bit of extra time on because we need

to have a hover effect on it and then then in the bottom right we have a pretty straightforward design um where we just have a heading and then it looks like an unstyled list so it's not necessarily paragraph text it looks like this is a list without bullet Points so I'll show you exactly how to do that and then finally we have um some different colors throughout but that's not really related to this step so we've gone through steps one in steps two so what I'm going to do is actually take step number two and

lay this out with HTML as we just talked about so I've got my design here on the right and my code pen here on the left so let's go ahead and start with this um the first thing that I'm going to do is make a main div That we're going to call the container or more descriptively we'll call it the card because this is what we call a pricing card um card is just terminology for something that's like all contained within a box then furthermore I said that we're going to have three more divs so

let's lay that out and we're going to give I don't know we we'll call it an ID so maybe let's be more specific with everything here because we're only making one card um in a real CSS project You might want to make a card design and then apply it to one class that you can you know use with multiple elements but for here we can just use IDs and be super specific so we have a card then we have the top section and then we'll come down make yet another div this is going to be

the bottom left section I'm just being super descriptive here and then furthermore we're going to have a bottom right section so let me expand this so that we Can really see what we're dealing with it's not going to show anything on the screen yet because we haven't put anything in these divs um but one thing that I just noticed that we probably should be doing is this bottom right section here we probably should wrap that in another div just because they're horizontally next to each others so really what we can visualize this as is we've

got one section up here and then we have one section down here and then Within that we have two more sections like that so over here in our HTML we're going to wrap these two in a div so let me take the bottom two sections and put those in a div as well and make sure that we have some good indentation so that we can see exactly what's going on pretty easily um let's give this one an ID so we'll just say bottom section so if you look at this on the right my extremely messy

design we have this top section which is This big box and then at the bottom we have the bottom section which is the big box surrounding these two little boxes and then the two boxes down here are represented by the bottom left section and the bottom right section and then everything is encompassed this is getting extremely messy with a card right here all right so let me go ahead and disable this so that we don't have all that drawing there but you can kind of see how this layout is going to map Over to this

design at this point let's put something in here so that we can start seeing this come to life at the moment we have an empty web page because we've got a bunch of div elements or containers that we've laid out but there's nothing in them so what goes in these sections um let's start with the top section so right here contain contained within this single div and what we're going to put in there is it looks like a heading so that looks to me Somewhat like we'll call it an H2 heading and it says join

our community so that will be our first um heading right there there and of course this is not going to look anything like the card at the beginning we're going to use CSS styles to make this a lot prettier in just a second we'll come down here and this looks like maybe an H4 heading that says uh 30day hasslefree Money back guarantee all right so that is the second part and then the third part is going to be some paragraph text so gain access to our full library and I'm going to stop talking so we

can speed through this all right so we've got our top section already created and once again it looks nothing like the top section over here but we will get there in due time now we'll come down to these other sections here so we need to finish the Bottom left section which we're going to put in this div right here and then the bottom right will be going in this div so with the bottom left section it looks like we have an H4 tag so similar to how we use for the 30day hassle-free money back guarantee

um we'll go ahead and use that same one for the monthly subscription because it looks close we can always change it later so we'll put in monthly subscription and then like I said once We get down to this little uh area so if we Circle these uh two pieces right here this is going to be what I think as another container div so let's go ahead and make another div and then within that div we want to have we'll say um I guess we can just make another div that says $29 and then one more

div that is going to say per month so this is going to this total container is going to to wrap That pricing component and then we're going to take these two divs right here and make them go horizontal to each other as you can see they're you know block elements so they're breaking to new lines but um you'll see how this comes in handy in in a little bit so let's go to the next part um get rid of these lines here and you can see that after the pricing it gives us a small um

text down here so we'll we'll put a paragraph we'll say full access For less than $1 a day and then finally at the very bottom space this out once more we're going to need a button that says sign up and you'll see that this button comes on the page here and then finally this is where it gets a little bit confusing since we haven't added any CSS yet but this container on the far right is going to be next to the container that we just created but but for the time being since everything is a

block element by default It's going to go right under here so let me go ahead and write this out it looks like we're using the same kind of header here so we'll stick with the H4 and say y us and then down here as I said you could interpret this as paragraph text you can make a bunch of uh paragraph text that breaks to new lines or we could just make a list and then take the bolt points out later with c CSS so that's what I'm going to do I'm going to uh make an

unordered list and Then each list item is going to be what we're seeing on each line okay we've got it all written out we've got all the text and elements that we're probably going to need for this entire card but as you can see this looks nothing like the card that we have on the right right and believe it or not we're going to use just vanilla CSS to take this ugly looking thing and turn it into the card that we see on the right so in reality if I was building this Myself and I

wanted to do it as quick as possible um what I would do is probably not lay it out like this where I've got all of the text on the page at once I would probably do it um in pieces but I wanted to lay this out to just show you how we can visualize a a design um of course you need a little bit of experience to do this but we can visualize a design and turn it into HTML elements and we can take what looks like nothing special and turn it into this Card on

the right but let me go ahead and walk you through what I would do in real life so I've basically created a clone of this um and what we're going to do here is we're going to delete all that text that we just put in here so we'll get right back to where we started and as you can see we have just the layout that we had created earlier where we have the whole card we have the top section bottom section and then the subsections within those and Realistically what I would do first off just

to get everything laid out on the page correctly is start giving uh some dimensions and some borders on this so that we can visualize it and then I would put in the actual uh text elements so let's go ahead and do that real quick and you'll see exactly what I mean so if we were to come back to this four-step process um this step number two can involve some CSS as I'm about to show you so we'll open up the CSS uh Pane and What we want to First do is Target the overall card so

to do that with an ID you use that hashtag and then Supply the ID and now what I'm going to do is just give it some sort of width and height and also tack on a border so that we can see it on the page so let's go ahead and give it a width of 200 pixels and a height of 200 pixels and then a border will be one pixel solid red so now you're starting to see and I'm going to actually make this three pixels so we Can see it better you'll see just a

basic container on the page now the next thing I want to do is go see what the specifications for the the size of this main card is because this um outer container we we're calling card should be the total dimensions so if we go back to visual studio code and see our specification so we're in the style guide right now it says that the designs were created to the following widths so like I said we're not going to be Getting into responsive design uh in this tutorial so if you were to look at the desktop

design it looks like this and that's what we're creating but there's also a mobile design which you can see has a slightly different layout and in real life what we would be doing is we'd be designing on desktop to look like that and then when we resize the page so as we you know resize the page in our Cod pen environment we would expect this design to change but for This one we're staying simple since we haven't learned about responsive design yet and we're just creating this one right here so the specification for that desktop

is going to be 1440 pixels but if we came to code pen and we gave it a width of say 1440 pixels it's going to go completely off the page so we're going to take a little bit of Liberty here and make our own design based on the size of our code pen editor which I'm guessing Is going to be around we'll call it 700 pixels maybe um that's a pretty good size we're probably going to want to give ourselves some some width here to work with so let's make it 600 pixels which is going

to give us all of this space right here and then for the height we're just going to eyeball it because they haven't specified exactly what that height should be so let's look at the desktop design again um you can generally grasp the aspect ratio here And you can tell that we're off by a little bit so let's maybe throw this up to 350 pixels and that looks like generally the aspect ratio that we're dealing with right here so nothing nothing perfect but it's going to get us close now the next step since we have our

main container laid out and we just see it visibly we're going to do the same thing with each of the sections so you can see that we have our top section which we Can come down into our CSS and Target and for this section we're going to give it a width of 100% because we want it to be filling up the entire space of its main container and then we're going to give it a height if I can spell that right we'll give it a height of 50% because well maybe not 50% it looks like

the top section is call it 40% and the bottom section is about 60% so maybe we'll go in that range where we give it a height of 40% and a width of 100 and Of course we can't see anything yet cuz because we haven't given it a background or a border so let's throw in a two pixel solid green border so you'll see that pop up in the top section here and that that looks pretty good so far now there's one problem that we're seeing already that I want to fix right off the bat before

we get any further and that is this um box sizing so as you can see when we put the border on this inner container um you're seeing that it's Kind of breaking out of the parent container on the right side here and the reason that's happening is because our box sizing is set to the default content box so what we're going to do is a basic CSS reset that's going to make every element on the page abide by the border box box sizing and we talked about that in the first of three lessons in our

CSS crash course um before so go back and review that if you have to to apply the Border box box sizing to every element In this HTML document we'll just come to the top of our CSS file and paste in a predefined HTML or css reset so we're saying on the total document we want the Box sizing to be border box which will as you see it will make this box go within its container and then the second rule is just basically going to say I want to grab every other element and apply or inherit

that you know root level box sizing so by just adding these two rules you can see that our boxes are Fitting nicely within each other if we comment them out it's going to be breaking out of the box again if we comment them back it goes or it should update I'm not sure why it's not updating Let's uh refresh the page there we go so it is within the box with that fixed we can go to the bottom section um so let's let's go back to our design here for a second we've got our top

section bordered out now we have this overall bottom section so we will Write a CSS rule to Target the bottom section div which is right here so you can see the bottom section which has the two subsections within it so let's come down here and just paste in these properties cuz that's all we need but it's obviously going to be the wrong uh Heights and widths for now so we do want 100% width we want it taking up all of that but the height that we want is going to be 60% rather than 40 because

as you see with 40 it doesn't take up The full uh height of the entire container but now that we've made it to 60 um and then we'll turn this to call it blue you'll see that we now have a uh outer container in red our top container in green and our bottom container in blue now the last thing that we have to do to get this layout um perfect is going to be adding these two containers in the bottom section that will be side by side I'm going to add them one at a time

because it's going to require us to Do something a little bit tricky um because they go next to each other so let's target the bottom left section first so we'll copy in this ID into our CSS put that hashtag in front to Target it and here we're going to copy in these same properties again just to get our border now this is going to be incorrect at the moment because we're giving it a width of 100% um but really what we want is a width of 50% because we want that to take up the uh

first half and then The height that we want is going to be 100% now I'm using these percentages because we have these already broken out within their containers so let's put a different color on here um maybe we'll put on uh what's contrasting to Blue we'll say orange so that we can see that pretty nicely within that container and the reason that this works is because the width um the width of 50% is going to be relative to its parent container so if we look and ask ourselves okay What is the parent container of this

bottom left section well that's going to going to be the bottom section and the bottom section is outlined in blue right here so rather than saying 50% um width of the entire document we're just saying 50% width of the bottom section which is already outlined for us and you can see um that it's occupying perfectly 50% of that now if we did the same thing with the bottom right section so let's change this ID to the bottom right section and Then I'm running out of colors here but maybe we'll just give it a two pixel

solid black border now we're running into problems here because now that we have a bottom right section it's breaking down onto a new line because all of these divs are by default block elements and they occupy Their Own Line so in order for this to work we actually have to make both of these um you know subsections inline block elements so we don't want to make them inline because Inline elements don't respect the height and width properties which we want them to respect but we do want them to be up on the same line so

what we're going to do is come to both of them and say display inline block and then once again display inline block now at this point you're probably wondering why are these boxes not lining up next to each other we've given one of them 50% width the other one 50% width and we've turned them into inline blocks which basically Means that they both can sit on the same line unlike a block element now the reason that this is happening is probably going to make you pretty mad um because it made me mad when I found

it out uh for the first time and a lot of other people and it's kind of just a quirky thing about CSS so when you make an inline block that respects the white space within the document and believe it or not if you come up to this HTML where we have the bottom left Section and the bottom right section there's actually some white space between these two elements so uh this this space right here is considered white space for inline block elements so if we were to just backspace and bring this right next to each

other it's going to bring this box up within that container and it's going to fit perfectly now I know what you're thinking um like I said this is kind of infuriating that this is the reason that That was doing that and that's kind of you know coding in general sometimes you just find things that are completely ridiculous and what I will say is that there is um some hope so in the next couple of videos we're going to be talking about CSS grid and flexbox and both of those will be a much more optimal way

to make this layout like we've done here and you won't run into these weird quirky problems that just exist um as a Part of kind of the older uh method of writing CSS all right so just keep that in mind we have taken the divs that were nicely uh laid out in our HTML above like this and we've just removed the little white space between them and now it's going to work just fine so that's hopefully the only little hack that we're going to have to do throughout this project um and like I said it's

just it's a little bit frustrating but uh we have to Do it here and until we know CSS grid and flexbox at least um but this would be kind of your old way of lining these things up now the last thing that we have to do here because we've got our layout so if we come back to visual studio code you can see that we've got our top section bottom left and bottom right section all outlined with these ugly colors and and whatnot and at this point we can start putting HTML elements within them so

let me go Ahead and grab some of the text that we created over here just in this ugly uh space and I'm just going to copy the exact HTML and put it into each of the sections that it belongs in so we're going to see some HTML go up here and of course it's not going to not going to fully fit at the beginning um we will fix that I promise and then let's come down here grabb this put this in the bottom left section and you'll see that we have some Uh some spacing that

we're going to have to address here and that is partially due to the the default margin that is given that is being given to H2 and H4 elements and and paragraph elements and then finally the bottom right section we'll copy that and paste it into the bottom right section Okay so we've got all of our elements in here and now we have to fix a few things um one of those things is the default margin that we're getting on These elements so I'm going to actually inspect the whole page it's going to look very weird

for a second but if we hover over um some of these elements you'll see that we have this Orange um margin on top top and on bottom of those H4 elements and that is because it's just a browser default it's something that just it you know happens by default and if we go over to this page you can see that all of our text is is spaced out pretty nicely and that is because of Those browser defaults but obviously over here we don't want them to be in effect because we want our uh document to

have no spacing around we want to add our own spacing so all we have to do is come up to to the top and to our HTML or sorry CSS reset where we're just you know resetting default properties I'm just going to grab the H2 element and the H4 element that we have as well as the paragraph element and give it a margin of zero so hopefully that will Fix a few things you can see that we have no spacing around here all right the last problem we're dealing with here it looks like we've got

all of our text without default spacing so that's nice and the last thing that we're worrying about is this Orange Box which is oddly just sitting there floating in space and if you were to rightclick and inspect this and you start clicking around looking at this there's not going to be any you know obvious reason why this is Sitting down here there's no margin or padding or anything going on here so you kind of have to ask yourself what is going on um and from experience I just know that when you have an inline block

element it follows different rules than a block element and there are different properties that will allow you to modify how those rules are applying to your HTML now that's kind of similar to all CSS so when you change display properties and box sizing there's just Different rules of the game so if we were to come over to the mdn documentation and type in uh um vertical align this is going to show us a property and it says the vertical align CSS property sets vertical alignment of an inline inline block or table cell box so this

does not apply at all to block Elements which is the default type of HTML element for um pretty much everything but what it does is it basically says this is a pretty good Visual right here if you have two inline block elements that are sitting right next to each other on the same line they can be aligned um at different vertical positions and by default um not sure exactly what the default is here um probably the baseline or something like that um but anyways we want to make sure that this uh gets the top alignment

because if we come back to our uh challenge here we want these two uh inline blocks to basically lock up to The top um border of their container so if we go into each of the sections um and for the bottom left section that's behaving oddly if we type in vertical align and then say top it's going to bring it right back up and snap it to the top edge of its container now the bottom right section just so happens to snap up there naturally um but let's go ahead and add the vertical line top

for cons consistency sake and this will also snap that to the top so at this point it Looks like we have a nicely laid out card and although it is pretty ugly we've got everything that we need all of the content in there and we've got the layout that we need so at this point it's all about styling so in our four-step process we looked at number one that was just looking at the design in some cases you'd actually do the designing um in step two we asked ourselves how do we lay that with HTML

so we templated everything out now in Step three we have to ask how can I use CSS to achieve the layout that I want and that's exactly what we did here we just used a few basic CSS properties to put some borders and really visualize um the card component that we're trying to create and now finally how should we style each element and this is kind of the fun part where our ugly layout example is going to turn into um what we see in this example a nice styled card so I think the first thing

that I want To do um let me go back to my example here um since this is just called layout example let's let's copy all the HTML here into our original code pen and of course all of the CSS will copy in there too so this should get us back to where uh we were there and I can go ahead and close this out so we've just got this one example and I think what the next step here is going to be is to get these background colors uh put in there so we're going to

start to get something That doesn't look so ugly so just looking at the colors um let's just drop these into Google because I'm really not sure just they're they're saying cyan bright yellow light gray and a grayish blue and to be completely honest I don't know what that refers to here um it looks like this might be the yellow um not sure where the gray is maybe this text right here um let's let's go ahead and type those into Google real quick so we'll go RGB and there should be something R RGB to hex maybe

okay this is what we're looking for just the Color Picker on Google and all we have to do is go back to our style guide and let's see what this cyan color is so we'll we'll paste in these values right here I'm not sure why they're giving us hsl values because that I really haven't used those all that much in web development you usually stick at hex and RGB um but they are so let's go ahead and convert those to Something a little bit easier to use so we'll grab a hex color here and let

me just replace this just so we have a reference and then let's paste in the hsl for this yellow color that we're working with which to me looks more green maybe I'm color blind who knows um go for those hex values at the end here just for reference and then we'll do the same thing for the remainder because I like working in HEX and I've never really worked with uh hsl so we'll go Back and put these in here now to me when I look at this um these bottom the bottom left and bottom right

boxes they they look like different colors to me this one looks like just a lighter version of the left and in the style guide I'm not so sure that they've given us uh two of those options so if we came in and and looked at the San um color so let me paste that in here it looks like that would be the bottom left color that we're dealing With or maybe even the bottom right color um so what I'm going to do is just drag this that we have different colors maybe I'm missing something here

but um let me just drag this so that we get a little bit lighter color that we can work with and then I'm going to grab that hex value and paste it into the style guide so we'll put put that in there as darker and then lighter and at this point we can grab these color codes and Start using them so we'll grab the darker color and we'll come back to our code pen and just put in a background color property so for the bottom left section we know that we can use the background color

property and paste that in there and we should be getting that darker cyan color all right so at this point we can probably remove that border and that looks a little bit nicer for us um and I'm also going to remove The bottom section blue border okay so we're looking a little bit better here and now I want to fill in the background color for this right section which um as I just got a slightly lighter hex value so we'll go to the bottom right section get rid of the border and replace that with a

background color and paste that in and it's looking like it's it's a little bit lighter but compared to the example it's there's more of a contrast here so let's Go ahead let's play with that a little bit let's make it even a little bit more light grab that hex value and see what that looks like okay so that's that's a little bit better I like that contrast and you could even come over to Adobe color and we'll go to this uh this Adobe color tool and what I could do is I could grab the bottom

left section hex code which is the darker cyan uh throw this in the middle here and then I want Some shades of this color so uh we could grab maybe this shade over here which ensures that it's going to you know nicely go together and let's put that one in the bottom right section just to get a little bit more compliment uh colors here and then I'll go back here and and replace this just so we have a reference of it okay so we've got these two um the top is going to be white and

then at this point I think we can remove all of The borders just so that we don't have those ugly colors going on um so let's let's go up here remove the top section green border everything looks good and then the red border around everything and boom we have ourselves a nicer looking layout now as you'll see in the example uh design it is kind of standing out against the background and you'll also notice that there are some little Corners that are rounded so I want to do That just so that we have something as

a reference here and I also want to kind of make this come out from the top left corner of the page so all we'd have to do for that is just add some padding to the body so if I go here and just add some padding of 20 pixels to the body you'll see that that uh comes in a little bit so remove it add it back and you can see our card just shifts inwards so that we can kind of visualize it a little bit better um and then finally For the card because that

is the main container around everything what I'm going to do is add a box Shadow and this property is going to take I believe five different arguments and they're all kind of uh referencing where the shadow is going to go so I can open up a tool called box Shadow generator uh for CSS and there's a a couple tools here I don't know which one's the best um they all should work but as you see this um CSS box has a box Shadow around it and you can you know drag these sliders to get different

sorts of box Shadows applying to this so this is a good visual tool that we can use to to see what we want and in our case we probably want a a much smaller box Shadow so let's let's go ahead and actually no we want to stay close to zero so we'll go around four pixels and maybe three pixels or something like that and make the blur radius a little bit Smaller and the opacity that we want let's make it down to like 0.2 or around that area maybe a little bit more I think that

looks pretty good so the codes that we need it's showing us that uh we need to paste in all of these these webkit and Moz box Shadows are just for like other browser support we don't necessarily need them so I'm just going to copy in this rule right here and we'll paste it in to the card and now you're going to see around the edges We're starting to get a defined um Edge to our card so let's go back to um our design and you can see that we're we're getting a little bit closer here

uh what I want to do is round the corners now so all we have to do is say on the main card we say we want a border radius of call it 5 pixels all right so we've got our border radius on here but what you'll notice is that the bottom right corner and the bottom left corner do not have a border radius and you might ask Why because we've given a border radius of five pixels which should apply all around that uh container element but the problem is because we have these two inner container

elements that are perfect you know squares and they occupy 100% of the space within that main container so as we make a border radius we're actually um th those inner boxes are actually breaking out of the main container now and what you're seeing there is those those uh child containers There's a couple ways that we could fix this but a cool little trick that you can use and I I know this is not necessarily obvious but if you do enough Googling you would find this out if you set the Overflow property to HD hidden on

the main container element you'll see that those uh borders go rounded and basically what that's saying is we want to take those perfect square children containers and since those are breaking out of the main container we want to say To the main container CSS style okay if you have anything that's breaking out of your borders just hide it and so that's what allows those bottom border radiuses to apply so just a cool little trick um it's also one of those frustrating things about CSS where it's doing things that you would not expect and that is

literally the name of the game with CSS um is figuring out how to get around the things that you're not expecting to happen Okay so we're getting a little Bit closer here um the next thing that we can do that will just add a really nice touch uh and make this look a little bit cleaner is some padding I think so let's jump back to our design and you can see that all around the content here so around every bit of content there is this space this nice padding in here and what we could do

is we could come in to our code pen and we could just say on the total card we want to add some padding of say 20 pixels but That's going to uh mess us up a little bit because although it adds nice padding around everything um now these are not occupying 100% wi and and also we want some padding within these suitt containers so what I'm going to do instead of adding it on the total card um to get padding like that I'm going to add them on each individual section so we'll call it a

padding of about 20 pixels that's a pretty standard amount of padding to add and we can just look At this little space between the edge and the text on the top in the left um to get an idea of how large that padding is and that looks pretty in line with our design so I'm I'm happy with that and then let's copy that rule down into the uh other section so not the bottom section because that represents everything here but I want to do it in the bottom left section so we get that nice padding

and then I also want to do it in the bottom right section which Will make the padding uh nice there too so at this point we've gone from a completely ugly layout design to something that actually makes sense visually we obviously have a lot to do with the text styles and colors in that button but we're getting a lot closer let's go ahead and change the text color you can see that everything in the bottom is a text color of white um and then the top has varying text colors so we'll start with the top

and you can see That the The Heading is the same color as the bottom left or at least it appears to be so let me grab that bottom left color and we'll go ahead and apply that to our join our community text block so let me collapse the JS here and we'll go up to the join our community and what you could do is you could Target everything in the top section that's in H2 and since we're not planning on changing the HTML uh structure anytime soon I'm pretty happy With that you could also throw

an ID uh you know that says title and directly style it um but but in this case let's go ahead and practice our combinator skills our CSS combinators to style this so we'll come down here and at this point you'll see the CSS is getting pretty busy you might want to rearrange it and organize it by section but for now let's just keep going um and what we'll do is we'll say the top section is the pre-selector that we want and then We want to grab every H2 element which is simply that first title and

what we want to do is style it a color of that bottom left so now we're going to get the correct color let's go back to our um Visual Studio code and see what else we have so we have this kind of lime green yellowish color as the next one and that is going to be this hex code the bright yellow so going back to our code pen um you can see that this is the only H4 That is sitting in our top section so we can grab a similar rule as we just did except

this time we're grabbing h4s and giving it a color of yellow so there is our yellow color and then finally we should have some sort of gray color and let me get to our Visual Studio code um this this paragraph text is gray and in the style guide um I believe that is the light gray that we're looking for so let's copy that hex code and then Make all of the paragraph elements in the top section equal to this light gray color okay so that is that is very light I'm not sure if that's what

we were supposed to do um it appears pretty pretty good here but it's pretty darn light when we're looking at it here so I'm going to go ahead and make this a little bit stronger of a gray um maybe it's the grayish blue actually Let's try that instead ah okay so I think that's what they meant for this style yeah I think that's what we're looking for here so the grayish blue looks a little bit better we we'll stay with that now we just have to add some uh some spacing between these so if you

remember at the very top of our HTML we did a reset that said for all H2 H4 and P elements we want to add a margin of zero so that removed all the default Spacing and now we can do it custom and since we've got all three of these elements selected with these combinators we can just drop into these rules and do so let's take a look at our design it looks like there's a good amount of space um just by experience that looks about 15 pixels between the top and the next one let's go

ahead and try that by adding a margin bottom of 15 pixels and you can see that's a nice Little spacing there um what I'm starting to see is that our top section now that we've got this laid out is a little bit small from a height perspective so I think I'm going to adjust our our total dimensions here um previously we had said the bottom section has a height of 60% and the top 40% I'm going to change that to 45 and 55 and you'll see now we have a little bit more realistic uh breakout

between The two sections I'm pretty happy with that so the last thing we need to do now that we've made that change is add some spacing between this these two text elements and then uh we've already got some padding at the bottom so we'll go down to our rule of the H4 and add a margin on the bottom of 10 pixels which seems about right so comparing that up I think we're getting pretty close and and now that I'm looking at it we might actually need A little bit more padding around this uh than we've

given it so let's go to the top section wherever we did that and let's increase that padding to say 25 pixels that that looks a little bit better uh for us and then we'll go ahead and update that to 25 pixels in the other two spots that we had added that okay so we're doing pretty good there and it looks like our total card size is it's starting to break out but I'm going to wait on that before I try To restyle because the text is going to get a little bit smaller when we uh

set the font size and change the font style so the last thing we'll do is come down and since everything in the bottom it looks like is a color of white we can just go to the um selector that we used um for the the entire bottom section so rather than trying to style the text in the left uh section and the right section we can just go to the entire bottom section and give it a color of White that looks pretty good um I think that should work and then you can see the button

color is not being styled because that is a separate uh element there so what I can do is actually Target um all buttons cuz there's only one button on on the entire page so we'll we'll style the button and we'll give it a color of white and that's going to give it a text color over white we'll make that show up a little bit better once we add a background color Which looks like um that lime green but I'm going to wait on that for just a second the next major change that I want to

make is getting this text to be the right font family right now we're just using the browser default um whatever that is I I don't actually know off the top of my head but we want to make this a different font completely and if you look at the style guide it's going to say the font family that we're looking at is Carla and if we go to this link we Can see all of the different styles that we need now the question is what what font weights and you know styles do we need well we

can go and look at the spec it says we need weights of 400 and 700 so let me take the font weight of 400 and select that style and then the font weight of 700 and select that as well we will grab the link tags that we need we'll go back to our code pen over here go up to the settings HTML and in the stuff for the head Element so since code pen gives us our own little environment we don't actually have to make the head uh element or boiler plate so we can just

paste it here and by doing this and and saving and closing we now have access to that new font but it hasn't changed anything because we have to actually select it within our document so up at the root element we want to give a font family of Carla and you can see that it changed our design completely and it says that The overall font size is going to be 16 pixels so let's go ahead and say that the font size in the root element is going to be 16 pixels which is just going to apply

to those uh paragraph elements as I'm flipping back and forth between these two designs looks like we still need a little more space after this so let me do that real quick before I get into anything else we'll add 20 pixels to there okay and then I'm I'm thinking that we're running out of space Vertically and since we came up with an arbitrary height um at the beginning I don't mind changing that CU they didn't specify what the height should be so let's go ahead and uh turn that to 400 to give us some more

space and I think this looks a lot closer to the card that we're working with here so just adjusting that gives us um a pretty good look and now we've got our font family um styled here I think the next thing we have to do is figure out of that font Family they had us download the font weight of 400 and 700 which means that some of these should have a font weight of 700 or bold so let's look at our design and see which ones uh that would apply to it looks like to me

this $29 uh call out is the only one where the font weight is you know extra bold so let's come down and um because the default font weight is going to be 400 or you could also specify it in the uh root so we'll say 400 but that's once Again going to be the default so it's not going to change but if we came down to our price right here um we're going to have to actually uh put some identifiers on here to enable us uh or let us select it with CSS so I'm going

to say price um price container and then this will be an ID of price and then this will have an ID of um price frequency or something like that so now we have IDs to basically um Select each of these little components here and if we come down to our CSS we need to set the price to a font weight of 700 so we'll come down to the bottom we'll set our price to a font weight of 700 and you'll see that this gets a little bit Bolder so if I uncomment it it's not bold

if I comment it back it's going to be bold and then while we're here just give us a ballpark uh font size let's go ahead and say 1.4 REM which is basically going to be 140% Of the root elements font size which we know is 16 pixels so do 140% time 16 pixels and that's how many pixels we just made that font size too all right looking back we're we're getting closer we're not we're not too far off I think the next obvious thing that's going on that we're missing is this button cuz our button

looks terrible uh in comparison so let's go ahead and make a button that is about the same size here and also has that background color we've Already selected the button so that we could give it um white text but now we can just uh go ahead and grab this color code that we used for the H4 up here and apply it as the background color to the button so we'll give the background color that light green you can see that there's by default this border that looks pretty terrible so we can set the border to

be equal to none that makes that look a little bit Better and then there's more spacing uh than we have here around this text so that's a good use for padding so all we need to do is come in and add we'll say 10 pixels of padding that looks roughly correct and then finally you can see that this has a border radius so the button has curves around the edges and it's equal to kind of the size of that container so remember we put some padding around the edges of this container so the new um

Size that we're going to have is we should be able to just say 100% I believe so let's say the width is going to be 100% And yes that's going to get it get us equal to that uh parent container so at this point we just need to add a border radius of call it five pixels and I think our button is looking pretty good so um it it looks like we're a little bit wider than this right here but I'm not too worried about that we Have the perspective uh pretty good and the most

important part is that it's 100% of the container so I think at this point we have all of the colors um in place let's just check that yes we do so we have all the colors that we need and our font family is correct now we just need to do two more things we need to to get the font sizes and font weights um a little bit better and then we also need to get everything spaced out in this uh price and the Frequency horizontal to each other I'm going to go ahead and say that

this top section is completely done it's not you know perfectly aligned with this design but it's very close um and part of this is we're looking at a much larger version of this so um we're never going to get it like exactly perfectly it's just not worth our time um but down here let's go ahead and start working on this bottom left box so this monthly subscription um that looks okay a little Bit heavy in font but I'm not too worried about it but there needs to be some space between it and the price so

let's target this right here and put a margin at the bottom of it and the way we can do that is go find in the HTML uh the tag that we want so the bottom left section and like we did in the top section we can just Target individual elements so we'll Target that and then we want to use a combinator to say um that we want to Target the H4 Potentially um let's see what we have here so we have the monthly subscription is an H4 and that's the only H4 in this entire section

so we're pretty safe to Target it with the combinator and now we want to give it a margin on the bottom of call it 20 pixels um I think that's pretty good maybe a little much so maybe we'll go with something like uh not five but 15 pixels okay I like that and now the next part is we're going to take this per month and drag it up onto the Line that the $29 is on so to do that we once again Target the bottom left section and actually no we're not going to Target that

we now have the this individual price container um so that we can work specifically with this uh layout and what I want to do is grab the price frequency right here so we'll Target the price frequency and I want to display this as an inline block because I want it to come up on that line uh next to The $29 and at the moment um it's not doing it because the $29 is not an inline block so we can Target both of those we can say price frequency um and the actual price to to both

be in blocks and now they're coming um onto the same line and since we have both of those elements within this div container the price container we can just say on the entire price container that we want A margin on the bottom of call it 20 or 10 pixels what you'll see here is that the per month is kind of aligned to the bottom of this $29 in a quick way um to do this you know if if we were using Flex X Box this would be super easy um but a kind of a quick

hack to change this is set the position of this element to relative which then allows us to uh basically if you remember from the first video of the CSS crash course we talked about how Relatively positioned elements um you can set them basically relative to themselves so if we give it the top property and then we want to bring it upward so basically want to do a negative amount of pixels and we say we want to bring it up maybe three pixels you'll see that that per month kind of goes up a little bit so

uh watch the per month and I'm going to uncomment or I'm going to comment this out it's going to go back to the bottom and then I'm going To put it back in there and it goes up to the middle so I kind of like how that's sitting and then furthermore on that price frequency the font size should be a little bit smaller so we'll give it 8 R so that's a little bit closer um and then you'll also see that it has a little bit more space between the $29 and it's also a little

bit lighter so it's not quite as uh Punchy of a white color so all we would have to do here is maybe give it a trans or not Transparency but we could give it an opacity of maybe point8 and that makes it a little bit lighter for us maybe even 7 okay I like that and then finally a margin to the left of it of maybe five pixels and you can see that spaces it over to the right so I'm pretty happy with how we've got that spaced out um that's relatively relatively close in style

and position and I like the size of the $29 so I think we're done with That little subc component of the top of the bottom left container next up our full access for less than a dollar a day that's uh a little bit large in my opinion um because it looks like this text is even a little bit smaller than this paragraph text up here so we probably want to make this a little bit smaller in relation to the paragraph text the way that we'll do that is this is the only paragraph element within the

bottom left section So once again we will uh grab the bottom left section and make maybe even just copy this rule right below here and Target all P Elements which will be a single element and give it a font size of maybe 0.9 REM units and that gives us a nice size maybe we'll make it even a little bit smaller so 80% of the the original text size of 16 pixels and then finally we just have to bring this button all the way down to the bottom so we have a couple ways of Doing this

but um one of those ways would be you know taking this P element and just putting a margin on the bottom of maybe 40 pixels and that should bring the button down now flipping between these two I'm seeing that uh this these text right here is kind of in the middle of the top in the button so I'm going to change a few of these uh alignments here I think we need a little bit more margin below the monthly uh subscription so let's add Maybe 25 pixels instead of 15 and that gives us a nice

little layout there so it's not perfect um not exactly the same but it is fairly close and we've gotten all of the functional uh and layouts pretty good here so at this point I think we're done with the top we're done with the bottom left and now we just have the bottom right which should be relatively simple to do so the Y us piece is already pretty good I like how that's sitting it's in alignment with Monthly subscription same size as it so uh so that's good and now we just need to take the bullet

points off of our list item and align those two uh to the left of each other so let's see that how we would do this so to really show you what's going on here let's open up the Chrome Dev tools and try to just rearrange this so that we can see everything um it's a little bit weird debugging HTML and CSS in a Cod pen environment because you've got all these Different windows open but really what this uh right side elements is uh doing is looking at this HTML page so if we were to click

this um selector up here and come down and grab the entire list that we're looking at you'll immediately see that there is um some sort of you know padding and margin around this list by default so the the margin is fine that doesn't bother me at all but that green little box on the left side of all of the text is some default padding that Is added to list because generally you want those lists to kind of be indented from the main text so that's what you would want but here we don't want that so

if we go over into this style right here and we basically say padding is equal to zero you're going to see that everything goes to the left and it lines up with the text like we want it now the last thing is there bullet points that we don't want there and you can actually set the list style property and set that To none and by doing that all of the bullet points go away and so those are the only two changes that we'll have to make to get this to work so let me go ahead

and refresh the page so we get this reset because those changes we made were actually temporary and then we'll come down to the very bottom and since there's only one list in our entire HTML document we'll just Target it by tag and we'll say the padding is equal to zero and the list style is none so we've Removed the list styling by using this attribute or uh property and remove the padding on the left so it's all lining up just like our design here but what we are missing is this looks a little bit smaller

and it also isn't so um uh such an intense white color so it looks like the opacity of it might be a a little bit lower similar to this per month um piece of text so all we need to do there is say font size and we'll bring it down to uh what did we say this one Was um8 REM so 80% of the root element size or 80% * 16 pixels and then we can bring the opacity down to8 as well and I think that looks pretty pretty good there it's not exact but it

is it's pretty much in line with uh with everything at this point I think we're pretty much done um the only remaining item that I can think of is this button right here so the button is currently not doing anything when we hover over it and I want to change that especially CU That was part of the requirements so here's our button Styles um in this block right here and in order to style it on Hover we need to give it the pseudo class of hover and once we do that this was something that we

talked about in I think the first lesson of the crash course and the first thing that we always want to do on Hover is change the cursor to a pointer so you can see how the cursor changes as I hover over this Button and that's just to indicate to the user that hey you can click on this so from here we also probably want to change the color when we hover over it because the cursor is not obvious enough so we could just take this uh background color right here that's already on the button and

make it a little bit lighter or a little bit darker so let's grab that hex code and bring it into our color wheel of adobe color and let's just see if we can find like a a shade Of this that would work I think something like maybe this one on the right would be okay and if we bring that in and we change the background color to the hover state to that little bit darker color it's going to just have an effect where it's showing us oh hey you can click here and it's going to

do something and to make that even more pronounced there's a a property that you can use called transform and there's plenty of uh values that you can pass Here but one of those is going to be the scale function and we can just say like 1.1 or something like that so so we can scale it 110% and you'll see that it you know gets a little bit larger when we hover over it and that's that's even a little extreme maybe we'll just do 1.02 or 102% and I like that that's a nice little subtle indication

to the user that when they hover over and click this it will do something now right now this Button doesn't do anything but just for fun just to add something in there we can come up and use what we've learned in the prior lessons of this uh full stack road map and come up to the button and add ourselves an onclick listener and we'll pass the function alert user which we have not created yet but we'll come down to the JS section and say alert user and then we will pass an alert that says hey

you clicked the button so let's finish that one up and Now when we click this button it's going to alert the user that they clicked it so obviously not you know useful but it's a nice little addition to make this a little bit more interactive now the final thing that we could do here is make this mobile responsive and what I mean by that is if we drag this right side over to the left you'll see that it just disappears um right here and it just flows off of the page which is a terrible user

experience if you're on Mobile so this would be about the size of a mobile device so if your user you know looked at this uh Design This is what they're going to see which is completely useless to them so what you would want to do is make it a mobile design and as you see in the frontend Menor challenge it tells you that you need to design something like this now we haven't talked about mobile and responsive design quite yet and I'm going to cover that in a completely Separate video I think that might be

the next video after this one so for now we're going to keep it just desktop only but in future challenges future front-end Menor challenges we will make that Ro uh we will make this mobile responsive now there's one more thing that I want to do because it's quick it's easy and it will give you at least a little bit of a win here in terms of uh being able to share this and show it off so if we come to GitHub let me open Up a new tab and go to GitHub if you followed along

with this full stack road map um from the very beginning I had asked you to create a GitHub account because you're going to need it as a developer no matter what it's just kind of expected of you to have a GitHub profile so if you've already got one great if not go ahead and create one and let's go ahead and click create new repository right here and we'll say uh pricing Card frontend Menor challenge is what we're going to name this repository and we're going to call it an implementation of the frontend Menor code Challenge

and we're going to make it public and you don't really need to initialize any of these but let's go ahead and add a read me I'll just show you what that is and you click create repository so we're going to go through Uh Version Control and how to actually get this within the terminal a little bit later in the series but for right now we're just going to use github's uh UI or user interface to post our code and then deploy it to GitHub pages and what GitHub pages is going to do is it's going

to allow you to host this challenge you just created on the web and share it as a URL so here is our initialized repository every repo or repository is Going to have a read me or at least it should and this should give an introduction to what this repository is all about and often times when you're building a web app the readme will give instructions on how to run it locally and how to develop it and you know you get the point so within the repository we obviously could make files on our local computer and

then use Version Control to push the files up to this interface but for right now we're just Going to add a file and we're going to click create new file and this one is going to be called index.html so this will basically be um all of the HTML that we just created and index.html is the default HTML document that GitHub pages is going to look for when it's trying to serve it on you know the live URL so it needs to be named this and from here if you were to go back to our HTML

and copy it all and paste it in here we have the body Section implemented but since code pen already implements the head tag and the um body tag that's not going to be here so we need to add those pieces in order for this to work so the first thing that I'm going to do or actually let's let's come back and write out that structure so basically we'll come to the top and we'll say that we need an HTML tag and we'll cop this one and put it at the very bottom and then furthermore let

me zoom In a little bit so you can see what I'm working on and then after this we will need the head tag and we'll just we'll call it uh my front end or no we'll say pricing card will be the title which is going to show up in this little tab when we're viewing it live and then we'll close out the head tag we'll come back to this in just a second to add those fonts that we put in and Then we've got the body tag which is going to be closed all the way

down here at the bottom and then lastly let's just indent everything to a proper level and now you can see that we've wrapped everything together in this HTML the last thing we're going to need to do here is link up all of the style sheets and the fonts so if we go back to our pricing card go to settings HTML we're going to need all of that stuff that we had in the head And we're going to put that right after the title so you can see we have these two link tags and then furthermore

we're going to have to link up our uh CSS stylesheet that we'll put in in just a second so the way that we do that is another link tag and I believe the um href is going to be style.css which we're going to create in just a second and this will be a stylesheet so we'll close that off and what this means is basically I want you To pull in uh the file called style.css in the directory that is um basically hosting this index.html file you'll see what that uh means in just a second so

for now let's go ahead and commit this new file and go down to add another file and this one is going to be style.css which is what I just talked about how we linked up to that within our HTML and from here we should be able to Just paste in all of this CSS right here that we had created so nothing nothing else to do here we can just go ahead and commit that file and then finally we need to add our JavaScript file so um we added just a few lines of JavaScript down here

but in order for that to work we need to actually connect it up to our HTML and the way that we're going to do that is go back to our HTML file click edit and then come down to the bottom of the body And this is where we need to have um our script tag to do that we just type out a script tag which is not self closing there's actually two pieces to it and we need to give it a source and we're going to say um uh let's say just index.js is what we're

going to call our JavaScript um document so commit those changes I believe that should work um so long as we go to the main file or the main directory and add that Javascript File so we need to name this index index.js as we just referred to in our HTML and then we should be able to paste in that function that we created and commit the file from here um this is a complete repository I believe unless I miss something but we'll find out in a second now the only thing that we need to do is

add another Branch now this is um a little bit complex we're getting into Version Control branching but basically The rule here within GitHub is if you make a branch called gh- Pages or GitHub Pages it's automatically going to look for you know the index.html file on that different branch and it's going to deploy it automatically for you so it does a lot of the heavy lifting and you can for now kind of just think of it as behind the scenes magic but we will later learn how this all works so we're going to create a

branch called GitHub pages And we're going to create it from the main uh Branch so it's going to copy all the files uh over okay so at this point we've got all of our files in GitHub pages and if I did everything correctly which usually does not happen in coding um it should show up down on this GitHub Pages link so let's see if we click view deployment awesome it looks like our card actually did deploy correctly with the Styles cuz it's all styled and if we Click sign up hopefully we'll get the alert so

awesome we have um our deploy link which you can just copy and paste this link up here and share it with anyone and they can see the project that you just worked on you could also submit this to front-end Menor if you wanted to to get feedback on your project um so awesome we've got something deployed and and shareable [Music] as you saw in the intro our goal as web Developers is to avoid our users hurting their eyes after they look at our web application on a desktop device a tablet a mobile device or whatever

they're viewing it on let's take a look at some of the prerequisites it's basically just HTML and CSS which we covered um for the most part in the prior lessons of this series now let's talk about this for just a second on what we're going to be covering here because this is a massive Topic that I cannot do um Justice to if I'm not defining exactly what we're going to be learning I'm going to start on the right side of this screen um and as I said I am not the best designer designer in the

world um graphic design is generally a painful experience for myself um I've put together a few decent designs over the years but nothing that you know I I could call myself a designer in any form of fashion but the good news is as a fullstack web Developer you do not need to be a great graphic designer for that reason I'm not going to teach you the design side of things and as we've talked about um previously in the series we're going to be going through and making some of these challenges with HTML CSS and even

JavaScript so this is frontend Menor and this is one of the designs that we're going to create after we learn about CSS grid and flexbox over the next couple videos and you can see that there's uh a Responsive design here we're going to talk more about that in just a second likewise we have this challenge right here which is just another um looks like crowdfunding page so this will be a fun one to do and what you'll notice here is that as we're going through through our course here we're leveraging existing designs we're not trying

to do this on our own and that is the point of this video is to teach you how to leverage those existing designs and make sure That um everything is responsive and looks good on all devices that you might see it on so here are the lessons that we're going to learn in this video first off what is responsive design now you probably have a a general idea of that but we'll dive a little deeper into it next we'll be talking about mobile first versus desktop first designs and honestly it took me years to figure

out what this actually meant which um looking back is is kind of silly because It's not that hard but uh we're going to talk about that so mobile first versus desktop first next up we'll talk about CSS breakpoints how they relate to Media queries and how we actually write media queries within our web apps and then finally I'm going to leave you with a responsive design checklist this is not going to be super detailed just a highle checklist that you can go through to make sure you're covering your bases and a little project what we're

going to do Is take our design from a previous video so it was the previous video I'll link to it up here where we designed this pricing card and what you'll see with this pricing card is as we resize the screen it just gets cut off so I'm going to teach you in the challenge at the end of the video how we can take this situation and turn it into this one where as we resize it gets close gets close and then boom it breaks and it looks a lot better on a mobile device Something

that your users will not be angry about let's go ahead and dive into that question of what is responsive web design and the answer to that at least in my head I like to keep it simple so that we can remember it if your users um hurt their eyes looking at your web page on a desktop device or a mobile device or a tablet or whatever they're viewing it on then you have not designed it responsibly so that is a good little way to remember what responsive design is All about now here's the thing it's

2021 and there's a lot of website Builders there's you know Squarespace there's Wix WordPress um a bunch of other website builders that kind of take care of this responsiveness for you and for that reason most websites nowadays are responsive and they look pretty good so I had a hard time actually finding a bad example of responsive web design for that reason I created one that's not going to be anything um crazy but let me Close out a few tabs here and what I created was this you know very basic example of bad web design but

a few things that you'll notice here is as I make it larger and larger so this is a pretty big screen I'm working on you'll notice a few things so first off as my eyes read across this text I have to cover a lot of real estate on the screen to actually get through one single line of text and that's kind of a no no when it comes to responsive web design you Want that text to be you know generally less than we'll call it 700 pixels um so it needs to be you know in

the middle of the screen it needs to be narrow enough for your eyes to not have to basically move great distances to read it so that's one piece of this another piece is you see this nav bar up here we've got a couple links on the left and a couple on the right and they are very spaced out to the point where it's it's almost too spaced out so those are a Couple issues going on with this um on a very wide screen now if we make this more narrow you're going to see something that

is just going to hurt your eyes which is not the point of responsive design so as we get smaller this could be a mobile device of some sort you'll see that we have two columns here and that's not going to work on a mobile device you want to have most content to be you know full width on a mobile uh screen and and then also you Have all of these links up at the top and the contact link is almost getting cut off to the point where you can't even click it or see it or

anything so that's a big problem if we were viewing this on a mobile device now what I did was I went ahead and improved it a little bit so this is the improved uh version of this design where you'll see on a wide screen the article text is only a certain width I think I made it something like 650 pixels wide as a Max Maximum and you can see that we can skim this text without you know moving our heads from left to right and then also you'll see that the Navar has has been brought

in so these links are not you know at the very edges of our page and then as we resize this you're going to see that um everything changes so right around here I believe somewhere right there so you'll see at this break point this column goes under the main text which is going to be a little bit easier To see and then also you'll see The Links at the top are going to turn into a navigation menu that it doesn't do anything because I didn't want to spend the time to do that but this would

be like a drop down so that you could see the links there and then I left the home link so that you can still navigate that way so even on a really small device you can see that you know most of this looks pretty good now obviously this is not the most visually pleasing design in the World um it's not meant to be it's meant to show you generally what responsive design is to get a better grasp of what this is all about let's take a look at really good examples of responsive design and I'll

point out a few things that are good about them the two portfolio sites we're going to be looking at are um Cassie Evans this is just a really nice looking site and Jason langdorf I think I said that right I don't know either of these people but I have found their portfolio sites and they're just really visually pleasing they've done a really good job at responding to different screen sizes so as we look at this um let's go ahead and break this this window out so that we can kind of resize it but let's just

take a look at how these websites react to different screen sizes so here is uh Cassie's website and this is the homepage you'll see that as we resize this to a more mobile device that big Text is going to get broken out to the main portion and we're going to get rid of that image right there so it's a little nicer to see on a mobile device and then as you scroll down you'll see everything is kind of full width if we were to bring this back to a desktop now it's got a nice little

layout so you kind of get the point this is just a really nice uh example of good response of design right here likewise uh Jason site is pretty good in this respect so You'll see there's this picture here on the left on a desktop device and as we resize it's going to get put on top the button gets a little bigger so so it's easier to click on a mobile device and as we go smaller and smaller you're going to see that it's really easy to navigate around if we click the blog you'll see it's

the same thing um on a mobile device it looks really nice and everything is easy to click um on a desktop it's also really nice and you Can see that it's in the middle of the screen this was what I was talking about earlier you don't want your text to be the full length of a desktop device because some of them are going to be huge screens and you'll have to move your head to read the text in the first place next up we have to talk about mobile first versus desktop first web designs when

I was first learning I'll be honest I could not figure out what the difference between these were um Everyone was talking about it and saying oh you want to do mobile first mobile first but I never understood what they were talking about and it wasn't until I realized that these concepts of mobile or desktop first design has nothing really to do with the design phase of a project and it has everything to do with when we start writing our CSS so it's really important when you're you know learning all these Concepts to really separate the

design phase from the Coding phase of a project you don't want to get into the um situation where you're trying to design something and code it at the exact same time because after all designing something is very right brained and coding something is very left brain so you're going to get to the point where you're just in complete confusion if you're trying to do both at the same time time so my rule for myself at least is before I write any code whatsoever I need to have at Least a basic visual representation of what I'm

trying to create but if you're a very mediocre designer like myself or if you just have no design skills whatsoever what do you do you know do we actually try to design something or do we just hire someone to do it that's a question that I was asking when I first started in my opinion you really have three options when it comes to you know getting that first visual representation of your web page in front of you number One you can hire a designer and have them design it for you but in most cases especially

if you're watching this you don't have the time to go figure out what designer uh you want to hire and then furthermore you know you don't need to pay anyone to learn how to code so that's kind of out of the equation that's for later down the road when you're trying to actually build a product and sell it and you need to have a really professional design built the Second option is to browse the internet for free designs and that's what we've done with the frontend Menor challenges this is a great way to kind of

Outsource that step for free and what you can see is we've got these designs that we're going to be creating already built for us and we don't have to think about them at all as we scroll through this you'll see that there are desktop versions here and then there's also mobile versions so that you can see how do we want this to Look on both uh sizes of screen if you're not super worried about what you know your end product is going to look like but you want to still make it mobile responsive you can

put together a wireframe and you can use a tool such as figma um so this is a really popular place to put together a wireframe or even a mockup which is a complete representation of what you want to build but usually pencil and paper is good enough for a basic wireframe and your Goal with a wireframe is to just get a general idea of where the elements that you have on your page should be arranged based on the size of theen screen so I'll put something up on the screen just a basic wireframe that I

created for we'll just call it like a Blog where you have a sidebar and you have some regular content and you can see a desktop version and a mobile version and this is entirely sufficient if you're just trying to get a basic understanding of What you're creating now like I said if you're trying to uh build out a product or something or if you're a great designer you can use a tool like figma which is going to allow you to put on uh put together full on on mockups and the difference between say A wireframe

and A mockup is a wireframe doesn't really care about you know the colors and the fonts um all that detail it just cares about kind of the layout of the elements on the page now a mockup is a full-on Representation of what you're trying to build so a tool like figma or adobe XD or sketch or a couple other different uh good tools for that can allow you to create full-on mockups like the one that we're looking at here with frontend Menor so this has not been coded yet but it's a a perfect visual representation

of what we do want to code and you can do that with those tools so coming back to the original question what's the difference between mobile first and Desktop first design you see with all these mockups we have a version of the desktop and Mobile on both so does it really matter which one you create first well the answer to that is you're asking the wrong question now this took me a long time to realize but mobile first and desktop first has nothing to do with the actual design phase it has everything to do with

when you start writing that CSS and when you put together your break points so in order To understand these better we have to dive into something called a media query with CSS and along with that concept comes um the concept of breakpoints to better understand what I mean when I say breakpoint let's look at a code pen that I put together to explain it now if I said said I want a breakpoint at 600 pixels what I mean by that is as the screen gets smaller or bigger than a width of 600 pixels I want

to have different CSS rules for both of those so In other words if I'm on a mobile device or a desktop device I want different CSS let's do a quick review so let me come to a page that I'm I'm not really using here so let me close out a few of these um this is just the web docs for CSS we're going to right click and inspect and then go to the console and if we were to type window.in with it's going to give us a number and that number 714 is the visible width

of the screen So as we resize this so we're kind of pulling it to the left and right and resizing it we can run this again and you're going to see we get a different number so now it's only 356 pixels wide so that's what we talk about when we say the the viewport with so what I've done is I've written a little bit of JavaScript here to make this slightly bigger for us to see and what I've done here in the bottom is basically said when it resizes the screen I want to Change the

content of this up here so I've got a span an HTML span that has a number in it and that's going to be populated by the window.in withth property every time the screen resizes so in effect you're going to see as I drag this this number is going to uh update live and also what I've done and we're going to learn more about what this is is I've written a breakpoint at a minimum width of 600 pixels and I've included some different styles within That breakpoint so one of those is going to be um the

H1 tag is going to have a color of red on screens that are bigger than 600 pixels or equal to and then when it is not so a mobile device we're going to have a color of green so you'll see as I resize this we get closer to 600 so we're about to hit it and when I hit 600 it turns green so we'll go back up turns red back down it turns green so that is the basics of a CSS breakpoint now of course changing the color of some Text based on the screen is

not really that useful and you probably won't see it all that often but what you will see is see CSS that affects the layout of your HTML changing on different screen sizes let me go ahead and uncomment um some of the code here that I've created and what I've put in here is a couple of pictures these are just placeholder pictures um from the placeholder.svg so when we say mobile first it's all of these rules at the top we have a width Of 75% and as we come down into this break point of 600 pixels

you're going to see that the image width is going to be Auto which basically means it's going to fill its container so in effect our break point at 600 pixels is going to say okay if it's 600 or greater I want to have um these image images sitting next to each other otherwise I want to put them uh 100% width of its container and they'll stack on top of each other so as we Resize this we get closer and closer to 600 it's going to change so watch what happens when we get below 600 right

there you'll see that the images went to 100% width or not 100% width uh 75% width and they're going to stack on top of each other because they no longer fit next to each other on the screen so that's a good example of a basic CS breakpoint and how we can use it to rearrange the layout of our page so you have a basic idea of what a Breakpoint is in CSS but the question becomes what breakpoints do I actually use and there's not really a simple answer to that let's take a look at this

web page right here this is screen sizes UMES there that's pretty clever you're going to see that there are a lot of different devices that we could possibly build our web page for and there's no way that we can go through all of these there's hundreds and hundreds of different devices there's no way that we Can optimize for all of them so we have to do our best at guessing you know which screens do we want to set our break points on and design them a little bit differently in general mobile devices are going to

be somewhere in the range of 320 to call it 480 pixels wide you'll have tablets between 6 and 800 pixels you'll have you know regularized laptops around the you know 1,24 to 1440 pixel range and then bigger desktop devices are going to have a width of Call it 2500 pixels so those are just generalizations um but as you can see on the screen there's all sorts of different numbers and I don't want to get into the discussion of things like pixel density and what is the difference between the actual width of a device and the

adapted pixel uh interpretation for us as web developers it's a pretty complicated topic if you can just remember those guidelines that I just mentioned you should be good so as You're deciding what break points you need to use for your um web page or your web app you have to ask three questions in my opinion so the first one is going to be will the web page even be used on a mobile device and is that your intention there are plenty of apps that are not meant to be used on a mobile device so think

about budgeting apps or you know big spreadsheets things that just don't look very good on a mobile device you probably don't want to waste Your time energy and maybe even money to create a a pleasing mobile experience you're just going to say to your users hey this is not meant for a mobile device you should be using our application on a desktop another consideration would be are you offering a mobile application if you are you know a good example might be something like YouTube so the YouTube application on a mobile device is really nice to

scroll through and use but their web version so If you were to open up the browser and then type in youtube.com rather than opening up the mobile app it'll still be a semi nice experience but it definitely won't be as great of an experience as opening the mobile app so if you're creating something and you plan on making a mobile application you may not have to put quite as much time and thought into how it looks on different screens the second question you might ask is is it actually important to have A different design for

each screen if you've just got a basic website that just has text on it and you don't have a lot of images or anything like that then it may not be that important to have a bunch of breakpoints you may be able to get away with one design for all devices and it'll work just fine and the final question you have to ask is are there standards for this you know why can't I just use the industry standard for what everyone is using for breakpoints and Unfortunately given the fact there are so many different screen

sizes and screen sizes are constantly changing as new physical devices are released to the world there's not really an industry standard that we can go off of while there are no industry standards per se there are these things called CSS Frameworks and as I talked about in the prior videos we're not going to be covering in depth any one CSS framework given the fact that I don't want to lock You into any one thing I want to teach you the fundamentals of CSS rather than trying to teach you a framework but having a framework um

to piggyback off of when it comes to break points is a very smart decision at least in my opinion these guys that create the Frameworks are thinking about you know break points all the time they have to incorporate those break points into their own Frameworks and therefore if it's good enough for them then it's good Enough for me and hopefully everyone watching this given the fact that breakpoints are not an exact science and these guys think about it a lot more than you know someone like myself would one of the most popular Frameworks or at

least longstanding CSS Frameworks is bootstrap now bootstrap you'll find it in several tutorials you can kind of read up on it it's basically you know a CSS framework is all about making your job writing CSS easier so a lot of times These CSS Frameworks are going to create grid systems um in layout systems so that you can just have predefined classes that you can pass in to make your sites mobile responsive and stuff like that so with that they have their standard set of break points and if you scroll down to um on bootstraps documentation

it has a list of these break points and you can see that there are are about five of them so by default um bootstrap is what we call mobile First and you're going to start to catch on to what this means and when I say mobile first it means that we are first designing our CSS for a mobile device and then what we're saying is anything greater than 576 pixels will have these Styles and then anything greater than 768 will have these different styles so basically you're starting with the mobile device you're writing your CSS

and then you're writing little blocks of code with these break points to Define Oh what happens when we have a bigger device so that's kind of what we mean when we say mobile first so here are the break points got 576 768 992 1,200 and 1,400 for small medium large uh extra large and XXL so those are the standards for bootstrap and they're going to be our standards but the question is do we have to use all of them and the answer to that is no we don't need to use every single break point here

we just need to use enough break points to make our Designs look suitable on all devices and based on what you're creating that may be one or two breakpoints or it may be all of these break points that you have right here if we're looking at an example like this pricing card that we created I'm not sure really what happened here um but anyways we have this pricing card and for this we really only need one break point now if you're incorporating this into a application you might have a couple more but really We just

have two states that we have to create we've got this fullon state which can be on basically tablets and above and then we have this mobile state where everything's stacked on top of each other so in this case we only had to come down here and write uh one single break point so we have the mwidth being 576 which I got from from right here so anything greater than a small device or a mobile device is going to have X Styles all right so we've been in theory Land here this whole video and we've been

talking about the the design aspects and break points and how do we choose them but we haven't actually written any code yet and I want to do that now I want to show you exactly how to write a CSS breakpoint and how that relates to this thing called media queries so I'm going to come to my code pen and make a new one so that we can just have a playground to work in and then down here in the CSS this is where We're going to write our break points but we first need to have

some HTML so uh we'll say responsive web design example and from here let's just put in an H1 welcome to the tutorial all right so we have some HTML to work with and now down in the CSS section we can write a break point and the basic syntax of the CSS breakpoint is this so what I copied in here is a what we actually call a media query and The breakpoint is the number that we pass in as a minimum width to that media query now we have a little bit more to learn about this

syntax because we have to ask ourselves what is this at media actually mean and if we go over to the mdn documentation let me close out of here um this is what we've been using so far in this series and you can come down to technology CSS and then if you come to the CSS reference so in the CSS reference the first paragraph has all Sorts of links that we can go to and it says use this reference to browse alphabetical index of all the properties pseudo classes pseudo elements data types functional notations and at

rules and this last one the at rules is what we want want to click on so what these are they're CSS statements that instruct CSS how to behave so that would be fitting into our categorization of media queries uh perfectly so if we scroll down you'll see down here um in the Index these are all the different at rules or whatever tells the CSS how to behave and if we click on media that's going to take us to the media query page so this is an at rule that can uh be used to apply part

of a stylesheet based on the result of one or more media queries all right so then we come down to the syntax and you're going to see some pretty complicated stuff being written um but this is the basics of a media query and if we come back to Our um example here you'll see the basic syntax just has at media and then in parentheses we write whatever rule we have and then down here this is where the CSS is is going to go so if we wanted to specify some CSS for our H1 we're going

to put it there so anytime the screen is greater than 756 pixels the text will be red so if we shrink this it goes back to black and then we go to Red so that's the very basic syntax but in this rule we're actually Selecting every type of media device so if we go back to the documentation and let me drag this over so we're not getting so confused with our tab s um but if we come to the media Rule and scroll down to the description you'll see that there's this concept of media types

so we have all print screen and speech and you can actually Define within your media query which device types you're actually trying to Target now in our case when we wrote this one We're just saying we want all devices now you can also specify in that rule that you only want to Target um certain devices now we're going to be working with screens uh mostly that's like a mobile uh like an iPhone or Android a tablet or a desktop screen so that's kind of our Forte as web developers but you also have print and speech

which are some more um specific use cases that you can Target so let's see how we could change our rule to Target those devices So if we said media all and this is going to say that we want to talk taret all uh media types so this is the equivalent of this those are the same thing but if we come in here and we say media print and this is only going to apply to um print is basically like a print preview view on a screen so as you can see our rule down here of

the color red no longer applies to this text because we're only targeting print media devices likewise we could put in speech And and that's also not going to work because this is not a speech media type but if we put in the word screen it's going to now apply because this is a screen um and this rule should apply to it now with these media rules we can add some logic in here I'm not going to get too deep into this but I want to at least show you what it is so let's say that

we wanted to Target only screens um at a width between 400 and 600 pixels now we could do that in one media Rule And the way that we would do that is by writing some logical operators within CSS so if you remember with JavaScript if we came down here into the JavaScript section and we just typed in some basic code we can use conditionals so we can say um we can create an if statement that says if my VAR is greater than 10 and my VAR is less than 100 then we'll do something within this

code so you can see that this little and symbol is The Logical operator that We're using now CSS actually has logical operators just like this so we don't need this JavaScript code um anymore but we can rearrange this rule to have those logical operators in Target multiple conditions so let's go ahead and do that let me get rid of this comment um the first thing that we're going to do when we're having these logical operators we have to put this operator called only so only when it's a screen is when we're going to use this

Rule and then we can Drop down onto some new lines just to separate these things out um we'll put our brackets down here and now we can add another one here so we can say and Max width is something like 800 pixels so let's just change this we'll go what did I say we wanted we wanted something between 400 pix pixels and 600 pixels and now what we're saying with this rule is so at media so we want an at rule for CSS we only want to Target screen media types which is what we're Looking

at here and we want to Target something with a minimum width of 400 pixels and we want to Target one some something with a Max width of 600 pixels so basically what we're saying here is only screens between 400 and 600 pixels should this H1 CSS rule apply so if we make the screen really big that's not within those bounds but as we go down and you can down here right at the bottom you'll see a little pixel indicator as I scroll but as we get Between 400 and 600 we should see it turn red

and then we go back to black as it gets smaller than 400 so you can see how we can use CSS logical operators with our media queries to Target um different types of conditions now you you can also bring in other CSS at rules so if we go back to our documentation we'll click back um this is our our at rules page and you can see we have media queries but we also have things like import and supports so if we clicked on Supports this basically is an at rule that lets you um check to

see if a specific CSS property is supported in the browser that the user is using so a good example of this is Xbox and CSS grid which we'll learn about in the next few videos those are not yet um supported by all browsers now most of them do but things like Internet Explorer I don't think do and maybe a couple others with CSS grid so you can see in this example we can use this to Basically check whether um the display supports display grid property and then if so we will use that property within our

CSS so as you can see me media queries and CSS at rules can give us a whole lot of power when designing our Pages for different devices um media types and different browsers so we're not going to get too far into it because that's not the point of this video but I did want to show you the basics of it just so that you were aware now at this Point I want to take you through we'll call it the 8020 guide of media queries and CSS breakpoints I'm going to show you how to take these

standard break break points that we have um from the bootstrap framework and incorporate it into an actual CSS document to do that let me put some images on our page so we'll say welcome to the tutorial and then we'll have a bunch of just placeholder images with uh on the screen so what we want to do with these images Is make them responsive based on the screen size so something that I can think of is maybe on mobile devices we want it to be you know 100% with just like we're seeing here where they're vertically

stacked then maybe on tablet devices we can have two images per row and then on a desktop device that is much larger we could have uh we'll call it four Images uh in one row across the page as I just described we want to have three different states of our web page We want a mobile display a tablet display so two images and a desktop display four Images so we have three states and that requires two CSS breakpoints to achieve now you'll remember bootstrap has you know five of them we only need two of these

because we're not making a super complex design and that is a good demonstration of how you have to look at you know what's your purposes and then decide how many break points you don't want to just throw in a Bunch of break points just to have them there the first thing we need to do is put in a basic CSS reset now we talked about this in Prior videos of this series so be sure to watch those if you haven't um but it's just changing the Box sizing so that we can uh fit these images

reliably uh next to each other without any unwanted Behavior the next thing we'll do is We'll add in our breakpoint templates if we go to bootstrap and look at what we Need here I think what we're going to do is grab this one right here so I just want to mention here this top one this is not actually a break point that we need this is kind of just default so as we talked about this is a mobile first uh approach where we want to design the regular CSS or the default CSS to apply to

a Mobile screen and then we will conditionally style any screens that are larger than a mobile device with these break points so we're going to grab the Greater than or equal to 576 so that's basically saying what happens on anything greater than a mobile device and then we also will probably grab the 992 which is basically saying everything greater than say a tablet so mobile tablet and desktop is all we need to cover so we'll say 576 and 992 let me just jot this down here so 576 and 992 so I don't forget and now

we can write our media queries so like I said you can just use this basic syntax You don't have to put any of those logical operators in there and we're going to say minwidth is 576 pixels and then put some brackets to break it down we will copy this put it right below and change this number to 992 we can get rid of the comments here and we should be set up to have our CSS breakpoints now now right now the pictures on the screen no matter what size screen we have are not going to

be Responsive now you'll see that they come next to each other on this larger screen and that is just because naturally an image is I believe an inline block element which means it doesn't have to have its own line and these are I believe 500 pixel uh images yeah we put in 500 pixels for these images using the placehold placeholder service and therefore if the screen is bigger than say a th000 pixels so 500 plus 500 those inline blocks are going to wrap up onto The line so this is nothing of CSS that we've written

it's just the natural flow of HTML so in our mobile first approach let's go down to a mobile device which is going to be right here and what we want to do within this CSS we'll go right after the CSS reset and what we will do is we'll Target all images on the page and we'll give them a width of 100% And what that's going to do is it's going to resize all of the images to be 100% % of the viewport and you'll notice There's a little bit of padding that's just natural uh a

default padding and margin of this browser in the code pen environment but we have these as 100% width now as we resize this you're going to see that it maintains that 100% width all the way up to these larger screens and of course this is a way too large of an image to have on the screen so we want to wrap these on you know next to each other on the lines so what we'll first do is we'll come in to this media Query which is basically going to say anything greater than a mobile device

is what we want here so we'll Target images and what this is going to say is if the screen is greater than 576 pixels we want to override the original image style and put it to something else so in this case we'll give it a width of um we wanted two per screen so we'll say 50% and now we should see these wrapping um no they're not wrapping let's change it to 49% okay there we go now the reason we have to do 49% this is not going to be a problem once we learn flexbox

and CSS grid but it's just uh White space and a couple other things that are causing this so um don't mind the fact that it's 49% it should technically be 50 so as as you see here on a mobile device we have 100% width and they stack on top then as we resize to be greater than 576 they will break onto two or two per row and then now we want to make it four Per row once we get above 992 pixels so right now it's going to stay as two per row no matter how

big we get but if we come down here and add an image style and give it a width of 24% you'll see that as we getar larger it's going to put four per row so now we see we have one per row here two per row on a tablet and four per row on a desktop device so we've successfully written a mobile first approach to CSS and we've designed for three different Screen sizes now I want to walk through how the CSS interpreter is actually working here because um sure we can write these break points

but we really have to understand what's going on otherwise we're going to make a silly mistake that I'm about to show you so looking at this CSS we have to ask ourselves how do we actually read this or how would the the browser be interpreting this so by default we've got all these images here and when CSS Is read we'll we'll first read the CSS reset we'll make the Border box um different and then as we come down we'll say okay I have an image CSS selector giving it a width of 100% so so the

CSS interpreter is going to say okay great the width of all images is now 100% now as we come um further down you'll see the media queries and it'll the browser will basically say so is my total width of the viewport greater than 576 pixels um let's go ahead and make That true so now we're at the biggest size and so as the browser is reading this it says okay yeah it is bigger than 576 so let's go ahead and apply this rule so it says all right now images are not 100% we're going to

replace that with 49% and then it reads even further down and it sees this next media query and it asked it it basically ask itself okay is it greater than 992 pixels the viewport width of the browser the answer to that In this case is yes so it's going to say okay now my images need to be 24% width and we're going to replace these previous two rules up here so what we're doing is we're walking through that cascading concept of CSS where it's read from top to bottom and the last rule so long as

that last rule has the same specificity as rules above it is going to be the one that applies so where this is important is the order of the break points that you're adding or the media Queries so if I were to take this last media query and place it above this one things are going to change for us and that is because of how the CSS is read from top to bottom so in this case what you'll notice is on a mobile device we look good it's working fine but as we go up we're only

going to get two images per row no matter how far or how wide the screen gets and you might look at your CSS and say well why is that we've defined that anything greater than 992 Should get a width of 24% but the way that CS s is red is top to bottom and what it's doing here is it's saying okay first we have this rule here that sets it to 100% then we're going to ask ourselves is this screen bigger than 992 the answer is yes so now we're going to set it to 24%

then it reads down once again and it says is it greater than 576 and the answer is still yes because this is inclusive of all screen sizes so now It's going to replace that image width with 49% and override the 24% right here so the lesson here is that your media queries the order of them is very important and you're going to need to do two things so first you need to add your media queries at the bottom of your CSS stylesheet and the reason is you've got all these rules for the default style which

would be the mobile screens and you need these at the end so that they can override those Styles and then Second if you're going going with the mobile first approach which is basically using Min widths rather than Max width then you need the greatest WID to be at the bottom so you need to go from you know smallest to greatest otherwise what we just saw is going to happen and nothing's going to behave as you'd expect so at this point I want to revisit this topic of mobile first and desktop first design I've alluded to

it over the last couple of minutes what This actually is but I think we're ready to fully understand the difference between the two like I said earlier it has nothing to do with the design phase of your project when you're just getting the graphic design laid out in your wireframes or your mockups doesn't really matter because you're going to design multiple screen size designs no matter what but when we come to write the CSS the difference is going to be whether we're using media queries with a Minwidth or we're putting in media queries with a

Max width because that's going to change how we think about our CSS entirely in this case we used minwidth which is basically the equivalent to mobile first design because all of the default Styles up here are going to automatically apply to screens and since we're using minwidth that's going to apply to mobile devices now as we go up in size that's when we're going to start replacing CSS Properties according to those bigger screen sizes so so what you see here is mobile first and now I'm going to reverse it and we're going to actually do

a desktop first um approach which is not what I recommend but I want to show you the compar and contrast so if we wanted to go desktop first then we would just have to change these two to Max width all right so let's change both Min widths to Max width and you'll see that everything is working a little bit Differently it's basically the exact opposite so as we get bigger we go to that 100% % wi and as we go smaller we go into the grid which is obviously not what we want and the reason

is because we thought of it from a mobile first perspective when we built it so basically when you're doing desktop first all of these default rules are going to apply to your desktop devices so anything that is greater than this the greatest break point that you've Assigned is going to get all of these default Styles so we're basically starting from the widest and then as we go down we're replacing rules so if we wanted to work this the same as we had before we're just going to have to change the widths so all of these

rules are for you know desktop devices so we want to replace this 100% with 24% that should get us back to the point where we have the four uh four pictures per row now as we come down we're going To change the max width of 576 so this is basically referring to all mobile devices we want to make this 100% so that on a mobile device we see them stacked on top of each other and it's not working let me go ahead and refresh the page to make sure we got this oh actually this is

a good lesson so when we go from desk or from mobile first to desktop first the order of the media queries is going to change so when we had Min widths we said we want the Smallest to largest going from top to bottom but in this case it's going down this stylesheet and it's saying okay is the screen less than 576 so let's make it a mobile it's saying is it less than 576 the answer is yes so let's apply an image width of 100% then it goes down and it reads is the max width

or is it less than 992 in this case that is also true so it's replacing the width to 24% so that's why we're still seeing the grid there So if we wanted to make that work we need to put for a desktop first approach we need the largest media queries first going to the smallest and now we have our intended behavior of 100% WID on mobile and then we should get um let's go ahead and replace this last one here to be 49% and now we should have a correct design so 100% on mobile we'll

have two images on a tablet and then we'll have four images on the desktop so as you can See mobile first versus desktop first is all about how we're writing our media queries and whether we're using midwidth or Max widths in general you're going to find that the consensus among the development Community is to use a mobile first approach and the reason behind it is as you're getting into more complex designs it is just easier to use the natural flow of H ML on a mobile device um so no media queries is required and then

tweak it as you get larger because In many cases a desktop first design is probably not going to look very good on a mobile device but the um inverse of that so A mobile first design it will probably look okay on a desktop device without any modifications so in summary you're basically going to have to write less code um in most cases all right so we've covered the basics now the next question is what do I actually put within these media queries and the answer to that is I can't possibly teach It within one lesson

you're going to learn you know how to resize Things based on different devices through experience and time I'm about to show you a basic example of just that but first I want to leave you with a responsive design checklist so let's jump over here and go to the checklist so you can just you know take a screenshot of this write it down um whatever you want to do but this is what I go through when I'm looking at my Design and my web page and testing it on different devices I want to make sure that

I check all of these boxes and if you can check all these boxes you've covered 95% of what you need to and the rest is going to be you know just subtle little changes and highly dependent on how many requirements you have for your project first up we want fluid layouts this is basically saying you know what we just looked at where we have you know single images on a mobile device we have A row of two images on a tablet and a row of four images on a desktop so that's what we mean when

we say fluid layouts we want to make the content you know just look good in general now images we want to make sure that we have the right aspect ratios and we're not stretching images to be you know too wide Too Tall too big on certain devices we also want to do the same thing with text we don't want to have huge text on a mobile device where you only have you Know four or five words per line that's a really poor user experience the next thing up is Overflow so that's basically you don't want

to have any text or images or whatever cut off on the side of the screen so you've probably seen a a mobile design before where you know half the image is off the screen you want to avoid that and then uh similar to that we want full width mobile content so in general this doesn't apply to everything but in General everything That you look at is going to be stacked on top of each other rather than having columns you never really want columns on a mobile device and then finally just general usability so this is

not too hard just get a friend um someone who will give you honest feedback have them play around with your um web page on multiple devices and anyone is going to be able to tell okay this doesn't feel right this one's kind of clunky it's hard to use this on a mobile device you Know I'm squinting on the desktop to see this you should get pretty good feedback and just using a common sense approach is usually pretty good for this all right at this point we're going to apply these skills we just learned and we're

going to take this pricing Card Challenge where you can see that everything's getting cut off and it's not responsive we're going to make it responsive so the answer to this is actually relatively simple and we can do It in one of two approaches so the first way we could do it is a desktop first approach which like like I said I don't recommend that as your default way of approaching CSS but in this case we did Design This with a desktop first U mindset we didn't really think about mobile design when we were doing this

and therefore in the CSS and the HTML that has been reflected so in this case you can see that the width of this um card that we've created we uh decided That as we were creating the card and you can see it right here so we've assigned a width of 600 pixels to this and for that reason I think we can assign a a media query or a break point around that 600 pixel Mark now if we did it exactly at 600 pixels then you're going to see a design where you know we're at 635

pixels here and looks like about 600 right here and obviously there's something cut off so you want to put a little bit of a little bit of Wiggle room there so we might want to write our media query to be somewhere around 650 pixels so what we'll do is we'll come down to the very bottom of the CSS as we're supposed to with media queries we'll write at media and then we'll say Max width because we're solving this in the desktop first approach um because this will be the simplest um solution and we'll say 650

pixels so dropping down into this CSS rule all we really have to do is make These bottom the bottom left and the bottom right um containers that we created we want to make them 100% width so that they naturally stack on top of each other so I believe all we have to do if I'm thinking about this correctly is Target those two and give them a 100% width when the screen is less than 650 pixels so the IDS for this would be bottom left section so let's grab that throw it in our media query and

paste that in and then we want to Put a comma because we want to also do the same thing for the bottom right section so let's grab that and put a hashtag to Target it and then we'll make a CSS rule so right now in this media query we're saying anything any screen that's less than 650 pixels I want to Target the bottom left section in the bottom right section by their IDs and then I want to give them a width of 100% all right so at this point our screen is greater than 650 but

as we resize you'll See that it's done something for us but now we have to figure out what's going on here because we've completely lost the bottom right section it's pretty much disappeared and the reason that that is happening is because we've set explicit Heights on this card if you scroll up to the the top of the CSS you'll see that we gave the card a width of 600 pixels and a height of 400 pixels and then we also set the Overflow to be hidden which was what allowed us to make Those rounded Corners at

the bottom so what's happening here when I resized this and we're we're basically losing this right side entirely is because now when we stack them on top of each other it's greater than that height of 400 pixels and we're hiding that overflow content so it's not being shown here so if we were to come down to our media query and set the height to be Auto it's going to change Something for us I believe no that's not going to change CU we don't want to assign that to the the sections we want that to be

to the main card so we need to Target the card itself so down in our media query we're going to Target the card and now we're going to set the height to be uh Auto which is going to take That explicit height and give it its automatic height and you can see that now we are resizing Correctly but the last problem is you're going to see it's still cut off because for this card component we still do not have an automatic width so we've only assigned 100% width to the bottom left and bottom right section

so if we were to assign the width here to Auto or even 100% we should see that it resizes now a appropriately so I think what we can do is we can actually take um since we've duplicated this with we can take this height Auto and we can put this up into This Rule and then we can just include the the main card within that and delete these and I think it should work just fine so let's resize it and you can see that it works just fine and you can see that all we had

to do was add this little block of code to make it mobile responsive but I don't want to leave you hanging on this one um I said throughout the whole video we want to go mobile first mobile first so I want to stay true to that and Show you how to make this Mobil responsive from a mobile first uh perspective or strategy this desktop first approach worked pretty well because we originally created this from that approach but ideally we would have created the original card from a mobile first perspective so I'm going to show you

how to convert that so let's delete our media query that we just created you'll see that it goes back to being cut off and not being Moby responsive And now what I want to do is create that mobile first design so instead of a Max width we're going to write a media query where we have a midwidth which is going to be 576 pixels we'll just go with that so anything greater than a mobile device is going to have um whatever Styles we put in here now the cool thing about you know media queries and

breakpoints is that you don't have to duplicate all of your CSS a lot of styles are going to be applied similarly across devices so for Example the color of this button and this text and these backgrounds that's not going to change based on whether we're on a mobile or desktop device so we don't need to rewrite those likewise our text is going to stay the same we're going to have the same font style no matter what so really the only things that you have to alter between um break points is going to be layout related

properties so what I want to start with is the overall card so if you remember In the top part of the CSS we have a rule for card and right now we're giving it an explicit width and an explicit height now if you remember from a mobile first perspective everything that's not within the media query itself is going to apply to a mobile device so naturally when we're on a mob device we do not want these explicit widths and Heights so let me go ahead and comment those out for a second and what you're going

to see is that we've already done a lot Better so the the overall card is the right width and height now but we've got some problems going on within the bottom left and bottom right sections now we don't want to get rid of these widths and Heights all together so let's go ahead and take those out of the the main card and then scroll down to our media query and we'll Target the card element and paste in those rules again so now we want to give it a width of 600 and a height of 400

on any device greater than A mobile device or 576 pixels so let's go ahead and resize this and it should break somewhere around here so right there you saw it so that was where our break point was and you'll see that based on the uh explicit width and height we've given it it's not really fitting correctly so we can actually change this it should work just fine so maybe we'll say something like I don't know 550 pixels so that gets it fitting on the screen and then the height can go Ahead and stay at 400

pixels so now as we have our mobile device it's somewhat responsive and then as we go to anything greater than a mobile device it stays as this card the next thing that we want to look at is the bottom left and the bottom right section so here are the styles that we have for those and you'll see that we've given them widths of 50% each so in this case when we're on a mobile device we do not want these widths to be 50% we want them To be 100% so let's go ahead and comment this

out and when we do that it's going to have the default width of Auto which is going to be 100% so by default it's going to be 100% And if we comment out both of these I think we should start to see something that makes a little bit more sense so you'll see that we have some Auto actually no I said that wrong we cannot just use it as Auto we need the the text to span 100% width of its container so in these Styles we need to I guess go ahead and set a width

of 100% so that fixes this section and then we'll come down here and set a width of 100% and that should pull this one to the right all right so we're looking good there and I think for the most part we have our mobile design complete so I think this is exactly what we want so our mobile design is complete we just need to make this desktop design look a little bit better because as of right now it obviously is missing an entire Section so really we can just let's go ahead and delete the width

of 50% even the commented out section here and then we'll go down to our query at the bottom that says anything greater than um a mobile device and we're going to Target the bottom left section and the bottom right section and here we're going to give it a width of 50% just like we had before and now you'll see that it fits just perfectly and as we resize it it goes um It resizes perfectly on a mobile device so that is the difference it's very subtle especially because our project is very simple there's not you

know hundreds of styles but the difference between a mobile first and a desktop first design is really important and you really have to internalize that um as a full stack web developer in this video I'm going to teach you how flexbox works we'll start off by going through what's available to You what it can actually do and then we'll spend the rest of the video which will be the the majority of it diving really deep into how flexbox Works how do we calculate different things things and use all of the properties my goal for this

video is to be the most in-depth flexbox tutorial on YouTube and the reason I'm making it so in depth is because it's important I think that not only knowing flexbox allows you to uh eliminate a lot of the frustration when It comes to layouts in CSS but it'll also set us up for our next lesson which is going to be on CSS grid so let's get started this is a flexbox crash course and the prerequisites for it is going going to be a basic understanding of HTML and CSS I've covered all of this in Prior

lessons of this series so go check those out if you're unfamiliar here's what we're going to be covering in this video we're going to learn what flexbox is how it can help you out and make your Life easier we're going to go through all the basic properties of flexbox and we're going to get pretty detailed in those so that you really understand what's going on there and then finally we're going to look at a frontend Menor project this testimonial uh grid over here which going to be creating with flexbox in the next video a few

of the things that we're not going to be covering shorthand flexbox properties so there's a couple properties uh within This CSS I guess module or framework or whatever you want to call it that allow you to write less CSS to achieve the same thing and that's not our goal here we're trying to learn flexbox you can apply those much later down the road when you're more comfortable with flexbox and we're also not going to be getting very Advanced with this I have written Advanced Flex flexbox properties but we're pretty much covering all the properties um

I guess probably the Better way to say that is we're not going to be going into advanced flexbox methods and you know different layouts and all that kind of stuff my main goal is to get you understanding how the system works um and get you very comfortable with using it the obvious starting question is what is flexbox well if you have been following along you might have realized that as we're writing our CSS there's really two main components you have layout related Properties and then you have style related properties so a style property would be

like uh a color or a font or something like that doesn't really affect how things are laid out on the page but layout properties do that's how you create you know grids and you know nav bars and Footers and sidebars all of that kind of stuff so far we have not been using flexbox and our job has been a little bit difficult because we've had to use uh you know hacky ways of getting Layouts to work flexbox is going to come in and really help you out with that layout side of things and per the

mdn web docs uh flexbox is called the CSS flexible box layout module and it's a model for displaying items in a single Dimension so either a row or a column in future videos we're going to get into CSS grid which is a two-dimensional layout module within CSS and some you know might say that CSS grid is better than flexbox or bites Versa but they Really work together and we're going to cover how those work together within our CSS whatever the case flexbox and then subsequently CSS grid which again is a a future video These are

kind of the future of CSS layouts so in the past like I talked about you had to use like floats and clear fixes and inline blocks and specific widths and if you watched one of the previous videos we had to almost you know hack our way to getting items to fit Within in a container by Removing white space from our HTML these are not good Solutions they're not sustainable and so flexbox along with CSS grid come in to provide a better model for doing layouts but enough talk let me show you exactly uh what we're

dealing with here so what I've got here is some basic HTML and I really want you to start understanding this container child relationship within HTML so if we look at this we can see that we have a div element with a class of container And then we have three div elements all having the same class of item this relationship is very important the container is the parent to all three of these you know children elements to show you how this relationship is important uh let's put some width and height Dimensions we'll go with 100 100

pixels for the width and height of the items within this container and we'll give them a background color of say orange and then maybe we'll give some margin of Five pixels so they kind of separate a little bit so here you can see the three div elements these are the children elements to that container and the reason this parent child relationship is so important is because the second you enable Flex box on a container all of the child elements become what we call Flex items so this is really important and first off let me show

you what happen when we have the normal display property so right now by default each Item here and the container are all going to be a display type of block so they're block elements and you'll see as I type these in it's not going to do anything because we're basically just uh explicitly writing in what was already the default now with block elements as we talked about in Prior CSS videos of the series these are going to have certain characteristics and flex items Flex containers are also going to have certain uh display characteristics so if

We remove this display block which again these are just defaults for uh div elements and we come up to the container and we type display Flex you're going to notice that these items change and the reason they change is because by adding this single property on the uh container element or the parent we are basically making a flex container which holds a bunch of flex items the container and the items have specific um characteristics that you know normal Block or inline elements do not have in just a minute I'm going to explain exactly why these

Flex items are going in a horizontal Direction rather than vertical but for now I really want to drill home this point about Flex containers and flex items now you might ask well if I set display Flex on this container and all of these are going to be Flex items then can I also you know make the flex item a flex container and the answer is Yes you can actually have an element be both a flex item and a flex container at the same time and that's why it's important to always keep these relationships clear in

your head let me show you what I mean so if we come down to the final uh div element which currently is just a flex item and then we put in a few more divs so let's put in a class of sub item and then we're going to copy this down three times and right now this doesn't have any Dimensions but if we copy this CSS selector of item down and then we put in sub item and give it some different dimensions so we'll give it something very small like maybe 15 pixels uh wide and

tall and then we'll make the background color blue in a margin of one pixel something like that and what you'll see is that these line up within that third container because they're children of this third Flex item but at the moment these are not Flex Items themselves they are block Elements by default this brings up a very important point so if you look at our CSS we have put the display Flex property on this main container and when we do that it only turns that container into a flex item and then the direct children not

all descendants but only the direct children will be become the flex items so in this case all of these divs are going to be Flex items but the sub items are not going to be Flex items These will be the default block elements now what I can do is I can come in and turn this final div into a flex container which will then subsequently turn these sub items into Flex items as well just so that I have a unique selector on here let me turn this into item three um we'll put another class on

there and then all we have to do is come down here on item three and write display flex and what you'll see is these three blue boxes right here are Going to go in a a row just like the orange boxes are as we go throughout this tutorial I want you to keep this clear in your head this exact model that we just laid out here so let me just walk you through it one more time at the top level we have a div called uh with a class of container this is a flex container

and the reason it's a flex container is because we put the display Flex property on it now all of the items these three items right here these are Flex items and the reason they're Flex items is because their direct parent is a flex container now these sub items right here these are also Flex items but it's not because we have display Flex on the main container it's because we've put display Flex on this third item right here I know this is confusing right now now it's going to get a lot more clear as we go

through the tutorial but what's Happening Here is this third div within the container is both a flex Container and it's a flex item so it can actually serve as both types at the same time in relation to the main container it is a flex item in relation to these sub items it is a flex container with that level of understanding between the container and flex item and how we can combine those here are the flex container and flex item properties that you can use we're going to go through each of these but you have to

keep them very clear in your head when you're Going through because you have to first identify am I dealing with a container or an item and as you saw in some cases you can be dealing with both so you can actually put um a combination of these properties on a single HTML element sometimes this gets a little bit confusing and something that I had done when I was First Learning Flex boox is I had this cheat sheet that I found here um it's a really great resource I'll be sure to link to it in the

description But I just keep this open uh whenever I'm working with flexbox because it's very interactive you can you know click on different things and and see how different Flex properties work and it covers pretty much everything now as I just mentioned some properties apply to the container and some to the items this resource does not really separate that out on the left uh side right here but for each property you'll come down and you can see what it applies to so this One applies to flex containers so I use this resource keep it open

um as you're learning Flex boox it's a really good you know little cheat sheet to have in addition um as we've been going through in this course you can always look it up on mdn web dox so as you can see we're on flexbox and here's the property reference for all of the valid properties that we can use and you can click on each of them and kind of get an overview of what uh what's available and What I'll point out is this formal definition down here for each property is going to tell you what

the initial value is and sometimes that's important to understand what the default values you're dealing with are the reason understanding these default values is so important is because when we have um you know Flex items and flex containers like this putting this single rule on a container is going to set a bunch of properties um by default that you're not Seeing you know in front of you in reality when we put display Flex on this container it's setting all of the properties that I just pasted in here so it's setting a flex Direction justify content

align content items and flex wrap and these are all of the default values so you can see that nothing changed over here on the left because they were already applied by default likewise Flex items have default properties so I can come down to the Item itself which is going to be a flex item and paste in all of these properties right here and the reason nothing changed on the left again is because these are the defaults that we you know that flexbox comes packed with what we're going to do in this tutorial is learn how

we can modify the default values on all of these uh properties right here to get the intended result that we want the last thing I want to point out before we jump into our first Property is just a quick note on shorthand Flex properties so if we came down to the flex item so this is targeting one of our Flex items here and we put in something called flex and we gave it a value of uh let's see 01 in Auto this right here is what we call a shorthand Flex property and it is the

exact equivalent of writing Flex grow R 0 um Flex shrink one and flex basis of Auto so these three properties written out Longhand is the same thing as this single property written out shorthand and for this tutorial like I said we're not going to be looking at these shorthand properties because we have enough to deal with with the long-and properties just understanding how they work so just wanted to clarify that because you might see that in the Flex cheat sheet so if you came down here um Flex flow is a shorthand property I'm sure Flex

is somewhere on here um but Whatever the case just know that those exist but we're not going to be covering them I think at this point I've covered all of these you know pre-requisite pieces of knowledge to really jump into flexbox let's go ahead and get started we're not going to use this because it's pretty ugly and I actually put together a little demo here so you can check out the JavaScript for this it's basically just toggling some of the values here um and what this demo is meant to uh Explain is the main tenant

of flexbox and that is the fact that we have onedimensional um onedimensional model where we can align items on either the horizontal or vertical axis as you'll see in the HTML we've got some some HTML up here none of this is really important what we're really focused on here is going to be this piece right here so we've got our main container which is going to be our Flex container and then each of these uh Divs are going to be the actual Flex items and I've actually styled these a little bit just for you know

visual purposes but it's not important to this tutorial so if we're looking at this HTML the way that we create a flex container of this div is by selecting it with CSS and writing display Flex on so by default that's going to create a flex container and then all of the direct children are going to be the flex items so all three of these divs right here Now the next property that we have to understand and this is a really important part of flexbox is the flex Direction property and this is by default going to

be set to row what this property is defining is what we're going to be using as the main axis and what we're going to be using as the cross axis I've written this out um with HTML and CSS so you can see that this is the main axis horizontally and this is the cross Axis vertically but what happens is if you change this Flex Direction property you're going to change the flow of the items within the flex container and when you do that that's also going to change the main in the cross axis so by

default this is set to row which means everything is going to go horizontal and the main axxis is going to be horizontal but if we were to toggle this Flex Direction which is going to Via JavaScript change the flex direction to Column then what's happening is the main axis is going to be vertical and the cross axis is going to be horizontal now so now we're looking vertically well previously when it was set to row we're looking horizontally so as we learn new properties keep two things in mind first off as we talked about you

got to know which um HTML element is the flex container and which are the flex items number two you have to know which uh Direction the flex items are going to Flow in so if you've got this property Flex Flex Direction set to row they're going to go horizontal and the main axis is going to be horizontal and if you set it to column it's going to flow um vertically and the main axis is going to be um vertical as you can see in this example our Flex container is um has a certain height and

width and the reason is because we set it down here so um if we find the container that we set it on we set the width and height to 300 and2 200 pixels now if we comment these out we get rid of the dimensions on the container it's going to act similar to a block element where it kind of spans the width of its parent container and then the height is going to be based on the content of the items within it to keep things simple we're going to keep this width and height set on

our container um just so that we can have a nice visual to look at as we explore some of the different Flex properties for the Remainder of the tutorial we're going to be working here in this workspace and I want to just kind of derive how I got here just so that you're not confused with pre-existing styles that I put on here so what I have is basically four div elements um within a main container and as of right now what I'm showing you there's no flex box enabled here except on these items right here

but that's not what we're trying to cover so these are basic divs and as of right now they're Displaying as block elements and there's no you know dimensions on the containers so let me kind of derive how we get to our workspace first off I'm going to set a width and a height on our main Flex container and I'm going to put a border on it so just uncommited those properties out and and what you'll see here is a black border that is 4 pixels in dimension and then the width itself is going to be

408 pixels on the whole container the reason that it's 408 is Because if you add the left border of Four pixels and the right border of Four pixels that gets you eight pixels and therefore what I wanted to do was basically make the total area within the container uh 400 pixels exactly so that we have a better time doing you know basic calculations so that's why I made it 48 pixels now we have to uncomment the display Flex to make these Flex items so now you're seeing that they're sitting you know on the horizontal axis

And that's actually because of the flex Direction row uh default uh setting here and this is how we get to our basic workspace and then finally I will uncomment these two lines of HTM L which are going to be styled somewhere down here so that we can see the cross in the main axis at all times and as we go through the rest of the tutorial we're always going to be working with a flex direction of row so therefore the main axis is always going to be horizontal And the cross axis is always going to

be vertical if you want you can switch this and call it Flex Direction column and you can see how all of these rules that we're about to go through work out from a vertical axxis perspective the next few properties we're talking about are alignment properties which um allow you to align um and space out these Flex items within the container the first one is going to be justify content so if we come to mdn um here's the formal Definition and we'll come down to the formal definition here and see that the initial value is normal

if we read about what normal is it says the items are packed in their default position as if no Justified content value was set so that's kind of what you're seeing here it's all just kind of by default at the start of that axis now similarly if we set the justify content property to start this is going to achieve the same thing so We're just putting it at the start so for all intents and purposes you can think of the default property for justify content to be start if we wanted all of the flex items

to go to the end of the main axis rather than the start we can just type that into this property so if we replace this with end you'll see that all of these jump to the right side and you'll see that as we're looking on the main axis that's how we're deciding where these items are Going to go we're flowing horizontally so the start is the left side and the end is the right side we can also change this to um Center which is going to put them right in the middle and then we have

some additional property values that will actually space the items out a little bit the first one is going to be space between so if we type space between these are going to be spaced out with equal amount of white space between them within the container We also have a property called space around so if we change this to that you'll see that there is now some space surrounding each of these items on the main axis now what I'll have you notice here is that the amount of space between the items so this little area here

and here those are all going to be equal in dimension but the edges so to the right of this fourth element and to the left of the first that's a little bit smaller Than the space between the elements so that's kind of the uh how we distinguish the space around property value with the space evenly property value so so when I type space evenly you'll see that these changed just a little bit and now what's happening is every piece of white space between the elements are going to be exactly equal so the justify content property

tells us how the items are spaced out and aligned on the main axis let's go ahead and set this back to Start because I want to have the default values so that now we can talk about the next property which is the line items property let's go ahead and look this up in mdn we'll type in align items and you'll see that this is the property that we use when we want to align Flex items on the cross axis so remember we set this example to a flex direction of row by default and that means

that the main axis is horizontal And cross is vertical so the Align items always applies to the cross a axis and is going to decide how these items are aligned vertically looking at the mdn docs you'll see that the initial value is again normal and if we go to normal wherever that is um I guess it's at the top here it says the effect of this keyword is dependent on the layout mode we are in as you can see in the third bullet point it says for Flex items the keyword Behaves as stretch and if

we come down to stretch it says the flex items are stretched such that the cross size of the items margin box is the same as the line while respecting width and height constraints that's an overly confusing way to say that by default the line items if we set it to normal is going to stretch the height of these items to the total height of the flex container unless you have a specific height set on those items already so this brings us to A brief discussion on the width and height properties of flex items right now

we don't have any width or height set on either or any of these Flex items right here so they're getting I guess what you call the defaults and with flexbox um a flex item is by default going to get the width of its inner content and the height is going to stretch to be equal to the total height of the flex container as you can see the inner content is going to be the numbers That we've put in here and I know there's a little space there but it's still considered just the inner content and

then the height is of course the height of the full Flex container now if we come down to flex item number one and we give it a width of say 100 pixels it's no longer going to have that default width of the content it's going to respect that width that we've set on it likewise if we give it a height of say 50 pixels it's going to respect that Height as well so if you put explicit width and height properties on your Flex items by default they're going to get those so long as there's not

you know overflow within the flex container or you've set different properties that we're going to talk about in just a bit just as a quick review the items here the flex items do not have explicit width or height properties and therefore the default height that a flex item is going to get is going to be the total Size of the Cross axis so in this case the main axis is row cross is column so total height of that column is going to be the natural height this is no longer the case when we start putting

in different values for the Align items so once we put in something like Flex start you're going to see that all of these items pull up to the top of the Cross axis and they no longer have that total height of the Cross axis and what's Happening Here is they just have the Width and height of the inner content so if we change that inner content then it's going to adjust the size so one way we could do that let's say that we have this first um Flex item we'll come all the way to the

bottom and I'm going to uncomment this uh little rule that I wrote that made the font size for this first item much larger and you can see that as we make the content bigger or smaller the flex item itself gets bigger or smaller because we don't have those Explicit width or height properties now I'm going to leave that there because it's going to bring up a very good point here in a second so right now we have Flex start we can also um bring these down on the cross axis to flex end so these are

the end now and then we can Center them with center and this is actually something that's really hard to do without flexbox so really cool uh part of this flexbox model what you'll see with the center is that there's like An imaginary horizontal line going through the middle of the content in these uh Flex items but we also have this property value called Baseline and what's going to happen here is we actually draw that horizontal line kind of at the at the bottom of each piece of content within the flex item so because this first

one has much bigger inner content our Flex Baseline is going to be in a different spot so they're not going to be perfectly aligned flush with the Top of that cross AIS so far we've learned a couple of properties justify content and align items so we can play around with these let's just do a few examples so that we can kind of review and recap so let's go ahead and say justify content will be Center and align items will also be Center this is how you can take content Flex items and put them in the

middle of a container and this was very difficult to do before flexbox so this is a really cool Advantage of having flexbox um and then we can of course change all of these so we can put the justify content to end and put that there we can also put align items to flex and I don't know why you want to do this but you can put it in the bottom right corner of the container so very flexible no pun intended of what we can do here with these alignment properties let me reset everything let's just

put these back to the defaults so all you Have to do is delete them and they're back to their defaults and then we will come down here and comment out this uh last rule that changes the font size of that first item so now everything is equal and what I want to do is actually make each of these items a specific width and height we'll go with 50 pixels by 50 pixels um one way that we can do that since we have two classes set here and each Flex item has this fi class we can

just Target that one class give it a Width of 50 pixels and a height of 50 pixels and now we have these perfect little squares sitting as our Flex items by default if you don't change any properties Flex will respect the flexx item width and height properties so we set those to 50 pixels by 50 pixels and that's what we're getting right here and if we came down to the flex container again and we set that align items property to say stretch or something like that you'll see that they're not Actually going to stretch down

to the total height because we have those explicit properties set already but the next thing I want to explore is what happens if you have too many or too little uh Flex items within your Flex container in this example if you remember from a few minutes ago when we talked about the actually it's at the top here we set the width of the flex container to 408 and the height to 200 pixels because the main axis is Horizontal as a result of the flex Direction equal to row property um the width is really all that

we care about right here because everything is going in the width kind of Direction so we set this to 408 exactly for the example I'm about to show you if you've got a container 408 pixels wide and that container has a 4 pixel border on the left and the right then the total white space that is available for these Flex items is exactly 400 pixels if each of Our boxes are 50 pixels in width that means that we can fit a total of eight Flex items per perfectly within this container let's go ahead and do

that just to see what I'm talking about so all we have to do is copy this down forward more times and you should see a bunch of items pop up here let me just go ahead and change the labels so that we can see all our Flex items a little bit better and now you can see that we have eight items perfectly fitting Within our Flex container but what happens if we take all of these Flex items and we double it so let's say instead of eight Flex items of 50 pixels each we have 16

so we double it what happens then well let me go ahead and do that real quick I'll just copy all of these items and paste them below and what you're going to see as we extend this is that these items are overflowing outside of the flex container there's a couple weird things going on as well if You'll notice it doesn't look like these items are 50 pixels wide anymore now of course if you were wondering how wide these elements are you don't have to guess you can rightclick inspect element and you're dropped into the Firefox

Dev tools and the reason I'm in Firefox I know I've been switching back and forth between Chrome and Firefox throughout this series but I'm in Firefox because the dev tools have an awesome flexbox um little module here that you can inspect Elements with and really see what's going on so all we have to do is come up to this uh inspector here we click that so that we can select items on the page and let's first start with our overall Flex container when we click that Flex container the layout tab is going to drop us

down into this section called Flex container um if you uh collapse that you'll see that there's also Grid in the Box model so these are different you know models that we can look at but If we look at Flex container and then we toggle this little button you can see all of the different Flex items outlined for you as well as some overflow space and other elements of the flex box we'll turn this off for now but we can also go down to the flex items and you can see they're being highlighted here on the

left um as I hover over them so you can click them with this little inspector here so maybe we click on number eight um and we can look here within the Inspector of everything that's going on with this individual Flex item we're going to talk more about all of this stuff um in just a bit we're not quite ready yet the thing that I want to draw your attention to is the fact that if we go down to the Box model which we learned about in previous lessons we know all about how this works um

and you look at the total size of a single element so we'll click on number four you'll see that the dimensions are 332 By 50 which is not what we set them to we set them to 50 pixels wide and 50 pixels tall so the question is why is it shrinking the width like we didn't tell it to do that why is that happening furthermore if these are overflowing outside the container what do we do about that we obviously don't want to show this to our users we don't want our Flex items just going indefinitely

off the page and especially if you're making say a grid of images where there's Hundreds of images and you're using flexbox to display them you don't want them going on a single axis you know indefinitely to the right or indefinitely down in this situation you have two options the first option is kind of the St standard um default way of handling overflow in CSS and this does not this is not specific to flexbox itself you can use this with any type of CSS display type so if I came to the flex container and I set

the Overflow Property I can set this to a couple of values but usually you might want to set it to Auto and if you set it to Auto what's going to happen is these elements are no longer going to break break outside of that container they're just going to scroll so you see the scroll bar at the bottom of our Flex container now and we can see all of our items they're still shrunk a little bit but we can see them all without you know breaking out of the container but like I Said with that

grid of images example if we could imagine that these are images we don't want our users to have to scroll left and right to see all the images we want them to just wrap down to the next line and just have like a nice little grid of images so the second option that you have here instead of setting the Overflow property which is just a generic solution we can set this Flex wrap property and if we set it to wrap you'll see what happens is these Elements go back to their you know original size of

50x 50 as we intended and they're going to perfectly wrap onto the next line now you see some white space in here here in the middle and you might say okay I don't really want that I want those to be flushed to each other so naturally what you're going to do is come down to the flex container you're going to type in align items like we head said earlier and you'll type in Flex start something like that and you Won't see anything happen and the reason is because the uh rules of the game just changed

when we put in this Flex wrap property I know you're probably um getting tired of hearing me say that but as we go through CSS certain properties set to certain values change the whole game just like when we set Flex box to The Container you know it changes the behavior of all the uh children elements within it this Flex wrap property changes how we align items on the cross Axis so instead of align items we now have to use this property called align content so if Flex wrap is set to anything other than the default

which is going to be no wrap you'll see it overflows again if it set anything except for this no wrap then we're going to use instead of align items we're going to use align content which is going to have the same um possible values for the most part as align items but it's going to tell um flexbox how to Arrange this new like group of wrapped items within the flex container so now we can set Flex start or we could wrap them at Flex end or even put them right in the center of everything so

that's how we wrap items to the next line if they're overflowing at this point we've actually covered all of the flex container uh properties that we can use just to do a very quick review I'll get rid of all this extra stuff here so get rid of these last eight um Flex Items and then I'll get rid of these last two properties here so just to review we have of course the display Flex which is going to activate flexbox we have the flex Direction which we can set to either row or column so if we

set it to column it's going to go vertical if we set it to row it's going to go horizontal we have justify content which aligns uh Flex items on the main axis in this case the horizontal axis we can set that to Center um which is not going to Change anything because they're it's as wide as the container itself but if we just comment it out this last Flex item you'll see how this works it kind of centers all of the content in the middle and then we have align items we can also put Center

on that to put those in the middle next up we're going to talk about how do we influence the size and alignment of individual Flex items so if you take a look at what I'm about to do I can say Something like a line self and I can say Flex start and you're going to see this first item drops out of the flow of the rest of the flex items and we can do this with each individual Flex item for a lot of um different combinations here speaking of this alignment let's go ahead and start

with that because I think it's the easier uh part of this discussion so I will let me just go ahead and comment out the last four items here in our container just so that We have four and then and within our rules here I'm going to remove these justify content align items so that everything is top left default um settings now if we came down to individual items which I have CSS selectors here for on the right what we can use is this align self property which is essentially the same exact thing as align items

um except it only applies to a single Flex item so in this cas case we've set this to flex start Which is the default so it all looks normal but if I take this first flex item so the first box here and I set this to flex end you'll see that this drops to the bottom while the rest stay at the top and I can do this to flex item number four so align self Flex end and you'll see this one drop to the bottom and then maybe I wanted number three in the middle so

align self Center so this one goes in the middle you can see we can individually pick and choose Where our Flex items are going to go and of course our container level properties still apply so if I came back up to the container and set justify content to Center this whole group will go to the middle so these work together it's not one or the other you use them in tandem like I said the Align self property is pretty straightforward once you know align items on the main container now the last part we're going to

talk about is the sizing of flex items and this is Probably the hardest part of flex box in my opinion um to understand how all of these work and what we're dealing with here is the flex grow Flex shrink and flex basis properties we're going to start with flex grow and this is going to apply to uh Flex items when they don't naturally fill the entire main axis so in this case the main axis is horizontal because of the flex Direction row property and in this case we have 50 pixel wide Flex items and we

have four Of them so this should only fill about half of the total width of the container earlier we talked about how the total white space the total width for these Flex items in this container is exactly 400 pixels if each item is 50 pixels wide then 50 + 50 + 50 + 50 is going to be 200 pixels and therefore the occupied space is going to be 200 pixels and the unoccupied space is going to be 200 pixels when there is unoccupied space or empty space along the main axis of a Flex container the

flex grow property is going to come into play by default this property on each and every single item is going to be set to zero and what that means is that each item by default is going to take up 0% of the empty space within the container that is why what we're looking at here is not stretching out to fill the container right now is because all of these items by default are set to not take up that extra space but if I come down to the first flex Item and I Chang that default property

to a one you're going to see that the first item fills up all of that remaining space so it's going to take up the original width it had of 50 pixels and then we also know we had empty space of 200 pixels so the total width of this first um item or first flex item now is going to be 50 + 200 or 250 pixels now of course with my tutorials I don't want you to just take my word for it so let's go ahead and verify what I just said 50 Pixels plus 200 is

250 so if we click the selector up here select that element and go down to the Box model you'll see it's 250 A2 half pixels and the reason it's a half of a pixel more than what we calculated um I'm not sure that I can fully explain it with uh the utmost confidence but I will attempt to so if we set this back to flex grow of zero and refresh the page because it's being stubborn and then if we inspect the Element we'll go to this first element and what you'll see in the Box model

is that the inner content of this so the number itself self is 282 pixels so if we hover over this you'll see that the Box gets drawn around that uh number now if we pulled in the same exact HTML and CSS but in Google Chrome so I'm going to pull in Google Chrome right here and we're going to select this first box and scroll down to the Box model you'll see that the inner content is 28 not 28 and A2 so browser differences are are of course a big part of web development but I wouldn't

worry about that extra half that we saw when we're trying to make the calculations just make sure that you have the understanding of how these are calculated in programming being off by one is sometimes a catastrophic error but when we're dealing with uh CSS it's not quite as big of a deal so we will we will stick with this and as we go throughout you're probably going to Notice that my calculations are going to be off by just a couple decimals but just bear with me so let's set this back to a flex grow of

one so we have 200 pixels of empty space now we don't because 200 pixels got allocated to flex item number one now if we came down to flex item number two which by default has a flex uh Flex grow value of zero and if we set that to one here's what's going to happen if we came down Here to flex item number two uh the default value for Flex grow is going to be zero no changes as you see but if we were to set this to one you'll see that number two element gets part

of that empty space as well so now one and two are going to be completely equal now how do we get to this you know what kind of calculation is happening here I'm going to try to draw it out for you so if we come to right over Flex item number one just make a comment what we're going to Do is take all of the flex items Within the container and we're going to add up their Flex grow values so by default remember they are are all set to zero so Flex item number one has

a value of one as we set it right here let me close this comment so we can see it correctly so we have a value of one on Flex item 1 a value of one on Flex item 2 and then by default the last two are set to 0 and 0o so the total of all that is going to equal two and what you can think of this As is two units of empty space so we'll say two units and you might ask okay what is what unit are we measuring this against well if you

remember there is 200 pixels of empty space and if we divide that by two allocated units we get 100 pixels per unit so each unit that we allocate is going to be 100 pixels but if we were to come down to flex item number three and set a flex grow value of one that changes it because now our total sum we're going to Add a one in there and now we have a total of three units we still have 200 pixels of empty space but now we have to divide that by three units and that

should get us to um not sure if I can do that math I think that's a decimal actually so 20 / 3 is going to be uh 66. 666 uh pixels but if we come down to flex item number three we set a flex grow factor of one and then Flex item number four and set a flex grow factor Of one now everything changes so we have to update these values in our sum so now it's 1 + 1 + 1 + 1 so we have four units and we still have 200 pixels of empty

space to allocate because if you have four items each 50 pixels wide that's 200 pixels empty space is 200 pixels in a 400 pixel container so still have 200 pixels of empty space to allocate over four total units so we'll Divi divide that by four and that's going to get us to 50 pixels Each per unit so what's happening here is for each item in this this container we have an original size of 50 pixels and then we allocate 50 pixels to that of empty space so they're each going to be 100 pixels um equal

across the board and you can see that if you click on here it's 100.1 33 pixels um forget about the decimals here but they're all equal so that's how that works now it doesn't have to be a flex grow value of one you can also give it two or three or Four it's all just dependent on how many units you want to allocate to each uh Flex item let's say that we gave Flex item number two a value of uh we'll say four uh or maybe maybe not four let's go with three so that we

have an even number so now our calculation is 1 + 3 + 1 + 1 is going to be 6 units 200 pixels of empty space divided by 6 units I'm going to need a calculator for that one so 200 / 6 is 33.33 pixels per unit so if we are Giving the second Flex item three units of empty space in each unit of empty space is 33.33 that means that we're giving it an extra you know 99.9999 or 100 pixels so we take the original width of 50 we add a about 100 so we

get 150 pixels wide for the second item let's check that see if we're in the ballpark and you see that it's 150.2 so that calculation worked perfectly hopefully that explanation Made a little bit of sense just have to think about it in allocated space empty space and you can calculate the two pieces by getting the total width of your Flex container and then the total width of the items within the flex container and then breaking it out into units based on the amount of empty space that we need to allocate back out to the items

now the opposite applies when we have too many items in our Flex container let me get rid of all these Flex grow values so that we can get it back to normal and then let me also uncomment these divs right here so that we have eight total items um we know that that fits perfect ly but what if we put in N so instead of eight we have n which means we've added an extra one in there which means that we have 50 pixels of overflow so remember each one's 50 pixels wide 50 pixels *

8 is going to be 400 pixels which is equal to the total available space within our Flex container so by adding a n9th we are making the total amount of flex items uh 450 pixels wide versus the 400 um available space so we have 50 extra pixels of overflow similar to how we allocate out empty space to flex items we can also reduce the size of flex items by the amount of overflow that we have so if you look at this container you're going to see that by Default they all fit within the container when

we add that ninth item and the reason is because all of them actually uh shrunk a little bit when we put put that ninth item in there the reason that they shrunk is because by default every Flex item is going to have a flex shrink value of one so if I put that in for Flex item number one you will not see any change because that's already the default it's already shrinking by one unit so we know how to Calculate those units you basically take the Overflow just like we took the empty space with the

flex grow so if we have 50 pixels of overflow um let's let's change this right here to 50 pixels of overflow and then we have to ask oursel how many units we're allocating that across by default each Flex item is going to have a flex shrink value of one so that means that each Flex item should be allocated equal overflow in other words we have to Do 1 + 1 + 1 all the way to 9 so we have nine total units I'm just going to get rid of this because you get the point here

so we have nine total units with 50 pixels of overflow so we divide 50 pixels by 9 and that's going to give us I believe 5.33 pixels um per unit let me check that real quick so 50 / 9 equals no it's not 5.33 it's 5.55 pixels per unit in other words we're going to take the original width of these items which was 50 pixels and we're going to Subtract off 5.55 pixels from that 50 so in theory each item should be 4445 pixels wide so let's inspect the element we'll go to any of these

here and you're going to see 442 pixels wide pretty much exactly what we just calculated now this is where the the Firefox Dev tools comes in handy so if you click on one of these items it's going to pop up in the layout section exactly how this shrink operation worked so you can see the flexibility has a Flex shrink of one and that's going to say minus 52 pixels which is what we just calculated so it's going to take the 28 1/2 pixels which is the inner content width uh subtract off 5 1/2 pixels to

get down to 23 pixels and then you add back in the natural padding and border that um is set on these items to get your total width of what we calculated as 445 pixels now this brings up a good point because if you look at this model right here you're going to See that each item has a minimum content with so if you try to shrink something too much then it's going to make it so that it will kind of get capped out it won't shrink past the minimum value of its content I'll show you

exactly how this works all we have to do is add in a few more um few more Flex items so let's add one more for good measure and what we see here is that they're clearly breaking out of that container now just like we Saw earlier uh when we looked at this and we tried to wrap them onto the next line now from the flex shrink perspective these are breaking out of the container because while they have you know calculated the total overflow space and then allocated that out to each of the flex items the

total amount of overflow is going to be greater than the um basically it's going to make them shrink smaller than their minimum values which is not possible let's see if we Can calculate this just for fun so we have 1 through 9 10 11 12 so we have 13 total Flex items which are all supposedly 50 pixels wide so if you do 13 * 50 let's see what that is so that's 650 pixels and if you sub subtract the 400 pixels that the container wi is you get 250 pixels so our overflow that we're dealing

with now is going to be 250 pixels and we have 13 units to um allocate it over so we need to divide That by 13 and what that's going to get us is let's see 19 23 pixels per unit so we're going to have to subtract we're going to have to basically say let me break down onto the next line just so we're clear we're going to take the original width minus 19.23 pixels and what that's going to equal is let me see 3077 pixels so theoretically we would just take all that overflow and subtract

it from the original sizes to get us to A total width of 3.77 pixels but if we inspect element and we click on any of these here you're going to see that this little Min property popped up so it says the minimum size of this element is going to be 12 pixels so the the minimum inner content is 12 pixels and when you add on the padding and the border of each of these elements that's going to break you over that value that we had calculated here so it's basically going to be uh the the

Content itself is going to be too big to shrink that much hopefully I haven't lost you here um try to lay out this in a logical manner um and I know this is a lot of detail it's definitely not totally necessary but I really think knowing this kind of stuff and how this is calculated is is that extra step that you have to take as a developer to really um understand what you're doing and be able to debug things and understand okay why is this breaking out Of the flex container why won't this shrink enough

you know those kind of questions let's do one more um practice problem here I guess you could call it so let's go back to nine elements which are going to Naturally Fit within this but at the moment they're each being allocated what was it 5.55 uh pixels so 50 minus 5.55 to get it shrunk down to fit now if we wanted to allocate it only to certain items we can change the defaults so um let's go Ahead and say that we want the first three items of this Flex container to keep their 50 pixel width

now the way that we would do that is we'd go to item one and we'd set a flex uh shrink value of zero which is not the default and we'll copy that down to 2 and three and now you'll see that each of these get wider and if we inspect them they're each going to be 50 pixels wide while the remainder are going to absorb that uh overflow Space by shrinking so just a Quick review if the total width of the items the flex items in the flex container do not equal the total Flex container

so if there's not enough items Flex grow is going to be what applies and that empty space is going to be allocated based on the flex grow values if the Overflow happens so if there's more items that can fit in the flex container then the flex shrink will um apply and based on the flex shrink values of each item determines how that Overflow space is going to be allocated out the last property um with all this sizing that we have to talk about is flex basis let me get our container um back to a spot

where we only have four so let me I'll just comment out those just in case we need them later so now we have four items which are explicitly set to 50 pixels wide each so we set each of them to 50 pixels wide 50 pixels tall now if we wanted to change Those Dimensions we can actually do that using a flex item property let's go to the first flex item and set the flex basis to equal 40% what you'll see is that this first item gets a lot wider and it's not because it's trying trying

to fill the empty space it's because it's respecting this Flex basis property uh over the width property that we set earlier so by default this Flex basis is actually set to Auto and when it's set to Auto what That is basically saying is that uh to flexbox is go ahead and look for the width and height properties and if you find them respect those properties as the width and height of the flex items if you don't find find them go ahead and size the flex items based on the inner content and that's the default for

Flex basis but you can also assign pixel units and percentage units to the flex basis to override the width and height of your Flex items this unlocks a lot of Possibilities and depending on how you use them with flex grow and flex shrink you can get a bunch of different combinations so if I was looking at this Flex box right here I have the four items each 50 pixels wide and let's say that I wanted to make them even widths and span them across the whole container one way that I could do that is by

coming to each of the flex items and setting the flex grow to be equal to one and what that's going to do is equally Allocate the empty space as we just talked about so that's one way to do it now we could also backtrack a little bit and instead of doing that we can set the flex basis to 25% on each of the items and that's going to equally give width to each of the items and give you the same exact result now if we come in and try to set the you know Flex grow

property on one of the items it's not going to change because the flex basis is going to take precedence over that But in some cases maybe you don't set the flex basis uh property on all of the items to equal 100% so in this case we've given each of them 25% which adds up to 100 so it's going to fill the whole container but let's say that we for the first item we give it 10% so we're going to be missing 15% of the container and let me let me delete that for a second so

um now we just have Flex basis properties and they sum up to what 85% if I'm calculating that correctly so There's some empty space here on the right it doesn't fully fill the container but now if I put on the flex grow property and set it to one that first element is going to take the remaining space and we're back where we started so essentially s setting uh Flex bases of 25 on the last three and 10% plus a flex grow of one is the same as just doing Flex basis of 25% on all of

them so many ways to get to the same answer the last Thing we'll talk about is the order of the items along the main axis in our Flex container so if you wanted to to change uh swap these out so maybe you wanted to put number two in number one's place you could do that all you have to do is come up to the HTML and put number two before number one and that should just flip them but if in Flex box you don't even have to do that you can actually flip those with CSS

so if I came down to the CSS and I looked at Flex item number one and I gave it an order of two and then I gave Flex item 2 in order of one now you're going to see that um these are flipped and hold on I think the reason that this is not working is because you have to set them on all so we'll set the order on three as three and the order on four as four so the three and four have their natural order but then two and one are going to be

flipped so if you set order on all of the flex items you can determine you Know the order that they come in now you might ask why is this useful well in many cases it's really not useful you might as well just change the order of your HTML and be done with it but if you are designing responsively which we talked about in a prior video um I think it was just the previous video as you're resizing your browser you may want different elements on the page To Go in different orders so say you have

a nav bar at the top you've got main content a Sidebar and a footer maybe you want to order those differently um whether whether you're on a desktop or a mobile device and this would be how you would do that is you'd set a media query so you might come down and say at media and we'd say like minwidth of 600 PX or something like that and then in here you could probably set the flex item number four to have an order of one and then we'll say a flex item one will be in Order

of four something like that so as we are getting bigger than 600 PX that's how that's going to uh show but as we shrink it you'll see that those flip so we can resize and order them differently based on different screens at this point you've learned pretty much all of the main properties of flexbox now of course there's some shorthand properties that can make your life easier so instead of you know setting the flex basis and the grow and the shrink Val values um what You can do is come in and just say flex and

then the first value is going to be the flex grow so maybe you want to set that to one and then the second one's Flex shrink you might set that to one and then the third one is going to be Flex basis which is set to Auto so this is a shorthand way of writing Flex grow Flex shrink and flex basis all in one line so that's just a shorthand property but not necessary I wouldn't even recommend using those until you're very Comfortable with flexbox well this is actually a brand new day same hat same

hoodie whatever but um I forgot to add the last part to this video which is actually taking this previous challenge that we had solved so as you're following along with the full stack road map we solved this pricing Card Challenge as a part of um the original HTML and CSS tutorials and then also made it responsive in the prior video on responsive web design what I Want to do to wrap up this video is take this design and make it uh with flex boox instead of how we did it before so if I'll remind you

just for a moment what we had to do to get these bottom left and bottom right sections sitting next to each other with a 50% width was something a little bit hacky um if we come up to the HTML um you'll see right here here so this line doesn't look you know all that spectacular but what you'll see is we've Got a closing div right here that corresponds to the bottom left section uh div and then the starting div for the bottom right section is sitting right next to it which when you're looking at HTML

that's generally not very good syntax and that was kind of a hack that we used to remove the white space and allow for the fact that we had 50% wids on both of them so if I were to enter this down one line just for formatting sake you'll see that the bottom right uh Piece of the card actually disappears and that's because it's going underneath that bottom left card and then we're hiding the Overflow as you'll see in the CSS for the main card so we've got overflow hidden so if we take that off you'll

see it pop up below here so that's what's going on and we can solve this very easily using flexbox and get rid of all of our hacky solutions that we had before now to make this a little bit simpler for us to see exactly how This is working let's go back to our layout example this is what we had used to originally build the card so that we could see what we were dealing with and we didn't have to confuse oursel with all of the different styling while we're just trying to focus on layout it

isn't pretty but it will work for our layout purposes at least and what you'll see is I've come down and added a media query this is from the prior video If you haven't watched that We talk about responsive design and media queries so basically what we're saying is in this block we want to apply certain styles to any uh device that is greater than 500 or greater than or equal to 576 pixels as you'll see when we shrink this it changes the layout and then when we go above 576 then these two uh style selectors

will apply and you'll see that the width and the height of the card gets applied and then the bottom left and bottom right section are going To get a 50% WID each now with flex boox this is relatively simple all we have to do is if we're looking at this entire card here it's composed of a top section and a bottom section with two left and right subbottom sections and what we want to do is on the desktop device so this what we're looking at right here we want to have those bottom sections in one

row and then when we shrink it to mobile we want it to come into a column so if you Remember from just a few minutes ago we talked about the flex Direction Where We can take the main axis and change it based on that Flex Direction so what I'm thinking is that for a desktop device we want Flex Direction equal to row so that these two go right next to each other and then on a mobile device we want it to be in a column so the way that we do that since we're designing mobile

first here is we come up to all the main Styles here and we go to the bottom Section because that's what we want to turn into a flex container we don't necessarily want to turn the whole card into a flex container because the top the top section is actually fine and it would be overkilled to put a flexbox container on it but the bottom section is not so let's go into the bottom section and type display flex and what you'll see is I believe nothing will happen at the moment because we're in the desktop view

but Let's go ahead and go to the mobile view and now we've got some things messed up because we're designing mobile first so right now we're working on the mobile device so these are still sitting next to each other and all we have to do to change that is set the flex direction to column and you'll see that they jump right above each other that's pretty much it when it comes to the mobile design of this let's See if we can find anything that we can remove now um I believe we can remove this vertical

line okay we're going to get to this we'll we'll actually get to this let's get the design right first and then we will worry about that so at the moment we set the flex direction to column and because of that because we're designing mobile first that is also going to apply to the desktop design unless we change it in our media query so let's do that we'll say bottom Section and we'll give it a flex direction of row again so the default so now as we resize we get get a very similar result and we're

actually pretty much done but we have some redundant styles that we can actually remove now that we're using flexbox and this is where uh the nice parts of flexbox come in you don't have to write as much CSS so we can remove the bottom left and bottom right section wids and I believe that may screw us up A bit after we change a few things hold on I think we need to change uh let's remove the display inline block on the bottom left section and the bottom right uh we will remove the 100% width and

we'll remove the vertical align top so we don't need those anymore but what you'll notice is now we've got this screwed up and that is by Design that's not uh surprising let's make sure our mobile is still working so we're Good here Mobile's still working but desk top has a little bit of work and if you remember the bottom section is our Flex container which means based on the HTML here if we're looking at it the bottom section has two direct children it has the bottom left section and the bottom right section and we can

actually enter this down on to its new line now that we're using flexbox we don't have to have that hack but anyways the bottom left and right section are the children So therefore these two style uh selectors are going to be the flex items in this desktop view we have the flex Direction set to row which means that those that bottom section has a main axis that is going horizontal and if you remember from a few minutes ago the way that we resize the flex items along the main axis is going to be one of

two ways we can use the flex grow property or we can use the flex basis so let's come in here and just try both Of them just so I can show you we'll start with the flex basis it may be a little more straight forward so if you put in 50% on the bottom left section and then you say Flex bases 50% on the bottom right section we have completed the card it looks great and as we resize it it's still going to work so that's one solution another solution is we could come in and

we could say Flex grow set that equal to one and flex grow equal to one on the bottom right section And this should work just fine too now going directly from Flex basis to flex grow will not really illustrate that point let's get rid of the flex grows for just a second so that we can conceptualize by default these two uh subcontainers down here have a natural width because we haven't give them we haven't given them an explicit width so they're going to take the content with the content sitting within them as you can see

is filling the entire width of Their container now these do not fill up the entire section we've got this empty space here on the right and the flex grow property is what applies when we have that empty space and so basically what we're going to do when we enable the flex grow One Properties like we talked about is we're going to split up that space just give it one unit to the bottom left section and one unit to the bottom right and therefore it's going to be I believe perfectly equal or it Actually may not

be perfectly equal it may just be a coincidence that the content is a similar width let me make sure that that's correct so let's just enable these and we can check in the dev tools so let's inspect and let's see what we're dealing with so this one is 263 pixels uh wide this is 276 pixels wide so glad we looked at this I actually was not thinking about this correctly um the correct solution here Is probably going to be the flex basis of 50% um it just looks like they're equal when we use the flex

grow because they're similar widths by default like naturally the content has a similar width in both sections but if I close out the dev tools and let's say I came up here and just added a bunch of content to one of the list items in the bottom right you'll see that now that Flex grow Is not working quite as well because we're not giving them equal wids we're growing them based on their natural size so I stand corrected that is not the correct way to do it um Flex grow at least I think Flex basis

is by far the most reliable way to split these into equal containers so we'll go with that and call it a day I think we have solved this um to my liking so this is the basic layout and then as we shrink it goes down to Mobile so as we come over To here um back to our card and let me let me bring this guy back up so that we can see everything working okay so there's our card now we got to turn this into a Flex box and um we'll do exactly what we

just did in the layout example so if you remember we came down um we didn't need any of that we did need a bottom section we wanted the flex direction to be row on a desktop device and then in the bottom section we need to display Flex um set the flex direction to column and let's see what we got here looks good now we just wanted to remove on the bottom left in bottom right sections I know there's a lot more Styles here uh we don't need this guy we don't need the vertical lines we

don't need the width all we have to do is add a flex basis of 50% on each of these so we're looking good there and I believe we have solved it I don't think there's anything that we did otherwise Now there's just one more thing that I want to show you with this that we could use flexbox for as you see this $29 per month these are sitting next to each other and whenever you have horizontal content it's usually a decent uh use case for flexbox let's look at the HTML that we set this up

with so you'll see that we have a price container um that would be the overall parent and then that parent has two children items so if we turned Price container into a flex container then the price and the price frequency would therefore become the flex items let's find that in our CSS so here's the price container we've just set a margin on it so that's probably going to stay the same even with the flex container um but then we also have price and price free frequency which looks like we have styled right above it so

let me let me just change the order of this cuz it makes a little more sense to Have the container on top and what we're going to do is set display Flex by default it's going to be set to row so it will put them next to each other um let's get rid of all the styles that we have Within These I don't think that we need any of them except for maybe the font size and the opacity because those are not layout related properties so here's our starting point and you can see that by

default even after we removed all those styles that Display Flex making that whole container a flex container is going to still put them next to each other now let's just back up and remember exactly what's going on here we have some HTML where we have a price container and then we have two items within it so we have a flex container and two Flex items by default we've set this to display Flex which makes the main axis on the horizontal so in a row and therefore if we want to align things Along the main axis

we use justify content if we want to align them on the cross axis we use align items as you can see the per month is a little bit misaligned with that $29 an easy way to fix that is to come on to the price container set the Align items and set those to Center you'll see that that perfectly centers those two right next to each other and that's a much better solution than what we did before where we set the position to relative And then we set it -3 pixels to just pull it up a

little bit the last thing we have to do as you'll notice there's no spacing between these and there's no real solution here with the flex box I mean we could come in here and justify content and say something like space between but you'll see that that's going to space it out way too much so that's not really going to help us so really the best way to do this is just come on to the uh either the price frequency or The price item and set a margin so we don't even need this style anymore uh

since this is already written the price frequency we can just use this and all we have to say because this is the um per month piece all we have to say is margin left and give it something like five pixels and that spaces it out nicely very easy and straightforward so there you have it that is how we solve this with a mobile first fully responsive solution with flexbox and it Shrinks and gets bigger and it looks great on all devices in this video we're going to be building a testimonials grid and we're going to

be doing it with a mobile first responsive design um solution and we're also going to be using flexbox my goal in this video is to not only solve this um Challenge on frontend Menor but also to apply those skills that we've learned in previous lessons so that you can really start to use them in the real World lastly I'm going to be adding in a few extra pieces to the puzzle so throughout this series we have been using codeen which is just a a nice environment where we have HTML CSS and JavaScript all in one

place all hooked up and ready to go since this challenge is relatively straightforward and you'll see as we walk through it I want to also add in the concept of a code editor so we're going to be downloading and using visual studio code and then we're also Going to be doing a little bit of Version Control and I'm not going to get super detailed into it uh quite yet but I'm going to show you the commands that you have to run to get your design pushed up to GitHub and deployed to the GitHub pages so

that you can you know share a URL with others of what you built but don't worry the only prerequisites that you really need are going to be HTML CS s and make sure you've watched my flexbox and responsive Design videos let's get started if we come up to frontend Menor this is the challenge that we are going to be creating and I've already started it so I don't need to click here so let me go to my challenges um or I guess profile my challenges and then testimonials grid section so from here you can download

the starter files so we'll do that it's going to pop up on another screen For me so once you've downloaded your files make sure that you have Visual Studio code downloaded it's just a code editor and I actually made a whole video on code editors you can check it out up here um of which ones I recommend and why so obviously Visual Studio code would be one of those so go ahead and download that and once you've downloaded it open up a brand new window from here you're going to want to click click file um

open a folder and then go find the Testimonial challenge starter pack that you just downloaded so I've got it selected and this is going to open me up into the workpace as we start looking at the starter files if you open up index HTML which is what we're going to actually be working on um you can see that there's all sorts of text already in here and luckily we have a lot of the testimonials that we will need um they're not really implemented in HTML elements but it's good to just have this Text ready to

go now just to relate this back to what we've been using with codepen this index.html is basically the same as this HTML box here in codepen it's just um on our local computer it's in our local file system rather than up in the cloud now your first question is probably well how do we actually view this HTML document in the browser now remember HTML and CSS they are only displayed in the browser therefore we need a web Browser to look at this the way that we do that is you actually have a couple options I'll

show you the most barebones option first and then we'll go into what we're actually going to be using to solve this challenge to view an HTML document in the browser all you have to do is go to your file explorer I'm on Windows but this works the same on Mac or Linux and just go to the folder that you have it saved in and then find the index.html file you'll notice that it Does not say index.html as you see over here and that is because the file type over here is Chrome HTML document so it

doesn't display it here in the name if you rightclick and go down to open with you can choose a browser to open it in so I might just say Google Chrome and when we click that it should have opened it up if I go back to my browser it should open it up in Google Chrome and there's a lot of text here and that's because we Have to actually implement this design but this is the HTML document that we're looking at and you can see up in the um URL bar we're actually looking at our

local C drive um now on Mac and Linux this is going to look a little bit different um but it's the same concept it's just the local path to that file displayed in the browser now I'm going to point out a few things here that might be interesting to you the first thing you see this little icon up here In the top left portion of the tab this is a little frontend Menor logo or favicon and you might be wondering well how did that get there well the way that we put that there is if

we come back to our files and we look at this link tag right here um this is actually putting in that favicon up into the title here's some metadata about it some sizing but here's the really important um attribute which is the href and what we've passed in is A relative path we'll learn a lot more about absolute and relative paths coming up when we start working in the terminal a little bit more but all this is saying is I want to look relative to the current directory into the images folder over here and then

drop that down and grab me the favicon 32x32 PNG and we can open that up and see the little icon that we have and that matches the icon that we see up in the Tab furthermore in the index.html we've got uh the dock type that's important um for just HTML Oiler plate and then I'm actually going to indent this for us so that we can see it a little bit better we have the head tag which is pretty standard for an HTML document here are some meta tags that help with displaying the site in the

browser properly these are just pretty standard defaults that you might put in and then of course the link we just Talked about now the title tag this is where we actually name the tab that's it's going to open in so we can change this and just say instead of frontend Menor we can just say testimonial Challenge and when we click save open the browser up and click refresh you'll see that it changed to testimonial challenge right here we have some Styles we haven't really been looking at this but um if you come back to our

browser and go to codepen the CSS right here There's a couple ways that you can link that up you can actually use use a link tag to link up styles or you can just put them all in a style HTML tag right here now we're not going to do that because that's not very good practice for a good amount of CSS you want to break it out into a separate file which is what we're going to do so we'll delete all of that we don't need it and then finally we have all of this text

which is basically if we look at the Challenge itself I wish there's a better way to see this oh yeah we actually have the design here so if we go to the desktop design you'll see that we have all of the text and all this text is right here I'm going to cut this out and then I just want to make a new file so I just right clicked over here in the file pane click new file and we'll just say placeholder Text.txt so we give it the txt file extension it's just a plain text

document we can paste that in and save it just so that we have it but it doesn't clutter up our HTML this last part the attribution this is just as we look at it in the browser it's just this little piece down here so you can if you want to you can go ahead and fill this out and link to whatever you want to your you know Twitter account your LinkedIn account your GitHub account Whatever you want to do I'm going to delete it here I don't really want to clutter up anything I want to

just focus on the challenge itself so at this point we have a basic HTML boiler plate and I'll actually show you a shortcut to get to pretty much exactly this um with just a few key strokes let's save this I'll rightclick create a new file and we're going to call this test.html because we're just going to be testing a few things within this Document I'm going to show you how to use m and what emit is if we open it up this is built into Visual Studio code and what you basically can do with it

is type shorthand you know characters and click Tab and it will extend it out into a code snippet of what you want already so let me just give you a brief example if we wanted in this HTML document you can see Visual Studio code has identified in the bottom right that this Is an HTML document so if I type H2 it's going to pull up this box that says emit abbreviation and you can click it to see what it's going to abbreviate to but really all you have to do is Click Tab and it's going

to extend it out into the element that you want and you can just start typing similarly we can actually get this entire HTML boiler plate in just a few few keystrokes so if you type HTML and we have a couple options here And you can go through and see exactly what it's going to create so basic HTML will just give you the the main tag we we want something a little better than that um oops I already did it on accident um the HTML 5 let's let's go ahead and see what HTML 5 gives us

it's going to give us pretty much everything we want here just like we saw earlier and then finally HTML XML um this is not something that you're probably going to use very often so if we just click HTML5 Or scroll to it with our arrow keys and press tab it's going to break us out into this um boiler plate which is very similar to what we were set up with when we downloaded the starter files for our front and Menor challenge so that's just a handy way to create this and then of course you can

change the title uh I don't think there's a link tag for the favicon setup by default but you've got all the meta tags that are necessary and you're all set as we go through this Challenge I'm going to be using those EMT Snippets and I'll try to mention it as we go along but um just know that that's going on for now I'll delete the test file we don't need that any longer and now let me show you our workflow so what we could do is just write some HTML so H2 tab and then some

title that's just basic HTML and click save and then we can alt tab or switch back to the browser open up the tab that we have it on and click refresh and you'll see the New HTML document this would be very cumbersome and it's not a great way to make everything fast so what we're going to do is we're going to split the screens here and I'm going to put the visual studio code on the left and the testimonial Challenge on the right now obviously we don't have a lot of room here so you can

always click this right here to collapse that might make this a little bit smaller for us and then when we're working with our Dev Tools we'll click inspect we're in Chrome right now you can use Firefox as well if you want um since we've got these side by side I'm going to actually redock all of this stuff to be at the bottom so I can do that let me remember where I can do that um let's click there we go you click these three little dots and click this dock to bottom so now we have

a much wider screen to work with and as you resize this in the top right corner you Can see what screen size you have or you can click the toggle device toolbar and now we can see it more explicitly um where we can resize the screen up here so this is probably going to be the better option for us and we can change the Zoom to let's say be 75% so that we can see it a little bit better and let me zoom out just a tiny bit we don't need the JavaScript console because we're

not working with JavaScript so we can close that drawer and now all we Have is the elements here on the left so the HTML and then the styles on the right or the CSS and if we click this select an element button and we select that H2 we can locate it within the HTML document and then see the relevant Styles down here so that's going to be our workflow and as we go through this we can you know just add new elements some text click save come over here and click refresh and now you see

it's been added to the document now there's just One more thing that I want to do and it's just going to make this whole workflow just a little bit nicer we're going to come into the extensions piece let me just expand this out for us we'll go to the extensions uh tab within Visual Studio code and let's type in Live server now live server is a way that we can get automatic updates every time we click save on our HTML and CSS documents so let's install this it's very easy to Install uh extensions in Visual

Studio code um so you can see it's installed I think that's all we need to do so this is is just another tab that's been opened up let's close it we don't need it we'll close this out as well and then all we have to do to get this live server working is come down to the bottom right of our screen and click the go live and it's going to pop up a security box you need to allow access and now what you'll see is that we've Got a different address this is actually um we'll

get into this a lot more later in the series but 127.0.0.1 that's our local host and then 5501 is the port that we're serving it on and we're serving the index.html document now if we put these next to each other close this out and add another you know piece of text so more text and once we click save you'll see that it immediately gets updated here in the browser that's going be incredibly Handy for us we don't have to go back and forth clicking refresh every time and it's also really nice because instead of you

know going to your file folder and right-clicking and opening with a browser you can just do it directly from Visual Studio code I know that was a very long kind of introduction to get us started working on this project but um as I've been trying to do within this full stack series is just take you through every Single step so we're not leaving anything out we're going through absolutely everything and that's why I wanted to show you the extensions the EMT abbreviations the favicons the metat tags all of these little details because as I was

learning I was wondered about them and oftentimes tutorials would just skip right over them but we are finally ready to start the actual Challenge and start building that testimonials grid very first thing I'm going to do and This is what you should always do is link up your CSS document if I open the file explorer you'll see that there is no CSS available to us yet because we haven't created it so go ahead and rightclick create a new file call it styles.css or whatever you want it doesn't really matter this is just a convention once

you have styles.css um let's just go ahead and put in a basic style so we'll use the wild card that selects all elements and we'll give it a Color of red and the reason we do this is just to you know verify that everything is working correctly when we click save you'll notice nothing happens here and the reason nothing happens is not because our live server is not working it's because we haven't told the index.html document that we need to grab that stylesheet so let's use an emit abbreviation we'll type link and you can see

all sorts of different links that You can use and if we go down to CSS click tab you'll see that we have a CSS link set up for us and since we are in the same directory so index.html and styles.css are in the same directory we can just use this exactly so it's saying style.css and just to stay with convention I I actually think it should be style not Styles let's just rename it to style.css over here and then save the HTML document you'll see that immediately the text color updated to be Red so we

know that our link to our style.css is working if you put in you know something like styles.css and click save not going to work anymore so that's that's what's going on there with that link tag and for those of you who have been following along with the series if we come to codeen what we just did there was we hooked up the CSS in the HTML by default when you're in codeen you can just type HTML and type CSS and they work together but when you're not Working in code pen which honestly most of the

time as a developer you won't be you have to actually come in and link them up with the link tag all right so let's get started here on the layout we'll close the file pane for just a second and if you look at the desktop design you'll see that we'll have to kind of flip back and forth or what we can do is we can split these editors so I believe we can split down and now we can close this top one And we have the index.html at the top and our desktop design at the

bottom it's kind of small but it will at least give us a general feeling for what kind of layout we need if you're like me and get kind of annoyed with all this text flowing off the screen just click view toggle word wrap and then everything wraps to our view I kind of like that so we'll go with that and to start us off let's see what we're dealing with here with the grid so the first step to Solving any HTML and CSS challenge um or just building a web app in general is to get

the layout correct and we saw that in previous lessons and challenges that we did where we just put a border on each of our div containers and then we did the layout and then we filled in all the content and styles so we're going to do the exact same thing here and you'll see it's not going to be all that complicated now the most obvious place to start if we make this a little bigger We have 1 2 3 4 five containers and they all have slightly different styles um it looks like the two white

containers here uh may have the exact same style but for now let's just give them all an unique ID so that we can uh select them with CSS a little bit easier so to do that um with EMT abbreviations you can actually just type the hashtag and then whatever ID you want to give it I'm just going to number these so we'll say testimonial D1 and then click Tab and you see what it Does is it gives an ID attribute on a div so that's what by default if you use the emit abbreviations to put

a hashtag and then type something or if you put a dot and then type something in PR press tab it will give you a class so that's just a quick shortcut so we'll go through and we'll do the same thing here so we'll say testimonial -2 and then another useful thing in Visual Studio code if you go to the end of a line click contrl C to copy And then crl V it will just paste them down so there's our five and then we can come in here and give this a three a four and

a five so we now have all of the containers that we need when we click save everything's going to disappear up here cuz we just have empty div containers that's okay for now the next thing that I'm looking at here um normally I just put a border on everything and and make a layout but this is already kind of a grid and we Might as well start filling in the colors as background so that we can see what we're dealing with and then additionally we probably need to start looking at the mobile design CU we're

doing this mobile first so I know this is going to clutter the screen up a little but let's go ahead and open up the mobile design in the bottom part here close this back out and here you'll just see that every card is going to be stacked directly on top of each other But they're going to look relatively similar so here's the desktop here's the mobile it looks like on the mobile design the cards themselves for the the grid items or testimonials are going to be the height of the content so the items with more

content are going to be taller than the ones with less so probably the best way to lay this out at the beginning is to just grab some of this content and put a background on there and just start Getting the structure of everything so let me pull this down I know that's really small but we'll work with it and here in testimonial number one I'm just going to put a small amount of content cuz I don't want our HTML document getting super busy with a bunch of text yet because that'll kind of that'll take away

from uh the concepts we're trying to learn here so let's go to the placeholder text and maybe we'll just grab this really short line of Text and we'll put that in a paragraph tag so we'll just copy it there and click save um we still have red text I don't really want that so let's replace this uh all selector instead of color red we'll do box sizing border box because that's our um basic CSS reset that we want to do we want to set all box sizing to border box so now we got the right

text and all of our box sizing is good let's resize the screen so that we actually have the Browser on the right mimicking a mobile device so this isn't perfect I don't know you know this is probably not exactly a mobile device let's make it even a little bit smaller gives us more room to type anyways um but this is close enough and this is what we're going to um build our mobile design off of as we talked about in the responsive design video 576 pixels is kind of our standard um mobile device so anything

576 or below is going to be considered Mobile so that's roughly what we're looking at here and if you right click and inspect and then you click this little icon right here to get the full screen um you should be able to see exactly how wide it is so if we just typed window.in with we're at 584 so if we wanted to hit that 576 number or a little bit lower it'd be right about here so we'll keep the screen size right here for now and then as we uh go up to The desktop uh

design we'll make it a little bit wider I'm going to copy this same text just so that we have something into each of these additional testimonial divs and now we're going to have some text to work with and then let's look at these colors here so how do we know what colors to use well we have some starter files and if we go to the style guide. MD it's it's going to give you layouts and then colors right here so this is where we're going to Find the colors that we need so if we come

down to the colors we see all of them listed in hsl format and you can use that in CSS but I just it's not my preferred way of doing it um and honestly I haven't seen a whole lot of developers that use hsl so what I'm going to do is I'm going to convert these to hex codes and that way we can work with what I'm comfortable with and probably what you'll more often just as a reminder this is how I'm doing it I Just typed in RGB to hex and then you get this tool

that Google has and you can just basically come in here grab an hsl value paste it into this box here and then copy the hex code and replace it here so that's all I'm doing all right I've got these all replaced here so we've got hex values a little bit more comfortable for most people to be using and we've got a couple notes on the text colors but I think these are mostly related to the text itself so We'll get there a little bit later I'm going to drag the style guide down to this bottom

um portion of our Visual Studio code screen just so we can have it as a reference now it looks like the background of the entire screen is going to be a light gray so we'll start with that if we go to our style.css um in addition to the Box sizing we also want to set mark margin zero and padding zero on everything um just so that we don't have any Unintended side effects so when we click save you'll see that everything gets smooshed together because we just excluded the margin and padding that's by default set

on a paragraph element in the browser and now we'll come down here and we'll say on the body we want the background color to be I believe the light gray or the light grayish blue we'll see which one looks more similar so there's the light gray that is definitely too Dark and there is the light grayish blue which I think that does match if my eyes are not playing tricks on me I think the background here uh matches pretty well so I think we got that right so we got the back background covered and now

we can start filling out our containers themselves so each of them again has an individual ID let's template those out so testimonial one and then we can copy this five Times we may not need all of these but we'll just have them out here for the start or actually of course we'll need all of these they're all different colors so the first one is this purple the purple card here so we need to grab that color from the style guide I believe the moderate Violet is what we're looking for so we'll come up to testimonial

one and give it a background color of that and now you'll you when we click save you should see that Background color now the next one that we're looking for is looks like kind of a darkish gray so very dark grayish blue I think that's the one that we want so we'll come to testimonial 2 and do the same thing and then for the rest of these I don't want to waste your time I'm just going to go and kind of guess and check until I get the background colors Correct on each one of these

uh pieces to this grid but the one thing I will say before I speed through this is the numbering of these so we've got them numbered one through five but you may be wondering which is one and which is five um for reasons that you will find out later as we designed this with flexbox um this top one will be one then two 3 four and then the one on the right is going to be the fifth one so just know that as I'm going through and Styling the backgrounds on each of them all right

I've got all the background colors filled in here and as you'll see in this mobile design that we're trying to make there's some room between the edge of the screen and these items within the grid and what we're going to do to create that is we're going to actually wrap all of these items in one big container and then we're going to set some padding on that container to bring All of them inwards a little bit bit so we'll go to the index.html to do that and right now all of these divs are just sitting

within the body but we're going to say um we want to create a ID of testimonial grid container we'll just be very specific with it grab the closing div down here and paste it in so now we want to select this testimonial grid container and put this in our Styles so hashtag grab the ID and now we Want to set some padding um you can either set it in percentage or pixels um for this since we're going to be making it responsive I'm going to start with a percentage so usually about 2% works pretty well

you can see that you get a little bit of padding there um but of course when we look at the the mobile design design and make this bigger there's a little more padding on the top than there is on the sides so we Can actually use the shorthand padding property to say we want 2% and then maybe 5% and we'll save that and actually got that wrong so the top and bottom is going to be the first argument and then the left and right will be the second let's bump that up to three see what

we got this looks pretty good um so I'll stay with this I'm I'm fairly satisfied with the spacing that we have here something that is really bothering me right now is the text color on these Darker backgrounds um so before I get too mad let's just go ahead and fill that out so for the first one we'll need a white um text color so we'll throw that in there and then we also will just copy this down for testimonial 2 we're good on three good on five but we'll also need it on four and now

you'll see that the text is popping out a little bit better um but it's all crammed together so we need to space things out just a Little bit as you see in the mobile design there's not only a little bit of space around the inner content of each um grid component but there's also some space between each grid component on a mobile device like this a simple way to add the spacing between them is to just set a margin bottom on each of these and this looks roughly around 20 pixels give or take so instead

of trying to set that on each of these let's create a class selector that grabs all of them and what We could do is we could come down here and grab each of them um one at a time separated by commas but that's going to get very tedious the better way to do it is to come to the HTML and instead of trying to grab them all by IDs let's assign a class to each of the grid items so we'll just say grid item is going to be the class name and then we can copy

that down into each of these divs and here's a little shortcut within Visual Studio code if you find The spot that you want to go in and you hold down the ALT key it's different on Mac but on Windows it' be the ALT key and then you click in a different place you'll see there's two cursors so we'll click again and now there's three cursors and then finally four and what you can do is now we can type all at once and paste in those class um the those classes that we just created so there

we go we've got class of grid item in each of these grid items And now we can come down and just select that and set a margin bottom of 20 pixels so when we click save we've got a nice amount of spacing between the items furthermore another similar thing between all of the grid items if we look at our Styles here is that the padding around the content is the same on each of them and it looks like um I'm not exactly sure but it might be somewhere around 20 pixels as well so we'll start

with that and we can tweak it as we go So we'll set p adding of 20 pixels click save and now our boxes are looking a whole lot better than they did a few minutes ago so we are far from done here with the mobile design but right around this point once I'm like happy with the general layout obviously the text isn't right in here we're missing pieces but once I'm satisfied and it doesn't look like completely terrible then that's when I go go to the desktop design and start making it responsive because I Want

to get the layout correct before I start you know adding a bunch of other things in so what we will do here is we're going to shrink this Visual Studio code window a little bit close the editor so we have some more space and then make this browser window larger so that we can use the Chrome Dev tools and when we bring this down here I'm going to click this button right here so we can toggle the device toolbar and now we have the ability to see this at Different sizes really quickly without resizing the

entire screen so that'll be helpful as we you know we can actually see the the width up here updating live so that'll be really helpful as we resize on different devices and design for that so here's about our mobile design if you just click this bar um you can get a small mobile device you can click here for medium and here for Large mobile device so here's here's the Large mobile device and the reason it shrunk Is because we're at 40% um so let's go to maybe 75% you can see it a little bit better

and then as we resize this we're getting into the larger desktop devices I know I had mentioned um about 576 pixels for the breakpoint we're going to use um and again that is because earlier in this course when we talked about responsive design I just said let's go ahead and use the bootstrap uh CSS framework break points they're right here so they go From 576 768 992 in our case we've got two designs only so we're only going to need a single break point for this now we just have to decide at what point do

we break so if you just play around with this design and you just look at the text right around so we're at 78 pixels wide right now and this is getting a little bit wide for my liking um with this mobile design over here so I think 576 right about here is going to be just About the widest will go for that mobile design and that's going to be our breakpoint then to set that breakpoint we come over to our CSS we write at media for a media query and since we're doing mobile uh first

design will set a minwidth of 576 pixels so now we open the brackets up and any Styles we put here are going to apply to anything bigger than 576 so all of this right here and before we get to far let's go ahead and test it this Is really important as you're coding whether it's HTML CSS JavaScript or anything else do it incrementally don't just write a bunch of code and then test it out all at the end so let's uh test it out by targeting A P tag and giving it a color of red

something obnoxious and we'll click save right now we're at 444 pixels so um we would not expect this style to apply but as we go above 576 we would expect all the text to turn red so let's see if it does and it does So that means that our media query is working great remember always put these media queries at the bottom of your CSS otherwise they may get overwritten by other styles so our goal here before we get any further is once we hit above 576 so when this is turning red and the reason

it's doing that is because I haven't saved yet um but once we get above here we would expect this layout to look like this desktop design over Here so the question is how do we do that and the way that we're going to solve this is with flexbox I'm just going to expand this uh vs code so that we can really look at the design here so as I look at this just by experience Alone um I'm thinking to myself that using Flex box we're probably going to need to split um these into subcontainers now

there's a lot of different ways that you can do it as always there's more than one way to Solve the problem but I'm going to choose the most straightforward and beginner friendly way of doing this I'm thinking that there is probably a way that we could take all four of these items on the left side wrap those in a container and then uh control the Overflow of the container with flex wrap and then size them accordingly but I'm thinking that might get a little bit complex to try to implement and by Adding just one extra

container we can avoid all of that so what I'm thinking is that we split the overall layout into two containers so the first container is going to be all all four of these items right here in the second container will be this item on the right by doing this we can take container one on the left and container two on the right and we can display flex and they will go side by side next to each other but that doesn't solve how we lay out these items On the left so what I would want to

do within those containers so so remember we have one container on the left one on the right and then the left container we can further divide into two other containers so we'll have a top and a bottom container and in each of those we will display Flex so that they sit next to each other and then we can use flex basis to make the dimensions of each of these um a little bit different I know this is a little abstract so let me just Show you exactly what I mean so we'll keep that down here

and this all happens within the HTML itself so to take these four items on the left and wrap them in a container we just need to find them so here are the first four and all we have to do is go at the top of here and set a container now we have to decide what to name it um so that we can Target it with CSS naming things is always difficult I'm not going to over complicate it here we're just Going to call it main left and make that div and then Within main left

like I said we're going to have a top part and a bottom part there's a couple ways I could do this but once again I'll go very simple and I'll just say top and then we'll name the other one bottom so at this point I've got everything laid out correctly so we want to grab items one and two so this one and this one and put it in that uh top container right here so we'll do that we'll just cut These away here and put there and then in the bottom we will take items three

and four and put them there now finally we have testimon monial 5 and I said we're going to make a separate container for that but lucky enough we've already wrapped our entire grid within the testimonial grid container and if you think about this from a flexbox perspective we always have to think container and direct children doesn't matter the you know Grandchildren or great-grandchildren those don't apply in flexbox so all we have to know is what is the parent and what direct children does that parent have this testimonial grid container has exactly two direct children it

has the main left and then it has the testimonial five which is that you know this tall card here on the right so now that we've got this laid out let's save it and I will now bring this back to the left side of the screen so that we can Look at it again and you'll see that on the mobile device you know nothing has changed here we put all these containers but since we haven't selected them with CSS there's really no change to the overall layout quite yet but now this is where the real

magic is going to happen and what we could do is um since we're Divi we're now designing for the desktop we did mobile first with all these Styles now we're doing desktop within the media query but again remember you Don't have to put everything within that media query there can be some some shared CSS properties between mobile and desktop designs so the first style I'll add is going to be the testimonial grid container we want to do work from the outside in so we'll go to style.css and we'll put that into our media query and

the only thing we need to do here for the moment is write display Flex X and when we click save you'll see nothing happens here because We're still looking at the mobile device but as we make this larger now you see that this um the left the main left container with all four of those items go left and then the last item testimonial 5 will be pushed off to the right because we've displayed them on the main axis which is horizontal now if you look at this design obviously this testimonial five has much less width

than the rest so we can set that with flex and I suppose It's probably about 25% it looks like 20 to 25% of the total width so let's come to our style.css and on each item we can set the flex basis so in this case we're going to want to grab testimonial 5 and Target that with our ID selector and then we'll say the flex basis for that we'll start with 20% and see what that looks like okay that's a little bit small I'm Thinking that we'll need maybe 25% I like that a little bit

better and we can always tweak it as we go the next thing we have to do is look at these four items on the left and they obviously the top two go next to each other and the bottom two go next to each other as well therefore we need to make the top a flex container and the bottom a flex container so you'll see the ID is top and bottom so all we need to do is come over here and say top display Flex and then bottom display flex but we have a little bit of

a problem here because they're not taking up the whole um height of that main container so if we go to the index.html we have the main left container and we want this right testimonial 5 to be uh equal in height to these other testimonials to do this we need to also turn the main left container into a flex container so we'll go right Here and display flex and this is not going to look right for a second because when we do that it puts everything in a row but if we change the flex direction of

the main left to be column now it's going to go back and look the same but now we have control using Flex box of how those are distributed so if we look at this main left container which its direct children are going to be the top and the bottom Which are also Flex containers um we can distribute those using the just justify content since we set the flex direction to column the main axis is going to be going vertical and therefore justify content allows us to align on the main axis we also have the ability

to say how large we want these using Flex basis so while top and bottom are Flex containers in relation to their children HTML elements they are Flex items in relation to the main left container so if we come Down and set the flex basis to um we'll start with 50% on each of them and then I'll show you why that's not going to work perfectly so we'll save that and now you see that we have these filling up the total height of that main left container and I was actually wrong the flex basis of 50%

works just fine because in the mobile version we set the padding or we set the margin bottom of 20 pixels so there's already already some space Between we'll obviously have to space out um horizontally but we'll do that in just a bit now the next question we have to ask is how do we get these proportions correct with these uh four containers to do that we can work directly with the top and bottom and we can use the flex basis of their children items to do that so all we have to do is grab um

let's see exactly how we need to do this it looks like these are a complete mirror of each other so this First one and the fourth one are about equal proportion and the second and third one are equal proportion so we know that our percentages are going to work pretty much the same so to do this we're going to need to grab testimonial 1 through 4 and put them down in our media query which is our desktop design so if we put these at the bottom remember in our desktop design these are considered Flex items

um we can go ahead and get rid of these two properties Because they're already defined in our mobile version which also applies to the um desktop as long as we don't override them so we can get rid of all those but now we can set a flex basis so the first one this purple one looks like it's got about 75% of the width um so we'll go with 75% and then that means testimonial 2 is going to have a flex basis of 25% cuz we want to fill up the whole width of that container and

testimonial 3 is going to Have a flex basis of also 25% and then a flex basis of 75% for that last one so when we click save you should see the proportions update uh pretty nicely here as we compare this design right here to our desktop design uh picture you'll probably notice that it looks a little bit wider overall and you'll see that there's more room around the entire container so let's just fix that so that we are not thrown off by these proportions and the way that we'll Do that I believe we can just

add some we can add a Max width to the entire container so let's look at our index.html and our testimonial grid container is probably what we're going to want to select and we've already got that select Ed in the media query so on a larger device maybe we set the max width of uh let's say looks like this might be like 600 pixels that's just a rough guess so that's a little bit narrow so maybe We'll set the max width to say 700 maybe that looks a little bit better let's go up to 750 I

think that's kind kind of in the ballpark and then to Center this we could use like Flex box but honestly the easier way is this little trick where you set a margin of zero pixels top and bottom and then left and right you give it auto so it's going to automatically give the margin to center it so when we click save you'll see it all goes to the Middle and now we're starting to see a little bit more proportioned grid here now at this point I think this is a little bit small the proportion we've

given to that right one so let's change the flex basis of testimonial five to be maybe something like 35% and then of course we need to set the left one to be the same so we need to set the flex basis on the main left which is all four of these um items Together we'll set this to about 70% I think and then update this testimonial 5 to be 30% and I think that looks just a little bit better for us once we add some spacing here it should look a lot lot better so to

finish this off here the layout um it looks like there's some spacing between each of these items you know horizontally and there's a few ways that we could do this actually I'm now Thinking we might even go like like 35 65 here and now we have these ones which are squished a little bit so maybe we need to update this container give it a bigger Max width then we'll change the 75 25 at this point I'm just like adjusting things until we get generally the right fit so let's try maybe like a 70 30 that

looks like slightly better but I still think we can go a little bit more so 6535 there we go I think this looks relatively good and then now that we've adjusted this this looks a little bit too big so we'll we'll claw this one back to 70 and 30 and I think we're looking good here I think the proportions between this in our design is relatively good and then of course this bottom one we need to match the top so we'll just come down and do that real Quick so 6535 so this one needs to

be updated to 35 and 65 and now our grid is looking really good now to get this spacing horizontally you'll see that there's these little gutters here um so right now we don't have any spacing horizontally we could do this with margin um as we kind of did vertically with that margin but I'm going to try to apply our flexbox skills to make this happen which is a totally valid way to do it as well so the first one we have To take care of is the uh main left container which surrounds all four of

these and then testimonial five here on the right right now we have a flex basis of 30% on this far right and 70% on the main left container so it's split in two but if we reduced those by a couple percentages and then we aligned them with space between them we could add that little vertical gutter in there so what I'll do is I'll take the main left container and just bring it down to say 68% so now we have about 2% um empty space within the container so let's save that and you'll see there's

no there's no space cuz it's kind of added at the end um it's kind of invisible here on the right but if we come up to the testimonial grid container and what we do is we justify content because remember the main left with all four of those items and the testimonial five on the right are Aligned on a main axis which goes horizontal because the flex direction is set to row by default so justify content allows us to align those within there and all we have to say is space between and when we do that

you'll see that there's a little space added there because we added some extra empty space and then we spaced them out between we can do the same exact thing with these Flex items here too so the top Flex container um the flex basis is 50% or Actually I'm not doing this right so the top and bottom are going to be the flex containers so let's just set the justify content on here to be um space between to start off all right and we'll save that and we won't see any changes because currently the flex basis

equals 100% so there's no space to add between but if we reduce um we'll just reduce testimonial one to 63% so we have 2% left over once again and we'll save it and now we have that Little space of 2% added in there as well now of course 2% on a large container versus 2% on a much smaller container is going to equal a different pixel width so as you see in the design the little gutter here between this testimonial five on the right and all four of these on the left that vertical gutter is

a little bit wider than the vertical gutters that we just added to these containers right here so you see how to do it with flexbox if you're okay With that fact then you can just leave it as we have it but what I'm going to do just for demonstration purposes is I'm going to undo everything that we just did so we'll set everything back to their original percentages we'll remove the justify contents and save it and now we're back to this place where we have no space between and a really simple way that we could

do this is we could just look at all of the flex items or all of the grid Items here on the left we can just add a margin to the right of say 20 pixels and it will be equal across the board so if we look at our index.html we have all of these individual items with a class of grid item but we don't want to add the margin right to this last testimonial so one way that we could do that is we could look at the main left container which has these four items and

we can select all descendants with a class of grid Item so it only selects those four so I'll show you what I mean here um I guess we'll we'll put this up here right under main left and we'll say main left is the parent that we want to look at and then we want to grab all grid item descendants of that and now what we can do let me just show you what we're selecting first so we'll set a color of red so that the text turns red and we'll click save and now you can

see all of these left four uh grid items have red Text but we've excluded the right one with this CSS selector that's exactly what we want so we'll add a margin to the right of 20 pixels and you're going to see that this just gets spaced out really nicely automatically and that is it's a little little much maybe let's go with 15 pixels and that is exactly how we would add that spacing on the right naturally and now it's equal between all of them at this point the overall structure of our grid looks very good

And now that I'm looking at it one more time it seems that this right one is still a little bit too wide and I apologize for going back and forth here trying to teach and uh and see how to do this at the same time so it's a little bit tough so let's let's bring this back to 20 25% on testimonial 5 and 75 on the main left container I think this looks good and I really hope I don't change my mind on that again I might but as of right now this looks very similar

and The cool thing is if we resize this down to Mobile so once we hit 576 pixels it should break and boom we have our mobile design so we don't have to up anything on the mobile side of things we just made this desktop design and it's pretty much responsive now the one thing you'll notice um is as we shrink it these Get shrunk a little bit so it may not look perfect say on like a tablet but it should work okay you could always add an additional break point um if you wanted To to

adjust those Flex basis numbers so that it looks better on tablet but I'm not going to worry about that here cuz I think it would just be distracting from the main lesson all right so we have got our layout done it is responsive and now we should be able to just go in and look at this entire design here and start adding in all of these components and styling them out before we do that though I'd like to clean up our CSS a little bit because at The moment we are duplicating a lot of our

CSS rules so this is what we would call kind of refactoring so you write the code out you don't really worry about doing it perf perfectly the first time but then you kind of edit and you you know iterate on it and make it a little bit cleaner so what you'll see is we've written this uh rule of display Flex several different times so what we can do is we can take all of these um IDs where we're writing that display Flex and put it into one single CSS rule some might say this is not

worth doing but I think it is it's nice to nice to break out our code a little bit so we want to select our testimonial grid container and display Flex um let me just write the rule first and then of course we want to select more than just the testimonial grid so what else uses Flex we have the main left so we'll copy that in there so main Left top and bottom so those are all going to display flex and now we can get rid of all of those individual rules on each of them click

save it should look the same down here we have these four uh Flex items all set with flex basis uh percentages that are very similar so let's group this together let's take testimonial 3 combine it with that rule and delete all of this and we'll take testimonial 4 combine it with that rule and delete this last one save it should get the same thing top and bottom now both have a flex basis of 50% and that's the Only Rule so we don't need them broken out separately we can just bring those together and delete that

rule click save should be the same and then I'm going to take all of our Flex rules and just kind of group them together here so let me let me just put those here okay so now we have all of Our CSS grouped up a little bit better and we can start working on adding the content I'm going to shrink this screen and we'll go ahead and close the dev tools and we'll just work on this first on the mobile design so that we have some more screen real estate and then we'll check it on

desktop to make sure everything is working so we'll open up our file explorer and index.html along with our placeholder text because this is what we're going to Actually be putting in um to all of these containers and I'm just going to look at the desktop design I know we're doing mobile over here but it's just bigger so we can see it better I'll go through the first one with you and then the rest of them are going to be pretty much exactly the same so I'll let you do those on your own and I'll just

speed through it so with this first card right here now we have this big quotation we're going to worry about That totally last we're not going to worry about that yet um the content itself it looks like we have a picture we have a name we have uh this says verified graduate so they're the status of that person and then we have the main testimonial and um the secondary testimonial so just looking at this immediately we need an image tag we need a paragraph tag another paragraph tag looks like maybe an H4 tag and then

another paragraph tag so let's get the Picture first this first one is Daniel Clifford so we're going to need that image and that's been provided to us if we go to images folder you should see image daniel. JPEG so we can finally start to to replace this so we're on testimonial one right here and we're first going to put in an image so we'll use the EM at abbreviation click tab and the source that we want is going to be the relative path and then we'll say images and then we want image- Daniel And then

the alt um attribute this is for accessibility you should always put this in here so um Danel Danel profile picture just a description of what that is click save you'll see this image come in to our first uh grid item we now need to write in his name and verified graduate so let's do that we'll just use a P tag so Daniel Clifford verified graduate there we go we've got those added in There now we have to go find the text so it says I received a job offer midc course okay so there's our Daniel

so here's our first piece of text we'll put that in the P tag right here so there's that text and then finally we'll just want one more P tag and actually no this will not be a P tag let's just set that as an H4 I think that's roughly what we would want here that looks okay okay we can always switch it Later then finally we have this last piece of text so this is the longer testimonial that we'll put in the P tag right here all sorts of formatting issues so I'm just going to

get this all on one line here it doesn't really matter but I'm going to just do this anyway okay so we've got our first card done and like I said you can go through and figure out how to do the rest of them it's the same exact pattern for Each of the different um testimonial cards so what I'm going to do is I'm going to just take this entire structure and I'm going to come down and replace each item with it when we click save you'll see that it's all looking the same and then now

we can just switch the individual parts so the second testimonial if we open up the desktop design it's going to be Jonathan so based on the image names here we have image Jonathan so we really can just come into the find the second one here so testimonial 2 replace the link here click save now we have Jonathan in here and then you just update the rest of the text so I'm going to speed through this and I'll see you when I'm done all right we are done and you can see that I've got all of

the text and images in here now it's just a matter matter of styling these if you look at The main design they're all about the same so we have the image in a circle on the left with the name and the verified graduate right under it and then the actual testimonial below so it makes no sense to try to Target each of these individually we'll just set a uh common class among all of them and then style it one time let's start with the image and the name to the right of the image the first

thing that we need to do Because how I see this is we've got the image on the left and then the name in verified graduate stacked on top of each other so to get those next to each other a great way to do it is flex box so the image will be Flex item number one and then we'll make a container around the name in the verified graduate which will be Flex item number two to do that we just come to the HTML we'll go to the first one here and we'll come right above the

image and What should we name this we'll just call it a class of header and then within header we're going to have the image and then another container with the other text so I'm going to call that container header text okay so now all we have to do is drop in the image up top and then these two P tags in this container down here I'm going to split our style.css to the Right here in Visual Studio code so we can see both and as we look at the header and the header text we can

come down um since this applies to both mobile and desktop we'll just write it up in the mobile first section where it applies to pretty much any everything and we'll just put it at the bottom we want to Target header which is going to be display Flex automatically when we click save you're going to see it jumps on to the correct line and then These are lined up so if you look at this the picture and the text they're like on the same horizontal um axis so the way that we get that to happen is

align items we're aligning items on the cross AIS to be Center so now that's going to work and then of course we need to grab the image so from the header container we want to grab all images and we want the Border radius to be this is just a trick to make circular Pictures we want that to be 50% so you see now we have a circle uh picture and then we want the margin right to be let's call it 5 pixels um actually that's not enough so let's do 10 pixels now you can see

there's a little space between those lastly we need some space under this header container so we'll come back up to header set a margin bottom of maybe 20 pixels and that will space us out from this top header container to the Text under it now of course this has not applied to the rest of the testimonials but we will follow the same exact process as long as we keep the same class on them these CSS Styles should apply just fine so I'm going to speed through this so you don't have to watch me do it

um completely I'm just going to go and and create this exact structure uh below for each of them and probably should have done this the first time around but whatever we'll we'll get Through it okay so I got that done and that's kind of a good lesson there you usually want to finish like one one iteration so one card um get it all correct and then apply the styles to the rest I didn't do that so had to pay for it with some extra time the next thing I'm going to do is space out these

two pieces of text so the first one's an H4 the second one is a paragraph tag so we can select that with our our Styles pretty easily all we have to do is look At any um grid item class and select the h 4S and add a margin bottom so we'll say grid item H4 and we'll set a margin bottom of 20 pixels maybe I think that looks okay so 20 pixels yeah that looks pretty good we're getting close to the finish line here the next thing you'll notice is there's rounded corners on each of

these cards that'll be pretty easy to apply so let's go find our grid item style which selects all the grid items And we'll set a border radius of around 5 pixels maybe that'll make those rounded Corners so that looks good there's also a little bit of a drop shadow on each of these um or at least the white ones but we'll just go ahead and put it on each of them just for Simplicity so any grid item is going to get a box Shadow you can go to a box Shadow tool online this is just

the standard that I always put in there um is a black color With 20% opacity and then I kind of tweak these um values right here until I get roughly what I want so you can see there's a little box Shadow there I might spread this out a little bit more it's not exactly what we're looking for but it is it's pretty close and I'm not too concerned about getting this for btim to the design the next big piece to this is the font so in the style guide if we go here to the style

guide it's Going to tell you what font you need to use so for typography the body copy is 13 pixels um we haven't set that yet um actually let's let's do that really quick so for grid items you could set this at multiple levels but for grid items we'll set the font size to be 13 pixels makes it a lot smaller here for us and then for grid item h4s we'll set the font size back up so we'll say maybe 1.2 RM so that's uh the Root element is going to be um the HTML which

I believe is set default to 16 pixels so that will make it a much bigger text and I think that looks relatively good decent proportions there so I'm I'm okay with that and now we have to actually change the font itself so in the style guide it says that we need the barow semic condensed font from Google fonts I happen to have this open already let me expand the screen and all you have to do Is select the styles that you want so we will do that and it looks like we need 500 and 600

font weights so we will go grab medium which is 500 and 600 which is semi bold now it's saying that we just need to put this link in our HTML document so we'll copy that should be good on this so let me resize the screen real quick and now all we need to do with this is put it into our HTML so we put this in the head and we can put it right by our stylesheet link so I think usually you're supposed to put this after your stylesheet so that this applies I'm not entirely

certain if that is that matters a ton let's save it by default it's not going to be using it because we haven't enabled it so we'll have to come back to our styles.css and in the body this might be where we put the font family and this is where we'll go to the rules here and and we Can just paste in this CSS rule actually so we'll be using Barlo semic condensed with a fallback of sand serif save that and you can see all of the font is is looking a lot closer to our demo

here you'll notice that these White cards have a gray text rather than the black text we're giving it so let's update that I believe we have a rule for this already so we can actually condense testimonial 5 and Three um into one because they have the same um styles and then the font color that we need if we go to the style guide is probably this light gray I'm thinking nope that's a little too light so we'll try the dark grayish blue and I think that's a little bit closer may not be exact but I'm

I'm thinking it's close enough it's it's better than the black that we had before now the smaller text has a little Bit less opacity than the main text and then we also need to send the set the font weight so let's look at the style guide it says for the typography or note for the text colors the verified graduate okay we're not ready for that yet review PA paragraphs inside quotes have the same color but are 70% opacity so in our design here we have a couple different P tags so we have the name verified

graduate and then the Testimonial down here so if we just um set the font weight of a P tag and the opacity of a P tag for all of them that will um apply to mostly what we want cuz we want this testimonial to have 70% opacity and probably verified graduate as well and then we can specifically override that opacity style to be 100% for the name uh later so let's let's go ahead and do that so we'll see if we have something for this Already so we have grid item so we'll just set the

grid item P tags so any any P tag within the grid item we want to set the opacity to 70% and then for the name let's just add a class so we can use the ALT key to come into all of the P tags with the name just holding down alt and we can give it a class name and then we can come down into the name selector and give it an opacity of 100 % maybe not the most effective Solution but it works and we probably need to select it with header to be more

specific um than our grid item P because header and name um that's two class selectors is more specific than grid item P which is a class and a tag selector so this one takes precedence and we'll override it now I think we just need to tweak a few things with the text here not not a whole lot we might want to make the name just slightly larger than that default 13 pixels so we Can come to that rule that we just created so the name and we'll say the font size is going to be uh

1.1 R actually that's going to be way too large um how about one RM so 16 pixels that looks better if you open this up you might see a little border around these pictures too um so while we're here we can look at the header image and we can give it a border of one Pixel um solid maybe purple I think some of them are different but let's just go with purple on all of them you can see that little uh border that we have around there you can tweak that how you like it lastly

um I think the font weights look okay okay but they did tell us to import weights of 500 and 600 so we should probably explicitly set those so on the grid grid item h4s we'll give a font weight of 600 looks about the same so not a huge Change for the most part I think I'm happy with the design we have it's not absolutely perfect but it's pretty close and more importantly we've gone through a lot of the Concepts we've covered in the previous videos which is always fun to apply those leave a comment if

I missed anything I think the only thing remaining is this big quote up here and there's a couple ways you could approach this I do not believe there's any assets for this like this is not an Image actually it is so this is an SVG and we could use this SVG um I don't want to get too far into um CSS and SVG it's like a whole other topic but I'll go ahead and just quickly put it in and show you how to do it so what we can do is this background pattern quotation SVG

if we click on it it's just a bunch of numbers um but we can actually put this into an image I believe so if we come to our index.html let me get this CSS collapsed A little bit and it's obviously on the main card the purple card here so number one we can pretty much put it wherever we would like here within this main card so let's make an image and then the source is going to be images and then background pattern quotation so now you see that quote is already in there that's nice now

we just need to absolutely position this because it's in that weird spot so it's like kind of randomly up there in the top Right corner let's give it an ID so we'll give it the quote ID and then we come over to our CSS and we will select quote and we'll say position absolute and what that is going to do is position it relative to I believe the viewport by default um let's see how that works so from the right we want it to be 20 pixels roughly okay yeah so it's relative to the viewport

we want it relative to this Container itself so to do that we need to set the testimonial one container to be position relative and once we do that that quote will come in correctly come down to quote it should be probably more like 30 pixels from the right and then from the top it is pretty much flush with the top so we'll do zero you can see that gets us a little bit closer um and as we resize this it's obviously going to change that a little bit so maybe from the right we go like

3% I'm just going to experiment around with this until we get it right maybe like 7% That's closer let's just ramp it up to 15 okay I like that I think 15 is pretty good and like I said it's flush with the top so that's good and then finally as we resize this I know this doesn't look amazing we're just kind of in that middle state where it's like this is like bigger than a mobile device But smaller than a tablet so you're really not going to see this on any device for the most part

so like here is about where you're start you're going to start seeing it and it looks like the quote is like a little bit above that text and in our actual design here it's showing it as behind the text like overlapping that's partially because of the spacing that we've given it so I'm not overly concerned about it but as we resize it and it does kind of overlap Text we want that to go behind everything so to do that we need to go to the Styles we need to set the zindex equal to like negative

one or actually let's let's set this Z index to one and then on the testimonial one we will set the zindex to be uh zero so it's above the testimonial card but then we want it to be below the testimonial text so we'll set the zindex Of the header to three think that might might get us there maybe not there we go we just need to set it to position relative so that the zindex applies and now it should be going behind any text and stuff like that so should be good there and I think

our design is pretty much complete so as you can see like we could spend the next hour or two hours trying to get this to look exactly like the example here just if you're curious I took a second to try To figure this out fully um exactly how we can get it to look like this and didn't come all the way there but I did get it somewhat close so I put a Max with of 1440 according to the style guide here where it says the desktop is 1440 and then I set the testimonial 5

and Main left containers to 80 and 20% respectively so this looks okay I think there's it's not exact like I said but it's a little bit closer let me know in the comments if I Missed anything but as we resize this it should be responsive we have this like middle state where it's a little bit weird but honestly trying to perfect that is just going to be a lot of tedious tweaks that you can kind of do on your own if you want but the main goal here has been accomplished on desktop it looks like

this and on mobile it looks like this where we have everything stacked on top of each other so now at this point we're going to take This Local Host um that nobody can see and we're going to deploy this to GitHub pages so that you can pass it off as a link and show off your project so the way that we'll do that let's close out everything here so we have a clean workspace so what we can do is we can open up Source control this is embedded within uh Visual Studio code and what we

can do is initialize a repository and this can be done on the command line too but I think we should you know since we Haven't learned get yet and I don't expect you to understand any of this quite yet um might as well use the visual interface so from here it's we initialized the repository and um it says control enter to commit on master so we can write a message just say first commit and then controll enter uh we're going to Stage all our changes and commit them directly yes and I'm I'm actually set up

with GitHub already so it may ask you to go Through some authorization where you have to sign in to GitHub so go ahead and do that if you have to now what we have to do is create a new repository so on our GitHub so if you don't have an account sign up for GitHub you'll need it uh for the rest of your developer life click new repository and we'll just say a testimonial grid frontend Menor challenge solution very long uh repository name you don't need to make It that long and we'll just create the

repository make it public not too worried about initializing all of this stuff now from here you're just going to copy the https link come back to visual studio code click these three dots click remote add remote and then we're going to put in that URL from there we should be good I think we want to push it to the main branch so Let me see what we're working with here y so we need to push to main but this is just the name we're giving it so origin we're just linking up our code here to

the GitHub repository again you don't need to understand this we're just trying to get it deployed here so um now we're going to click push okay then let's check it out here we'll refresh and you'll see that we have all of these uh files that we just created from Visual Studio code here on Our repository right now we don't have it deployed to GitHub Pages um the way that we can do that we can do it here or we can do it within Visual Studio code but quite honestly doing it within the repository is is

relatively straightforward since we already have index.html in the main root of the directory so we'll go to master find or create a branch and type GitHub pages and it says create Branch GitHub Pages from Master which is exactly what we want to do this is Master what we're looking at right now so we'll create that branch and now let's go back to our main repository and and I believe it should publish this to GitHub pages in the next minute or two it doesn't happen like instantaneously because what it's actually doing is taking our code files

and putting them on GitHub Pages which is just another server and then serving Them over our GitHub URL let's refresh the page looks like our environments has been set up now so we can click on the main repository we can click GitHub pages and then view the deployment and you can see that what we just created is now live and this link up here you can copy and share with someone else and as we resize it it of course is going to resize to that mobile mobile responsive uh with and then desktop responsive all Right

that is the end of the front-end web development foundations course it was a long one um I applaud anyone who got through every minute of it um hope that you enjoyed it be sure to give free code Camp a like on this video And subscribe to their Channel once again there is a link in the description with some additional resources um for each of the topics that I covered so that if you want to take it to the next level you can well this is a long course 20 plus Hours it's only the beginning if

you want to be good at front-end web development or even extend your yourself and get into full stack development you're going to need to practice there's going to be a lot more learning to come but hopefully this course gets you on the right foot it gets you started in the right direction um on your career to becoming a web developer I wish you the best of luck in your journey um to stay connected with me I'm pretty active on Twitter at zgd De so feel free to connect with me there I've also got a YouTube

channel of my own which really appreciate uh you hop over there and uh check out what I've got on that channel so long and happy coding