Build and Deploy a Responsive GPT-3 Landing Page with 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