React Blog Website Design Tutorial | React UI Full Course for Beginners

hello my friends today we are gonna be designing this beautiful blog application using react.js it's gonna be on the design part and we are gonna use functional components and react rotary dom for page links so which pages we have we have a login page register page and here is the home page our posts when i click them it's gonna load my single post and here we have a settings page and creating new post page of course everything is dysfunctional for now and in the next tutorial we are going to create our own nodejs api using mongodb and we are gonna be able to register login at new post update and delete them update this profile information just design your block application and wait for the next tutorial so if you want to see more projects like this you can subscribe to the channel if you are ready let's get started ok i created new folder here and i'm going to create my react application i will say mpx create react app and i'm going to use dot here it's going to install inside this folder and i'm going to enter and here i'm gonna choose my font families first one will be josefin this one i'm gonna choose all these styles not italic ones okay it's enough lighting and second one and let's go to home page and here i'm gonna write laura i'm gonna use just italic once okay and one more and it's gonna be varela so which one was that i'm not sure so i'm gonna choose both of them there is only one style here and this one okay so i'm gonna copy this here and inside my application i will open my public folder and index.html here after this meta i can use it i will paste ok so let's get rid of these unnecessary things i will delete them let's make this a little bit smaller i will just light them and here let's write block react application and this file icon okay i will save and i'm gonna clear inside this public folder i need just index.html so i will choose them and delete and for source folder also it's going to be only app and index.js okay i will open my index.js and here let's delete them and this css file okay and inside app i will delete them and here let's write here something blog app so i'm ready to run my application i will write here and start okay here to get rid of these spaces i can go to index.html and here after this link i can create style and inside i will choose my document and inside i will say margin 0. let's try again as you can see there is no spaces anymore okay so what i'm gonna add here firstly it's gonna be a top bar here let's create a component in source folder i will create new folder and it's gonna be top bar and inside this i'm gonna create topbar.jsx and one more is gonna be top.css so i'm gonna create my function i will say rfc if you wanna use this shortcut you can use this vs code extension by the way okay i will close this and here i will say top bar so let's give some class name here i will say just top maybe and inside css but we didn't indicate here by the way let's write here we don't need this react dot slash talk bar dot css okay right now i can use this css file i'm going to use my class name and let's say with a hundred percent and height will be 50 pixels let's give some background color and we can see better okay so how i'm gonna use this stopper i will go to my app.js and instead of this i'm gonna just write here my top bar component i will save okay something like that but i wanna make this top bar a sticky bar so even if we scroll to page it's going to be always here so let's do that i will go to css file and here i will say position sticky and i'm gonna indicate my position i will say top zero it's gonna stay always in this position let's see right now we can't see anything let's go to app.js and write something here let's open ptech maybe and as you can see there's a problem here because we can't use multiple elements inside a component it should be a parent div here you can write here some d or you can use react fragments like this i will come here and close this tag something like that so i can write something inside i will write here test i'm gonna duplicate this a little bit longer like that as you can see i can scroll right now i'm scrolling and as you can see top bar is always in the same place okay it works so i can delete them okay so i'm going to my css file and here what i'm gonna do is making this flexbox i will say display flex because i wanna put every elements inside this stopper horizontally and i can center them i will say align item center okay so let's change this it's going to be white and here i can use my font family let's come here and copy this choose a thing and here i will paste okay let's check [Music] perfect so what i'm gonna put here there will be my social media icons some menu here menu items and here is gonna be my profile picture and maybe a search button i will delete this and i'm gonna create three divs here it's gonna be top left top center and right let's write here something center maybe and right okay as you can see they are horizontal so how i'm gonna split them i will go to css and here for top left and for top right i will say flex 3 and for center i will say flex 6 let's see right now let's give here some color maybe and i can explain better so as you can see top left and right 3 units and this center is 6 units i can give custom sizes like that of course you can write here maybe twenty percent four left and twenty percent for right and here maybe sixty percent for center but you can also use this flex okay i will delete this so let's give here our social media icons so how i'm gonna do this previous lessons we always used material icons let's do something different today i will write here font awesome and here i'm gonna click this one as you can see it's really nice toolkit you can use any icons you want if you come here for example let's say facebook so you can use any of these icons you can choose here free and i wanna use this one so if i click this and paste here inside top bar this left side nothing is gonna happen let's check as you can see there is nothing that because we are not using this font-awesome style to do that you can download this won't have some style file or you can write font-from cdn and here just click one of them and copy this style file let's go to index file index.html here and after this link i will just paste this file okay let's check again as you can see right now i can see this icon so let's add other ones i will say twitter let's copy this i will close them actually we need on the top bar here and here i will paste let's find here maybe pinterest this square one again and lastly it's gonna be instagram and this square one also okay so let's see right now perfect so for this center i'm gonna use a list i will delete this and here i will say ul and class name will be top list and inside there will be our items first one will be home let's give class name of course i will say top list item i will duplicate this and here let's say about and here contacts i will say right and lastly it's gonna be log out okay and inside this right part i'm gonna create my profile picture so i'm gonna create image you can search for an image but i'm gonna just copy and paste mine like that and here i'm gonna create another icon here let's go to font awesome and here i will say search three ones okay only option i will copy this and paste after this image okay let's give class name for this image i will say class name it's going to be top image and for these icons by the way as you can see they are not class name let's fix them it's going to be class name and here i can give some custom class name i will say top icon and for this search icon again class name and this time it's going to be top search icon okay let's check let's go to css and arrange them firstly i'm gonna correct this image because it's really big i will say top image which will be 40 pixels and height 40 and it's gonna be circle to open the radius it's gonna be 50 percent and object weights will be cover oops cover like that but as you can see they are not centered to do that i will come here and make them display flags align item center and justify content center okay they are vertically and horizontally centered right now so let's take care of these icons i will say top icons sorry icon and it's gonna be font size 20 pixels i will give some margin and color will be a little bit lighter it's gonna be four four 444 and i will add cursor something like that perfect so what about this list let's put this center here actually i will just cut this and paste here okay so i can write here my list top list is gonna be horizontal again you can use display flags or for list items you can use inline block doesn't matter but i prefer display flex so i can center them also i will say just fly content center let's see okay i will delete this default margin and padding and get rid of this small dots here i will say list style it's going to be no okay so what about these items top list item i will give some space again and font size 18 i want to reduce this font weight it's 400 by default i will make this 300 and cursor pointer again okay awesome so let's do this search icon i will say search icon it's going to be font size 18 color it's going to be close to gray 666 and again cursor pointer oops search icon it's going to be top i think if i remember correctly okay something is wrong i didn't write pointer okay perfect so let's give space between this image and icon i will say margin left let's say 15 maybe okay nice so we finished our topper let's take care of this header i'm going to create another component here header and inside my css and jsx file and some of you may ask why you are using css file you can use style components or sas or whatever i know and i prefer using them but some of my audience i know they are beginner and i don't want to make them more confused in the future we are going to be using style components or material components don't worry we will do everything it's just the beginning okay i will come here and rfc i can close them by the way okay let's write here class name it's gonna be header let's write here header and let's delete this and header.css of course slash here okay so let's go to app.js right now i'm not gonna write here header because we are not gonna use this header in every pages so it's gonna be in only home page so what i'm gonna do i will create here pages folder i will say new folder it's going to be pages and my first page will be home page again another folder home and inside this let's create our home.jsx and home css and here again rfc i will delete this and home dot css slash again okay let's give class name it's gonna be home and here i'm gonna use my header component and after that let's write here home page and here after topper i'm gonna use my home page and let's see as you can see my top bar here and my header and homepage perfect so what i'm going to add here is going to be some image and here there will be two titles one of them will be smaller and second one will be main title let's create them i will close this and this home okay i will come here and create another container i will say header titles and inside these titles i'm going to create tool spans now first one let's say react and not and one more it's going to be just block let's give class name header title let's say small maybe i will copy this and here it's gonna be large it can be a little bit strange but okay anyway i will not change it and here i'm gonna use some image class name header image and inside this i'm gonna copy and paste my image you can also create your maybe assets folder and put these images inside but anyway i'm gonna use like this by the way i can't see this terminal okay it's here no problem let's check something like that but it's really huge again i will go to my css file and here firstly for header i will give some margin for top i will say 60. and for titles header titles i will say display flags but this time it's going to be vertical so i will say flex direction it's going to be column let's center them i will say align item center so i'm going to change my font firmly here let's choose this one and color will be four four four okay and for this small one header title small i will say position absolute because i'm gonna put them around here middle of these tags will on this image so i would say top maybe 18 and font size will be 20 pixels and for big title what was the name x no just large again position absolute and top a little bit lower 20 pixels and font size it's going to be 100 pixels okay of course we are going to arrange this image and it's going to be something like here let's do that header image which will be a hundred percent it's not gonna overflow and i will say height 450 oops right a margin top 80 pixels and i will say object to it it's going to be cover something like that awesome so if you're confused about these percentages don't worry i just made up this i didn't calculate anything and it's not that necessary don't worry about this okay so we finished our header also let's create some container here and inside there will be our posts and our sidebar so i will close them and here let's create another component it's going to be sidebar sidebar.jsx and sidebar dot css and one more i will say posts it's going to contain every individual post let's create here posts jsx and css let's create these components rfc as we always do i will create here my css file and my class name for these posts here posts dot css okay let's go to home page here home page i'm gonna take this header here outside and i'm gonna use fragments something like that and it's gonna be our container and inside this container i will write my components posts and after that sidebar let's save and see as you can see posts and sidebar so i want to make them horizontal so i will go to home css here i'll write home and oops it's going to be display flex like that so i will split them again to do that let's close this home we don't need it anymore so i'm gonna give some custom sizes again so for posts it's gonna be flex nine again i'm gonna split into 12 parts and 9 will be post and 3 will be sidebar let's go to sidebar css and here legs 3 oops okay perfect so i wanna make this sidebar first i will go to jsx file here and i'm gonna create a container it's gonna be sidebar item and inside that's right here span and it's gonna be sidebar title and i will say about me and i'm gonna create a image here in which and i'm gonna paste my image and after that it's going to be some text here let's create ptek and inside i will say lorem and it's going to create a random text here like that but it's really long let's make this smaller okay so it's going to be our first item i can't see my image by the way oops let's delete this okay it's here so let's create second item it's going to be our categories i will say sidebar item and inside again it's going to be this title and this time it's going to be categories capital of course categories and after that let's create your ul it's gonna be sidebar list and inside ally sidebar list item and here i'm gonna write my categories let's say live let's duplicate this and maybe music style sport what else cinema and tech so we finished our second item and one more time again i'm going to create sidebar item and this one will be follow us let's create here social container sidebar social and inside again my icons so i'm gonna open my top bar here i will just copy and paste them okay i can close and here so let's change this icon class names it's gonna be sidebar icon okay let's check something like that i will go to css file and firstly i'm gonna give some margin and i will give some space for bottom padding bottom 30 pixels and background color ft fb and fb something like that it's really close to white but it's not okay so i will say power the radius it's gonna be 10 pixels i will make this display flags and it's gonna be again vertical and align item center okay so for the items sidebar item it's going to be again display flags like extraction column and align item center right now they are centered also perfect and for title for each title i will give margin and padding and that is going to be not a hundred percent it's going to be 80 i will give some border but not for right and left it's going to be only top and bottom border top 1 pixel slit and it's going to be a7 a4 a4 perfect so i'm gonna do the same thing for button bottom perfect so i'm gonna change my font family let's come here and i will copy this and paste here i will reduce this font size and color will be 2 to and font rate 600 so i can give some line height maybe it's going to be 20 pixels okay perfect maybe i can center this text align center good so what about this image i didn't give any class name i think but i can use sidebar here i can show the usage of this maybe image and i will say margin top so basically it chooses this parent and inside every images okay so i can do the same thing for p tech sidebar and p attack i will give some padding oops something is wrong now it's going to be item not sidebar okay so what about this list i'll come here sidebar list i will say this style type or this style it's going to be non and i will give margin bottom it's going to be 30. okay again you can write here display flex but i can show you another solution i will say list sidebar list item and i will say display inline block as you can see they are horizontal right now and i will give bits for each this is first element 50 and 50 percent so they are going to contain this line and others will be in another line perfect i will give margin top like that and it's going to be cursor pointer nice i will say sidebar social as you remember it's our icon container i will say again margin top and we 250 i will make this flexbox and center them and here i will say sidebar icon and it's going to be font size 16 and margin left 15 maybe 10. okay it's better again cursor pointer perfect it's really minimal i like it so what about these posts so let's close them and here i will say post and next to it it's going to be css file okay actually i'm not going to create anything inside this post instead of this i'm going to create another component here it's going to be just post and inside post.jsx and css by the way i forgot creating components folder here it's directly inside this source folder but anyway it's not a big problem we can move them later okay so i will create my rfc here and my css it's gonna be paused again and i'll write here post so here i can write my post component but it's not gonna be only one let's create four five six okay so right now i can close this and for this post.jsx i'm gonna create one image inside and here i will paste my image let's give class name post image and after this image i'm gonna create info container and it's going to contain our categories and our title and time stamps maybe so let's create this post info and here i will say post categories let's say just shortcuts cats and inside every individual post category i will say span and it's going to be post cat and first one will be let's say music and second one live okay so it's our first element inside post info second one will be our post title again span post title and that's right here maybe lorem but it's gonna be really long i will delete them maybe only here okay so after this title i'm gonna write here hr it's gonna add a line and here i will say again span and it's gonna be post date and that's right here maybe date but i want to write like one hour ago like social media application let's see okay something wrong let's check this css of course i forgot this dot here okay perfect so let's go to css file and here for our container it's going to be width 375 and i will give some margin but this margin will be different for each side for example for top it's going to be 0 for right 25 something like that so i will say just margin and for top 0 right and bottom and left okay it's really big because of this image again i will make this quickly post image which will be 100 and height 280 and again object width cover and let's give some border radius maybe not 10 let's try actually maybe less okay it's better so what about this pause team four i will make them flexbox post info of course it's going to be column it's going to be vertical and i will center them like that first one second element our title and timestamp okay so let's take care of this post category i will use another font family here i will copy this and inside and font size will be 11 and color is gonna be something like gold p e 96 and 56. okay i will give line height 20 pixels and margin top will be 15 oops it's not top and margin right will be done let's make this cursor pointer something like that right now they are separated so for this title let's write here post title i will change again this font family it's going to be chosen i will copy and paste and font size is going to be bigger and font rate will be which one we used here let's check 700 so let's use it i will give margin top something like that and here cursor pointer okay what about this date i will say pause date i will change again it's going to be laura and font style will be italic and font size 13 let's check actually okay and color will be gray let's say 999 and margin top of course like that so we forgot here our description let's add this after this div i will create here p tag and i will say lorem and it's gonna be class name pause description i will copy this and here i will choose this paragraph ground and font size 14 and color will be four four four let's check okay but i will give some line height line height 24 okay i will give margin top so what i can do here more for example our post description it's not that short i will copy this and paste again and again something like that but i don't want to write all these lines here so what i'm going to do here i will go to css and i'm gonna write here overflow hidden first and then i will say text overflow it's gonna be ellipsis and i will say display webkit box and webkit line clamp is gonna be just four lines and webkit box orient and it's going to be vertical let's see right now as you can see it's only four lines and others will be shown as dot dot dot perfect if i make this five lines as you can see nice let's make it four oops okay so right now as you can see they're vertical each line will be two posts so i will go to posts css as you remember it's our container what i will do here i will say display flags and this time i will say flex wrap and it's gonna be wrap this means use whole line hold this horizontal row but if this children widths bigger than this parent line it's gonna move them in the other row like this so if i make them for example 200 pixels for this width there will be maybe three items here and next to it will be in another row nice so i can use some margin here it looks weird i will say margin 20 pixels ok it's much better it looks really nice but there is a problem here as you can see for this top pair it looks under this text let's fix it i will go to my top bar css and only thing i should do is giving here that index if i write here 999 for example it's going to be over everything inside this website like this so we finished our top bar header posts and this sidebar let's create single post when i click one of them we are gonna go to single post and we can read our blog post there so let's create this so let's create here another page actually i will close them and i'm going to create components folder here components and it will be header inside actually i will choose all of these components and move inside this components folder okay if i refresh this there will be an error here because our paths are different so i will go to home page pages and home and here i'm going to add here components folder let's copy this and here and here there will be still error let's check here that because we are using top bar inside app.js i should write here components also okay right now everything is perfect let's check here i will refresh okay perfect so i'm gonna create this single page i will close all of this and for pages new folder and i will write single and inside my jsx and css single jsx and single dot css let's create function rfc and my css file and let's give class name here it's going to be single again i will write something and let's go to app.js and right now it's not gonna be home page i will change this it's gonna be single let's see right now as you can see it's here so what i'm gonna add here is going to be our post and this side i'm going to add again this sidebar let's go to single js and inside it will be our post and after i will add here sidebar component okay i should add this manually import sidebar and from here it's not here components and sidebar okay like that so i'm gonna add here one more component let's create our single pulse component single post jsx oops typo post and css okay let's create our function here it's gonna be single post css and finally my class name okay right now i can add this component here i will say single post let's see okay perfect and again i will make here display flex and i'm gonna give flex 9 for this single post and this sidebar is also flex 3. let's go to single post and here i will copy this class name and here i will say flex is going to be 9. nothing has changed because we didn't make here display flex let's move this here and single container it's going to be display flex okay perfect so i can close right now this single page and inside this component that i'm gonna add here firstly i wanna add here a wrapper because i'm gonna give some padding i will say single post wrapper and inside let's create an image single post image and i'm gonna paste my image here and after this image it's gonna be a title h1 single post title let's write here lorem and i will delete this just like that let's see okay perfect so what else i can add here i can add here update and delete buttons so i will go to font airsome and here i will write edit so this is nice i will choose this let's copy and at the same time i will write here delayed so inside this h1 deck i can create my editing container i will say single post edit container oops dot or just edit and inside i will paste it and it's going to be one more this one let's copy this and paste let's see okay they are here later i'm gonna move them here let's give them first class name and it's gonna be let's say single post icon okay nice and after this title i'm gonna add my information my name and timestamp so let's create a container i will say single post info and inside it's gonna be my author name then it's gonna be author and my name but it's gonna be bold so i will write here bolt tag and name oops there's a typo here and here is going to be class name single post author so i will duplicate this it's going to be single post date and here i will delete them and one or echo let's see okay after that there will be description p tag and i will write lorem it's gonna generate random sentences but it's not enough maybe like that okay nice so let's go to css and change the styles i will write here first single post wrapper i will give padding 20 pixels but padding right will be zero i don't want a padding for right side padding right zero it's overflowing here that because our image is really big let's make this smaller i will say single post image width will be a hundred percent right now it's perfect and height will be 300 and i will give border radius it's gonna be just five pixels and object fit is gonna be cover perfect and for this title single pause title let's move this here firstly i'm gonna center this text align center and i will give some margin perfect i will copy my laura here this font family and font size let's say 20 pixels okay it's small maybe 28 but this italic version i'm not sure let's check here as you can see laura is italic i can change it i can go to google fonts actually i can write by manually here zero and one okay it's better writing yeah so let's take care of these icons i will close this and here i will say single post what was the name this container post edit and here i will say float right i'm gonna move them to right like this and i'm gonna make this a little bit smaller font size 16. okay perfect so i can separate them i will say single post icon and margin left or right doesn't matter let's say 10 and cursor will be pointer okay so i can change this colors to do that i can give different class names for this for example edit icon delete icon but i can do one more thing one more solution i will just choose this icon and i'm gonna use here first child so it's gonna choose our first icon here and this is our last child so what i will say color let's say teal oops deal and for last child i will say color tomato okay perfect so what about this info single post info this is our container remember i will say margin bottom 20 pixels and it's gonna be display flags so how i'm gonna separate them my name will be here and date will be here so if i write here justify content space between it's going to be separated perfect let's give form size 16 and color again this golden color ba 925 sorry 96 and 56 and i will change this font family i will copy this varela and paste here perfect let's come this description single post description i will say color 666 and font size will be maybe 18 let's see first nothing has changed that because we didn't give class name single post description let's check again okay so one more thing i will give line height it's going to be 25 okay right now i will do something different here i will give style for this first letter so to do that i will say single post description and here i will say first letter and let's say margin left 20 pixels it's going to be some space here perfect and i will change font size it's going to be 30 and font rate 600 oops what i did won't wait it's not pixels okay perfect it's much better so everything looks really nice so what else i can do add a right page by the way something is wrong with this phone tweet it should be lighter it is some mistake i think inside this index.html here i wrote this manually but i should delete this okay let's try again okay perfect so i can close this and when i click this right button we are going to go to right page let's create another page here oops i will say new folder right right.jsx right dot css so let's close here and create my function rfc and my style dot slash write dot css and here class name i'll say right and let's write here something this time if i go to app.js i will change here it's gonna be right let's see perfect so i will do something different here it's not going to be ordinary full page input or text area it's going to be something simple like medium.com so what i will do here i'm gonna create first a form i'll save form there will be no action class name let's say write form and inside this one i will create a container it's going to be write form group there will be two groups first one will be for title and second one will be for text area for description but for title we can also add some images so i will add here a button so what i will do i'm going to add an input it's not going to be text it's going to be file and here let's delete this name and for id i will say file input and after that again some input and this time it's gonna be text because it's a title i will give placeholder it's gonna be title let's save and see something like that but i don't wanna see this choose file button so how i can hide this i will come here and create here a label and for this html for area i'm going to write here my id this id and here i'm going to add my icon if i go to fontesome and right here add i will choose here for you once and this one let's copy and paste here okay so if i go to my application even if i click here it's going to open my folders as you can see so right now i can hide this button and this text to do that i will go to input you can give class name or also you can write here style directly i will say display no let's see also there is only this button here perfect so for this title i will say class name it's gonna be write input and i will say autofocus and it's gonna be true so whenever i refresh the page it's automatically focus on this title perfect so i'm gonna create another form group i will say write from group and this time i need just text area and i will delete them maybe just placeholder i will say tell your story and type will be text and class name is going to be right input also but additionally i will give another one i will say write text and finally i'm going to add a button here i will say button and class name will be write submit and i will say publish let's see okay let's go to css file for my container right i will say padding top 50. okay and for this form write form i'm not gonna write anything right now but later we are gonna update this it's gonna be form of course okay and for each group i will say write form group i will give some margin it's going to be margin left okay perfect i will center them display flags align item center and for the icon let's come here and give icon class name here i will say right icon and it's going to be with 25 i25 it's going to be circle 50 and i will give border it's gonna be one pixel and solid let's see okay so i can center this icon display flags line item center justify content center okay good but they are in different lines let's make this display flags and align item center perfect so i will change this icon size oh size 20 pixels and color will be a little bit grayish maybe softer like that no it's too much okay this is good i will say cursor pointer so we can click perfect so what about these inputs let's make them i will say write input font size will be 30 pixels and i don't want any border like this maybe some padding oops too many okay and i will say with 70 vw so it's going to end around here perfect so when i click this i don't want to see this outline so what i will do i will say write input and here focus when i focus this outline will be known if so let's arrange this text i will say write text and font size will be a little bit smaller like this perfect so let's make this button i will say right submit and i will say position absolute because i want to put this around here so if you are using absolute positioning the parents should be position relative otherwise if i say top 0 for example it's going to go to here not here so after this i will say top 20 let's see as you can see it's here not here and i will say right 50 perfect i will say text color will be white and background color will be teal and i will give padding let's get rid of these borders none and border edges it's going to be 10 pixels perfect i will say cursor pointer and font size maybe bigger okay nice so what i will do if i click here and choose any image for example this one i wanna see this here we are gonna make this after javascript operations but right now for design we can add here let's go to jsx file and before form i'm going to create image and inside i'm going to paste my link and let's give class name it's going to be right image something like that i will copy this and in the css file maybe not here after this right container i will say margin left again 150 and which will be not full size but 70 view w and height will be 250 and i will give border radius it's going to be 10 pixels and finally object width cover perfect if i don't write your cover it's going to look like this it looks really strange i will just say cover it's going to just crop this image and show it a little bit better okay so i can't scroll here it looks a little bit strange maybe i can right here in the text height 100 vh maybe maybe less but i think it's nice perfect so what else i can do we have login and register page and also our setting page when i click my profile picture here i will go to settings page and i can update my user information so let's do that let's open this up and here inside pages one more page actually three more but for now i'll just say settings settings jsx settings.css let's close them and here start again okay i will say rfc i will delete this and write my css file it's gonna be settings so let's go to app.js and change it again oops settings it can be singular or plural i will change this it's going to be settings okay let's change it and here okay let's see it's here so i'm gonna write here wrapper let's close it and here settings wrapper and after that i'm gonna add again sidebar okay let's copy this and here import it from components sidebar and sidebar so i will do the same thing here for settings container it's going to be display flags and for wrapper flags will be nine okay it didn't work it's gonna be settings okay nice so what i'm gonna add here it's gonna be update user title and then and here maybe delayed button and after that my profile picture my name email password something like that so what i will do inside this i will say settings title it's going to contain my main title and delay title so i will say span settings update title i will say update your account and one more it's gonna be delayed account so i will change it and here it's gonna be late so after these titles i'm gonna create a form and it's gonna be settings form i will delete this and here let's give a label there is no html4 it's going to be just profile picture and after that i'm going to create a container because first one will be our current image current profile picture and second one will be add new one button so here i will create a div it's going to be settings profile picture and inside image let's paste my image here and after that my icon i will say label again i'm gonna hide actual button to do that i will do the same thing file input and inside let's write here user and here i'll choose free and this one let's copy this i will change this class name and it's going to be settings profile picture icon okay so again i'm gonna create input but i will hide this i will say input it's gonna be file and id will be file input let's see okay it's here i will hide this style i will close and i will say display none okay perfect if i click this file input okay there is type again okay perfect here i will say label again it's going to be let's delete this username i will create input and it's going to be type text and placeholder let's say safak here and i will copy this and paste again and again it's going to be email type will be email gmail.com let's make this lowercase and here finally password there will be no placeholder and it's going to be password like this perfect and finally inside this form i'm going to create a button and it's going to be settings submit and i will say update so let's go to css file and here for wrapper i will give some padding like that for title remember it's our title container it's going to be display flex because update will be here and the light will be here so align item center and just why content is going to be space between so what about this update text what was the name let's check here settings update title i will say font size 30 and margin bottom 20 pixels and color it's gonna be light color like that so what about this smaller it's gonna be settings delay title and color will be red and font size let's say 12 and cursor pointer okay so for this one i'm going to make this flexbox and vertical settings form it's going to be display flex flex direction will be column like that and for this profile picture container settings profile picture again display flex as you can see our icon is here they are horizontal and align item center again i will center them margin top and margin bottom actually i can write here margin 10 pixels and zero from top and bottom ten right and left is zero okay so again i will write this profile picture but i will use image inside this container which will be 70 it will be 70. i will not make this circle but i will give some radius 20 pixels an object bit like that so this icon settings profile picture icon what was the name let's check first okay this is correct icon with 25 high 25 for the radius 50 i will give background color okay i can center this but before i will give text color it's gonna be just white display flags align item center and just y content center yeah so i will give space here margin f10 and i can click this so i will say cursor pointer perfect if i click i can choose any image here and i can change it okay so for this labels i will say settings form and it's going to be label move this here i will say font size 20 and margin top 20. okay so for inputs i will say settings form and input it's going to be color gray and i will say margin 10 pixels and 0 and height will be 30 pixels let's see something like that i don't want any border let's delete this order it's going to be gnome but i will give just bottom border i will say border bottom one pixel solid and light gray okay nice and for this button settings button it was button or submit let's check okay submit i will say with 150 how can i center this i will say align self center because it's only one item we are not centering inside items and i will say border none and border radius 10 pixels and font color will be white and background color deal okay i will give padding i have margin top 20 maybe like that cursor pointer okay nice so we've finished this settings page we need just register and login page so let's create login page pages log in here quickly log in jsx and css all right here rfc i will delete this and my css file login.css and here class name login and login so inside application i will write here login component let's see okay perfect so what i will do here i will delete this and here i'm going to create a form it's going to be login form let's select this action and inside form it's gonna be email password and button i will say label it's gonna be email and here input it's gonna be text and placeholder that's right here email or enter your email let's choose them and duplicate here it's going to be password this type will be password because we are going to hide this and enter your password okay and after this there will be a button i will say button and login button and it's going to be login and one more button after this one it's going to be register and class name will be login register button okay so let's see something like that i will go to my login css let's close them [Music] i will say login let's decide our height if i write here a hundred vh it's gonna overflow that because our top bar is 50 pixels so what i will do i will say height calculate it's not going to be 100 vh it's going to be 100 h minus 50 pixels so i will make this display flags like extraction column let's see first something like that i will say just try content center also okay so let's give background image here i will say background and url i will copy and paste this url okay as you can see it's repeating what i will do i will say background size it's gonna be cover okay nice but as you can see it's really sharp maybe i can give some linear gradient here before this url i will say linear gradient and here comma and inside this i will say rgba it's gonna be light and opacity will be 0.5 and i will copy this and paste again so let's see right now as you can see it's better right now so let's add here a title i forgot adding title here before this form i will say span login title span and here login i will copy this and here it's going to be font size 50. okay i will say login form i will give some margin margin top 20 pixels and again display flex flex direction column okay let's take care of these labels again login form is going to be label here and i will say margin top end button will be 10 and right and left will be zero okay so this inputs i will say login input is going to be 10 background color white and there will be no border none okay we didn't give i think this class name let's check yes we didn't for this also class name login input let's check okay perfect and for the button i will say login button margin top 20 cursor pointer and background color it's going to be light coral let's see okay we can delete this border and font color will be white like this maybe for the radius okay but as you can see they are really huge what's wrong here legs ah i forgot allan items okay perfect but i should give some padding for this login i think paddington okay nice so what about this one i will write here login register button it's going to be position absolute that because i'm going to move this around here i will say top 60 and write 20. okay so background color let's say teal and cursor pointer again let's delete this border okay again painting tan and color white nice i can give border radius i will say port radius 10 pixels okay right now when i click this we are going to go to register page let's create this also actually i can copy this and paste and it's going to be register register css and register jsx okay let's change them i will choose all of this and it's gonna be register and this will be capital and this and here will be login and i will change this okay so for this css again i will choose them and it's gonna be register and for this last button register login button but this time it's going to be light coral and this one will be till let's change this it's going be register page okay let's try okay perfect but this time i'm gonna add additional information let's come here and i will copy this and this time it's going to be username texts enter your username okay nice and i can change this background here i will delete this and instead of this image i will paste another one perfect so we've finished our whole pages so what about these links when i click this i'm not going anywhere or here or here so let's take care of them to do that i'm going to add here a library i'm going to open new terminal here and here i will say yarn add react router okay it's ready i can close them so how i'm gonna use them as you can see we should import this elements from react rotor dome i will copy and paste here firstly we should cover everything inside this app.js with router component let's do this i don't need this fragment anymore i will write here router okay top bar will be in every pages so i'm not gonna touch here and after that let's see as you can see we can switch between all these components to do that we are gonna cover them with switch and after that we are gonna root for every components for every pages i will say switch i will open tag and switch let's delete this register for now and here i'm gonna use this route let's paste here right now i can use my home page so what's my path here it's going to be just slash i will save and here my application as you can see it's slash and it's coming to home page so let's do the same thing for others if i write here for register for example and register page if i do that it's not going to work properly let's write here register as you can see it's home page again that because it looks at this slash first and it decides okay this is home page but actually it's not there is more here so what i should do here i should write here just exact as you can see we are in register page right now so let's do the same thing for others for login login something like that i will copy this and for right i will call my right page and for settings it's going to be settings page and lastly i'm gonna use post but one difference i can indicate here some parameters if i write here slash and column and i will say here post id and i'm gonna call my single page so let's write here post and one two three for example it's going to single page if i change this as you can see it's still here but after this class we are gonna decide which post id we are reading here and after that we are gonna be fetching this exact data according to this id perfect so what can we do here more i will create here as pseudo user i will say const user and it's going to be false we are doing design right now we don't have any user right now after login it's just for a test don't worry about this it means there is no logged in user so i will do some conditions here if there is a user here does it make sense to go register page again for example you are logged in and when you write here register you are going to register page does it make sense i don't think so because we are already logged in we shouldn't register anymore so what i will do here i will cover this with caller brackets and here i will say if there is a user don't go to register page go to home page if there is no you can go to register so let's test i can go right now if i make this true which means we are logged in as you can see even if i write here register i'm going to home page awesome so i will do the same thing for login if there is a user we shouldn't go there so what about this right and settings i will do total opposite thing i will delete this and here and right now if there is a user we can go to right page because we are allowed to write something so right now i will write here right if there is no user it's gonna go to register page for example if i write here right as you can see i can go here that's because we are locked in if it's false as you can see have some so it's going to be same thing for settings if there is a user it can go to settings page if there is no it's going to be registered page and for this single page we don't need any condition because everyone can see this page so awesome so we are done with these routers what about these links let's go to top bar and again i'm going to create sudo user here const user let's say true and here they're gonna be link i will copy this and here but i will write here just link let's close this and here as you can see it's importing this from react router dom so if i write here home and my url here is going to be just slash which means home page let's try as you can see it's like a anchor tag if i click i'm going to home page but as you can see it has some default style here but i don't want to use this if i write here style and if i say text decoration it's going to be none and i don't want this blue color if i say color and it's gonna inherit from its parents which is top list item here and i will write here inherit now so but we are gonna use this link around everywhere here for this post these categories login and register pages so i don't wanna write this style here i will just delete this and if i go to index.html here i will create a style and here i will write here dot link this class name i will say text decoration none and color will be inherit okay so it's our global class name right now so i can use it everywhere if i say class name link as you can see it's totally same thing let's do the same thing for others i will copy this about contact and write so right now i can make here some condition i will say if there is a user you can write here log out if there is no user let's make this false as you can see it's disappeared perfect so let's change this it's going to be right and here also if there is no user let's make this false we shouldn't see this user image here so what i will do i will come here and say if there is a user use this image i will move this here so if there is no user i'm gonna write here some links i will paste and this one will be login and second one will be register as i said before we can't use multiple components we should write here fragments and here it's going to be login and register let's see okay but they look strange because we didn't use this list here so let's do this actually we don't need this fragments anymore i will say ul and class name will be same class name what was the name top list item and for these links it's going to be ally and class name top list item sorry it's going to be list it's going to be item and i'm gonna move this and again i will paste this and here register and register so i don't need this anymore okay perfect when i click i'm going to login page register write oops i can code right because in app.js our user is false okay perfect and for login register page also here i will say link it's gonna be register i should import this and two is gonna be register i will copy this and for register page i will delete and here this time it's going to be login and here login and my link i will import okay oops okay i didn't save it as you can see i didn't give any class name here it's gonna be link let's copy this for register page okay perfect i will click as you can see it works perfect okay so that's all i think and when you click them you can add your link and go to single post and it can be homework for you i'm really tired for these categories for example when you click them you can go to posts but this time you can add here some parameter maybe and say cat id music maybe something like that or when you click username inside this single post you can write maybe username john something like that i'm not gonna add them right now because we are gonna be using node.js api in the next lesson so we are gonna fetch all these data but as i said it can be homework for you you can add these links so what else there is nothing more writing maybe you can add about an contact page it's not important for now so that's all so we finished this project i hope you enjoyed it if you learned something please like the video and if you want to see some more you can subscribe the channel and by the way i would be appreciated if you join our facebook group it's new you can ask your questions there or get inspiration from another users or from me so that's all i hope i will see you in the next video goodbye you

Channel: Lama Dev

Views: 106,661

Keywords: react blog, react blog app, react website, react blog website, react design, react ui, react website tutorial, react app, react project, react beginner, react tutorial, react web design, react website design, react js, react, lama dev, react for beginners, react full course, blog application, react from scratch, learn react js, how to create react website, react realworld project, react hooks, react website development, react router dom

Id: tlTdbc5byAs

Length: 105min 34sec (6334 seconds)

Published: Wed May 12 2021