Insure Landing Page - Design to HTML/CSS

hello and welcome to this live stream where we're going to build the fort website for the seven-day seven websites challenge how are you today welcome Yvonne welcome Gabrielle if you're in the livestream say hi in the chat let's see who's with us today in the meantime let me go over what we're going to build in this livestream let's see everything seems to working to be working fine hello Alberto toast welcome I have to make the donuts alright so this is the website we're going to build tonight well tonight it might I'm not sure what time is there where you are hello I'll code it's an interesting name how are you get real nice to see you join the livestream I yeah all right I let me send you actually the link here in the chat in case someone needs it just point them to this link this is the website we're going to build it has a nice header a navigation here on the top then we have how should we call this section info section I guess and we have put her hair down with some nice icons here and finally the footer is cleaner not like we had in the previous ones nice which tutorial were you watching eggs bread for mentioning me 1 p.m. there whoa here is 7 p.m. in Eastern Europe alright so I went ahead and downloaded the files well actually let's see how many submissions we have for the 7-day several websites charge whoa 233 submissions oh I know so many i CST's five people already submitted for day seven now so he has 46 but these two don't have our basics not sure why they submitted four days seven oh well I need to go over these and see how they look so far we are a day three well we did day three yesterday today is day four hello let's see who joined mirador welcome and thousand weights interesting alone max the heart nice nice to see you all all right so these are a lot college blog kay hopefully people built these in these days from air salut today hello Yvonne john-john don't look yes it pronounced it right is that French hello Sylvester oh babe you salute all right mm-hmm let me think so we don't loaded the files all right we are for those of you who've been following along not sure who is who here follow the lung since we started this rant a mental challenge but we are at the ninth website I started the seven day seven websites challenge with this one but we already had like five projects build so if you want to see how we build all of these up to this one which we're going to build today make sure you check out my channel you will find all of the live streams there is a playlist in the description where you can find all of them and you can learn how to build them I got a message yesterday I think someone said that with my tutorials they he build the first website in his life that was pretty pretty amazing okay hello Poppins Romanian invasion I saw someone submitted Facebook really I need to check that I will delete it though you can see I did some coding and I have this button here if I click it let's see do we have Facebook now every day you give it another name but I could delete whatever I want making all right interesting so if I go here and I submit I know Google or day one I can just go down and [Music] oops and interesting we can delete it okay okay bad day I think it's because let's see the button is on top of the link yeah probably that's why top let me put it 20 pixels up all right yeah I need to pack my own my own code just to be able to use it well that's the life of a programmer what can you do so live debugging yet hello Lu Emmanuelle next met jean-luc yeah it's French nice why would the oh hi Ben Yanni welcome [Laughter] hello black ghost I hope everyone is fine too alright let's let's get to the coding and see what we can do today so I went ahead and downloaded this the zip where which contains the assets we need let me close this and open vs code all right Oh bah-bah where is the lemonade now lemonade today unfortunately you should send me some oranges yes tomorrow we're going to have a pop up upper questions like live stream live chat chill stream kill that chill life I'm not sure how to call it yet but yeah I'm going to make I'm going to make it so that you'll see amateur around this hour will be probably tomorrow and you can ask whatever questions you want so feel free to join hey Sam welcome all right so here we have the live preview of what we have in the index dot HTML file they did the hard work for us and we had we have all the text which is nice what we're going to do is to take the design or active state oh boy all right we need to take care of this too a nap design whoa so we have some NAB dine on mobile which is interesting okay let me open this so we can see it can analyze it to see what sections we have and what we need to do with them yeah which is your favorite color pink and purple for some reason probably because when I grew up there was like oh you shouldn't like pink and purple and I was like why not I like being a purple ah what can you say all right let's let's get back to business and see how we need to structure our our HTML so we have a navigation up here which probably this is an icon probably we have some text and a button all right then we have a header now the header has some interesting patterns you can see this image here this image here and also this image is kind of nasty image goes out of its parent so that will be interesting to build also the headers again we have the same headers the same size headers okay and they have here some some line I guess we could do that way to the left of 0 element okay so again we have the navigation then we have the header which has the left side and the right side on the left side we have a text with a button here and we have an image on the right side alright and then we have another header here this is probably another section and we have three columns okay and here we have another section you can see that we have some some kind of container everything is inside this box somehow yeah and also the nav all right so we need to keep track of dead and then we have the footer you can see this pattern keeps appearing everywhere so when you take care of those all right I think that's it let's see the net will be harder to build well harder we're going to take care of the responsive part which will be interesting than this image to go outside of its parent will be interesting to build and yeah other than that it should be pretty straightforward okay if you're around or Liam or do we have any other mods probably not help me please with the chat I want I won't look at the chat that much as I'm going to start coding and if someone has some questions just let me know I'm going to leave at the end a couple of minutes ten minutes if if you have questions good let's start coding let me stretch I need the CJ from the coding garden if you're watching his dreams he has some sort of application which tells him every 30 minutes you need to stretch and I kinda need that application as I sit too much hopefully my pending desk will arrived these days so I can sit sit down and also stand okie-dokie we need this we need a style guide let's see whoa we have a bunch of images all right pattern footer desta background pattern footer mobile oh boy okay image inter desktop image intra mobile I guess the mobile design is different let's take a look okay you'll notice here that the image goes on top okay everything is centered then all right okay and then pretty much the normal flow and this converts in the hamburger menu which will look like this oh okay so basically hmm it will pop up and cover the entire weight I'm sorry the entire screen okay so this is pretty interesting hello maestro hello bish bish watch it open that's right where do you get the designs I get it from front end mentor pa any other questions a for graphics what's poppin alright now here we have in the style guide we have the colors five colors okay and we have two fonts get let's keep that in mind and let's start working on our HTML will be an interesting one probably the hardest we did so far which is which is interesting which is nice okay where is that image on the left all right let's work on the navigation so navigation inside we're going to have a container this container will be that box which I talked about which will wrap everything all right yeah just a side note of off-topic I guess I'm not sure I was doing these PSD to HTML CSS or a living a couple of years ago so this is why I might seem that I am Miller with this I did a lot of designed to HTML CSS and not sure how much people need to do this these days but well you actually you need to do them probably with the tools like figma and sketch you can get the CSS faster but still it's not the perfect CSS so by knowing how how to write your own it's still I think the best way to make it clean a spot as clean as possible oh yeah okay that was just an off of topics of how a probably wasn't off top okay let be geisha good we need air in the container the image on the left and the navigation on the right well the UL so let's let's create that flex Conte flex I'll do we called flex container this container keeps track of the width and this will make the div would be flex display so we have the image from email yes and probably let's see logo yeah Oh alright and on the right we'll have ul Li times 4 and the link here we have how we would we work then we have blog then we have count then we have you plants but this is like a bathtub see here also this also so let's let's say the class of BTM to it and guess hmm let me think a bit so these are gray but the size of them could be the same yes we don't have the border right yeah so let's keep it the class of BTN and we'll see how that goes okay now we have those which is nice let's go to the header keep in mind that we haven't added yet the menu on mobile we're going to do that when we get to the mobile part that's the navigation let's add header which also has a container now the reason why I'm adding a container inside the header is that this should be inside this fixed weight but you can see the color here which we're going to add on the header and this will be the container and decided to flex which will make the two columns good luck Jane okay are using CSS grid now I'm more familiar with flags how I'm using Fox okay so we have flex here we have h1 which will be this text kay and we have let's see we have the paragraph and a button a paragraph will be this paragraph right and move this up yet and we have a button with the class of BTL which will save you plans all right get get get so that will be on the left so let's put it in a div all right and on the right we're going to have another dip which will have the image images now let's see which image will that be image entered desktop I guess that intro let's see yeah so that's the image get get get so that's it with our header now this section let's see about it section now with these actually because we don't have a background color we could have this section have the class of container right because we don't have a color so it doesn't need to go outside here but that will do it also maybe for the nav we could but I wanted to keep the nav as a single element for now okay so we have a header inside of let's see we'll have a flex but the flex will be four days so on top of it let's put an H - I don't want to use H one because that's not very good have 1h1 on the page although you can see the sizes are pretty similar but we're going to use h2 and maybe give it a bigger font size a cow welcome in queue I'd be coding to you too oh you thought front Elementor was my website yeah well I I've been talking with Matt whose website it is and will be well I decided to do this challenges and he was pretty happy about it so yeah it's not my website though he has been working a lot to make a day as possible okay so here we have an image a header and paragraph and all inside the Dave so Dave image ever let's see Heather or and paragraph all of these three types and look at that now we have those three types let's images we choose the image now on background pattern now okay snappy something happy yeah snappy process nappy like that then we have the h4 which is this let's put it there and we have the paragraph which is this nice that they gave us the power of the text so you don't have to write it that was just an annoying task to write the text okay but this is prices the h4 will be affordable prices and the paragraph will be this alright let's remove the spaces maybe add some spaces here so we can see that there are tree be similar Alfre call them tiles probably okay people first April first all right the audio is right can you hear me I had some issues when the audio was cutting off I hopefully fixed it so you are welcome hello core2duo you want to do another CJ raid that's right if its life but if he is while we're going to when we're finishing we should do another raid I say right my English is funny sometimes okay yeah okay glad that everything's good so that's it with that section we have the three images the headers which are a bit small but we're going to increase the font size overall and should be fine whoa a lot of subscribers not sure where people find me I got like 200 subscribers last day or so which is pretty nice we're getting close to 20k well actually 40k will 14k will be first but at the 20k we're going to do another special livestream okay let's do now this section section and inside we're going to have let's see actually we could put container on top and maybe a background purple color I was the color called bill violet is that how you pronounce it let's add class container and BG Violette all right and here we have another well interesting part the interesting thing you can see that we have a bit of padding here so we need to take care of that oh nice to hear that sir su Yong oppa pronounce that right all righty so let's keep that in mind we're going to make our flex which will have this header each two maybe right we have a button should be added there because we're going to keep the same approach we did before and use the Davis first as the direct children of the Flex button BTN and this will go here all right so that's it for that and now the footer and we're done okay so for the footer let's see yeah it has another color so we need to do a container inside conteiner now we have two rows we have this row and then we have these really four columns so flex and flex we're flexing okay hey Alvin thank you for learning Katz thank you for watching that's and it's good okay so the logo goes here image images logo Oh go and on the right oops come on what's happening on the right we're going to have these four images with little links let's see how we're going to do that [Music] maybe another ul Li times for a an image so a no link image will be images icon Facebook whoops whoops whoops I lost the that's bad okay let me do it again you can see that when I press tab with Emmet I get all of these spaces so when I am pressing tab again just jumps from one to the other images image Facebook Facebook you can see how fast it that is now if I keep track of that so second one is Twitter I think Twitter found images this is interest I guess and that images Instagram and Instagram all right that's pretty nice it did all of those Oh interesting so Oh I nailed it nice nice nice you can see we have the images and the logo there perfect now let's do these which are basically the same thing four times Dave bigger than UL bigger than Li times four oh and we have that header let's think so we need a header and four four three three okay Dave H 3 plus ul bigger than a light times 4 okay this should say our company they should say how we work ensure oh this should be likes oh wow could we add links okay let's add links like that so our company oh we work sure your plans babe you refuse all right this is the first one okay another age three plus you have bigger than allied times for bigger than eight and loop help me whoops at the dead and FAQ terms of his privacy it will be well I write them because it's faster I guess than to just copy them okay this is the second one let's assume old days leave h3 UL li x three bigger than a contact ELLs or live-chat all right and the last one leave h 3 UL oops times three contact ELLs not sales all right go back so others I messed up my cursor yeah was so good so far alright then let's do that and here press and finally licenses and with that we kind of have I guess we have the entire HTML let's say that let's see what we have on the page okay nice I found you from wicked camp nice I'm glad you did and you say how you are pulling text into dibs from but like this how I'm moving stuff I used the alt and arrow keys which just swept up all rows of text I guess okay goody-goody clearly everything is nicely style well nicely structured keep in mind please as much as possible keep your code clean so if you're coming to check your code after months two months three months or if someone else is coming to check your code [Music] sure that it's as clean as possible please otherwise it will be just a pain to look to your code you can see here we have three sections which are the same you can see that they have image h4 paragraph image 4 paragraph all inside the div I also added a space here so now you can see that there if well three different components sort of yeah as much as possible please keep your your code Colleen all right add the link to the style that CSS let's create it and we can start styling right okay yeah so I use live server to make sure that when I probably upload the code but when I save the files it will upload to the right 53 people whoa welcome everybody tell me where are you from I want to see where people were watching from dear curled in vs curl can help yeah that's that's right I use prettier right nice to see so many people let me know where are you from Australia Norway Turkey let's go Germany is the poly 20 India in the UK you ask nice to see so people from all over the world from Australia to US UK France around to London London Indonesia were have you thought about using the SAS or projects like this I don't see the use of SAS it just makes things well it's not that hard to set up but still and I don't see I don't see the need of it US India India India world a lot of people stopped from India us nice Pakistan Nigeria awesome awesome I really hope you like this livestream make sure you give it a like so YouTube will recommend it to other people if you find it useful that will help all right what was next for the CSS gaagh oh yeah so actually I was I should be in Miami we had a cruise ship from from 21st ill today but yeah with all the things going on we need to post we had to postpone it for next week sorry next year how often do you a live stream well I do it daily sometimes I do it twice a day so make sure you check my channel out often I just liked him a lot this is all I do every day so I think I have over 100 hours of light showing this day this left one and a half months what's the difference between a CSS HTML think of it like this HTML are the bones in a human body and CSS is the skin how the body looks the skin the hair the color of your eyes the all of your skin I guess the mono so yeah the shape of your body I guess that could count as CSS and the HTML is just the structure of the website so you can see here on the right we don't have any CSS this is how our website looks just just simple HTML yeah exactly J you're right fun is well funny not that funny we should in I guess let me think 13th April we had the flight home from New York which now is pretty it tough to see what's there yeah a band from Denmark yeah I'm glad you find it useful Oh Thank You Joshua yeah war record apparently hey I hoped it will be this is why I pushed so hard to finish the freaking camp curriculum in a month all right I'm going to continue with CSS and at the end we can have a small talk with you want you can ask questions and whatnot I really enjoy doing these live sim and get to know people and hopefully these are productive for you too I'm not sure hopefully they are okay let's now make this website look like this that will be an interesting challenge right yeah what you said unclear that that's an interesting analogy I'm not sure if I ever heard of it but interesting yet HTML and CSS objectives and JavaScript works whoa 57 April 58 well I don't think we ever had that many welcome everybody I'm I'm happy to see people Jane okay what was I doing yeah the CSS right first thing let's focus on the elements and on the styles which are general to the to the page like the colors the fonts and the structure like the container and the Flex right these are the styles which are found multiple times on the page oh let's do that what we have here five colors okay what if I have an idea what if this time we're going to use CSS variables I haven't used them in these challenges so let's let's use them let's use that on the road to be honest I'd root with two with one nut sir and here let's say dark violet will be this color and then we have grayish-blue which will be this color and now we can just reference these variables and that will be used across the website if we need okay so this is very dark very dark violet I'm not just that it's very tired and we also have very light why it's very like great fun any naming dark gray oops dark grayish violet like that and we have very light gray okay this one so now we have all the colors in our variables all right which is nice we can just reference them from there also let's import let's get the font from Google owns that Google you deserve more viewers thank you nice of you to say that you're growing buddy yeah hopefully well I put a lot of effort to be honest but I also enjoyed so it's a combination of effort and pleasure which is which is nice I like it whom we're gonna write today I'm not sure if someone is like but at the end of the lesson we can find if someone is live on YouTube and we can read okay let's get Carla let's get Carlos our lies a common third of name here in Romania okay and DMS DM serif play I want to use this form before oh I see so that's for the headings and then on the body we have the other font okay I guess that's it let's import it in the CSS and we're going to use it on the body let's remove the margin first you can see here we have a bit of a margin and now let's use the font-family which one was it the car was the default on the body and if we're saving now look at that nice nice nice our text looks eight years now and while we're here on the headings let's see what car type of headings we have h1 h2h for all of these have that class yeah okay yeah okay Oh H 1 H 2 and H 4 as this well this class doesn't have that but I think I used a ch3 okay so that's not good let's make this H 4 and this H 3 because you can see there are bigger so all the h3 is will become H fours and we have an H or here where was it now we have three H fours here okay this will be h3 nice nice nice we can do h1 h2 and h3 this could be fun family what was it I'm sorry display so I'm serif as a default all right nice nice nice now the font here changed Oh greetings from Morocco nice greetings from Romanian why coming with class name is tough and coding he had sometimes it yeah here learning your funds goody-goody if I'm going to say that more probably one day l should just do some stickers with this goody-goody people are keep making fun of me because saying of saying that man I'm kidding goody-goody all right so we have that part done now let's let's enter everything and let's add a container so the container will be with 1200 pixels max width of 100% so we can keep it on mobile it will shrink and let's do margin:0 auto all right this doesn't seem to work but now you can see if we have bigger screen it will nicely be centered here on the screen which is goody-goody a Edgars sir can't understand in which you switch the screen not sure what you mean how I did this this is a Mac function not sure I think on Windows you have something similar not sure so okay now on the flags we want when we have a flex element the first children which are a div we made sure that the well actually let's think we actually we have div around there's but we could make it work even if we don't have Dave so that we can just remove some deals on the page okay so this will be display flags all right now you can see that we have the columns which are pretty nice and what I want to do is this reflects all of direct children's should be flexible and now you can see they they will take up half of the space well not half depending on the of the number of elements they will take up the same amount of weight Thank You Mistral Chris thank you for the kind words I'm happy to hear that my work is useful who knows maybe or maybe because I'm just starting out not sure okay but you can see now that this image doesn't look right so let's fix that we're going to add it inside a live so now the image won't stretch all right goody-goody and something else I want to fix is that we added where is it so we added a div around these because I thought we're going to only do the divs and now we don't really need it so let's remove these natives because we also have the head Oh actually now what I did here this is okay like that right right right so this should have Dave's hockey it looks fine you know with only let's see how many one two lines of CSS well within plus days we have the structure already in place right which is pretty nice uhh not sure the question international what is that has graphical user interface not sure what Timmy hello Rodin all right and now can take the separate pieces we have the header the nav the header these sections and the footer and we can style them separately so we have the nav the header this section and the footer and let's add a bit of a comment here so that styling and this will be header styling this will be section styling and this will be with our styling all right and now we know everything is in place so enough okay let's see how we did the nav so our nav okay has a container of flex we have the image okay okay okay okay let's do something we put the image in the center and we push this to the right and for that to happen we're going to do a line item center and justify content space between and now this would be centered and this should be pushed the right let's see why not ah [Music] flex and ul all right why don't you want to work well actually that's because it takes up and I see so this is Lexx one and takes up all the space to the right that's why I don't want to go there okay okay okay we need a trick for this so probably now I don't like this if we put it in a Dave won't take up that space but the day will take up so it will be pretty much the same that means that for the UL here we shouldn't have flex one so let's see and we have nav ul flex Otto now what's the default or flex as I don't want it to be one mm-hm where are you where are you Nev flex duel I remove this let me search for flex CSS I want to see what's the default property here flex property and I want to set it up basically the image who take up all the space while the devil which has the image and the UL should just be whatever gone okay you fall valley 0 100 okay so now if we add this mm-hmm LLL not what they want why don't you oh oh this has bigger specificity all right all right all right mm-hmm I guess now if we change this to dev it will work and let's see does it break yeah well that's actually fine because here we also had the same problem now if it's not a div it won't take flex one and it will just go to the right as much as possible which is nice nice nice nice good so that's what we wanted just make ul to flex yeah we also need the UL to be flexed you're right that was coming so ul I'm not sure if we need some styling for the nav because we don't have a color but mmm actually on the container let's set some path all right so we can see a bit of a white space here on the left okay so the UL should be as you said display flags and then the Allies should have margin that's first this list style type none all right adding 0 and Arjun left 30 pixels all right okay something is still wrong oh I see so you can see now that the padding is added to the width of the element it's not within the width and that's because I haven't added my favorite line of code but Lamont the favourites box-sizing border box what this does it will keep the padding and the border will be calculated inside the width so now you can see that we have that nice padding on the right and then list items are nicely aligned there okay okay okay goody-goody let's let's dilate so never like a want them to be tech sticker a Texas form uppercase text-decoration:none all right we want them to have the color of what color we have here dark violet is that dark violet used everywhere if that's the case then we can add it to the body Bar our violet right but still on these we need to add that [Music] raise blue dark very light gray what color that I guess dark gray violet let's let's try right over dark beige violet okay but that seems to be it that button now that button is also a general class so let's style it here at BTN because that has the padding of I guess utter that's not yes ten pixels fifteen pixels it has a border of - pixel solid white text-align:center well it will be in center with the padding which is nice and it doesn't have a background color so background-color:transparent okay now yeah that's good we can't say it we should see no because we don't have a background color on the header here let me quickly add it background color will be what color [Music] mm-hmm yes dark violet okay that seems nice and the color here will be white okay seems right and on the button we also have a color of white now alright let's see okay what have you opened just right now please explain what is that not sure what you mean what I have I opened sorry a ila in the know what to okay that's good now yes you can see it doesn't show up because let's make that to be a beat en agosto BTN reverse I guess and we're going to use it here BTN DT reverse and that will have a background color yeah that dark ish are sort of dark violet of color debt oops and also bordercolor of that all right now you can see that we have it there we have those links we also have the header in so we did it in the meantime which is Bruce never be Tien is now white yeah it is but we change it so show that good also you can see that the button has list text transform uppercase so let's do that tensor or uppercase that okay and we also styled this button which is not displayed here yet we always use a bar for your CSS yes well I don't really use it that much but when I have multiple colors or sub like that yes I don't use set Carlos Thank You al and glad that you like it okey-dokey let's style this which now doesn't look very very good the header is much much bigger hey and kit welcome I'm so used to it always coming at the middle of the x3 but official coming which is nice on size for EMS the aunt looks a bit bit off does it have a bit of letter spacing before hmm interesting maybe the font from Google is not that's good you okay the paragraphs as usual the paragraph have a bit of opacity is it half this half let's see okay yeah orders have oops mmm hmm I'm thinking what's next need to add these shapes oh we need to add padding here okay let's start with the padding 50 pixels alright the text still doesn't look right the header there 8.5 let's see on the big screen all right on the big screen is a bit better now it looks bigger on on the design and the line-height just one yeah okay so something like that mmm-hmm the button is way bigger okay okay fifteen with 25 all right and have some letter-spacing sir and they don't tell us this which is a bit of a bummer but it guess we can just tell until we find the middle ground I won't stress too much to make a pixel perfect and we add the break on the Harmonized yeah I could I don't really like to use brakes that much because it probably will ruin the with the design of mobile oh I won't add it for now okay let's add those these shapes burger intro left intro right right right right left left for that we don't need this okay on the header on the header' we're going to have an after saved element on the oops on the head that we're going to have a before settlement now this will have a content or nothing you have a background image of that URL let's images this will be the right mm-hmm and let's see we save it it doesn't appear but if we do position:absolute datian absolute if we do top 0 right 0 and we also need to edit the width and height let's make it 100 cent and 100 percent of the container and now yes it appeared uhh [Music] - let me think so it's not positioned correctly yet because we needed to make a position:relative based on this header okay then the background repeat' should be no repeat so we only have one and the background position background position should be top right upright or I can now it's there okay look at that and it will remain there no matter what we do here which is moist giddy giddy do the same thing with this one the bottom we can pretty much copy this we can use the left one and it will be bottom left and we'll have it there but you can see that it's a bit more down so left well bottom let's make it minus 50% that's a bit too much or you could leave it zero and make as forum and slate on the y-axis 50% like that is the same resting I thought that this will take the its height oh okay anyway is the same because the height of this element is the same as the height of this one usually translate white takes in consideration the height or the width of the current element while bottom and left taking consideration the height and width of the parent element okay so I guess we can just put - 40 percent play around with the numbers until we have some um what we like okay that looks pretty decent yeah I like it now let's fix this image somehow okay we have a couple of things to do you can see that this is now centered because of our flex a line-item Center but here it's on top hey Yvonne welcome back I needed you and you left me I'm upset how is Peru okay let me check so Xbox yeah I use flexbox or say and you explained positioning let me do a tutorial about positioning I guess that will be the best way to explain it think of it like this position:absolute you can position the element wherever you were you when wherever yeah yeah I guess that's the work wherever you want inside the parent element if the parent element has a position different than static if the parent doesn't have a position different than static then it will just go up in the tree finding the first parent which has a position different than static which is the default if it doesn't find it we'll go to the body that's why we needed to add position relative to the parent if we didn't add that they will go up there so based on that on the body hopefully that makes sense hey David yeah why we're not done yet there are a couple things left to do which is one on the h1 one on the h1 I want before have that that line there is line a week of I don't know 100 pixels I talk to pixels and background-color:white now again we need to position it position absolute absolute of zero left zero and now you can see the line there because this parent now is a positional relative so if we want it to be relative to the h1 we need to add zishe relative to the h1 and now look at that it's there now what I want on the h1 also is to remove the margin where are you where are blue are you bunch of money here margin:0 all right and I want padding-top well I guess yeah adding top to be like 50 pixels okay and now that line here's their it's a bit longer and maybe only one pixel like this yeah that looks right okay okay okay let me do something else have the Flex I'm going to create a class a line top what was it a line start and this will be line items flex start and we're going to add this class here now on the header a line start and excellent start for the line night Osric Stark should help push it up I missed something you okay flex oh okay okay know why this overrides it need to put it afterwards keoki look at that now it's up there and the last part will be you take this image let's give it a class let's give it a class of Avadh and we're going to style even don't ask why I did to that class is this desktop first yes so now this image should have a margin bottom - 100 pixels yeah more 200 pixels okay we're close yeah that looks pretty decent 250 and what we want on the header now is to push it down you're styled already Oh margin button all right so we remove some margin here well we kind of how can you say that we pulled the bottom of the image up and then we pushed them back with the margin bottom on the header even visibility none I guess now I want to change the bond from Peru okay and now our event from Peru is is this okay look at that how nice the header is now okay do you use word important nope I don't like to use important that you should avoid it at all cost just if you're working in a big big big project and you have no idea why that something happens you is important but please avoid it as much as possible you can just inspect the element go on top of that element click on this image click on even and see why it's acting like this as it stubborn probably but yeah you can see all the properties here and if you have multiple properties you can see which one overrides which one okey-dokey goody-goody whatever you want I guess now looks pretty decent so we can use 50% here just to push this down a bit alright all right all right all right that looks great I guess we had almost 60 but you weren't here thank you buddy my buddy even from Peru okay water break time let's go to this section and see how it should look yeah as usual mmm I guess what we can do because the h2 looks like should look like h1 I guess just do this and the h2 should have the before a background-color be what color does it have dark violet and let's push it here because it's h2 a background color before before oh okay also need this all right and now we have that oh look at this it's also became big and it has that hmm okay okey okey I have another idea let's create a class of as line up and on this class we're going to do the before like that [Music] this can remain if we have a H to the background color will be different well I guess we could just say has up line has line top purple or violet nah too much blind violet like that and now let's use these classes instead so not h1 where is it yeah class will be has lined up or light as line Tapia I'm not in JavaScript attending went up okay a line top now it will show they're awesome and here class line top and line purple blind viola okay okay okay I don't know the colors don't tell right a class of kin works Thank You black ghost I'm glad you like it all right your ID all righty I guess h2 when you move the margin on it I and now you don't have margin here oh well [Music] you okay I'm going to fix it a bit later let's give h3 oops a font size of 0.5 m/s now too much okay that looks fine and paragraph I didn't add it so the paragraph should have a CT 0.8 all right that's goody goody goody almost perfect what I don't like is this box this should have margin-bottom or yeah this is where I like tell when you could just have margin top three and voila you had margin let's think what will be the best way to add some margin here yeah just just think of our gym buttom do no you don't like it it's not dry you Thank You Alves thank you sir nice you're learning it I don't know how to add that I guess the best way will be although okay that's the dais and put a class of IELTS I guess style and here [Music] IEL will be margin-top 30 pixels more 50 pixels something like that they even more all right we have the text and here we have look at that almost 100 excellence well it's arena all right let's do this part so that's section but it has a color section BG violet I guess eg violet we have background-color our Ark pilot yeah that's it yeah good good good so dark violet and we also have a shape there you can see and we have some padding so the color inside it it's white yeah hmm actually VG violet fh2 here adding zero you need to remove your padding and color white like that okay find out more about how we work yet and what I'm going to do is I'm going to remove this Dave so that will be pushed to the right and I guess something tricky here wait seventy-five percent okay something like that and now here we can even add more padding or the pixels well or let's see seventy what all right I guess okay yeah oh that's that let's add that pattern here so the same as we did on the head there going to do on this BG violet but we have another image let's see how that cut that's called yes OBG better than Howie something are we not we work that stuff okay so that's that and we want it to be top right like that okay and we want this to be position:relative now okay interesting so there's that but it's not stretched [Music] apparently damage is not that big so what we how can we face this is to have a grande size to be cover now too much okay then wait 50% it doesn't look right something's wrong but it has this part Oh up right you I guess egrant size but not cover 100% No 50% on the x-axis and 1/2 percent the y-axis all right oh that's close maybe even less on the y-axis it's the strength there I guess this should work don't want to add a lot of lot of custom F we can even do right oops right like - if two pixels and I told oh okay we can't it will go out I guess this is fine thank you very much for the donation ition thank you so so so much hello age thank you for and give her dad his son check one two three one two three one that's for me thank you buddy he son is a follower for a while now I know him from Twitter all right you explain human positioning in header without setting header height reduced font size with Oh on this header yeah probably let's the font size 1.5 amps that's too much what we have here so or two we have four okay okay then let's make be yeah and we can make it be 50% now all right so that works right positioning I will make a tutorial about positioning I won't stay now more to explain it okay let's add some margin to this now that we added so much custom stuff to this section margin sixty pixels zero six pasado or okay 100 all right that looks fine giddy giddy encouraged a mission for the donation I have highly appreciated and I'm very glad to see people support my work yeah I don't know what else to say okay let's do the footer now I see I got another donation on paper Thank You Lucas paul-jean Sanka I pronounced it right Lucas thank you very much alright let's the style the footer and then we can focus on the responsive part put their Agron color and very light great yes this is it all right that's it okay let's tell you else in the footer adding zero we want playstyle type none oops a style type mom footer Li and footer Li a this would be text decoration or a Texas from uppercase execration none and the color will be the same our dark violet like that eery goody probably let's see font-weight 700 [Music] all right now here we should have some margin bottom I guess anteye pixels our net too much and pixels all right and the footer h4 this is also X transform uppercase okay goody goody goody goody and the color is different so what's the color let's see what colors we have here race blue Greece Vegas nope it's just some kind of gray peridot violet they're light gray dark gray violet all right that's it and now the footer flags should have a line that the line a line start we added not this one sorry this one all right yeah look you can see now that all are aligned and we kind of did it see when you have the classes already in place everything is pretty nice Lucas thank you you're in the live chat thank you very much for the donation I highly appreciate it supporting my work it's it's really nice for you thank you very much ok let's add on this Bob this bottom and fix this positioning and we're done oh and we need to add this all right so three things left or desktop what they was doing yeah these flags will be let's call it oh not this one sorry this one this could be class flex let's see what's happened look at that pretty nice it's a position already and here let's at border bottom can come up with a better name so let's did here for the bottom board her bottom I guess the color is this color thank you very much is shunned with the second donation whoa that's amazing just checking if that payment method works got my first salary few days ago it always feels good to spend money and good things thank you very much I'm so happy for your first salary very very nice of you thank you buddy be blessed thank you for supporting my work it makes me very happy to see that people find [Music] people can learn something from me and appreciate my work this very dark rage a one pixel sorry one pixel solid and this all right there we go I guess let's head on the foot or some padding 30 pixels zero alright let's push this down a bit Oh our Jean bottom 30 pixels okay doesn't look like that color dark grayish looks like let's see what other gray color grayish blue all right I guess that and let's fix this and we're done so what custom stuff we have here ul flex ul flags they should be actually now I need another thing too because we have you out here we also have ul here so we need to have a way to distinguish between the two this class is interesting but oh well yes we could use it you need to do something like Twitter you have flex Li margin-left anti pixels something like this is which is not very clean I don't like that but we don't really have another way we could just add another class but the the selector will be pretty much the same so yeah all right and with that oh one more thing I forgot this shape on the footer so we can copy what we have here because we already created it so we don't let create it from scratch change this to footer and this too let's see a turn footer desktop Hey look at that where it went beakers we need to make this an on position static anything else then positions that take her okay look at that there is there we go let's make this whoops up instead of bottom and make this zero and now whoops I broke something and now there we go let's see our website on desktop and how it looks as it look the same as we had in the designer well we want don't want it to be exactly pixel perfect but at least similar so we have the nav we have the heading here maybe this needs a bit of spacing we have this section this call to action and the footer now one thing what's happening is that these shapes are on top of everything you can see here we can select the text because the shape Jesco 100% and covers it okay so in order to fix this [Music] Eventide it's not that clean but still can click this button here which is not OK so the shape hmm we could have added it as a background image yeah here let's see here is on top she's okay [Music] you what will be the best I guess this could be incorporated this man this can't be I guess the best thing will be to have a fixed width and height on them now yeah that's what I want to do set index Oh yeah this one or now it takes full weight and it's still going to be on top and it needs to be on top but only here on top you know so yeah let me try something you okie-dokie yeah so for the footer we're going to do is here it's part of the element so we don't need this craziness which is good top left patting okay so that's good here now also on this one we could do just the same thing we don't need this and now it's part of the image there up right I guess background sighs we need a background size 50% 100% all right so now we can click the button and we can select this text which is good okay but here we can do that these elements needs to be at least this one should be on top but it shouldn't be let's see after this table right let's make it just with 50% alright so now we can select this text and yeah we can't click the button yet it curse whoops it's on top there if we put that in X minus 1 it will go away but what we can do is a trick set index 0 here and we can do something like other all of the children's will have that index one yeah basically we put this on zero and everything inside the header is one but now this is on err so let's make this z-index to it's a pretty tricky but yeah I don't see another good way to do it on the button where we have the pattern we want cursor:pointer we can see they're quick about okay this one this one and this one all right okay so I guess that will do it which is pretty neat the website it has nice design and this is why I like front-end mentally they have some nice designs all right now with the fun part let's make it responsive let's see how it looks on mobile okay whoa [Laughter] we're going to need another 30 minutes one hour to fix this Ababa okay and let's also get the designer mobile so we can see but we need to do whoops tonight all right so first thing first why do they have different elements just why oh yeah I built some applications with react native very simple application but that was a while ago okay let's start with the footer because it looks like the easiest to fix yeah it's a it's a struggle sometimes but the good thing is now because we use the flex we can just do media screen' max-width 7 6 8 and we can do flex this flex direction column and with just with this uh oops and just with this you can see that we already have a much much much better than just with one will do it one line well actually five lines but you know what I mean all right that's one thing now let's Center everything X twice on the body right yet let's make the buttons be display:inline-block so we don't get that cutoff there right [Music] Kings look just so funny now oh boy oh boy oh boy oh boy let's start with the footer as I said ah [Music] footer we have another image so background-image:url images background footer mobile okay oh that's one thing now we did top left let's make it position cover now background position a ground position area over all right mmm interesting yes because we have this what I did not background position background size oh okay let's try this 100% on the weight and auto and the background position should be top no center top center kay still doesn't look like oh well pretty close it's fine next this UL should be direction Moreau should cap keeper oh oh I guess if we use this we can use it again ul flags should be it's not very very dry very clean and don't like not having idea how to make it cleaner so let's make it likes direction oops bro like that I'm out there there okay the first Arjun left not first child okay so now they're centered yes I will use media queries to make them very responsive and JavaScript to make the menu appear yeah that's what we're going to need to do okay so that's one thing done 1,000 more left let's see how we can Center these if okay so these dibs these Dave's now need to be 100% width we'll go in the center Oh put there Dave 100% with their flex Dave like that all right oh that does it the color seems another color dark gray light what we use called the color here left I went yeah it seemed what Carly is on sighs now oh well okay it still don't like the pattern there now repeat top left no-repeat hub center auto Oh all right they get mmm don't like that you yeah it seems that it has more padding said that I guess you alright good enough or nah I won't spend more time on it it's fine let's fix this now so we did that eg violet is next not sure why started from the bottom but okay BG violet h2 this has a weight in it that which 100% like that and I guess it could be emerging but 20 pixels all right yeah looks like that and we can change the image how we work this should be background-image how we work mobile all right yeah well that was cymbal has some padding here so don't have a container okay I'll leave it like this don't have a container and that will make it now harder to add the margin because if we add a margin now there are 20 pixels won't be centered yeah all right let's see this part at least this part should be fine yeah at least one we just need to fix that line to go in the center we're we're doing the line there line line light oh the line before it has top left let's do it here the line instead of left:0 we'll have left 50% and we want transform and slate x minus 50% now it's in the center a that's good this image should go on top so on the header these flags should have what class order reverse reverse the mobile first Oba and now on mobile we can add that class which will say a flex direction column reverse there's mobile okay I turn to one to the culture vexy action cone rivers burst mode by okay let's inspect to see you okay so it's overwritten here all right put this up and now should fine the image is on top yet we need to fix the image now so Yvonne should be max with 100% and on mobile we don't want this margin negative button zero all right perfect perfect perfect let's see don't have a line now what Bailey so many different things on mobile but yes something else is bothering me the text looks like it has a nice line height not that crowded so let me fix that line-height 1.5 it and too much 1.7 all right now it's still a little spaced out well I guess I could hide that line instead of just now that's another trick but still at the button zero minus ten pixels and we'll hide the line there but you can see now that the image is taking full weight we need to fix that by saying margin left - 20 pixels or what was the padding on the container Antti pixels okay so we want to remove the padding by spreading the image more margin left margin right yeah Lane Lane block hmm something doesn't want to do I guess then let's keep margin left and we can do wait 100 100 percent plus 40 pixels it doesn't want to be interesting Oh forty pixels no that's expectancy how we can get rid of that max wait okay all right so max wait okay that's done basically we're removing well moving it left with margin left - and then we're increasing the weight to be those two headings on the left on the right let's see some questions got to know your name from an email o wretched man finishing precut kind of six hours was dope yeah I didn't finish in six hours I had more I needed 72 hours okay and let's move the padding top on the header and now we should be fine with that where should we do it here either adding top zero uh eh we still have something there container all right all right heading tubs 0 and margin-top minus 20 pixels I guess then on the container less than 20 pixels like that - just to zero 20 pixels all right that's done now is Margie we need to remove which we added on the header I think where were you were here margin-bottom actually just fifty pixels all right and we need to get rid of these shapes which are now here oh boy you know what I will just take these and just remove them on mobile I don't like them so yes and header after will be display:none and that's it I don't want to spend more time just to add those that doesn't seem to were lit to be worth it okay padding-top a adding button we have all right let's add the [Music] is button Angus the nav should have a bit of a padding up bottom where are you Nev here Nev adding 20 pixels I can get now we'll never yell flex okay what we want really is to have a button let's at a button which will have do we have an image with that I can close okay so we probably have internal Twitter static a hamburger there you go yet so we have that uhh now these flags should be we added a class vial reverse but yeah that's column a lot of coding yeah two hours uh let's add this mobile NAB now why don't ya let's sit here on the net we're going to use the Flex let's speed up things tired and getting tired okay and I'd say that's normal encoding a while now Netflix I want it to be this flex direction bro if taro okay Navi well I want it to be display:none perfect okay now the image yeah the image here should be on the left okay we added the excellent center that's why they make centered let's see how to fix that I guess we could add here a class of image rapper just big things up image rapper extra line right text-align:left sorry oops okay so that's that now this button should have a class of em burger and we're going to need to hide it on desktop where are you here Neff hamburger explain um all right and on we want it to be display flex or whatever background color none transparent we want border:0 all right look at that let's make it cursor:pointer and now it can be clicked she's great and when we click it we want to toggle a class on ul which will toggle the nav or the UL so let's the debt Crypt yes and we need to add it crypt or rape Jess what's how you steal life [Laughter] I'm tired I'm getting tired but I need to do this navigation and we're done so when we're clicking the hamburger like that you I'm Stan burger document.getelementbyid e hamburger I'm hand blue there okay when we're collecting it addeventlistener click you want to do what on that menu this one let's add a clap an idea of menu agus we want to toggle a class on it menu manual class place toggle show and they need to keep track of when it's a mobile okay you have to think about part 1 and 2 or these kind of bigger sites yeah you're right I am explaining takes more time than just coding alright so now we should have that show toggle on on the UL and here where you are nav ul show should be display flags but should be different yeah let's see want to make it position:absolute position picks actually the show fixed height will be 100 report Heights almost will change it and weight will be 100 viewport width like that kay where you go up 2-0 left zero all right we want to have a background color of our dark violet cake good display flex flex direction column hmm wait tight not on top okay okay so it is but is not hmm let's see how that looks I want to see the image okay see it has another color I guess darkish grayish playlet yeah what's the color here let me look here very dark violet okay okay okay very dark where are you very dark come on come on come on come on here very dark violet ah Kay width and height so the nerve is 100% and something's off nav ul Li want them to be black a should be all right like that now have you have a lie we want Margene to be 30 pixels or you know what now dot one margin we want the a line item center is the content center somehow okay yes there in center I guess that index it needs all right look at that that's what we want top:0 left:0 okay I guess it has some margin yeah to get a good but actually is not like that we want to push it a bit down and these should have just a bit of margin so at this like that and we want ful Ally to be marching 30 pixels zero okay where is our button white step oh we need to make that white I'm on so many changes on file but the reverse this is why a designer should should have a bit of a knowledge of what the developer needs to implement when they want to change your style now are you sleepy oh no I'm not sleepy and tired I slept a lot of hours today it's not about sleepiness just tiredness so bordercolor is white and the color is white now it appears okay good the margin is too much and what I want is the height to be another group or tights - eighty pixels from top eighty pixels oh and this eighty pixels should be the height of the nav okay what if we scroll we have that uh well I guess oh you know what I know what please Division just making a never responds it yes I have one check my channel when you're going to use tailwind morrow let's use tomorrow tailwind if you're joining tomorrow's livestream at 5:00 let me know and I'll use tailwind okay so basically this should be part of the UL now yeah I guess hey you know what now we won't do that let's make this 7t pixels like that and the button would also be chained let's see the script of the hamburger it has an image I guess class laced toggle and here when we have the hamburger now you know oh I know anyway so we have two images Icahn closed all right so we have two images and when the hamburger here on the mobile [Music] we want the clothes oh I guess we need some classes open close I'm sorry this is the best approach but well the clothes should be explained um and when the nav hamburger is showed and the open should be in display:none and the clothes should be displayed whatever display:block okay yeah okay get so that's it I want to do something else Lane and I want some padding padding up typicals yeah it don't like that [Music] if we scroll we have that oh and have a pattern I won't add it and you yeah I'm thinking of something instead of doing a show we can editor the nav and then style the killed recording Li and we could have the nav oh well you know I have a great idea let's make the nav position fixed position:fixed up zero left zero wait 100 Roberta wait and now the nav is always on top that index 0 of 100 and background-color:white all right now the nerve is always on top if we click this disappears and it won't scroll our sure just found the video okay glad you did you could do thank you for staying so much I hope you'll like this oh yeah basically now the nav it's position:fixed yeah apparently we did something to break it on on desktop so let's fix that and what we want on the header to have margin top 80 pics also and of the height of the nav now what happened to nab actually let's see why it's broken you oh container flags okay wrapper and burger and you out loud the button there Bassel okay you let's as a base pattern you [Music] you my mind is like blank can't think anymore uh it should be pushed down a bit and we don't need that padding well okay I know so we added a padding on the on the nav right that fixes it fixed it but now we need this nav display factor okay I see display flex alignment on Center okay that's that fixes it very good and now if you go to more mobile we have this but I guess we can end up adding a mobile adding top 20 pixels yeah all right and now it's now let's add padding good all across okay good and we can see this uhh on the hamburger let me add something why are you hamburger wherever you I'll play and zero I'll find none okay it's not the best at outline:none but it's fine right oh yeah this is our website I see something here doesn't look entered let's see okay that looks right maybe just my mind by my ice trick wiki all right so here is our website now they also say to address active State but yeah basically on the button there we want the background okay so the background should be dead the links there and this links and those links oh boy now you know what nah that's enough I wanted the active States it's fine if you want you can add active State I'm tired the let's upload a so Nestle pie and we should be done I think this was the longest and the hardness so far website we did okay let me close this close this open our folder uh es code this is the folder I have on the project but this here ensure landing page kay get-get-get now here on the script we need to add as usual the project so it will appear on the page ensure landing page and the video this ID could go here all right this is 7/8 9 is 10 not sure how they work with index 2 3 4 5 6 7 8 9 not sure okay so if we save now this let's upload it tab it add it calm it ensure added insure landing page and we push hub frontin mental challenges well 111 starts nice I didn't know that okay see this life thirty seconds ago so we added and look at that we have the link the website actually here alright let's upload it on both front and mentor and seven days have a website's challenge and we did we are done for today which was a pretty long stream let me know if you're still alive oh I had haven't added this cider okay so let me add both of them I guess so this one is hello how do we call it yellow landing page and it'll link Oh so this link goes here repository is this and this is ensure landing page let's submit it this is the one we did today all right it's pretty different but I guess it's fine it's not pixel perfect but the idea is pretty close okay and [Music] let's submit this filo landing page which is this - link all right I'm still alive okay me too still alive alright good happy to see the sea people still watching also this one is pretty different all right I guess get and let's take the project will be able today and put it on seven days seven websites okay yeah the video will be uploaded on my my youtube channel so you can watch it whenever you want but the fourth day this is unsure landing page all right and now we should appear on the day for [Music] yeah it's there and [Music] let me show you how I am adding the youtube link this is something special so only you who stayed up late will see what I need to do I need to go into the database yeah it was I mean I guess if I would do it without live-streaming would have worked faster but talking is also tiring so okay this is the landing page this is a database unsure I want to find the project by the project name and here I'm editing it and I'm adding a YouTube field which will be the link we added here okay I update it and now if we go here you see it's the last one on day four if we refresh go on day four you'll see that it will be the first one why because when I created this page I said that if you have a youtube link you should be first and that's because I want two people to see the YouTube video and click on it oh yeah and act my own project all right oh boy I hope you liked this live stream if you did please give it a like tell YouTube that it was good and yeah let me know if you have questions two hours and 30 minutes oh boy I think for a website like this I would have charged a couple of hundred dollars yeah okay thank you for joining Thank You Ishaan for the donations Thank You Lucas for the donation it means a lot in the future livestream I'm going to somehow incorporated the nation's on the page so you can see who donated that would be nice don't forget tomorrow we're going to have a livestream with we're going to build the next project let's see front end mentor challenges let's see how what's the next one we built a nine website so far okay look at that so a pretty simple pricing component this will be fun all right and after this livestream I'm going to do a chilla livestream pop a question where you can come and ask whatever question you want we're going to hang out we're going to chat and we're going to have fun thank you son Damini hope I pronounced your name right and Michael oh you're a big fan thank you I'm your friend too alright we're friends we're not fans and I don't know rock stars we're just friends we hang out and we code we enjoy it all right have a nice evening at least here is evening or a nice day nice morning you know what whatever time zone is new you are in and I really hope you like this there's live streams and you find it them useful okay take care and I see you tomorrow make sure you follow on Twitter or join the discord where you can find out the hour I'm going to life all righty have a great day forward and take care be safe hey home bye

Channel: Florin Pop

Views: 7,273

Keywords: florin pop, live coding, live, coding, programming, design, design to code, html, css, frontend mentor, design to html/css, tutorial, programming tutorial, github, netlify, website, landing page, insure landing page, static website

Id: 9HVKR_hK0nY

Length: 147min 7sec (8827 seconds)

Published: Sat Mar 28 2020