Build and Deploy a Fully Responsive Modern UI/UX Website in React JS

hi there and welcome to a brand new project video where you'll build and deploy a fully responsive website with modern ui and ux in react.js this gpt3 landing page tutorial is the best modern ui ux tutorial that you can currently find on youtube there are many tutorials out there teaching you how to build a website consistent of a navigation bar a few divs and a footer boring right today you'll learn how to take a figma design and turn it into a beautiful website all the way from design over development to deployment this video is perfect for you if you want to learn how to transform a figma design into a fully functioning website if you want to improve your css skills and if you want to learn how to create modern and responsive websites design we'll be using today is just one out of countless phenomenal designs created by ar shakir he gave me permission to use his gpt3 design as the basis for this video shakir offers many more impressive designs so definitely make sure to check out his site i'll put the link down in the description what are the prerequisites for building such an amazing website this course is completely beginner friendly we're going to start easy and then move to more complex topics every step of the way will be explained alongside building the website you'll learn react functional components in their reusability react file and folder structure fundamental css properties to master flex and grid fundamentals of css bem model from soft and pleasant animations to complex gradients perfectly placed media queries for satisfactory responsiveness covering almost all devices and at the end you'll learn how to deploy your websites to extremely fast servers and give them a custom domain name i initially planned on putting this as a paid course but i later decided to release it completely free for you guys here on youtube so to support this video leave a like comment and subscribe it shouldn't take more than a few seconds and i really appreciate it if this video reaches 10 000 likes i'm recording a second video in the build modern ui ux websites with react.js series also make sure to stick till the end of the video where i'll challenge you to add your own code to this project to make it even better now let's dive right in before we start building out our project let's first get the hosting and domain name for our new site your portfolio or any site you'll create in the future hostinger is my personal recommendation and right now they're offering crazy black friday deals so i simply needed to show this to you they offer a great price to quality ratio extremely fast servers and most importantly 24 7 chat support let's see what's offered with some of the most popular hosting plans and let's grab those black friday deals right now hostingers plans are extremely cheap i mean one dollar a month for hosting for one website and you'll also get a free ssl certificate that means that you'll have https security in this case we're going to go with the premium shared hosting because it offers a few great things you need when building out your website it gives you a free email account free ssl but most importantly you also get a free domain name of course if you go with single shared hosting you can still get a domain name separately as i've mentioned in the beginning our gpt3 website needs to be fast and reliable for that reason having a custom domain name and email and a fast website load it will definitely make your website stand out from the crowd since i've partnered with hostinger they decided to give you an even bigger discount on top of all of this so make sure to click the link in the description there you're also going to find a discount code and then come back to this website then you can go ahead and select a plan i've selected a premium shared hosting and in here we just have to choose the period of our hosting with a crazy discount going on right now i'll definitely choose 48 months to save the most money down below you can choose your method of payment and most importantly you can get an even bigger discount by entering a custom coupon you can click have a coupon code right here and enter the code javascript mastery to get an even bigger discount after you purchase this plan you'll be redirected to your hostingers dashboard and i'll see you right there [Music] as you can see i'm personally using hostinger for my brand for all of my websites if you purchase the premium shared hosting you should see this claim domain button right here if you purchase the single shared hosting you can go to the mains on the navigation bar and then purchase the domain there in my case i'll click claim the domain button let's try with gpt3 dash jsm and as you can see it was 14 bucks before and now we get it completely for free so let's go ahead and click claim domain our domain is being registered right now and this is our domain overview what we can do right now is go back to home and we can set up our premium shared hosting so let's go to setup we can click start now and as you can see hostinger offers immediate hosting with wordpress and woocommerce but in this case we're going to click this button at the bottom skip i will start from scratch we can choose a domain right here and finish setup the setup is right now being initialized and after that is done we'll be able to start coding out our project and then at the end of the video we're gonna deploy our website while our hosting is setting up i just wanted to quickly let you know that there is the github repository containing the entire code for this project so if you ever get stuck just make sure to visit this github and compare your code with the code that's on here that should help you solve all of your issues for you while you're here i would also appreciate it if you gave this repository a star there we go our website is ready let's go to a control panel and here we are at the end of the video as i've mentioned we're simply going to deploy our code right here using the file manager with that said let's dive straight into the code as we always do on javascript mastery we're going to start from the complete beginning by creating a new empty folder we can name it something like gpt3 underscore and you can put your name here in this case i'm going to say jsm once you have your folder you can then open up an empty visual studio code window and simply drag and drop it there once you do that you can go to view and then terminal this is going to open up the integrated visual studio code terminal that's going to allow us to initialize our react application and let me show you how you can do that we can start by running mpx create dash react dash app and then simply type dot slash this is going to initialize a new react application straight inside of the newly created folder of course to run this command you have to have node installed so if you don't already have node simply google node and download it that way you'll be able to run this command if you came across any issues this process is going to take about a minute so i'm going to pause this video and i'll be right back and our app finished initializing you should be able to see a few files and folders pop up so let's go ahead and see what that is about in my case first thing i have is the git folder for some of you this might be hidden but completely ignore that because it's not going to be imported for the rest of this video then we have our node modules which is going to contain all of the dependencies we're going to install this is our public folder where we have the index.html we're going to hook our entire react application too and finally the most important folder is the source folder this is where we're going to create our react components as you can see right now there is a lot of files and folders that we might not need so what i usually like to do is completely delete the source folder and then create a new one from scratch that way i'll show you how everything is done completely from scratch and we won't have any unused files our folder was deleted and we can create a new one by simply typing source or src then we can create the most important react file which is the dot js inside of there we can say import that's going to be react from react and only in this file we also need to import react dom from react dash dom this is going to allow us to hook our react application to our index.html let me show you how you can say react dom dot render and we want to render the application so we can type app like this as a component and we want to render it by saying document dot get element by id and that's going to be root now as you can see this is red right now because our app hasn't been defined so for now let's simply say import app from dot slash app right now this file doesn't exist yet but we're going to create it really soon and let me also explain the second part what is this div with an id of root well if we go into the public folder index.html you'll be able to notice that we have a big file here but if we space this out correctly remove some of the comments here some of the comments there also remove this comment in this no script here you'll be able to notice that this is nothing more than a most basic html file that has just one div with an id of root inside of here our entire application will go so that's exactly what we're doing here we're saying this app component is going to be rendered inside of the div with an id of root so now let's create that app inside of the source we can create a new file called app.js inside of there we can run a command called rafce this is a react functional component if what i've just done seems like magic to you you might not have the right extension so just go ahead and search for es7 snippets and then download and install es7 react redux graphql react native snippets once you do that and reload your visual studio code you should be able to run this command and immediately get a functional component like this one this is going to simplify and speed up your workflow inside of here for now we can just create an h1 tag and simply say gpt3 inside of there now before we go ahead and run our application we can go to view and terminal and just install the dependencies that we're going to use this is a special project video because we're going to use just one single dependency so you can type npm install and that's going to be react dash icons and why is that so special because everything you're going to see in this video is going to be done from scratch without using extra dependencies we're going to turn that figma design into a compelling website without using any dependencies just by using your react skills we're going to give this dependency a moment to install and we'll be right back there we go our dependency installed and we can simply type npm start to start our application on localhost 3000 and if we've done everything correctly we should be able to see just one single heading saying gpt3 doesn't look like something right now just a basic white page with nothing on it but soon enough this is going to be filled with code assets colors backgrounds everything and it's going to look and feel amazing so to start off let's create the basic folder and file structure for our entire project this might seem like a boring process to start with but this is going to save us so much time later on so the first thing we can do is create a new folder inside of the source folder called components inside of our components we're going to have just a few components and these are going to be article then also inside of the components folder we're going to have the brand component we are also going to have a call to action or a cta component we're going to have a feature component and finally we're going to have our navigation bar so we can call it navbar now each one of these components is going to have two different files the first one is going to be the corresponding component so inside of the article that's going to be article.jsx that article is going to be a functional component so we can again type rafce for now you can simply render out the article inside of each component folder we're going to have one more file and it's going to be called the same as the folder in this case article but it's going to be a css file so these are going to be the styles for this specific component and we can simply import them by saying import dot slash article dot css great now what we can do is we can repeat the process for all of the other components so i'm going to copy this entire thing and simply do the same thing for the brand right here we can create a new file called brand.jsx and i'm simply going to paste it here now we just have to change a few things we can do that by holding the alt key and then double clicking wherever we mention the articles now i'm going to rename that to brand and i'm going to rename the css to brand as well finally we have to create a new file called brand.css now again we can repeat this process for our cta so let's create a new component called cta.jsx paste everything again we're going to rename it to cta and it's going to be cta.css inside of there we can also create that cta.css file we can again repeat the same thing for the feature by creating a new feature.jsx component and right here you can simply paste what we have rename it to feature and also feature dot css as i've already mentioned this process might be a bit boring to start with but it's going to make her life so much simpler later on let's also create one new file it's going to be called feature.css and the last component on our list is going to be the navigation bar so let's create a navbar.jsx again we're going to paste it rename this to navbar and change this to navbar dot css and finally we're going to add the navbar.css file right here great now we have the files and folders for all of our components i'm going to close all of our open files by pressing ctrl and then w a few times just so we have a clean working environment and now we can also export all of these components from a single file usually we would have to do something like this import article from dot slash components slash article and then one more time article to get to the exact component and now if we wanted to use all of these components in this file would have to repeat this line for every single component the second one would be brand third one would be cta and so on i think you can see the point this is getting quite repetitive and there is a simple fix to that we can simply go to the components folder and create one new file called index.js instead of this file we can say export in curly braces default as and we can give the name of our component like article from that's going to be dot slash article forward slash article so basically what we're doing is we're exporting the article from this index file and from this index file we can also export all the other components so this one is going to be brand from brand then we can repeat the process that's going to be cta from cta we're also going to have a feature component like this from the featured folder and finally we need our navigation bar so that's going to be navbar from navbar forward slash navbar now with this approach inside of our app we can import all of these components in one line believe it or not the only thing we have to do is say import in curly braces article brand cta and any other component you want from dot slash components and they're going to be imported automatically that's great that's a phenomenal trick that you can from now on use in all of your react applications but in this case we won't be importing our components straight inside of our app the components will be imported inside of our containers and that's another great tip i can give you we're going to structure our react application in a few files and folders we're going to have the components folder for smaller components and then we're going to create a new folder called containers this is going to be for our bigger components containing multiple of the components at the same time you can think about a container like a bigger section of the page so let's go ahead and repeat the process for our containers we're going to have quite a few one is going to be called blog then the second one is going to be called features multiple then we're going to have a footer we're also going to have a header we're going to have a possibility section like this and we're going to have a what gpt 3 there we go so now for all of these containers we can again create a similar structure where we're going to create a new file called blog.jsx and we're also going to have the blog.css there we go again we can simply keep copying and pasting an empty component for now so let's go ahead to our blog rename this to blog and this is going to be blog.css and i'm going to say it one more time i know this is getting repetitive but later on we'll be able to just switch between the components and start implementing real logic and real design to each one of them just bear with me for a few more minutes and we're going to go through it really soon the second container on our list is going to be the features container so let's create a features.jsx component paste it here and simply change this to features the css file is going to be features.css so we can create it right here then we're going to have our footer so we can create a footer.jsx again paste it and simply change everything to footer and footer.css we can again go ahead and add the footer.css file we can again repeat the same thing for the header so create a new header.jsx file and header dot css paste our component into the header.jsx and simply rename everything to header and header two more files remaining we're going to repeat the same thing for possibility dot jsx paste it here change everything and also change the css file and add that same css file right here and the last container on our list is what gpt3 dot jsx we can simply paste everything say what gpt3 and in here that's going to be what gpt3 dot css so let's go ahead and add it what gpt3 dot css and with that we are quite done with all of our files and folders the only thing we have to do is add this index.js file to export all of the containers as well so that we can use it straight inside of our react application let's go ahead and create a new index.js file inside of the containers right here and now we can do the same thing export default as that's going to be blog from dot slash blog forward slash blog now we can duplicate this a few more times the second thing on our list is going to be features from the features folder the third thing is going to be the footer from the footer folder then we're going to have the header from the header folder and we're going to have the possibility possibility from the possibility folder and the last thing is going to be what gpt 3 section and that's going to be it now we can close all of our files and folders like this there we go collapse everything and just go back inside of our app.js inside of here we can use that trick that i showed you earlier we can import in curly braces footer blog we're gonna also import possibility then we're gonna import features what gpt3 and finally the header all of this is coming from dot slash and that is containers finally we're going to need a few components so we're going to import cta brand and also the nav bar these are coming from dot slash components using the tricks i showed you earlier you can see how clean our code looks like this here would be more than 10 lines but now we have it in just two and it's easily noticeable where we're importing certain things from finally to complete our long setup we're simply going to make use of all of these components right here we're going to remove this h1 we're going to have a div that's going to have a class name it's right here we can add a class name equal to app then we're going to have one more div inside of it and this div is going to have a class name equal to gradient underscore underscore bg inside of here we're going to have our navigation bar so we can say navbar as a self-closing tab and we're also going to have our header below this div we're going to have our brand to say what our brand is about then we're also going to have what gpt3 we're also going to have the features tab after that then we're going to have the possibility tab or section rather then we're going gonna have the click to action and finally a blog section and the last thing of course is going to be the footer i think that now you should be able to understand what have we been doing so far we've been setting up the file and folder structure and now used all of these containers and components inside of our app so now if we go back to the browser you can notice that everything is structured right here and separated into components that's all that react is about have one single website be it a single page or a multi-page but don't have tens of thousands or thousands of line as you would in a single index html file with react you can separate everything into smaller components as we've done right now and now we can code them out separately to keep our code base readable of course this doesn't look that good for now but as i've told you this is going to save us so much time in the future because our entire folder and file structure is now done with that said let's go ahead and start implementing the general application styles and then we're going to go to the first component on our list which is the navigation bar to create our main application styles we can create a new file inside of our source called app.css and then we can simply import it right here inside of the app.js by saying import dot slash app.css in here we're going to implement some of the general styles we can start with a star or an asterisk for all the elements we want to set the box sizing to be equal to border dash box then we're going to set the padding for all elements to be 0 and margin to be 0 as well we also want to add the scroll behavior to be smooth for our scrolling later on and then we're going to add our body tag and we're going to set our background to be var dash dash color dash bg this is a css variable for our background color we won't be typing the variable names every time we're simply going to use the variables themselves so we can create one more css file called index.css instead of there you can simply copy and paste my code because this is going to be just the setup in here i'm going to give you access to some kind of gradients color backgrounds colors for the footer background blog text and so on and in here we're also importing the font so below this video there's going to be a github gist where you'll be able to find the index.css file and simply copy and paste it here once you have that inside of our index.js you can simply import dot slash index dot css that file is now going to allow us to use these variables everywhere else in our code we can now save this file and see if we have our background and there we go you cannot see the text anymore because it's black but our background is now dark as well now let's add some basic styling as well for our anchor tags we're going to set the color to be set to unset and we're going to remove that text decoration to none usually it's set to underline now let's focus on the important part and that is adding the gradient let me show you what i mean in here i have our figma design file and as you can see there is some kind of gradient right here on the top left it is kind of bluish and then it transitions to this darker color so let's go ahead and add that gradient to create the gradient we're going to use this angrytools.com for slash gradient this is a great tool that's going to help us with creating our css gradients the link is going to be of course down in the description under resources i zoomed everything in so that you can see it a bit better and now let's start by adding our first color we can click on this yellow color right here go to hex and the first color on our list is going to be 0 0 2 8 5 3 this is going to be the dark blue color you can click on the middle one and click delete and now on the right side we're going to exchange this pink color with a hexadecimal color of zero four zero c one eight this is going to be that dark color finally we're going to switch this to radial and we're going to say three percent on the x axis and twenty five percent on the y-axis you can see our circle is now on the top left and that is exactly where we want to have our gradient as you can see our background has been created and we even have some web kits for this to work on all of the different browsers let's go ahead and copy this we can go back to the code and let's call this class gradient underscore underscore bg and in here we can simply paste everything great this is a phenomenal tool to create your backgrounds now let's see if this is actually working if we go back to our website and reload you can see that there is this gradient right here right now it doesn't look like something but once we add all the illustrations and all the text for our header it's going to look so much better now let's also add a class for our gradient text so we can say gradient and then underscore underscore text in here we're going to add a background which is going to be var and that's going to be dash dash gradient text then we're going to add the background dash clip to be equal to text and we can add webkits as well for this to work on all browsers dash webkit dash background dash clip that's going to be text and finally dash webkit dash text dash fill and then dash color that's going to be set to transparent great have we used the gradient text somewhere i don't think we have yet but we're going to use it soon enough now we also want to implement some styles for the sections because we're going to have many sections later on so it's better to implement the styles right away so i'm going to say dot section underscore underscore padding and we're going to give it padding of 4 ram on top and bottom and 6 ram on left and right now we can copy this and paste it below but of course we don't have a colon right here and we're simply going to rename this to section margin and then change the margin in the same way with it here great finally we also want to add some custom css animations and we don't need to code them from scratch let me show you a great tool that you can use the tool is called anemista.net and i'm going to put this link below as well basically in here you can find a lot of different animations that you can play with and use in your code in this case we're going to use the basic scale up animation it opens up from the middle and you can get the code right here on the right side there we go so we can simply copy this class paste it in our code right here and then one more time copy the keyframes there we go in this case we can remove this text right here so now we have the keyframes and we also have the scale up center animation again this is something that we're not using right now but we're going to use it for every single section later on and the last thing we have to do for app.css is to add some media queries so we could say add media screen and this is going to be max dash width set to 700 bx so this is going to be for our let's say middle sized devices like tablets or bigger phones in here we simply want to say section underscore underscore padding is going to be set to padding for and we're going to do the same thing with the margin so i'm simply going to duplicate this below and rename this to margin but it's always going to be for ram it's not going to be 4 6 as before it's going to be just set to 4 that way it looks better with devices with max width of 700 now we can copy this entire thing paste below one more time and this is going to be for mobile devices so max width 550 pixels in this case we're simply going to set this to 4 ram and then 2 ram on the horizontal axis and that's going to be it for app.css i know we haven't seen a lot of these changes we've created but again these are the styles that we're going to use throughout our entire application but with that said now we are ready to start creating our navigation bar we have our gradient we have everything we need let's go ahead and start with our navigation bar we are inside of the app.js and now we can simply use the control click to quickly move to the navigation bar component and we can start implementing it right here before we start implementing the code we can import a few icons so we can say import ri menu 3 line as well as the ri react icons close line and this is coming from react dash icons forward slash ri now instead of here we can have a div and this div is going to have a class name that class name is going to be equal to gpt3 underscore underscore navbar inside of that div we're going to have one more div and this div is going to have a class name equal to gpt3 underscore underscore navbar dash links and you can notice that there is something specific with how we name our class names we're using a specific css naming convention called bem let me type that right here that is bem and it stands for block element modifier so if you want to read more about bam and use it yourself on the future projects it's going to be linked below but again it's not crucial for you to fully understand them to keep watching this video so let's keep it going and soon enough i'm going to put the browser and the editor side by side so that we can see the changes in real time but let's quickly finish up this part of the navigation bar inside of this div we're going to have one final div and this div is going to have a class name equal to gpt 3 underscore underscore navbar dash links underscore logo inside of there going to have an image like this a self-closing tag and that image is going to have a source set to logo we can also add the alternative tag which is going to say logo now as you can notice we don't have access to our logo image so now this might be the best time to import all of our assets we can do that in a few ways for example by manually selecting each specific image and then going to export right here on figma as you can see right here if you click export you're gonna get that one specific image so if you're creating future sites for yourself following a figma design then this is the best way to do it the second way is to click right here and then click export and get all of the specific illustrations but in this case since you're following this video to make things simpler for you down below you can simply find a link to download all of the assets we'll be using in this project then once you download those assets you'll be able to create a new folder in the source folder called assets and then there you'll be able to simply drag and drop all of the assets that we're going to use we're going to use a few images for our blogs also the links to specific companies the ai image but in this case we need our logo so just download all of the files below and you'll be able to continue following along with the video with that said now we can import that logo by saying import logo from dot slash dot slash assets and then logo dot svg great let's go ahead and see how does this look like in our browser and there we go you can see that we have our logo right here on the top left but of course we still haven't added all of the classes for our navigation bar and that's going to be our next step so now we can put side by side the browser and the editor so that we can see in real time what changes are we making there we go i've put the editor and the browser side by side you can do the same thing on your device and then we can go ahead and start implementing those class names to make our navigation bar and header look great we've written three of these classes so we can go ahead and go to the navbar.css and implement them let's start with gpt3 underscore underscore navbar our navigation bar is going to be of a display is set to flex it's also going to have the justify content space between and align items center finally let's give it some padding padding 2 ram on top and bottom and 6 ram on left and right if we save it this immediately made it look so much better now let's style the links we can say dot gpt-3 underscore underscore navbar dash links in here we're going to give it a flex 1 we're also going to say display flex justify dash content is going to be set to flex start and finally the align items is going to be set to center we cannot see any changes yet because we haven't added the links but we can do something for the logo dot gpt 3 underscore underscore navbar dash links underscore logo and right here we can give it a margin right of two ram we can also modify the image width and height by saying dot gpt3 we can basically copy what we have but we're going to target the image inside of this specific div and we can give it a width off let's do 62 pixels as well as the height equal to 16 pixels that made it a lot smaller and you might be wondering where did i get those values from so let's just compare the design with what we have right now there we go if you click on it you'll be able to inspect it and right here you can see if we want to be precise this is going to be 62 56 and it's going to be 1602 so you really want to be precise with those values because we're going to be getting them from the figma file itself great with that said we can continue adding the navigational links to our navigation bar so let's go back to the nav bar and now below this image we want to add a div this div is going to have a class name equal to gpt3 underscore underscore navbar dash links underscore container inside of there we're going to have a paragraph and inside of that paragraph we're going to have an anchor tag an anchor tag the first one at least is going to point to hash or pound home and it's simply going to say home now we can duplicate this four more times and the second one is going to say what is gpt3 then the third one is going to say open ai and again i'm simply looking at what we have on the design right here there we go what is gpd3 open ai case studies and library so let's add case studies and the last thing is going to be the library now we can modify the links so the second one is going to point to what or wgbt3 the openai can simply point to possibility then we're going to have our features and the last one is going to be blog grade let's save it and inside of our react app as soon as you reload you should be able to see the links right here but they're not that visible because they're written in black with small letters here so let's go ahead and add the classes that are going to fix that let's start by going to nub bar css and right here after we modify the image we can say dot gpt3 underscore underscore navbar dash links underscore container and we're simply going to give it a display is equal to flex as well as the flex direction is set to row it's at a row by default but it's just good to know that we are doing that here as well then we can do one more class dot gpt 3 underscore underscore navbar dash sign this is going to be for our sign in button so in here we can say display is set to flex justify content is set to flex and and finally align items is set to center below that we're going to say dot gpt 3 underscore underscore navbar dash links underscore container i have a typo here and then we want to target every p tag inside of that container but we're going to add a comma and say dot gpt3 underscore underscore navbar dash sign also target ap inside of there and the final thing is dot gpt3 underscore underscore navbar dash menu underscore container p and for all of these we're going to change the color to hash fff this is the basic white color as you can see we can now see our links just a bit better but let's change the font family to be equal to var dash dash font dash family there we go this is immediately looking so much better we're using a variable for our foreign family that we created inside of our index css there we go man rope so let's go further we want to set the font weight to be equal to 500 that made it just a bit bolder and font size to be equal to 18 pixels that made it a bit bigger we can give it a line height to be set to 25 pixels and we can say text transform to capitalize finally we're going to give them a margin 0 on top and bottom and 1 ram on left and right and cursor set to pointer now if we save that you can see they got some margin and we can actually hover over them and this is already starting to look so much better but now you might be wondering where am i getting these properties from well let me show you if we go back to the design and if i double click a specific property go to inspect and there we go we have the widths the heights left and top but in here they're positioned absolute the only things we want to get are these there we go this might not be that big to see but i'm going to copy and paste it here and you're going to notice that this is basically the same as what we have font family font style font weight font size and line height and also the color so you can technically go and copy most of the styles for every single property that's the best thing about creating a website from an already done design and usually we're gonna do that in the future we're gonna notice some specific element go to inspect and then simply copy and paste some of the styles but with that said let's go back and let's see what else do we have to add in here i think we've covered everything we have so far now we have to add a few more things to the jsx below our div right here we want to add another div and this div is going to have a class name gpt3 underscore underscore navbar dash sign inside of there we can have a p tag that's going to say sign in and below that we can have a button and that button is going to be of course of a type is equal to button and it's simply going to say sign up if we save that you can now see this sign in and sign up button now if we compare that with the design we can go ahead and move a bit more to the right you can see there is the sign in button and the sign up button so this button of course has to be styled so let's do that right away we can go to our navbar css and right here we can add the dot gpt3 underscore underscore navbar dash sign button and also later on we're going to have the gpt3 underscore underscore navbar dash menu underscore container and then the button inside of there as well so how are we going to know the classes well double click the specific property and there we go you can see that we have our border radius background and also some width and height properties so let's try simply copying that and see if we're going to get any good results i'll paste it here and simply save this code and let's see inside of our application this doesn't look that bad but it's not perfect so sometimes you'll have to take the original design and then modify it to fit your needs in this case we don't want to have the settings tone width and height rather we can handle that with padding so we can say padding 0.5 rem and then one ram on left and right if we save that we're gonna notice it looks just a bit different we're also going to add the color set to fff to be white there we go we already have the background right here we also want to change the font family and we already know how to do that we can simply use this var right here great it's already getting its shape then we can set the font dash weight to be equal to 500. there we go but i'm wondering are these styles actually right here but we missed them and they are you can see you can get these styles for the button itself but then you can go inside and get the styles for this specific property so we can basically copy this and i'm going to paste that right here you can notice we already set the font family so we can delete that font weight we've set font style normal is done by default then we're gonna have the font size and the line height we don't need the left and top in this case the color is already set and the border radius is right here let's go ahead and check it out our button is already looking much better let's go ahead and also set the border to be set to none because you can notice we have this little border here and also the outline to be set to none let's see if this fixes it it does it's already looking so much better we're going to also set the cursor to pointer like this and that's going to be it it doesn't look exactly the same as it does here but if you want it to look the same we can simply modify this padding right here let's make that one and let's make this two there we go but you can see that messes up with our design so we can decide to add some personal touch to this design and make it look like this so so far what you could have learned is that implementing something from the design is copying most of the properties and then modifying it to make it more responsive and to fit your specific needs great what else do we have to do with our navigation bar well of course we have to implement the mobile version unfortunately for the design we only have the web version but don't worry about that we can implement the mobile responsiveness ourselves to add a mobile menu we can go just below this div for the sign in and the sign up and we're going to create one more div with a class name equal to gpt3 underscore underscore navbar dash menu inside of there we want to use some dynamic state so let's import use state use state that's going to be from react right here we can use that use state hook by saying const right here we can say cons toggle menu and set toggle menu so the first thing is the variable that's going to let us know are we currently showing the menu the mobile menu or not and with the second one it's a function that is going to allow us to change that variable that is going to be equal to the used state and at the start it's going to be set to false so now right here we can say if toggle menu like this toggle menu in that case we can show a specific icon the icon to close the menu right if it's currently open so we can say ri close line is equal to self-closing tag and there we can give it a caller equal to fff which is white we can set the size to be equal to 27 and then we want to do something on click more specifically on click we have a callback function and the only thing we want to do is set the toggle menu to be equal to in this case false and then we want to have an else so what do we do if it is not currently open then we can duplicate this line we're just going to have a colon the icon is not going to be closed line rather it's going to be the r i menu 3 line and we're going to set it to true now if we save that we should be able to see that if we go to inspect and then mobile there we go right now we cannot seem to see it here and that's most likely because we haven't added the navbar menu class but before we do that let's just finish up adding our mobile menu so below that we want to say if the menu is toggled so if toggle menu and end that means only if this variable is true only then render what is coming and what's coming is going to be a div we also need to close that div and that div is going to have a class name equal to gpt3 underscore underscore navbar dash menu underscore container and it's going to have one more class called scale up and then dash center so scale up center that's the class we've created before which is going to give it just a bit of animation now inside of there we want to have one more div this div is going to have a class name set to gpt 3 underscore underscore navbar dash menu underscore container dash links and inside of there we want to have the same links we've had above so i'm simply going to copy them right here or in react fashion we can create a new variable that we can then reuse so just above the navbar we can create a new functional component called menu and that's going to be an arrow function that's going to instantly return this specific menu but of course we have to wrap it with a react fragment so right here that looks like this there we go and now we can reuse this menu two times that's what's good about using react you don't have to write this code multiple times in this case you can simply call this component right inside of here copy it and then we can use it inside of here as well let's see if our desktop still looks good there we go this looks fine to me of course if you increase it a bit that's good and now on mobile devices let's check that out let's go for iphone x right now it doesn't look that good but of course we still have to provide the mobile responsive classes and below this menu we're going to have one more thing and that's going to be similar to the sign in and the sign up so we can just paste it right here but we're going to change some class names right here this is not going to be navbar sign in this case we can do something like gbt3 underscore underscore navbar dash menu underscore container dash links dash sign great so now let's save this and let's implement the classes for everything we've just done of course we have to start with the menu by saying gbt3 underscore underscore navbar dash menu it's going to have a margin dash left set to one ram and it's going to have a display set to none and position set to relative again now you cannot see it but we're going to make it scene soon enough then we can say dot gpt 3 underscore underscore navbar dash menu svg there we want to give a cursor set to pointer and now we come to the main part right here gpt3 underscore underscore navbar dash menu underscore container it's going to have a display set to flex it's also going to have a justify dash content set to flex dash end then align items also set to flex dash end and finally flex direction is going to be set to column we cannot yet see those changes because we're still looking at the same desktop navigation bar but we'll be able to see them soon enough let's also add the text align to be equal to end let's also add a background so let's say background is going to be equal to var and that's going to be dash dash color dash footer of course we still cannot see anything then we're going to give it a padding off to ram let's give it a position of absolute also top of 40 pixels and write equal to zero so it's going to appear on the right side then we're going to give it a margin dash top to one rem also the min dash width of 210 pixels border dash radius of 5 pixels in here i misspelled that so let's fix this and finally we're going to give it a box dash shadow to 0 0 5 rgba 0 0 0 and then 0.2 to make it just a bit darker and this is going to be it for our navbar menu container now we have to actually show it using media queries before we do that let me just quickly add fixes for the paragraphs inside of that menu that's going to be gpt3 underscore underscore navbar dash menu underscore container and then the p tag we simply want to give it a margin one rem on top and bottom and zero on left and right and finally for the sign in button dot gpt three underscore underscore navbar dash menu underscore container dash links and then dash sign in here we simply want to say a display is equal to none great now we can jump to our media queries to stop showing the desktop menu and start showing the mobile one we just created so let's start with the larger devices first because this is going to be responsive on desktop and tablet and mobile devices let's start with our tablet add media screen and max dash width is set to 1050 pixels in here we can say gpt3 underscore underscore now bar dash links underscore container and we simply want to hide it by saying display is equal to none there we go now you can see we immediately lost that menu then we also want to say gbt3 underscore underscore navbar dash menu and in here we want to set a display to flex that's actually going to show it there we go you can see our menu button right here and if we click it it actually opens it up with that nice scale up animation great now this is it for the tablet devices let's say but now we can implement everything for the max width of 700 pixels so i'm going to copy this media query change this to 700 right here and the only thing we want to do here is change the nav bar so we can say dot gpt3 underscore underscore nav bar we're going to give it a padding of 2 ram on top and bottom and 4 ram on left and right there we go that basically pushed it up a bit and it's looking more centered and now finally on the smallest of devices on mobile devices that's going to be up to 550 pixels we want to set the nav bar to be simply padding to rem there we go we also want to remove these buttons because there isn't enough space for them here the sign in the side up so we can say gpt3 underscore underscore navbar dash sign and that's going to be display is set to none this is looking so much better now we have a clean navigation bar then we're going to also say 3 underscore underscore now bar dash menu underscore container and we're going to say top is 20 pixels there we go now if we click here you'll notice that it appears correctly as it should and then finally the last thing is going to be dot gpt3 underscore underscore navbar dash menu underscore container dash links dash sign is going to be display dash block this is going to make the sign in and the sign up buttons appear right here because they are no longer on the main navigation bar now if we extend this to something like a tablet or let's try a larger mobile device okay let's try to go to surface duo this is still in a mobile size let's do ipad there we go on ipad there's enough space to show the sign-in and the sign up and the menu on the right side but if we go to something like a laptop there we go even on smaller laptops there isn't enough space to show everything but if we go on a larger laptop you can see now this looks great we have the navigation bar on the left side sign in and the sign up on the right side but as soon as we go to the mobile size we have this nice menu that pops up with the animation and with that said our navigation bar is done this is the first component on our list now if you go to the desktop version you'll notice that we have to implement the header and that's going to be our next task let's do that right away so let's focus on our header to do that we can close the navigation bar and then we can control click the header component we already have it created and we also have the css now is the time that we code out the jsx and the css for the header component and to know exactly what that header component is going to be let's open up our figma design our header is going to be this entire main part let's build something amazing with gpt3 openai this image right here description and the email login also the icons from all the people that are using this platform so let's create this entire part starting with of course the div that covers everything and then with this h1 so let's go back to our react application and let's start implementing our div our div is going to have a class name equal to gpd3 underscore underscore header and then space section underscore underscore padding because we want to add some padding under that section and we're also going to give it an id equal to home so that we can scroll to that part using our navigation bar now inside of there we're going to create one more div this div is going to have a class name equal to gpd3 underscore underscore header dash content inside of this div we're going to create our h1 our h1 is going to have a class name equal to gradient underscore underscore text and inside of there we can copy this text right here so let's try right clicking and then clicking copy if we go back here we can now simply paste it right here and remove some spaces there we go so let's save it and see how that is going to look like there we go this is already looking good now before we go ahead and implement the class names let's implement the description this email right here and the image then we can go ahead and add the classes or styles for everything so below this h1 we're going to have a div this div is going to have a class name equal to gpt3 underscore underscore header dash content underscore underscore input now inside of there we're going to have our input this input is going to be a self closing component of type equal to email it's also going to have a placeholder that's going to say your email address finally below that input we can also add a button and that button is going to be equal to a type button and it's simply going to say get started let's save that you can see this looks awful right now but it's going to look so much better soon enough looks like we forgot to add the sp tag above the input so let's do that right away just below this h1 i'm going to add a p tag let's close it as well and we won't need any class name here we can simply copy the text from here by right-clicking it and then clicking copy and we can paste it right here if we save that you should be able to see right now it's black but it definitely is there the last thing we have to add is going to be this div where we say how many people are using our platform and then the image itself so just below this div we can create one more div this div is going to have a class name equal to gpt3 underscore underscore header dash content underscore underscore people inside of there we can put our image tag which is going to be a self closing tag like this and we're going to add a source equal to people of course this is the image that we have to import so let's go ahead and do that right away from assets you can notice that in here we should be able to have a people icon there we go people.png so the only thing we have to do is simply say import and that's going to be people from dot slash dot slash assets people dot png i'm also going to duplicate this image because we're going to need one more and that is going to be import ai from and then in this case that's going to be ai.png i've also noticed in here this is going to be people.png there we go now we have the images we need you can see our first one is right here and let's add the alt tag that's going to say people and below that image we have to add one more paragraph so let's say p and let's copy this text right here 1 600 people requested access so let's go ahead and paste that right here save it and as you can see our paragraph appeared right here the last thing we have to add is going to be this big image on the top right side so just below this div we can create one final div and this div is going to have a class name equal to gpt3 underscore underscore header dash image right here we can call that self closing image tag say that the source is equal to a i and let's say alt tag is also going to be equal to ai if we save that our huge image is going to appear right here of course using styles we're going to make it a lot smaller and we're going to position it to the top right of the screen so now is the time that we implement the styles of course to implement the styles we can go to our header.css and let's take a look let's start by adding the styles for our gpt3 underscore underscore header and we're simply going to make it a display is equal to flex and by default it's going to have a flex direction of row so there we go everything is going to appear in one row now let's do gpt 3 underscore underscore header dash content just to remind you the header content is going to be the div that's going to contain everything inside of it so right here we can give it a flex is equal to one also a display equal to flex to make it its own flex container justify content is going to be set to center to center everything as you can see like that and then we're going to give it a line dash items is equal to flex dash start and finally we're going to set the flex direction to be equal to column there we go now every div is coming below one another and finally we're going to give it a margin right equal to five rem now let's style this h1 we can do that by saying gpt3 underscore underscore header dash content h1 let's give it a font family equal to var dash dash font dash family just like that we can immediately switch the font then we're going to give it a font weight equal to 800 like this to make it just a bit bolder but remember we don't have to write all this by hand we can go to figma click right here go to inspect and then all of our styles should be right here of course don't take these styles this is just used to position it on this design but we need the font specific styling so i'm going to paste everything right here font family we're already using from our own variable and font style is by default font weight is 800 and we can keep this great so now if we save this and go back that made it a lot bigger and that's exactly how it should be now let's keep it going for the paragraph below we can copy this entire thing and it's just going to be b instead of h1 let's see what styles do we need for our paragraph we can just go in here copy everything and simply paste it in here and then we can see if we need to modify anything in this case we can use the font family from a variable although is the same we can leave this font style normal font weight is also going to be normal of course font size is 20 pixels line height 27 pixels and the color is the color right here but we also have this color saved in our variables so we can say bar dash dash color dash text and finally we can add margin dash top is going to be equal to 1.5 ram now if we go to react app save it you can notice this is already looking so much better now that we've styled the header and the paragraph let's tile this ugly input and the button so just below here we can say gpt3 underscore underscore header dash content underscore underscore input let's give it a width of 100 percent also let's set the margin to be equal to two ram on top and bottom also let's set the margin to be equal to two rem zero and then one ram if we save that you can notice that's going to set up the margin and then finally let's also set a display is equal to flex and by default flex direction is going to be set to row now we can style the input itself so let's say gpd3 underscore underscore header dash content underscore underscore input and then we want to style the input inside of it let's go to the design and click this input right here you can notice that we get the background and the border radius so let's go ahead and take those and then if we click on this inner text we also get the font family style and everything else so we're also going to take these now let's indent everything properly and let's see if we have to modify something right now it's already looking just a bit better but let's go ahead and add some of our own custom styles let's give it a flex is equal to two this is going to give it more width then we're going to set the width to be equal to 100 percent let's also give it a min height equal to 50 pixels that's going to just extend it a bit font family is going to be manrope so we can leave that here but we're going to change it to use our own variable like this the font style and font weight can be set to normal but i don't think we even have to have that there because it's normal by default you can notice there isn't any change the font size can be 20 pixels line height can be 27 pixels the background is going to be our own color so we can say var and then dash dash color dash footer of course we need a semicolon at the end and we're also going to give it a border border is going to be two pixels solid var dash dash color dash footer there we go this added that border and we're going to give it a padding padding is going to be set to zero and then one rem there we go and finally we're going to give it outline equal to none and we're going to set the color to be equal to fff which is going to be white now if we save that and reload the page you can notice that this is looking so much better great now it's time that we also style this input right here because as you can see this is now extending way too long we have to have it just like this as it is on the design so the next step we can do is style the button i'm going to copy this paste it here and instead of the input now we're going to style the button for the button we can again copy most of the styles let's first copy the outer styles for the button itself right here and then we can copy the inner styles for the text inside of it just like this and now we'll be able to notice if we have to change anything or we can leave it as it is as soon as we go back and save the page you're gonna notice that this is still extending way too much so let's see what changes do we have to make first i'm going to separate it from our own styles and we're going to add flex 0.6 this is going to make the button take more space as you can see then we're going to give it a width of 100 as well like this and i'm going to also set a min dash height to be equal to 50 pixels of course we still cannot see what's happening so let's see why is our button still on the wrong side and why is the text the other way around it is highly likely that our image is to blame because right now it is just so wide so it takes a lot of space for now let's simply go back to our jsx and comment out the div containing our image there we go this already makes it look so much better now let's see what styles do we have to add to our header the font family is going to be the same but let's use our variable once again for good practices like here the font style as we discussed is set to normal by default we can make it bold like this then the font size can be set to 20 pixels like it is here and the line height can be 27 pixels the background color is fine the border radius is also fine we don't need this transform matrix and the caller can stay fff we're also going to say cursor is going to be set to pointer and also outline is going to be set to none to remove that ugly outline let's also give it some padding padding is going to be zero on top and bottom and one ram on left and right if we save that this is already looking so much better there still seems to be some kind of a border outside so let's go ahead and inspect it and right here if i hover over it let's see do we have some kind of a border around this button border color border style let's simply try setting the border to be equal to none and that gets rid of it great as you can see this button is looking great but it seems like the borders are cut off as you can see this is how it should look like and this is how it looks like right here so let's fix that right away we need to fix this border radius on this input and on the button as well so on the input we're going to do something like this border dash top dash right dash radius is going to be equal to 5 pixels we're going to duplicate this and let's say border dash bottom dash right dash radius is going to be 5 pixels as well now this is not all that noticeable but now we can copy this remove the border radius from the button and paste it right here and now in here we can just paste this and save it there we go now the edges on top right and bottom right are rounded i zoomed it out and as you can see this is looking so much better we have our input we have our get started and it's looking the same as it is on the design but of course one of the most important things about this header is going to be this large image so let's implement this div with people at the bottom and then we're going to focus on the image itself our people div is already looking fine we just have to add some small flex modifications so let's say gpt3 underscore underscore header dash content underscore underscore people we can set the width to be equal to 100 percent then we can set the display to be equal to flex and this is immediately going to make the text appear alongside the images then we can say justify content is going to be set to flex dash start and then finally we can align the items to the center this is going to make the images have normal height finally let's set the margin dash top to be equal to 2 ram there we go now let's style the images and the text separately i'm going to copy this paste it below and we're going to add the styles for gpthree header content underscore underscore people but now let's edit the image itself the only thing we want to do about the image is change the width and the height so let's go here let's target this div where all these images are that's going to be this group of the elements right here and we can basically copy the width and the height let's paste that here save it and there we go the images are now of a proper height now let's change the paragraph so we can basically copy this thing one more time but this time we're simply going to say p right here again for this we can mostly copy the styles by clicking on the text and then copying all of these values i'm going to paste them here and now let's see what do we have to modify first of all we're going to add margin left right here margin dash left is going to be one ram that's going to push the text a bit above then the font family is going to be the one we already have manrope but again we're going to use good practices so we're going to use the var to get the font from there the font style is normal font weight can be 500 font size 12 line height 38 color is going to be white and then the only thing we need is text align is going to be set to center as you can see everything seems great but our text is just a bit below our images so let's inspect that and if we disable the mobile mode we should be able to notice if we inspect this paragraph that it has some margins so let's set all these margins to zero besides the left one that's going to be zero zero zero for top right bottom and then the left one is going to be one rem so we can simply say margin right here if we save that this now centered everything and this is looking great finally now is the time that we bring back our image so let's go to heather.jsx let's uncomment this of course it's going to look bad at the moment but let's add the styles we can do so by saying dot gpt3 underscore underscore header dash image let's say flex is going to be set to 1. if we save that nothing's going to happen yet but then we're going to make this a display flex of its own and we're going to say justify dash content is going to be set to center and also align dash items is going to be set to center by itself right now this is not making any changes but now let's change the size of this image by copying this and then editing the styles for the image itself the width is going to be set to 100 percent and also the height is going to be set to 100 percent if we save this you can see the image is now looking just a bit better if we reset the zoom on our side this is looking good and if we expand this to a normal full hd window the image should be on the right side but it is still not so there's something that we have to do about that but first let's add the media queries so that this works on all kinds of devices first let's create the add media screen and max dash width is set to 1050 pixels in here we can modify the header gpt3 underscore underscore header and we're going to set the flex direction to be equal to column now let's open up our inspect tools and let's see let's go over to the 1050 pixels this seems about it so now we're working on this specific screen size we're also going to say gpt3 underscore underscore header dash content and we're going to modify the margin to be 0 0 and then 3 ram of course we don't need the column here there we go now this is looking fine on our devices up to 1050 pixels let's see what we can do for the devices up to 650 pixels so these are going to be let's say larger phones or tablets i can copy this entire thing paste it below change the max width to 650 pixels and in this case we're going to modify not the header but the h1 inside of the header we can give it a font dash size to be equal to 48 pixels there we go and then we're going to give it a line dash height equal to 60 pixels i don't see the changes yet so let's see if we need to maybe move it like this there we go i can see the changes now the header is actually smaller now we're going to modify the p tag inside of the header as well so i'm going to simply paste this here gpt3 header and then p tag inside of it we're going to set the font size to be equal to 16 pixels to make it a bit smaller and also change the line height to be equal to 24 pixels there we go everything fits better on the screen right now we're also going to change the gpd3 underscore underscore header dash content underscore underscore people we can simply set that to be flex direction is equal to column now this is going to appear below the images of course we can copy this paste it below and we can change the p tag inside of that div we can simply say something like margin is going to be set to zero there we go now it is centered and finally we want to change the input and the button so we can say dot gpd3 on underscore underscore header dash content underscore underscore input and then the input we're going to add a comma duplicate this line and then change the button as well the only thing we're going to do here is change the font size to be equal to 16 pixels and then the line height to be equal to 24 pixels if we save that this is now going to appear so much more normal and not too large there we go and finally let's make this work with smallest of devices which are going to be mobile phones like this i can even open the normal iphone x right here so let's see what do we have to change i'm going to copy this at media paste it below and this is going to be for devices up to 490 pixels inside of here we're again going to modify the header and the p tag so let's copy this paste it below and we're going to make this just a bit smaller 36 pixels for the font size and 48 pixels for the line height there we go and then change the p tag 14 pixels for the font size and we can leave it at 24 pixels for the line height finally we can also modify the input and the button right here this is going to be 12 pixels for the font size and let's say 16 pixels for the line height there we go now everything seems much more streamlined and better usually everything is too large on desktop devices but now it's looking good for mobile devices as well now the last thing we have to do is see what's up with our image i think it is still showing below the content where it should show on the right side of the content on desktop devices so let's go ahead and put this right here and see if it messed up some of our styling this is going to be the main div right here the main div is going to be flex it's going to be center flex start and column it's going to have some margin right this seems alright to me and it looks like that our issue is not actually in the styles it's inside of the header.jsx this header content should cover only the content parts meaning h1 p then the input and the button and finally the 1600 people but this div should be below that content div right here so let's indent that properly and put it just below this div now if we save that you're gonna notice that the image appears on the right side if we now expand this like this and reset the size you can notice that this is looking great let's test it on mobile devices as well so we can go to inspect on mobile it's looking great we have this let's build something amazing with 3 openai let's see how does it look like on tablets looking great as well what about laptops looking great and then finally on 4k devices it's a bit stretched but it's still looking good of course what we're wondering is going to be mainly the mobile then the tablet something like ipad pro or ipad and then finally the normal 1920 by 1080 device great it's looking perfect as you can see our header is now done and this is already looking so much better creating this header wasn't as hard as creating the navigation bar and the entire project structure but now you can believe me now that we have the project structure done creating all of the other sections is going to be so much simpler we have the navigation bar done fully responsive also the header part is now done fully responsive as well and now we are ready to create all of the remaining sections let's go ahead and do that right now the next section on our list are going to be the brands it's going to be a really simple component as you can see right here so let's go back to react application and let's expand our code the next component is going to be implemented just below our header so let's close this file in this file and let's go into the brand component in this file we're going to import a few images so to simplify the process let's create a new file called imports.js this is going to be a helper file to import all of the images into here and then we'll be able to import them in one line in our brand component so we're going to need import google from dot slash dot slash assets forward slash google.png now i'm going to duplicate this four more times the second one on our list is going to be slack then we're going to have the equation then we're gonna have the dropbox right here and finally the last one on our list is going to be shopify the only thing we have to do now is say export and now we can export all of them at once by pasting them here and then adding commas at the end of each one there we go the only thing this did is now it can go into the brand.jsx and we can import all of them like this import in curly braces that's going to be google slack athletion dropbox and shopify all of these are coming from dot slash imports great we can put that here and we are ready to use all these images first let's give a class name to our div right here that's going to be gpt3 underscore underscore brand and then section underscore underscore padding make sure to have a space in between of those two classes now let's create a new div for each one of our images it's going to look like this that's going to be a div and inside of there it's going to have the image tag that image is going to have the source equal to google and it's going to have the alt tag equal to google again the only thing we have to do right now is duplicate this four more times two three four and finally we need to change this so it's gonna say slack here slack this is going to be athleision or however you pronounce that and then we're gonna have dropbox right here and finally that's going to be shopify now if we save that it's not going to look the best because we are not yet styling them so let's open up our brand.css and let's style our only div that we have in this file that's going to be gpt3 underscore underscore brand let's set the display to be equal to flex to make them all appear in the row we're going to have the flex wrap equal to wrap and then justify content equal to center and finally align dash items equal to center now let's style each specific div we can say gpd3 underscore underscore brand then div let's give it a flex is equal to 1 like this what we can also do is set the max dash width to be equal to 150 pixels min dash width is going to be set to 120 pixels like this and let's give it a margin equal to one ram this is already looking so much better let's just give it a display is equal to flex and then justify content is equal to center and finally align dash items is equal to center as well now this is going to look great of course if you now expand this a bit you'll notice that they all fit in the same row and with that we're finished with our brand's component great this was much simpler than you might have anticipated so let's now expand this properly so we can see our code and let's see what is going to be the next component on our list as you can see it's great that we already have the entire project structure because now we're just entering each and every component and then coding them out the next part is going to be this div that you can see right here and as you can see it looks extremely custom meaning that there are going to be a lot of styles to make this possible so what is gpt3 let's go ahead and code that out we can start by entering this specific component and inside of there let's start by editing our first div our div is going to have a class name equal to gpt3 underscore underscore what gpt3 and then space section underscore underscore margin we're also going to give it an id equal to wgbt3 that is going to allow us to scroll to that once we click here and then what is gpt3 now inside of that div we're going to have one more div and this div is going to have a class name equal to gpt3 underscore underscore what gpt3 and then dash feature inside of there we want to render the feature component and that feature is going to be basically this what is gpd3 as you can notice it has a heading and it has this little thing on the top the reason why we're making this into a separate component is because as you can see it's used here here as well and then it's used in a few other places as well so in this case we're going to call the feature component that we've created before one trick to immediately import this component is to type it out and press ctrl space it's going to immediately auto import from components great now if we go back to our react application and reload this is not going to look like something we can just see the feature here but everything is black and we need some styles but before we do that let's just add one more div inside of here this div is going to have a class name equal to gpt3 underscore underscore what gpt3 and then dash heading inside of there we can have an h1 and this h1 is going to have a class name equal to gradient dash text inside of there we can simply copy what we have in here that's going to be the possibilities are beyond your imagination let's paste it here and we also need a paragraph which is going to be here explore the library so just below this h1 we're simply going to have a p tag and simply say explore the library again this is still going to look like nothing because it's black on black so we cannot see it the last thing we have to do is a div that's going to contain all of these three features chat bots knowledge and education so let's create one final div here that's going to be a class name equal to gbt3 underscore underscore what gpt3 dash container inside of there we can call our feature component like this but of course we need to pass different things into that component we haven't yet created it so we don't know what to pass so let's simply leave it like this for now now we're going to add these styles and then later on we're going to focus on implementing our feature component so let's open up the what gpt3 dot css and let's go ahead and implement the styles inside of here we're again going to use a gradient similar to the one we've used before and that gradient has also been generated automatically by the tool we used before in this case just to simplify the process so we don't have to create a gradient one more time i'm simply going to paste it here again this is not something new this is just what we immediately get from that platform that's going to give us all the gradients the link to this what gpt3.css is going to be down in the description so you can just go ahead and copy this first class as soon as you save that you'll notice that this already seems just a bit more similar to what we should have at the end so now let's add our second class which is going to be gpt3 underscore underscore what gpt3 dash feature inside of here we're simply going to make this a display is equal to flex now remember that we said that we're going to use the feature component but you can notice that this feature at the top is going to be just a bit different from the features below this one is going to have a text on the right side and this one is going to have text on the bottom so let's implement different styles for each one of these components we can do that by saying gpd3 underscore underscore what gpt3 dash feature and then also gpt3 underscore underscore features dash container underscore underscore feature inside of here we're simply going to set the margin to be equal to 0. now we can copy this entire line and paste it below inside of here we're going to modify the same thing at the start but then we're going to go into the feature and that's going to be dash text because this one is going to have the text so let's add the max dash width to be equal to 700 pixels again no changes yet but as soon as we implement the feature component this is going to be visible now let's change this heading right here by saying gpd3 underscore underscore what gpt3 dash heading let's give it a display is equal to flex we could also do flex direction is equal to row let's also do justify dash content is equal to space dash between like this and then finally let's say align dash items is equal to center finally we're going to give it margin is equal to for rem 0 and then 2 ram there we go now we can see that the explorer library came to the right side and we have our text right here now for the text itself we can copy this heading paste it below and we just want to go inside of the h1 tag as it usually is with the headings we can go back to our design simply click right here and then copy these styles once i've copied them i'm simply going to paste them right here let's see what do we have font size is going to be equal to 34 pixels line height is going to be 45 then we can set the font weight to 800 and let's also add the max dash width equal to 510 pixels font family is going to be manrope but we can use that variable that we have font family and that's going to be it we don't need the font style as soon as we change that the text is now looking a lot more like this one but we're missing the gradient where is it let's go to our what gpt3 jsx and let's see gradient dash text right here on the h1 this here is my bad this was supposed to be gradient underscore underscore text because text is the element under the gradient as soon as you save that you can see that now we have this nice gradient on this text this was the class name we implemented in the app.css so right here we should be able to see it there we go gradient text so now let's go back to action by going to what gpt3 dot css let's continue by changing this paragraph right here we can do that by basically copying this title pasting it below and now we want to modify the p tag inside of the heading again we can go here click explore the library and copy most of the styles we can simply paste them here this is immediately looking a lot better but let's see if we have to make some modifications the font family is again going to be the same one but from a variable we don't need the font style font weight 500 font size 16 line height 30 and then the color is going to be set to our own variable which is going to be var and that's going to be dash dash color dash subtext and finally we're going to make that cursor is equal to pointer to make it appear like a clickable thing there we go this is already looking a lot more similar to what the design says finally let's modify the container for our features gpt3 underscore underscore what gpt3 dash container inside of here we can set display to be equal to flex flex wrap is going to be set to wrap and then finally flex dash direction is going to be set to row let's also give it a margin dash top is equal to ram there we go now features are coming one by one now we're going to add some more styling for the feature component but this css is nothing special is nothing we haven't seen before but it is taking a lot of time to write it down so as i've done with this gradient right here i'm going to give you access to this few lines of css as well you can simply copy and paste them right here into what gpt3 dot css that's going to allow us to more quickly start working on the feature component itself so one more time the entire what gpt3.css is going to be down in the description in a github gist so just go ahead and copy and paste it right here and now we are ready to start working on the feature component right now it's an empty component that simply says feature and that's it it's not accepting any props it's not doing any logic and it's not showing any jsx besides the div with a feature inside of it so let's go ahead and fix that let's add some class names the first one is going to be class name is equal to gpt3 underscore underscore features dash container underscore underscore feature inside of there we're gonna have one more div this div is going to have a class name equal to gpt3 underscore underscore features dash container underscore underscore feature dash now right here we're gonna have one empty div before the title to give it some space and then we're gonna have an h1 that simply says title below this div we're gonna have one more div and this div is going to have a class name equal to gpd3 underscore underscore features dash container underscore feature dash text right here we can simply render out the text but as you can notice the title and the text are undefined they don't exist so we're simply going to retrieve them through props right here we can say that our feature component accepts title and text as props and now we can go ahead and pass them right inside of here so let's see what text do we have to pass the title for the first one is going to be what is gpt3 so we can say title is equal to what is gpt3 then we can copy the text right here we can say text is equal to and then simply paste it right here as well and then we can repeat the process for all of the following features and here that's going to be title is equal to chatbots we can copy the text right here so we can say text is equal to and then paste it right here we're going to repeat the process for the knowledge so title is equal to or rather knowledge base and then we're going to copy the text as well right here text is going to be equal to this and finally the last thing we have to do is add the title equal to education and then this here is going to be the text there we go now if we save that and go back to our application this is already looking so much better you can see what is gpd3 that is similar to this thing right here but of course we don't have any styles for those components yet so let's go into our feature and let's see what styles do we have to add to our feature that css to make this look as it does on the design first things first let's say gpt3 underscore underscore features dash container underscore underscore feature itself this is going to have a width of 100 percent it's going to have a display is equal to flex justify content is equal to space dash between and then align dash items is equal to flex dash start and finally flex dash direction is equal to row we can also give it margin right here to one rem there we go right now it's not looking that good but at least it's getting into shape of how it needs to look like now let's change the title we can do that by copying this entire thing and saying gbt3 feature container feature and then dash title in here we can give it a flex is equal to one then we can give it a max dash width is equal to 180 pixels and finally margin dash right is going to be set to 2 ram let me spell this correctly and if we save that this is already looking just a bit better i'm going to copy this line one more time paste it below and now we want to modify the h1 itself so right here we're going to say h1 and you know the drill with h1s we can simply come here and copy all of the styles so let's copy them paste them here and let's see what do we have to change this is going to be var dash dash font dash family then font style we don't need font weight is 800 font size can be set to 24 but i found it to work better with 18 pixels and line height is going to be 24 pixels great letter spacing we can leave and color is going to be white so now let's paste this out and save it as you can see our titles are now looking just a bit better now we can modify this div inside of the feature this div is actually going to be this line that you can see right here so how can we do that let's go here let's copy this entire thing again now it's not going to be h1 it's going to be a div inside of that container so we can say width is 38 pixels or you know what let's go to the design let's click it and let's try to simply copy what we have right here in this case let's copy everything as we said we don't need to worry about position the width and the height are fine the top and the left we don't need and we can keep the background right here but we already have the background under our variables so we can say var dash dash gradient dash bar we're going to also add some box shadow to be equal to 0 4 pixels 4 pixels rgba 0 0 0 0.25 and finally let's give it a margin dash bottom equal to 0.25 ram if we save this you can see right here this is looking so much better already now let's modify the text so i'm going to say gpt3 underscore underscore features dash container underscore feature dash text we're gonna set that to flex is equal to two to give it some more space as you can see now this is taking twice as much space as this title is because it is set to flex 2 and the title is flex 1. so right here let's say max dash width is equal to 390 pixels like this and finally let's say display is equal to flex now we can copy this paste it below and we want to modify the p tag inside of that again as we usually do with text we can go ahead and copy this and paste it right here the font family is again going to be coming from var from our css variables font styles we don't need font weight is 500 font size i found 14 to work better and line height 24 and the color we already have under variables var dash dash color dash text now let's paste this out correctly save it and see it in the action great this is already looking so much better but the only thing i can notice is that the text still seems a bit black it doesn't seem like it is on this image right here so let's see if we have our variable written correctly that's going to be var dash color dash text let's see it in our index.css styles color text appears to be right this is that light bluish color so let's go back to our feature and let's try bringing it back to what they had here this color without using a variable if we save it and reload the page it's still black so it seems like something else is overriding it let's leave it like this for now to finish up the entire css for our feature component and then we're going to figure out how to fix it so the only thing left to do is to add some media queries so add media screen and max dash width is equal to 550 pixels inside of here we can say gpt3 underscore underscore features dash container underscore underscore feature dash title we simply want to change the h1 inside of that div to be equal to font dash size is equal to 14 pixels and line dash height is equal to 22 pixels this is going to make the title a bit smaller on mobile devices we want to copy this same thing paste it here and change the paragraph instead of h1 as well font size for the paragraph is going to be 12 pixels line height is going to be 20. and then the last thing we want to change is dot gpt3 underscore underscore features dash container underscore underscore feature and then in here margin one ram on top and bottom and zero on left and right now let's see how does this look on mobile and it's looking great the last thing we have to do is of course change the color of this text so let me see if i have some typos right here for the paragraph that's going to be inside of our feature component gpt3 features dash container and then underscore feature dash text that part seems alright to me this here is gp3 features container underscore underscore feature that's also fine and this one seems fine as well so everything seems fine let's try to inspect this specific div in here we can see that this div is this feature text meaning this one and i can immediately notice it i forgot to put this text inside of a p tag so right here if i just enter the b and close it right here this should make all the difference there we go how much of a difference can one styled paragraph tag make apparently a lot so now let's expand this to full hd to see our website in its full glory we have our navigation bar then we have our great looking header and then we have our brands and now our brand new section with the what is gpt3 we have our text here the possibilities are beyond your imagination and then we have all of these features here which are basically just one single component that we are then reusing and passing the props to great the next section on our list is going to be the future is now so in here you can see the full powers of react because we'll be reusing the component we created in the previous section right here in the next one as well great so let's go ahead and start working on that right away you already know the drill to start implementing our next section we can go to our react application open up the code and then go back to our app.js inside of here we can notice that the name of the next component or section is called features so to start implementing the features let's give a class name to our first div right here and the class name is going to be gpt3 underscore underscore features space section underscore underscore padding and we're going to give it an id equal to features so that we can scroll to it from our navigation bar inside of that div we're going to have one more div and this div is going to have a class name equal to gpt3 underscore underscore features dash heading inside of there we can have an h1 this h1 is going to have a class name equal to gradient underscore underscore text there we go and let's go to our design and let's simply copy this text and paste it right here great now if you go back you should immediately notice that we have our text right here then we can also add the p tag for our paragraph and then copy what they say right here request early access so if we go back there we go you can see it it's black but it is just below our heading now finally we need to loop over four of our new features with a different text right here so what we can do is just below this div create a new div with a class name equal to gpt3 underscore underscore features dash container now inside of there we want to render four different components but instead of simply doing this calling the feature component and then calling it again and again and again i'm going to show you one cool trick that you can do in react and that is to create the features data array at the top so const features data is equal to an array now in here we can have a few different objects the first one is going to have a title and for that title we can simply go ahead and copy this title right here and paste it great now we're also going to have a text here so we can copy this text and paste it here now we can simply repeat the process for all of the three remaining features i'm simply going to add a comma here and then duplicate these lines three more times i'm going to leave the paragraphs as they are but i'm going to change the titles so right here i'm going to paste our second title copy and paste the third one and finally copy and paste the fourth one as well what we can do right now is map over the features data so in react you can do it like this open a dynamic block of code say featuresdata.map in here we get one specific item and we get the index of that one item and now what do we want to render for each individual item well as discussed before we already have that feature component so simply type feature control space and then you should be able to auto import it there we go import feature from dot slash dot dot slash components of course if we save this right now you're gonna notice it's gonna be four empty features that's because we have to pass props into them so we can say title is equal to item dot title text is equal to item dot text and then finally key is equal to item dot title and we can also do plus index to make it really unique so they have different keys if we save this you can now notice that we have four of the different features and they are looking similar as they are right here this is the power of react you can reuse the components that you've previously created but of course this is looking close to what we have on the design but not perfect so the next part we have to do is to implement the features.css we can start with the gpt3 underscore underscore features let's give it a width of 100 like this there we go then we're going to give it a display is equal to flex as well as the justify dash content is equal to space dash between finally let's also set the flex direction to be equal to row great now we can go to our second thing and edit the heading just below this let's say gpt3 underscore underscore features dash heading right here we can give this a flex of 1 also make this its own flex container let's simply say justify dash content is equal to flex dash start then we can do align dash items also flex start and finally let's set the flex direction to be equal to column as you can see this is now looking a bit closer to what we need on the final design finally let's say text align is equal to left and let's give it a margin dash right is equal to five rem there we go now the title is on the left side and we are ready to implement our features looks like that we currently cannot see the titles of these features so let's go to features and right here i misspelled it so this here was supposed to be item.title hopefully you noticed it and there we go that's instantly looking so much better because we have already implemented the classes for our feature component now let's go back to our features.css and inside of here let's continue with styling rh1 here you already know the drill we can go here click it right here and then copy most of the styles that's going to be dot gpt3 underscore underscore features dash heading and then h1 we can simply paste everything as we always do this is going to be var dash dash font-family and everything else seems great to me so if we save it there we go this is already looking so much better now let's copy this line paste it here as well this is going to be the paragraph styling so we can go back and copy this paragraph styles and simply paste them in here again for the font we're simply going to use the variable this is alright and the color seems great as well the only thing i'm going to add to this is going to be margin dash top is equal to 2 ram now if you go back you can notice that this aligns great with this title right here and we have all the features on the right side let's just add some slight modifications to the container itself by saying gpt3 underscore underscore features dash container i'm going to scroll up flex is going to be equal to 1.5 this is going to be its own flex container like this we're gonna have the justify dash content is equal to flex dash start and align dash items is equal to center finally flex dash direction is going to be set to column let's save it as you can see now our features are aligned nicely because they are happening in a column one below another great finally let's just add some media queries to make this look great on tablet and mobile devices we can say add media screen and max dash width is equal to 990 pixels there we can say gpt3 underscore underscore features flex dash direction is equal to column so now if we open up the inspect element and go below 900 pixels like this you should be able to see that these are going to appear in a column i'm missing a 3 right here so there we go that small change is going to make all of these appear in a column so it's more readable on tablet devices let's also change the margin gpd3 underscore underscore features dash heading margin is going to be 0 0 to rem 0 and this just added a bit of margin right here finally we can copy this entire media query paste below change this to 550 pixels and in this case we're simply going to say gp3 underscore underscore features dash heading and then h1 in here we can change the font size to be equal to 28 pixels and line dash height to be equal to 38 pixels there we go let's see how does it look like on mobile devices there we go much better fits nicely on this not so wide screen and title and everything else is completely readable great and believe it or not with that we are done with the features section we have this entire part implemented let's see it in its full glory on the full hd screen i'm just going to extend this a bit and there we go our features are right here i think that now you can definitely believe me when i said that creating the entire project structure at the start is going to simplify things so much more later on let's check if the scroll works as soon as you click here it's going to scroll to a specific section of the screen there we go it scrolls to features but it looks like our what is gpt3 is not working so let's fix that we can go to our what is gpt3 component that is right here and we can see that we specified the what gpt3 wh-pt3 let's go to our navigation bar to see if we have the same thing here so right here that's going to be wgpt3 it's a bit different so i'm simply going to copy this go back to our what is gpt3 and i'm going to fix this typo right here this should have been g instead of an h so let's see wgp d3 reload the page and if we click it it scrolls nicely to that portion of the page great the open ai part also doesn't seem to be scrolling so let's see what is up with that that goes to possibility so let's find the possibility section and that section hasn't yet been implemented so that part is completely fine but everything that we have so far works wonderfully the next section on our list is going to be this big image with a woman with a vr headset and again the possibilities are beyond our imagination so let's go ahead and start creating this section right away we can of course start from inside of our possibility component so let's add a class name to this div component that's going to be gpt3 underscore underscore possibility space section underscore underscore padding and we're also going to give it an id of possibility that way we'll be able to scroll down to this section now inside of this div i think you can already guess it we're going to have one more div this div is going to have a class name equal to gpt3 underscore underscore possibility dash image inside of there we're going to have an image tag that's going to have a source equal to possibility image and it's going to have an alt tag that's going to say possibility now as you can see we don't have this image so let's simply import it at the top that's going to be import possibility image and it's going to be coming from dot dot slash dot slash assets and then that's going to be possibility dot png great now we have everything we need let's save it and see how does it look like there we go there's this huge image right away of course we'll have to fix that with styling let's also add the content that we're gonna see on the right side of that image once we make it smaller that's going to be below this possibility image div right here our second div is going to have a class name equal to gpt3 underscore underscore possibility dash content and inside of there we're going to have an h4 this h4 is simply going to say request early access to get started so we can go ahead and copy this then below that h4 we're going to have an h1 this h1 is going to have a class name equal to gradient dash text and we're simply going to copy the possibilities are beyond our imagination now below that h1 we're also going to have a paragraph so we can simply type b tag and copy the text right here and finally we're going to have another h4 so let's type h4 here copy request for early access and paste that right here and with that we are done with our content and with the entire possibility component of course we are yet to add the styles so now let's go to the style css let's go to our code and see how does it look like right now as you can notice here's the huge image and then on the right side maybe we can spot our content but no unfortunately not because it's all dark so let's go ahead and make it lighter add the gradient and let's make it visible once we decrease the size of this image so first we're going to say gpt3 underscore underscore possibility and let's set the display to be equal to flex and we can also set the flex dash direction is equal to row this is not going to make any changes right away but now we can decrease the size of the image by saying gbt3 underscore underscore possibility dash image there we can set the flex to be equal to one like this and let's also set the display of that container to be flex give it a justify dash content equal to flex dash start and also let's align the items to center finally we're going to give it some margin right off to ram of course we still can't see the changes but let's copy this and then in here let's target our image now in here finally we're going to decrease the size of that image by setting the width to be equal to 100 percent and also the height to be equal to 100 percent as soon as we save that you should be able to see that the image disappeared for some reason but our text is right here the reason why we can't see the image right now is if we inspect and let's try to target this image right here there we go you can notice that right now it doesn't have any height but if you remove this flex property it appears right here so later on once we add all the flexes for the content as well the image is going to appear because it's going to know its own height currently it's a child in a larger flex container so let's close this and let's continue with our content and then we're going to add the image later on so let's do gpd3 underscore underscore possibility dash content we're going to give it a flex equal to 1 and also display is going to be equal to flex but it's going to be a flex direction equal to column because we want all of the content to appear in a column right here then we're going to say justify dash content is equal to flex dash end and also we're going to set the align dash items to be equal to flex start okay now finally we can style each one of the headings paragraphs or titles first we can start with this h4 at the top so i can copy this gpt3 possibility content and we can simply target the h4 then we can duplicate this one more time and then we can also specify h4 last dash child because we have two different h4s remember this one right here request early access and the first one is request early access but if you look into the design they are just a bit different so we're going to have different styles for them then we have to target our h1 so i'm going to again copy this line and i'm simply going to change this to h1 and finally we have to copy it one final time for our paragraph tag now we can go ahead and implement all these styles so let's start with the h4 the first h4 we can go ahead into the design and simply copy all of the styles right here there we go let's go over the styles to see if everything's good as you already know the drill we can exchange this for var font family the font weight is going to be 500 font size 16 line high 30 and we can leave this unique color if we save that and go back reload the page hopefully it's gonna work looks like it didn't so most likely we misspelled something let's check it out gpd3 underscore underscore possibility dash content h4 let's go right here gpt3 and in here i misspelled possibility so as soon as we fix that we can see the image and we can also see request early access that's good so another reason why this image wasn't showing wasn't only the flex it was also the misspelling right here great so now let's style the last h4 a bit differently the only thing we have to do is go right here and copy the color so right here i'm simply going to give it this specific color let's indent that properly save it go back and there we go now with the h1 you already know the drill i'm simply going to copy all of this paste it here for the font family it's going to be the same one as right here the font style we don't need font weight is going to be 800 34 45 is fine and we can save that and look at it right now it's still not visible so let's see where the issue is that's going to be this one h1 with the gradient dash text class name i've made the same mistake again this here is supposed to be gradient underscore underscore text so as you can see bem methodology still sometimes gets me but all in all it's a great naming convention great the last thing we have to do is the last paragraph tag so let's go to the design copy the styles right from inside of here and let's just paste them here the font family is going to be the same font style and font weight are normal font size is 16 and line height is 30. that's great the color we already have saved so we can simply say var and then that's going to be dash dash color dash text we can indent this properly and i'm also going to give it a margin dash bottom is equal to 2 ram now if we add a semicolon here and save it go back to our site and if we reload the page and there we go here is our paragraph now our possibilities section looks great let's try to compare it with the design there we go we have this image on the left side as we do here and then on the right side we have four different text elements it might be a good idea just to add a bit more space in between them so as you can see right now we don't have a lot of space in between here so for the h1 i'm simply going to add a margin to be equal to something like 1 ram and then zero there we go and that's going to be all that we need finally we have to handle the media queries so let's add our first add media screen and max dash width is going to be set to 950 pixels in here we can say gpt3 underscore underscore possibility it's going to have a flex dash direction is equal to column now we can decrease the width a bit so we can see what do we mean here and there we go this is going to be around 950 and as you can see the image goes above the content then we also want to give the image some margin so we can say gpt3 underscore underscore possibility dash image and we can give it a margin equal to one rem and then zero this is going to just space it out a bit and finally let's just add some more margin so right here let's do gpt3 underscore underscore possibility dash content we're simply going to say margin dash top is going to be 2 ram and there we go with this media query i think we should also be good for larger and smaller devices let's take a look this is going to be our full hd it looks great now let's open up inspect tools let's see what do we have so this is how it looks on mobile looks beautiful actually i like this view we have an image on the top and then we have our four different texts now if we extend it a bit let's go to tablet again the image is on the top if we go to a laptop there we go the images on the left side a larger laptop the images a bit bigger and this is exactly how it is on the design so with that said our possibility section is done and we can go to our next section as you can see from the design our next section is going to be this click to action div it's a really emphasized div that's going to have our button that we want people to click on so let's go to our cta which means click to action and let's implement this div shouldn't be that hard once we figure out the gradient we just have to paste it and that's going to be about it so let's start with the class name in here we can add a class name is equal to gpd3 underscore underscore cta then below that we're going to have one more div and this div is going to have a class name equal to gpt3 underscore underscore cta underscore dash content inside of there we can have our paragraph and a p tag is simply going to say request early access so we can simply copy and paste that and below that this is a bit bigger so we're going to make it an h3 in here we can copy this finally below this div we're going to have another div which is going to contain the button so right here we can give it a class name and that's going to be gpt3 underscore underscore cta dash button and inside of there we're simply going to have a button with a type of button and it's going to say get started great with that said we can move to our styles or we can see how does it look like right now but it shouldn't look like something let's take a look yep it doesn't look that good because it's dark on dark so let's apply the styles first we can target the entire div by saying gpt3 underscore underscore cta let's give it a border immediately so that we can see what we're working with let's do border 1 pixel solid white there we go so this is our content and can we make everything inside of it with a color off-white let's see there we go now we can see the content as well so i'm going to add a display is equal to flex and let me just move this a bit to the right side so that we can see it better there we go then we're going to justify content that's going to be space between that's going to move the button on the right side as you can see we can align items and that's going to be center because we want to vertically align them and then finally we can leave the flex direction as it is by default and that is row let's also give it some padding which is going to be 2 ram on all sides and also some margin to divide it from the sides let's do 4 ram there we go our div is already starting to look like something let's also give it a border dash radius of one ram and finally the most important thing is going to be our background and if you think about it or if you take a look inside of our index.css we already have that gradient bar there we go this is already done gradient that includes the colors again it was just automatically created using the software we used previously so in here we can simply say var dash dash gradient dash bar as soon as we save that you can see this looks a lot better and now we can remove the border and the color because everything is visible there we go let's see what other changes do we have to make this here has to be dark that's fine so let's copy style by style for each specific thing we can say gpt3 underscore underscore cta dash content and we can first edit the paragraph tag which is this one here you can go ahead and copy the styles there we go again our font family is going to be var font family font style is normal and we can keep everything else let's see okay there we go the font is applied and now we can repeat the process for this as well that's going to be gpt3 cta content and then we used an h3 inside of there i'm going to paste it indented copy the font family font style we don't need and we can remove the comments and bring the caller up as soon as we save that you can notice this is looking a lot better and the last thing we have to style is going to be the button itself so let's first style the button container gpt3 cta dash btn inside of here let's give it a display is equal to flex justify dash content is going to be set to center to center it horizontally and finally align dash items is also going to be set to center to center it vertically let's also give it a margin dash left off to ram to move it to the side finally let's copy the styles for the button itself from our design let's click right here copy in this case let's just take these two and that's going to be gpt3 underscore underscore cta dash button and then the button itself we can paste that and don't forget for complicated elements you also have to take the styles for the inner thing so let's go ahead and copy this as well great now if we indent that let's see if we have to fix something background is going to be fine we can bring the color to the top right here alongside the background border radius of 40 is fine for the font family we can copy it right here font style is okay font weight is bold font size 18 line height 30 that's great now let's save it and see how this is going to look like okay it doesn't look quite the same so what we can do is we can apply the padding of 0.5 ram on top and bottom and one ram on left and right this is going to just make it a bit wider and higher and now we can also set the border to be equal to none also the outline to be equal to none and we can set the cursor to be equal to pointer and finally we can set the min dash width to be equal to 150 pixels there we go this is our button and you can see this click to action div or a section really complements the section we have above it just makes it pop a bit so this is great now as we always do let's make sure this looks great on mobile devices as well we can do that by adding the media tag screen and max dash width let's do 650 pixels first of all let's see what happens around 650 pixels there we go this is below 650 and it's looking okay but let's see if we can make just some small changes right here we can say gpt3 underscore underscore cta and we're going to give it a flex dash direction is equal to column as soon as we save that you can notice that the button appears below the text and that is completely fine because up to 640 it looks good but below it's already starting to get crowded so we need to have the button below then we can also say gbt3 underscore underscore cta dash button we can give it some margin to ram zero zero there we go this looks good now below 150 pixels something like this we also have to adjust the font sizes so let's add a new media i'm going to duplicate this one and simply say 550. what we can do here is for the gpt3 underscore underscore cta we're simply going to give it a margin equal to four ram and to rem there we go that's paste it out a bit and gpt3 underscore underscore cta dash content h3 there we're going to set the font size to be equal to 18 pixels like this and we're going to set the line height to be equal to 32 pixels of course i misspelled gpt3 here so gp d3 there we go made it just a bit smaller and finally we can do the same thing for the button so i'm going to say gbt3 underscore underscore cta dash button and then the button itself there we can copy this set the font size to be equal to 14 pixels and then the line height to 28. there we go this is looking just a bit more streamlined with the rest of the website on our mobile device now we can scroll up and see that we're kind of getting close to the end of this grey design it's looking great now if we look at the real design we can notice that the next section is going to be quite a big one and that is going to be a blogging section the newest article is going to be a big one and then the four other are going to be smaller ones so let's go ahead and code out the blogging section to start coding our blogging section easier we of course already have the file structure so right here our block is just below the cta and as you can see we're closely getting to the end of this video because the last thing we have to do is the footer so let's go inside of the blog and let's implement it let's add a few class names to our first div that's going to be classname gpt3 underscore underscore blog space section underscore underscore padding then we're also going to give it an id of blog so that we can scroll to it below that we're going to have one more div that's going to contain our header as you can see this is our title right here so let's give it a class name that's going to be gpt-3 underscore underscore blog dash heading inside of there we can just have an h1 that's going to have a class name equal to gradient underscore underscore text and there we can simply copy this and paste it inside of it great let me space this out properly and go back to our application to check it out there we go as you can see the text is here but the font is not all right we're going to fix that soon enough but now we have to start adding the structure for our articles so just below that we can have a div and this div is going to have a class name equal to gpt3 underscore underscore blog dash container inside of there we can have one more div for our top article so right here we can say class name is equal to gpd3 underscore underscore blog dash container underscore group a so this is going to be our group a right here and then on the right side we're going to have a group b so let's go ahead and copy this div and simply paste it below everything is going to be the same but here it's going to be group b and now the question is how can we render out this article right here and how can we render out the four other articles on the right side now if we save that we're gonna notice well you're not gonna notice anything yet because everything is dark but if we tried hovering over it you can see that we have one article here and then four on the different side or just below it right now where i'm going with this is that these are going to be react components so you'll be able to reuse the logic and the code from one article to all the other ones so let's import our article component let's first see if we have created it before components article there we go so in this case we're simply going to import it by saying import article from dot slash dot slash components and then we can go inside of the article and then one more time instead of the article component but if you think about it you can see how long this import line is we created an easier way of importing by simply putting this in curly braces and then importing it straight from the components like this there we go and now we can call our article component in these four places so right now i'm holding the alt key and then double clicking the words and now we can add the article in five spaces at the same time there we go we're just going to call it as a self-closing component now this is not going to make any difference because the article right now is just an empty div that says article but let's go ahead and implement it right away so right here i'm going to give it a class name equal to gpt3 underscore underscore blog dash container underscore article inside of there we're going to have a div this is going to be the div for the image so right here we can say class name is equal to gpd3 underscore underscore blog dash container underscore article dash image inside of there we can render our article image so right here the image is going to be a self-closing tag that's going to have the source equal to image url and we can have the alt equal to blog image now you might be wondering where are we going to get this image url from we can of course import it from our assets but how are we going to change that image for each and every article and the solution is to pass it through props so right here we can put curly braces to the structure from props and then the structure the image url now how exactly does this image url come from the blog all the way to the article well inside of our blog we're going to import all of our images so right here we can say import block 0 1 block zero two without spaces blog zero three blog zero four and finally blog zero five from dot slash imports this imports is something we've also created before i think it was under the features nope it was under the brand there we go in the brand we have these imports so we can simply go ahead and copy this and create a new imports file inside of this blog so it's just going to be imports.js we can paste it here and we don't want to get the brands this time we want to get the actual article images so we can do that by saying import that's going to be blog01 from assetsblog01.png so we can go ahead and repeat the process for blog02 blog03 also blog04 and finally blog05 and then we can export them right here log01 let's also do blog02 blog03 blog04 and finally blog05 now we are exporting all of them from this file therefore in here we can import them in one line inside of the curly braces so what we have to do right now is simply pass a different prompt to each one of these articles right now i'm holding alt and just clicking after the article so that i can say the image url prop is equal to blog01 and now i'm simply going to change the image for each of the next articles just like that and you'll be able to notice that right now we just have the images here they are really large but we have to style that of course each one of the articles is also going to have a date as you can see right here and a title these are going to be the things that also have to change in this case the article date is the same so let's simply copy it and let's pass it through props to all the articles we can do that by simply saying date is equal to a string and i'm going to paste that everywhere and in this case the title seems to be the same for all of them so let's go ahead and pass the title as well title is equal to and we can paste it right here now alongside the image url inside of the article component we're also getting the date and the title which we can make use of let's see we have a warning here it's saying that in the alt tag we don't have to specify the word image because it already knows that that's great and just below this div i'm going to create one more div it's going to have a class name equal to gpt3 underscore underscore blog dash container underscore article dash content and inside of there we're going to have an inner div with no class names but it's simply going to contain a paragraph that's going to render out the date and then below that it's going to render out the title h3 and in there it's simply going to contain the title like this let's see we are accepting the date and title props is that what we're passing right here yep we're passing the title great finally below this div i'm going to have another paragraph and this one is simply going to say read full article as you can see that is on the design right here so right now if we go back we cannot really see anything we can see the articles we see the text and the date but it doesn't look good so let's go ahead and implement the styles for the article.css or should i say the article component let's start by the article container itself by saying gpt3 underscore underscore blog dash container underscore article let me just fix this typo right here that's going to be container i'm going to give it a width is equal to 100 and also the height is equal to 100 percent then i'm going to set the display to be equal to flex and flex direction to be equal to column finally i'm going to set the background to be equal to var dash dash color dash footer now if we save that you can see that now each one of the articles has this background right here now we have to style the image so let's simply copy this entire thing and just say dash image we're also going to give it a width and height of 100 percent and we're also going to give it this background so we can paste that as well finally we can copy this one more time but now we're going to target the actual image or the img tag and we're also going to give it a width and height of 100 percent there we go now everything is going to look great of course we have to style the content as well to make it look better so we can say gpt3 underscore underscore blog dash container underscore article dash content let's make it a display is equal to flex the flex direction is going to be set to column to make the text appear below one another then we're going to have the justify dash content is going to be space dash between and finally let's give it some padding like one ram on top and bottom and 1.5 ram on left and right that's already going to make it look a bit more like an article and let's give it a height of 100 percent finally we have to style the text elements inside of here so we can start by copying this we have to style the p like this so content and then the p tag then we also have to style we can duplicate this that's going to be an h3 and then one more time we can duplicate the p tag because there's one more p tag which is going to be a last dash child great so we have to style all of these three we can start with the paragraph and of course as you know the drill for the text we can simply copy it our first paragraph is going to be a date so let's go ahead and copy the styles for the data right here we can paste them straight into here again this is going to be var dash dash font dash family the font style is normal font weight is fine line height is fine and the color is white there we go that's looking a bit better now let's style this h3 by copying all of the styles opening this class pasting it here we can duplicate the font family and everything else is going to be copied from the design there we go that's looking a bit better and finally for the read full article we can also copy that the only thing that's going to be different about this is that it's going to have a cursor equal to pointer because eventually we want to be able to click on read full article also for our title we want to give it a margin dash bottom of 5 ram and finally the cursor of pointer as well because we need to be able to read that article so now if we go back this is already looking just a bit better now our articles have taken their shape the only thing we have to do about them is just fix some mobile responsiveness things and we can do that by saying add media screen and max dash width is going to be 550 pixels in this case we want to say gpt3 underscore underscore blog dash container underscore article dash content h3 we're going to set the font size to be equal to 18 pixels and the line height to be equal to 25 pixels just to make the text a bit smaller on mobile devices and with that we're done with the article itself but this is still not looking as it does on the design and the reason is we now style the article component but we are yet to style the containers that these articles are in so now we can go inside of the blog css and apply the styles for the containers let's start by applying a display of flex to our gpt3 underscore underscore block so we can say display flex and also flex direction is going to be set to column this changed nothing yet but if we say gpt3 underscore underscore blog dash heading we can give it a width of a hundred percent remember the heading is this thing right here and we can also make the text align the left and finally we're going to give it a margin dash bottom is equal to 5 ram there we go now we have this nice heading of course we are yet to style the heading itself so we can copy this say gpt3 block heading and then target the h1 inside of it there we can copy the styles for this specific heading so let's take them right here we can paste them right here that's going to be var font family font style is normal font weight 800 font size 62 line height 75 and letter spacing is going to be like this this seems all right to me let's go ahead and check it out there we go a large title above our blog and now we can start styling the blog containers themselves so let's say gpt3 underscore underscore blog dash container it's going to be the same as the block itself just a display flex with a flex direction but this time it's going to be rel because we want them to appear in a row of course this is going to make it look bad at the moment but as soon as we implement some changes it's going to look better then we want to style the block container but now a group a so we can say block container underscore group a remember that's only the first article so for that we can say the flex is going to be 0.75 let's save it okay now the other articles are taking more space let's also give it a margin dash right is equal to rem of course i have to spell this correctly there we go you can see that now we have this first article on the left side and now i'm going to copy this and just change the letter to b for our second section we want to have it a flex is equal to one and then we're going to use for the first time now the display is equal to grid if there is anything that you want to display in a grid that's going to be something that looks like this articles cards or anything like that now we can use the grid dash template dash columns and that's going to be set to repeat to 1 fr now if we save that we can notice that we have 2 per row great finally let's add a grid dash gap and that's going to be 2 ram and there we go by styling this container this is already looking a lot better of course if we expand it to full hd it's going to look almost as it does on the design that's great there are still some small changes that we can make so let's go ahead and collapse this a bit and let's see what else can we do the rest of the changes is going to be focused on media queries so we can say add media screen and max dash width is going to be 990 pixels for those devices we want to say gp3 underscore underscore blog dash container is going to have a flex dash direction equal to column dash reverse check this out now they're going to appear like this we could have also done just column that way the top article would appear at the start again it's your personal choice i'm going to leave it as column reverse to display the four articles first then we need to give it some margin so i'm going to say gbt3 underscore underscore blog dash container underscore group a so we can say margin is equal to 2 ram on top and bottom and 0 on left and right that's just going to space it out properly finally we can fix the width a bit so we can say gpt3 underscore underscore blog dash container underscore group a and then we want to go inside of it to gpt3 underscore underscore blog dash container underscore article there we want to set the width to be equal to 48 there we go now it's going to appear in line with all the other articles and we can also change the height so let's go ahead and copy this entire thing paste it below but now we don't want to target the article we want to target the article dash image and we simply want to set the height to be equal to 250 pixels there we go that made the image just noticeably smaller but on different screen sizes it's going to make more sense now we have streamlined articles great now we have to focus on even smaller devices so i'm going to copy this media and i'm going to say something like 700 pixels we can start testing different sizes right away so i'm going to open up the inspect and let's see how does it look like on about 700 pixels so let's open up the free tool responsive and let's extend this to something like 680. you can see the articles look a bit small they're still okay but there's something that we can do about them to make it a bit better let's say gpt3 underscore underscore blog dash container underscore group b and inside of here i'm going to say grid dash template dash columns is going to be set to repeat 1 1 fr if we save that now we can see 1 per row and in my opinion on this specific screen size this looks just a bit better of course we have to focus on the last article as well so let's simply copy this thing this line right here line 48 on my side that's going to be gpt3 block container group a and then gpt block container article in here we simply want to say the width is going to be set to 100 percent of course this title in here is just a bit too big so let's modify it dot gpt3 underscore underscore blog dash heading h1 let's set the font size to be equal to 46 pixels and then we can also set the line dash height to be equal to 52 pixels there we go this is looking just a bit better and finally we can decrease the size even more on the smallest of devices so let's add a new media query and this is going to be four devices below 550 pixels we can copy this last thing in the last media query and change it to 34 pixels and then 42 pixels for the line height there we go now this is making a bit more sense great with that our articles are now done they look phenomenal on mobile devices they all appear in one row we have the heading here let's take a look at the tablet size we have two per row on laptop we have this nice design and finally on larger laptops it looks great now let's check it out in its full glory on the full hd screen there we go this is looking perfect it's looking exactly as it does on the design right here so the next thing we have to do is going to be this footer right here this is not just the usual footer as you can see it also has this nice call to action with a button here and then the normal part of the footer just below to start creating this footer let's collapse this a bit there we go and let's go to our app.js so right inside of here you can see that our last section is going to be our footer let's scroll down to the bottom of the page and let's actually implement the jsx for the footer we can start by giving it a class name more specifically gpt3 underscore underscore footer and that's going to be space section underscore underscore padding then just inside of that we can have that big heading as we do on the design so i'm going to start by adding a div give it a class name of gpt3 underscore underscore footer dash heading and inside of there we can have an h1 like this that h1 is going to have a class name equal to gradient underscore underscore text and we can simply go ahead and copy exactly what it says right here there we go now if we save that we should already be able to see it right here then below that we have to have this request early access button so let's go ahead and create one new div below it that div is going to have a class name equal to gpt3 underscore underscore footer dash btn and inside of there we can simply have a p tag that's going to say request early access let's see there we go our text is just below we're going to form that into a button with the styles now of course we have to implement the content for the footer as you can see this left side and the links on the right side as well so let's go ahead and start with the left side or rather with the div containing everything so that's going to be a div and it's going to have a class name equal to gpd3 underscore underscore footer dash links then inside of there we're going to have our div and this div is going to have a class name equal to gpt3 underscore underscore footer dash links underscore logo and this is where logo is going to be so we can just say image and we can immediately specify the source gpt3 logo and the alt is going to be logo of course we have to import this logo so we can say import gpd3 logo and that's going to be from dot slash dot slash assets and then logo it's going to be a dot svg logo so we can save that let's see if the logo appears and there it is and just below that logo we also have to say this thing here i think that's supposed to be the address so let's copy it add a p tag below it and simply paste it right here of course it's not going to show yet because it's dark but we're going to have something below this div so below the div containing the logo and the p tag and it's going to be another div this div is going to have a class name equal to gpd3 underscore underscore footer dash links underscore div so this is going to be a div for one of our next sections this div right here and we're going to have a few of those divs so inside of that div we can first have an h4 that h4 is simply going to say links as you can see on the design then below that we're going to have a few b tags so we can say b and then we can simply copy what it says right here we can duplicate it a few more times the second one is going to say social media and we just have to do contact and there we go of course this is not going to look good yet but we have to do two other divs so we can simply go ahead and copy this entire div paste below change the links to company and change all the links below that this one has just three links so we'll be able to remove the other one and finally we have to do the get in touch so we can just one more time duplicate this links div say get in touch here copy everything else there we go the phone number and with that we are done with our content the last thing we have to do is going to be this all rights reserved at the bottom so below this div and one more div so just close to the end we're going to have one final div that's going to have a class name equal to gp d3 underscore underscore footer dash copyright and inside of that div we can simply create a paragraph and that p tag is simply going to say this there we go so now if we go back to react application you can see that there is some kind of content here but we have to style this properly so let's go to our footer.css to add the styles let's start with the footer itself gpt3 underscore underscore footer it's going to be a display flex uh but let's do just one trick that we did before let's give it a border is equal to one pixel solid white and also let's do text is equal to white or rather just color color is equal to white there we go now we can see everything and we'll be able to see what's happening and as you can see the border is right here on the outer line so this entire thing is the footer great so let's see what other classes do we have to add or should i say styles let's make this a flex direction is equal to column that way it's going to go one below another let's make it justify content is equal to center and also align dash items is equal to center there we go and finally we have to give it a background by saying background is equal to var dash dash color dash footer there we go now we don't even need this specific border this is going to be enough and we can go ahead and start with styling the container for our heading we can do that by saying gpt3 underscore underscore footer dash heading and let's give it a width of 100 percent like this then we can give it a text align is equal to center and also a margin dash bottom is equal to 3 rem there we go now we can style that h1 itself so we can write here say h1 and we can copy the styles from here there we go i'm going to paste them in here of course this is going to be var font family font style normal and everything else is as we are used to it as soon as we go back you'll be able to notice that this is already looking so much better now we have to style the button so let's simply say gpt3 underscore underscore footer dash btn and then immediately style the p inside of that btn and we should be able to copy most of the styles from here so i'll try to take this border right here there we go and then the text itself there we go so with buttons you usually have to copy the styles for the button itself and then for the text inside of that button let's see if we have to change something i'm going to save that go back and it's not looking perfect so let's see what do we have to do border is going to be fine fun family let's use the same one we've been using so far so that's going to be var font family then we can add the word dash spacing of something like 2 pixels to kind of space it out a bit and everything else seems fine to me but i'm going to copy this above it because we need to change this container itself not just the p tag inside of it so we can simply give it a display is equal to flex give it justify content is center and align dash items is equal to center and the reason why we're doing this is because we're going to give it some padding of one ram right now there we go and also border of one pixel solid and that's going to be fff so in this case we don't have to add the border right here rather we have to add it on the outer container like this i'm also going to make this text align is equal to center and finally give it a margin dash bottom is equal to 10 ram now we have spaced everything correctly and of course to make this a real button i'm going to add a cursor equal to pointer now if we hover over it this is looking great finally we have to style these links at the bottom so we can say gpt3 underscore underscore footer dash links display is going to be set to flex justify content is going to be set to space dash between let's see the changes already there we go this is already starting to look much better let's align the items to flex dash start like this if i properly type that there we go and finally i'm going to give it a flex dash wrap equal to wrap so that it wraps on smaller devices and also let's give it a flex direction to row because later on we're going to set it to column on mobile devices finally i'm going to give it a width of 100 percent and text align is equal to left there we go finally we have to style each div separately so i'm going to simply copy this paste it below and say width is going to be 250 pixels for each div i have to fix this there we go and let's make the margin equal to one ram but of course this here is supposed to go to a div inside of the footer links not the further links themselves so with that said now this is spaced out better finally we can edit out the logo so we can say gpt3 underscore underscore footer dash links and then that's going to be underscore logo let's make that display is equal to flex and flex direction is going to be set to column so we can see this one below another and we can again copy this to modify the image logo itself the only thing we have to do is add image img at the end and let's copy the size from here so i'm going to scroll here this logo has a width of 118 and a height of 30 pixels so i'm simply going to paste that here there we go and i'm going to give it a margin dash bottom of one ram great this is looking a lot closer to the design right now but as you can see the logo and this address is the only thing on the left side everything else is appearing on the right side so to fix that let's edit the actual paragraph elements dot gpt3 underscore underscore footer dash links underscore logo and then the p tag inside of there we can simply go ahead and copy it but it's going to be fairly simple it's going to be font family we can copy the one we've been using before so var font family right here the font size is going to be 12 line height 14 pixels and color fff now if you go back and reload there we go we can now remove this white color from the top because we're going to implement it to other paragraphs as well you can see right now we've been editing only this paragraph so let's actually edit these divs we can do that by saying gpt3 underscore underscore footer dash links underscore div let's give it a display is equal to flex we can put the justify content is equal to flex dash start and the most important thing flex dash direction is equal to column there we go everything remained the same but now we're going to edit the age once inside of there that's going to be the company the links and the get in touch so we can go ahead and copy one of them or at least the styles for one of them we can duplicate this and simply target the h4 inside of there we can go ahead and paste those styles the font family is going to be the same again font size 14 pixels line height 16 and the color is going to be set to white we can also give it a margin dash bottom equal to one ram let's take a look there we go now we have these headings here and we just have to edit the paragraphs now so i'm going to duplicate this one more time i'm going to change that to a p tag and we can simply go ahead and copy how these should look so i can copy it right here paste it here the font family is going to be again variable font family 12 pixels for the font size 14 for the line height and the only thing we're going to do is we're going to add a margin 0.5 ram top and bottom and 0 on left and right and also make it cursor is equal to pointer now if we take a look at this this is looking so much better the last thing we can do is going to be the copyright below so right here we can say gpt3 underscore underscore footer dash copyright in there let's add a margin top is equal to 2rem let's also add a text dash align is equal to center and finally a width is equal to 100 percent there we go and finally we have to edit the paragraph inside of there so we can target the same thing but this time with a p at the end and we can go ahead and copy the styles so right here i'm going to copy them it's going to be the same as these styles here but that's fine we can use this var right there and everything else is going to be the same let's see if we need this font feature setting if we now save this let's take a look there we go this is looking good let's see if we need this nope that doesn't appear to make any change so we can remove that line and in my opinion this is already looking like a great footer you might wonder why do they have it in three rows or rather four including this and we have it in just two well if i start expanding this you're gonna notice that it's actually fully responsive of course we still have to add some media queries for tablet devices and mobile devices but already right out of the box it's looking great so let's go ahead and add some media queries that's going to be add media and screen max dash width is equal to 850 pixels dot gpt3 underscore underscore footer dash heading h1 in here we simply want to decrease the font size to be equal to 44 pixels and also the line height to be equal to 50 pixels as we've done before we simply want to make the text a bit smaller on mobile devices so looks like we have a typo here in this case that's going to be media screen and max with 850. so this is going to be on devices lower than 850 pixels so let's go ahead and test that out right now we are in 600 so that should be good there we go looking fine now let's add 1 4 devices below 550 pixels by copying this and changing this to 550 it's going to be 34 pixels font size and also 42 pixels for the line height now if you decrease this to below 550 you're going to notice the text just got a bit smaller and we just have to add some margin to each div so i'm going to say gp3 underscore underscore footer dash links div and let's set the margin to be equal to one ram on top and bottom and zero on left and right that pushed it a bit to the left and finally we can decrease the font size for the p tags as well so i'm going to copy this paste it here and that's going to be gpt3 footer dash vtn and then the p tag right here in here we can set the font size to 14 pixels and line height to 20 pixels that was for this button right here it looks just a bit better on mobile devices right now and the last thing we can do is for ultra small devices below 400 pixels of width like this let's go ahead and copy this paste it below we simply want to decrease the font size just a bit more to 27 pixels font size and also line height to something like 38 there we go so now this can fit on literally every single device let's go ahead and do some testing i'm going to pull this on a full desktop so we can see better there we go this is how it looks like on full hd let's test with the mobile responsiveness for iphone x if i scroll down this is a really good looking footer let's test with tablets there we go in two rows laptops still in two but if we go on a larger laptop it's starting to span in three different rows you can also go to a 4k screen and it's looking fine that's another question you might have like how would you style this on a 4k screen because sometimes there is just too much real estate that you have to work with so do just center everything or do you spread it apart across the entire screen i think everything should be in the center so that it's more clearly visible so it's just gonna have some margins on the left and the right but in this case i don't think we should worry about that the only thing we care about is that it looks good on most of the devices but i gotta be honest looking at this website in 4k right now it's not even looking bad it's looking great let's close this out and let's appreciate our newly built website in its full glory we have this nice navigation bar with the sign in and the sign up buttons this fully custom header with this gradient text image on the right side and the email address field right here right here we have the brands section and then this nice card with another gradient here that's going to emphasize the strong points of our brand then right here we have some more we call them features right here all of these are the same component but you can see how they're appearing in a different fashion some of them have the title on top and then the text at the bottom and some of them with just a small change have the title on the left side and the p tag on the right side then we have this great image right here with some more text this click to action div an entire blog section where we used the article component and then we have our glorious footer our gpt3 website is now fully built and it's looking amazing i hope you guys enjoyed this build and you learned a lot along the way now is the time that we actually deployed to the web that way you'll be able to share this project with everybody with your friends potential employers and you'll be able to put it on your portfolio so let's go ahead and do that right now finally to deploy our website on hostinger's fast servers we can go ahead and close all the files and collapse all the folders then we can go to view and then terminal if your app is still running make sure to press ctrl c and then stop it from running then you can run npm run build this is going to generate an optimized react production build and there we go in just a few seconds our build folder has been generated so let's go ahead and right click it and click reveal in file explorer once you know where your build folder is let's open up the hostingers dashboard you can go to the link in the description of the video and then log in or go to hpanel.hostinger.com and then log in there you should be able to find the hosting for your domain name of course if you didn't purchase the domain name just yet because you have to figure out what is it gonna be that's completely fine i'm just going to show you the process of how you can deploy it and then you'll know the process for every single website in the future for your portfolio for any deployed site for your blog and anything else so in this case i'm going to click gpt3 jsm.com and then we can scroll down and go to file manager right here on the left side you should be able to see public.html right here so double-click it and it's going to open up the default.php you can go ahead and delete that file once that is done simply find your build folder open it up and then drag and drop all the files from your build folder straight into here there we go it's going to recognize them and then let's simply upload one by one every file is going to be deployed and then with them our entire website and there we go our files are now here before we go ahead and check our website let's set up the ssl certificate so you can search for ssl right here and simply click install ssl and there we go in just a few seconds our lifetime ssl has been installed so let's go to our dashboard and let's check out our main domain and there we go our website is deployed and it has an ssl certificate great there is one main problem all the images seem to be here besides the most important one the first image that we can see so let's go back to our hosting and let's go back to our file manager for just one second there we can click the public html and if we open up the static folder and media we can notice that all of our pngs and svgs are right here but our ai image which is this one right here is inside of our main folder so it's possible that something happened while the file was uploading so just click that file let's go ahead and click move and we need to change the destination of where we want to move it to we want to go into static and then media finally we want to select this and move this just moved our file and if we close this go back to our website in the reload we immediately see our glorious image right here that's phenomenal sometimes some things with the file upload work like this but don't worry about that even if we weren't able to debug this on our own you could simply contact the hostinger support on the bottom right and they would be able to immediately solve your issue for you with that said let's take one final look at our finished site we have this nice gradient right here as well as this gradient text we can scroll down to see this great gradient card some of the features here an image a click to action div an entire block right here and then a great looking footer of course we can check that this website is fully mobile responsive there we go this is how everything looks like on the phone beautiful i'm really happy how this project turned out let me know if you're happy with this project and if you learned a lot also below the video there's going to be a challenge where you can add more features to this project and make it completely your own if you want to build even more complex projects in the future there's going to be a link to the newsletter down below to keep you up to date with the newest courses that i'm releasing with that said thank you so much for watching this video and i'll see you in the next one [Music]

Channel: JavaScript Mastery

Views: 221,474

Keywords: react website, react website tutorial, beginner react js project, build a react website, how to make a react website, react website tutorial for beginners, react website project, react website from scratch, react website example, react website design, react website portfolio, react website development, react tutorial for beginners, react js, react js project, reactjs tutorial, react js full course, react js website, reactjs for beginners, react js project from scratch

Id: LMagNcngvcU

Length: 201min 36sec (12096 seconds)

Published: Fri Nov 12 2021