Tailwind CSS Crash Course with React - Build a Responsive Landing Page (Parallax Effect)

tailwind css is a css framework that allows you to style your components without writing a single line of css instead you apply predefined classes to html elements directly and through variations in these class names you're able to control the styling that you're applying to these elements i also really like the way that tailwind css handles responsive design there is a set of predefined break points but tailwind is actually mobile first so the classes that you apply to your elements will actually affect and apply to mobile and then as you scale up to larger devices like tablets and desktop you can prefix additional classes on those elements with the breakpoint that you're targeting and then as you hit those breakpoints the classes that are prefixed will actually override those initial base styles tailwind also uses responsive css measurement units i'm talking about rems and that means that it is really good for accessibility in this tutorial we're going to be using tailwind css with react to build a responsive landing page let's take a quick look at the application we'll be working on i am using create react app but in the source directory i've deleted most of the files that it created the only files that i've kept is app.js which is a simple function that just returns hello world and then index.js which is the root of our application and again all i'm doing here is rendering the app component and i i've also downloaded some assets that we'll use in our landing page i have two images and a logo before we can start working with tailwind css we have to install it they've created a really easy guide on their website which is tailwindcss.com you can either click a link i'll add into the description of this video or you can search for it yourself but once you come to this website you just have to go ahead and click on get started go to the documentation and then select create react app which is the implementation we'll be using so for us to configure tailwind css with create react app all we have to do is follow these instructions they're very simple and easy to follow so let's go ahead and do it so the first thing we need to do is just install tailwind via npm so these are the dependencies that we need so i'm going to copy that come back over to vs code i'm just going to open up a new terminal window and i'm going to paste in the command that they've provided now it's going to take a few minutes for that to install the second step is for us to install craco which is an alternative to react scripts and we're going to use that and update our mpm scripts here but the reason we need to do that is because we need to override our post css configuration which is of of course a webpack plug-in and this and this is just to do with how we build our application so all we need to do is just copy this command come back over to vs code we're just going to paste that command and install craco again whilst that's running in the background i'm going to come back over to the documentation and then we just need to update our mpm scripts so i'm just going to copy these new commands and again we're just replacing the start build and test scripts so let's come back over to vs code so those have both finished installing we need to open up our package.json file i'll close my terminal window and let's come down to our npm scripts so we want to replace the first three scripts which is for start build and test and we're just going to replace um those with the ones that we've taken from the documentation so it's literally just a copy and paste again let's come back over to the documentation and then we need to create our configuration file for craco so again we're going to call it craco.config.js and that needs to be created in the root directory of our project and within that file we just have to copy this code so i'm going to take that and just copy and paste it into the file i've created and then we can come back over to the documentation and we need to create we need to run this command within our terminal so again i'm going to launch a new terminal window i'm going to paste in that command and that's going to initialize tailwind css within our project so it's just created a configuration file for tail for tailwind and then i can come back over to the documentation and i just have to update the files that we're going to purge so i'm going to copy this line and i'm going to override the default value which is an empty array with that i've taken from the documentation and again this is just specific to create react app and the files and the way that this project is created so we can save those changes and again come back over to the documentation and we just have a single step left so we have to create an index.css file within our source directory and import the core components of the tailwind css library so these are those default styles that the library is built on so within our source folder i'm going to create a new file we're gonna call this index.css and then within that we're gonna we're gonna paste in those three imports and we're gonna save the file and again in the documentation all we have to do is import that into the root of our application which is index.js so let's come back over to index.js and let's just add that import and if you followed all of those steps correctly then you will have configured tailwind css with create react app and your application now before we start building out the application writing our components it's really important that we consider the project architecture so what i'm going to do is i'm going to install another dependency which is react router dom because we're going to be using this not only to set up our routes we're also going to be using this to handle our page layouts and our page components so i'm going to go ahead and install react router dom has another npm dependency once we've installed that i'm going to go ahead and close that terminal window and i'm going to come back into the root of my application which is index.js and i'm going to import the browser router so let's import that from react router dom so again we need to import the browser router and then i'm just going to wrap my application with the browser router so once i've done that i can save those changes and come back into app.js and at the moment what we're doing is we are just returning the simple div with hello world i'm going to delete that and i'm going to import two more things at the top of the file again that's going to be from react router dom and that's going to be this switch component and the route component once i've done that what i can do is i can go ahead and use those components so i'm going to have my switch component and then within that i'm going to have each of my individual routes now of course in this tutorial we're only building a single landing page so i'm going to make that my home page so the path here is just going to be forward slash and then within this route is where we're going to render our layout and page components so what i'm going to do is i'm going to extract the common components from this page so that includes the header the footer and even this hero banner and i'm going to put that into a layout and then for the content of the page i'm going to pass in a page component and the page component is only going to contain the content for this page so in this case it's these three cards here and of course all of this is going to be completely responsive as you can see on mobile we have a single column tablet we have a two column and on desktop we have a three column layout but we're going to be managing this with layout components and page components so within the source directory i'm going to create a new file we're going to put this inside of layouts we're going to have a landing page and then index.js so all we need to do is just import react from react it's going to be a function it's going to be a functional component so we'll just call this our landing page layout right we'll just store any props passed in for now in other props and let's just return for now an empty div and let's not forget to do our default export here of our landing page layout okay so what we can then do is come back over to app.js into our route and we're just going to import that layout all right so this will be where we import our layouts so let's just import our landing page uh layout we'll import that from layouts landing page and then we will render that layout here within our route and as i said before we're going to pass in a page component to this layout which we're going to use to render the content of this page so what i'm also going to do is within my source folder i'm going to create another new file this one is going to be inside of a pages directory and we're going to call this our home page and we'll create index.js inside of that and again this is just going to be a simple functional component we'll just import react from react we'll create that component so it's going to be a simple function so we'll just say constant home page again we'll just get any props passed in and store that in other props and we'll have a return statement here we'll just return a simple div at this time and let's not forget to do our default export of home page and then on again app.js we'll have another section here at the top where we import our page components and i'm just going to import that home page so we'll import that from pages home page and we're going to pass that into our our layout component so this is how we're going to structure our landing page we're just going to have our layout and then our page component passed in as a as a child to that layout component the first component that we want to build is our header component this white block we have links on the far right side of our header we have a logo on the far left side of it it's also completely responsive so if i resize the browser you'll see that it is a responsive navigation so to build that let's come back over to our source directory let's create our components folder and inside of that we're going to create our header and then index.js inside of that so at the top of the file we're going to import react from react and then we're going to create our function so we'll say header again we're going to take any props that are passed into the component and then we're going to have a simple return statement here where we return our header and we're going to have our default export of our header so i need to first of all render the header component so i'm going to come back over to my layout so this is my landing page layout i'm going to i'm going to import my header so import that from the components folder so we'll import the header and then we'll just render for now we'll just render our header component here within our layout so now if i come back over to the header component i can import some of those assets so i mentioned at the start of the tutorial that i had created some assets here some images and a logo i actually have the tailwind css logo i'm going to first of all i'm going to import my logo from my assets folder so my assets slash my logo and then what i'm going to do is i'm going to render that out i'm going to put that in a div so i'm going to have an image here and render the logo and i'm also just going to go ahead and create a navigation so i'm going to put that in nav with an unordered list we're going to have some list items before i can create a link we're using react router dom so i need to import the link component so we'll import react browser dom we're going to create our links so what i can do is just render some links here i'm just going to say page and i'll duplicate this three times all right so now that we actually have some content on the page let's actually take a look at tailwind css and figure out how to apply some of that styling so the first thing i'm going to talk about is background colors because i think that's the most obvious thing that i can show you so i've just come to tailwind css and i've just searched for the prop the css property that i want to apply to the element so in this case that's a background color and as you can see they provide a huge list of different classes with variations so as you can see 300 is a different shade of indigo than 400 and 500 etc and it's the same with every color in this list so i have a huge variety of colors here that i can apply to any element on the page so for example if i wanted a dark red i could take this class and then i could come back over to vs code enter my header and i can apply that class and then you'll see that that color is immediately applied to that element now something else that's really important for you to understand is that it is tailwind css is completely responsive out the box and in fact it uses responsive measurement units in in this case it uses percentages and rams or root m's this is really good for things like accessibility because it allows the user to dictate how they want to use your website so as i said i've already got this example of what we'll be building in this tutorial series and because we are using responsive measurement units we're using rems through tailwind css let me show you what happens when i resize the page so i'm going to change the default font size on the browser i'm going to change it to very large and you're going to see that everything is automatically resized on the page everything becomes much larger so anyone who might struggle to use your website can change that default setting on the browser and they'll be able to see and use your website much more easily the same way i can scale it down so if i was to change the default font size on the browser to very small then again everything on the site automatically resizes i don't have to add any media queries i don't have to change a single line of css it happens for me for free and this is why it's very important for you to use responsive measurement units like rams in your projects because it helps with accessibility and that will help you with not only your users but it will also help you with things like search engine optimization because one of the things that google will rank you for is accessibility so that's very important that you use responsive measurement units and that's something that you're going to get for free from tailwind now whilst that might make sense to you you might be looking at these numbers and really just wondering what they mean so i'm going to show you how you can calculate rams so let's just take our calculator here and let me show you 20 rams how you calculate that as a pixel value so all i have to do is take 20 rams and then times that by the default browser font size which is 16 pixels and that tells me that 20 rams is the equivalent of 320 pixels i can also do that in reverse so if i wanted to find out what for example uh 1280 pixels is in rems i could divide that by 16 pixels and that will tell me that it is the equivalent of 80 rems so something that i want to do here is i want to set the default content width on my page i want to set that to 1280 pixels right and i want to center that on the page because if i look at this currently it's just edge to edge it's full width and that's not what i want i want to center my content in the middle of the page so to do that i want to set that to be 1280 pixels the equivalent as i already showed you is 80 rams so i'm going to take the class that corresponds with that width and i'm going to come back over to vs code and i'm going to add a wrapper around my logo and my navigation and i'm going to apply that class name now i also want to center my content and i can tell you right now that the to do that i just have to apply mx auto that is the uh class here so uh to center so this will set the margin uh on the x axis which is right and left to auto for both so i can add that class and save it and then i can come back over to the browser and you'll see that it is set that default content max width of 1280 pixels and it has centered it on the page now something else that i want to do here is i want to change that background color to white so i'll just go ahead and do that and then you can see that this is starting to look a lot more like the header that i showed you we'll be working on from our complete version it's important that you understand how responsive design works with tailwind css so everything that you do in tailwind is mobile first the classes that you apply to your elements will apply to mobile and then if you want to override those classes on larger devices like desktop or tablet you'll have to prefix additional classes on that element with a breakpoint now these are the break points that tailwind provides out of the box and these are the corresponding widths in pixel values that you can see here for each of those breakpoints and we will be using this in this tutorial so if this doesn't make sense right now then just bear with me but let's now head back over to vs code and let's start actually styling out our header so the first thing that i want to do is i want to make my header relative so i'll just apply the relative class here now what i want to do here is i want to have my image on the far left my navigation on the far right so to do that i'm going to use flex i'm going to set this to be display flex on the wrapper and i'm also going to set i'm going to justify the content using between that's going to set them the the logo and the navigation on the far left and right and then i'm centering them vertically using items center then i want to style my logo so to do that the first thing i need to do is make my logo 100 width so to do that i can just set w dash full that's going to apply a 100 width to that image and then i need to apply a width to the logo if i come back over here to tailwind i'll just search for width and if i actually look here what i want is actually 3.5 rem which has a class of w-14 so if i come back over to vs code i can just paste in that width and that will apply my chosen width to that to that element and then i can style up my navigation so what i actually need to do as i said is style this mobile first and on mobile i want this to actually be a burger menu which means that i will only conditionally render the navigation based on if the user has clicked on some kind of icon or text in this case we're going to have some text so i'm going to have a div here that just says menu if someone clicks on this it will toggle the navigation on mobile so to toggle that what we'll need to do is import the use state hook from react and at the top of the function we need to use that so we'll just set this to be active and we'll create our setter here so we'll say set active then we'll call the use state hook and the default value of course will be false and then we need to then we need to create our on click handler so we'll say constant on click equals it's going to be a function that just calls our setter and toggles the value of active and we can pass that of course on the on click event to our our div here now of course that would be useless unless we're toggling a class on our nav to actually hide and show the navigation so i'm going to use backticks here so that what i can apply here is based on if active is false then we want to apply the hidden class so if we actually look at this now in the browser you'll see that we are by default we're hiding the navigation if i toggle menu if i click it we show the navigation but of course as you can see we don't want it to be here on the far right we want it to sit underneath on mobile so let's come back over to vs code and we'll apply some additional classes on this nav element to position it underneath our mobile so firstly we want to set this to be absolute then we need to use display flex we want to set the flex direction to be column so we'll say flex call we want to set the background color to be to be white so we'll just say bg white um we want to set the position from the top to be the full width of the header of course this is absolute so it won't be the height of the navigation itself won't be a factor but we'll say top dash full and then we want to make this full width with 100 width so we'll just say w dash full and we want to set this on to be um sitting on the left side of the window so we'll just say left zero to give it a left margin of zero and then we want to always make sure this sits on top of all the content when it is open so we'll give it a z-index of 20. so if i now save this we're ready to move on from that particular element and what we can actually start to style is our list items so for our list items at least initially what we want to set here is the list style type we'll just say list list none and then for our for our links we need to apply some additional classes here as well so again we want this to be full width so again we'll use flex and we'll set w w full which is going to give it a 100 width and then we want to handle the font size so let's come back over here to tailwind and let's do a search for [Music] font size and as you can see here there is a font there is a class here called text base which is equal to one ram which is basically the equivalent of saying 16 pixels because it's basically one rem is um the exact size the default font size of the browser which we know is of course 16 pixels so we'll say that the font size should be text base we want to set the font to be upper case and we want to set a hover state which we're going to set to be basically a dark red so let's just say text red and it's going to be a shade of 600 which is slightly darker and then we want to make sure that we use a cursor of pointer so we'll just say we're going to say cursor dash pointer and then this is where we want to apply some padding so to do this what we'll do is we want some padding on the top first of all so we'll say pt dash 2.5 and we want padding on the right and left which is the x-axis so we'll say px-2.5 as well so let's save that and then what i'm going to do is i'm going to copy this entire list item and i'm just going to overwrite these two other list items underneath let's save those changes and we can view this again in the browser something else that we need to do is add some padding to our header in general because as you can see it's touching the sides so let's come back over to vs code and whereas before to apply padding on the right and left we use the x-axis if we just wanted to apply it all the way around the element what we can do is again just on our wrapper here we just prefix with p alone so we just say p dash 2.5 and if i do that i come back over you'll see that's adding 10 pixels of padding all the way around our header and now if i toggle the nav you'll see that this looks much more neat and tidy so we can start to now think about desktop so if i was to change the layout of the console you'll see that we still have our mobile navigation on desktop so what i want to do is i want to take the break point so again if i come over and look at the responsive design we have this mid break point which is seven six eight so after seven six eight after this break point we can override the styles to make this sit make our navigation sit in line right so to do that let's come back over to the code and let's come back down to our nav wrapper here and i need to change some of the classes that have been applied so the first thing that i want to do is i want to make sure that it's not absolute so we'll we'll prefix this with the break point of md and it's very important you don't apply any spaces here and we're going to set that to be position static we then want to set the the width instead of to from being 100 we want to make it auto and then we need to override the flex direction to be row so we'll say flex so again we'll say md flex dash row and then we also need some margin between the items so on each of these list items i am going to set a right margin so margin right dash five and then i'm going to copy that into each of these other list items the next thing that we need to do is we need to make sure that regardless if this hidden class is applied or not right that we're always displaying this on larger devices so again we're going to prefix with that breakpoint and we're just going to say flex and that will override this hidden class on larger devices regardless if it's applied or not because we've applied that here using this breakpoint and then finally we need to apply some classes to our toggle button so that [Music] so that this only shows um on mobile so again what we're going to do is on larger devices we're going to hide it so we'll just give it the hidden class but we're going to set the font to be uppercase okay so let's view this in the browser and as you can see this is still not working quite right for us these are not inline so let's come back over to vs code and it's because we have this additional wrapper here so what i'm actually going to do is i'm just going to set this class to the unordered list here and then let's view that again in the browser and that looks that looks correct so as you can see we've now managed to sell our header so if i now resize this we have our mobile navigation and also on desktop we have a full width inline version of our navigation the next thing that we want to work on is our hero this is where we're going to have our background image and our heading our page heading so we're going to be building this in our layout component now before we can actually do that i just want to inspect the page and what you're going to see is that unfortunately we can't make our tailwind css components full the full height of the the page because the html and the body is not 100 as you can see it's kind of collapsing on itself so we do need to make one change to our html file this is where again we render our application and on the html we need to set a custom style tag here and we need to set the height to be 100 we need to add that here and we also need to add it to the body and we also need to add it to the root which is where we render our application okay let's save that and come back over and if we come back now into the browser and i inspect this again i reload the page you're going to see that the body is now the full height of the screen so when we actually render our application we'll be able to manage that with tailwind css and that's going to be important because the layout of our page is this banner image has to take up the full height of the screen now to do that i can search tailwind for min height and i have these three options i have either zero pixels i have a hundred percent or a hundred vertical height now we want this class which is going to apply 100 percent to my wrapper so what i'm going to do is come back over to vs code and i'm going to head over to my landing page component and again i'm going to apply that class here which is going to give the wrapper 100 height i then want to add a gray background color so i'm going to use uh bg dash gray dash 100 which again is a shade of gray that i want to apply and then i'm going to wrap my header in another div with another wrapper and i'm going to apply some additional classes here and i actually want this to be 100 vertical height so if i come back over now again to tailwind and i just search for height so not min height but height h dash screen is 100 vertical height which is what i want to apply here so i'm going to grab that class as well and i'm going to apply that here to the wrapper and then i also want to set the display here so i want this to be flex and i want this to be a flex directional flex call right so those are the classes for those wrappers then i'm going to render my header i don't really have to do anything with that but then i want to render my banner image so this is going to be the div tag that contains my banner image so the first thing i need to do is i need to import my hero image which i have here in my assets so i need to import this image here into the component again you can import any image that you might want to use yourself that's going to come from assets assets slash hero.jpg and then on the div tag itself i'm going to style this inline so i'm going to set the style tag and then we're going to set the the background image and we're just going to set that image so it's going to be url and then we'll use string interpolation to set the background image to be my hero image and then finally we just need to apply some classes to our um our hero here so the first thing that i want to set is that it should be relative and then i need to set this to be display flex i want the items to be centered so this is going to be vertically aligning basically my heading that i'm going to have inside eventually so we'll set items to center again we want to center this horizontally as well so we'll just say justify center and then we also want this to be the full height of the parent so i'm going to set the height to full which is going to give it a 100 height and then we want to apply some some css properties to handle the sizing and positioning of this background image so what i'm going to set here is that the background size should be set to cover we want to center it so we'll say bg center we want to set it to be fixed which is going to give it that that parallax effect so we'll say bg fixed and then also we want to make sure that the image doesn't repeat so we'll just say bg no repeat we'll save that and then finally what i also want to do here is i want to have i want to have a heading right so this is going to be my page heading my h1 and i'm going to get that from props i'm going to pass that into the component so i'm going to have this is my heading text which is going to be this prop we really should set a default value so down here we'll set our default props of our heading which is just going to be a diff an empty string for now right so that's our heading we've already destructured it from our props so if this exists what we'll do right is we will render our heading text and then what we'll be able to do is again apply some custom class names here to style this and again i want to set this to be position relative so i'm going to set the relative clause i want to set padding on the right and left axis so again we'll say px dash 2.5 i want the text color to be white so i'm going to set the text white class i want it to be um upper case text so i'll give it the upper upper case class i want this to sit above other content so i'm going to give it a z index of 10 and then for font size and this is very important i'm going to set text a text size for mobile again this is mobile first to be text for excel right i want to center it so i'll use text center and then on desktop i want to have a larger font size so i'm going to set this to to a text size of 6xl right so again these are classes that i've memorized if i show you them here if i if i search here for text sorry font size what you're going to see here is that we have 2.25 ram here and these are the these are the two classes that i've applied here to my heading so again if we come now over to our browser i'm getting an error i'm just going to check y ah so okay so i've tried to set the default props here but instead of giving it the function name of the function i've given it the prop name so i'll just save that change come back over to the browser let's just reload and that should work so what you're seeing here now is i've got my hero image it's taken up the full height of the screen just as i intended but we're not seeing that heading text because this is passed in as a prop and of course we're not passing that in yet so let's come back over to app.js which is where we render our homepage component and our layout component so this is in our layout so we need to pass in our heading i'm just going to pass in tailwind css right but you can pass in anything that you like and then we just come back over to the browser and you'll see that this font is not really positioned how we want it to be on desktop it should be vertically and horizontally aligned so we need to just check those classes that we applied on our wrapper here and it's just a spelling error so obviously this is um align items and i wanted to align to the center so this should just be an n so that was just a spelling error but the problem is of course that we can't really see the text right over the image so usually what people what we do is we apply a another overlay a dark overlay that will just sit between the image and the text and just allow you to read it a little bit more so we give it an opacity so it's see-through but it has a dark layer that sits between so to do that underneath the h1 i'm going to just add a div right it's not going to have anything in the div we're just going to apply some additional classes here so these classes will just we're going to set this to be have a z index of zero right we're going to set it to be absolute we want the um we want it to sit on the very top of the page we want as well we want it to sit on the far left right and then we want to give it a 100 width so we'll just say the height should be full which is going to give it 100 height and the width should be full which is going to give it a 100 percent width and then we'll set the background color to be black and we want to set the opacity to be about 40 percent so when i set those colossus what you'll see here is now we have this dark overlay that sits over the image but under the text so you can just read the text a little bit more clearly and then finally we come back over to our header what we want to do is underneath underneath our our banner right our banner wrapper we're going to render some children that is going to be where we render our page component so we're going to have another div here and we're just going to grab other props dot children right so this is again we're using the spread operator to pass in all the other props that we haven't destructured and then we're just going to use that to render uh to render our children and then finally we need to add some additional classes there right so the first thing we want to do is we want to make sure it's 100 width right so we'll just say uh w dash full gives it 100 width but we want to apply the same max width that we applied within our header right so we set a max width if you remember here with this class of 1280 pixels and we want to apply that same that's our content width we want to apply that same width to our content section here but what we also obviously need to do here is again center it so we'll say mx which is margin on the x-axis x-axis is right and left of auto to center that content now obviously that's going to collapse at the moment because there's nothing in our page component so there's not anything there to render but before we actually get to the content we need to work on our footer component so that's the next thing that i'm going to create so i'm going to come into my source directory in my components folder i'm going to create a new file we're going to call this our footer and then we're going to create index.js inside of that this is going to be our footer component it's a very simple component we just need to import react from react it's just going to be a functional component of course so it's going to be a function right it's going to return a html footer and we can again we can just destructure our props so at the moment we'll just destructure and we'll just use the spread operator to get our other props and you need to remember of course to have our default export of our footer and again this is going to be a very simple component it's not going to take us very long to write out this component all we need to do here is set the background color to white we are going to [Music] then style this exactly how we styled it in our example here so as you can see we just have a white footer it's got this copyright message here which i'm going to copy and we have some padding that sits on the top and bottom right so we want to replicate that in our template here so let's come back over to our footer component and we need to set again um some we're going to put in some text here and just inside of a span with just our copyright message and again we want to set the font size here so again the font size as i mentioned before we're going to use this text base class it's going to apply six 16 pixels which is one rem so it's equal to exactly the default font size on the browser and then on this div here we want to apply two things we want to apply our class which gives it our our um our max width right our content width so we can actually take these this exact these classes here just apply that here so what this is going to do is it's going to set this to be 100 width but it's going to have a max width of our content width which is 1280 pixels and it's going to center it right and left and then all we need to do is add in some padding um so i'm going to add a padding on the uh right and left axis using the px so that targets the x-axis of 2.5 and then on the top and bottom if i just search for uh the padding classes um so for top and bottom we're probably going to target the y-axis so it'll be py and then i'm going to make it about 3.5 ram so again i'm going to take this class here i'm just going to copy it come back over to vs code and just paste in that class right so this is adding padding on the top and bottom because it's using the y-axis and this is adding it on the left and right using the x-axis so then all we need to do is come back over to our landing page and import our feature component we'll import that from our components folder so that's our that's our footer and then we'll just render that footer component at the bottom here we can save that come back over to the browser view our page and there you can see we now have our footer and this is completely responsive so if i resize this down you'll see that we have our our text there which looks good and again coming back up to desktop that looks good as well so the last thing that we have to do if we look at our final version here is work on our page content which is these three cards uh and these items here so on desktop we have a we have one row with three columns tablet we have two columns and mobile we have a single full width column going down so we want to replicate that okay so let's come back over to our text editor let's come back over to our page component here and what we want to do is actually we want to return another component right so in our components folder we're going to create another component called cards so we're going to create cards and then inside of that we'll have index.js and inside of this we'll just have an import statement for reacts we'll say react from from react and we're going to create our function so we'll just say cons cards equals it's just going to be a function we're going to return for now we'll just return a div we're going to have a default export here for cards and then also of course we want to destructure here we'll just destructure our our other props and then what i want to do is i want to actually render this out in our page component so in our page component over here i'm going to import the cards component so we'll import that from again our components folder so in components we have cards it's actually called a card it should be cards so again we're going to update our imports so again that imports now cards and we just want to return that in our page component so i already mentioned earlier in the tutorial that i have this image here that i'm going to be using within my cards so in my cart component i'm going to also import that [Music] so we'll just say it's a photo and we're going to import that again from our assets um it's going to be landscape jpg so the first thing that we want to do is we want to um create those individual cards so i'm going to create just one that we can duplicate um two more times because the values and the markup is going to be the same so inside of these cards we're going to have our image so what i'm going to do is i'm also going to create another div here with an image and then the source so the src here is just going to be the image that we imported so it's the photo um and we're going to render that out in just inside of a div then what we're going to do is we're going to create a details section within this card so i'm going to have another div here which is going to wrap an unordered list and we're going to have individual list items within that right and basically we're just going to have a title and description so within the first list item we're going to have again we're going to have a span and we will just say title for now uh that could be anything and then underneath that we'll have another one and this will just be something like i don't know description for example um and then if we actually view this again in the browser we come over to what we're working on you'll see what we've kind of created so at the moment it's just full width it is centered because of the layout that we're using um but we also have like the title and description that sits underneath it right so we're kind of ready to to get working on these so what we can then do is just duplicate these cards right so i'm going to duplicate this two more times right but just so that it's easier to work on i'm going to collapse these other two we're only going to be working on this one individual one but the reason that i've duplicated it is because that means we now have three which sit in a row and i can start working on the styling right so the first thing i'm going to do uh here is i'm going to apply some classes to the wrapper i want this to be display flex i want the flex direction to be flex row i want to wrap it set the flex wrap so here we'll set flex wrap we want to add some padding on the y-axis that's top and bottom so again we're going to use py14 and again i want to justify the content so i'm going to say justify center and as a result what i'm going to be able to do because i'm now using flex in flex row is i'm going to be able to set a width on the children so that i can create my columns so in each one of these cards i'm going to create some additional styling here so what i'm going to do is i'm going to apply again because this is mobile first on mobile i want the width to be 100 so i'll apply a width of full which means on mobile it's going to be 100 and then i need to apply some additional classes for the various break points so for example on tablet which i'm going to target using the large break point i'm going to add a different width to the width i'll eventually apply to extra-large which is going to be desktop and then finally we need to add some other classes to do with padding so for padding i'm going to add a pic pixel uh i'm going to add padding on the x the right and left of 2.5 and i'm going to add a margin on the bottom of 5 right so that's the the margin taken care of but i still need to apply a width on tablet and desktop so let's come back over to tailwind here and let's search for width and what i want to apply here if i come down is a percentage width as i said so what i want to apply first of all is going to be for uh tablet which is going to be 50 and 50 is going to give me a two column layout on tablet so i'm going to take that class and i'm going to come back over to vs code and on the large breakpoint i'm going to add that class let's come back over to tailwind and i then want 33 which is going to give me um a three column layout so i'm going to take this class come back over to vs code and on desktop so the l the xl which is extra large breakpoint we're going to apply that class now before i test this in the browser we need to actually update the styling for these other elements so the wrapper that we are using to wrap our unordered list we need to add some padding again all the way around so i'm just going to set p dash 2.5 and then for the individual list items i want to make sure that i'm removing the list style type so again the class name will be list dash none we're going to set that on both of these list items so again the class name here will be list dash none and then finally for the span that wraps our title we'll add a class name here of font-bold and also we'll set the font size here using text base again we're going to set the span that wraps the description here we're just going to set the font size here to be text base and then what we'll be able to do is just grab the styling for this entire list item and because we've applied all the classes to this to this card i'm going to delete these other two that we have here that we've also collapsed so i'm just going to delete these um and i'm also going to paste them again because we still need them um and then the one thing that i have forgotten is i do need to apply a full width class here on the image so i'll just say w full to the image and that's just going to give it a width of 100 so we'll do that for each of our cards let's save that and come back over to the browser and that is looking much better the only thing that i've noticed is that we forgot to add a white background for each of these cards so what i'm also going to do is come back over to vs code and i'm going to wrap the image and the unordered list so both of those in another div i'll paste them back and i'm just going to add a class here of bg dash white and we're going to do that for each of our cards so we need to take the image and the wrapper for our list we need to give it another div we're going to add another class here of bg dash white and again we'll do that as well for the last card here so we'll just again have a div and the wrapper needs to have this class that gives it a white background so bd bg dash white let's come back over to the browser you'll see that looks a lot better and there you go so we've now pretty much built the page let's test this out in the browser and you'll see that snaps to a two column layout we're also centering it if there's an uneven number of items so in this case we have three so because of that we're just centering the one on the bottom and then on mobile and then on mobile we snap this to be full width as you can see there and even on mobile this is always going to be the full height of the screen and then you'll be able to scroll and you get that nice parallax effect the font here does seem to be a little bit small on mobile so let's just review that let's come back over to our landing page which is where we built our hero so we have layouts index and this is our heading um and i think i've just missed the size so this should be this is the mobile font size and as you can see because we're using a breakpoint to override it on desktop you can see here that um we override that to a larger font size so we missed the number there on the class so let's save that and come back over to the browser you'll see that that is a much more appropriate size for mobile so you can see this is fully responsive if you enjoyed this tutorial and would like to see more of my content then why not subscribe to my channel and turn on notifications so that you'll get notified when i release new content i also want to let you know that i will be sharing a link in the description of this video to the github repository for this project so you can grab the source code that i've written in this tutorial directly from that link you can find my website at simpletot.com where i post all of my videos and courses and the difference between watching the tutorials on youtube opposed to my website is that on my website you can create your own personal account to track your progress through the curriculum of the course but of course as always please like comment and subscribe and don't forget to turn on notifications

Channel: SimpleTut

Views: 6,519

Keywords: tailwind css, tailwind, css, material ui, bootstrap, react bootstrap, semantic ui, css grid, flexbox, react, reactjs, react hooks, react tutorial, javascript, developer, react router dom, useEffect, useState, css framework, stylesheet, sass, scss, responsive design, media queries, responsive website, css layout, responsive css layout, css breakpoints, rems

Id: CKDkb_x3Ssw

Length: 61min 20sec (3680 seconds)

Published: Tue Feb 09 2021