Build a responsive website with HTML & CSS - Part 1 [Live Coding]

so I just wanted to do little streaming thing just to practice my streaming skills I guess but also I just wanted to show people building a website from scratch so what we're doing here is we're in front and mentor do I heard about this from ripley erin on instagram and this sites really cool basically it has all these different challenges where you can get actual web designs and you can like learn how to build them well not learn you can try to build them I'm gonna do this one and yeah the site's really neat basically you can download a jpg design files and other things and they have a little bit of starter code so we'll sort of take a look at that so wants to check out files here so I just created a new folder to make this website in this folder here is the actual design that I downloaded so let's just take a quick look here so this is everything opened in vs code oh hello hello time writer 27 thanks for joining us yeah y'all know this is like the first time I'm streaming so I will probably say a lot of ohms and odds and maybe you make mistakes maybe have to Google things that I've forgotten so I'm sure it'll be fun okay so we're up here in Visual Studio code I'm just kind of going through the design files that I got from front-end mentor I oh um so yeah just makes it really easy for you they basically give you everything that like your designer shouldn't be giving you so there's like P and G's SVG's and then they have the actual sort of comps of what the full websites supposed to be so this is the desktop one this is I guess it's just like a they're using this for the website promo and then this is the mobile design so you can see it's a pretty simple website this is just a one page thing so at the top we have a hero area up here with the CTA call-to-action button and then in the middle section is just you know some content it looks like on desktop it is three columns so you have this image here then you have two text columns then right below that you have another sort of CT a call to action area where you can sign up to join their mailing list er whatever that is and we've got a footer at the bottom with three columns on desktop so what I usually do when I get a design is let's see sorry navigated to weird thing what I usually do when I get a design is I look at the files just try to sort of wrap my head around what I'm gonna have to be building and I also like to compare what the desktop version and the mobile version look like and usually I'll get a desktop design and a mobile design sometimes I'll get tablet designs but that doesn't happen very often and usually what I end up doing is the tablet version is sort of like a mix between the desktop and the mobile versions depending on you know what seems make sense so let's just compare what we got for desktop and mobile I actually opened them up separately here just so you can kind of see them side-by-side okay so let's start start up with the top here area they look this top header looks the same for both desktop and mobile your logo on the left then you have some links on the right side and then below that you have the hero which is two columns on desktop and then on mobile it's stacks and it looks also like on mobile the order changes meaning on desktop you have the text in the button on the left side meaning it's first and then the image is on the right side second on mobile that's switched so the image the image is first and then the the text part in the CTA our second so we can use flexbox or something to sort of change the order of that when we get to it so let's move on down the middle section looks like it's a pretty simple sort of stacking on mobile thing you know usually what happens is in desktop you'll have things kind of span multi columns and then when you have things on mobile you kind of make all those columns that are next to each other just kind of stack underneath each other so that's what people usually mean when they say you know stack stack this content on mobile other than the stacking it seems pretty much the same like the order the same on both desktop and mobile so that should be fairly easy and then we got the CTA area which also seems kind of the same except for undeath side you can see the textbox and the button are next to each other and then on mobile they stack so let's check out the footer I move this up so my picture is not in the way but the footer yeah so you got three columns on desktop and then it's stacks on mobile and the order does change on the footer you can see the last section on the desktop design is the like the form signup and then on mobile it is second in the order so and then these links which are in the middle second in the second position on desktop are at the end on mobile so yeah so this is a relatively simple you know three to four section in one page website so if you're making a website for a small business this is gonna be pretty much the kind of website you'll probably new making you know some I mean some small business websites might have like an about page or a contact page or even a blog section this is just kind of a simple like promotional landing page almost so Oh hi okay Sarah yeah yes good sorry I'm trying to I'm realizing that streaming involves lots of multitasking so I'll try to monitor the chat as I go on but so yes and these are the designs and we can get started with actually coding the site let me just show you what I got right now so again this this folder was where I got all the design files and stuff and then I made another folder called website and that's where we'll be making the actual website so I don't know if you all like follow me on Instagram or how you found out about this but I recently did a little tutorial on using parcel for your friend front-end web dev like workflow and I use parcel right now to compile my SAS files and my JavaScript files and it's similar to web pack or gulp but parcel just requires a lot less setup if you're curious about it you can check my blog it's at coder - coder calm and you can check out that tutorial I've found parcel very easy to work with so I like it a lot anyway out of all that I created this project that I'm kind of using is like my starter project files for front-end website stuff so I'm gonna copy those files over to the website folder so we can sort of get started more quickly so copy the app folder the app folder is gonna have like sass and JavaScript files and then when they get processed by parcel they will end up in the dist folder so you can see here this is from the the parcel project it has all the compiled CSS and JavaScript files my writer says so when you first get a project to work on you design the whole website friend backend it depends on the project what I'm doing right now is really just doing the front-end if I get a design or something for like a work project it depends let's see oh if I make all the graphics in scratch oh I don't have any design skills so when I get a project I'm completely dependent on like the actual designer on the project making all those files and images and then I just kind of put them into the website if that makes sense which is why I think this front-end mentor website is really cool because it really gives you everything that you would be getting for like an actual web development project so hope that answers your question ok so let me just copy the files from the boilerplate my parcel boilerplate thing I think that's all I need so we're popping that into the website folder and let's just close this out okay now I'm going to what I'm doing right now is I have to check and make sure parcel works so first thing is I'm going to npm install so this is gonna install all the packages from the package.json file into the website project so I got to be honest this is not my favorite part of website projects I don't really like spending a lot of time doing setup and stuff so that's why I really like parcel because it makes this process a bit quicker okay let's just see if this works so another cool thing that parcel does that we'll be using is when you run parcel it will actually spin up a like a staging server for you that will automatically update itself every time you make a change to your CSS so to run that you just type parcel and then you type in the HTML file that you want to process let's see if everything's working okay cool and then we will you can see our staging site at localhost port one two three four so let's do that now cool so another thing that I always do when I'm building a website and this is just the all this stuff from the parcel project so you can guess we're gonna change all this stuff but I like to keep my developer tools open just because it's a really easy way to if you inspect this element you can see all the CSS styles on the other side let me try to zoom in so it's a little bit more readable for you guys okay so I think we're ready to go looks like everything's working cool so I will just open up index.html I don't really need this stuff because this is from the parcel project so I'm just going to sort of get rid of that actually I'm gonna think we need JavaScript because this is just pretty much just a pure CSS project so I think I might actually just delete that - cool then place the title here landing page this is called silo silo landing page add some test stuff here and then you can I don't know if you caught that but when I save this file it rebuilt the project so okay now it looks like this cool okay let's go back to these designs here so the first why so when I'm making a website the approach that I usually use is I will kind of build things section by section like I'm not gonna just try to write out all the HTML for like everything I just will say you know start with the header then do the hero and basically make my way down the page and then the footer lasts so I can just kind of focus on each section and one at a time so now I'm not working on too many different things at the same time but I think with this project so they actually supply you some yeah so so this is this is the index.html file from a friend and mentor website and they kind of gave you the all the text that you'll need so and then this little attribution thing here so we can kind of use this too yeah we can just kind of copy that as we go as we go along okay sorry this is hopefully it's isn't too awkward for all of you watching but okay let's do the header first and I don't know if everyone does this but I just kind of I'd make the desktop version first and then I make I make it responsive and so I'll update the CSS for the mobile version but okay we're just going to start with the header and I do try to use semantic hTML when I can because otherwise everything's just like div div div and it's it's like de vidas I think is what some people call it where you just have a whole bunch of divs I think one of the benefits of using semantic HTML tags is that it kind of makes more sense when you're looking through the code to make changes and stuff later okay so we got a logo section here and two links so this is all going to be in the header see what that logo image was [Music] hello go okay so what I'm gonna do is I'm actually gonna copy this file and this is I just have this folder here to just kind of hold all the design assets but I want everything to be in my website folder so what I'm gonna do is let's just create a new folder here in dist so again I'm working in the s and I'm working the sass files and JavaScript files although not JavaScript for this project I'm working the sass files which is contained in the app folder but I don't really need to process the image files so I'm just going to create a new folder under disks hopefully it doesn't get deleted when I run the parcel but so I'm creating an image folder now I'm going to paste in the logo okay cool so let's see if this works you just say class logo and did and you know I think everyone has a different way of how they write their HTML and how they do their CSS classes but for images I usually like to just use I like to create a div and then set the image as the background image because I feel like I have more control over how it ends up looking okay so I'm also gonna move this style sass folder over here see this is just the test code that I'd I had for the parcel package again let's see Oh time writer says are you there during the design state of your input or that stage strictly designers it depends on the company ideally I would be involved at least in looking at the design before we get the final client approval otherwise you know they might design something that's very difficult to build in a website but yeah so usually you know I'll be there as part of the internal design review and then once it's approved internally it'll get sent over to the client then once the client approves it then it goes back to it goes back to me and then I start building it but I'm not like super involved in like the like every design decision that's made sometimes designers might come to me and ask me questions if they're not sure if something is feasible to build in a website cool okay I'm just going to delete all this CSS I don't really need right now let's see what else there wasn't that file a landing page thing I think I saw a style guide here too okay it sounds work ready to fall it's 375 from mobile 1440 pixels for desktop okay these are the colors um HSL I'm actually not sure what that is so I'm just gonna be like super honest about things that I don't understand so um wait let's look at that again HSL so I don't know what that is so I will look up on DuckDuckGo alright let's see what they say HSL is was it hue saturation and lomasa t so what I want to do is I want a hex code that's kind of weird that they didn't give me the hex colors honestly okay I'm just gonna look up what the HSL can bring the HSL colors and I'm gonna add those in as SAS variables and then we'll move on to setting up the fonts yeah so I'm I'm not sure how long I'm gonna be streaming I'm assuming maybe two hours max since we're almost half an hour through but I'm not at all planning on finishing this website in like an hour too so take a little bit longer than that especially with streaming and stuff at the same time but okay HSL to hex okay yeah man that's like kind of weird that they did that but anyway it's this hold on I'm just gonna check if there's a SAS mixing for HSL okay that's fine we're just gonna manually convert it okay so 243 and then 86 and 85 okay cool hopefully that's the right color okay cool I'm just gonna move this back over here because I'm gonna try to keep the actual website files on the left side and then like the design design files on the right side just so it's a bit clearer so one thing that I do like to do with my sass is to kind of organize them into multiple files so I'm actually going to [Music] gonna copy this I'm gonna make a new sass file and call it global mm-hmm thought FCSS and in the actual style the SCSS I'm not gonna have any actual CSS but I'm just going to import this should work I'm just going to make sure that what I wrote works oops what happened oh I got rid of the stuff I got rid of the Markab that I had added let's just test really quick but yeah feel free to ask questions as I go if anything doesn't make sense or you catch me making a mistake that's totally fine [Music] it looks like the CSS is not working okay I need to go back and fix this oh I know why geez because I you need that script you me that's JavaScript file to load everything else sorry you just need to bring that back okay so I'm just I just recopied it because what happens is let me just show you why this wood broke but mmm the script.js file well that's where your reloading the style lot s CSS so because I remove that reference to the JavaScript file it just didn't look at any of the CSS Theodosius thank you so much for walking us through yeah um I'll turn about this is not boring as possible but I just feel like yeah I'm happy to build this it's kind of fun little projects and you know hopefully I can save you all something how can I get something else oh I see okay this is saying that color white doesn't exist because here we're just gonna delete this stuff because we're not actually using it yeah wait why is it messing up Oh color white is still there so this is messing up because originally there was I had created a SAS variable at the very top saying that dollar sign white equals the white color like hashtag or pound FFF I remove that so that's why this is looking for that variable and it's not there that's why it's throwing that eros I'm just going to delete that save it again and then so I might have to cancel this and then rerun parcel and there hopefully will not be an error now okay looks like it's okay now all right cool okay looks like these styles are showing up correctly yeah let me know if this stuff here on the right is like readable through you I can try to make it a little bit bigger cool okay sorry that took so long but looks like these styles are indeed working so let's get back to the colors that we were trying to do or actually get back to organizing our SAS files so as I was mentioning in my SAS folder I'm using the Sava scss like the main SAS file to only import other files so this import global is importing everything from here so what actually like to do is create a lot of different SAS files because like I'll make one for each different part of the website each different block so we're gonna make one for colors and then just this cuz we don't need it and I'm going to add another import statement about importing colors so this is where we're going to create some variables for the colors that they have here so we'll say was it soft blue is and what was that that's good says this one soft blue cool and the next one is very dark blue so we're just gonna copy and paste all that stuff here 87 and 12 and I've honestly never used HSL colors in my life that is a great dark blue so we'll make another variable very dark blue and then so these are the primary colors and then these are accent colors yeah we'll just add a little comment here I like adding comments to my code because it helps keep things organized and also like you really want to be able to quickly be able to navigate through code either yourself like in the future like three weeks from now if I came back and I had to make changes to this project things like comments and just writing code that's very quickly understandable and quickly readable helps save a lot of time or if another you know let's say I was working on this project for a client and I built the website and then I'm gone and then they had to get another developer in to make changes of some kind it'll help them out a lot if the code that they have to wade through is like you know easy to navigate and stuff so that's why I try to keep my code as organized as I can okay next one is green so yeah there's a lot of copying and pasting and web development 95 and 43 so if you're easily bored this may be painful for you and I apologize but this is this is real life guys copying and pasting okay next one is dark blue 243 and then it was 58 and 33 so okay neutral I don't know if I need a comment for this necessarily because there's only one color but whatever gray HSL 0-0 50 okay Oh Ian Duke says I never work with HSL either only hex RGB I think you can declare like this oh man that was a waste of time all right let's see if this works I mean I've no doubt that you're right I just never honestly never worked with this before seems like it's working let's do a test color what was it soft blue oops was that wrong oh I didn't know I did import the colors why is this not working this is weird I mean just make sure I copied that right oh I know why colors needs to be before global because when when you compile your staffs to CSS it'll like do it in order that you sort of imported them so because the variables are on here before I was importing the global styles and I was trying to load this color soft blue before it actually loaded what the variable actually was so that's why that wasn't working but yeah seems like it is working okay thank you Ian for that tip that was a lot of extra time I didn't have to spend converting it but well I guess I learned something new okay so we got our colors I guess just for the sake of be consistent I'm just I'm just gonna do this and kind of manually copy everything just so it's all the same again just being consistent with your code I think is kind of important so it's not like Messi Tamara is my first job software to convert CD c++ oh boy and the comments from the last developer did to help me a lot yeah very true I my previous job I worked six years at an advertising agency and I was there long enough where you know a lot of developers before me left and I was there and I had to take over some of their projects and I'll just say that some of them were pretty good about commenting and organizing their code and some of them weren't and the ones that weren't it was pretty painful so yeah if you know if you're working on a project please for the sake of either your future self or you know whoever takes over the project after you please try to keep your code as organized as you can you know obviously this is a skill that you'll get better at over time you know I think there were times where I had to look back on old projects and looking at the code maybe just cringe inside because I knew that I wasn't at that time I hadn't written them very well I didn't write very clean code so you know it's just something that you'll get better at over time it's okay to not be perfect at everything right now cuz you know you'll improve okay next thing is fonts so we will create another file actually I don't know if this is necessary but I'll just do this anyway so these fonts are just they're all google fonts so don't need this anymore this is actually yeah this is just such a helpful project I think for if you're a beginner these products are really great because they really take you and all when they agree that you may or may not see in a tutorial I'm not really sure but setting up your fonts in color I think is good I guess just load this really fun okay so if you don't know how to use google fonts this is definitely a very helpful skill to have because I think more and more people are moving toward using google fonts or other online fonts as opposed to just loading you know WOFF files or something okay so they need seven hundred weight which is bold so we will unselect regular because we don't need that and you'll select seven hundred for bold so we will just take this and our wait a minute it should be some important thing I don't know I just usually use this I don't know if that's the right thing to do yeah I'm just gonna be on to y'all about things that I know and things I don't know cuz I think that's more helpful for everyone you know even though I've been the business for seven years now I still make mistakes and I I forget obvious things that I've probably learned multiple times but I think that's just a fact of life [Music] you want to leave this CSS stuff first cool and then I think we can actually just copy this why is that not working it's weird usually if you press control-d it'll just duplicate the line we're gonna try to cheat a little bit here and just sort of copy I think this is the right syntax to have commas between and Trent Waits I'm just going to double-check okay yeah there's comments between them let's go back here okay so using open sans for the regular fonts 400 is like regular wait 600 is like semi bold and seven hunters bold cool all right I think that's everything that we need in terms of setting up the styles [Music] okay cool someone get rid of this we don't really need that right now actually we will oops what'd I do oh I don't want to do that what'd I do Oh No there we go we can't press undo by accident you just check the design really quick okay so Philo is the h1 tag because that's the title of the website let's see what I want to do here I'll try this way okay so right now we're just focused on creating the header as we began like what 20 minutes ago so we got the logo we got the logo image here looks kind of good job box icon then we got Philo which is I guess the name of the company then we've got these links on the right side so what I'm going to do is I usually just try to get all the markup down and then I'll go back and like style it and make everything look the way the design does so we have the logo we're going to add the logo image as a background image then we have the Philo title text and then I'm going to add another set of semantic HTML tags for the nav because I guess not really the nav but usually you'd have like navigation links up here so we've got sign in and then this is actually a button so we will do that sign up I don't know if the link can go inside the button I don't know what the best practice is like if the a a anchor tag needs to go inside the button tag or vice versa just gonna look that up really quick sorry it's a really dumb little thing - kind of curious anchor tag inside button Lu tag I'll see you have an anchor inside a button tag is not correct HTML kind is the button inside an anchor tag see so this person is nesting a button tag inside the anchor tag but it says they get a validation error saying the button must not mean nested inside the a button so this is what I spent a lot of time doing when I'm working on any kind of website projects I am curious or I can't figure something out and then I looked it up and look read Stack Overflow posts so I can tell it this question is like a decent question because it has like 100 of votes and the answer has a lot of votes as well and it's been accepted as an answer so that kind of tells me those are indicators that tell me you know what's a good stackoverflow question and answer you know you can see if if it has like if the question that you're looking at has like zero up votes and you don't really know if it's a good question or not and if you don't know also if the answer that's given to that question is good so I try to stick with Stack Overflow questions and answers that have a lot of up votes meaning like you know a hundred is pretty good um okay enos any elements inside and a tag except the following button is one of them okay I don't know I guess like what I was wondering is like I know the button will kind of automatically make it look like a button but I don't know if is that really necessary cuz I could really just style the anchor tag as a button I'm just kind of curious sorry I won't take too much more time on this thing I think your channel or button tag let's see which one people are saying now this is helpful difference between anchors inputs and buttons so now I've got a blog post and this guy I know is a very popular tech blogger so says a question of what elements use oils down the semantics which means the markup will reflect the meaning of the content anchor will represent hyperlinks input represents a data field meaning stuff like in a forum like a text box or a button okay button every element or it represents a button ok buttons do the same things as inputs as the inputs in the form mentioned above honestly this websites just like a simple front-end thing I'm just gonna leave it as a button and not make it not worry about like making an anchor tag I don't think that's necessary I won't even sure if that was like the right thing that tilt try to do oh it's high rider says I'm so glad to see you looking stuff up online I'm still live again I say Zee web development some cough legal stuff that will not change no matter how good you get you'll just hopefully won't be looking up the same stuff as time goes on but you will be looking up some kind of things no matter what so okay this is our markup for the header okay so we got the logo in the div then we got this nav element with a sign-in and China buttons so just so you see what that looks like this is what it looks like let's zoom in a little bit oh yeah so nothing fancy obviously it's very far from what we want this to look like so this is just my personal preference but when I'm building stuff as I said I get the mark-up down and then I kind of then I sort of try to style it and when I'm styling stuff I personally like to make get the layout working first before doing like the fonts and the colors you can do it whatever way you want whatever makes the most sense to you so let's look back at this actually what I'm gonna do is and it looks terrible right now I just kind of like having this is what I usually use two screens for but let's just close out the design stuff we don't need that right now we I usually like to have two screens because I can sort of have the design on one side as a reference and then kind of make sure all my markup and my styles kind of match it otherwise you're having to flip between things is the video still working for you guys looks like it cut out for me hold on one second I may try to reload the twitch page my laptop fans running okay I will just try to continue on even though I can't see the chat room right now yeah so I just like having the design like as a reference while I'm actually coding stuff okay so the first thing that we see when we see these elements is that the logos on the right and the links are on the left so what I'm gonna have to do is use flexbox - okay thanks Abbie of still working I'm gonna have to use flexbox to align things correctly so in Flex box the first thing you want to have is you want to have like a parent element and we have that here with the header and then logo the nav are two separate elements so let's see I guess the best thing to do would be to create a new sass file I know that sounds kind of silly but it's just all part of trying to keep your code organized so we're going to make a new file called header yes CSS and then we will import it let's just add some little extra labeling here - all the same modules I don't know if that's really the right term but okay so now it's loading the header get back to I guess I can use that okay so what we want to do is we want to make the header sorry just gonna move this over side a little bit more room trying to do this let's try splitting down okay so this is the header and then I'm just gonna add sort of style declarations for each of the elements so header we said we want it to be the flexbox parent meaning you'll have a property display flex so adding this will automatically make the child elements which are the logo div and then the nav element they'll automatically be flexbox flex or whatever you call it okay so yes it still looks terrible but we can see here the header is this whole length here and then we got the logo here and then we got the nav links here so this is flex in terms of it's doing what it's supposed to do another thing that I like to do when I'm writing code is when I'm sort of adding new styles if I'm just curious like I'm not sure if it's gonna work I will actually just add it in the browser this isn't saving in the files or anything but you can just more quickly see the result so we want to do this we want to make the links be on the right side so we'll do justify content and I believe it's space between yeah another thing I'd like to do is I'm just showing you guys all like my dirty little tricks here but what I also like to do is add borders around everything so I can kind of see where they all end so we can see here just like content space between things do you write space around kind of evenly add space to around the elements so when you want something on the left edge and the right edge you kind of want to use the space between property so now that we know that that works we will do this and I'll just copy the border to just for the sake of clarity cool Oh refa Lazar says hi yes thank you for watching okay so we got the header here actually okay I think I add this padding here which I don't really want so this is one reason why I always keep my inspection tools open because I can quickly change things or like remove styles and see mm-hmm you know what it is I want it to look like I think it was in global just take this away also we don't need that I guess for each one we'll add that back in there actually I don't know if that was right no it's white so I'm putting h1 in the global even though it is in the header I'm just because I try to keep my default styles for text text textiles and other styles related a typography in the global sass file but that's just my personal preference you know you can do whatever you want okay cool so let's see oops what did I do this time oh it doesn't have the white car let's just add this here so we stop running into this error okay sorry everybody okay it's white now that's why we can't see it um okay what do we want to do next we should probably do the background color for the header and the hero okay this is gonna be interesting so we can see that the header and the hero they sort of share this back on gradient thing so that means that we will need to add the gradient to a parent element that contains both the header and the hero I mean I guess we could put the hero stuff inside the header tag I don't see why you can't do that okay so later on we're gonna I'm just adding another kinase email comment here we'll just add the hero here this is another thing that I try to do you just to make the HTML a bit more readable also annotations very important I try to keep things indented properly meaning every child element is indented one thing tab space whatever you use from the parent element so it just makes things a bit easier to see and then I try to add spaces between some elements so okay I don't think they gave us any direction on the actual gradient stuff they did give us color info so maybe we'll do that okay let's look at this gradient so this was like a radial gradient and the like the lighter color this light purple here which I think is the soft blue color and then it goes to this darker blue purple color here so sorry let's just get this back to where it was okay so what we're gonna do is let's just double check those colors it was so dark purple blue is the dark blue I'm assuming and this sort of light purple thing as a soft blue so we'll just remember that and then I'll show you one of my other favorite tools called ultimate great generator so Oh time writer says all the tutorials you've seen use google chrome for web dev you're the first to use Firefox um it's a mostly just preference I used to use completely Chrome for everything but I am sort of trying to get away from using Google that's why I used up that go for my search my search engine and that's why I'm using Firefox here just because I think we're just really dependent on Google and they have some you know they just have a lot of control over your privacy in your data and they track they try to track everything for their add business and you know I'm not really cool with that I think DuckDuckGo it's like a non-profit Firefox is a non-profit but that's a whole nother thing but yeah that's why I use Firefox and why I'm using DuckDuckGo yeah there's nothing if you want to use Google that's totally fine like I still use goal for some researches because honestly it's just a much better search engine yeah but okay so I really like this tool a great generator because you can make gradients and then you can just sort of copy the CSS so or let's see okay so this is this whole thing's a circle the inner circle is gonna be the lighter color and outer circle is gonna be the darker color so we want to make this one the dark purple blue and I guess it was a good thing that I converted all the HSL things to hex cuz now I can just copy these I'll make this into the white color yeah I use this tool all the time I think there is like a tool or a mixin that you can use that will automatically generate like the necessary CSS but like I just I use this yeah you need compass which I didn't install so I just copy all this and then let's see if because I guess by by default I would just copy the gradient style here but I just want to see that's reused okay it's not reused if this gradient background was reused somewhere else I would probably I would add it as like a helper class so like I'd create a new class saying blue gradient or whatever blue radial gradient and then add the CSS there and then I'll just show you what's at under Global's helper classes so helper classes are just little CSS class that you can reuse and that's why you kind of put the Styles into a separate class blue will stay blue radial gradient and will copy all the gradient styles that we just got from colorzilla so this means that this class here we would need to add to the it's going to try to close some of these things my screens not big enough okay so that means we would add that helper class that we just created to the header element and then let's see whoo-hoo here we go obviously it doesn't really look like what we want because it looks like it's kind of offset a little bit so hmm sorry something close it don't really quick okay this is the problem here is by default the rating the radial gradient is centered as you can see here obviously it's centered but this is way too small like it's too short and then we kind of want to offset the gradient so I don't know how to do that so let's look it up CSS gradient offset the other thing is that I'm gonna have to make that header element like a way taller to make the gradient sort of either right sighs I guess yeah so back to looking up stuff let's see gradients or background image hmm linear gradient yeah sorry hopefully this isn't too boring but this is just kind of part of the job I am planning on putting this dream on YouTube I'm trying to figure out if I want to edit it down or not because you know I think streaming is just much longer and for you to kind of want more edited short videos okay so for regular gradient default is a start in the center of the element and fade to the end yes that's what's happening what I'm trying to figure out right now is is there a way to change the center of the radial gradient and also maybe change like the like how big it is okay it doesn't have to start a default Center you can specify certain point by using at as first part of the parameter man may I didn't have to use colorzilla I'll just copy this and go back to that thing you know I'm just going to delete this because I still have it yeah I copied here so I'm just gonna delete all this so something's not right oh wait background image okay so let's change those colors again soft blue and dark blue that's not ready there we go yes we'll keep it like that okay anyway um see how that looks Oh hmm not bad okay I learned something new today huh yeah we just saw many things in the web development like you just you sometimes don't know what you don't know so I think that's one reason why it's important to try to keep building things because there's always gonna be something new coming up and there's always gonna be something new that you just didn't know about so cool man yeah I've never actually used this before sad as that might be to say I'm wondering what the didn't browser support is for that okay so what I've done is I'm I'm trying to see what browser support this radial gradient property of background image has so typing it on can I use comm which I use all the time um looks like it's very supported except for Safari partial support in Safari so this might not work in Safari so if that happens then they would have to go use this thing yeah there's like just weird bugs in different browsers yeah CSS tricks is a great resource I use it all the time actually I'm gonna show you one post on CSS tricks that I always go back to this complete guide to flexbox it's really helpful because it has just these visual representations of everything and I'll probably refer back to this later on when we change the order of some of those elements but yeah this is like I love CSS tricks they also recently redesigned their web and the new design is like way better than the old one anyway okay we'll just keep can't I use open because we might have to look stuff up on there later but that actually it looks kind of similar to what we want this to look like let's see how tall this thing is so the square part is about 690 and then the triangle part is 164 so well 690 so is about 700 let's just see how the grain looks when we increase this thing was this is just this see we're gonna set the height to 700 oops oh it's because I zoomed in quite a bit oops I'm sorry okay so now this is normal size um how does that look I think actually the radial looks like the center is actually more on the bottom so let's try to change that background means radial gradient circle at top right so let's try changing that too awesome right hmm that looks pretty good look it is a bit different like it gets like this part is like the darker part is almost half and it just changes to light way too quickly and if you can change that like I wonder if how you can control when it sort of changes colors were we yeah so I'm definitely not going to finish this whole website tonight not that I was planning on it but like in real life it would take me I would say a day to build this entire website you know maybe a little less in one day but it's definitely you know it's not something that's like super quick unless maybe I'm just really slow but I don't think I am also I'm talking at the same time and looking stuff up so the talking part I guess makes things a bit longer but I guess this will turn into a series okay so what were you looking at we wanted to find out if I can make the make it change slower I guess make it have more dark stuff more of a dark blue okay let's see whoa this is complicated radial granite has gone through some syntax changes there is again old tweener and new man this is a bit complicated huh so it's a new one is what this index that we were just using this saying circle Yatta Yatta for i decide it right what do we have circle at top right I'm just curious see if that change anything oh I forgot I need to make header that's one thing I don't like about like things that will sort of auto reload the page because sometimes I you know when I'm typing and all these Styles in the browser if I change something and it reruns it then it sort of removes those changes but that means I shouldn't be doing that we're just gonna add a height of 700 pixels for now just to sort of see how that oh I think that was actually better I think was it originally sir it was like I'll just cut that circle at top right was it it was bottom right interesting and then we changed that too [Music] hmm it did change something yeah it looks like it's making the center a bit more to the right than the other one looks a little better but I feel like it's still not exactly you know we're talking like this is what the end result should look like still way too light but we'll just keep this for now just because it's a little bit closer to what we're looking for okay I guess that was really there okay so let's come back to researching our radial gradients and trying to figure out if we can change the positioning not even you know feel free to chime in in the chat yeah I guess I hope whatever takeaway you take from this stream is that no matter how experienced you are there's always things that you don't know so okay it's just kind of annoying I guess what we could do is sort of try to hack it we could say let's just see if this works what I'm trying to do is try to make the width bigger so that the purple side might be more now this might not even work right now with this 1274 what's it I think this you can do HW no that's not anything VW is vertical quits they're recording our version of eh BW + vh Oh phew listen to you hi you I'm just okay that doesn't do anything man I'm honestly kind of stumped okay let's look back let's do some more research on the radial gradient so what I'm searching for stuff that I'm like trying to figure out I always start with like what the sort of general area is and this is a CSS thing so I'm just putting CSS first and then the CSS thing that I'm actually looking for watching the X in this case is the radial gradient change center ooh radial gradient position Oh real gradient dot IO that looks promising I'm just sort of trying to scan this quickly and see also when was this published it doesn't really say I don't know if this might be too old no no this looks right yeah so all the tutorial videos that you watch what they don't put in is all the hours that the person making the tutorial video had to spend researching stuff like what I'm doing right now so yeah maybe it doesn't make for interesting video but this is part of the job let's see okay a position you can okay this is interesting you are able to specify an exact position for your radial gradient missing a numerical value if you sell the property to 350 px times 200 it would take that size and then gradient along with it hmm oh this might be helpful the length and percentage you can set a numeric value that serves the circles radius okay this is kind of sounds like what we're looking for you say this by determining the length with positive pixels or relative units you can't use negative that's fine wait you can't just with a circle the size allows any relative to the gradient box rather than the green itself what okay let's do another search so I'm interested in trying to determine the length of the gradient so let's do a search for that okay mdn is also good thing yeah Mozilla developer Network they but not the most like exciting website I guess are more of like a reference but like they're very it's like full of information because it's like literally a reference for like anything related to like CSS or I think also JavaScript yeah it's like they have stuff on everything so let's see what they have to say here yeah a radial grant has no intrinsic dimensions it doesn't have a natural or preferred size its size won't match the size of the element that it applies to which is what's happening here so I'm trying to see if there's anything that we can do to either move the center of the gradient or change the size of it this is sort of like what we did but it's just not at all okay I hate to say this but I'm gonna actually need to go back to colorzilla because see they have this my slider here that looks weird but oops that's not what I wanted to do oops see okay let's just good old colorzilla okay I mean this was great and all but it didn't give us you know this is probably just due to my lack of knowledge about it but you know didn't give us what we're trying to do you'll have to research that for next time okay that looks really weird you know I wonder if I need to actually create a another middle color in a way so I'm gonna create a little midpoint here and make this lighter color that's still way too much hmm this is very frustrating Oh in Duke sheppy app I'm willing to try anything at this point she says gradient generator ooh that looks nice okay let's try this radial what's a Kona green this is pretty cool I love tools like these that you can like has like a nice user interface okay we'll just give this a shot what do we have here okay so the center is the lighter color we'll just copy it from what we had here Center is the green color we will change that to this and then I'll change that to the dark color which is this actually looks kind of better I'm not sure why okay let's see we can edit some of these things Oh what boxer shape goes into why am i changing here I can't tell oh wait box details shape in box this is probably at 50 by default I'm guessing Oh oh my gosh this is like exactly what we were looking for thank you subscribe to cutie pie alright thanks was that guys trying to hit like a hundred million or a billion my husband watches his videos a lot but I usually just listen to the screaming from the next room okay thank you so much and for this thing let's just see I thought it's still a bit like I wish the grading was a little bit more I don't know it seems to kind of quickly go to that blue color the dark blue color but let's just Oh I scooped in gold pen is another helpful with it you can try stuff okay that didn't work at all it's not copying oh here all right let's we will just delete this cuz it didn't really work we'll keep that it sort of worked background okay moment of truth what happened I must have a syntax error background image yes real gradient yeah I just don't know enough oh wait a minute that's just the no repeat stuff I don't know if that matters okay I guess this is some part of this is like not good syntax oh that's not right oh that's just from here okay it's all right I'm getting tired I'm like slow okay Oh someone look great guys yeah that does not look great okay you know what that's so annoying I'm just okay you know what I might be able to do okay we're gonna try something we're gonna try something crazy we're just not gonna use this helper class so don't worry about it I don't need this what I'm gonna say what I'm gonna do is I'm actually gonna try to do it in a pseudo element I'll show you what I mean so what I'm doing is I'm creating a pseudo element which is sort of like a like a ghost element for lack of a better word of the header element and that's what I mean by the ampersand : after that's the after pseudo element and what I'm trying to do is make it into a kind of a background image so what I want to do is I want the pseudo element to be absolutely positioned so I could control the positioning of it but it needs to be the same height and width of the parent element which is header so that's why I'm going to do this that's wrong which is a hundred percent and then height 100 percent also which means it will just inherit the height and width from the parent and then why is it's not working oh I forgot in pseudo elements you have to have a Content property otherwise it's just not gonna exist so if it doesn't need to contain anything you can just do what I did content is like empty quotes okay so looks like it's back it is on top of everything else but let's see so the index is zero actually I think these need to be okay basically what was happening was I created this element which is part of the parent element the pseudo element and that's why it's on top of now the logo and then they have so I need to add the z-index to the water and make this background be zero meaning it's gonna be on the bottom and then anything above zero it'll be on top so you can sort of layer successive things I don't know this is maybe kind of hacky but so we're just gonna add a position relative index of one to the other elements inside the header and then the nx20 to the background okay cool so now everything is like on top of the background so I'm just gonna change back to that original this thing here that it seemed to be working we'll just keep this in case we would need it later let's put it all in one line having it having long CSS properties on multiple lines it's really just for readability ooh that looks a bit better right and then let's see what I'm gonna try to do is what was I gonna do I want to try to move this over so it's more to the right I could do a transform okay I know it looks terrible but what we're also going to do is add the dark blue which is dark blue as the background color for the header oops oh man it got rid of it again yeah I just don't like those auto reload things anyway translate X we'll start with 10% well this is Jing is it's gonna actually move that element to the right because the X is e Corazon ttle access Texas as you can see here the pseudo-element I made is actually it's been moved over and just for the sake of clarity add my favorite I'll just do white so we can see what position it's in so we move it yeah look at that maybe this is happy but you know what its Orkin so if we get rid of the border we can see it does look a bit more similar to this which is great I'm just kind of eyeballing it so we'll try to move it a little bit more you have to need to move down a bit to translate let's try a 10% down oh that's bad we don't want to do that that was not a good idea um yeah I'm honestly just gonna have to do more research on the radio green and stuff but I think that's kind of good enough for me now I just I want to bore you guys oh really much so let us add this is everything there translate is 44% so we'll just change this yeah good enough for me this is one listing that I would make and then I know that the designer is not gonna like it but well okay this is taking way longer than I was thinking it would take I was like oh I can probably finish like half of it in like one session but no we're like an hour and a half in and I like just added the background color to the hero just for the sake of finishing something I think what I would like to do before signing off is at least style these things sound good yeah so let's get the approximate so I'm assuming that this JPEG is at 100% of the correct size that we want that the designer wanted it to be so this is also very approximate this is also kind of what I do sometimes if I don't have a sketch file and I think front end mentor you have to pay like $5 to get the actual sketch well plus I don't have a Mac so I can't use sketch so it doesn't matter to me okay so this is about 56 by 46 pixels so let's just load that logo image up this display block width was 56 pixels and height was 46 pixels and then we're going to set the background image to that SVG and where did we put that we put it in disk I detected the thing oh this is in the app okay so what I do want to do is get here and then go to dist and then load the image here and then background size I usually just do cover cover means that whoops cover means it'll cover the it'll make the width and the height fill the the div without really like skewing it or anything okay no such file what did I do I think I need to add quotes here and also didn't work oops wait the whitening again whoo what did I do out there see I wonder if I just sort of oh okay it did work you know I feel like I don't need any digital work no sorry this is something that shouldn't I should figure out before streaming but [Music] nope I can't find this file oh wait why the website in there twice okay he's gone through the air again website app oh I'm gonna get out of the app oh geez okay that works I love when I get stuck on something for a while and it's just a dumb like syntax like I'd needed to have that front slash and that's why it was breaking all right okay loaded sue because so because I actually put the h1 tag inside the hey let me just show you put it inside I put the h1 tag inside the logo div so they're together but what I want to do is I need to position them correctly actually let's get the font working then I didn't see any notes about the font sizes so I will just try to eyeball yeah Oh time right Isis isn't learning a lot learned some so from Ian yeah no problem thanks for watching okay so this is the h1 tag so the font family was oops wait I don't maybe I don't need this it was railway I believe it was oh man another thing I have to try to string when I'm a little more with it I think I'm getting kind of tired let's open that design file again or the design folder a style guide really okay real way select this font what I'm doing is I'm just trying to make sure that I am loading the font the way that I need to and the CSS okay so I did this part I go to the link tag and then use a fall and CSS rule to specify these families so I should just be able to do this actually another thing that I like to do is create more variables of course this is has a syntax error but let's see where should I put these things I guess I shouldn't have deleted the font s CSS file no it's still there okay good we're just gonna do this and then secondary this way let's say I didn't create these variables and I just had railway and open sans like every single time in my CSS in my CSS if we changed the like let's say they change from railway to like something else like matzo right or whatever I would have to go and do like a fine inner place for every single instance of railway and change it to the new font and that would be that would take a lot of time so is much quicker and it makes it easier when you're changing things to have these variables so this way I can use this primary font variable and then it's just primary font and it automatically loads is railway and then I believe the font weight was oops I don't know everyone has a different order that they like writing or CSS and what I sort of tried it like for tech stuff I'll do font family then font weight and then we're up front size actually which I forgot to do I don't think there was any notes about the font sizes yeah I guess that's another that's one one reason why getting the actual design file would be more helpful but we can just eyeball it I'm seeing us pixels because well I think the best practice for font sizes is using rims one room is about sixteen so try it to room and not even that's something that you could create variables for so like if you have like a standard font size you want all your paragraph tags to be in like all the regular text you can create a variable being like you know font size is normal font size like body content or whatever and then just use that but we will just be approximate here okay hey you look at that font loaded so what I want to do is I want the text to be next to the logo obviously let's just zoom in a little bit more so right click and inspect element h1 so we can see the logo is the background image I actually don't want the width of this and all the width of the entire element to only be 56 pixels because you can see that this is happening I mean doesn't matter a whole lot in this case but I think I'm just going to we'll just set the height and then we will let the width be whatever the text is so right now because the logo image is a background image it's behind the text and so what we want to do is we're gonna add some adding padding left let's just say 56 whoops okay what what's going on here this is very strange oh I'm sorry the whole logos of the SVG so we don't need the extra markup that I added my bed although honestly I think that for accessibility purposes you usually do on an h1 tag so mm-hmm okay I'm sorry I'm gonna look up one more thing it's probably drive you guys crazy so generally like you want the h1 tag to be like the name of the website or whatever so because the SVG has the text we need to figure out what we want to do for that because accessibility wise like a screen reader can't really read an SVG so see if SVG for website title accessibility okay I guess this is not I'm not interested in like doing a whole bunch of research on that species right now so I think actually I'm gonna do is I'm gonna leave the oil just take the whole thing out like it's fine yeah that's bad accessibility though but I think just for the sake of completing this we will all just do this so there we go let's just see how tall we'll see what the actual size is actual meaning like a very approximate so this is about 160 pixels wide Oh actually they were epi info in the actual SVG file itself yes width is 120 height is 35 so we will add that to here sorry 120 height is what was I 35 there we go so again I just preferred using background images but another thing can do is load the SVG as in an image tag so woohoo made the logo um okay so now I can also see that we need some padding at it add it here let's just see overall oops oops what the padding is on the design so what I mean by padding overall padding is like you can see here as you go all the way down there's like a certain amount of space which is about a air it's about like 60 years 70 almost 80 pixels wide so we'll just add that padding in later so it's about 80 pixels wide and then again this is yes very exact how much is a top padding it's about 50/50 let's just say 52 so what we're gonna do is I'm going to add a top padding a 52 to the header element and then we'll add the side padding with the helper class because that's being reused so let's do the top padding first actually I guess we add the top padding and the side padding with the helper class because we're probably assuming like if you have a Content block you're gonna want some padding so we'll just do that sorry it just is not making sense so what I want to do is create a helper class called let's get rid of that that wasn't helpful at all wrapper and we'll say padding top or padding is it was what 52 pixels on the top and we'll add it also on the bottom just for the sake of consistency and then the side padding is going to be 80 pixels so then any element that has this wrapper class will have as padding automatically so again it's like one way that you can make sure all your styles and everything are consistent throughout so to the header or on class equals wrapper Senate should automatically have this padding now which it does oh but this is messed up now see oh I think if we okay so what happened was I had added padding so by default the pseudo element would kind of just take that padding I think they should be oh you know what I didn't do I didn't add I guess I doesn't matter oh I'm sorry sorry I'm like really scattered right now but every element needs to have box sizing is equal to border box thinks it doesn't seem to affect this the child element um okay well that's fine box sizing border box is just a global CSS style that you always want added to everything so I think it is like Asterix which means every element and then all be like pseudo elements so it's inheriting it from HTML I just read online that you want to set the box sizing border box on the HTML and inherit it for every element this basically means that the width and height of an element will not be affected by the padding so say if I had an element that was like 400 pixels tall 400 pixels in height and I added 20 pixels to it it would add the padding to the height property so then instead of 400 it would be if I had padding of 20 pixels on top and bottom it would make the height 440 pixels and you don't always want you generally don't really want that you want the patent to just be kind of included in the height so that's why this is added it's just kind of a general best practice and I think CSS tricks has like a little article on that too because they have articles on everything it's like awesome man it's getting kind of late anyway if you're interested in that you can read this later so we're getting there so what I want to do is I want the header pseudo-element to be up at the top otherwise you have this weird thing here so we want up to set top is 0 so in the header pseudo-element will just say top-10 let's delete this don't really need it okay cool so now we just need to add the links so these looks like it looks like they are the same size so let's see what CSS we would use for that so then under nav let's say a and also buttons elements would be having fun let's say the font family is the yeah and then font size let's just say I don't know the actual pixel size needs to be but just put that into now and color is white oh and font weight is I think regular so 400 okay that looks pretty good we do not want that underline the underline is just a default a default browser style so under global we want to get rid of that text-decoration:none now shoot that should get rid of the underline which it did great see what the actual let's zoom out so you can see that adding this as the button element made it like a button okay so I think I'd put 1.5 REMS that's a little quite a bit too big let's try one room one remedy cool is about 16 about not about equals 16 pixels [Music] font-weight seems lighter than that let's check with font weights from the style guide yeah 400 600 700 hmm I wonder why sometimes I have noticed actually a lot of the times that the font like how the fonts look on the actual website are slightly different than how the fonts look in you know sketch or Adobe I'm not sure why that is I mean I think a lot of it is because when you load the font in a software program like sketch it actually you need the actual font file and sometimes it just like some slight differences between the web font and then the bucket design fonts but anyway see what we got here okay so sign in and sign up and then the sign up button is a green color it looks like it has a little box shadow you can see on the bigger get started button there's a little box shadow there on the left bottom side so we'll add that later let's get that green color in for now Green so the column means that these styles here that I added the textiles will apply to both anchor and the button which is what we had here and then for the button I only want the button to be green I know an anchor thing to be green okay this should work okay and you can see here you can see that there's this border default border which we don't want so I believe to get rid of that it's just border:0 sweet remind me to put this in the CSS before I reload anything okay we don't see it there's like a little it's slightly rounded which means it has a border radius so let's just try to pixels maybe you want to let's try two pixels it seems pretty good and it does look like there's a good bit of padding so like let's see here the horizontal padding is about 40 40 let's say 40 on the left and right and then the top and bottom is roughly 12 10 or 12 so it's 12 on top of bottom and 40 and a spring just color like England it seems a bit too long because the total width is about 122 and this is at 137 so let's just get rid of some of that horizontal padding so you can see as you can see the highlighted part on the button it sort of tells you the actual dimensions which is like kind of nice we'll just do 12 pixel by 480 pixels that's the roundedness is okay actually it seems a bit tall to see how tall it is oops it's about 38 it's probably about 40 and this one is 46 so we'll take down some of that vertical padding as well so 9 pixels instead of 12 pixels and that looks closer that's pretty good okay good enough for me so let's copy the styles that we added here and put them in our CSS yeah looks like a button okay we'll add some spacing as well looks like there's about 30 pixels between them so what I'm going to do is I'm just gonna add a margin right up three pixels so then the spacings like that another cool thing about flexbox which you may or may not have had to worry about is that before when we would use floats for laying out everything it was very difficult to vertically Center things but with flexbox it does it automatically so flexbox is like awesome it it makes like laying out things just so much easier okay where was I margin right on that first link so we'll add margin right property to the eighth element I put the a in front of the button because in here that's it's comes first that's that's really all it is cool hey you guys we finished something well it's like was like two hours um okay I'll get rid of or --tx I don't really need it anymore yeah this took this looked quite a bit longer than I thought you know maybe I I think too much of my coding skills but you know this is cool okay I think I want to stop for now we will continue this in my next streaming session I'll try to figure out maybe a regular time it's most likely gonna be on the weekends but yeah the next step to finish this would actually be we want to add to some hover States so when you hover over the green button you want to turn to the the hand probably here for this the logo should link to the home page even though this is just a one page website just because in case you have multiple pages you want you always want the logo to link back to the home and then what we might do is finish kind of styling this button we'll add a hover State so it'll maybe change some colors a bit when you hover over it and then we also want to add that box shadow because we didn't do that this time I guess we can do that right now really quick why not so box shadows are fairly easy so wait it's I'll explain all this in one second let me just type this all out okay so box house take a bunch of different parameters the pixel parameters are like they control sort of the spread of the shadow and also the the horizontal and vertical positioning oh man I hope this works I'm gonna I'm gonna feel pretty silly this is wrong let's just try and then the second part the rgba stuff that's the color of the shadow so I've made it white and then the last one is the opacity I'm gonna set it to 1 and then if I tweak this stuff it should there we go look at that so the first parameter is like the horizontal positioning and then the second one's the vertical positioning third one is these spread so the higher it is the more it sort of does that and again we're just kind of we're just sort of guesstimating all this stuff here I guess when you buy the sketch the sketch palette you'll actually see the CSS properties and just make this like slightly translucent that's pretty close right just look here it's very slight I don't even know if that top button has it but we'll just do it anyway another thing that I would do since there's more than one green button is that yeah it's like they're all the buttons are green I would create a helper class again for this because sometimes websites will have different colored buttons and then it's easier to just swap them out using a CSS class but you know what this is I'm pretty happy with this will just make it more slight okay so we'll just copy this the box shadow and add it to the button property cool okay it looks kind of weird but you know what that's just good enough for me now so yeah thanks Ivan for joining in feel free to you know ask any questions while I'm streaming and stuff and you know I'm planning on doing this on a regular basis and just keep sort of hacking away this website so cool we will see you next time