Web Developer Live - Hanging Out Coding Live + Q & A

cheer you already knows your boy joe back at it again codingphase.com the most littiest live stream any developer ever had [Laughter] amen what's really good okay what's really good today kids we are going to be building live right this is a freestyle right this is what i call free coding right where i just come here uh do a quick live stream q a with you guys and at the same time i just come in and start coding something all right um yesterday we was working on a dashboard we're going to continue doing that dashboard another date today we're actually going to be working on the html css for one of the projects inside of my javascript course now let me give you guys a scenario right so we actually uh like to teach it right teach javascript right that's what we're talking about well we like to teach javascript by actually doing things things that you are going to be doing in a job okay by the way if you want to get access to this course if you like this project that we're about to build here live um imagine the javascript side right once we start putting the animations once we start making this thing actually functional you're gonna love this project so this is actually the second project for the javascript course that we're gonna be doing right here live um and again the scenario is this right mercedes-benz reaches out to you and says hey we would like to create a new home page for our website okay so this is a luxury a brand right mercedes-benz and what we're gonna be doing is we're gonna build the landing page and then at the same time we're gonna build a javascript slider 100 vanilla javascript okay now in this live stream again we're just building the static site right which is just the html css and then from there inside of the course we will be building everything that has to do with javascript in there so definitely come in and um yeah and enjoy this live stream and if you guys have any questions i will answer it uh shout out to my boy kelvin davis what's good kelvin um so yeah i'm about to just get started all right um so again this is going to be freestyle i don't got a design i don't have nothing i'm just going to freestyle this so to get started what i'm going to do is i'm just going to open up good old vs code okay open up vs code real quick and i'm gonna put this on this side of the screen and let me go into the screen box let me share this okay there we go all right cool again this whole live stream i'm not teaching anything if you're expecting me to teach you something well you could pick up some gems while we're doing this but i'm not sitting down and explaining things i'm just going to be building so if you enjoy this hey enjoy it if you don't enjoy it hey it is what it is you know i can't please everybody okay greetings from switzerland shout out to the people in switzerland okay so let me see matter of fact let's make sure we turn on monetization on this video okay because we need a bag okay we definitely need a bag okay so this is done all right uh this is how the mercedes-benz website looks like we're gonna make something way better than this okay so let's get into it all right i don't know why vs code i can't i could resize it but i can't move it around does anybody know how to do this on windows like i don't know why i can't move this thing around um in case you guys do know let me know okay i don't know everything in the world all right so i'm gonna go open folder okay and then in here what i'm going to do is i'm going to create a new folder oops okay open folder uh go to practical.js which is the course okay by the way you can actually pre-order this course let me put in the description so you guys could get access to that um so let me just see if i could pull this up real quick before we start coding just in case you do want to take this course it's a javascript course where we're building practical projects so if you're interested in this you could get access to it with the monthly subscription the yearly subscription the lifetime subscription or you could buy it now and pre-order it for 25 bucks that's it right so if you want it let me know okay um let me see if i put this in let's see practical javascript pre-order let's see coupons okay 50 uh let me see [Music] okay here we go this is the link so let me copy this link copy this link put it inside of this video click right here uh pre-order 450 pre-order with a 50 off javascript practical course or the practical javascript course you can pre-order it right now 25 bucks it's not much bro but you're definitely going to enjoy this course we're doing a lot of like cool projects stuff that you're going to be doing at a real job okay so i want to prepare you guys i want to have you guys ready for the world okay so i'm gonna come here a new folder scenario two and then here i'm just gonna call it scenario2c so this is where i put in the html css code and then so because you know some people they don't want to type this right they don't want to actually build this whole thing themselves so what i do is i record the html css portion of the course um separately right i build it first separately and then from there i come in and i create videos for the html css course or the javascript course and do the html css part first and then i give them the final code in case they just want to skip straight to the javascript so they don't have to waste no time right so the people that want to build it could build it if the people want to get the complete files they get the complete files all right so again let me come here i'm gonna do just index.html new folder css uh new file js oops new folder js new folder js and in here we're just gonna leave it blank for now but inside of the styles i'm gonna put in styles.css and then we have index.html all right cool so the first thing we want to do is bring in css reset copy this create a new file reset that css paste this in save that okay all right let's bring in some google fonts click right here i think i should have some already if not let's go and search for noodle sands i like this font a lot i think i don't need the 900 one um matter of fact i do i think i do so i'm gonna come here copy this code go to index.html html5 and then in here i'm gonna do this like this uh what do you think about doing algorithm exercises while learning javascript you can do whatever the hell you want it depends on what type of company you want to go for man like there's companies that will hire you without no algorithms so if i'm in a situation where i need to get a job right away i'm not trying to be like going through hell just to get the job like i'm applying to companies that's gonna take me for the skills that i have you know and that's what i tell people all the time like just go for the things that's going to hire you right away like you don't have to waste time and you know and be applying to like uh companies i mean you could apply to whatever company you want right it's whatever thing it is that you want to do so again oh my god okay download wallpaper let me open this up like this go to projects practical js scenario 2c new folder for the images img and then i'm gonna drag this here okay and then i'm just gonna say uh wallpaper one the jpeg there we go now now that we have this thing let's let's start it up okay let me close this okay and what else what else do i need to do okay so this is a freestyle this is straight off my my head this is how i like to do things i like to just come up with things i have like five six different designs that i take for inspiration either color or the fonts or a link arrangement of layout right and then from there i just come in and i just freestyle so yeah that's what we're doing right now okay so let me see where is it okay hold on i gotta close some stuff up over here okay here we go all right cool so then now what i'm gonna do here is on vs code i'm gonna turn on um the live server i don't know why sometimes it doesn't turn on sometimes i'll be having some bugs bro but again we just gonna blame windows for it oh man it's a windows computer you could you can't ask too much out of it you're lucky that you don't have a virus right like that's how i look at it it's like okay here we go all right and let's get started all right cool so the first thing i'm gonna do is i'm gonna put this here okay and then put this here okay so then from there let me see which one no there you go and let me see can i move it yep there you go all right oh my god so first thing that i want to do is i'm gonna create a header i'm gonna say header okay and then from there i'm gonna say class call this page header okay and then in here i'm just gonna put in look at what they have so they got vehicle shopping inventory all right so we're going to bring that in we're going to put in a section here div class page header and then we're using bem so it's underscore underscore logo okay and here it's just gonna say logo save that let me close this close this close this okay close this what else okay so we have it right here close this close this and there we go i apologize i freaking got allergies so that bothers you it is what it is okay let's see what else shout out to everybody in here uh joe don't look into it today it's work it's work kids i'm actually like sleepy right now to be honest if you guys don't remember i went to sleep last night like at three four o'clock in the morning and then i was coding last night and then now i just ate so i'm like i got the itis right now bro like straight up i'm so full and like so sleepy and then i just took a freaking medication for my allergies so it's like right now i'm like sleepy but it is what it is that's fine um so then now google fonts i already brought this in right so all i need to do is bring this thing in here copy this go to the styles no matter if i go to the reset i'm going to put it right here save that so then that could be the default okay now let's see what's going on oh of course i haven't brought in none of those things so i'm gonna bring that in and say css slash reset dot css then link css styles that css okay there we go now before anything let's just actually make the the background that wallpaper so in here i'm gonna call this a section with the class of uh jumbo slider right so jumbo slider okay and then we're gonna take this put this in a ul li okay and then give this the class of slide jumble slider underscore underscore slide save that so let's start with that with the jumbo slider so when i say jumbo slider okay and we're going to say height 100 vh with 100 vw save that now i'm going to comment this out for now save this and then in here so we got the jumbo slider then we got a ul all right and then we have the li which is going to be the jumbo slider slide so each ally is going to represent a slide so what i'm going to do is i'm going to say jumbo slider underscore underscore slide we're going to say background and the background is going to be let's say url background url img slash wallpaper one that jpeg okay height 100 bh with 100 vw okay now let's see did i put it in right inspect this okay so it is there now am i using this correctly or do i even have the image in there img we'll pick oh up wallpaper that jpeg.jpg okay so let me rename this okay wallpaper1.jpg okay inspect element let's see why the image is not showing up it should show up yeah it's there okay so it is there now let's see why it's not actually showing sometimes you gotta debug this so frick sultan shout out to you to fix sultan for being a clown [Laughter] you thought i didn't code you you thought i didn't know how to like come on bro i've been doing this [ __ ] since 2011 when you have diapers you know what i mean before you even know what what coding was my first website was at the age of 14. i'm 33 years old so technically you know i could say i've been doing this [ __ ] since 14 years old but i don't want to flex like that right so [Laughter] i was like oh [ __ ] i'm surprised like yes stupid yo people are crazy man uh i know he probably joking though so let me see let's see what the hell is going on here it should be showing now let me try this maybe i'm putting in the wrong one right now let's see so background url okay it should be showing right here jumbo slider jumbo slide let me try to see maybe if it's something with the syntax of this why the image is not showing okay let's see section jumbo slider i think i might be misspelling something okay it should be here so there's something going on with the image so let me try this let me try to get just a regular um mercedes-benz uh let me just get the cdn through here copy let's say copy image address okay so i'm just gonna put this let me just make sure body background okay then url put the url here so it should be showing here there's something going on okay so it is showing so maybe it could be it could be the let me see background okay and then here we're going to say background size putting cover okay background position centered okay so take this out of the body tag let's put it right here on the slide okay so i think it was something has something to do with the url of the image maybe the image is img wallpaper one i don't know it doesn't matter i'm not gonna waste too much time i'll figure it out later okay so this is what it's looking like right now okay and then now i want to come in and i want to make the jumbo slider background to be a little bit background color right let's say 1b 1b 1b okay and then now this image we're going to say opacity 0.8 let's say a little bit more than that opacity 0.4 okay and then copy this we put in a hover effect this is what i like to write with with like sas because sas is like so much easier to just nest these things in here so but it's just setting up next gs and all that whole process is annoying so i'm not going to do that right now i'm just going to keep it html css okay so we got this jumbo slider hover okay and then opacity let's bring it up to one okay all right so this is how it's looking like all right so then now i'll put in a cursor pointer um also tool let's put in okay so i'm freestyling i don't know exactly how i'm gonna do this [ __ ] i have no design i don't design this um i'm just like here uh okay so we got this let's put in transition transition uh transition the background right and then let's say point point three seconds ease in and out save that let's make it a little bit longer say two seconds ah no let's see let's try this transition all so okay no it's the opacity that i want to transition sorry about that i don't know why i was putting okay so instead of point let's put this at .4 seconds okay so it's a nice little fade okay cool now uh we might want to use let me see how will this look a filter um filter and then not contrast uh grayscale saturate okay saturate all right and let's say 0.4 okay so then now you know what i'm gonna put it for all i'm like just the opacity is like no let's put it for all all of them so i found this controller a little bit better so let's do the same thing but put a comma and then keep the same thing but then this one we're going for the filter hmm can i do that give me you know okay short hand property done a single trans single transition um it's a way to do multiple transitions maybe this comma is messing it up there you go that's what it was messing it up right so then now on the filter we're going to say filter saturate to one like that there you go so it's like no color right and opacity to be a little bit right and then as we hover then it brings back the color and also to a brings the opacity okay nice all right so now we have that now the next thing that's just the basics right now we gotta bring in the header let's bring out this header okay and then this header we're gonna make it oh first of all almost forgot about this uh asterisk curly brackets box sizing uh border box okay there you go so we have full control of everything then the next thing is the header or let's say dot header or dot page header uh display flex okay let's just start with display flex let's start with padding uh 20 pixels all around okay then let's also make this position fixed okay position fixed okay we want the color to be white of everything by default okay let's see what else what else do we want out of this thing z index z index let's put the z index 10 okay so then we have to logo there no matter what okay and then now what else we want to add we want to add those links vehicle shopping inventory so okay so let's see this class we could use a nav right you can just keep the semantics right so say div or nav sorry nav so class page header underscore underscore nav okay oh yeah page header underscore underscore nav and then here we're gonna put in the links okay what was it i got bad memory bro vehicle shopping inventory vehicle shopping inventory vehicle shopping inventory vehicle shopping inventory vehicle shopping inventory vehicle shopping inventory vehicle shopping inventory vehicle shopping inventory vehicle shopping inventory sorry there we go okay cool so then now let's come here on the page header we're going to say uh justify content uh space between hold on hold on give me a chance okay let's see what's going on where page header all right that i put in the right place okay it should oh of course with 100 percent right [Laughter] okay somebody said use the use the mercedes-benz logo as the pointer we could do that too [Music] i'm currently learning about javascript in-depth uh i don't know what the hell is all the stuff that you're saying wadi kaye eloquent js whatever other materials about closures generate um i feel like working i feel like i'm i'm working i feel like i'm working what is taught to junior developers the first year of of job your thought that's not like what you do in your first year um like i'll be honest with you like this type of project and what we're doing in in the actual javascript course is going to be more valuable to you than 90 percent of the stuff that people are teaching and i'll tell you why um the thing is that what they're doing is they're trying to teach you javascript as if they were teaching javascript as a regular language javascript is a visual language right for you to be good in javascript not only do you need to learn how to program in learning how to program you can learn that with any basics like you could go to free code camp and learn the basics of what's a for loop what's a while loop was a a variable was a element was a freaking an array was a string was a number right you could learn that from anywhere okay you could go to w3 school and look at that and just learn it from there um i feel like a lot of people try to teach you a lot of different concepts that you're not going to be using that's like when somebody comes in and tells me joe i'm learning about aws and i'm learning how to be able to scale uh a server to millions and millions of users and this this and that and it's like but yet you tell them how to just spin up a server with some sql database and you know whatever php in the background and they don't know how to do it right it's like sometimes i feel like a lot of people are teaching things as if the person is gonna get to that point on day one and it doesn't work like that so with javascript you gotta actually build things that you're gonna be doing at a job it's not about theory that [ __ ] doesn't work this is why people come in and be like well i took a course here i took a course there i took a course there i took a course there and then you tell them hey build me a slider they don't know how to do it hey connect to this api loop over the data and filter out the data and then display in this chart they don't know how to do it like they can't build anything on their own because most of the courses they are teaching the programming they're basically going into the programming side of things but it's like with javascript the best way to teach somebody is to get their hands their hands dirty start building things like what's the point of knowing what a closure is when you don't know when to use a closure what's the point of knowing uh every different like four of and four in and all of these other ways of doing loops or iterate through through an array if you don't know how to use it when do you use it when do you use that map or on an array and when do you use a for loop on in a rate if they don't know how to do that or you don't know how to do that like that course is useless i'm telling you ahead of time i've been through this process i'm a self-taught developer just like you i know exactly what you need right because i'm i've been there right i've been in situations where i've taken courses myself where i'm like okay i just went through eight hours of syntax that's like me teaching you how to how to write right but instead of me teaching you how to write sentences i'm teaching you to read the dictionary first and then i'm gonna tell you okay now that you read the whole dictionary now let's go and write a sentence you get what i'm saying you get information overload okay so yeah so that's the thing i mean you know good luck on wherever you're learning and stuff like that but i will say gift is a try when you get a chance if you want to check it out it's only 25 bucks and to pre-order the whole course and if you wanted to check out on codingphase.com for twenty dollars you guys to this course and everything else it's the best thing that you you're gonna get out here i guarantee you that um and everybody's great everybody has good things right that they could teach i feel like my my thing that i have is i can break down things that seem complicated to make it easy for a beginner if you're a beginner i'm the perfect guy for you if you want to get more advanced things and you're like on your second third year four or five a year as a developer there's a whole bunch of guys that are on plural site who have 20 years of experience and they're gonna get you from your year 5 to year 10 to year 15 to year 20. what i do is i want to make sure that whoever's a beginner they understand these things and they could actually get their hands dirty and get up and running right away so that's what i do all right but um yeah a lot of people don't know how to teach javascript uh to beginners at all i think they should do like examples or or levels people should put levels and say okay this course is geared towards uh a guy who is coming from java right and then it's now learning uh now learning javascript and then that course could make sense for that person but for the average person like i've been doing this [ __ ] for almost three almost four years basically we could say four years since i created like codingface.com and i could tell you that from what i learned over the years is the fact that most people that's trying to learn how to code they get overwhelmed and don't know how to build anything on their own so you have to make sure to teach them the things that that they need to learn while building it and explaining why you chose this and why you chose that so they could go in and put that into their brain and say oh shoot in this situation i want to use a for loop oh in this situation i want to use uh that map on an array you get what i'm saying um yeah jocelyn says uh yeah i get it sorry for the spelling it's all right i'm from new jersey uh new jersey i know the basic react view third self learning you have very nice course and i love your q a what is and what you're doing for the community yeah no i love doing it doing what i do out here but i wanna you know i i tell people hey man like don't just go into like a course and be like well i'm gonna learn closure i'm gonna learn all this other stuff right but why is it important why are you gonna learn uh closures why are you gonna learn uh more advanced topics are you gonna use it are you to put it to use when do you use it so those are the things that the instructor needs to answer to you um if you're not getting that from that instructor you got to go somewhere else okay let me see so styles okay so we got page header nav okay let's come in here page header nav okay and then okay and i'm gonna target the anchor links let's remove that text decoration put in none okay let's also put in spacing padding 10 pixels several pixels top and bottom 10 pixels left and right okay now let me see that all right now the next thing that i want to do is i want to put some text over here so this text is going to be vertical so let's see so let me see let me see okay so we're going to put li on the li we're going to make delis to be the page slide we're going to make them position relative so all these elements that we're about to add to it could stay within there okay now inside of the slide i'm gonna come in and i'm gonna put in um let's say number diff class okay div class jumbo slider okay and then slide number okay and then here i'm gonna put in zero one okay and let me see the jumbo slider slide hover let's say font size say 20 ram that's gonna be huge okay huge okay zero one font weight all of this is freestyle kids i'm just trying to figure out how i'm going to make this look good okay so we got jumbo slider slider okay so then now what color should i use for this let's say color oh you know what we're gonna have to do some some fixes to this because again it's desaturating everything and we don't want it to desaturate everything it's just the image so that means we're gonna have to go in and create another element here and this one's gonna be called this class jumbo slide image or background better and now here let me see jumbo slide number copy this what if i copy this whole thing paste this here remove all of this no we want to keep that we want to remove all of this from here just the position relative we're going to keep on the jumbo slide and then everything else so here we're going to say jumbo slider slide background [Music] hmm all right there we go now let's see why did it move okay i see why so this image is already inside so then now and here we're going to say on the slide number we're going to say position absolute okay and we're going to put in top 20 percent just like that all right now oh don't tell me i deleted this ah no why joe okay so i gotta go back where's the you know what it's all right if i delete it it's fine because i could just write it again so jumbo slide background hover and then here we're going to say filter [Music] filter saturate yeah filter saturate saturate one opacity one okay so there we go so starting to take some shape kids started to take some shape okay right now you might not see the vision but once we're done it's gonna look amazing because that's what we do here kids all right so we got one all right then now let's actually move this and i say left another 20 okay now in here let me see we want to put in some text so let's look at the mercedes-benz website and let's see what does they have it's some the jewel of any interior okay let's see inventory new vehicles okay so you see we get the text from here copy this all right this class call this title born to perform develop to outperform all right now i'm position this this thing like this i don't know if i should do it like that though um maybe i should use display flex it depends on how i want to do the animations um sometimes it's hard when you're freestyling this thing okay because i could use uh should i do it now i think i'm gonna go with display flex instead of doing positioning so let's do this let me see we'll say the number what's the number okay let's remove the position absolute okay let's put this here like that let's make the background position absolute save that okay there we go so now we have control of this thing okay and then now what we're gonna do is we're gonna put this thing around like this and say div class and wrap this around let's say jumbo slider underscore underscore um info call this info right i'm gonna delete this because it's too long and just call it title slide background slide number info title okay so jumbo slide jumbo info i'm going to say display flex okay i'm going to say with 100 percent okay save that so we got the info right here let's take the numbers let's also put it in in here so we could control it okay we're also going to put in a container around this so let's say container wrap this around save that okay so then now i'm going to say on the container put this right here container is going to be width or maximum width 1400 pixels with 100 margin 0 auto let's see okay so there there we go that's good i just got to bring down the i'll bring this down to maybe 200 pixels see how this looks okay that's not bad it's not bad if it's full screen like that and then now all i have to do is we got the title let's let's say jumbo slider title we just got to move this thing to the back so jumbo info is going to be position relative uh the background we got to say z index on this we're going to say z index of one is the index of one and then the info is gonna be z index of two okay so it always even even if it fades it's still gonna be on the top okay just like that so then now the next thing that we want for the info we're going to say display flex flex direction so it could be stacking up on top of each other so we got like that boring to perform okay we're gonna say what else justify content uh we don't need to do that let's say align items center no this one is going to say align items or justify content centered and then from there we're going to say height 100 percent let me see hold on this one that is now becoming 100 so we got to debug this and see this slider slider info should be 100 percent container it's not 100 maybe the jumbo slider jumbo side background jumbo slide okay jumbo slides let me see jumbo slide jumbo slide or jumble slider slide we're going to put in the height to be 100 vh because we want this thing to be let me see if i okay double slide is 100 vh this is 100 bh okay this is the container height let's say 100 okay so that's what okay so i'm going to say uh let's see what's the pairing of this jumbo slider background no jumbo slider slide so i'm going to say jumbo slider slide and then we target in the container make it height 100 and there we go okay so now it's right in the middle right centered what time is it in your country uh 5 pm it's early early in the afternoon kids okay all right so let's see i think i'm still gonna have to change this around damn because i'm trying to now's a is a problem with specificity so i'm trying to keep this hover effect on the thing that's in the background when we hover on top of it but i need those things to be uh a child of this thing and then because when we hover on top of it it's still affecting it so i might have to put this let me see jumbo slider okay let me see div class what if i move this from here put it inside inside of the info see if we put this inside of the info okay it works to a certain extent okay see i put this z index zero so then i'm gonna have to go into each one of these so for the number i'm gonna have to say position relative z index three no no no no no this don't work okay i know what happened so because i still had this stupid top 20 and whatever it went over there like that all right cool no no i don't think it's gonna work out how we wanted to then i'm gonna have to use javascript for that part no matter what i'm trying to do it with just css but i don't know if it's gonna work out how i wanted to so this i'm gonna have to put it here yeah i don't know if it's gonna work how i wanted to but it's fine i guess we're gonna have to do it with javascript so it's fine okay so this born to perform develop outperform so let's change the title see like it works down here but okay so we got container born to outperform i gotta we gotta bring the number a little bit down so i'm gonna say margin bottom two ram okay margin bottom two ram then jumble slider underscore underscore title let's say font size tool ram font weight 700 um text transform uppercase background white color black oh my god damn oh [ __ ] okay let's say padding 20 pixels that's too big 10 pixels okay now this we want this to be let's try to do is display flex no okay so this is what we have so far now what i want to do is something going on here this is because of flexbox right so i can't remember if it's shrink justify self play self no let's not play itself uh it's a shrink flex shrink one i think [Music] no hmm yeah you guys any of you guys remember uh i can't remember this thing from the top of my head um is a a property this is a css property um that basically because you see i have this on flexbox right so i'm using flexboxes so because i'm using flexbox is basically taking all of these elements and making them from one side to the other side right so with 100 now there's a way to make this i don't want to go and give this like a width because i could go and give this a whiff and say 400 pixels and then it will give it like that but there's an another way with flexbox that you can make basically make this area here wrap around the element itself because this is what i want this is what the result that i want for it right so i mean i could definitely do maximum with a maximum width of of like 814 pixels if i wanted to so let's see how that looks because i can't remember the property right now if you guys remember [Music] um there's a flat spaces somebody says uh sets the flag spaces content okay let me see there's a flex basis uh sets the initial main size of the flex item sets the size of the content on unless otherwise set with box sizing maximum content say fit content no is it on the parent we got to put this no oh my god i hate allergies okay original flex base is auto look at what phone well this valley was not set uh initially okay so okay both likes rap okay flex one basis auto max content minimum content fit content fail so let's look at the example so i mean they all look the same to me they all look the same what's the difference uh somebody says i ain't cool never caught in a professional setting only a hobby i lose interest and i close the laptop for a week i don't know how to stay motivated i wish i could help um oh my god okay we see this thing is full support might not be supported by everything uh this is a can't remember it why i can't remember this freaking property css grid uh no css flexbox i can't remember the freaking property this is a property that you can basically control the the size of it it's not rap it's not flow uh it's not at this not a line self flex no no it's none of this stuff what the [ __ ] i can't remember this thing right now [Music] no we don't care about flex item uh fit content so strength to fit content okay grow proportion strength proportionally i mean but i tried this before i tried this and it still didn't work maybe i was supposed to put in the the parrot slide background slide background slide number slide info so maybe it's this one nope nope that's a freaking present refresh try fay uh with fit content there you go kiddo there you go stephen hernandez saving the day okay okay cool all right so we got that part done right now the next step that we want to put in here is another text right now hold on now this thing is messing up because as we hover on top of this thing let's come in let me put this out let me see flex slider jumbo slider okay so i'm just gonna comment this out for now i'm gonna until we figure this out later on okay which is the the hover effect um for now we want right here this thing to have some text or maybe we'll put it just here on the right side so on the right side we're going gonna say okay we got slide background container right this is where the um the info is at and then in here we want to put in some text so diff class uh let's say slide jumbo slide or jumbo slider underscore underscore nav so in here we're gonna have links and we're gonna say href okay gg i recently started javascript where you should take this new course first um you could take the other one the other one's good too the other one this one is going to give you more projects this one's going to teach you like by building projects the other ones teaching you uh by giving you like the syntax and giving you like four loops and the while loops and the programming side of things this one is gonna get your hands dirty right like you're coming in and we're gonna start building things with javascript right away okay but you could go ahead you could take either one it doesn't really matter um they're both like beginner friendly so here i'm going to put in um amg so let's say which one is this one which cars is this one this is the i mean this isn't the roaster but let's say amg gt convertible convertible okay i don't know i am i spelling this thing right okay okay let's see let's okay but in english what a b okay mg convertible okay let's put in the mybach gls let's see what's the other suv i feel like they don't have all the cars here for whatever reason like it's missing cars okay my back gls suv there you go and then another car let's say g class mg g wagon okay so now that we got this text here i'm going to put this text right here on the side i'm going to say 0 1 0 1 0 2 [Music] 0 3 all right and then now jumbo slider nav okay let's play i should have display flex okay hold on give me one second uh i say uh okay it takes vertical just looking for some inspiration to see how should i align these things okay so let's do this like this and say with once i fit content okay we're going for the fit content kids all right um now let's say for the anchor links jumbo slider underscore underscore nav color white okay color white rotate no no no not rotate um color white save that then now on the nav itself we're going to say position absolute position absolute then we're going to say top zero right zero so i could go all the way to the top and to the right okay and then now i'm going to say transform rotate 90 is at 90 degrees minus 90. no 90 okay then let me see what else [Music] let me see okay i think i got it so let's see jumbo slide why this thing hasn't changed a okay text transform uppercase okay then we're gonna say padding 20 pixels all around okay then we're gonna say text decoration none now i wanna organize this a little bit so i got jumbo slider nav okay let me create a diff call this div class try this trick uh jumbo slider rotate box hold on how did i realize this slide in half rotate box okay so slider nav nav rotate box let me change the background red so i can see how it looks okay so this is where it's at then i'm gonna say position relative composition absolute z index five okay now with 100 or for content a lot don't work hmm ah interesting interesting okay so none of this is gonna work now for what i i wanna do then we're gonna have to take old school delete this rotate box and i have to get take it old school now kids for this example and then just say position also okay which keeps everything within here and then say inspect okay slide a title slider nav oh well you know what i don't need to put inside of the slider i don't need to put it inside of here let me see okay so we got li yeah we don't need to put this thing the sliding f inside of here because this has nothing to do with the slide so we could take this outside and put this right here by the way how you guys doing man some of you guys just watching yes okay let's see uh let's see who's in here in this stream let's say face chat box what's good who's in here let's see who's in this room man been coding for a little while what we have for like an hour maybe an hour in here uh let's see your joe what up uh let me see if anyone's getting a mac for coding don't make the same mistake i made get at least 256k 512 for ssd i have on turn 120 ssd with no space yeah bro you got to get yourself it's 500 gigabytes and up bro anything below that is like your bugging you need to get more than that bro for real like you can't you can't go with just that little amount of of thing bro like you need way more than that okay so let's get back into this let's finish this i'm ready to knock this out the way okay so we got jumbo slider right here okay so let's we're gonna have to go old school way okay this is now should be much better way to do this and there probably is it's just i'm freestyling this i'm not trying to spend a lot of time on this thing because it's just like a simple page um so let me see boom slider nav let's make sure that font size say two ram nah that's too big hmm now here's the thing i know there's a new css property for this so let me see if i remember if i can find it [Music] um uh csx text vertical text orientation i think that's the one no is it text orientation though some browsers validas [Music] so let's try to play around with this css properties okay comment this out okay let's try text orientation ah let me see nah it's not this one [Music] and then this is writing mode so okay so this one missing specked element and just trying to figure out now is this but there you go oh my god i knew it okay there we go kids that's what i'm talking about writing mode isn't it great when you go and figure something out that you already know how to do and you're like wait what was that css property like that i used before okay so again so we got this let me see now copy this paste this here putting hover now don't work as good as it should like if you're trying to do like a hover effect um but it is what it is so maybe i just i'll make it like that make it that color okay and then now let's just move this maybe like 100 pixels down there you go now let's see how this looks full screen so this is sort of what we want but now we want this thing to be vertically align right in the middle so let me see bring back vs code and in here let me see should we do let's say with 100 percent if i do with 100 what does it do nothing nada let me check change the background so i can see the color of it so we can see what's behind this background white okay so when i do this this is the whole background of it right [Music] hmm i think that's good right there but then now let's change the color like that all right and then what else then right here let's put in some text so right below here let's put in that text that we saw before okay then in here let's see what else put the text right here like a paragraph a nice little paragraph jumbo slider description you margin bottom to rim let's say line height on the paragraph let's bring it into like a 1.3 let's put this in color white okay and then what else what's good what's good what's good what's good okay love these live coding sections actually seeing the product built from the ground out hope you can see this in the future yeah um okay so then now now that we did this we got we got this right here zero one and you know what we're gonna put in we've got zero one right here there's something else i wanna do to this thing but i gotta see give me one second [Music] looking for inspiration [Music] looking for exploration [Laughter] oh man something about maybe putting like a video player here like on the side so i have like the background here and then have like a video player right here that's playing automatically of the car so that will be cool to see right inspiration [Music] we're looking for looking [Music] this looking looking looking kids looking um just looking for just looking for just looking for inspiration just looking for looking for looking for i think we could leave it like that but i don't want to leave it like that we can leave it like that but i don't want to leave it like that that's the difference but there's more that we could do to it it's a couple of cool things we could add to it because then i'm thinking about the way how i'm going to animate this so first of all right maybe we want to put in like right here like some dots right some dots that displays um where we at right now right man so let's see how we could do this we could do put an element right here right make it display flex okay align the items right above each other yeah let's do that right let's do that right to have like a little a little dot just looking for good looking for looking for inspiration okay this is i forgot was the name of those little balls right let me see maybe a font awesome i could find it uh font awesome search i think it's like ellipses or something like that a lip yeah ellipses i knew it it's ellipsis all right so let's do that right now so let's create a section here for the ellipses just looking for just looking for inspiration [Music] okay so we got the ellipses right here jumble slider slider underscore underscore ellipses and then we could go in and add one of these okay call this class jumbo slider underscore underscore full circle full circle okay or circle and then circle right and then then we do copy this jumbo sliders that dash full or filled so initially it's empty and then it becomes filled right so to do this we're just going to do this with css so again jumbo slider circle no jumbo ellipses that's the first thing we got to do so jumbo jumbo ellipses with let's say 100 pixels height 100 vh position absolute okay left zero top zero okay and then put in jumbo slider circle and then here we're going to make this with with 30 pixels 30 pixels let's see how that looks height 30 pixels okay border let's say two pixels solid and then chocolate okay border radius 50 make a perfect circle okay so then now let's make this a little bit smaller so 20 pixels 20 pixels okay there we go um now let's actually go to the ellipses and make this display flex justify content center align items center and there we go okay so we got our ellipses kids it's right here this little spot okay so then now we're gonna copy this i'm gonna paste this three times now we gotta flip the orientation of this so we're gonna say uh what is a flex direction let's put this column okay there you go boy nice are you boy nice with it okay this is just freestyle we're just coming up with ideas as we go we're freestyling right now okay okay so um so we got the ellipses right so then we got the circle let's copy this but then now if it has the class of filled then we're also going to put it in with let's see the width is fine we don't got to have this here border we don't have to have this here all we have to do is fill it up so put in the background to be chocolate okay now of course we don't have to add this to every single one only the one that is actually in it okay so there we go it looks like that now we just gotta space it and say for each circle let's do a margin bottom uh let's say 10 pixels okay and this is what we got kids all right cool um yeah let me see what else can we do here like i said we can add like a video player right here just like that so let me check on pixels.com for some videos okay so it's mercedes hmm trying to see this is going to be a good video for it and so far looks good so far it looks good how i wanted it but i feel like i could still do more to it now we could do like uh you know what what would be cool do a line like at the bottom of the page at the very bottom of the page that tracks like the percentage or the how long it's gonna take for the the slider to switch up to the next one so i think that would be cool so let's do that right now let's see how we could do that come here let me see okay let me see all right okay div class um jumble slider uh how you call that time frame percentage no no no it's a word for it jumble slider timing percentage timeline timeline okay so then okay and here we're going to put in jumbo slider line so we'll slide the timeline and then this one we're gonna put it position absolute to the position absolute bottom zero okay with 100 okay oops copy that come here and this is the line itself so here we're going to say height 5 pixels and then with 40 pixels no no it's a 40 pixel no worth 100 color and let's get a color use image let's get a color from here let me go to project scenario practical js tools okay okay z index three the index four what the hell is it i can't see it jumbo line inspect element what the hell's the jumbo line okay so the top jumbo line is right there okay so it's the timeline put this right here [Music] no i still can't see it why the hell i can't see it it's there oh do i have a background on this thing oh i'm a denton i put a color on it it's background okay and there we go now no i'll be cool for this instead of green white so so we could get the full picture of this right how would this work we're going to create a animation now i can't remember the the syntax uh cs uh key frames right so look at the documentation okay got it and then now let's go into here and let's create this animation so we're gonna go from let's see keyframe animation or slider timeline okay with zero with 100 okay slider timeline and then now put an animation name on animation duration which is this so the name is gonna be slider timeline and let's say it takes three seconds to switch the other one so it's gonna go like that [Music] give me my props you get what i'm saying get my [ __ ] props bro like for some [ __ ] respect of my name okay like i imagine man cocky whatever yo put some respect in my name bro like when you say coding face put me a monster great all right we're basically done with this [ __ ] um yeah so this is a good example right and then what we're going to be doing is this is going to switch over we're going to animate everything it's going to fade in the number right we'll probably have this thing switch from one to two have this fade in a new text fade in a new text fade in right then probably if the person click here we'll go to that one if the person clicks here then go to the next one and the person clicks here then we'll go to the next one you know what i'm saying put some respect my name kiddo okay you can't really see the whole thing because of this chat but looks nice let's just say it looks really really good okay so again nice little animation hey go to the next one all right so we guys i mean you guys got any other tips any other thing that you would like to see in this thing let me know we're here before we leave [Music] da we here kids we live what's good what's really good make sure if you're new to the channel make sure you subscribe make it fly joey what if the slider bar goes from white to another color as the size changes i mean that could happen too we could do that too you want to see that we could do that too we'll go like this and then pass in the background let's say background white [Music] let's see how that looks there you go okay hey man hey joe when you see a design you like and you don't know how to create it where do you go see some code in order to get started um confused when you when you see a design you like and you don't know how to create it where do you go to see some code in order to get started look if there's a website that's already there you could always do right click on the element and inspect the element and then from there you can see how they built if you want to go into the javascript you could go and look at the javascript that they have all you have to do is like literally come in click on inspect you click on here network and then you'll see in here you can filter through what type of files are being loaded to this website so if it's a javascript file you can see the javascript file you could go in there and then you could read the code on how they did it that's it if a css is the same thing you could find uh the element and then from there just read the css that's on the side uh is this just static or are you building a theme no so this website that we're building is part of the javascript uh course right so let me see if i could give you guys take myself out of here let me see stream lab chat box alert box so basically um this whole website what we're doing is for the the javascript course okay so i said you know what i'm gonna build this anyways it's gonna take me an hour to to build this this slider right because there's a full screen slider and basically i knew it was gonna take me like you know an hour an hour or two hours because i'm just creating this as i go right like as far as like the design you know so i said okay cool well be cool to do this now we can also change this let me see change this to another color [Music] let me see color picker maybe we could change this to another color but yeah so this thing is part of the the javascript course so i just decided i'm gonna go live and build it live why not okay i think this looks better it's a little green instead of the chocolate uh there you go we got it kids we nice with it we nice with it put my name up there bro like so yeah man so this is the website right um let's see what else where's the webcam so yeah so this is how the website is going to look it's going to have it's basically a full screen slider right that we're building quote-unquote for like mercedes-benz so the whole javascript course is basically creating scenarios of things that a client could give you or the company that you're working for could give you like this type of project is a project that you would do like in an agency like a digital agency like you're not going to build this type of projects in in facebook like this is not what they do and facebook what they do is they're going to create like [ __ ] components they're going to have you working on you know on on the products that they have instagram whatsapp etc right that's what you're going to be building for agency you're going to be building things like this where a brand comes in and tells uh the company like hey we need a website we need a website for our new product this is the new car that we are about to launch okay and can you guys build us something good that we can start promoting and we can have like a good experience for our users and the the customers are gonna buy this product so that's what we're doing in the course we're basically simulating all of these things and giving you guys that first inside look to actually creating like some legit projects that actually look good and you're gonna be excited to build you should make a slide to the right instead of down maybe maybe not i don't know we'll figure it out and we can still slide it down or slide it to the side it's still going to look good let me see let me get some other examples now [Music] people come in here like yo i signed up for this humming like you better stop that humming joe like i didn't come here for no humming bro do that [ __ ] in the shower [Laughter] okay so let me see what we got here okay so i'm just setting this up all right cool now what else do i need to do to this thing i need to organize it and change change this so let's say this is the first one first slide there's no this is the first slide second slide okay third slide so it's like that two three now what's the next thing what else do i need to do to this just knock it out knock it out of the ballpark and just get it done i want to add a video to it i really do i feel like adding a video right here will be so dope like right there that whole area space having a nice video and then every time that slides it plays a different video it will look pretty cool so let's search uh my back mercedes wallpaper suv okay projects practical gs scenario 2 image g wagon yeah so one last thing that i need to do is i gotta organize the images because technically you can't use the slider images as background through here so you're gonna have to do it on the element itself so remove this from here save this go to index.html and then slider background then from here you put in the style tag and you basically put it as inline okay there we go let's go to the next one make this important [Music] [Music] dog all right so here img uh my back save that and there we go now it's one thing that i'm missing from here and i believe it's the background color so let's see so there's a jumbo slide so where's the jumbo slide copy this and there we go perfect that's it kids and we are out of here now you're probably wondering yo where's the ellipses on this one where's the ellipses on this one what's the names over here well we don't need to put it you know why because um we're basically going to be doing this with javascript so this is just like uh like a way for us to see what's there but technically what we're gonna be doing is we're gonna actually hide all of this okay we're gonna hide all of that in the way how we're going to hide it is by using overflow hidden again so over here we say overflow hidden save that and there we go we no longer see it but with javascript we're going to animate it to bring it up and then we're also going to animate the text wow you know what i'm saying um let's see automatically remove my portfolio size just remove the extra letters all right kids so anyways man we had a lot of fun we hanged out for a long time okay and yeah i think we're done for the day guys by the way if you want to learn javascript and you want to see this whole website actually in in action right you want to see this whole thing in action see how we animate everything how we uh make sure that we bring this thing to life all right um definitely go check out the link below okay you can either sign up to codingface.com right for 20 bucks you get access to this course and everything else as far as like the programming side of things or you could just buy this course one time you know purchase 25 bucks okay take advantage okay kids take advantage you know do what you got to do out here you already know it's your boy joe oh man yeah man but um yeah joe used to do music right yeah man this is a little music hey i've been laid off after probation period so advise me take okay so after probation period so advise me take any job asap to make some time and makes uh some money and then apply until next time yeah yeah that's what i would do i would try to just apply out there bro apply and and just keep it moving even if somebody try to stop you don't let it stop you okay nobody can stop you okay damn freaking hat just made a scratch on my forehead anyways man i'm out of here guys again if you want to see this whole project get done go check out the javascript course we're going to be working on this we also have a couple of projects already in there and what's cool about it we added a whole bunch of quizzes and things that you guys can start working on okay so yeah i'm gonna see you guys later it's your boy joe back at it again coding phrase dot

Channel: CodingPhase

Views: 2,334

Rating: 4.9101124 out of 5

Keywords:

Id: 2mloxxVWsNU

Length: 139min 17sec (8357 seconds)

Published: Wed Mar 17 2021