Figma Design + React 2020 | Responsive E-Learning Site | UI /UX | Styled Components

[Music] all right so what's going on everyone it's eli uh back again for another video and uh for today's video we're just going to be creating um a quick design that i came up with this is the design here we're going to be using something called react tilt and that's how we get this effect right here we have our buttons with some hover effects and then if you go responsive uh we have a drop down and that drop down has a blur as well and i don't know if you guys noticed this whole entire background here that's blurred also so i'm going to teach you how to teach you guys how to do that sorry um all right so um i did a create react app so to do that you just type yarn create react app and then you put the name right here all right i already did that so i'm not and then um once that does everything you just type code with the period at the end and that will open it up in vs code if you're using that if you're using atom just type atom with the period or whatever text editor you're using all right so um uh what we're going to be using in this um tutorial we're going to be using of course react tilt so we need to install that and we need to add styles components as well so we'll say yarn add react tilt and styled components all right we'll let that do its thing um let's clean up some of the files so we're not going to need our app.css let's go ahead and delete that um we don't need our app.test let's delete that as well looks like that completed down there we can go ahead and type yarn start or if you're on npm and you don't have yarn just type npm run start all right let's go to our app.js i'll type command a and then we'll do rafce um for me to just uh so if you type r-a-f-c-e you see it uh does like a starter component um the name of that extension for vs code is called react snippets so let's just type app really quick all right there we go all right so we have style components added you can go back to this window all right and there is our app we also need we're going to be using railway so let's go to google fonts all right let's add railway we're using 400 five six i don't think we're using all these but i think i added them some of them by mistake all right let's copy this link and then we go to public in our text editor editor sorry go to index.html and i'm just going to paste all that right under that and then we have to set our font family so let's go to our index.css all right so we're just going to delete all this all right and we're going to say all we want everything to have a margin of 0 and a padding of zero and then we want to target our body and give it that font family and then we need to do the same for the button because sometimes for some reason it doesn't add it to buttons all right there we go all right so what we need to do now is uh let's create an assets folder let's close this new folder inside of our source we'll say assets and that's where our images will live and um i already have the images saved so i'm just going to drag them over to our assets copy and paste there we go and um you can download these from github i'll put the link in the description all right we have our app set up all right let's create another folder called components all right and uh the first file we're going to work with is the nav bar so we'll just type uh nav bar dot js and we'll say rafce h1 nav bar all right and then let's import that in so we're going to type nav bar and if we just wait like a second or two you see here it says auto import just going to press enter and it automatically imports it right up here all right there's our nav bar perfect all right uh let's see what else let's just make this a fragment so delete that div um and let's start working on our nav bar okay so let me pull the design up all right so this is what we're working with i'll have this in the description as well so that you guys can mess around with it um but we're going to create an actual nav and then um we're going to need to put a wrapper in uh so that the max width is a thousand pixels and that will float in the center and then we have our logo and then our links to the right all right so let's minimize that and then let's go ahead and um let's create that container all right let's let's import our styles components so if you see our rat styled if we click enter for auto import it imports that and we want to style div all right um we also need to create one for our nav and then um all right and then we need to import our icon so the way we do that is we say import react component as logo we'll say logo icon and then we import that from we're going back a folder to the assets uh and then what's the name i think it's called logo dot svg let's add that icon and oh forgot to add as another thing that i use called auto close all right there we go and then let's add our links so all right let's create another component or a style div as we should say and we call that menu and then we want another one and then we're gonna have a wrapper around those links and the reason we're putting a wrapper is because when we go on mobile um we want this to be like a blurred background so that's that um let's see we got our link wrapper and then we need um our menu links so those are going to be a tags styled a and then um we need a button as well that's this join now button all right this one we're gonna call menu link my style button is a button all right cool uh we also need a hamburger and what i mean hamburger i mean these three little lines right here and we call those hamburgers so um let's say hamburger style div all right perfect all right so let's work on our nav as a whole well you know what let's add that hamburger in and our hamburger we need three span tags so do span times three then we have in here let's add our link wrapper oops i'm messing up right now all right and we want our menu link yep what's not self-closing and uh let's give it a name search and remember it's an a tag so we have to add an href to it for now we're just not going to put anything i think i put that wrong excuse me all right and then um we're just gonna press shift option and press the down arrow so we can copy it down and uh i think we had login and then the join now button and then let's add a button in and that says join now all right perfect we need to have uh this handle our state so for when we're on mobile and we open and close our menu we want that state to save and we are going to put use state all right let's say use state we go to the black one we'll say is open and then the initial state will be false so when we first load the page the nav menu on mobile will be closed all right and uh we want our hamburger when we click that on click equals let's do an arrow function and we'll set is open to not is open so we just want that to toggle it and then uh we need to pass our is open um attribute as we should call it uh is open we want to pass that to the menu because we're going to be um putting an animation for showing and hiding the actual menu all right and we'll say is open perfect all right so let's start working on the styling okay let's see all right so for our nav i'm on display flex we want to justify content space between um we want to align items center let's refresh this it's not on our refreshing for some reason we're going to close this out and restart it all right let that do its thing all right and then uh we want flex wrap let's be rap all right then we want position absolutes because when we add our hero section we don't want the bar covering it up top zero left zero right zero and then we want a z index of three because we want it above all of our other elements no matter what all right let's work on the container now all right let's say display flex what is going on why is it okay there we go now it's uploaded all right display flex will justify content i will say space between let's give it a width of 100 percent all right so those spread apart you know what we don't even need this right here space between will align item center let's see flex wrap so that when we go to a smaller screen size that um that our elements will wrap below one another and then we'll say max with 1000 pixels i want to give it a margin of auto perfect so that aligned it in the center okay and then um let's give a padding of two rims there we go okay all right now let's target our logo which is an svg so we can target it right from css and then we will put the height as 1.4 rams i made it a little smaller perfect and then we want to do cursor pointer generally you would want it um be a button that goes to your home page but we're not going to do that right now we're just focusing on design at the moment all right let's let's target our anchor tags uh so that's the search and login and uh we'll say text decoration none we want to remove that line we're going to change the color what color we're using eight five eight 586 all right font size 0.9 rims this one's a little smaller there we go all right let's give a padding of 0.7 rims and 1.5 rims all right let's space them out a little um we're going to have an animation so we want to say transition uh 0.25 seconds let's say 0.2 seconds ease and and uh we want the border radius oops uh water rate is 0.5 rams let's say font weight 500. close it by mistake and uh let's add our hover animation to it so we say and hover when we're in style components or uh sas whichever one you're using and then to say seven seven eight one d four uh and then we want the background color of the individual links to change to this color e7 e 9 fc perfect okay all right so we did that now what's next let's work on our actual menu all right actually no let's work on our join now button okay all right so for our drawing now button let's just make this a little smaller i don't think it's going to update anyways but oh i'm saying join now font size 0.8 rems um we want a background color of f7 4 c5 why does it keep doing that let's see all right uh we want to remove that border i'm gonna give it padding uh let's see 0.8 rams and 1.1 ram oops all right it's that widen it okay i'm gonna give it a color of white um let's say border radius one ram and uh we'll give it a box shadow of zero pixels 13 pixels 24 next seven i think on the spread and then we'll give it to color of ec be 67. okay i want to give this a transition as well so we'll just copy that and paste it we'll say 0.3 margin left 0.5 i think something's going on with our widths uh you know we definitely needed that all right so yeah just go back to our nav and add that that flex box back um all right let's go back to our button and uh we want to put our cursor as pointer and then we want to actually handle our hover state okay we're gonna do our box shadow again and uh that's this is gonna change to 17 16 11. and then we're going to transform we wanted to do a little bounce up every time we go on it let me show you what that looks like let's go back to full when we hover over it just bounces up very subtle okay the cursor pointer not go to transform translate y so we want to go on the y-axis and we want to go up 5 pixels so we do negative there we go it's a subtle jump you know what we can do to i like that all right perfect um and then uh let's see how it looks on mobile so we inspect it push it to mobile not too good we need to do deal with our hamburger right before we do that uh let's just add a media query oh max max with uh 670 pixels and we're going to put a padding 0.3 grams all right you know what we don't need that okay uh now let's deal with this hamburger so you don't see anything at the moment that's because we have to adjust the colors of the hamburger um so let's say for right now display is none so whenever we're on the bigger size we don't want the hamburger to display of course you can't see it right now because we haven't added any styles but um we only want it to show on mobile so you know let's just remove this display for now say flex direction why does it do that um cursor pointer and then we need to work on those span tags that are inside of it so that's for each line and now we want to give it a height of two pixels and a width of 25 we want to give it a color um background color of what color did we use before use this i'm gonna give a margin bottom of four pixels and a border radius of 5 pixels my question is why is it not showing at the moment see we add it yep there's our hamburger we have to add display flex okay so now we see our nav but we don't want it showing um at the moment we'll run the bigger size all right so when we go smaller we want this to hide and only this to show when we go bigger we want this to hide and only that to show so for now we're just going to say display none and we're going to just copy this media query then we're going to say display flex and uh that should do it what is going on media max with 768 pixels it should be oh i added flex there simple mistake still shown for some reason oh we want to put this at 670 again we can leave it at 768. all right so now um when we go above 768 it disappears when we go smaller it uh it shows all right now we want to handle our link or going to handle our menu next so let's go to our menu we'll say display flex we'll justify content center we'll align items let's go into align item center and justify content space between um and then position relative all right and then we're going to add one big media query at media max with and we want to get that max with seven or is it 768 pixels all right and then uh we just want to for our menu all right we want to um we already gave the flex we want to change the flex direction to column let's refresh now i need to add this to the link wrapper let's go to our link wrapper real quick let's just copy this i want to give it an overflow of hidden let's work on our link wrappers let's go to our link wrapper we'll say display flex and then we want to justify content space between align item center see if we got it aligned right okay there we go a line item center um you want to say position not positioned relative and then let's add a padding of 1.5 ram [Music] and zero let's give it a border radius of one rim so that's going to be this right here okay border radius of one ram um margin top one rim and then uh we have to add a box shadow for that and then four pixels eight pixels 15 pixels and one i'm gonna do a rgb and we want black and 0.07 as our box shadow okay we did a flex direction let's set our max height and then from there before we passed in our is open so right up here in our menu we passed is open in on installed components we can just go ahead and uh access that value so it is open we'll do an error function um so if it is open if it is open we want the height to be 300 pixels if not we want the height to be zero pixels and this should have all right and then um we want to give our width of 100 percent that should make it jump below there we go so now see there isn't an animation so let's do transition max height 0.3 seconds ease let's say ease in out there we go our animation all right um what do we have next i need to work on our links you know what no need to work on our links because we already did we can actually go ahead and grab this and move it to our menu link remove this a tag because we would just be repeating ourselves and i think i messed it up all right so that's it for our navbar uh let's go ahead and create a new component and we'll call it the hero hero section so type hero.js we'll type rafce and then let's put h1 hero just so that we can see it on the screen and uh don't forget to go into our app.js and import that hero function we just made and then let's refresh there we go and the reason you see it above it is because remember our nav bar is positioned absolute all right so um all right so um let's go ahead and work on that okay all right so we are at our hero let's import style components styled from style oops style components okay and then in our hero we have our some text on the left side we have our buttons and then we have this image on the right all right so let's create something called a container we'll say styled div so we added that container in um we're going to need to create a wrapper so this is a container uh we're going to need that wrapper so that um we max out at a thousand a thousand pixels and it's a line center so let's add that wrapper so let's create that shift option down wrapper um we need to create uh another wrapper so we'll say inner wrapper and the wrapper um we want to create something called left for the left side and then um the right reach you know we'll just call we have text all right we'll just start with this all right so let's go ahead let's add our wrapper in all right and then our inner wrapper okay now we have a div actually that's our left okay and then um i'm going to have another component just for our text so for now we'll just type h1 hero and then on the left side um it's just going to be an image so let's put an image for now an image tag and we're not going to put anything okay all right so if we go back here uh we need to import this background image and this image right here so if we go to our assets let me click bg this is actually our background image we just added a blur above it so um keep that in mind if you're ever looking for images i got this off of unsplash um and i think i just type paint um and then that's what came up but they have many many of other colors so um it's a really cool thing to add to your websites all right so let's start get started working on the container so we'll say height 100 view height let's say width 100 percent um we'll say display flex justify content center will align items center alright we don't have our image in yet and then let's add our background image in so let's see all right so we'll say const are you know not cons import we'll call it image that's for here image from let's go to our assets folder hero png and then uh we have our background so we'll import bg we'll call it from assets bg png and i'll put these um images in the description uh links to them so you can go download those um that hero image that's this one which is right here and then um that is it for now so for our image let's add our source in we'll just say image there we go it's really big so we're gonna have to adjust the size and then let's pass our background image in so bg equals bg so that passes our background image into our container and then from there we can background image we're going to use the url and then we're going to access that background there we go close this all right of course that doesn't look good right now but we'll get to that so we wanted to we don't want it to repeat and by the way um when you guys add these images do not make the images too big let me see the size i made 1440 by 10 24. i think that's just a good size to where it doesn't take too long to know to load i know when i downloaded it off of unsplash it was like 6000 pixels so that's way too big and it will make your site take too long to load so we'll say background size cover and background position i will give it center okay and then all right perfect that's where we want it if we resize it it doesn't matter stays in the center okay all right now we have our wrapper and our wrapper the reason we have that is for our actual blur that we're adding to the top of it all right so i will say height 100 view height with 100 view width and then um as a backup we'll give it a background color background color we'll do rgb and then we'll say 255 255 255 and then 0.9 all right and that's just as our backup just in case we don't have support for um in case there's no support for the backdrop filter uh not all browsers can can use it or it can work with it we'll just say yeah 0.9 looks better all right and then um there's something in css to where we can check that support so we'll say at supports and then do the parentheses um we'll say dash webkit backdrop filter none or back drop none all right and that just says if it supports the webkit version of backdrop filter or just a regular one then go ahead and use it if it doesn't support it it will just literally skip this whatever's inside of this block all right so we'll say webkits uh backdrop filter and we'll give it a blur of let's say 35 pixels and then we want to add a regular backdrop filter give it a blur 35 pixels okay and then we also need to add this background color and we don't want it as dark so we'll say 0.5 okay and that looks good yeah looks perfect all right so um here let's try 0.4 4 isn't that bad as well we'll do four okay um now let's work on that inner wrapper uh that houses everything so that's what we'll do for our max width of a thousand pixels uh where we want it to float in the center um we'll say height 100 percent of the parent why does it always do that oops i will say margin auto this display flex you want to justify everything or put everything center align items center um and then on uh on mobile we wanted to wrap so we'll say flex wrap wrap and that just puts everything side by side perfect okay um what do we have next the left side all right so over the left side we'll say with 40 of the parent why does it always do that 40 of the parent um then we need to add a media query what is going on semicolon there we go okay so we want a media query um and we want to add the max width of oops 678 pixels okay um and we want that width to be 100 percent all right now we need to adjust the size of this image it is way too big so um what we can do is we can just target the image what is it in the inner wrapper and uh for the image just give it the width of 100 of its parent all right and then uh what we also need to do is add in our tilt so remember we're using react tilt so let's import tilt from react tilt and then um we want to add some styling to that so we'll say cons tilt wrapper equals style tilt and that'll just style that tilt um component that we imported and uh we'll give it a width of 60 because 60 plus 40 equals 100 and let's add a media query for that so let's just copy and paste this one all right and uh looking one at 670 and this one's 670 oops and then let's add that tilt wrapper in then for our tilt wrapper it needs this options and uh we'll just give it the max tilt of 25 that just tells how far it will tilt perfect looks good okay all right so that is looking good what else do we need or we need our text so let's create another component and let's call it hero text because we like to separate things into smaller components we don't want huge components and you can always go back and refactor but when you have smaller components it's just easier to deal with and easier to test all right so what text do we need let's see on education okay so that's uh we'll give that an h5 and then let's just copy and paste it and then we'll do h1 we need four of them times four tab first one says learn second says anything any time anywhere it's at the period and then we're just going to need our buttons so let's add a container for that for now we'll just do a div and then our two buttons first one's going to say read more second one's gonna say a seven day free trial let's give this one a class name of read more okay all right so let's import that over so hero text auto import okay let's go back to our hero text cons container equal style let's import our style components that's a div okay and then for that container let's see all right we'll just adjust everything from here padding we'll say one rim and then let's work on our h5 so for h5 you want the color let's see 50 ones let's go back over here font weights uh the font weight we want to give it 500 font size 0.9 rams margin bottom one round and give it a font size so for our h1 tags we're just going to target all of them at once um because they're going to share some styles 3.5 rims and then font weight 900. all right and now so generally generally when um when you want to target because you as you see they're different colors generally people would put like class names in i found the easiest thing to do is we target the end of type so [Music] we'll say and and th of type we only want one of those colons all right um and then we're gonna do one for the first one and that one is a lighter purple and then goes darker from there so we want to give it a color of let's see what that color is this is our color this one leads to the font weight on the first one needs to be smaller so font wait i will give that 700 and give the other ones 900 and then let's let's target these colors all right so let's copy this down four times two three four uh you know what this has to be in h1 so let's go down make sure you put this or you nest it inside of the h1 tag for it to work correctly all right so this is we don't need that font weight this color for the third one this color for the last one okay there we go looking good okay now we need to work on our buttons so we're just going to call this let's copy that up we're going to call it a button container and that's just gonna wrap our buttons and um margin top two rims all right i moved it down some and now let's target our button okay so we want the background color to be let's grab this color should i grab the right color eight let's move that three there we go so background color we want a border of none um padding 0.9 rim to 1.1 rem uh color i want it white border radius one rim uh box shadow so we can use the box shadow what do we use it on i think the nav bar 13 24 let's just copy this see how that's looking okay transition uh 0.3 seconds easing out and margin gosh cannot type 0.5 rims font size 0.8 rims cursor pointer and then we can copy and paste this hover change these colors all right so now we need to target the read more button um make sure we're nested in the button let's see know what no because then the style won't work read more we're targeting that class and uh let's give it this color so color background transparent um we want the border to be three pixels solid and we want that color there again and then um we want to add a hover effect and uh let's see just gonna copy and paste it from here yeah copy and paste the whole thing you know what we don't need to add this because it's in the parent let's go to our tilt wrapper and we need to add so i had the mistake of putting that it needs to be display none yep so when we get smaller it just disappears and uh what we also need to do we're almost done is add that white blur to the background so we need to go back to our nav bar and let's go to the menu i want to say yep the menu and uh let's go back to our hero and just copy and paste this into our menu under the media query and then let's change this to change that to 15 pixels we don't want it so harsh there we go all right so we are all set um if you guys have any more questions just uh go ahead and post a comment um i appreciate appreciate it if you guys go ahead and like this video um i i appreciate the support um dislike it if you don't like it tell me what i can improve on but thank you for following along in this video and you guys have a good one [Music] foreign

Channel: Eli Codes

Views: 9,418

Rating: 4.9900498 out of 5

Keywords: Speed Code, code, programming, react, figma, design, web design, dashboard, real estate dashboard, react dashboard, figma dashboard, figma tutorial, figma sign up page, sign up, styled components

Id: wchh5sYX2Qs

Length: 71min 31sec (4291 seconds)

Published: Sun Nov 29 2020