Website Redesign - Gridsome & Tailwind CSS v1.0

what's up guys Andre here and today I'd like to implement the redesign of my website and share my process along the way so my original website was built in 2013 and obviously a lot has changed since then I finally made time to update my website and just wanted to document the process so this is probably gonna be a really long video and it's gonna be a lot of rambling on my end about different things from design to the actual technologies I'm using and my different opinions on things about my website so let's start off by cringing on my old website and then I'll show you my thought process on the new one so yeah here is my current website which like I said I built in 2013 it's a wordpress site with a custom theme I built from scratch using WordPress not WordPress it's using bootstrap 2.0 which is a very early version of bootstrap I also believe it's using the CSS less process preprocessor so yeah take a look at this five six years later it's actually not bad in terms of the design the typography is okay here with some nice bold text mixed with a nice script font the primary color is this blue which I took from the logo and these cards look pretty good too with some nice hierarchy in the typography it's a nice transition here so yeah overall not bad for something I built six years ago so yeah one thing that stands out is obviously the animation here which was the trend in pretty much most WordPress themes that I saw so I decided to go that route and you can see that animation here so that's kind of falling out of trend and it's kind of frowned upon because accessibility is that these sliders are not the greatest for accessibility so I'm not gonna have that from any website and I also want my new website to be very minimal as most of my content if not all of it is now in the form of video on YouTube so I just want a one-pager that just has some information about myself and some links and I'll take some of the copy from these other pages too and I'm not gonna have a blog because like I said everything is on YouTube okay so let's take a look at the design of the new website in sketch okay so here it is like I said very minimal here's my logo this button is supposed to be for a dark mode which I won't have here actually did be designed for it but that's gonna be some extra work on my end so that's gonna be the dark version that's what that button does and the navigation is pretty straightforward I want to have one for the different sections on the website and it just grows to it but I decided there isn't too much scrolling so these two links are just external links to my course website which hopefully eventually get done and my youtube channel so copy here some nice illustrations which I'll show you where I got that from this next one here to some projects I worked on a section about me which just links to a video which I planned to do where I just talk about my history and how I got into programming and a contact me section and I'm not even to have a contact form I'm just gonna link my email in there and a newsletter signup and my footer so yeah very minimal like I said but I just wanted to have an updated website so yeah for the illustrations if you haven't heard of on draw on Draco definitely check it out as they have a ton of beautiful illustrations which look great on websites especially landing pages so I just went here when I search for developer at least for that main one what's not here well I can't find a muse programmer I don't know what it was but I found it on this website and I also found these two on there too and I just sort of modified it to add the logos and I modified this guy to have the blue colors what else so these little subtle dots I stole directly from the reef refactoring UI book by Steve sugar and Adam Levin you can see here it looks really good and I tried my hardest to change it up but whatever I did it didn't look very good so I just decided to steal it straight up I'm sorry but yeah I'm sure they they don't mind I just looks really good it reminds me of perforated leather which you see in like cars and it just adds a nice touch to the website because it was pretty plain with nothing else just white which is fine too but it just looks really good and I just decided to steal it straight up what else did I steal down here right under the newsletter signup you can see some dots here which I also stole because I'm a terrible designer or I'm a good designer because I steal whichever way you want to look at it but I took that from the grid some at least inspiration from the grid some website which also has thoughts so as you can see here they have a ton of thoughts after each section dots here and they have it down here with a newsletter as well I think yeah and I just decided to steal that as well so yeah that's where that came from that's where my inspiration came from and if you want to see the finished product which will start a build from scratch here it is and yeah very simple there's a dots it's also responsive there's not too much to do with the responsive because it's already a very simple layout so yeah we're gonna build this from scratch using grid some and tailwind 1.0 ok let's start by installing a new grid stone project so we can just do quit some create let's do that for it some great let's call it andre mentoring if you want to take a deeper look at grid some take a look at the video I did where I look at some other features of quit some including its graph QL central store ok let's go into it and I'm gonna open it up in my code editor ok so since we're using tailwind I'm gonna remove all the default styling here so we have a pages folder where our pages live and there's some styling here don't worry about this yes lint ever gonna remove this and then also I'm not gonna use this about page there's no styling in there anyways let's go to our layouts we're gonna use this default layout and I'm gonna remove all of this style okay so say that save that's not even running yet so that's okay the next thing I want to do is install tailwind so if you look in the documentation for grid some there actually is a plugin for installing tailwind but if you go into the repo there's actually a note from the author says read this first and he advises against using the plug-in because it's actually very simple to setup tailwind and he also adds perche SS here which will add as well so first thing we have to do is actually install tailwind and like I said I want to use the version 1.0 which is still in beta at the time of this recording but should be released really soon so if you go into the notes here for the beta you just have to specify next when you install it so we can do this MPM install tailwind the next version ok that's done let's take a look at what else we have to do so if you go into the docks for tailwind this one is for the beta it's just going to installation here and we have to add a CSS file and this changed slightly I believe this was pre flight before instead of base so let's go ahead and add this in our project so I'm going to put it in the source folder right here I'm just gonna add a main dot CSS let's paste that in and in our default layout I am going to import that in here you can also import it using javascript if you want but I'm gonna do in here and this source equals it's up one it's called main dot CSS and we can remove this and just self close it okay and now we just want to generate the Tailwind config so how do we do that so if you go into the configuration section you can see you can use this npx tailwind in it to generate the tailwind config file and this is gonna create a tailwind config yes which is slightly different from the previous version which was just tailwind ideas so let's do that okay and as you can see it's in here there's nothing in there that yet and we will extend this in a second and now let's go back to that blog post which showed how to install tailwind and right here in the liquid some config is we'll just do this back to our code grid some config let's put it right here at the top and let's grab this right here and bring that in as well and I believe you don't need the argument if it's named the default config so tailwind uh config dot yes so we can just remove that and while we're here let's just change the site name it's gonna name it my name is a personal portfolio okay and I think that's it we just have to start the server so great some develop actually before I do that let me just add some tailwind classes in here to see if it's working so another change retail in 1.0 is the color scale so now we have numeric color scales instead of the descriptive color scales like dark darker so it's 110 900 so say text there's still a text white because that's just a default color but if we want PG blue that would work in the old version but now we have a numeric scale and 500 is the base well it's not the base it's just in the middle which is equivalent to just text BG blue in the last version okay so great some develop let's hope this works okay let's check this out in the browser sorry I forgot one thing in the config so if you go back to the blog post we have to add this section over here so let's add that so I can just add that right underneath here CSS okay and this is specifying this post CSS plugins and I have to restart at the server and now it's working cool okay let me quickly build this site to show you that it's not using per CSS and show you the file size and then I'll quickly add per CSS because I'm actually gonna push this to production and I should make use of it so if you just do grid some build this will build a site with all the assets and I'll show you the CSS file size okay that's done let's take a look there's a new dist folder which you can go into and let me just go into it actually so the assets the CSI should be in here CSS there is three hundred fifty five point four kilobytes and now I'm gonna add purchases and show you the savings so back to our blog post we just have to install this so let's add this NPM install that let's go back up one so NPM install full human post CSS / CSS and while that's going I'm going to add this line to our config I'm sorry underneath the tailwind and what else did he add here so now we just need a purchase as config J s which is copy all this inside of it so per CSS config yes copy all this just specifying what you want to scan through for purchase ESS to remove the unused classes so this is a good default and I'll just make use of that so what's the file name again it's purchase a stock config yes so just innately root for CSS stock config yes and just paste that in okay is that all I think that should be it okay I'm gonna save that just save this config actually I think there's one more thing yeah we have to add this line over here in our grid some config let's go in here what was it it was right above the module exports right here and that should do the trick so now if I build it again with some build and if you take a look at the file size again that should be greatly reduced let me open it so just that's CSS there we go two point two kilobytes okay so after all that we can finally start the website implementation see I told you it's gonna be a long video so when I want to do first is just think about the different sections of the site I can just dump everything into an index view file because it is just a single page but I am in the future I'm gonna have dedicated pages so the only sections I want to separate out is this header nav section and then this will be the content of this specific page everything in here and then just the footer so very basic so let's do that so let's start in the default view I'm gonna close this we don't need us anymore I don't need this and okay it's a default up here I'm gonna use the dev I'm gonna use the header everything else I will remove okay so I'm gonna use a sans serif font which will define in the config in a sec text gray 800 will be the default color adding normal and that should be fine for the defaults and for the header we'll do that in a second let me just put some alarm text in here and see if it enters or for anything where there's closes I leave that open okay I don't think my server is running it's not so great some developed okay so that's what we added here let me just remove everything in the index page no one will just leave it okay so for the font I am using a bottle I believe I don't really think too much about the font Roboto was just kind of the font that was on when I opened my design program it looked fine so I just went with Roboto okay so I have google fonts opened up here and I selected rum bottle and the weights are just normal and bold so I'm gonna copy this and if you go into the grid some dogs I already have it open here if you go into add custom fonts here is how we add a custom font and they actually have a bottle in here already so just go to main.js and paste this in so it's going to maintain yes let me just paste in that and we just need this and we'll put it underneath here and let me just specify the weights here it's 400 and 700 okay cool and I don't think I need this okay now we should have rebuttal I already have it on my computer but we need to import it for it to work on the web and now that should be importing from Google Fonts why is it not robot ok I didn't specify the phone stack yet so this is where we go into our config and specify the font stack so if you go into our tailwind config there's nothing in here but it's actually extending from the default config which is now separate so if you want to open that up just search for tailwind default sorry I think it's default stub or something so for some reason my vias code is not finding it I think I have to open it once so if you go into your node modules find tailwind somewhere here just not least stubs this one so default config dot star Jas so this is the default config file which it extends from and now I think I can search for it hopefully okay that works so the idea here in the previous version of tailwind this was what you got by default there's a few changes here which you can read about in that article here but thinking behind this is to make the user less responsible for all of this and only make them responsible for the changes and I think there's also an option to just the whole thing if you prefer that so in my case or at least in my experience with tailwind one all of the changes are within the theme so I was getting the font stack here so I'm gonna grab this whole font family and just change it I think is here bottles already here I'm gonna go to the top and my config and my personal config let me just grab all of this this is the font family let's go back to my tale and config and just paste at it and change it okay I'm just gonna move this up and now hopefully that works just check out my site it's just Roboto now okay it is and it is pulling from google fonts awesome okay so now for the colors of my site there actually isn't too much going on there is a blue which is taken from the logo which I use all over the site I use it here I use it for the buttons as well so that's basically the only custom color I have I think I have a blue dark as well for the other stairs this for this but that's it so it makes sense to just define my own color scheme so that's what we'll do here you can actually extend it as well if you still wanna use tailwinds defaults and i'll show you how to do that with another property but you can do that for colors if you want okay so I'm just gonna copy my config I have here save time and it's gonna paste it in so I still need the greys because there's different variations of grey here but like I said it's gonna grab the blue a blue dark and the greys so I'm gonna put it on top of one family they sat in so as you can see I still have transparent I have a black a white here's the blue here's the blue dark and here's all the grace okay say that and there should be no changes here but now we can finally continue so back to our code default so on the header is where I want to put this border this border top this over here this is actually quite large but in terms of the width tailwind doesn't have the width I want but I will add that in a second so I'm gonna make it just two pixels for now just to see if it actually renders and then here I'll have a nav and I want a container here and now it's Auto we want flexbox justify between items Center and we want some padding 8 and here is where we want the logo this is the first flex item going over to the home page and you can put an SVG in here but I'm gonna use an SVG still but I'm gonna use an actual logo which is not in here yet I'll put it here in a second I'm gonna put it in this static folder talk about that SVG though so my rule for SVG is and I don't know if this is the right way it's the way I do it use SVG as much as possible but if it's like a sort of image this will be a lot of inline SVG and I don't want that cluttering up my code that's what I just feel oh look I think that logo shouldn't be too bad but I just added it as an image so this this this and this I would add as an image it's still an SVG and everything else like icons like this what else these dots and these icons down here I just use inline SVG again that's just my personal preference I notice any benefits to not do it that way or whatever okay okay the next is the actual navigation which I only have two so not it's like an upper case tracking wide font bold flex items Center so let's add list items in here let's put up margin right on it and this one is gonna go to I'm not gonna put the legs in here the class is text gray 800 and however I want it to be a slightly lighter gray gray 600 okay and this one's gonna be called courses and let me just duplicate this and this one will be called YouTube all right let's here we get so the logo is not in there yet let me just change this say no go okay so you can't really see because my resolution is really low right now but I don't think the container is working I think we have to add something in our config actually let's see if it's working so container so yeah it's not working there's no container class you actually know it is working we just won't have to add a padding on that and we can do that in our config so tell Lincoln fake Italian theme we can add container and set a padding on it set it to one room okay okay so there's some padding right now cool okay so for this board the top I only used two pixels here and I want to use a bigger one so look for boarder widths here right here you can just copy this paste it in there in our own config and just add whatever width we want here or let me show you how to extend this so we can still make use of this but only add one to our tailwind config and you can do this for colors as well or anything else in here not just colors if you want to still keep the defaults but add on to it so you would definitely make use of this a lot if you like tailwind defaults so what you would do is add a new extend key and you would just specify the property in the default config in our case it was border width and just add whatever property or whatever value you want so in our case we want this 14 that's how large I want the border width to be and now I can use that cool so now in my default for the top we can do 14 and this will be as thick as I want it cool okay so let's add the footer now so particular that that design it's just this section over here so let's go ahead and add that back to our default view here's where the slot gets passed in so let's put it right underneath so adding new footer tag and say peachy blue text white and within here is the container that makes Auto Flex items center justify between and some padding and in the first flex item it's gonna be copyright 2019 I should probably do this in JavaScript so it automatically updates each year but we'll just hard code it for now and then the other section is going to be flex as well items Center actually let's make it a unordered list this should have updated I don't know I didn't know it's cuz that's messed up let me just do it manually okay so let's add a list item margin right of eight and in here and this is where our icons go so they're just just say just put a placeholder in here and just duplicate this I think I have five two three four five you're safer looks okay okay it does now let's fix this issue it's actually not an issue because I'm gonna have a lot of content in your end it's gonna be longer than the height of the screen but if I ever make other pages that don't span the height of the screen I want the footer to be on the bottom so let's fix that so I believe all I have to do is change the entire div which is this one here to flex flex column and give it a min height screen fix me not yet okay we still have to see I get this issue a lot I don't know why where doesn't reload correctly so after restart the server okay I think I just have to set this content in here the Flex grow and that will make sure that this is always the minimum height of the screen so what the spot is we can wrap this in a div flex grow and hopefully that works it does there we go why is your no padding on this oh I forgot to eat okay so I'm just gonna paste in the code for the SVG's as well as the logo here just so we can save some time okay so I added the logo asset I added the icons and I also fixed a margin right here which I removed so it's lined up to the right side here and now we can continue so we can finally start with the content of this I'd like to start with this section and then we'll work our way through so just go into our code just go into index view here and you can see they're using this G image component for their images which lays really lazily loads images and you can see that in effect here so if i refresh the page you'll see it come in gradually well there you go well it's frozen again but if it wasn't frozen then you'd see it start like this and then actually load the image in but in order for that to work you have to put your images locally on your own server well what I'm gonna do is just use the normal image and put it on a CDN I'm not sure what the better approach is but I'm just gonna put it on a CDN and by CDN I mean cloud nari you know what probably for this video I'll use G image but in the final website I am going to put it using cloud theory okay so let's start here and remove this no I take that back I'm just going to use images but feel free to use G image if you want can't make up my mind here okay so the name it hero for no reason just so it's easy to scroll through my HTML I'm gonna make a container inner which is as it as its named at the inner container here I like that in a second to my CSS I mix Auto Flex justify between let's give some padding and then the first flex item is gonna be the heading and the second one it's going to be the image which I already have in here so again you can use G image if you want but I'm gonna eventually move this to cloud Neri so I'm gonna use the image tag static it's called hero this is named it hero and I have some classes on this as well I think this is this for Responsive so we'll do that later let me just see if it loads it does cool actually this goes in here split that up okay go now let me define those container inner styles I guess you can use utilities as well but I just made its own CSS class for it because there's also responsive styles so I'm going to here and just paste it in it's basically just adding a max width of a 100 but again there's these media queries so it works responsively okay let's go ahead and add the heading in index right here okay so actually separate separate it out into two divs so full-stack developer and gonna escape that youtuber this one is text blue welcome to my website and here is where the styles for the large bold text goes so text for excel font bold and with three-fifths okay so it looks pretty good okay moving on let's move to the next section which is just this copy over here and I can add that within this hero section as well but I'm gonna separate out into different sections so I usually end it in like this and I start the next one scans container inner MX Auto and it's just a bunch of text and I'm just gonna paste it that in to save some time there is a class of text excel on it but other than that it's just copy with links see if that works awesome and what's next next is these images here which like I said I added them as image tags but they are still SVG's so let's do that so I put this within the same section but you can separate out if you'd like justify between Center I really should have a snippet for this because I use this all the time py 16 okay so we're gonna have two divs and we're gonna both gonna have a width of 1/2 and this one is gonna have the image of the browser like a browser SVG browser and then we can duplicate this and the other ones called mobile I think mobile let's see if this works okay I need to write a line this one so I believe if I just do justify and maybe make it flex as well there we go cool okay what's next so this border I added to this section over here on the top in the bottom this one over here so I don't know why I did that I just I guess I just felt like doing it that way so let's start working on this okay so I change this file over here the title to say home and that's gonna pain that the title of the main site this will be home and then the title of the entire site okay let's work on that project section so it's after this okay so let's make a new section called projects you move it up for you guys and let's container err that makes auto-text XL here's the border and I make it more gray 500 it's bordered on the bottom as well py 16 MB 16 and that's it let's see if this works okay so there's the borders cool let's add the h2 here or I made an h2 so just add that it's just going to be h to the font bold it's a margin here are some projects I've worked on and I'm gonna make an unordered list here say class equals so for this you can use flexbox if you want and just do items center and you'll have two items here that's totally fine I've done that before but I'm gonna make use of CSS here for this case so to make a class of check mark and mb6 margin yesterday project 1 and let's put some alarm text in here say eight okay let's duplicate this a few times see that looks okay cool and now in our CSS we can just define that checkmark class which I will put put up here - but underneath here so it's just encoded and I added the background-repeat:no-repeat and I put a padding left and that should do it there we go cool okay what's next next is this section over here so I get to know me so let's go ahead and do that right to index so this ends projects and projects get to know me and that's the same so container inner MX auto-text Excel border quarry 500 and this is just on the bottom PB 16 and be 16 okay and we can add h2 font bold and b6 get to know me and see if that works and this actually is just basic flexbox so let's do that back to our code about flex justify between let me move this up item Center it would be 16 and this is where the image goes I'm just gonna copy that because I'm actually using cloud Neri here and the URL is in there already and then let me copy here a session to save a few seconds it's just ugly copy and see how that looks okay looking pretty good so the other section I just want to embed a YouTube video about myself instead of actually writing about myself which I'd like to do in the near future and to get a responsive embedded YouTube video is actually a bit tricky so I followed the instructions here in this blog article and this is what I came up with I'm just gonna copy it again just to save some time and yeah you can read through this close this and it's add that in so it's not too much code we just have to add these two classes in our CSS I tried to make heat using utilities but for some reason it didn't work using utilities and this is just the standard embed for a YouTube video so the two important things are these classes responsible container and responsive iframe and then again I'm gonna copy some styles which I got from that article and just paste them in let me say this let's go into our CSS I'm gonna put it in here it's not too much just a few things this is the most important hack here the padding top 50 6.25 and so to add these save that and now we should have a responsive okay so that is not working what did I do wrong here so yeah that should be outside of this split outside see if this works okay so there we go now that should be responsive and it is cool okay when is next next is this contact me section and I'm just gonna paste of the contact me section in because it's very minimal and I'm gonna say sometime here let me just close this and they get to know me and I'm gonna paste the contact me section and very minimal it's just that and some padding some margins and it was really cool and next is the newsletter section which will do okay so let's make a new newsletter section here PG gray so note that the spelling of gray it's GRA why until wind 1.0 and GRE why in the older version just another big change in my opinion so I'll do a container inner IMAX auto py 16 PP 8 text center and text XL make an h2 text to excel thought bold margin-bottom 8 join my newsletter and see other stocks okay keep going I'll add the paragraph tag here it will be 8 text Excel I'll keep adding text Excel everywhere maybe I should move that to a parent container and I'm not going to type it out and so in just learn text here I say 24 4 I don't know how long it is ok that's probably too long okay and now let's add the V form do it quickly obviously I still have talked it up to my newsletter provider which is more work but I'll just stylee here form and it's I had not sure why I have a div here that's flex I'm sure I have a reason but I'll just stick to what I did before cuz I know it works email name equals email you can add a placeholder your email address and here is where all the magic happens flex 1 PG white rounded rounded are none so this is because if you look at the design this these two corners should actually not be rounded it's just I don't know how to make it not round it in the in sketch but the same for the text box they should be rounded you probably can't see that but these two should not be rounded so that's what this does rounded are done patting and padding normal okay there's a border poor radius of zero shadow outline this is for the focus outline focus border blue we have to give it is Z index and it's required say that see if the text box renders this only hit us and there is not a border on it what the proper focus outline oh did I do sorry this should be shadow shadow space outline:none I should do it okay there we go you can see there's no border on this side that's fine because the button is gonna go there so what's at the button so button and my vs code is being really slow and crapping on me so I gotta type it in manually flex to with 40 I think 40 is a thing we'll see we have to find that in our config text white again I did this before in case you didn't notice in reality it's just a lot of going back and forth between the browser and your code py 3 PX 8 okay know what this is too much to type out I am gonna be lazy and paste it in so there we go it's net that correctly see if this works okay it looks pretty good and there is actually an hover on it as well and this was using our alternate blue cool so if you look at the design the width of this is actually not the full width of the container inner so if you look here it's slightly less so let's fix that so we start to wrap everything in here in the form in another div sorry again my vs code is scrubbing out on me so I do manually even my tab doesn't work okay div class equals with four-fifths and that should reduce the length of it also Onix auto let's give it a margin okay and that should close after the forum save that okay so that's better cool okay now let's add these dots here so these ones actually let's start with these ones since we're already here so right after our newsletter right after here let's add another section here before the dots and we'll just set the margin to a negative margin so it moves up X Auto just add that for now and let's get a padded bottom okay so now we can actually just paste the SVG in here so I actually made it this SVG from scratch not scratch I copied the one and great something like I said earlier but then that was a slight green to match their branding and I wanted mine to be a slight blue so I changed it it doesn't me really long cuz I'm not I don't really know how to work with SPG's properly I just kind of click around and hope for the best but it worked out and let's see if this actually renders it's quite long as you can see we get this message because um I the performance will take a hit if it colors or if we colorize this bit but yes well there it is and I'm not sure why it's not centered because there's no - here that's why ok so now it's centered and we can just move this up by giving it a negative margin on the top so we can do this negative mt-32 see that works ok and I also have another class alright it's just cuz we see this horizontal scrollbar we don't want that on responsive sizes so we can just add the overflow exhaling class mates which does as it sounds and now that there should be no horizontal cool okay now let's add these ones up here so these ones I stole from refactoring ey where is it right here okay so let's do that okay so since I'm using it twice it makes sense to define it once and then reference it wherever we need it you can do it inline twice if you want I don't think it makes a huge difference but let me show you how to just define it once and then use that so in my default template since everything extends this we can just add a new section in here which I'll add I'm gonna paste it in so it's a div with display:none but with inductive I have this SVG I have an ID of dots triangle on it and this is the actual SVG so I'm gonna say that and now if we go back to the code where does it go where's the first time I use it I use it in projects I've worked on so let's go to their projects oops projects okay so I'm gonna put it right underneath the h2 let's just see if it renders sure so Dave again vs code is crapping out on me I really need a new computer okay and we can specify SVG with equals whatever you need to be my case it's 170 write equals 170 and you can use this used syntax to reference the SVG so in our case we named it the thoughts triangle then we can close this like this and we can save it and see if this renders okay so it does render cool but obviously we don't want this here so let's absolutely position it and put it in at the right place so as you can see it's rotated here so we'll use a transformation to rotate it so let's do that so first we have to make something relative so I'm gonna make this parent they've relative and then we can make this absolute and in the old version tailwind it was pain are four right zero but in the new version it's just right to zero and like I said I also want to rotate it actually the seals looks first see if this works okay so that's a start so let's just rotate it to transform rotate 180 degrees see this works okay so that didn't work I forgot to B : okay so there you go it's rotated and I also wanted to move out here a bit more so I'm gonna do that within the transform as well and again I stole this straight from the refactoring UI book website Adam does this as well so credits to him for her freaking out how to do this in a nice way and I'm also gonna add a top 50 Beck's holes just to move it down a bit or actually I'm moving it up but let me just show you what I mean there you go it was down here before and it's relative to this so I just moved it down 50 pixels and that is a good position cool now for a responsive this kind of gets in the way it makes this horizontal scroll bars which we don't want so what we have to do is wrap this whole thing in another div and just give it again sorry my vs code doesn't work tab doesn't work let me just add it manually class equals overflow X hidden and let me just close that out it's that this and that should fix it now there you go no more horizontal scroll bars awesome so I'm not gonna make you watch me do the other one it's the same thing it's just on this side wherever I put it in the design I believe it was somewhere here yeah just here so yeah same thing same process okay so everything's looking pretty good let's go through everything pretty close to our original design and the last thing I want to do is make it responsive so I'm probably gonna tweak it behind the scenes but let's just see how much we can do in a few minutes so like I said earlier it's pretty good because the layout is already mobile-friendly so I'm just gonna pick one breakpoint and just add a few things here so the first thing I want is to stack this after a certain breakpoint so I'm gonna use the small breakpoint which i think is 576 or something like that so let's go up here and here on mobile and below it's gonna be with full but on small and above it's with three-fifths see if that does anything okay yeah that's not gonna do anything because we have to change this too so flex flex call by default but on mobile and above flex rule so that should stack it sorry I'm looking at the wrong thing and this is the thing I was modifying one do this in a second so that looks good that's saturated as well so I split here so by default it's centered but on small and above its left justified that should do it okay cool and it's do the same for this guy so I am gonna give it a margin top eight by default but on small above no margin top and here it's going to be centered by default and nothing above mobile okay cool see if this still works normally and it does cool okay back to this this isn't our index I mean our default so let's go up to where our lab is so now again same thing flex called by default small and above flex row that should stack it cool and it's just add a representative you don't have to but I like containers for my things again my vs code M it is not working I'm going to do it manually that and it's ad mb4 by default but small and above no margin so that just should give it some margin cool next that's fine you can make this a smaller text too if you want I'm gonna leave it this is fine too I think what I did originally was hide this because doesn't really serve a purpose and just have one image I'm just gonna leave it this is fine this will stack so again back to index don't forget to know me so here flex call by default small and above flex row and that's fine for me this is good this we have to fix as well so this is already fixed I think because I pasted the icons in it took the code for the responsive so that works nicely so yeah let's quickly fix this and then we'll call it a day so let's do the same thing and just stack it after a breakpoint so where we form there's more flex and here we can do flex call small flex row if that does anything ok and that's actually fine we can add the rounded corners on this if you want I'm probably into that behind the scenes but that is enough for me yeah everything's looking pretty good so let's take a look at the responsive styles looks pretty decent and let's make sure that our desktop version still works and it does awesome so there you have it guys we've managed to build out my new redesigned website using grid sum and tailwind 1.0 now I'm gonna keep my actual website repo private but what I'll do is release a generic version of this which is based on what we learned here I might even add a few more features to it maybe a blog maybe I'll add a menu here which actually Scrolls to the different sections and maybe I'll change up the images or maybe I'll just leave them so you guys can play around with that when I'm done so I'm not sure if we're gonna be done by the time this video is released but just check the video description and it will be there when it's done also by the time you're watching this hopefully this website should be up and running on my domain I still gotta tweak some things obviously like connect this to my email provider and I got a tweak some other things as well I got a hosting in place and all of that stuff so anyways like I said this was a long one so if he stuck around to the end thanks for watching hope you learned something new he's like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 20,899

Keywords: gridsome, tailwind css, gridsome tailwind css, gridsome tailwind, tailwind gridsome, tailwind css gridsome, tailwind 1, tailwind 1.0, website redesign, gridsome vue, vue gridsome, vue tailwind css, tailwind css vue, andre madarang, drehimself, andremadarang.com, gridsome tutorial, gridsome static site, tailwind 1 tutorial, tailwind 1 beta, taiwlind css 1 beta, tailwind css tutorial

Id: uHo6o1TNQeE

Length: 69min 37sec (4177 seconds)

Published: Fri Apr 05 2019