How to Create a Website - Complete workflow | Part 08: Promo & Problem shooting!

Key Takeaways

okay everybody welcome to this video where I'm continuing my series on how to build a complete website from scratch responsive using flexbox and all of that fun stuff we're going to be building out this section that we see on the screen right now it took me a little bit longer than I thought it would I was hoping this video would be really really short because it looks really simple but I ran into a bit of an unexpected problem when I was trying to position this box properly and just with the spacing that I had on the top actually in the previous video I'd already made my home promo sass file which is being imported already so everything is set up your for it to work I don't know if I really need that padding but I'm gonna leave it on there for now and we'll adjust that as we need so the very first thing I want to do is get this app is amazing to be in the box in the middle I'm not sure well let's start with that I called that one title box I think so let's go with top title box let's see what happens here I'm gonna give it a background of accent yeah there we go perfect oh and the color is obviously gonna have to change color is my text inverse that looks better awesome now obviously it's stuck let's just fix this a little bit so I want to be focusing on mobile if you haven't been following along the whole way just so you know I am doing this at mobile first so I'm designing the whole page mobile first and then we'll jump in after and switch it up to work on desktop at the end we'll just run through and do all our media queries so that looks okay and my title box I might actually take out of home promo because this is something that I could use in other places on the site if this site was gonna build up and I don't think I'm gonna want to keep that I'm just gonna take that off for now it's creating this massive space on the bottom that we don't really need yeah okay so this app is amazing I'm gonna leave that there for now another thing I need is I need I want doing great things for you all of that should be in a different background color right so I'm gonna split my HTML down for a second here split down just because I want to see that's my hero area sales points per Omo section so I did title box and then I just put a column with my button in it and then my other column which has my image in it I'm going to give this column another class and we'll just call it background secondary primary I think it was my primary color primary and this too I'm putting all these in the promo because it's for this and I'm gonna leave them here but we might move things around because these are classes that I could definitely use in other places if this site was bigger these are more general classes I would say background primary did I get it right whoops I didn't call it primary called it mean I switched my naming conventions recently for my main from primary to main I think I'm gonna go back to primary I like that better but that's okay and color of text inverse so we can see it all that's good it obviously needs some padding padding in this case I'm not inside a container so I actually do want to give it some padding on the right and left as well so let's just try giving it padding of 2.5 m the whole way around and see what happens that looks pretty good I'm happy with that except I'm gonna need more on the top because this box should be moved down on top of that one a little bit for my mobile view I don't want this to be too columns I'm actually going to make this disappear on the mobile side I think I think it would be better you know I don't want a giant picture like that it looks a little weird so I think I'm gonna make that one disappear the same way let's just open up my Photoshop document so I don't want two columns cuz there's not enough room really for two columns and I don't have this big phone showing up in the mobile view either that's only going to show up once we start doing our desktop I'm gonna do the same thing with this picture this picture is not necessary it's just sort of getting in the way bitte so we're just going to get rid of it at the mobile view and it's going to appear at the larger screen sizes so let's just focus on this year I think that looks okay um I just want to sort of position this properly now and actually it's go back to photoshop for one second I have a lot more letter spacing between these than I have here I'll fix that once we've positioned this better so I'm going to jump back into the title box and what do I want to do I want to Center that on the screen so let's just do a margin of zero Auto so it's going to Center it that's nice and easy I want to give it some padding padding of 1m maybe I don't want as much on that that's not too bad actually and the main thing now I want to move it down so to move it down the easiest thing to do is a translate y transform sorry transform translate Y and a translate y 50% so it's exact the middle of it is exactly here now the one thing with translate is it will make it's moving this but as you can see it's sort of not affecting the flow so even though that's moving down let's just take that off for a second so it's not this space here is actually getting a lot bigger when I do that because it's not changing the flow if I do an inspect element on that one see the section promo hasn't been affected even though that has moved down so whenever you're using transforms to move stuff around just be aware of that it might cause some spacing issues so I'm gonna have to come in and fix that and before I do that let's just fix the padding padding top let's make that five so I'm going to double it and then 2.5 m 2.5 M so it's five on the top 2.5 on the left and right and 2.5 on the bottom and I'm actually going to give it a little bit more on the top let's go with 6 just to get a bit more space there yes yes yes I'm going to go back to photoshop really quick this has a lot more space around today but on the mobile sizes that's not really gonna work I will give it a bit more padding though what about - okay that's not too bad and now let's go so a few things to fix now so I'm gonna fix this big space here so let's go right to there now that should be in my layout home sales points and padding is 10 VH on the top and I think I can actually just do a 0-0 so I'm gonna have 10 padding on the top and I don't think I need anything anywhere else let's just see whoops saving the wrong thing save my sass file there we go no normally if this didn't have that translate on it they would be touching each other but because it has the translate and it's moving down I am getting my space there this is still too close now that I look at it again these are way way way too close to each other so home promo again the top let's make this like 8 I need a lot more room there that's better so we're coming down let's just see how this looks now as a whole I'm coming down promote your app that looks nice that looks good this app is amazing super yeah I think that looks nice that you can definitely even on the mobile size it lets just if I shrink that it's not causing any side scrolling so it's okay yeah hmm well I'm going really small though it's a scooter or an iPhone 5 and then iPhone 6 and obviously best-case scenario I would be testing this on an actual phone I wouldn't be just using this but for now and for the video that's okay mmm it's a bit of a problem for me in my opinion right now that this is taking up that full space why is it doing that where does it hmm just because when it's like this this looks like two different sections right now and when it's like this it looks like it's clearly like because of the way it's overlapping you can sort of tell that they belong together a little bit more and what's that overlap disappears you can't really tell that they belong together as much it really looks like just like two different sections and it's also screwing up a few things okay so what am I in it do you is this gonna work margin padding what if I just do a max width on this of max width of 90% I honestly don't know if this is gonna work but what I'm hoping this is gonna do just the reason I'm trying this is max width won't make things bigger if I just did width 90 percent it's gonna go to 90 percent but max width it's gonna stay at its actual size but if it has to get small that should be min width not max that worked yeah the biggest it's allowed to be that I was right so you can clearly see that these go together now the only problem is the spacing is stokin off but again I'm way too narrow nothing's that size but let's go back to the iPhone 5 because that's small now it's hmm I don't feel like building in media queries for this but I'm wondering if I'm going to need to this space is kind of big you know I like that space look better is that just oh because it's moving down 50 percent and that 50 percents a lot more now because it's pretty tall so when it when it's not as tall let's just jump up to a larger screen size it doesn't move down as much so this space is smaller but when it gets really tiny when the screen gets tiny oops wrong way this is getting taller so it's moving down more and it's creating a bigger space here and I'm trying to think of a clever way to fix that and off the top of my head I can't let's just see yeah let's turn that picture off for now because I know how to do that whenever I'm stuck on something and this is supposed to be about my workflow so whenever I am stuck on something I tend to just move on instead of trying to waste time on that one thing and sometimes ideas just come along and worst case scenario you have to go back and put the time into it anyway but yeah let's just turn this picture off so we don't see it now I'd called that column and I called it image box and I'm gonna give it another name I'm gonna call it a large screen and I'm gonna use this in a few spots I might have already died I'm really not used to working on projects so slowly guys um a hero image how come I don't see my hero I'm in today I turn the hero image off I must have I keep saving the wrong file save save I just want to see my hero for a second hero hero image display:none I was sort of cheating with that okay so let's fix that at the same time then I'll go back to my index hero image will also be a large screen we're gonna remove this from here cut save that so my phone's gonna show up now and I'm going to go to my base and in my base it's a sort of basis where I put a lot of my helper classes so large screen this one actually has to be built into a media query or no display none for now so if it's large screen its display:none that should didn't they call that large screen I hope I have to save this over here to save that should disappear good and now that other picture should also be gone good what I do with my large screen is it's just I'm only want that to appear on large screens this is pretty much what it is so nice and simple so that's okay and I'm just gonna leave hero like that now I can close hero down and this is okay now large screen is good my base now these should actually title box I'm gonna take out of home promo now remove it from there and I'm gonna move that into my typography because it belongs with my typography so I have my title large I have a title box my texts intros my bigger paragraph text so this really belongs in typography I'm modifying a title and it even goes with the naming conventions that I had a title large I have my title box all things like that go for me in my typography the other one that I'd thrown in here BG primary is to give anything I want a that type of background color so it's not typography at all it's more just something that would go in my base file it's something that could be used anywhere so I'm gonna paste that in here it's just something that could be used throughout a site anywhere it's a helper class so yeah I'm throwing that just in my base style and my home promo is actually going to be an empty file for now I'm gonna leave that file there and just leave it empty for the moment just in case actually maybe I should put some margin on the bottom I put the padding this padding though is really specific to this one box because I'm worrying about the height on the top there so it's not really a base style if it's really specific to this the background color and the text color are and because it is something that is setting up a background color it should have some padding so I'm going to leave my 2.5 M on there for now save my Texas new underneath and then in home promo let's go back to here for a second let's go find it in my HTML column and I just called it background primary um [Music] background primary and I'm gonna call it what I could do and this is again one talk about my workflow and how I work I could do something like promo BG primary and for those of you who aren't used to SAS that's just the same as you know writing it like that my background primary that's inside of promo I could do that but I don't like doing stuff like that because it's harder to maintain it makes it much harder to maintain stuff like that because you're getting more specific if you need to overwrite it again or you need to use it somewhere else it just doesn't work much in this case title box I want to call it almost like after title box because that padding on the top is necessary if I'm using my title box cuz that's being moved down I'm wondering even if I could build that into my title box but I wouldn't be able to you know if I had my title box plus a BG primary back padding top was it eight that I went with oh it should be a period so I could do something like that where anytime I have a title box followed by a BG primary it has to have automatically a padding top of eight which sort of makes a lot of sense right because anytime I have that it should normally be followed by that I'm gonna leave it like that for now so anytime where's the title box and it has a sibling of BG primary that sibling will get a padding eight the top so we get that space that we need the next thing I'm gonna go and do and fix is in my tape aughh Rafi let's jump over to typography again I have that open oh I'm already in my typography so in here my h1 I need some letter spacing on this um letter spacing it's pretty big what I did let's try like five pixels yeah that's right for that looks okay now is that gonna screw this one up that doesn't look so good and I don't think I did any letter spacing oh I did have letter spacing there okay so I can leave that on I'm not rude it's a bit too big with this screen size three and that's okay I sort of like that now three works for me and the reason again I jumped to that because I want to focus on this and I still don't know how I'm gonna do that so I was jumping ahead a little bit hoping to get an idea on how I could fix this space because let's just jump over to responsive it looks good I'm really happy with it there and then right as soon as that becomes two lines which is right around 500 pixels so I could build a media query into there but I find right there the space just well it's this basically it's a little bit too big that's not the end of the world really when the space jumps there it's when it jumps right there now it's massive now it's way too big what can I do to stop that space from getting really big I could build a media query into it that I don't really want to do that might be the best solution though let's just say title box at media [Music] width of 495 pixels it's not even on my title box that I'd have to do this this is really ugly guys let's go back then this is gonna have to be on my sales points where my padding is gonna get adjusted on the bottom and that's gonna screw everything up this media query can't go here this media query will go yeah so media query goes there so it's inside the sales points and it's padding bottom of zero oh wow they take that it's not gonna work at all so it's not really how I wanted this to work but I'm gonna try doing this a little bit differently let's destroy 20% that space is too big padding top of say six now let's do 30% actually it's still pretty obvious that this is the title because it's overlapping and I think this is a nice compromise it's not right 50% now the one thing may be important here is you don't put it like 45% it's gonna overlap the text a little bit right now but if I do 45% it's so close to the middle but it's a little bit off it looks kind of weird if you're not gonna perfectly center something just make sure that's more off and it looks like it's more it's done more on purpose now and my space here is a lot more reasonable and then as this gets bigger so right around there and I could build a media query into that so I could say at media min-width of 495 pixels my transform translate why whoops is now 50% and now it should be it's there and when I get to 495 my translate changes minimum width except of course it's not working let's go take a look at what sales points promote title box why is my media query not working guys hmm that's weird I'm gonna go look at my rendered CSS and see how that's coming out I haven't opened this up in a while waving to normalize and all at the top dududu normalizes most of this [Music] here it is so at medium in with 495 title box at a minute min did I min oh that's why I misspelled wit haha spelling mistake suck min-width there we go that's better and the other thing we're gonna have to fix is that padding top I don't like having tons of media queries or stuff like this but oops that should be indented and I didn't really want to get into them yet but whoops I'm talking and writing at the same time it's not my strong suit I mean with 495 padding top becomes 8m I probably want a bit more space on the bottom I like this space here I want to get a bit more space down there at the bottom just to make it it's a little like this it's it's still a bit too tight there to do that was in my base that I closed it no I have it down there so yeah let's just change this padding top and left and right I think 2.5 makes sense but top and bottom let's make it even as big as like 5m that looks better that bigger space down at the bottom looks much much nicer and let's just see yeah cool there we go so that actually took a lot longer than I thought it would I thought this would be a really short video but there we have it it is done it's looking good on mobile screens and yeah I hope you liked this video if you did hit the thumbs up subscribe so you don't miss any of the other videos in this series if you haven't already subscribed you can click on the little button down there and I look forward to seeing you guys in the next video take it easy