Ruby On Rails E-commerce Tutorial For Beginners Ep. 2

welcome back to corey's corner this episode of ecommerce with rails is brought to you by thoughtsandfitness.com it's thoughtsinfitness.com for only seven dollars a month you can have access to premium monthly workout plans so in this video we are going to be building this little header section of thoughts and fitness dot com with these two buttons and this sexy little line over here now if you're a fan of rails i'm sure you've heard of getting real in base camp these are the guys who invented rails and getting real is just one of their many books on making web applications i use a lot of the getting real process not only when i built thoughtsinfitness.com but when i built some of my other projects as well one of the main takeaways i had from getting real was that you don't really need to be an expert in anything to be a full stack developer you just need to know enough and when i was building thoughtsinfitness.com i didn't use any css this is all tailwind and these are even tailwind components this is all reusable stuff so if we come on over to the tailwind documentation we can check out this component right now so a component is just a pre-built section going over the hero section we're going to want to see the code and make sure this is on html so we scroll down we scroll down well first we're going to need yeah we're going to need to go from this main all the way to the bottom so we can just copy this and then we're going to place this inside of our home controller so our so this component it's origin it originally uses the indigo color but we want our site to be red so we're going to go do a global uh find and replace on the word indigo so in my system on ruby mine it's command f on your text editor it's going to be different so just look how to do that up but then we change indigo to red just like that oops we don't need to do enter but anyway that is that so up here this first span we can just type thoughts and down here we can type and fitness and then we can just we're not going to do anything in this paragraph so we're just going to delete all that so that was shift command right on mac os that what i just did there and we're going to do join now down here but we also need to add a div element you'll see that these are highlighted because we don't have all our divs so this is going to have a class of relative bg white background white overflow hidden by all means if you don't know any of these classes feel free to look them up in the tailwind docs so we have another one div class max w 7 xl mx auto and then we have one filler div class actually i don't think we really need this one but we also need to add our lion picture so what i like to do both in production and when i'm giving a demo for a client if i need stock photos i come on over to unsplash.com the tool i use a lot is developer so i just downloaded this photo from mr eric combo sorry if i it's definitely a french name but i butchered it so i downloaded this photo it's all for free and i use that for this tutorial so you're going to want to come on over here i just named it lion.jpg you drop it in the images folder which is inside of assets and now you have access to it so to use an image in a view i don't think i've gone over this in past tutorials you want to use the image tag helper so you do percent equal image underscore tag and you just pass in your file name lion.jpg and then we want to copy this class right here and then we can delete this shift command boom boom boom and we're gonna rail five these links later when we actually have working links but for now we can just leave them in plain text html if i come on over i should be pretty much all set with this and my lion link is not working what happened what the heck happened let me restart the dev server i think i need one more div maybe i do need one more div i think that was it oh i don't know why webpacker is taking so long to compile this but anyway yeah our website is now up and running um so you might want to use another image i might change that later but i'm going to keep this as is so just to review unsplash.com is a great resource for finding stock photos for your websites you can use components to basically build a dope looking website with little to no work you usually just have to make a few modifications um they also have premium composites components on um tailwind which i will check out later and you should definitely read the getting real book these are the guy it's free actually you can download a pdf and read it online it is my the bible of web application development that's it for this episode in the next episode fingers crossed we're going to get into some cool rail stuff we're going to be building a dynamic form to make workouts of the day but until then be sure to subscribe to this channel please my podcast and check out my medium for more rails content thank you

Channel: Corey's Corner

Views: 98

Keywords:

Id: _IgL12vPyr0

Length: 6min 30sec (390 seconds)

Published: Mon Aug 16 2021