Ruby on Rails E-Commerce For Beginners

welcome back to corey's corner this series is brought to you by thoughtsonfitness.com if you want to build your dream body head on over to thoughtsonfitness.com and check out their monthly workout plans for only seven dollars a month you get access to high intensity and interval training strength and conditioning functional movements pilometrics and nutritional guidelines plus a whole lot more that's thoughts and fitness dot com guess who built thoughts at fitness.com it was me and in this series we're going to teach you how to build thoughts in fitness.com so if you're new to rails you're going to learn a whole not a whole lot in this series we're going to teach you how to use gems like simple form devise you're also going to have ex learn how to use tailwind css which is a front-end framework we're going to install that gem in just one second so if you're new to tailwind it's just like bootstrap or any other framework but i like it more because it has breakpoints in the css it also has a whole bunch of really great looking components i definitely want to purchase the um oh they have new e-commerce ones yeah i definitely want to purchase some of the the premium ones they have in the future but anyway um where was i going so yeah i'm going to teach you how to use tailwind css basically and a whole bunch of other gems we're going to go over best developer guideline practices we're going to obviously be writing some tests and you're going to learn how to build a whole lot of neat controllers we're also going to go over stripe and stuff like that so there's a whole lot that's going to go on in the series but the first thing we need to do is we need to make our site look great so we're going to install the rails tailwind css gem so you're going to run this command first this will install the tailwind css rails gem in your gen file and then you will run this right here and that will install tailwind on your application so i've already done that um the next thing that we need to do is we need to make a controller and this is going to hold our landing page so i'm going to do rails g controller it's going to be home and then it's going to have the home action and then we need to make this root in our routes i already did this right here route 2 home home so what this basically means is set the route of our application to the home controller's home action and just in case you're watching this in the future i'm on rails version 6 with ruby 2.7 um hopefully that doesn't mess anything up and then what we're going to do is we're going to we're going to create a nav bar so we're going to do touch underscore app backslash views oops add backslash views backslash underscore nav.html.erb so this underscore this touch this command is um to create a file so we're creating a file nav.html.urb inside of the app views directory and the underscore means that it's going to be a partial so i'm not going to run the command because i already did that but if you run that command you can open up your views layout folder we see we have this file right here because it's an underscore it is a partial which means it can be rendered inside of other html classes so to render a navbar in each one of our pages we're just going to come over to our application.html erb we're going to come over to the body tag we're just going to do percent equal render directory then the file name so it's layouts underscore backslash nav you don't need the underscore um so i used to be able to do this but for some reason i have to include the full path name for it to work and i'm going to start my developer server and i'm going to show you the nav bar i built i'm not going to be coding a lot of the html um in the series if i have a big block of html like a nav bar i'm just gonna show it to you guys on screen then you can do it because i don't wanna waste your time and my time let's be honest so i come on over i can come to localhostport3000 we see we have our navbar up right now everything is just linking to root and we're going to walk through some of this code real quick make this nice and large so you guys can see everything so pause the video here create the nav bar or you can listen to me talk either or just create the nav bar so this is our nav bar you'll see we have link two thoughts and fitness dot com this is the big one over on the left the big link over on the left and typically i like to reserve this link it'll just take you back to home which will be the route and i always like to make this the title of the application so then next right next to this we have a nav class and you'll see we have a bunch of break points here so pb i mean well let's go over the breakpoints before i go over padding so we're applying the medium break point right here if we hop on over to the tailwind documentation we can see where these break points are so i need to get here command f nope oh i can just search right here breakpoints so a breakpoint is just an arbitrary point a sign a place on the screen where we want our something to be applied so you have here the md break break point is at 768 pixels and this is the same as saying at media min with 768 apply classes if you don't know what this means don't worry about it all you need to know is that at 768 pixels plus this class is going to have a bottom padding of zero at 768 pixels plus this is going to have a class of flex so if i did at lg pb1 it would be between these two breakpoints so this it'll make more sense so right now i have md pb0 and lg pb1 that means between 768 and 1024 there's a bottom padding of zero but at the lg break point and up it has a padding of one so when you apply a break point if there's no other break points applied it is from that break point up from that size of screen up that that class gets applied unless you apply another class at a higher break point then it is from there on up i kind of confuse myself i hope that makes sense on to the next thing so i do have one knock for tail one two knocks actually but i think tailwind looks great i love it that's why i use it for this tutorial but the classes are very verbose like this is a whole lot of code which is why i saved it in a variable so we have px padding horizontal we have text sm text small font semi bold background bg transparent you'll see with the colors you have shading so the lower the lower the number the the lighter the shading the higher the number the darker the shading so 900 will be dark where 200 would be lower but yeah the point is that tailwind has very verbose classes so when you have um when you're applying a class repetitively what i like to do is just save it in a variable and then you can slap it on in there and it works just great so that's all i got for this video i will see you in the next one we will be building the next part of our landing page and we will be building a daily workout controller or i don't know what we're gonna do i gotta figure it out but thank you for watching be sure to subscribe and listen to my podcast etc

Channel: Corey's Corner

Views: 315

Keywords:

Id: BMcF0yQ9dWg

Length: 8min 16sec (496 seconds)

Published: Mon Aug 16 2021