Web Developer Live - Building A Portfolio That Stands Out HTML CSS

you already know it's your boy joe back at it again codingface.com your boys backing out and did it again one more time this time around i'm gonna be building a portfolio okay a portfolio for a developer live okay something that will stand out and will catch the attention of whoever it is that is looking to hire this developer and we're gonna do this live okay uh this is actually gonna be part of a course that i'm gonna be doing on codingface.com which has to deal with portfolios and i said you know what why not do uh you know the first part of it here on youtube live and you can see how i come up with ideas uh for this portfolio okay so let's get started um excuse me [Laughter] shout out to everybody in here let's see if anybody's up at this time it's a saturday night um but the first thing that i'm going to do is i'm going to open up uh nextgs documentation because i usually do not remember uh most things so i want to have the documentation for that open okay and let me see what else do i need uh i think that's pretty much it just the next year's documentation everything else i'm i think i'm pretty good okay so let me go in let me close my vs code okay and let me set this up okay and let's go shout out to everybody that's in the chat room okay everybody's in the chat room thank you for being here let me see if i could put this on the side like this okay close all close and close okay and there we go all right i think we're good to go all right cool so let me see if i could get something black here so we could see the chat oh let me see how can i do this how can i put in something black right there so we can see the chat let me see new okay and here we go okay hack nobody's like damn that's a hack move yeah it's a hack move but it works okay so let's go in okay um actually inspired by this picture that's on on dribble right it's a design where okay you have like a transparent background okay you have like a top section here like a you know like a hero or jumbotron whatever you want to call it okay you have some logos and then you have your other sections now what am i getting out of this thing what am i gonna be inspired to do well basically i'm just getting inspired to blur the background that's pretty much it that's all i'm really getting from this picture but it gave me the idea oh that would be cool that would be cool for our portfolio so let's do that right now okay and let's do it like that all right cool uh let me also uh put this in let me see if i could get started open up vs code of course okay open up the terminal we're not gonna update anything okay um to get started with next gs mpx create next app and then the name of it so we're gonna do that right now we inside of the projects folder so in here i'm just gonna call this next portfolio okay hey joe what we do if you were going to interview and you have three three or four interview tech interviews with engineers and answer leeco algorithms then you know i'm pretty sure if i apply to that company i will be prepared i would have been you know testing my skills and and practicing at home right joe tango cash app yo if anybody want to send me something if you got cash app and you want to send me 50 cents you want to send me a dollar send it to me at coding face right or dollar sign coding phase that's my cash app your thing with cash app dollar sign coding phase okay that's my cash app all right okay so let's just load up uh paypal yes i got paypal too okay let me see okay then this is taking forever all right so let's open this up open folder let's see where's in next next next portfolio select folder okay yes i trust the authors okay there we go let this load let me see if this thing is done give it a second [Music] all right all right cool there we go another thing that i like to do because i do not use the the images component that next years have i don't like it to be honest with you some people say well that's not how you're supposed to do it no it's how i want to do it okay you know i don't live in the world of i got to do it how you want me to do it now i'll do it how i feel i should do it okay so let me go in here uh let me see where was it fancy static yeah okay i said this one here we go no it's not this one let me see where do i have it next year's landing famous that circle i think i have it over here you know while that's loading let's get a couple of files from here okay okay so next config that's fine is this copy this that yes lynch rc okay next next next next portfolio select folder okay and there we go that's it turn that [ __ ] off and don't give me no warnings for that okay cool so we're we're good to go okay we're good to go so now the next thing that we want to do is see the next portfolio oh my god i can't type see the next portfolio and then let's do npm run dev okay okay so there we go everything's compiled so it should be on so then now i could go localhost 3000 there we go let me see if i could change the background of this this chat box there should be a way to change it okay black can somebody talk in the chat box so i can see if it actually works talk guys so i can see the chat box works okay let me see i don't know why it's still transparent i wanted to have a certain background i'm trying to see i'm trying to fix that okay [Music] okay let's see that one see if that would look better go ahead guys talking to chat so i can see if it pops up okay there we go all right cool so what i'm going to do here is i'm going to start with let's see let's start by going to the index.js page take all of this out take all of that out take all of this out okay okay and just change this to next portfolio okay and there we go remove this from here we don't need this okay save that let's also bring in some some sass let's make it sassy let's make it nice and sassy okay again i don't remember none of this so if you expect me to remember things you're looking at the wrong dude i always have the documentation open i know exactly what i need to do but even if i know it i'd rather go in and do copy and paste okay so then now let me see uh what's the next step again we're gonna do npm run dev and let's start the styles right here let's go to the to this one okay let's import main dot scss okay usually i will go in and you know fix this up a little bit but again this is like prototyping when i'm like building something straight from my head like i have no design i have nothing i just like i'm freestyling right now you're seeing um you're seeing me freestyle kids again okay matter of fact let's also check what's going on in the community before we leave by the way if you are a member codingface.com go subscribe um and go sign up to the community.codingface.com even if you're not a member of codingface.com uh it's a community that we have you can come in come join it's 100 for free okay there's certain things that you don't get access if you're not a yearly plus member like the yearly plus section but everything else you basically have access to it okay so let's see what's going on in here holding myself accountable stop y'all people introducing themselves okay salesforce certified marketing cloud okay nice uh resource section uh let's put a comment yes i plan on adding this to each um career path okay there we go and that's it got my post my post for today i've been posting all day so by the way guys if you want to get answers from me or something like that best way to do it is right here on the community.codingface.com um go ahead and sign up you know put your questions and i'll answer it okay that's just how it is okay so here we go okay so this loaded up we don't have no errors let's go and test this out let's say body background red just i always test it out like that see if a background is right there we go okay so we're good to go so the background is red it works okay so then now the first thing that i want to do for here is like get some background something i don't know something cool so let's go to pixels.com okay so we're gonna go to pixels and should we do video we could do a video nah it's too much let's go in let's say discover we're looking for something that has colors but it's going to be neutral it's not going to be too much a picture like that could be good let's see i'm looking for something that's going to be like the background of the website that's going to be neutral but with some some type of color somewhere so this could be something okay copy image address okay and there we go so then now background we're gonna put this as the background okay there's a background not of the body but let's put it here for now okay there we go then here we're gonna put in page container okay and then or let's say page wrapper better okay page wrapper and then in here we're going to say with 100 height 100 uh 100 vh okay and then i'm gonna say overflow auto okay overflow y auto overflow x heading and then we're gonna also make this okay so we got the height okay we got all of that let's see how that looks for now div class name page wrapper okay let's see the chat is covering the screen okay it's fine it's not a tutorial this is not a tutorial this is me coding live me building something live and hanging out with you guys okay so if you're expecting like a tutorial uh it might not be the best place for you right now let me go and put this in like this okay there we go so i think right there we got the chat up or you know chat on the page and we can still see what's going on okay cool so page wrapper and then now what i'm gonna do is i'm just gonna say test greetings from argentina okay okay what's really good guys what's going on in argentina okay so then now let's bring in a css reset okay i'm gonna come in here put in reset that scss and you know we're going to go to the og css reset bring the og og triple o g css reset i've been using this thing for years okay and then here we're gonna put in box sizing border box and that's it now let's import this here on the main at import and then go not global uh reset that scss save that let's see that we get no errors okay no errors dominicano dominicano okay cool let's put this here okay so we got our css reset this is how it is now let's change this to be let's change this to be what should we change this to um background size uh background position center centered okay background size cover save that and that should be good there we go all right cool so now the next thing that we're gonna do is we're gonna put a layer above this and we're gonna blur the background okay so to do this let's come in here and in here we're going to put in page blur damn so many black miles man many backwards okay let me see what else okay page blur okay somebody's like yo my my do gel with the backwoods nah man i've been like i've been recording all day and i've been recording all week like one thing that you know people be like yo this [ __ ] is easy being on youtube being tutorials doing courses this [ __ ] is easy bro my [ __ ] be dried up like since i started doing all this [ __ ] on youtube and all this [ __ ] that i do my throat be dry as hell bro i gotta [ __ ] be drinking water all the time um so let's see we'll find out the consequences of this [ __ ] by 40 40 50 years old 10 years straight of doing this [ __ ] like there's got to be some consequences you know i mean okay so let's see page blur let's see what else okay so of course i don't remember none of this [ __ ] i don't remember how to do this i remember the syntax is a filter i think filter blur let me see maybe i do remember i've done this [ __ ] so many times and maybe i do remember so filter blur no but that's not what i want it's not filter blur um filter background blur backdrop filter there we go back to our filter so that's what it is okay copy this there we go and let's put in like 50 pixels now for this we're going to say height 100 percent okay okay height 100 percent and what else height 100 percent with 100 percent hey that's what you got to do i'm not i'm not too buggy with it i'm not one of those dudes that come in and be like yo i got the whole project done here on this screen guys you know me i'm too real for this thing if you're expecting fake [ __ ] you're in the wrong channel i'm just like you guys i'm googling things i'm on documentations i'm looking through stack overflow that's the life of a real developer this fake [ __ ] that some of these clowns be doing where they have the whole project complete and they'll be like click click click and you're like damn how he did that [ __ ] that's not real that's faker than wwe you know what i mean this is like boxing this is a real boxer what you're watching right now this is not wwe it's the process okay dudes is like but how come this guy's this guy has the whole project right there on that screen he got two screens and you're the dummy that thinks that he actually did that [ __ ] live like nah bro no he didn't like yo people be [ __ ] capping like crazy and some of you guys be falling for it yeah bro straight up let's do this and be like yo this guy this guy's faster than you jones like no he not he capping he's [ __ ] faking it and you're you're eating it up you fell for it you're the dummy that fell for it you know i've been around [ __ ] dudes that it's [ __ ] nice for real and derek [ __ ] googling nobody remembers this [ __ ] okay um okay so let's remember this thing okay so what we got here so we got this done okay now this picture i don't know about this picture i need different colors in different areas so this is just like more centered so we got to choose a better picture for this to look legit so boo boo boo boo where was we at okay we need something oh this one might be nice okay see how it got colors in different spots that would look good okay copy image address save that okay and this a little bit better okay but then now let's take it up okay let's take it up a notch let me see contain no because we want this to be cover okay and then let's blur this a little bit more like a 75 pixels okay so there we go so that would look like that now again you could also take it up a notch and do a little bit more if you wanted to but it's up to you okay so we got the page wrapper page blur okay so then now we can actually go in and like i said before where were okay we could do something like this okay now if we look in here we get some uh somewhat ideas out here how this is done we got a header we got a okay section here okay so then now i might switch it up a little bit i like the purple here that's nice purple so let me go in and have my let me see you css gradient io okay all right and let's see okay so i'm gonna use this thing just to to get the colors okay so let's start with the header let's keep it simple let's do the html because i'm freestyling this thing so let's go in header class name uh let me see alvir says when i see joe stream i always catch him doing front end does he also stream back and stuff sometimes i mean i do it once in a blue moon but to be honest with you if i do some backing stuff nobody's gonna watch it that's the truth okay that's a fact i could be here doing backing stuff nobody's gonna watch it okay and also too that's what we do at codingface.com right um look man i could freestyle but i don't free style so you get what i'm saying so like it's just a fact right if i'm gonna be doing work like front-end stuff i don't even consider it work this is fun when i do back-end stuff i consider it working if i'm gonna do work i'd rather put it in at codingface.com you know um that's just a fact uh but yeah header class name so in here let me see put in header also or yeah header and then just leave it like that now in here i'm gonna put in this class name uh header underscore underscore logo okay and here i'm gonna say logo and here i'm gonna say div class name header underscore underscore uh nav or let's call this menu better menu okay and then we're gonna put in okay uh should we do it with a url should just put in links it doesn't really matter um but yeah it doesn't matter we don't need to put a ul here let me just go straight putting links so then here just like that okay about projects uh and let's say contacts or contact save that and there we go all right so that's what we have so now let's go in and let's start styling this up so say header no i mean i like the back end it's just you know that's not for youtube that's a fact i don't consider that [ __ ] that [ __ ] is not for youtube i'm doing work you know and when i do share on youtube i don't get paid for this this is just like me to have fun uh so header and okay so let's say header display flex justify matter of fact let's put flex direction do we have to know we're not going to put a column um justify calling uh let's say columns a space between save that okay all right and that split it up all right and then now inside of here we're gonna say and underscore underscore logo let's say font size say two ram for now and then we'll bring it down from there okay let's get some google fonts hmm saying poppins or bottle no need to i really like this nonito one i've been using it lately this one here we go and there we go i'm just gonna get the oops i'm gonna get the 900 i'm gonna get the 700 i'm gonna get the 400 and we're gonna get the 200 okay with that we should be good okay so then now let's select all of this copy it and then now one thing that we forgot to do was to get the custom document so i'm just going to copy the example that's here copy paste jump [Music] [Laughter] oh man listen if you're not copying pacing [ __ ] you're doing it wrong like that's the facts you're actually wasting time okay now let me see so then now that we have this here in here html head okay so we could keep this like this but i'm gonna open it up i'm just going to put it here because i want it to show up on every page so let me see where is it no no need to copy this paste this here save that okay let's see what it's saying here head is not corresponding to closing tags what you talking about let's see it says what it says okay so that's why we haven't closed it up close it up close it up let's cross origin we don't need it and save that we should be good compile successfully so then now i'm gonna take this and i'm gonna go to the css reset and i'm just gonna put this let's go to the main reason main css right and i'm going to put this here all the way at the top html font family save that and there we go okay it's all inherited from the top so every single thing is gonna get it all right cool so then now the next thing that we want to do is we're gonna come in so let's look so they do have a container on this thing so let's also put it with a container let's say max with max with is gonna be let's say 1600 pixels okay 600 pixels i'm going to say padding 20 pixels 0 top and bottom okay then we're going to say margin xero auto save that and let's wrap this around a container so inside of the header so we have this header like this for this situation we're gonna have to switch up some things so in here we're gonna say div class name container okay and then in here we're gonna do it like this and close it up okay so then now because we this is no longer the parent we're gonna have to change this around and move some of those things like the display flex so in here we're going to say inside of the header there's a container make the container be display flex save that and it does the same thing okay so going back over here all right there we go okay so then maximum width okay it's like that and it always has a 20 pixel 20 pixel padding side to side okay so then now the next step is uh let's mess around with with that header right so let's say display flex just a space between okay and then align items centered to make it right in the middle uh both of these then we're gonna also uh put in a padding so let's say padding let me see should we put the padding in there maybe yeah we could do it padding let's say 40 pixels top and bottom zero left and right okay so something like that matter of fact this is 20 pixels here save that and there we go so then now for the logo font weight let's say 900 okay let's also make this text transform uppercase just like that and then from there we're going to put in uh we got the menus here so we just got to work on that right so let me look at the menu we got header menu header menu what we gonna do with this so we're gonna make this display flex right we're gonna basically put paddings on this links so let's do that right now okay uh should i go like this header not underscore header it was in menu right so menu menu is gonna be display flex right then we're gonna say for the anchor links we're to make them uh display inline block then we're going to make them padding 10 let's say 10 pixels on top 15 pixels to the right 10 pixels on the top and then 0 pixels like that oh let's do this the opposite way save that okay and there we go uh text decoration none okay [Music] then we're gonna say color white okay and there we go so this is what we have so far okay now let's go in and put in a class on this class name let's say header contact btn okay and then here we're gonna say background save that now let's see why it doesn't look like this okay it's because this one is overriding it so in this situation i'm gonna come in and i'm gonna take this from here and i'm gonna paste this like this okay and that should target it there we go now justify content center align items centered and there we go okay now that's a little bit too much okay 2020 all right that's a little bit better let me put this in a little bit more wider okay there we go okay and let's get one of these colors here so we want to get this like a purple um like coughing what the hell god damn god damn it went outside okay uh transition oh okay point three seconds ease in and out okay and there we go all right cool so then now what we want to have in here [Music] okay so remember this is going to be like a portfolio right freestyling right now i'm freestyling uh let me see let me see open this up the youtube in a new window because i want to see i can't see the whole chat you know some probably some of you guys are are you know looking for some questions some answers or whatever questions some answers or whatever so let me just make sure that at least i could answer some of them right okay let me see um procrastinating since it's a ton just in flow are we going through uh through and trying to replicate a design uh let me see uh my local college student okay lingo syntax of course so the joe has some i'll also go to me okay let me see yeah i'm in preschool okay ain't nothing wrong with copy and paste [Laughter] uh obviously joe watching too much america lagasse man let's take it up a notch when i see joe's stream i always catch him doing front end to see okay we read that one before uh somebody said let's blur uh you know they be having four or five screens doing the tutorial it's true dudes be having [ __ ] dudes have a screen right here three screens right here like yo calm down like it's not that serious all right now let me see let me see what's popping got to pop up on you just just just when you thought it was safe you thought you were safe it just come through real quick [Laughter] all right so what we doing okay so we got the logo now in here we could have uh a section where we could have the picture of the the student and then we could have like you know the on the person's name so we could do that right now uh so let's do that you know let's do that section okay so we got header so then let me delete this out of here okay and here i'm just gonna say uh section class name uh let's say hero okay in here we're going to put in the image image source doesn't matter okay let's put this in diff class name put this on a container right goddammit what the [ __ ] all right so let's get an image from pixels this is the guy [Laughter] this is your mans this is your minutes right here this is your main set we're gonna put in for the portfolio there's not some of you guys taking a picture and be like yo i'm gonna take this picture and this is gonna be the one that's gonna get me a job [Laughter] whose mans is this [Laughter] oh man alright so [Laughter] yeah i'm stupid man okay so we got that right so then now in here we're gonna say what was the hero and then and hero image okay then image we're gonna say with 100 okay this one we're going to say display flex okay save that okay then here we're gonna say max with 40 okay no that forty percent now that's i'm bugging max with we're gonna say with 100 and then we're gonna have a maximum width of let's say 450 pixels okay so i still did the same mistake is with max with 450 and then with 100 save that okay so now we got your mans your bands right here right so we got your mans right here right so then now let's go in and put him like this let's make sure we put in inside of the container so inside of here we're going to say div class name container okay okay save that so then now okay we have that right so now we gotta do the same thing that we did before uh but this time around we're gonna copy this and put this here on the hero now what are we going to do justify content no we're not going to do that save that and we should be good now we need to put in the other section which is going to be this which is going to be the diff class name hero info and here we're going to put in the h1 now let's say billy smith okay so we got billy smith now let's put billy johnson billy johnson so little billy's trying to find a job right and we we're trying to help him out as much as we can so again we're building this portfolio for billy johnson so then now that we have this here okay we want this to be they should be able to take with 100 so and here we're going to put in info with 100 save that okay why did this become smaller we gotta look that up okay okay don't worry we're gonna fix all of that this isn't the hero right okay hero hero saying display flex let's remove this display flex from here okay there we go that's what i want that's what i want all right now for this one we got page height 100 vh okay semicolon save that okay and there we go so we have frontend developer okay and let's go in h1 font size let's say 5 ram then we're going to say font weight 900 copy this is all placeholders for now okay there we go so we got billy johnson shout out to billy johnson right say padding 100 pixels zero zero zero zero just like that all right there we go so we got billy johnson front end developer all right and what else can we do to this so then now let me see how this looks full screen all right it's not bad okay so then now that we have billy johnson in here we could actually do a little something else to this what else can we do to this okay so i'm just catching catching ideas catching ideas and seeing what this this might look like let me go see see what's out there some good ideas see what somebody else might have come up with oh why can't i get inspired by fantasy something this is something that we're seeing a lot like this design of of like what we're seeing here so we can sort of do something like this and implement it to this now how can we implement it to here to this section here and i'm talking about like those reviews i like the idea of having like some type of review section i think that makes sense let's see how we can implement it here so this the image right you can put it top section like that put in like a review and another review section here so let's go in and let's look at over here let's see how we could do this so this is the hero image we can put this position relative so we could have control of it right so let's do that right now matter of fact let's put in the html first so if class name uh let's say hero review one review one okay then in here we could have something like this where it's like a image then i have like the person and then like the five stars okay we could do that like that so let's say let's call this review1 right all right hero let's keep it like that hero review one um hold on let's say review one then after review one that's gonna have an image say was the ui faces okay put that there okay and then from there we're gonna have dev class name review one i'll just go underscore let's say info then we're going to have div we're going to say span okay span name so let's say jan johnson jan johnson okay copy this class name jan johnson okay let's say name then let's copy this change this to title project manager and then from there we have the div class name stars okay cool so then now let's go in let's go to the image let's make this position relative okay position relative so then now here we're going to target the review one and once we do that we're gonna target the review one on this review one we're gonna make it let's say what should we make it all right let's not control it like this let's just put in border radius 20 pixels then that should be enough okay put it right it's 20 pixels okay then we're going to say image review one image oh you know what just image like that and then in here i'm going to say border radius 50 with let's say 50 pixels for now height 50 pixels making a perfect circle okay and that's what we have then in here we're going to say display flex then we're going to say background white save that okay this is what we have background white then we're gonna target the info and info then on this info i'm gonna say with 100 percent save that under container we're going to put in max with of 150 pixels save that okay maximum width 250 pixels then we're gonna place this like up here so let's continue with this we're gonna target the title and name first matter of fact and then once we target this let's say font size 1.3 ram font weight 900 copy this target a title let's put this at what's it 400 okay on the info we're going to say display flex flex direction column save that okay there we go then now let's put in like a padding around this again this is all freestyle [Laughter] ain't no design i'm just coming up with this as i build this okay all right now on the info okay that's fine what else can we do to this let's say padding left save that okay let's bring this down to one rim okay let's also put this in uh justify content center save that there we go so now everything's centered now one thing that we need is the stars so let's get some font awesome good old font awesome stars okay and copy that and let's see so we got image uh where was it where were we stars right so inside of the stars we're gonna paste this in okay change this class name [ __ ] spamming reading through here shout out to everybody in here man yeah ram you're crazy okay so then now now that we have this we gotta bring in i'm gonna paste this a couple of times so i'm gonna paste this five times so i'm gonna copy this here five stars kiddo okay so then now that we have the five stars for little billy johnson we gotta make sure that we're bringing in font awesome cdn font awesome cdna awesome five cdn okay okay copy link tag and let's go to the document so inside of here let's also paste this in now here we gotta do cross origin reference policy okay and there we go there we go kiddos all right so now i'm checking why is this going over it shouldn't go over that's because of this let me see okay hi page it's gonna leave it normal okay and there we go so the blur should be everywhere okay all right so then now let's move this up let's actually see how we could move this up okay and let's move this to the side so we can see better now this right here we want this to be top zero position absolute okay position absolute let's move this to the right zero okay so then here we're going to say right negative 100 pixels negative 200 no 125 pixels that's gonna put it right in the middle okay so then now let's move this down so i'm just scrolling my mouse okay and there we go so let's copy this i want to say the review one here we go take this [ __ ] out all right so let's see there we go little billy johnson and jen johnson we got to put a different name for her [Music] i don't know let's call jen smith i know two names two american names johnson and smith that's it and that's as far as i go okay now as far as colors for this this is fine nothing it's looking good now all we need is like a little box shadow box shadow generator okay then this website's ugly i can't even look at that website okay so copy this and let's put this over here you can tell he's scheming [Laughter] little billy little belly with the schemes okay and that's good just bring that down a little bit okay i think that's a little bit better all right okay here we go now for this to fix that problem that we got there uh we're gonna have to do this minimum height 100 bh save that okay and there we go it's going to go full screen all right cool little billy johnson with the nice reviews look at him you know what i mean he went to free code cam he went to 30 000 udemy courses [ __ ] you know what i mean like [Laughter] he made it you know went to codingface.com did a month and a half you know [Laughter] look at him now look how how how he's grown you know what i mean [Laughter] 50 clones you know oh man all right let's see what else what else can we get out here you know what i mean we do i wonder can we do another should we should we do another one of these like a review too right i don't know y'all tell me okay so we're done with that okay and then let's see can we animate this thing yeah we could animate this a little bit why not why not why not why shouldn't we animate this thing so we got the hero we got the image where's the image okay we got image image okay okay so if we hover if we hover above this say hover okay if we hover above this we can target we can target this image so we could say uh position visit transform uh scale to not scale translate 3d zero let's keep it at d4 right so zero zero zero zero zero zero okay then transition let's say transition transition transform he's in and out okay and then let's target let's also target the review one so let's see okay and what's a review one right so let me see where what where the hell were we right now hero image okay here we go okay i saw in here transform then inside of it there's the review one right we can move this thing and we can say say 100 pixels just to see just to see was just a little quick animation just to see what happens okay now am i targeting the right place this is hero this is inside of the hero hero image and then review so review one so this is actually inside of the hero image so yes i'm targeting it properly i'm wondering why it's not moving okay hero image element review one translate 3d copy this paste this here okay so we got transform translate 3d review1 so it is the element now why isn't this thing animating it should it should animate interesting okay let me see hero1 hero 1 image now let's put in the hover effect on it hover okay now hero image now why isn't this being move okay so it says hero image hover review one transform now let me try to move this okay so it is it is moving the thing is that since i'm moving it this way it looks like it's not moving okay interesting hmm all right so let's see yeah it is moving okay so there we go all right now the question is what's the animation i mean i just try to mess around with it so how should i animate this thing all right so let me see because this looks stupid just going left and right it's like one of those situations like it doesn't serve any purposes right so in here we gotta see something to animate let's see what could it be we could do something like that and then something pops up from here from under here and says check the projects or something like that uh let me see reading through here [Music] reading reading not some nice i'm lazy on the front i think i like the back more but i'm learning react so i can use my libraries but my abs don't look stupid yeah taking the long route uh let me see reading this four years of coding phase we finally know what little billy is word okay now let me see if i could do this instead of putting it okay let me see from family page wrapper so we got hero container review one all right so then now let me change this from transition to transform only i'm gonna put in transform all okay because i'm gonna do other stuff to it so i'm gonna say oh and i'm gonna do it for this one too so then now what i'm gonna do is i'm gonna say opacity one okay same thing for this one i'm going to say opacity one damn opacity one then on this one i'm gonna say 0.5 transition oh there's no reason now it's not only the opacity is actually the only one that's transitioning oh that's because i forgot i didn't i've never changed this one so when i refreshed it still keep it in the same place so come back up here hero image review one 200 pixels okay and then i'm gonna create another section here that's gonna be i'm just gonna actually be like the area it's gonna be like a link it's gonna say check projects okay um goddammit all right hero project btn check projects um okay so then now is we gotta style this up right so let's see um changing the color position absolute top 50 left 50 save that hmm okay so now that we have this here okay so then now we're gonna say transform translate 3d 0 100 pixels 0. save that okay that moves it down and then and here we're gonna say transition all point three seconds he's in and out with a delay of 0.5 seconds save that and then now let me copy this come back over here let's change the opacity opacity to zero save that and then over here we're going to target that one which is what's a hero underscore underscore project button okay this one's gonna be back to zero and opacity to one save that okay so it should go like that and then it should show up now let's see what's happening okay so it's hero project btn hero project vtn now why didn't this worked let me try targeting it like this see here this okay so we got that there now now the reason why this thing is going going like that because i got the opacity on on this itself which is the image container i want to have this opacity on the image not on the container so let's do this right now let's move this from here let's move this from here let's put it right here on the image and then now let's go in we got the hover translate 3d okay that's fine let's just make sure that this is inside of an image okay and copy this for this one we want to put this in two okay here we go all right another thing that i need is to move it because it's still on this container no let me see how it looks over here like that now this i'm targeting this image so then it's targeting everything so let me put in a class on this so class name hero profile image come back here hero profile image and this one hero profile image save that okay and there we go that's exactly what we want now when we hover on top of this i want to make sure that this actually the cursor becomes a pointer so save that okay and there we go and that should take me to the thing okay all right cool i don't know why what is freaking what chat cams and like what the [ __ ] what's going on let me see reading through here what you guys is talking about the only php i like these days is larabelle somebody said uh right into here which coding bootcamp would you recommend uh i assume you picked up look man i'll be honest with you not because i have courses or whatever i don't recommend to anybody to go into a boot camp i really don't think that you need one okay unless you're you have to know yourself if you are a hundred percent irresponsible you have no accountability for yourself you don't have no motivation to do this thing right and you need somebody to hold your hand then go ahead and go to a boot camp but my advice is that there's enough people that have done it without going to a boot camp so it makes no sense in 2012 2011 even i was thinking about going to a boot camp but back then it made sense there wasn't all the resources that is out here there wasn't all the courses that you're seeing out here you wasn't seeing people that was talking about how to become a developer what are the things that you need to learn you don't have access to that in 2012 now in 2021 is it makes no sense you get what i'm saying everybody that i know that have gone to a boot camp when they come out of the boot camp they realize i could have done this [ __ ] by myself but the reason why you want to go to a boot camp is if you're the type of person you're not going to do this you know you know them well you need somebody to be on top of you 24 7 meaning i mean like a responsibility because if you go to a boot camp and you have a bill of seventeen thousand twenty thousand thirty thousand dollars whatever it might be right [ __ ] you're gonna finish the course right it's like when somebody comes to codingface.com i always tell people like yo it doesn't matter how much you pay if you pay 20 or you paid a hundred thousand dollars all of this is web development right you're gonna learn it regardless it's not about the price it's not about if you pay one guy one guy could upsell you and tell you well if you learn from me it's a thousand dollars and you're gonna get something different you're not it's web development it's like somebody telling you how to add numbers what's one plus one it's two you could have went to mit to get somebody to teach you that or you could have went to a a local store a local deli the guy from the deli the guy that just came from india he could have told you that he said hey man hey my friend one plus one equals two you would have learned that you don't need somebody to come in and tell you well pay me twenty thousand dollars to teach you this [ __ ] you really don't need it now if you need somebody there 24 7 with you and to hold your hand into [ __ ] you know um you have you know now you have a responsibility to finish it because now you're under contract right then yeah it makes sense right because what you're really paying for is for the responsibility to actually finish it people come to coding phase all the time and they'll be like well i'm gonna learn how to code they invested twenty 20 that's less than them freaking you know buying mcdonald's for them and their family they go to mcdonald's and they go to mcdonald's and spend more money than twenty dollars right so in the head they're like there's no commitment right it's like all the stuff that i used to do on youtube right the things i i used to do on codingface.com right um like literally like i used to do it on youtube you guys could go to like my first videos i used to do tutorials here i used to do like you know small little courses try to get people into into the game but i realized people had no incentive to finish it right so in reality when i will be doing all my work right and you know spend hours on doing a tutorial or a course and put it on youtube it was like going on deaf ears like nobody was doing it nobody was listening nobody was doing [ __ ] the moment i came to codingphase i said okay cool if i'm gonna invest my time what i care about is results i don't care about views i don't care about getting subscribers i don't care about getting likes right i don't want to be one of the top like the top of the top youtubers i don't give a [ __ ] about that [ __ ] but what i do care is my time if i come in and i do somebody asked me earlier joe why don't you do back in work that's work to me if i come in and i do a course i want people to take it i want people to do it complete it and [ __ ] get the results that they're supposed to get now when you drop [ __ ] on youtube if every you know every youtuber that that releases courses or tutorials or anything on youtube they know for sure their completion rate of like how many people go in and actually do the work it's horrible it's horrible right you'll see that you'll have like a six seven percent of watch time like a hundred percent watch time that means that if you got a hundred thousand people maybe 6 000 of them that watch that tutorial actually completed the whole thing and watched the whole thing you know what i'm saying so to me i was like that's a waste of time that's a waste of my time i'm not gonna do things for people to not actually do it and complete it it's like now like you see me i'm just doing this stuff this is a project that i was gonna do regardless right um but i said i'm gonna go live so i don't mind putting it on youtube but if i go in i create a course i create a a tutorial i want people to do it because i'm not here for people to give me views and to watch me i want them to [ __ ] do it and get this [ __ ] done and then they could get their jobs and you know what i mean because that's why i got into this thing i didn't get here to be a youtuber or one of this [ __ ] right and one thing that i realized is that most people that go to boot camps they're not really going to a boot camp because they're going to learn something new you're not going to learn nothing new the same [ __ ] that is on youtube the same [ __ ] that is on on codingface.com the same [ __ ] that is on mozilla is the exact same [ __ ] that they're gonna teach you the only difference is you gotta put 15 000 down you owe me 17 you owe me 25 of your your income for the next two three years so you know damn well you're committed to it but most of most of the people like i was like we don't need that you know what i'm saying we don't need somebody to come in and have us on the lockdown and paying top dollar for no reason for that if you could actually go in and hire a developer to come in and look at your projects right come in and pay them by the hour you'll actually get more than you go into a boot camp because you could take an online course like on codingface.com shameless plug yeah we got courses it's a service okay or you could take whoever the hell you want to take but you could take a course online and then pay for a developer's time you could go online and find guys that are working on google working on facebook working on the top companies in the world and say hey man i got a hundred dollars for you per hour right every week as i'm learning all these things i'm i'm i'm going in and and finishing you know this online courses i want you to look at my projects and look at my code for one hour a week so that's 400 right so for let's say you wanted to do it for a whole six months right 400 times six twenty four hundred dollars so you will get more benefit by hiring a developer to look over your code and tell you what you did wrong where you when you need to improve then you go into a boot camp that's a little trick that i could teach you you know what i mean a little tip you take or you leave it but don't waste your money in boot camps kids it's a [ __ ] waste it's the [ __ ] truth man there's dudes that go in and be like yo i think look this this this the worst [ __ ] this is how you know they got you right if for whatever reason you have gone to youtube and you're like okay i'm trying to find how to become a developer you go through that phase right of research you realize there's so much to learn now where do you learn you find maybe free code camp because you're being cheap right everybody starts cheap this is normal right you find a couple of youtubers right and you find free code can be like well i'm gonna go the cheap way i'm gonna try to do this [ __ ] free you go and do it free then you realize i don't know how to build [ __ ] i learned the syntax but i don't know how to build [ __ ] so then now you go and take it up a notch you say well let me check you to me and you to me they have some cool instructors but then they have like real basic [ __ ] that it's not even you can't even compare it to what's happening at a job right so then you go through that process you do a couple of courses on udemy and then you land on one of my platforms right somebody like myself that's gonna teach you you know things that you're doing on the actual jobs right now if for whatever reason in between you to me and landing somewhere like codingface.com right you are a little bit like i never finished the courses uh you know i try to do it every day but i don't know man i i kind of get sleepy when i'm watching this oh this is a little bit slow some courses are too long you're finding every [ __ ] excuse in the world to not get this [ __ ] done so you want to become a developer but you're too lazy for it you don't have the motivation so then now you're doing the same thing that somebody does when they go to college they go to a community college they were doing liberal arts after liberal arts they were doing psychology now they go for a master's in psychology once they go to the phd they're like ah i don't know if i want to do a phd now they got to start all over taking a whole completely different career this is how you find people that have four or five degrees they're 30 something years old never worked anywhere they're still working in a bar they're still working in [ __ ] uh starbucks and you were like yo boy how you got four degrees and you're working at starbucks i'm still trying to find myself you know what i'm saying so this is where you got to catch it right because other like big companies in in in like big corporations this is what they do they snatch people like you you don't know what the [ __ ] you want to do in this world they'll snatch you up right it's like right now you could be watching coding phase or doing whatever and you'll be like well i'm getting some ads from some dude that is telling me man i could learn shopify for three thousand dollars four thousand dollars maybe maybe that would be the the answer it's not the answer they're gonna teach you the exact same [ __ ] as a coding phase but they just put in a higher price a bigger you know way for you to be accountable for getting your [ __ ] done now if you're that type of person [ __ ] waste your money spend it right because maybe you'll get results but once you get those results you realize like [ __ ] i wasted my money i wasted my time i could have been gotten my [ __ ] done if i really just focused and said i'ma stick to this and get it done stop being lazy stop [ __ ] looking around and asking yourself should i go to a boot camp should i go because once you go to a boot camp now you're going to go in and be like i can't find a job i can't figure this [ __ ] out should i go to college now you're gonna fall trapped to this thing man i'm telling you guys i've seen it so many times the guys that want to get this [ __ ] done they get it done you don't need a boot camp it has nothing to do with somebody sitting next to you when you go to a boot camp it's the same [ __ ] that you're gonna go through as taking an online course the instructor that's there not like ninety percent of these guys there are you know boot camp instructors are regular developers like you and me it's not like this was like a regular like a a guy from mit they brought the guy that that created the cure for cancer now it's a regular dude that found a part-time job online that's paying him you know eighty thousand dollars to come in and talk to you for three four hours he ain't gonna teach you nothing special then somebody that could teach you you know for twenty five dollars or fifty dollars or a hundred dollars whatever it might be you know what i'm saying there is no difference find somebody that you're comfortable with find somebody that you could learn from and that say that's all you need stop looking for excuses stop looking for every single little thing out there and be like man this person has the answers nah sway you don't got the answers most of these people don't have the answers the answers only you could get it only you could realize how you got to get this [ __ ] done only you're gonna figure it out but what do i know i'm just a random dude on the internet okay oh let me see before we head out here it's the truth what do i know [ __ ] you know i mean i'm just a random dude on the internet okay don't listen to me go listen to a guy i fang go listen to a guy go listen to a guy with the the [ __ ] perfect the perfect swoosh hairstyle go go listen to that guy he got an affiliate link straight to a boot camp he'll [ __ ] sign you up for 500 he has to do no work other than just tell you hey go check out this boot camp and i get 500 for every single person that signs up ta-da trouble i'm just being honest you want me to be fake [Laughter] with the [ __ ] swoosh hairstyle you're going to say like [Laughter] he spent more two hours trying to get his hairstyle ready for a [ __ ] video on youtube to eat up your mind and you think like yo well this guy has his [ __ ] together you know yo the internet is crazy bro people don't even know there's so many ways to manipulate people and they don't even notice it don't eat that [ __ ] up they'll come in like yo so dude with a slow voice we're like hi guys it's your boy billy ray welcome back to the channel and it's like they're [ __ ] hypnotizing your ass and you don't even [ __ ] know it like little do you know it's like the easiest way to make money is to sign people up to some [ __ ] that you have no responsibility for it right it's the same [ __ ] like crypto currencies and [ __ ] like when big connect came out affiliate marketing is amazing for the person that's promoting it right a lot of times most of the people that promotion they don't even believe in it one of the reasons that i stopped even promoting other people's [ __ ] courses and [ __ ] like that was because i started re realizing i'm like yo [ __ ] is reading the documentation and selling the same course over and over and over again every six months telling you hey guys larabelle 4.5 came out hey guys laravel 4.7 came out you need to buy this course again the same course yeah we just added two videos to it but you got to pay this full price again right like that's when i realized i was like yo hold on bro i'm not going to be sending my audience to this dudes because i just i don't like those practices you know what i'm saying and then at the same time i was like like they're teaching in a way where even if i'm like a brand new developer it's difficult for me to learn it like oh if i'm a brand new developer i'm following this individual and we're building a uh you know we're learning about a certain scale and we spend eight hours before we actually start building something you know what that person is not going to finish that course right so i realized that she was like nah i can't be sending that [ __ ] to you to me nah i'll i'll go create my own courses the way how i wish somebody would have taught me because i realized even myself i used to buy a lot of courses bro i have a [ __ ] library of udemy courses on my account my [ __ ] says [Music] my sister is like 100 courses 100 in courses that i never completed and the reason why i never completed them is because most of them don't even [ __ ] have any type of engagement like you're not excited to finish that course you're like okay after you after they already knocked you out for eight hours straight of looking at syntax that you could have looked at the you know the documentation for yourself right you're like yo okay so now we're gonna build a project and you do eight hours of [ __ ] syntax and then they do you know three hours of a [ __ ] project that is a to-do app that you will never need on you like you know what i mean like you're not gonna get paid any money for it you're not gonna learn a skill that is going to be like well now i could i could get a job with this it's like nah no you're not you learn the syntax if somebody comes in and tells you build this build this build this you still don't know how to build it right so i realized that [ __ ] a long time ago like you know and that's why i tell people you know but the good thing about boot camps and [ __ ] like that is that they hold you accountable right and the word boot camp sounds like you're about to get your [ __ ] together it's [ __ ] you could have gotten your [ __ ] together in other ways you didn't have you didn't have to spend that much money right it's a marketing scheme it's literally a marketing scheme you got to learn how to read through all this [ __ ] right and understand when certain marketing tactics are happening so you could go in and make a educated you know decision before you go in and be like well i'm jumping into this boot camp it's like nah bro they [ __ ] they basically groomed you you get on saying they groomed you they come in they do a couple of ads the next thing you know your favorite youtuber tells you hey man you should check out the banda the panda panda the bootcamp go to panda you know it means black and white just like a panda right i love it they never went to to that [ __ ] and when they come in and they tell you hey man behind the scenes that you don't even know between youtubers for youtubers they'd be like i don't even like boot camps and then you fall for it but you you're already in debt that's not that's none of the business they just told you about it they got paid 500 every time that somebody signs up and that's it you know you know so that's just my advice man you know but what do i know i'm just a random dude in the internet okay um [Laughter] yeah bro it'd be like that it'd be like that for real for real okay so let me see so we got this this is looking good ah let's see what else what else so now let's go and create the other sections let's create some project sections panda panda panda pin you got designer doing the commercials i got code in elena i recorded in atlanta flipping the created cars in the scammers now you see me out with panda [ __ ] tic tac about that [ __ ] but like yo i got cold and cold in atlanta oh where's coding atlanta flipping flipping the keys flipping them keys out of panda credit cards and scams that we coding out with paying the pen pen panda yo how do you make the effect in the background of the page uh backdrop filter it's called backdrop filter and then you use blur okay so looking good what you guys think it's a nice nice little look right billy johnson right shout out to billy johnson looking like a handsome boy yo this yeah this did look just like one of my co-workers man like one of the dudes i used to tell you man that that used to always tell me yo you got to come play with us on lunch break man we got we doing a [ __ ] dungeons and dragons tournament and i'm like no i'm good bro i'll i'll go watch dj academics on my lunch break you know what i mean like i'll go downstairs eat some some like uh [ __ ] korean food and i i'd rather go play [ __ ] you know watch dj academics and see what's happening in the world i'm good i'm good kiddo you could keep that one thank you thank you for the invitation let me see joe you should give him a little swish here don't complete the page okay man so we got let me see jan smith check projects all right so what else we missing here we got to put in the projects we got to put it in about in about section so let's do that now that's just quick just to finish it and then me see but what you think it's looking good the portfolio or not y'all tell me i'll scrap this [ __ ] up oh say say i won't delete this whole [ __ ] just saying you know yo joe that [ __ ] look like garbage i'll delete this whole [ __ ] just yeah i'm out of here you know hold on control z man we can't get that hype oh man okay so we got the yeah i'm stupid say i want to lead this [ __ ] [Laughter] i [ __ ] commit this to at all man [Laughter] all right cool so let me see what else what else what else you know what we could do what can we do to this thing we could let me see i think we got this [ __ ] is good this [ __ ] is gucci [ __ ] is gucci and then now we just come in create a section for that about page so people can put in a little information about themselves you know and the page look playing is need some person look man this is where y'all [ __ ] it up right i'll be honest this page right here is perfect i'll tell you why it's simple right some of you guys be trying to do too much this is why you start doing animations that do [ __ ] rotate this is the type of [ __ ] that you guys like some of you you guys be like yo can we see rotation on that you know some of you guys be like yo i need to see that [ __ ] rotate like so you guys be like yo i i [ __ ] the page is not complete until something rotates like that [ __ ] is [ __ ] whack like keep that [ __ ] simple as clean as possible you're trying to do too much when you try to do too much the [ __ ] look busy it doesn't allow the person to understand like what a what exactly is it that they're looking at okay i give you an example this one this is what people want right now this is what they need okay let's go ahead and transform i'm gonna give you what you want rotate 3d okay let's see [Laughter] the other 60 degrees right give you that one right like that okay let me see what else i will say 360 degrees save that there you go ah that's this this is me like yo page is complete [Laughter] yo yeah this should be like yo paige is complete now [Laughter] yo [Laughter] i swear to god yo just be like i'm not gonna say i'm gonna say nobody's name but dudes be like yo they'll do like yo i'ma do a page and then like i'm gonna do my animation and the animation is like a rotation yeah i love to do that one right he's like yeah he's like i know how to animate they're like yo i know how to animate the page it was like [Laughter] oh my god yo oh my god [Laughter] oh man [Laughter] yeah when people do that that [ __ ] burns my blood i'm like yo you don't understand keep it simple keep it simple when the person lands on your page they need to see exactly what is it that you're trying to show them you have a page right you got your menus here okay you got a little contact button you got your logo right and that's it simple animation nothing too crazy but if you go in and you'll be like i'm doing a rotation i'm gonna change the color from from purple to red i'm gonna i'm gonna [ __ ] keep the [ __ ] simple because what you care about is that they know exactly what you are right you're a developer what's your name there from there you want them to focus on your story what exactly is it that you do how you became a developer what's your interest and then give them what they want the projects that's it don't go crazy with it don't go in and try to do a whole bunch of stuff that you don't know how to do because it's better not to do it than you going in and half ass it like this dude says yo i'm gonna add g-sap on it and they don't even know how to do a proper timeline i'm gonna go in and add 3js and have no idea how to do 3js on their page i'm going to add vr to my page you have no idea how to do that [ __ ] when you're trying to get a job you want to do something that looks good and you know for sure that whatever it is that you did it works and it works properly keep it simple right keep it as simple as possible very minimal okay very very minimal okay so anyways let's go to the next section let's move on we gave you rotation you saw how stupid that should look that's it [Laughter] okay so let's go to the next one last name okay about okay let's go in and add a container all right and let's see what else so then now we're gonna do like the about page is gonna be let's do this like a h2 okay paragraph and then in here let's just spend in lauren if some uh let me see laura epsom just copying this [ __ ] okay save that all right okay so let's see so about contain okay about h2 so we're just gonna keep it super simple okay let me see where is it okay margin bottom okay let's see all right this one is this section [Music] six okay so here i'm just gonna say 100 vh minus what we'll say [Music] calculator real quick 136 so save that real quick there we go all right all right cool so then now let's come over here all right let me see right here okay and then let's go to the next section which is just projects and i might leave that [ __ ] for tomorrow morning i'm getting lazy i'm already getting getting sleepy i'm already getting sleepy um i've been up since matt early today but being upset let's see what's good let's see what you guys talking about in the chat before i leave something let me see coding facebook id you are you using this is um vs code you know with a little bit of you know changes and stuff and you know theme but that's it love and respect joe go to face okay so is that you in the profile pic it looks like from the 80s or something ramp run px that's true ram versus pt uh [Music] so all i need is html css somebody says guys by the way subscribe to the channel if you're here you're watching this and you're new to the community subscribe to the channel for sure all right listen man i'm about to get out of here i'm already getting sleepy some of you guys are already sleeping so i'll definitely see you guys later all right guys it was cool hanging out with you guys i'm gonna finish this project maybe tomorrow morning okay i'll come up with ideas things that i might have in the top of my head see how we can improve this right make it a little bit better and yeah i'ma see you guys later all right

Channel: CodingPhase

Views: 2,847

Rating: 4.8924732 out of 5

Keywords:

Id: i4snmTaKmkI

Length: 143min 42sec (8622 seconds)

Published: Sat Sep 11 2021