Build and Deploy GTA VI Landing page | NextJS 14 | TailwindCSS | Tutorial

hey everyone welcome back to Cod crafter Hub  I am damit and today I'll go and exciting   tutorial for you in this video I'll be  building and deploy GTA 6 landing page   using nextjs 14 and tailin CSS whether you  are content developer web developer you are   ux designer student freelancer this video is  for you if you found this video help F don't   forget to hit the like button subscribe  for more content and share it with your   friends let's time to check what are  the topics I'm going to cover in this [Music] video in this time I'm going to check  the UI design in here mainly you can see this   6 and 2025 logo after that we can see this  main title in left site after the our main   title we can see one single paragraph after  that we can see this two button bu now and   discover after that in right side we can see  this video player and after that we can see   this small title and three logos in here  they mainly use two phone restyle in this   design this main title has one phone restyle  and another phone restyle for remaining all   text before we can start we need to export  assets for our project which I will do now [Music] 0:01:59.840,1193:02:47.295 [Music] n [Music] [Music] oh [Music] I have successfully exported all  required Assets in here you can see I have export this background image  and this buy icon and this discover icon   after that this player play button  and player background image and this   Xbox icon and this PlayStation icon and  this steam icon and after that finally I   have export this six icon also in here now  I'm going to make new folder for this all images and after that I'm going to copy  all images to inside of this images folder now I need another one folder that is  called as videos now I'm going to create that one in that videos folder I'm going to store this  video I have already downloaded that video then   I'm going to paste inside of this video folder in  here you can see my video and I'm going to rename that in here we have all required assets  for our project after we finish exporting   our assets we must create a jitp repository  for this project then we can easily deploy   our project to verel by using the  gab Repository to create new jitb   repository you need to click on this green  color new button now I'm going to click on that after click on that you will automatically  navigate to the this create a new repository   page in here you need to provide your repository  name now I'm going to give some repository name in here after proving our reposit name  we can provide some description   about our repository now I'm going to  provide a small description about my depository after providing our description we  need to provide our repository type that as   public or private in default they are selecting  our depository as public in this time I'm not   going to change the that one after the providing  our repository type we can add readme file for our   repository I'm not going to add that one after  that we can add G no file for our repository   in this time I'm not going to add that one also  because when I am creating nextjs 14 project that   will automatically available on my project after  that we can select our license type by default   they are selecting our license as none and I'm  not going to change that one also after providing   all details we need to click on this create  a repository button now I'm going to click on that okay now we have successfully  created our jitb remote repository   now I'm going to show you how to  create a clone repository by using   our remote Repository for that first  I'm going to create new folder in my desktop now I'm going to open this folder  with my favorite text editor Visual Studio code in here you can see my my visual studio   code text edor now I'm going  to copy my remote repository URL by click on this icon you can  easily copy your remote repository URL now I'm going to select my terminal in here by default they are selecting my terminal   as Power Cell now I'm going  to change that one as git bash after selecting our terminal we  can clone our project by using this code after this you need to provide  your URL address I'm going to paste   in here after that you need to press your Enter [Music] key in here you can see some warning  because our repository as currently empty   after cloning our repository we need to go  to inside of that for that you can use CD   command and your file name now we inside of  that our clone and folder now time to create   our next GS4 project before we creating that  project I'm going to show you my current note version in here you can see my current  node version is 20. 5.0 in here you can   see now I am in the nextjs official website  to create new nextjs project we need to copy   this command I'm going to copy that  one and I'm going to paste that in my terminal after that I am going to provide  potop and for slash because I don't need to   change new directory for my project in here  they are asking some question would you like   to use typ script no would you like to use  es link yes would you like to use tailin   CSS yes would you like to use SRC directory no  would you like to use app router yes would you   like to customize the default import alas no it  will take some time to create our next case 14 project my project has been successfully created in here   you can see my project file now I  am going to add the assets for my project in here you can see my all assets in  here now I'm going to show you how to   push our code to our remote repository  for that I'm going to first use git add [Music] command now we need to provide our [Music] comment finally get push [Music] [Music] now you can see your cod in your jitp reposition [Music] first I'm going to create this video play for that   I need react player npm package  now I'm going to install that one that react player NVM package is successfully  installed now I can use that inside of my buet for that player I'm going to create  new component inside of my app folder now I'm going to import that to my page do JS [Music] F now I'm going to run my project before  the Run I need to add use client for my both [Music] file you can see output like this now I'm going to use react player  inside of my this my video player. jsx F now I'm going to create two  variable for isore the video and video thumbnail [Music] now I can add path for this video and image [Music] now I'm going to use this variable with my react player forx player I need to provide width and height using URL prop we can provide the our video URL and we can provide the controls prop and playing prop and we can finally provide the light prop that for our video thumbnail now I'm  going to add the play icon for this react player now I'm going to import that  image to my my video player. jsx file [Music] now I can use that inside of this my play Icon  Pop for that I need to import next image in here [Music] now time to check our output in here you can see our player  now I'm going to click on this play button I think something went  wrong now I'm going to fix that one in here I need to add Source  after the our react player component I think now everything is fine in here you can see our video but we have a three errors handled runtime error now I'm going to fix that to fix that error I need to  import my this my video player   component in dynamically now I'm going to do that [Music] one in here I have import my  component as dynamically and   in this I used server side rendering  as false now I'm going to check my output in here you can see there is no any  errors now time to start this all remaining part now I'm going to remove  this component for a while   and inside of that I'm going to make another new du now I'm going to import all  images in here before importing   all images I need to export that all  image first I'm going to create that one [Music] [Music] first I'm going to use this background image now I'm going to check cover output in here you can see our background image after that I am going  to use this six icon and this 2025 in here I use this absolute  property because I need to   use this image as my background  image now I'm going to check my output in here you can see my icon now I am going to create this 2025 for that they   are using inter font family now  I'm going to use Google font for that I'm going to kill this terminal for a while and now I am going to install scroll Google font in here you can see my font  has successfully installed now I   can use that font inside of my project  for that I'm going to set up that font   inside of this my layout folder  now I'm going to import that phont now I'm going to set up that now I'm going to give  some weight for this inter font and Perlo is false and I'm going to provide variable for this now I need to config that  inside of my Tailwind config.js f after coni our tail wi CSS file  we need to pass that phone to our body now we can use this font style inside of our project now we can create 2025 for that I'm going to use P tag now we can check our output in here you can see output I  think we need to add some margin top yeah now everything is fine now we can  move to this main title in here you can see   they are using pH family as price down unfor  fortunately Google didn't provide this font   style for that we need to use alternative  way to use this price down font I already   download that price down font style now I'm going  to show you how to configure that with our nextjs project in here you can see my font file  now I'm going to add that to my project in here I have added inside of this my app  folder now I'm going to configure that to my project now I'm going to Define that in here in here I need to provide that phone path now I need to insert this local font after that I need to configure  this with Tailwind config file now I need to pass this font style to my body now I can use this font style inside of my project and in here I'm going to remove  this all because I don't need to use that   in my terminal you can see some worning and  they are providing some link to me like read   more now I'm going to check that in here you  can see in a version 13.2 they are going to   remove this one and they are going to use this  package in here they are providing some way to   fix that one now I'm going to use that method  to fix that issue now I'm going to copy that one [Music] before using that method I'm going  to push my code to GitHub for that   I'm going to kill this terminal for a while  and I'm going to push my code to my remote [Music] reposit [Music] now we can use that method to fix that burning now   I'm going to paste that code in  here now I'm going to press enter key [Music] [Music] I think now everything is fine  now we can create this main text in this you can see they are using  font color as white and some text   Shadow and font family as price down and font size   as 129 and font style normal and font  weight 900 now I'm going to implement this inside of that du I'm  going to use another one D now I'm going to use vtag for that text now time to add text to here now we can add style for this in here I'm going to use 120 for my font in here you can see they are using some  custom text Shadow now I'm going to add that one for that I'm going to create  new style in my Global CSS file now I can use this class to my text now I'm going to check my output in here you can see that font and that font  style in here I think you can see that font Shadow   also for the understanding purpose I'm going to  remove that one and I'm going to show the the output I think you can see the difference now I'm going to add some style for this okay let's go to check our output yeah in here you can see  our final output like this now   I'm going to add this paragraph for that  paragraph first I'm going to add du in here inside of that de I'm going to add P tag and now I'm going to copy the paragraph now I'm going to check what  are the style they are using in that paragraph in here you can see there  they are using this text color and   in here also they are using that text  Shadow and font family as inter and   font size 16 and font weight as 400 now  I'm going to add that all style to my paragraph now I'm going to check my output in here you can see my output I think I   need to add some more style for this  paragraph now I'm going to add that [Music] time now you can see my output  same M this UI design now time   to create this buy now button and discover Buton [Music] [Music] [Music] [Music] now I'm going to check what are  the style they are using that button [Music] [Music] oh oh [Music] [Music] now we can check our output in here you can see our button  we need to add some style for this in here you can see our button  like as our UI design now I am going   to create this available on text and this three logos [Music] [Music] [Music] now we can take cover output in here you can see our available on  text and this three logos now I'm going to add   some style for this because I need to get that to  correct position and I need to add my video player also now we can check our output in here you can see our  video and video player and this   three logos in here we need to add some style for this now we can check our output I think I have do some mistake now I'm  going to correct that one yeah in here I need to correct now you can see output like this we  can play this video by click on this play button like this in here you can see some  another rning now I'm going to check that   in here you can see they are providing next  image change in version 13 they are provide   some details in here and they are providing  way to fix that now I'm going to use that turn first of all I'm going to kill this terminal before using that  method I need to push this   code to my jitb repository  for that now I am going to [Music] do [Music] now I'm going to use that method first I'm going to copy  this end I'm going to paste in here to use to that second command we need to push our  code to our repository now I'm going to do that again [Music] I think now I can use that second command I'm going to paste in here [Music] I think now everything  is fine now I'm going to check   our final output for that I'm going to use npm run new now we can see our output in local Los 30004 yeah in here you can see our final output like same as our UI design now  I'm going to configure the screen size   in this video I have created this in page only for   the desktop version if you wish you can  implement this for the mobile responsive also now I'm going to finding my screen with [Music] [Music] [Music] [Music] now we can check our output you can see output like this now  I'm going to check that withd in the small screen in here currently you can see the  output but when I am reduce the screen size   you can't see anything you can only see  this message now we can push our code to GitHub we need to add this es link ERC jsn  file file now I'm going to update my repository [Music] [Music] again now you can see your final code   in your JP repository now I'm  going to deploy this by using vers in here first of all you need to log to  the veral I'm going to click on this login button you need to select GitHub after that you will automatically  navigate to the this dashboard in   here you need to click on this and you  need to select project in here you can   see this import git repository under  the import git repository you can see   your recent repository in here you can see my  Repository now I'm going to click on this import button in here you can provide project  name I'm not going to change that and   by default they are selecting our framework  after that you need to click on this deploy button it will take some time to deploy our website [Music] by click on this window  you can see your deployment web in here you can see our deployed website you can  use this URL for sharing this website with your   friends let's quickly recap what I have done in  this tutorial in this tutorial I use nextjs 14 as   my framework and tailin css4 my styling I have  used two font style enter and price down enter   from Google font and price down from local font  after that you can see I have defined that font   style in my layout. Js file after that I have  set metadata in here in 24 line I have passed   my phone style for body then I can use that  all font inside of my body tag in page.js file   I have imported Dynamic from next that's for  import my video player as dynamically when I   am using Dynamic it will help to improve perance  Cod splitting and lazy loading the SSR FS option   tells next days to that my video player component  not to server site render this means it will only   be loaded and rendered on the client side in  the user browser after that I have used this   whole code for check the screen width and if  the screen size is less than 1,440 pixel that   web content is not showing in my video player.  jsx file I have used the react player package   to display the local video in web browser in  es TRC dojon file I have defined two rules to   ensure consistent font rendering across device and  avoid potential compatibility issues thank you so   much for joining me today I hope you enjoyed  building the GTA 6 landing page with nextjs 14   and Tailwind CSS if you found this video helpful  don't forget to hit the like button subscribe   for more content and stay tuned for more exciting  tutorials on codc H until next time happy [Music] cing

Channel: CodeCrafterHub

Views: 270

Keywords: next js project, next js, next.js, nextjs, tailwind css, next js 14 project, next js clone, next js website project, nextjs project, web application project, build and deploy, figma tutorial, next js 13, next js 14, next js 13 project, next js projects, next js tutorial, react next js project, tailwind project, tailwind css nextjs, tailwindcss, next js full tutorial, next js 14 crash course, next js + tailwindcss, next js 14 + tailwindcss, npm ReactPlyer, ReactPlyer, next/font

Id: QQrk4o52vq8

Length: 55min 0sec (3300 seconds)

Published: Tue Dec 19 2023