Tailwind CSS Full Course 2023 | Build and Deploy a Nike Website

have you ever wondered how to make your applications look stunning with minimal effort if so you've clicked on the Right video today we're diving into Tailwind CSS a revolutionary tool that's changing the styling game but why should you stick around until the end well by the end of this video you'll not only have mastered the foundations of Tailwind CSS but also created a stunning website ready to improve your port folio and chances of Landing a job now many additional secrets and tips and tricks will also be scattered throughout the video so you can truly take your web development skills to the next level this is not your typical crash course we're going to do it JavaScript Mastery style the first part will teach you how to make the most out of Tailwind CSS how to fully understand how it works behind the scenes all of the best practices the different themes as well as how Tailwind is going to allow you to achieve tasks that usually require JavaScript code and so much more but then in the second part we'll put all of your newly gained Tailwind skills to the test by building a beautiful Nike landing page you'll create a uniquely designed website with a navigation bar complex hero section popular products about us special offers the monals newsletters and a big footer and of course the entire website is completely mobile responsive all with the power of Tailwind after you develop this app I'll even teach you how to get your own domain name and deploy to the Internet so you can share it with your friends potential employers and put it on your portfolio now that's a lot to take in and for that reason along this video I've created a complimentary Tailwind CS says starter kit that includes three things number one a quick reference guide number two a list of all the best Tailwind CSS component libraries and number three a complete ebook that guides you through Tailwind CSS from basic understanding to Advanced Techniques it's filled with examples tips and best practices acting as a companion guide to this video just click the link in the description below and the Tailwind CSS starter kit will be on its way to your inbox now without any further Ado Tailwind CSS is a recent sensation and a highly popular utility first CSS framework that aims to simplify the process of creating modern and responsive web interfaces now unlike bootstrap hand design or mui which come with pre-designed components and styles Tailwind offers a set of CSS utility classes that increase the speed of of development eliminating the need for writing custom CSS from scratch Tailwind has created a completely new paradigm for writing CSS or as the creator of Tailwind itself would put it if every Instinct you have is wrong then the opposite would have to be right while UI kits are fantastic for ready to use generic components they can be frustrating when you need to customize their styles to match your design everyone can spot it from a mile away way it's like the McDonald's of web design but with Tailwind you get the freedom to create your own flavor it doesn't impose any predefined styles on you giving you complete control over the customization making it easy to create Unique Designs and as of recently Tailwind specific component libraries like Tailwind UI headless UI and Shad CN have started spawning they let you whip up UI lightning fast while still still allowing for complete customizability but hey what about the industry do companies or professional developers actually use Tailwind the answer is yes from the world's leading AI organization open AI to Shopify Loom dige turbo GitHub Microsoft and even NASA Tailwind CSS is the go-to choice for many top deer organizations and the official example showcase features a list of these renowned companies and projects that proudly utilize Tailwind CSS in their projects if Tailwind hasn't hooked you up already I hope I got you hooked now I hope you're excited so let's Dive Right In how does Tailwind work well please allow me to provide you with a highlevel overview of how Tailwind Works behind the scenes to explain that I want you to think of how do we write pure CSS we create some elements and attach some classes to them div with a class container and then within it an H1 with a class of container heading and then we write the corresponding CSS container and container heading these are of course CSS classes now let's turn it up a bit let's create a class for Flex item Center justify Center text blue and text small and let's modify the HTML to use all of these classes did you get that we're still using classes but this is starting to look more and more like Tailwind in the second scenario we've made more classes which are also known as utilities thein CSS is all about these utility classes every utility is just a CSS class using a specific CSS style for example when we use a utility like Flex Tailwind CSS automatically generates a corresponding CSS class with with that name isn't that incredible we just have to write these utility classes specified by Tailwind for all CSS properties and that's it no need to stress over how to write better CSS class names or use the B method just do what you want to do okay okay we get it you're sold that's where you're watching this video now let's dive right into the crash course and then later on you'll even build a project to become a real master of Tailwind before we start building out our project let's first get the hosting and the domain name for our new website your portfolio or any site you'll create in the future hostinger is my personal recommendation and right now they're offering a crazy deal so I simply needed to show this to you the link to the website you're seeing right now on the screen with an extra discount in it is in the description let's visit it and click the claim deal button to see if it's really a as good as it sounds we are getting premium web hosting for about three bucks a month you can host one 100 websites you also receive 100 GB of SSD storage unlimited free SSL certificate which means that you get https security and most importantly you get a free email but on top of that you get a free the main name hostinger has a great price to Quality ratio highspeed Serv servers 24/7 chat support and most importantly developers love using it as you can see by these exceptional ratings on third-party platforms we're going to create a Nike landing page so we want to have a custom domain name to be credible for every industry standard application such as the One You're Building in this video we need it to be fast reliable and trustworthy and all of the features you're getting with this plan such as a custom domain name email and speed makes all the difference since I've partnered with hostinger they decided to give you an even bigger discount you can find the link and a unique discount code in the description once you visit the link in the description click claim deal and then add to card here we can choose the period of our hosting in this case I'm going to choose 48 months since that's going to allow me to save the most money and get free 3 months after that you can scroll down and select your method but more importantly you can add a special JavaScript Mastery coupon code that's going to allow you to get an even bigger discount after you complete the purchase you'll be redirected to the hostinger dashboard I'll see you there immediately after you purchase you'll be redirected to the guided setup we'll look into it later for now just click the hostinger logo at the top and as you can see I'm personally using hostinger for all of JavaScript Mastery websites and emails if you purchased premium hosting then you should be able to see this yellow setup button here and also claim a free domain at the top let's immediately set up our hosting so that after we can focus only on development within our guided setup you can click Start now skip create an empty website at this point you should be able to see a claim a free domain button that's going to bring up a new form allowing you to immediately medely choose a new domain but I couldn't wait to get started developing it so I already chose mine it's tawin CSS pro.com you can choose something else or wait until the end of the video to figure out which domain you want to use select your new domain register it and click finish setup this process is going to take about a minute and it's done click manage site to visit the control panel here you can see that our domain is connected and all that's left for us to do is to go first of all through the crash course part of this video to learn how to use the most out of tailwind and then build this phenomenal app that we're then going to deploy to the internet at the end of this video using the file manager with that said let's Dive Right In let's visit play. talin css.com you'll see some code here delete everything we'll use this site to learn how Tailwind Works behind the scenes let's write the famous hello world by creating a simple H1 file and then within it we can say hello world of course we won't stay here for the entire duration of the project I just want to teach you how Tailwind truly works so here you can see that we have hello world and on the right side you can see the representation now to add a text color we can use a provided default theme Coler that Tailwind CSS provides to get to these callers simply add a new class equal to and say text Dash and you'll immediately see all of the different utility classes from classes modifying the Overflow two classes modifying the size and also the color in this case let's add a text Dash Center which is going to immediately Center the hello world let's also say text- LG to make it larger and here you can see it applies a specific CSS style and then let's do text- blue- 400 and immediately it's going to change the color as well this is pretty cool right well let me show you how it works behind the scenes at the bottom there is a tab that says generated CSS click on it you'll see different subtabs such as all base components and utilities the all and the base contain some general Styles like applying a zero margin to the body as by default there is some margin some tag specifics and so much more now click on the utilities Tab and if we expand this does this seem similar to what we just wrote text Al line Center text LG and then text- blue this is the on the- fly generated CSS whatever classes we add to the top the generated CSS will appear here let's try to change the color to text- green- 400 and immediately you can see how it changed the generated code changes the moment you change something it even shows you the size of the generated code in this case 1.17 kilobytes this is exactly how Tailwind works now let's see how we can use some other CSS properties such as background color spacing margin paddings and more for example we can go up bit down and create a div and this div of course we have to close it is going to contain a P tag and this P tag is going to say a div and we can give it a class that's going to be equal to text- Center font Das monono which is going to change the font family as well as font D extra bold so we changed a lot of different properties immediately and now we can also modify the div by giving it a class equal to w- full for full width h-10 to give it a bit of height bg-- 20000 to give it a background color border D Violet D600 rounded - MD as well as margin y of four and P of two which stands for padding so you can see how quickly are we changing things and the structure is straightforward it's derived from CSS properties as you can see all of the additional Styles have been added and you can see there's a pretty hefty number of CSS properties right here and it was so easy to write them right here within our HTML or later on jsx code now let's explain what does this mean w stands for width and then we can add additional properties to it like maybe two which is going to be 0.5 REM 20 or so on we can change it in this case let's leave it to full height is a specific number then we have the BG Violet which is built into tailwind and then 200 which is one variation of that Coler same for the Border rounded MD is going to apply a border radius to this div margin Y is going to bring a margin to top and bottom and padding is going to just give it padding and yeah all this time while we were adding these classes I hope that you looked into this at least once a lot of Styles have been added and this is not something you have to care about in development this is just to understand how it works we can completely remove this generated CSS because with Tailwind you just write everything right here you might think that Tailwind is making can guess a bit limited we have some predefined widths predefined Heights predefined colors even and maybe predefined paddings and margins this is not good but that's not really the case we are not restricted to using only the predefined utilities offered by Tailwind CSS this is where Tailwind becomes much more flexible with it's just in time compiler with Tailwind CSS version 2.1 and Beyond the new jit compiler allows us to generate styles on the Fly for instance if we need a custom or an arbitrary style like a font size of 13 pixels which is not a part of the predefined utilities in Tailwind we can use the Jus in time compiler and special syntax to create a new CSS class on demand let me show you how it works for example on this P tag we can say text Dash and now usually you would do something like LG G which is going to apply a font size of 1.125 remm which is going to look like this but let's say you want to make it for example 50 pixels if you want to do that you just open a pair of square brackets and in there specify a value and immediately the exact value is going to be applied it's going to be font size 50 pixels and in the generated CSS if you go all the way to the bottom you should be able to see text 50 there we go works like a charm and remember this way Tailwind doesn't have to have millions of variations of all of different properties it only generates the styles that you actually use this ensures that the CSS bundle remains lean and contains only the styles that are necessary for your project resulting in a more efficient and optimized web application the justing time compiler speeds up the build process supports custom Styles and keeps the the CSS consistent in both development and production as well as improves how websites perform in browsers and the best part is it's completely built into Tailwind you don't have to do anything else you just have to start using it now let's talk a bit about one of the most important aspects of styling our websites which is layout and flexbox how are we actually laying out elements on the screen before we do that let's wrap everything in a main tag so have a clear starting point to our application there we go everything is wrapped we can indent it properly and we can also make this look better by removing the text 50 as well as giving this a border of two which is going to just make it look a bit nicer and then giving the main a class of p-5 which stands for padding there we go and now throughout this entire crash course we'll keep adding new elements below within this nice window and we'll be able to explore Tailwind in action so now let's discuss layout when we're talking about layout what we are really talking about is the arrangement and positioning of elements on the website Tailwind provides different utilities to support different CSS properties like aspect ratio box sizing float position overflow zindex and more but most of the times you'll just see yourself using display play position and sometimes overflow now let's create a few more tags to see how we can manage these properties using Tailwind first let's talk about position position determines how an HTML element is positioned within its containing element or the overall website there are different values starting from relative which shifts a bit from its normal spot but everything else behaves as it's still there absolute which makes the elements move independently like a puzzle piece based on a nearby parent or the whole page fixed which makes the element stay locked in place even when you scroll up and down and sticky when the element acts normal but when you scroll to a certain point it sticks around like a Post-It note now why am I explaining this as this is just basic CSS well Tailwind uses the same names for their classes to keep things simple so if we create a div that's going to look like this and it's going to have a class equal to fixed that means that this div is going to be fixed this is it so for example to be able to see this div move around let's give it a w of 10 which is going to be a width of 2.5 RM let's give it a height of 10 as well a BG D r-500 and top d0 so there we go as soon as we put fixed in top zero you saw how it moved from from here where it should originally be to the top of the screen originally it was supposed to go after the a div element but with fixed and the top it goes to the top and for the purposes of this video we can keep it there now let's talk a bit about display display determines how the element behaves in terms of layout and visibility within the document which essentially means that it controls how the elements are displayed now there are various forms of display from block inline inline block none flex and grid and similar to position we can use these values directly as Utilities in Tailwind so for example the famous Flex would look like this we can create a parent div and give that parent div a class equal to flex within it we can have an additional div that's going to have a class equal to h-16 w-16 rounded Das full to make it into a circle and BG D blue- 500 there we go and now you can dictate how the children elements behave by passing additional classes to its parents such as justify end it's going to move it to the end or maybe justify center it's going to move it to the center and you can also give it a space- X-6 so this is going to space the elements nicely if you add more let me show you how that works so for example we can now duplicate this div and you have two and this spacing if you modify it it's going to change how the elements appear within it pretty cool stuff right we can also do justify between to make all of these elements spread out evenly in which case we do not need the space flex is definitely one of the needed skills to master CSS and responsive design creation the moment you Master Flex you can Flex on anything so as a recommendation I would suggest trying out this website flexbox froggy where you can solidify your learning of flexbox it's a fun interactive game to learn how to use different flexbox properties in this game you have to help the froggy get to the lily pad and you can do that by using Flex property so we can say justify content is equal to and that's going to be Flex end at least I hope and there we go the froggy moved and you can go to the next one so this is pretty cool if you're a beginner with flex now on the other hand if you're a fan of using CSS grid you could do something like this let's create a new div with a class name equal to grid and let's say grid ds-5 as well as Gap -2 we can then close this div and within it we can create a new div it's going to have a class equal to BG D Violet d500 and h-12 which is going to create a rectangle and now we can essentially close it right here and duplicate it five times which is going to create five rectangles now what does grid calls 5 stand for which corresponding CSS value is it well you can either refer to the Tailwind documentation or you can simply hover over it and see that it means grid template columns repeat 5 minmax 0 1fr it's a pretty complex CSS property but essentially it aligns all elements in a row with equal width if you change the number to three then you'll be able to see three per row and there you go the grid Magic we can also add a quick mt3 that's going to provide a margin on top to divide it from the bottom and we can also make this three and remove the two so we're playing around but as you can see everything that you can do in CSS you can do with Tailwind you can play with all the different elements positioning layout and more and in a way that's even simpler than using regular CSS is of course behind the scenes you're still using regular CSS but it just feels so natural writing it right here I got to pause right here for a moment and let you know that first time ever that I saw the Tailwind code I didn't like it at all I was like why do we have all of these classes almost like inline Stars within the elements I hated it but then I never ever visited another CSS file again because you can write the majority of the Styles right here and I started loving it it makes your development efficiency so much higher because you don't have to constantly switch between HTML CSS and then have multiple CSS styles for different elements you do all the styling directly on the elements they correspond to great that was it when it came to layout and flexbox next let's focus on media queries using media queries for responsiveness is easy tailin provides a list of break points inspired by Common device resolutions you can see them right within Tailwind docks they have the max SM minimum width 640 768 1,24 1,280 and 1536 you don't need any more break points five is enough but in case you do want more you can easily customize it it's good to know that Tailwind uses minwidth media query as default minwidth means that it sets styles for a specific screen width in this case 640 or larger okay so this one is going to be activated for 640 and above this one 768 and above and so on and you can use each and every utility class within these media queries let me show you a simple example so we can create a div and this div is going to have a P tag within it saying I will appear for device resolution greater than 768 pixels so we can give it a class equal to MD meaning medium devices block and usually hidden and therefore immediately it hides but now if we duplicate this and change the m MD to Max MD this is going to apply a maximum media query which means that it's going to set styles for a specific screen width or smaller in this case we're smaller so you can see it here so we can simply say I will appear for devices smaller than 768 and now we can move between those and you can see that a nicely changes at least I hope that you can see this little thing right here that changes once we move it pretty cool stuff so you can manipulate all the different media queries right within your Tailwind Styles now also if you're familiar with CSS you may know how things like hover active and element and such pseudo classes are not good for developer experience all of that codes makes for a tricky syntax but thanks to Tailwind we can make it look simpler and easier to use let me show you what I mean we can create a button and close it right here that button is simply going to say has buttons usually do click me and let's start styling it by giving it a class equal to margin y of two that's going to give it a margin on top and bottom round A- LG change the background to BG blue 500 you can already start seeing it padding X of four meaning padding on the horizontal axis or that's going to be left and right padding y on top and bottom of two text- white and now this is a pretty cool button but we don't have any hover or click effects how can we make that happen well with Tailwind in a simple way you simply say hover and then a colon and then you can Define any kind of style that you want it happens when you hover in this case bg-- 700 so now if you hover it immediately applies it let's add a couple more let's add a focus outline Das none this is going to remove the ugly outline that you usually have when a button is focused but on the focus we can do something like ring which is going to give it a specific Shadow we can also on Focus change the ring- bl300 and on active we can set the BG to Blue 800 so we provided a lot of different modifications on this button in such a simple way now check this out let's also create a UL an unordered list right below the button that's going to look something like this within it we can have an Ali element that's going to say item one and it's going to have a class equal to BG D white P2 for padding and then we can use another one of these special properties called First and give it a BG yellow 100 so if it's a first element it's going to have that BG yellow now if we duplicate that below you're going to notice that the second one does not have that background because it's not first in the list and of course this P2 was supposed to be p- to for the padding to actually work now the second Li can also have an additional property something like odd so if it's an odd element we can give it a BG blue 200 and if it's even we can give it BG green 200 this one becomes green but now if we duplicate three more elements below change their numbers to items two 3 4 and five you can immediately see how we change the styles of those items only the first one gets BG yellow because it is the first element the odd ones get BG blue the even ones get BG green and we can also provide now a style or class to The Container by giving it a my2 for margin and space- y-2 to provide some spacing it's so easy to use these otherwise complicated CSS properties how good is that next let's talk dark mode designing modern user interfaces usually means designing them in a light and dark theme and just like everything else setting up and styling for dark and light themes is easier than ever before we start if we want to create our own toggle we need to make a small change we have to modify the configuration to include the dark class so let's go to the config section and this is just an an additional file which you're going to have within your Visual Studio code and here above theme we can say dark mode is going to be set to class this means that based on a simple class we'll be able to change the theme now let's go back to the HTML and if we don't specify that class the theme Styles will automatically adapt based on the users's operating system that's quite interesting we only want to mention this field class right here in case you want to offer a theme toggle on the website it's a choice that you make now let me show you how to use these dark theme Styles here's an example whatever utilities you add just provide dark colon before them and you're all set these utilities will only take effect when the theme is set to dark otherwise they won't have any impact let's create a simple div and within it we can have an H3 that's going to say something like this is a text element and we can close it and below it we can have a P tag that's going to say this is an even longer P tag element there we go now below these elements still within the div I want to create a button that this time this button is actually going to do something and it's going to toggle D dark mode so let's give it an ID that's going to be equal to toggle dark let's give it a class something like text- blue- 900 padding X of four for padding padding y of two text- small font Das medium margin top 8 to divide it from other elements BG blue 100 and rounded DMD there we have our button now don't click it just yet because it's not doing anything so what we can do is we can give it an onclick function that's going to say document. body. class list. toggle and we can toggle the dark mode which is going to look like this of course we have to close it with single spaces because we have other outside and now before you click this button let's actually style this div as well as the H3 and the ptag let's give this div a class equal to m-10 for margin let's give it a rounded dlg a BG off white a padding X of six for padding a padding y of eight Shadow Das XL ring-1 ring is what outlines the actual div we can change the color of the Ring to ring- slate d900 over 5 which is a specific color and that creates this nice element let's also style our H3 to give it a class Name by giving it a class equal to text- Bas font D medium tracking Das tight text- slate -900 and there we go it's looking much better and let's also style the P tag by giving it a class equal to mt-2 text- small text- sl-500 and there we go it's a typical looking overlay now if you click this nothing's going to happen now in case you want to make this button work down in the description you'll find a script and you can simply copy that script and paste it below the main this is a script that's going to allow us to test the functionality of changing the mode usually in react you would do this with a state or local storage once you added you can click the button but nothing's going to happen and that's because we haven't yet provided the dark mode classes so now if you say dark colon and then specify what you want to do for example you can see BG Das black and now if you click a button it's going to be applied but of course we have to apply it to the elements within it as well so on the H3 you can say dark and then change the text to white and on dark on this one you can change the text to Blue 100 which is a light variation of that and now if you click it and toggle it as you can see it changes the mode pretty cool stuff right and it's not that hard to change the styles of a specific property when in dark mode now in this example we're also using using a few utilities that we haven't discussed earlier the shadow XL as well as ring one rather than me explaining its CSS meanings why don't you check out the utilities Tab and see the CSS code it generates you can do that by simply hovering over it or by going to the generated CSS and then searching for shadow XL you can see that it applies this huge list of styles of different shadows that it applies so a simple two words right here apply this many CSS tiles and you can see it truly does make a big difference in styling this element by elevating it from the ground so you can see that Tailwind becomes much more powerful when you know these additional Styles and later in the crash course I'm going to let you know how you'll be able to know all of these Styles without having to remember them now before I briefly mentioned that you don't have to Simply use predefined Styles we we can also use custom Styles so let's dive a bit deeper into that there are two options for incorporating custom Styles into Tailwind let's say you wish to introduce a new color that isn't present into default Tailwind theme here's how we can achieve that with two different methods let's create a new P tag right here below the button that P tag is simply going to say chestnut color there we go so it's going to be a specific one and we can wrap that P tag right here now right here we can see it and we can give it a class name or rather just a class because we're not in react and we can make it text Dash to excel so we can see it better right here at the bottom now you can give it any kind of special custom variables within square brackets as we discussed in the intro so that's going to be text Dash square brackets hash 973 f29 or whatever other heximal value you want and it's going to immediately change and then you can also provide some BG in this case BG Das Stone which is a defined variable 100 but you can also do something like BG Dash and then enter any kind of hexadecimal value like so pretty cool stuff and we can also give it a p-2 there we go now it's not just colors you can use it for any utility classes for example let's say you want to have custom padding you don't have to say p-2 you can say p dash and then in square brackets 16 pixels and this is going to immediately just increase the padding you can do that for text size as well doesn't have to be text 2- excl it can be text Dash and then 12 pixels there we go much smaller so whenever you want to do something arbitrary you just put it in square brackets however you will observe that this approach is suitable for accomplishing small tasks rapidly nevertheless as you advance in development of the application the complexity of managing all the code increases consider using the same chestnet color in multiple files and then imagine your boss or manager instructing you to modify it to something else imagine the number of files and lines that you would have to locate the code and then modify it in such a scenario this is the moment where we utilize the second approach the Tailwind config Tailwind config is incredibly important and so far we haven't really dove into it it allows us to seamlessly control and organize the visual style of the website the procedure is simple get to the config and then dive into the extend part now what does it mean to extend well that means that that you want to extend the predefined colors from Tailwind CSS the default values are cool but maybe you want to add your own so let's add a colors part and within it you want to give it a chestnut color that's going to be a string of 973 f29 now if you go back to your HTML you can simply say text Dash Chestnut makes so much more sense works just as it did before and you can easily use it whenever you want now let's talk about reability in the previous example of dark mode we created long Styles directly on the tag such as on this div H3 P tag but specifically the button and this is okay it might happen when building big applications and this is okay it's most likely going to happen really often when building big applications but coloring The View with all of these utility classes wouldn't be considered clean code for example check this out you don't even have to write it but I created this really custom button with a lot of different hover click effects and so much more and it takes about five lines of code just for the Styles it's too rough nobody would like to see such a big chunk of utility classes scattered all across your jsx or HTML so how can we avoid such cases while still having the flexibility of Tailwind well there are a couple of solutions first break your layouts into specific components instead of writing everything in a single page create separate components like buttons inputs and more the second solution is to use directives do you remember the base components and utilities tabs Now open up the CSS tab inside of tailwind and you'll see something like this Tailwind base components and utilities why is this and why do you think we need it well over here base components and utilities are parts of the approach to structuring and organizing styles using the configuration method base styles are Styles applied globally across your project components are Styles applied to the components or reusable UI elements and utilities are Atomic styles for individual properties like margins paddings and typography the at Tailwind directive right here insert tailin Styles into CSS similarly we have another directive which is the ad layer let me show you how we can use it to move the classes from this huge div right here where we applied multiple class to just one single word so first you have to copy all of these classes right here and rename them for something like card or just card then in the CSS you apply a layer components and say do card and then you use the apply directive and simply paste all of those Styles now you can see the card is back here it works as it did before but now in HTML you can see that this class or this div contains just a single word which makes it much cleaner to read works like a charm of course course you wouldn't do this for all of the classes because this stuff is pretty readable right here right it fits in one line and it only has descriptive files that you need to know what this element is all about but when you get a really complicated list of classes such as this one you can simply grab it call it a special button and then simply move to the layers and apply a new class such as special dash button and use the apply directive and there we go the button is back here I hope that makes sense so you don't use it for everything but just for the larger class names and the third option is to use component libraries like shat CN Tailwind UI or headless UI for creating commonly used components like buttons inputs and more they're going to provide you with a component that's already going to have all of the base Styles applied but you'll be able to choose which additional ones you want to style it with so what's the takeaway where there's always a way you just have to figure out what works for you for me specifically I like a combination of all of these ways I like to use component libraries and you can find the links to all of my favorite ones in the Tailwind guide linked below I like to use those for basic components such as buttons text elements and more and then when you have a longer class that you want to write you simply move it as an apply directive now what do we want to cover next well let's talk about some common misconceptions around Tailwind there's a lot of different myths about all the different technologies that are out there which makes it easy to assume that there are misconceptions around Tailwind CSS as well a common one is that we're writing inline Styles writing everything and applying it to a tag is it in line well no that's not the case if you understood everything we discussed so far you would know that that's not in line it's just about using more CSS classes that's it inline classes are limited to directly styling an element like this where you have style and then say padding 10 color blue you can't use more advanced properties like pseudo classes in an inline style and they don't have access to Media queries as well on the other hand you can do do all of these things with Tailwind CSS utilities the utility class is about creating a small set of reusable CSS classes you can't reuse inline Styles you have to rewrite them whenever needed so no writing Tailwind is not equal to writing line Styles and on top of the misconceptions I want to give you one final tip before we get started with building our great uiux Nike Landing website people often ask me how on Earth do you remember all those Tailwind classes and the answer is I can't even recall what I wrote 2 minutes ago let me tell you a little secret you don't have to memorize every single class as you keep working with Tailwind you have to develop muscle memory it's like riding a bike or trying to tie your shoes you'll naturally know which classes to use for different elements just keep practicing and before you know it Tailwind classes will become second nature to you you might wonder how you'll manage to write all of these classes while learning without watching any tutorials but fear not one tip to Kickstart your Tailwind Journey besides using your Tailwind guide is to always keep the docks nearby and use the control or command plus the letter key combo whenever you need to find a CSS property such as border radius or cooler just type those magical keys and type it in and immediately you can see all of the properties Tailwind is incredibly intuitive and just in few days you'll be crafting uis like a pro without constantly peeking at docs it's all about practice and embracing your creative flow moreover there are a lot of Visual Studio code extensions that can significantly speed up your process of writing Tailwind classes and that's that's it for the first part of our crash course but in the JavaScript Mastery style let's dive deep into the build and deploy part where you'll develop a beautiful Nike landing page using your new Tailwind skills with that said to get started with our practical build and deploy part of this tutorial we're going to do what we always do on the JavaScript Mastery YouTube channel and that is start from bare Beginnings by creating a new empty folder on our desktop let's call it Nike and we can simply drag and drop that empty folder into an empty Visual Studio code window once it's there you can go to view and then terminal this is going to open up a built-in integrated Visual Studio code terminal through which we'll be able to set up our application and to set it up you can go to tailwind css.com and click get started the first step is of course installation but you can go to Quick Start and go to vit install Tailwind CSS with vit it is a new alternative to create react app which is going to allow us to spin up our applications much more quickly and there you can simply follow all of the steps to create our Tailwind V react application first let's run mpm create V at latest and then we can do template react but instead of Simply pasting everything I'm going to simply instead of my project say do slash which is going to create it in the current repository and press enter there we go this is it now you don't have to CD into another folder because everything got installed right here the second step is to install Dev dependencies such as Tailwind CSS post CSS and auto prefixer so let's go ahead and copy this and paste it right here these are the dependencies that are not going to be used in production and please notice that the entire Tailwind CSS is a Dev dependency that means that it's nowhere to be seen on the deployed version of the application that's because as we discussed all of the Tailwind class names get transpiled to regular CSS finally we can initialize the Tailwind project and paste it right here this is going to create a new post css. config.js as well as the Tailwind doc config.js files then you need to configure your template paths so simply copy this entire Tailwind doc config.js go here and paste it here we added some pads and instead of these files we're going to write Tailwind CSS code finally we need to add Tailwind directives to make this all work and we can add that to our index.css by overwriting everything that we have there and just simply putting it here then we can copy our new app base it in the app.jsx instead of everything that we have here remove the CSS folder because we won't be needing it and ensure that in the main we indeed are importing the index.css so that is it and here we can see that our CSS is complaining a bit saying unknown at rule at Tailwind it should be able to read this considering that we installed Tailwind right here as a Dev dependency but let's try to run our application and then see if it works for that we can simply run mpm runev by opening the terminal and pasting it in this is going to run our application on Local Host 5173 and there we go you can see the hello world and it is both bolded and underlined which means that our Tailwind classes are being put in motion which is all that we need and there we go our project is set up that was quick and easy now you can notice that here we have the assets folder where we simply have a react SVG but throughout this Nike landing page we're going to have have many more photos logos and more so you simply want to delete this assets folder and then in the description down below you're going to find a zipped updated assets folder which is going to contain all of the images and icons that we're going to use throughout building this application so simply download it unzip it and then paste it right here and you can notice all of these great images another thing we're going to need is going to be again in the description down below but it's going to be within a GitHub gist file and it's going to be this index. CSS where we simply have tailin for now so copy that code and paste it right here you're going to notice that this is the same thing we're still using Tailwind but we imported some fonts set up some basic Styles and then also use some of the applied functionalities that we explored in the intro we're doing nothing special here everything is going to be explained as we go of course with the CSS file we must not forget the updated Tailwind doc config.js throughout this video we're going to go in detail about modifying our talwin config so in the same GitHub gist simply find the file there copy and paste it here this is actually where you're learning where we're going to go over adding different colors font families box shadows and extending or expanding on the original table and theme to make it your own you learned the basic but now you're ready to move forward and truly make the most out of your Tailwind config now we want to make our app look great from the start so within our assets and then icon you can see a favicon.ico this is that little image that you can see on your Chrome or Safari tab simply take it and drag and drop it to your public folder and delete the v.svg this is going to ensure that from the start we're working on a well-branded Nike landing page now we want to ensure that our code is presentable and readable all the time so there's also theint RC config that's going to ensure that our code works but also reads well throughout making this video I made just some small adjustments that's going to make our coding process more enjoyable so in that same GitHub Jin down below simply copy it and paste it right here you'll be able to see that the modifications are minimal almost everything is exactly as it was now we can close these files and I know that we spent some time just copying a couple of files but trust me even the files we copied we're going to explore in so much depth later on but this is just the beginning we now have a clean empty slate and we are ready to start developing our application so let's put our browser side by side by our editor there we go you can see that we have our V plus react as well as a previous version of our deploy application of course the domain name is not right here but once we actually deploy our application we're going to deploy it to a great new domain so with that said and without any further Ado let's start building this application and putting all of your newly acclaimed Tailwind knowledge to practice we are of course going to start from the app and from here immediately we want to create all of the different sections that our app is going to use so let's remove the one and let's turn this into a modern Arrow function that's going to be con app is equal to and we can simply put parentheses instead of curly braces this is going to allow us to immediately return whatever we want to return and then we can export default app we use this method when you don't have any other code such as console logs or functions within your app it's just going to be the representation or the jsx so with that said we can give our main a class name keep in mind we're now in react so we have to use class name of relative so this is going to be relative to its container and immediately within here we want to render a component called nav of course for now we're going to leave this as a text but later on we're going to turn this into a real component then we're going to have another section and within that section we're going to render the hero component to that hero we can give a class name on extra large devices we want to give it a padding of one and usually on y devices this is a Min width of 1440p and then we can give it a padding of R and usually a padding of B now you might be wondering what are these these are some new BR paddings or margins what is that well if you search your code for padding B you'll be able to see that we have defined it in the index. Cs s s and that it's nothing more than a regular class that applies some of the Tailwind classes such as on small devices apply a specific padding and usually apply another one this is just a simpler way to create a new class that we can then reuse in a simpler way padding B this is it as in bottom and we have the hero section here now below this section we're going to have another section which is going to have a class name equal to p padding and again what is this padding well let's search for it if I simply search for padding you can see that we have it within our index.css of course if we search for it it's going to apply a padding X meaning horizontal as well as a padding y but we're also immediately making it responsive and of course we can later on explore why these values are the right ones to use but this is just a simple layer utility class that we're using using here and within here we're going to render the popular products component or section now we can duplicate this section A couple of times 1 2 3 the second one is going to render a component called super quality like so this is going to be a big product then we can render a Services Tab and finally we can also render the special offer tab all of these are going to have the patter but the services is going to have padding X and padding y1 it's going to be a bit different from other ones I think you can already see it on the finished side it just requires a bit less padding on top and bottom than other sections and it's also visible here because it's more tightly put together below our special offer we're going to have three new sections so we can duplicate it one two three times we're going to have a customer r viws we're going to have a subscribe one and we're going to have a footer all of these are going to have some different classes so customer reviews is going to have a background it's going to be a BG pale blue as well as padding as all the other sections and the Subscribe is going to have a padding X meaning just on the left and right it's going to on small devices have a py meaning padding top and bottom of 32 and usually padding of 16 and w- full so it takes the full width of the screen and finally the footer is going to have BG Das black padding DX padding DT as well as PB of 8 so again we're just working on positioning all of these elements across the screen soon enough it's all going to start making sense but with that said we have now created all of the sections of our website and we are ready to start creating the file and folder structure that we're going to use throughout this entire course so let's create a new folder within the source folder called sections and within it we need to create all of the files for all of the components or sections that we have mentioned here so that's going to be customer reviews. jsx and there you can run ra Ace this is going to create a react Arrow function component so simply it's going to spin it up and give you what you need in case this didn't work for you you can go to extensions and search for es7 plus react react native redex Snippets and then you'll be able to Simply run this and get the boilerplate code once we created for one we can just repeat this process for all of the other components so let's go back here and let's create another section called footer jsx again you run RFC press enter and we can remove the import for react let's keep repeating the process for other sections we're going to have a hero. jsx you can run rafc again let's do popular products. jsx rafc we can also do services rafc we can do a special offer rafc and let's also do subscribe. jsx rafc and finally we're going to have the super quality section this is going to be an interesting one and we can simply run rafc now we don't need to import react anymore we're using the newer versions of react so we can simply delete the import statement at the top just so we have a bit of a cleaner working space in each file and now you could import all of these sections manually within our homepage and let me show you how that would look like you would go into the app and then you would say import something like let's do hero from do/ sections hero and then you would need to duplicate this for every other component such as the nav also for popular products and so on but there's an easier way you can import all of these sections in one line let me show you how Within These sections folder create a new index.js file within it we'll need to import every single component manually such as import hero from slh hero we also need to import popular products from poopular products we can import something like super quality from /up quality we can import services from Services we can also import special offer from special offer let's also import customer reviews from customer reviews let's import subscribe from subscribe and let's import footer from footer this might seem like extra work but as I said it's going to allow us to have our app jsx much simpler which is the primary goal now that we have this we can simply export all of them individually such as hero popular products super quality services special offer customer reviews subscribe and footer and now we can import them right here by simply naming them so we can import the customer reviews the footer the hero popular products Services special offer subscribe super quality and so much more and if you noticed how this was autofilled for me I'm using an extension called GitHub copilot I do believe that it's free for students usually it's paid and they do have a free trial so I would highly recommend to test it out and trust me it's going to highly speed up your developer workflow now that we have all of these you can simply select every single string that we have here by holding the ALT key and then double clicking it once you do that it's going to allow you to move and you can do that by holding control and then press in the left Arrow key now you can open up the regular tag sign and you can hold control and press the right arrow to move to the right side of the word and you can close it this way we immediately created all of the components with just a simple click and for now we can comment out the nav bar because it's going to be coming as a component so if we do that you can see that we have all of these but these are actually the components so if we dive into the hero section and type test you can see that that it changes so essentially what we've done right now is we've created the entire structure for the entire application so our job from now on is going to be much much easier and we'll be able to focus on what matters which is writing the jsx code creating the layout and then using Tailwind CSS to style it so let's start from top to bottom and let's start by creating this great simple navigation bar with a simple logo and then on desktop version some links that we see here we can do that really easily by first of all closing all of the currently open files to have a clean working environment and then by creating a new folder within the source folder called components and within components we can create a new file called nav jsx run RFC and we can simply import it within the app.jsx by saying import nav from SL components nav and now we can uncomment it right here go back and if we type test we can see it changes so now we are ready to start developing the navigation bar before we do that just one thing that's bothering me right now is this favicon and the title in the tab so we can immediately change that by going to index.html changing the title something like Nike in my case I'm going to say Nike working version version or working because we have this deployed one here and then finally you want to import the favicon so we can say right here href for the icon is favicon.ico and if we save that there we go so let's get started with the first component of the day which is the nav bar to get started writing our nav we can first wrap everything into a semantic Heather tag this is another Pro tip always write semantic HTML could this have been a div yes of course but for better accessibility always use semantic tags such as Heathers or even navs within them now this Heather is going to contain a nav and then a nav is going to contain an H tag that's going to have an hre pointing to just forward slash within it we can render an image and this image is going to have a source equal to and now we want to Target the Heather logo this Heather logo is going to come from import Heather logo and we can say from d/ assets images and while we're here we can also import hamburger from assets icons this is going to be that three lines icon that we want to use to indicate that we can open up a mobile menu now going back we need to ensure that the assets are actually there because right now it's saying that it's failing to import assets image and yes this indeed should have been images so we can add an S at the end and then here we're going for icons and here we simply say icon so let's rename this to icons plural which makes more sense and we are back in Action now this image is going to have an Al tag equal to logo and a width of about 130 pixels and a height of of 29 so it's a really horizontal logo looking great now let's start styling the nav around it let's give this Heather a class name equal to padding X meaning padding on left and right padding y of 8 meaning padding on top and bottom absolute z-10 and W-4 so this is going to make it appear on top of the other content and you can immediately see that because the hero section moved behind it and again if you haven't already installed the Tailwind intellisense please do so right now that's going to allow you to see which CSS styles are being applied once you implement a specific class and this is a great way to learn Tailwind now let's continue styling our nav by giving it a class name and we want to make it into a flex container with a justify between as well as items Das Center and a Max container now this Max container can be a CSS style that we have defined right here so try not to confuse the additional Styles which we have added with the regular Tailwind classes if you have over them you can see what their styles are now on the right side we want to have all of the links to other pages so we can simply create that below the a tag we can create a UL or an unordered list and give it a class name equal to flex D1 Flex meaning it's going to become a flex container again justify center items Das Center gap-1 16 to provide some spacing between the elements and Max dlg meaning on minwidth 1024 we want to hide it right to say hidden so it's only going to be visible on desktop devices and here we want to display all of these different tags so of course you could copy them and then create a new link tag for every one of them but a much better way of doing these types of things is to keep some kind of business logic or links outside of the actual jsx so let's create a new folder that's going to be called constants and within the constants you can create a new index.js file in that same GitHub just below from which you copied other styles you can copy the constants index GS here we're going to have zero logic so you're not missing anything but this is just some way in which we can present data in our jsx so here we have our nav links which we can simply map over we also have our different shoes statistics and so on so if you were using a CMS a Content management system this is all the live data that would be coming from a CMS or here in this case it's all within this one file so in case you want to give this website over to your client or an employer and maybe they're not so technical they wouldn't know to jump into the nav and then modify the links but they can go into here and simply add a new link that's going to point to not contact but something else it's much simpler when you do it this way and it's also simpler for us because now we can import it by saying import nav links coming from do/ constants and now what we can do do is we can open a new Dynamic block of code and say nav links. map where we have an item or a link and we want to immediately return something it's an immediate return because we used parentheses and then what do we want to return for each one it's an Li a link item with a key equal to item. Lael that's going to contain an a tag an anchor tag inside of it the anchor tag is going to have an hre equal to item. href and a class name equal to font Das monat leading Das normal text- LG for large and text- sl- gray which is the color and within it we can dynamically render that specific item. label now if we save this and go back you'll be able to see that we cannot find assets icons from here so we we have to go into the constants and modify this to icons because we renamed our folder so it makes more sense once you do that you can immediately see that we have the Nike on the left side as well as all of the other items on the right side this is looking great now the last part we're missing is this sign in or explore now and to be fully honest I don't even think we need it this is looking great as it is as it is a simple landing page of course I invite you to add more stuff to this make it your own rename it maybe it's not Nike maybe it's something else that's the whole point of these videos the link to the full GitHub repository is also going to be down in the description if you ever encounter any errors bugs or similar you can simply visit it and refer to the final code also give it a star but while we're in the topic of making things different a lot of people recently started tagging me on LinkedIn and that has proven to be a phenomenal way for you to gain traction and establish yourself as an expert developer here I called it threads this guy called it thread X and they essentially recreated our YouTube tutorial but also added a Twist to it and hey do that with Nike as well turn it into something else make it your own and then people will see how great of a developer you are instead of tagging me personally you can tag JavaScript Mastery on LinkedIn on Twitter on threads as well the more you tag us the more we're going to share your work and ensure that everybody else sees it as well with that said after this UL the last thing we're missing is going to be a div and this div is going to render an image that's going to have a source equal to hamburger and we can say I'll tag hamburger as well as a width of 25 and a height of 25 as well if we save it you can see it there but hey it shouldn't really be here right it should only be on mobile devices once this is not visible so you know what to do you can just do a class name or wait no I'm not going to tell you do you know what to do it's definitely going to include Tailwind right so how do we make this little part invisible on device is larger than this specific width so these items hide right about here and we need the hurger to show once they hide so let's see here we're using Max LG hidden which is in about 1,24 pixels display none but here we want to do the opposite so we can say usually it's going to be hidden right immediately but on Max LG we're going to return it to block which means it's going to be visible and now we can see the hamburger icon and if we expand it we can see the items of course another step for you to do would be to add actual logic to this button so it actually opens up and you can see all of these great list items right within it for now we're doing just the representation so we can proceed to the next section which we can figure out which one is it by going to app and then diving into the hero section which is maybe one of the most interesting sections whatsoever because it has this great shoe display where you can actually click on it and change the shoe view of course it's looking much better on larger devices let's get started and start developing it right away to get started with our hero section we can first wrap everything into an HTML 5 semantic section tag and let's style it a bit let's give it an ID equal to home so we can quickly scroll to it by pressing the home button on the navigation bar and let's start styling it by giving it a class name equal to w- fool this is going to make it take the fool width of the screen and just to be able to see it let's give it a border -2 and border red 500 that's going to allow us to visually see what we're working on if we save it you can just see it here and we can also give it a padding of two there we go so now you can see the hero section we're working on alongside w- full we can give it a flex property which is going to make it a flex container but on extra large devices we want to make it a flex row usually it's going to be Flex coal like this because we want it to appear one below another in mobile devices we can also give it a justify Center as well as a Min dh- screen so this is a full height of the screen and you can immediately see how it took 100% of the height of the screen we can give it a gap-10 for the elements within it and then a Max Das container class which is our own class which you can quickly check by going to our Styles and there you can see that this simply sets the max width to 1440p this means that if the content goes beyond it it's just going to be collapsed and will be able to see everything nicely within this viewport now let's remove all of these additional Styles we added because now we know that the hero section is actually taking the entire height of the screen now within it we can create a div and this div is going to have a class name equal to relative on extra large devices it's going to take two fifths of the screen so with -2 out of five it's going to be a flex contain container itself and a flex call container with a justify Center justification as well as items Das start this is for vertical orientation and then w-o for full width and then Max on extra large devices it's going to have a padding of X and a padding top of 28 so we're just making some space for the content we're going to put inside of it now immediately within it we can create our small subheading which is going to just be a P tag that's going to be this one our summer collections then we have a big one and then another smaller one a button and then these additional letters so we can immediately start with a P tag by saying our summer collection within it we can create an H1 tag that's going to say the new arrival and that's actually going to be within the span element so we can expand this put it within a span there we go and nicely in wrap it what this is going to allow us to do is to have this within the H1 as well as a Break Tag and a span element another one this time and this one is going to say Nike shoes now I think you can see why we're doing this because the dark text is different from the Nike text so we want to leave the shoes outside of it right here but the new arrival and Nike are within those spans to which we can provide additional styling it's going to make sense really soon and finally below the H1 we can create a new P tag that's going to just say this discover stylish Nike rals quality comfort and Innovation for your active life feel free to type it out or just put something else there and you can see how this looks like right now just plain and simple and I want this to create a structure first because then we're going to move over to styling it now below the speed tag we can create a new component which is going to be called button so let's go into our components and create a new button. jsx component and run rafc this button is just going to be a simple one it's just going to be wrapped with a button HTML tag and it's going to have a list of class names for starters we can make it a simple button we can make it say something like click me and then maybe sometimes we're going to also have some kind of an icon right here below which is going to be an image with a specific Source but for now let's just make it a basic button before we start adding class names we can actually utilize this button right here below our P tag by simply saying button and we can now import it from do do/ component SLB button that's coming right here at the top in this case this button is going to have two different props the first one is going to be a label of shop now and the second one is going to be the icon URL equal to Arrow right and this is going to be one of our icons that we're going to import right here at the top of the hero section so let's import the arrow right coming from SL assets slash icons and now we're passing all of that there and you can see click me button there but instead of clickme we want to actually pass some additional props to it such as the label and the icon URL so now immediately instead of Click me we can render the label which makes this button a functional reusable component because now it's going to say show now no it's not going to be show it's is going to be shop now because we're making a Nike landing page this is good and then within the image we can render a self-closing image that's going to have a source equal to Icon URL and I spelled URL all uppercased so we can use it like this there the alt tag is going to simply be something like Arrow right icon and a class name is going to be margin left two to the divide it a bit from the text rounded dasf since it's an icon and this is a pretty cool new thing that I noticed usually rounded full applied a border radius of if I'm not mistaken 50% but it looks like they've made a modification and now it applies a border radius of 99,999 pixels I guess this is an optimization from the Tailwind side but you don't have to worry about the actual Style just say round it full and it makes it into a circle finally the the width is going to be five and the height is going to be five as well and I just noticed that you have the RS here but also in the comments they provided the pixel values so it's pretty cool to see that height of five applies a 1.25 REM height which is exactly 20 pixels pretty cool stuff now if we save it you can see the arrow right here but this doesn't really look like a button so let's make it one in the class name we can give it a flex which is going to make the items appear one next to another justify Center to Center the items horizontally and then items Das Center to Center them vertically we can make it a gap -2 to make some space and a padding X of seven a padding y of four a border we can also give it a font Das Monster Rat text- LG leading Dash none so this is going to make the line height of one and now we want to choose a background color let's say BG D Coral d red and this is coming right within our tailin config let's also make it rounded Das full and text- white let's also make the Border be in the coral red and I do believe this is how we want our final button to look like this is great now that we have our button we can go back to our hero section and we can start creating the layout for these statistics so to do that we can go below the button create a div which is going to serve as a container for those statistics so we can give it a class name equal to flex to make it a flex container justify start so the elements start at the left side items there start so they start at the top flex-wrap so in case our screen is smaller they start collapsing slowly for smaller devices w- full so they take 100% of the width Mt of 20 which is margin top of about five r or 80 pixels and again I don't know that but I'm just reading it here from this cool Tailwind extension and then a gap of 16 now if we save this this is going to push it up a bit and now we can just map over the statistics so these statistics can be imported right here at the top by saying import statistics which are coming from from do/ constants and now we can map over them by doing do map where we get each individual stat as well as its corresponding index and we want to return a div for each one of these this div is going to render a P tag that's going to render the stat. value and below it we want to render another P tag that's going to render the stat. label so we can in wrap it to make it Dynamic and if we save this you can immediately see 1K plus Brands 500 plus shops and 250,000 customers and this is coming directly from our constants again this is just some basic array of objects containing the value and the label property you can go here and modify this if you want to now it's complaining that our div doesn't have a key so we can add a key equal to index usually not the best practice but you can also use stat. label as well cuz it's Unique in our case and then we don't need to have this index great now we have this representation of the layout but we are lacking some styling and if you were using regular CSS this is the point where you would have to jump into your style sheet open up the hero on one side open up the CSS on another and you would have to start adding classes to each of these elements remember even with typical CSS you would still need to say class name and you would have to then think what meaningful name are you going to give to this summer collection so maybe you say div above the heading this is not the ideal name right but still you would have to add some class names you would have to think what is the proper name to do it and then you would have to go to your Styles sheet and add additional Styles but with Tailwind you just jump right in and you start styling everything so our summer collection can have a text of excel to make it a bit larger it can have a font Das monat as well as a text- coral d red and this is it we're done with the summer collection you can just move down to the H1 the H1 can have a class name equal to mt-10 which is 40 pixels margin on the top to divide it a bit from the summer collection a font Das pacquin which is a bit different it's just going to give it that Poppy look and text- 8 XL so this is a huge font size but we need it for our big hero section we can give it a Max DSM meaning on Mac small devices text is going to be a bit smaller about 72 pixels you won't see this now but if you collapse the screen you can see it's going to become smaller also on smaller devices we can set the leading which is the line height to about let's do 82 pixels that's going to give it a bit less height and then font Das bold but now we want to change the Nike part of this so the first pan is going to have a class name equal to on extra- large devices it's going to be BG white now why would we want to make it white if the background is white well because on extra large devices it's going to go up above the image so it should look like this but on smaller devices it's just going to be regular white then on extra large devices we can give it white space no wrap and we can make it relative with a zindex of 10 so it appears above our background and a padding right of 10 as well so let's go back to see it okay looking more like it now we're dividing this so the new arrival is going to be on top and then we have a break and then we have another span which says Nike and we can give it a class name equal to text- Coral d red inline-block and margin top of three okay and finally we have to do something with those shoes so we can put them right here next to the span and that's going to give it some space right here this is already looking so much better almost like her finished site so and of course if you expand it just a bit more the new arrival is actually going going to go even more nicely right here in one line there we go so now let's focus on the statistics Brands and all that good stuff by styling our P below we can also give it a class name equal to font Das moner we can give it a text- slate-gray you do want to have just a bit of color differences but not too many here we have the coral red the black and this gray one we also want to make it bigger by giving it a text- LG a leading of eight margin top of six and margin bottom of 14 and on small devices Max DW is going to be small there we go so now it fits nicely like this then we have our button that we talked about and finally we have the statistics so let's style the text within those statistics by giving it a class name equal to text- 4XL to make it much bigger f- palic Quin and font Das bold okay this really stands out and again we want to have a class name of leading D7 font Das moner rat and text- slate-gray there we go so notice how we used just two different fonts right here to make it a bit more interesting and just three different colors you do want to have a bit of variety not everything one color not one font but don't go over two or three right you have to have some visual interest but still it all has to make sense as a whole and now we get maybe to the biggest part of the actual hero section which is the image that appears Below on large devices this looks much better because you can see it right here on the right side and you can even change which color you see right here so let's focus in the right part of the hero section for that we'll have to go all the way out within the section and a bit down let's create a new container div for the right side and immediately we can render an image within it and that image is going to have a source equal to Big shoe image and this is coming right here from the top and we can get it if we import big shoe one coming from SL assets slash images and now we can just go here and render the big shoe one and save it so if you go back you can see this shoe right here we can also give it an Al tag equal to shoe collection we can give it a width of 610 pixels and a height of 500 pixels and finally a class name equal to object Das contain as well as a relative and a zindex of 10 and there we go now it appears above the text of course we want a styled div that the image is contained within so we can give it a class name equal to relative a flex of one so it expands nicely a flex container justify Dash center items Das Center and this by itself should already nicely Center it on the screen and push the text a bit to the left but now on extra large we're going to make it a Min dh- screen so the Min height is going to be 100 pixels on devices with a minimum BD of 1,280 pixels on Max - excl we want to give it some padding y meaning on top and bottom of 40 we want to make it a BG primary which is just going to be white a BG hero which is a custom class a BG cover and a BG Center this is going to give it this nice image coming right from our styles now if you compare the two you can see that they're not exactly alike we have to still provide some padding or spacing right here on the left side and we can do that by creating a new div below the image right now we're creating a container for these three little images that are going to allow us to change the Big Image so before we add any styles to this div let's first create the content within it and this is my Pro tip for you when using Tailwind or just in general when making websites and layouts first put all the representation meaning the jsx the HTML the images the content put it in there and then start styling it and moving it around the website so first let's go over the shoes where are those shoes coming from well from do/ constants so right here at the top you can import shoes right next to the statistics then you can call the dot map method on those shoes where you get each individual shoe as well as its index and then for each one you can simply return a div and this div is going to have a key equal to Sho and in that case we don't even need an index and within that div we're going to create a new component called shoe card looking just like this a self-closing component now of course this is going to give us an error so we have immediately go into the components and create a new shoe card. jsx this shoe card is going to be an RFC again so we have just a basic component and then we can import it coming from data/ components SL shoe card right here at the top going below we can now provide some additional info to this shoe card info such as IMG URL which is the actual shoe itself that we're mapping over these are the images then we can also provide it the change big shoe image so this is going to be a Setter function which for now we can leave as an empty callback function and then we need to provide the actual big shoe image which is the current image that we're displaying for now we can leave this as an empty string now you can see that these shoe cards are not looking best right now they're just three pieces of text so let's go ahead and let's Implement them and turn them into real small shoe cards right here at the bottom so to do that we need to go to the shoe card component and accept all of the props we're nicely passing from the hero section the first one being image URL then the change big shoe image and finally the big shoe image itself once we accept all of these props we can simply start creating the representation the first one is going to be a div that's going to have a class name equal to border D2 rounded DXL and then we have to figure out if the current image is the currently selected beak shoe image which means that we have to change the Styles dynamically to either add or remove the border from the currently selected image this is a pretty cool thing so let me show you how to do it instead of just a string you pass a dynamic template string as a class name looking like this that then allows you to provide some logic to your class names so you can say if big Sho image is triple equal to the IMG URL in that case of course if we actually make use of this we have to wrap it what a dollar sign in currently braces and then we can open up a turnover operator and say border Das Coral Das red and usually it's just going to be border D transparent other than that we can give it some usual Styles like cursor Das pointer to make it appear clickable and then Max DSM Flex das1 so it's going to be Flex one on the minwidth of 640 pixels and we do want to give it an onclick of course this is going to go outside of the class name and that on click is simply going to call the handle click method and this handle click is a new function we're going to create right here cons handle click is equal to an error function and there we can check if big shoe IMG is not equal to the IMG url. big shoe in that case we can change big shoe image by passing the IMG URL do big shoe a lot of shoes right here but I hope this makes sense we're essentially just trying to figure out if the currently selected shoe is the one that's showing if it's not just change it with the one that we click on right now it's complaining about this big shoe image saying that it is not defined so it is supposed to be IMG and not image right here in the intro right here in the props so we can change that here and there now if we save this still we don't see anything that's because our div is currently empty so let's create another wrapper div and within that div an image and that image is going to have a source equal to IMG url. thumbnail if we save it immediately you can see three more shoes appear right there but of course they're no good if they appear there so let's give them an alt equal to Shoe Collection a width of 127 pixels is what I found works best and a height of 103 pixels finally a class name equal to object contain but now we have to put them somewhere in the screen by styling the div that wraps them so let's give it a class name first let's make it into a flex container give it a justifi dash Center and items Dash Center if we save it nothing's going change we can also give it a BG card which is a special class we created that's going to apply a background a BG Center as well and a BG cover too now we can on small devices give them a width of 40 also on small devices a height of 40 make it rounded - XL and make it on Max small devices a padding of four if we save it you can see them appear nicely right here but of course we're styling each individual shoe right now which is great because we are in the shoe card but now going back to the hero we have to style the div that wraps all of them so let's give it a flex to make these elements appear in a row great now on small devices let's make a gap of six and usually a gap of four will do let's make the position absolute so this is one of the cases where you have to absolutely position the elements to get them where you want them let's make it minus bottom minus and then 5% is what I found works really well this is going to push them down on small devices left is going to be 10% that's going to push them a bit and on Max small devices PX is going to be six okay okay we're getting there everything besides this padding on the left side is now looking good but of course we have to make this logic work so once we click on it we want to be able to change the Big Image right here to make it a bit more Dynamic so for that we'll have to create a new US State field so let's import at the top US state hook coming from react then we can Define it right here by saying use State and I'm going to use the state snippet I'm going to start typing big shoe IMG and set big shoe IMG and then we can pass in the big shoe one as the basic currently selected shoe now this isn't going to change anything because the states are not currently being used but we can actually pass them to our big shoe as the source so it's no longer going going to just render one it's going to render whichever one is selected and to make the selection work we have to modify the Callback function right here by giving it a shoe and then right here we can say set big shoe IMG and then pass the shoe as well as pass the current big shoe image so we know which one is currently selected once we do that and go to the shoe card now we should be able to see the Border even though we can select which shoe is currently selected we don't see that border so let's see what happened here we're passing the Border -2 we're passing the rounded Excel and then right here we're opening a new Dynamic block of code where we check if the big shoe image is triple equal to the image URL but we forgot the big shoe because the naming is a bit weird the URL itself actually is an object containing the big shoe which is the actual final URL and with that we now have the selection which is looking great and it actually changes the view right there great with that said we can now go back to Hero section to make some final adjustments well the adjustments we have to make are not in the hero but rather in our app.jsx because here we're wrapping our hero with a specific section so our hero is wrapped with XL padding of one I had here but it's supposed to be L as in large so this is going to immediately provideed that padding we've been so desperately looking for and now we are ready to move to the next section which is the popular products so we can close the hero and the shoe card and just leave the app and the popular products open but before we do that let's do a final look at how our hero section is looking on large devices which is desktop it's looking flawless I like how everything is centered in the screen you can see we have some padding on the left and on the right and that's because people generally have a narrow field of focus you cannot focus on the entire width of the screen at once some people have large 24 30 40 in screens and imagine if this page span across the entire Ultra wide screen that wouldn't be good that's why we give max weight to the pages which leaves this nice gap of padding on left and right so everything is still readable of course the knv bar follows so everything is nicely streamlined and as we collapse it we keep this layout for a long time as you can see here up to this point we still have the shoe selection but on tablet devices and smaller we just put this on top because that's what matters the most and then the image selection is actually on the bottom another thing you could do on smaller devices you could actually completely remove this entire section that would be okay as well because the hero is what matters the most but on smaller devices this is still looking good to me and with that said we are ready to proceed to the next section which is the popular product section and our popular products are going to be pretty cool because we already know how to do these little cards so now we'll be able to just tweak them a bit to make them into a card that contains the rating the name of the shoe and the price and the actual shoe image itself so let's get started working on our popular products it's going to be much simpler than the hero section trust me so I'm going to scroll down we have our popular products here and we are ready to get started developing it to get started with our popular products we can first import the products themselves from our constants by saying import products from do slash constants and let me show you what those are so these are simply going to be an array of four different products with different images names and prices and once again feel free to change this to whatever you like now inside of here we can make this a section this section is going to have an ID so we can scroll to it and it's going to be products and a class name equal to Max D container as well as a Max DSM mt-12 so this is a margin top on devices that have a Min width of 640 pixels within this section we want to have a div that's going to wrap everything and that div is going to have a class name equal to flex flex-all so the elements appear one below another justify Das start and g-5 this is just a div wrapping those two titles or a title and a subtitle so let's create it let's create an H2 that's going to say popular products and below it we can create a P tag that's going to say something like experience topnotch quality and style what are sought after selections okay that's great you can use chat GPT to generate your titles or you can just type something out yourself now let's style those two elements by giving this H2 a class name of text- for Excel f- pacquin and f-bold now this H2 is going to see popular but the product is going to be in a different color or rather popular is going to be in a different color so we can say our and then popular is going to be within a span element and this span is going to do just one thing and that one thing is have a class name of text- coral d red so if we save this you can see our popular products and put it in the same line so it actually has the space now let's style the P tag by giving it a class name of on large devices Max dw- LG Mt off2 for margin top font dasmat and text- slate-gray there we go looking great and finally we can start rendering the products below so we can go below this div tag still within the section and create a new div that's going to wrap all of the cards within it so let's give it a class name equal to margin top of 16 to divide it a bit from the top this is going going to be a grid large grid ds-4 so it's going to have four columns on large devices medium gd- co-3 small grid ds-2 and then usually grid ds-1 so this is pretty cool how you can immediately make it Dynamic and make it mobile responsive on small devices Gap is six usually Gap is 14 a bit larger now within it we want simply map over the products by saying products. map we get each individual product and for each one of them we want to return a popular product card we can give it a key equal to product. name and then we can spread everything else from the product by saying do do dot product and of course we don't yet have access to this card so let's create it by creating a new component called popular product card. jsx run RFC and then we have to go back and import it within our popular products coming from data/ components SL poopular product card and there we go if you're referencing the final code you might see something like this import popular product card within curly braces from Simply do. SL components this is an alternative approach but for this to work you will have to have that index.js file that's going to export all the components like we do have in the sections so if you're referencing something if it doesn't work just ensure that you have that index file in the components as well now that we imported it if we reload the page we should be able to see four different popular product cards if we change this to a we can just see four letter A's which means that we are ready to start creating the layout of our actual card containing the image price name rating and more so we're passing all of the properties of a popular product and that actually just includes the IMG URL so image URL the name and the price so we can wrap everything in a div and this div is going to have a class name equal to flex Flex F-1 flex-all w- full and then Max D small meaning on devices with a minimum width of 640 pixels w- full within it we can immediately render an image and this image is going to have a source equal to IMG URL alt is going to be equal to Simply the name of that specific shoe and then class name is going to be width is 280 pixels this is a specific pixel number so we have to put it within square brackets as well as H or height is 280 pixels as well so if you do this you're going to immediately be able to see these four great looking shoe images but we're not going to stop there below the image we're going to create a div and this div is going to have a class name equal to MT -8 to divide it a bit from the image Flex justify Das start and GAP -2.5 now within it we're going to have an image and this is just going to be an image with a source equal to Star the alt tag is going to be rating and the width is going to be 24 as well as the height now we don't yet have access to the star and that's because it's an icon coming from import Star which is from d/ assets forward slash ions if we save it you can see four different stars and next to the star or below it we can render a P tag that's going to say something like 4.5 of course you can make this Dynamic later on and have different values for each one of them this P tag can have a class name equal to f- monad text- excl leading dormal and text- slate-gray and we can also wrap it in parentheses just to make it appear like we have the star and then the rating is here just a little visual touch below this div we can have an H3 which is going to render the name of the shoe and then below it we can have a P tag that's going to render the price so if we save it okay it's there but we can make it look better by giving this H3 a class name of mt2 to divide it a bit text- toxcel to make it larger leading Dash normal to provide a 1.5 line height font Das semi bold and font Das Peloquin there we go and of course we can style the price by giving it a class name equal to mt-2 font D semibold font dmad this time text- coral-red text- toxcel and leading Das normal notice how we're playing with the same two colors and same two fonts to provide this visually interesting look and feel and believe it or not with that we're done with the popular product card as well as the popular products section or all together because we have our hero and we have our products and you can even scroll to it by pressing the products right here at the top so this is looking great of course if you want to improve this application even further one thing you could do is you can make this clickable and then you can make them point to a product Details page that you yourself will Design and develop so that's a great thing you can do post it on LinkedIn and tag J Mastery so we can share your work with that said let's move to the next section which is the super quality which sounds pretty interesting but what it actually is is this unique section with an image on the right side and three pieces of text on the left side again pretty simple stuff we have the button designed already we know how to do this to color title and we know the styles of these Pags we're just reusing what we already have so let's get started our super quality is also going to be a section that's going to have an ID equal to about- us which is going to allow us to scroll to it we can also give it a class name equal to flex and while we're doing that we can move over to our current website to check it out it's also going to have a justify between because we want to have some space on left and right and items Das Center to center it vertically we also want to do Max LG and want to give it a flex Dash call which means that on devices that are lower than 1024 pixels we're going to have a column and then gap-10 to provide some spacing w-o and a Max container class name which is going to ensure everything is contained within our F width immediately within it we can create a second wrapper div this div is going to have a class name equal to flex Flex D1 and flex Das Co and this is a div that is wrapping this text as well as the button so immediately we can start creating the H2 within it we're going to have a P tag as well as a button and this is all so similar to our initial hero section so similar in fact that I'm going to move to our hero section and copy the P tag the break the span the H1 as as well as the button because we're going to use all of these elements right here within our super quality so I'm going to Simply paste them right here and we have to import the button coming from do/ components SLB button and this button is not going to have an icon so we can simply make it say view details great now if we go back here you're going to notice this is not what we want surely right we can now modify the the elements that we copied starting from the P tag in this case the first element is not going to be the P tag so we can simply remove it but rather an H2 so we can modify this H1 to say H2 it is going to start with f- pacquin text 4 XL not 8 not as big as the hero it's going to have a keyword of capitalize which is going to make the text capitalized of course and we can remove everything else besides font Das bolt if we save it it's already looking more like it but we can also say on large devices Max dw- LG so this is going to just limit the max width of the text now within this H2 we can remove the first span and simply make it say we provide you and then we can have a span right below it this span is going to have just one class of text- Coral d red and it's going to say super okay so we provide you super and then we can duplicate this span element and say quality okay and then after the pan we can say shoes so if we save this we provide you super quality shoes just like on the finished side and now we can focus on the P tag right below it so right below the H2 we're going to have a P tag and this one is not going to have font Monster Rat or text grade or stuff like that it's just going to have a class name of margin top of four to divide it from the top on large devices Max dw- LG and infotext so this infotext is actually a class name that we created that applies all these Styles we usually apply to all text elements like text slate gray LG leading s and and Monster Rat this allows us to more easily reuse it right here so let's copy this entire piece of text and past it here ensuring premium comfort and style and right below it we can create another P tag that's going to say our dedication to detail and Excellence ensures your satisfaction and we can give it a class name of mt6 on large devices Max dw- LG and also info text if we save this and go back you can see this is looking more like it but this button definitely shouldn't expand the full width so let's simply wrap it in a div that's going to have a class name equal to margin top of 11 to give it some space and put it within it if we do that it's now going to take the full width of this container which is much smaller you can also notice since we're not passing the icon that that the image appears to be broken so by going into this button we can only render the image if there is an image so we can say if icon URL and and only then show the image otherwise don't show it which is now going to look great view details great so going back now the entire left side is completely equal to what we have on the right side and the last thing we have to do is just under the image so we can go below our div wrapping the button and Below another div and create a wrapper div for the image that div is going to have a class name equal to flex das1 Flex justify Center and items Das Center to fully justify it both horizontally and vertically and within it we can render a self-closing image tag with a source of shoe eight coming from data assets for SL images it's going to have an ALT equal to shoe 8 a width of 570 and a height of 522 which I found works the best and a class name of object Das contain now if we save this and go back you're going to notice that this is going to look exactly as it does on the deployed side so now not only do we have a wonderful looking hero section we can scroll to our popular products and keep moving down to our super quality section this is looking great and we're nailing these sections as we go Services special offer reviews subscribe and footer are remaining so let's continue with the services we can go back to the app and just control click to go into the services the services section is going to be interesting it's not really a section it's rather one component that we're repeating three times this specific card so right within Services we can immediately return a section that's going to have a class name equal to Max Das container Flex justify Dash Center to Center horizontally flex-wrap so that the cards wrap if we go on smaller devices and GAP to provide some spacing between the elements within it we want to map over the services and these Services we can import from constants so import services from d/c constants and if you look into it it's just going to contain there we go an array with three different objects containing the image URL for the icon the label the subtext and this is more or less it so now we can simply say services. map and for each each individual service we can immediately return a self-closing service card self-closing component to which we can pass a key equal to service. label as well as we can spread the entire service and of course now we have to go to components and we have to create the service card. jsx run ource within it and finally imported within our services once you do that and go to our site you can see three different service cards which means that now we can go into the service card and we can start making it look better by first of all importing the props for each individual card such as the image URL the label as well as the subtext each one of our cards is going to be a div that's going to have a class name equal to flex -1 so it expands if need be on small devices the width is going to be 350 pixels on small devices the Min width is going to be 350 pixels as well and W is usually going to be full meaning full width rounded is going to be 20 pixels so the cards are going to be just a bit rounded and they're going to have a shadow of 3XL so it appears like they're flowing above the screen a padding X meaning on left and right is going to be 10 which is about 40 pixels and a padding Y is going to be 16 so this is about 64 pixels that's going to make it have this specific look within this div we can create a div that's going to wrap our image so we can immediately render the image that's going to have a source equal to image URL alt is going to be a label a width is going going to be 24 pixels and a height is going to be 24 pixels this should show three different icons but they will only show once we apply class names to the above div that's wrapping it so we can give it a class name of w-11 for width h-11 for height justify Dash center items Das Center and BG Das Coral Dash red and finally rounded Das full this is going to make these icons come to life of course only if the justify centered and item Center have Flex applied so right here we have to make it a flex container for these to work immediately after below the div containing the image we can render an H3 tag this H3 is going to render the label and then below it we can render a new P tag that's going to render the subtext so if we do this right now and save it it's going to look good but it needs some differentiation between the H3 and the P tag so let's simply apply a class name to our H3 that's going to say mt5 to divide it from the Icon font Das pacquin text- 3XL to make it larger leading Das normal and font Das Boldt finally for the last name for our P tag we can do mt3 to divide it from the top break-word this is an interesting one it's going to apply the Overflow wrap of break words so it's only going to break on a specific word not on a specific letter font is going to be monserat text is going to be LG or large leading is going to be normal and then again we have the text slate gray right here so there we go we have our three cards which are identical to the cards that we have right here now we can move over to the special offer containing two buttons and some images again I hope you can notice that this special offer is almost exactly the same as this one right here so we can just copy the part from this section and we can do that by going all the way back to Super quality and just copy the div that has these H2S P tags and buttons within it so if you copy it go back to the app and move into the special offer we can get started with creating this great part so immediately we can just wrap everything in a section and that section is going to have a class name equal to flex justify Das wrap items Das Center so we're really centering everything on Max DXL devices we want to give it a flex D C- reverse that means that it's going to be Flex column but the elements are going to appear in a reverse order on mobile devices and then a gap of 10 as well as a Max container now within this section we definitely want to show this image containing the 30% off and here's what I said on extra large devices this is going to show right here on the left side but as soon as we go deeper it's going to behave the other way around so if we go smaller you can see that the special offer is going to appear on top hence we have the flex Co reverse but still we have to Define it so that this is the number one here so we're going to immediately create a div that's going to have a class name equal to flex das1 and then Within in that div we can render that self-closing image tag it's going to have a source equal to offer and that's coming from data/ assets SL images it's also going to have a width of 773 pixels and a height of 687 pixels I found these values to work the best and a class name equal to object Das contain as as well as w-o so now if we save this and again make sure that you imported this actual offer image you should be able to see a huge image right here and right below this div containing the image we can paste the div that we previously copied from this section right here so simply paste it there and don't forget to import the self-closing button component if we now save this oh my God this is already looking really close close to the final product we just have to change some wording right here so instead of saying we provide super quality shoes we can say something like right here within this pan that's going to be special we can remove this text before and then here we can say offer outside so special offer and no shoes right here and we can make it fit right here to look good then we have a P tag and here we can copy these two elements so the first P tag and the second P tag there we go and we can make it all look nice and tidy and finally instead of one we have two buttons right here on the finished website so instead of view details we need a shop now and learn more so let's make this div containing the button a flex container give it a flex wrap and a gap of four here we have the shop now button and this is going to be a regular one that's going to have also the icon URL so icon URL and it's going to contain the arrow right coming from do/ assets slash ions but now below it we want to have another button and this button is going to have a lay of learn more we're going to pass it also a background color equal to BG white a border color equal to border slate gray and finally a text color equal to text- slate-gray now we can dive into that button and accept all of these new props that we're now passing into it these are going to be background color text color as well as a border color and now we can make use of them right within this button component so first of all here we're going to make this class name Dynamic so we're going to wrap it and make it into a template string so here we can wrap this and what we have is now the ability to apply some additional class names depending on specific conditions so after leading none we can leave some space right here and open up a new Dynamic block of code where we look into the background Coler if we have it then we apply a class name of background color as well as text Coler and a border Coler but if if we don't have the background color then we do the regular BG coral red text white and Border coral red and we end up with something that looks like this of course after we nicely space it out there we go and we don't need a closing square bracket I hope this makes sense so we check for the background color if we have it that must mean we have the text color and the Border color as well we make them Dynamic else we make it just a regular one and now here we need to ensure we're closing everything properly so let me check that right now I do believe that we need to close the curly brace right here and we can do that right after the background coral red of course we can bring the rounded full outside right here and right now we're full of errors but essentially what you should have is a button that looks like this where you have a dynamic class name where you check for the background color if you have it you apply those colors else you apply regular ones so in this case we have our super quality where we have a regular button which we can see here but then we also have a learn more button with a background color of BG white border color and text color so it should also show right here considering we made those changes but as you can see on our current side the button is not there as it is on this side right here and the reason why it's not appearing is because I was creating it within the super quality so now it's here instead of here so I can just copy it close this page right here go to our trusted app.jsx move into the special offer and just paste it right here below view details of course we also have to move the styles from the div that's wrapping it which are going to be be these ones right here Flex Flex wrap and GAP four we can remove that from here and move it over to special offer div after the mt11 so if we do that you can see that now we have a great special offer and with that we're back to the app where the next section is customer reviews but regarding everything that we have right now it is looking perfect all the way from the homepage to popular products are super quality three services card and a special offer it's looking great one thing that I can see could be added are some cool animations right here so maybe once you refresh the upcoming sections can slowly roll in or maybe even animate on hover or something like that another cool thing for you to add but with that that said let's move to the next section of the day which is customer reviews so I can collapse this right here and we can get started our customer reviews are not going to be much different than what we're used to doing with our other sections and components it's going to be a section and of course later on we're going to import some kind of components into it but I think you can get the point of where we're going with this first doing the layout separating everything into components and then adding additional styling using Tailwind at all times ensuring that we reuse our classes we reuse some of the components and just keep the code clean by importing everything at the top and not defining it within these sections themselves the point of this video is is not for you just to watch them and replicate what we're doing if at any point or right now so far in this video something wasn't 100% clear to you my goal is not for you to just replicate this it's for you to actually learn it so if you have any questions just go down in the comment section and ask me the goal of this is for you to actually learn how to create simple landing pages and how to utilize the full powers of Tailwind so with that said let's start implementing our customer reviews we're going to have a simple section that's going to have a class name equal to Max Das container right within it we're going to have an H3 and that H3 is going to say what are then we're going to have a span element within it so what are a span that's going to say customers and then finally we're going to have a new line say something like this and all of this is within the H3 now we can save this and immediately you can see it right here let's also give it a class name equal to f-p palaquin text- Center text- for Excel and font Das bold and at this point I think you can also start noticing how much specific class names are getting repeated by now you definitely know how to set up a specific font Center the text change the boldness of the text as well as its size writing Tailwind classes is like speaking A Lang language there are studies that show that in English language the most common 2,000 words make up for 90% of our conversations so that means that if you learn how to use the most common classes you're going to know how to do the majority of stuff and for the last 10% you can always look up the dictionary or in this case Tailwind CSS docs so with that said let's apply a class to our span which is going to be text Coral red there we go and we also have to provide some spacing within the span element so it looks like this now below the H3 we can also have a P tag and there we can say something like hear genuine stories from our satisfied customers there we go and of course we need to style it by giving it a class name equal to info Das text margin Auto margin top for Max dw- LG and text- center and now we can create a div right below this B tag that div can have a class name equal to margin top 24 Flex Flex das1 justify Dash evenly this is a good one not use so often but a quick Google search of justify evenly will show you what it is for so if you look at the justify content specifically in tail with docs and search for evenly it's going to apply space evenly and if we search for it you can see that it's going to even out all the spacing so that there is the equal amount of space around each item pretty cool we can also do item Center to Center vertically on Max LG we're going to turn it to flex Co and gap-1 14 between the elements now here we can map over the Rev RWS so we can import reviews from do/ constants and then say map where we get each individual review and for each one we're going to return a review card component which is going to look like this a self-closing new component that we are about to create so there we go it's this one right here and we can create it within the components folder revieww card. jsx and we can run RFC inside of it and we can import it right here import review card coming from data/ components SL review card and now we can pass some additional props to it in this case we'll have to pass the key which is going to be equal to review Dot and we can do something like customer name because that's going to be unique for sure we can do the IMG URL equal to review. IMG URL customer name is equal to review. customer name rating is equal to review. rating and feedback is equal to review. feedback and with that we have everything we need to dive into the review card accept those props and get started with creating a layout that's going to look like like this now there's a question I want to ask you when it comes to you watching these videos and getting value from them as I said it's one thing to just simply flow through them and rebuild what I build but how are you finding this educational material do I speak too loud am I usually a bit too excited to convey the data or would you prefer the way I'm speaking right now kind of a more laidback approach where it's really like I'm talking to to you as a friend friend that could be potentially something that you prefer more over the excited approach or maybe not let me know and just let me know should they slow down should they speed it up whatever you think any feedback is appreciated so just say here's the recommendation and then type it out in the comments whatever your thoughts are on how I can help you in a better way just let me know okay with that said let's get all of those props at the top such as the image URL customer name rating and feedback and we can start writing this out by giving this div a class name equal to flex justify Dash Center to center items horizontally items Dash Center to Center them vertically and flex Das Co to make them appear one below another there we can have a self closing image tag that's going to Simply render The Source IMG URL which in this case is the URL of the customer so we can render the customer right here with a class name of rounded Das fo because that's how we usually show avatars it can also have the object cover as well as w-1 120 pixels and height - 120 pixels as well if we save this you can see these two great looking people right there and let's hear out what they have to say about Nike so there we can render their feedback okay this is looking pretty good then we can below the feedback show a div and within that div we can render a self-closing image that's going to contain a source equal to Star and this star is coming from assets SL ions there you can change the width as well as the height of that star to 24 and give it a class name on object D contain and m-0 for zero margin finally below the image still within the div you can render a P tag that's going to Simply render a rating within parentheses so it's going to look something like this and of course we need to know who these people are so below this div you can render an H3 rendering the customer name great so we have moric and Loa and now we can position these reviews a bit better so they make more visual sense so we can start by providing a class name to the feedback element and it can have a margin top of six a Max DW small text- Center and info Dash text of course I am missing an O right here okay this is already looking so much better now we can style this div that's going to be used for rating by giving it a margin top of three Flex so that the rating appears in a row justify Dash center items Das Center and a bit of a gap of 2.5 finally we can style the P tag by giving it a class name of text- XL font Das moner rat as well as text slate gray right here okay that's looking better and finally the H3 for the name by giving it a class name equal Al to mt1 font dasp palaquin tt-3 Excel to make it much bigger text- Center and font Das bolt there we go this is looking exactly like it does on the deployed website and with that we're done with the review card and the review part was the last part of our customer reviews which means that now if you expanded this is looking great of course if you want to you can provide an additional review and it's going to still nicely fit on the screen with that said we can move to the Subscribe section which is going to allow people to sign up for updates and newsletter from Nike to receive some great news so let's do that right away by moving into the Subscribe section and doing the Subscribe section is going to be one of the easiest parts of our app as you already know how it all goes so we can simply create a new section right here and give it a class name equal to Max Das container Flex justify Dash between items Das Center on Max dlg we can give it a flex Das call so it appears in mobile devices and then gap-10 we can also give it an ID equal to contact us so this is going to move us down this section and we can start with an H3 that's going to say something like sign up for and then again we're going to have that span and then within the span we can have updates and we can also say and newsletter right here so if we save this and go back you can start seeing the outline of what we're about to achieve so let's give it a class name equal to text- 4XL leading D68 pixels is what I found looks closest to design LG on large devices Max D wmd font D picin and font Das bold finally for the span we want to give it a class name of text- coral-red and this is looking better of course after we provide some spacing so I can make this Span in a single line and just give it some spaces before and after now below this we want to render a div and within that div we're going to have an input this is going to be a self-closing input of a type is equal to text with a placeholder equal to subscribe at nike.com And A Class name equal to input there we go finally below the input we can have a div and within the div we can have a button component it's going to be a self-closing button which we have to import from components slash button with a label equal to sign up and we're going to also give it some new property which is called Full width so if we go into the button here we have w- full but what we can do is we can only show that if our button actually is full width so at the top we can get the full width property from props and then here we can say if full width and and only then do the full width like so and we have to close it here so for now it doesn't appear it's full width but soon enough you'll see as soon as we give additional class names to this div it's going to extend to the full size of the div itself so if we give it a class name of flex on Max SM justify Das end items Das Center and most importantly Max DSM w- full so it's going to take the full width of the screen now this div is within this div right here so we also have to provide a class name to the div above and let's give it an LG Max DW of 40% so on large devices they're going to take 40% of the width of the screen usually w- full so here you can immediately see that it jumped below now let's also give it a flex items Das Center Max DSM Flex Das call so in mobile devices it's going to be in a column usually it's going to be in a row Gap -5 padding -2.5 on small devices we also want to give it a border and also on small devices the border is going to be slate gray and it's going to be rounded so here we have that actual input field and if you compare it it's not quite there we're missing the rounded full so rounded Dash full and there we go so now it's looking much closer to what we have on this side right here as a matter of fact this completes our current section which means that we only have the footer that's ready to go this footer contains a lot of stuff Nike is a big company and they have a lot of things to Showcase such as their products help get in touch terms and conditions in the copyright as well as some information about the company this is great for interlinking within the pages and in general good for SEO so now we can go out of the Subscribe and move into the footer section the footer is going to start as a footer HTML 5 semantic footer Tab and within it we can render a div that's going to wrap some of the content within it the footer itself is going to have a class name equal to Max Das container we can save it and already check it out right here it's pretty empty so there's not not a lot to see but this div within it is going to have a class name equal to flex justify Dash between items Das start g-20 to provide some spacing flex-wrap and on Max large devices we're going to also do flex-all so on devices that are larger than minimum width of 1,24 pixels it's going to be column instead of a row within it with we can render a Dev that's going to contain the link to the start of the page or this logo that's going to say Nike so there we can give it a class name equal to flex flex-all and items Das start within it we can render an anchor tag that's going to Simply have an href all forward slash meaning home and there we can render a self-closing image tag that's going to render the footer logo coming from da SL assets SL images that's going to look something like this it can have a width equal to 150 and a height equal to 46 just to make it a bit smaller and we can also put a side by side by the editor so we can see the changes live now within this image below the anchor tag we can have a P tag that's going to say something like get shoes ready for the new term at your nearest Nike store so we can simply copy that text from the deployed site and give it a class name equal to right now we cannot even see it because it's dark mt6 for margin top text-base leading -7 font D Monster Rat text- w-400 and on small devices maxw DSM which is going to make it appear just like so because it's going to decrease the width that the text can go over finally we want to map over many of our new social media icons so just below the P tag we can create another div it's going to have a class name equal to flex items Das Center g-5 and margin 8 or margin top of eight and there we want to map over social media coming from do/ constants so map and then we can render over each individual icon that belongs to a specific social media platform for each one we can return a div and within the div we can render an image that's going to have a source equal to icon. Source SRC alt equal to Icon doal and a width of 24 as as well as a height of 24 if we save it you cannot see them yet because they're dark so we have to style the div that's wrapping it and we can do that by adding a class name to this div of flex justify Dash center items Dash Center to really Center that icon both vertically and horizontally a w of 12 pixels as well as a height of 12 and this is not 12 pixels it's h12 which is a Tailwind measure so actually it's going to be three r or 48 pixels for that matter and a BG white as well as a rounded Das fo so it's going to create these three nice 50 pixel circles now below these two div we want to create a new section and this is going to be a section for our products help and get in touch so what we can do there is we can create a new div that's going to have a class name equal to flex Flex das1 justify Dash between this time on large devices a gap of 10 and usually a gap of 20 and then a flex wrap in case we don't have too much screen width now inside of here we want to map over footer links coming from do/ constants so we can say map and for each section we want to create a new div that's going to have a key equal to section so let's see how do our footer links look like we have three sections products help and get in touch and it's the similar case right here if you look into the footer links belonging to our constants you can see that this is an array of three objects where we have a title of that section and then an array of links within the section itself so we can create a section and then we can create an agent Four Element within that section with a section. tile we can immediately give it a class name equal to text- White so we can see it right here below the H4 we want to create a UL an unordered list and there we want to say section. links. map where we have each individual link and then for each one we want to render An Li a list item and within the Li want to have an anchor tag that's going to render the link. name so if we save this you can see all the links but of course we are yet to style them so let's style the H4 first to make it a bit bigger alongside text white it's going to have a font D moner rat it's going to have a text to excel that's going to look like so and I can move this cursor right there so you can see it leading Das normal as well as a font Das medium and margin bottom of six so now we have these sections and now we need to style each individual list item by giving it a class name of margin top three text- white- 400 font D moner rat text-base leading Das normal and if you want to be super playful you can give it an on Hover called of text slate gray now if you save this you can see that now you have fees and you can also make them cursor pointer that means that they are going to be clickable there we go this is looking much better and each Li has to have a key so we can give it a key right here equal to link. name there we go finally we need to do the last section to complete this footer which is the copyright section so we're going to go one more time below these three braces and then below two more divs right where the ending footer tag is and we're going to create one final wrapping div this div is going to have a class name equal to flex justify Dash between because we're going to have elements appear on two different sides and then text- white- 400 margin top of 24 on Max small devices meaning Min width of 640 we want to have it as Flex Das call so this is going to be in mobile devices and on Max Das small devices also items Center so if we go all the way really small we need them to show one on top of another in the middle there we go so going back we can now actually start adding things within it and the first thing we're going to add is going to be another div and this div is going to to have the copyright image sign within it so let's have a class name equal to flex Flex D1 justify start items Center and GAP two as well as font moner rat and cursor pointer in case somebody wants to read our copyright and we can here render a self-closing image with a source equal to copyright which can be imported from do/ assets icons with an Al tag equal to copyright a width of 20 and a height of 20 as well and it needs to be rounded so a class name of rounded Das fo can go well with the margin zero so now we can see this copyright signed and right below it we can WR A P tag that's going to say copyright All Rights Reserved there we go and finally below this div we can have one final P tag that's going to say terms and conditions and we can give it a class name equal to font D monad and cursor Das pointer and there we go this completes our footer and with our footer complete I believe we can now go back to our public folder or rather our index HTML and at least I can remove the working part out of it because we're no longer working on the website we have successfully completed the last section here so we can now proudly expand this to its full Glory we can see the nice footer and slowly scroll to the top through the newsletter signup form to testimonials as well as this great special offer tab Services quality super quality and then we have some additional popular products and finally an interactive hero section where you can change some shoes right here all of this is looking great and of course it is completely mobile responsive so even on the smallest of devices it is looking great and it almost feels like a native mobile application we also don't have a lot of animations here so it's going to be super optimized and it's going to load incredibly quickly of course I want to leave some stuff up to you to add some animations maybe even a product detail sections if you do add those things and modify the design a bit maybe make it not Nike but some other company tag me on LinkedIn at JavaScript Mastery and we're going to gladly reshare it but with that said we're now moving on to the last part of every single JSM video which is the deployment process you can be proud of building this out and now we are ready to deploy it to hostinger incredibly fast servers with a custom free domain so let's get started to deploy our project you can open up the terminal stop it from running by pressing contrl C clear it and then run mpm run build this is going to create an optimized production build of our react application and allow us to upload it to hostinger fast server in just 1.94 seconds the build is created so you can go to file and right here you'll see a new disc folder which you can rightclick and then click reveal in File Explorer or find in finder if you're in Mac once you open it up you'll see that you have assets favicon and the index which means that we are ready to go back to hostinger open up the control panel that we created at the start and if you haven't done that ready go back to the start of the video and choose a new domain and connect it with a specific hosting then go to file manager it's nice that they provided this new do not upload here document you need to move within the public HTML remove the default PHP and then simply drag and drop all the files right here it's going to upload them within less than a couple of seconds which means that you can close this and just open up the domain and just like that within less than a minute the website you've been working so hard to develop is now online on the internet and it is https secured which is great the domain is right here you can share it with your friends and it is super fast to load let's not forget that it is also 100% mobile responsive so now you know you know how to use Tailwind to create beautiful looking applications you know all of the best best practices and we went together through the process of developing one such application all of this has been incredibly educational for me at least and I hope you shareed that opinion with me with that said it was a true pleasure having you watch this entire video and since you're still here it means you're the perfect candidate to expand your learning so much more through additional project-based coaching really soon we're releasing a new next year 13 course which you'll be able to see here if it has been released and on top of that we also have our Flagship masterclass experience which allows you to get employed as a professional developer within 6 months of graduating so if that sounds interesting and if you're not a beginner definitely look into it with that said one more time thank you so much for watching you are great and have a wonderful day [Music] [Music]

Channel: JavaScript Mastery

Views: 320,035

Keywords: javascript, javascript mastery, js mastery, master javascript, tailwind, Tailwind CSS, Tailwind CSS Tutorial, Web Design with Tailwind, Tailwind CSS Basics, Responsive Web Development, Custom Styling with Tailwind, CSS Utility Classes, Tailwind UI Framework, Tailwind CSS Components, Tailwind CSS Customization, Modern Web Design, Tailwind CSS Showcase, Web Development Tools, UI Kits with Tailwind, Bootstrap vs Tailwind, Tailwind CSS for Beginners

Id: tS7upsfuxmo

Length: 169min 57sec (10197 seconds)

Published: Fri Aug 18 2023