Base Apparel Coming Soon Page - Design to HTML/CSS

sorry if I blow your ear off hey it was some error wait with my OBS for some reason I don't know I did nothing to change it oh well okay hello again well hello now I don't know we should start over and get we shouldn't hello cow max Tim oh joy Republic of China Joshua kite nets joy I think I said it hahaha welcome everybody twenty-five people nice how is everyone hello MJ if he alright so something happen with the sound I'm not sure what sorry about that okay today we're going to build the second project on front-end mentor which is this platform where you can build all isn't well they give you all these nice designs and you can also the assets and you can convert them to websites I'm glad that you're home Kyle okay two two two two two I want to see what front inventory's okay let me put this link into the chat so tell me again is the sound good I drop it like 20 decibels I don't know not sure what happened all right something's something happened for some reason and then no one okie-dokie joy I don't know exactly an app for Windows to measure but use your eyes I know you don't have ears anymore but use the eyes the damage has been done okay sorry about that it wasn't my fault I was just welcoming you to the live stream so I had good intentions I didn't want to blow your ears off alright okay I think we can slowly start I know we are going to build this simple coming soon page with HTML CSS they also label JavaScript but not sure why oh okay okay so we are also going to have some JavaScript for in the input field which is nice broken ears is a good reason to get more into accessibility okay yes Stephen is right you can have some browser extensions for measuring them Jade you need to recreate the designer localhost or any type of online ID yeah you can do it anywhere you want hey blood welcome all right let's see the brief here your challenge is to build out this coming soon page and get it look as the close to design as possible you can use any tool okay a user should be able to view it optimally see hover States oh nice hover States we receive an error message when the form is submitted if the input field is empty the email address is not formatted correctly okay so a little bit of JavaScript for form validation maybe we shouldn't have JavaScript just do it with html5 validation that could be an idea okay don't know the started back all right a lot of people in the chat hard for me to keep up I want you to you to please start your mega institution in Pakistan that's funny but well I'm I think I'm flattered perform validation you've got this loaded no I don't know I I need to check that video you sent I don't know who that guy was but he seem to know what he's talking about all right people poppers welcome poppers let's download this and unzip it delete this because we're organized and then do some magic you need to do like this in order to make it work and then drop it in vs code so that's required greetings I'm amazed how quickly your channel is growing I quickly or Twitter this is growing the Twitter audience is really growing fast and I'm not doing that much lately as I used to well it's still very active and the YouTube channel also grew nicely I want to get to 100k that that's the goal so I will be doing live streams and tutorials and challenges until we hit 100k that's my goal all right hard-working it okay who's been in yesterday's livestream where we built the first project if you been then you know what we're doing if you weren't we built this nice sea well nice simple project not a lot of things going on but we learned a couple of things which was nice I'm sure you will get to 100,000 soon I want to get there by the end of the year so fingers crossed oh the high is asking I need your suggestions I'm a Python developer but want to start YouTube and I'd also done for our life saying what do you suggest life see more videos boat is front admin that free no you have to pay me a thousand dollars then you can use it for free I'm kidding it's free it's totally free they have one challenge which is paid and they'll probably have some more challenges which will be paid but all of the rest are free which is pretty nice if you ask me what is your income now freelance project remote work you to blow yeah my income is I think I made a couple of millions last month I don't know I forgot it was so many millions I forgot the stream with roughly the same time each day or I should check Twitter I want to I have this guy on my discord not sure what's his name is and his keep bugging me to to make it to the same hour and should tell people when I'm live I don't really like what he's saying but you know he might be right and I should and they should do planning but usually I'm alive at this hour it's 6:00 p.m. here and I'm live at five six seven eight pm close to 5:00 and 6:00 p.m. I wanted to do in the morning too because that's when I'm well after I wake up but not a lot of people who are live so I guess this time works better okay you didn't mean to know the numbers I get something from YouTube from ads and from my blog format that's it and patreon yeah Seamus what a shameless plug if you want to become a supporter and add to my millions of dollar I will be very grateful but yeah that's kinda it I don't do it for the money if I would then I would have kept my job which was paying the bills but now jokes aside I really like what I'm doing I don't make a lot of money I mean not sure if someone could leave off with the money I make now but I really enjoy it and hopefully in the future when I'll get famous if that that perhaps ever happens it will be better man it is not nice test about money money source it's fine i had nothing to hide what were you doing in your last job react and CSS well I started doing react well they hired me to do react but we were on a big big project and no one liked CSS so guess who did it this guy you're famous already yeah famous and poor okay great let's also code something because I guess that's why you're here not to hear me ramble around but if you like this type of rambling around sure we can do that too alright so we get this folder which has the basic the started things we need like the design oh look at that nice I like this so we have the desktop preview then we have the active state which look at that has a nice icon and we get an email there or text there which is knit and the mobile design hello ed Garth you should do a quick Q&A livestream okay I will okay damn J no not passive income' just a bit from well I get that from ads on my YouTube but that not passive I've been doing 72 hours of live stream in the last month maybe more so that's not passive that's more like active active income which is paid not that much alright let's see where were we images we also get the images favicon hero mobile SVG's so basically what we get from them is all our old assets we need some images we also have in a style guide the colors the fonts so everything we need in order to create this let me reveal in finder and tu-tu-tu-tu-tu open and put it here so we can see what we need to do all right close this this is the code and I'm also going to use live shirt but live share live server so we can see what's what's going on ok so there's some waiting for PS code all right it crashed perfect that's what we wanted we want tricky JavaScript interview questions do you use the MacBook Pro I think desktop ok sorry cats yeah do you use a mac book or a Desktop for Mac I use a Mac I need to change it it's getting older so you know that would be nice what we want ricky gervais little questions sure we are doing JavaScript interview questions on code words that Jas series so check those out and I'm going to do more probably not today let's do tomorrow or coding worse Jas series or a livestream whatever okay a lot of talking not a lot of coding so here we also have in the body the text which is nice we just need to style it so what I want to do first also I say so so many times so hopefully you'll get used to that really Steven that's good yeah the number of people watching increased a lot 13 people really I think that's because I announced it eight hours beforehand I am happy to see a lot of people here good let's see what we want to do this is our website right it has an image on the right which is not quite half of the weight we need to keep that in mind and on the Left we have the content of the website now here we have the logo and this section which seems kind of Center to me but well actually not really let's see so we have that and if we put this here move it yeah so we have more space up okay I know that someone will ask so I will answer beforehand I'm using the max built-in image preview er to draw these shapes just to measure stuff all right hi welcome to the live stream what they're using to drag that yeah I knew people will ask would ask so yeah good we have the logo here we have an h1 a paragraph and then a four with an input and a button not not a lot of components or tags which is nice now we need to take in consideration that we also have this text here underneath the input and well I just received a $1 donation paper thank you so nice of you thank you very much for supporting my work I guess you're in the live stream near thank you for support say B Mississippi say B the fellow Romanian say hi to you all right good let's start as usual with the HTML markup let's get into this open this with live server all right we have this I will put it to the right and code to the left okie dokie we have a footer I don't like it so bye-bye footer style okay we don't need that all right so the rest could remain now we have this text which is the title so let's wrap that in an h1 okay let me zoom this in so you can see better all right get that's now an h1 the nice thing with life server for those who don't know is that when you save it will all refreshes the page here which is neat where is the like button yeah click that white butters match the like button I don't know okay h1 good we need a paragraph here for this text so let's wrap that in a paragraph 2 2 2 2 2 okay good and this is an input well a 4 with an input and a button so let's do that a 4 with an input and a button alright the form has no action the input is type text fine and we have a button now I'll show you later the button has what an arrow so that icon I guess and input has a placeholder email address so let's say that placeholder email address ok look at that we have our input and the button and the form good we're almost done it looks almost identical okay what plug-in do use to select elements in the site itself a nutsert question please enable autosave an option okay hi everyone everyone from Columbia hello Carlos good good good what else we have now this website is split in two sections the right and the left section and this left section is an image and we also need to add that SVG here the loge or whatever this is and icon here and the text which will be on the error so let's add this first the icon you know what let's wrap everything inside the container we put everything there because this container will have a right side and a left side I'm adding the classes now but well probably not going to use them but just so you can see clearly okay this is the left side and this is the right well this is the left and this is the right yeah now the right side will have an image just that maybe we can add a class of background image I guess okay so that's that with splitting now let's add the icon here which will be an image logo image those images and logo all right out of logo for accessibility and it should appear there awesome now her - - - - hello fellow shoppers okay that's that of food header here well the heading has this part which is different and we're going to wrap this in a span just so we can start in the CSS all right and in the form here we're going to add a small tag which will say what where is the active States yeah please provide a valid email all right valid email should be good please provide a valid email all right which should appear there perfect let's see the chat please name the div left and right okay input should be a type of email that's good right right right - because it's an email perfect thank you Thank You Steven what's your age I'm 125 years old without 100 I'm not talented I'm just lucky I'm kidding I worked hard so yeah that's that does it alright we have the icon arrow which should go inside the button so image images I can't error and an alt of error like that let's nicely format always format your code so it it's readable for other developers whoops not error error error not error okay I must know one of the result I said o suta which is Romania from 100 all right you are 15 well nice I like to see young people learning programming good good good so we have pretty much everything we need in the HTML there is one more thing missing if anyone can tell me this is arrow if anyone can tell me what's missing from the HTML well actually it will be pretty hard because you can do it in the java swing the CSS still on the before not after absurd element but there is something missing and it's not in this design it's actually in this design which we should add to today HTML can someone spot what that is meanwhile I'm going to drink some water to stay hydrated the error message we have it it's here but you're close you're pretty close it's related to that something we don't have the error icon perfect clap clap good good now we could how can i zoom out like always zooming is there a way cocky like we could add this error icon on in CSS but more work so I'm going to add it in HTML and then position it on top of the input good look at that how many people know clap clap Thank You Steven don't worry alright let's add that icon as well now I add the icons as images you could also import them as SVG but considering that we're not going to change their colors we can just import them as images this will be error now for this I want to add a class of error also error icon all right all right - right - right good let's save that and here we go HTML done only took us 28 minutes - the time I around bold around so that's good that's good a month I always tried to put the font awesome icon on my before and after but never works I get the square that's because you're not import you're not using font family font awesome so you're using the icon but you're not telling the D for whatever element you're using on that that should be a font oh so Micah you're gonna skip the label yeah do we need a label I don't see a label here let's see I know what you mean what do you mean but do we have a label don't have a label well for accessibility we could add the label and hide it but yeah it's not in the design so it's not my fault all right good good good let's let's start styling it what happened really vs cold closed again okay that's not a good sign I need a new MEK throw some donations I need to buy the back what happens two times in one three that's not good all right let's open the livestream life's server again and do that all right people you need a new PC yeah I think her skype is on skype it okay Skype was on alright I delete and close that yeah hopefully that will solve it Edgard you're funny hey that's true what you don't need is a Mack you're wrong I love my Mack poppers different than people okay you're keeping you're distracting me I guess the other thirty people who are watching and not chatting are mad because I'm not calling where were we we have the entire HTML structure which is nice now in usually you wouldn't just have h1 and a paragraph like this you would have classes on the tags because you want to style them separately but considering that this website is very simple we don't want to overdo it so yeah 40 people wow that's amazing hello everybody good let's style the page shall we first import the style which we're going to create so style that's CSS let's create that file style at CSS awesome good now from the style style guide we need to get a couple of things gradients okay I guess these gradients I'm not sure if you can see but there are some stuff here in the background dark grayish red I think that one okay the saturated red soft red and we have the famous on family of Joseph incense interesting okay let's start with the font going the style and import this font okay and then on the body font family we want to use these chip uses using just a thin sans sans serif and look at that the found changed awesome I also want to use box-sizing border box for the padding stuff text gradients not sure if that's text gradient just post it a group with 175 member so let's see if the numbers increase well thank you send a small donation thank you it's so nice of you not sure it should pop up on the screen thank you you're so nice thank you all for the donations three so far which is amazing Thank You adhere love a respect from India love and respect from Romania to you 175,000 hey welcome everybody okay well so many people so many stuff going on I'm just I am overwhelmed thank everybody all right let's keep going Thank You Cal thank you very much it didn't pop up yet but thank you all right where were we okay styling styling correct right okay what should we do first let's focus on the container the left and the right side now what I want to see is how much of percentage takes the right side over the left side so we have close to 820 here and 600 here so that's 1.4 that's how much in percentage 40 and 60 percent I think yeah new people subscribe thank you for subscribing all right so let's do that the container which we have should be display flags and now the left side will be with 60% and the right side which will have the image with be 40% awesome that's good let's add the image on the right side images and Hiro desktop now all right look at that it appeared good now how we're going to make it be full full width here oh sorry full height first of all I want to remove that margin there so we'll do that with margin zero on the body awesome next the container should be height the minimum height of 100 view tights okay and you can see now that the lady here is 100 ish but it's still repeating which is not okay so for that we can do background background sighs come on I'm at backgrounds size cover and now it will cover that area which is good note that I'm I'm working and well I'm styling desktop first although we're kind of zoomed in so this is how it works on desktop which is pretty close to how is it more how much percentage is 600 of 1.4 k someone calculate that for me 10% is one 140 20 30 % yeah should be around 40% okay so now we have the background we could also say background position to be center and center and we will Center it sort of and it the nice thing with background for the background size cover is that it will always cover it will stretch the image so that it will cover the entire area 42 percent use calc yeah but this is the image so we don't have that that part you scout for this thing right I'm not sure what today I subtract from Kok so that's why I love your accent okay I will do JavaScript sure come back tomorrow we'll have coding challenges way to JavaScript good so that's that let's focus now on the left side we can see here that this image has a bit of margin on the top and on the bottom so let's add that on the image now the image doesn't have a class so let's add it logo and we can target it here what I want well not what I want yeah what I want and what I do usually is that I'm trying to write the CSS selectors in the order order of the appearances of the HTML tags hopefully that makes sense so I'm starting to style the image here you saw we started with container than the left and we did the right because it's related oh look at that we have the background image class here when we did the background on the right that's not very semantic so let's just move this all right goody-goody and now I want to style the logo because that appears first in the HTML I want to have a margin of 40 pixels top and bottom maybe even more now that's the bad part with this tool is that you can't well I could put 60 pixels but it will be way off from what we have well I did put 60 pixels well [Laughter] let's make it bigger so wait 200 pixels yeah I guess let's look better are people watching this while at work hopefully not okay to to to to you can add only one ID yes so the reason I'm using classes is that well just think of like this you use IDs to target a specific element in the JavaScript and classes to target more and usually when you're creating classes you want to style the class and you might apply to multiple elements we don't have an example here but we had yesterday when we had the Box go and check that out all right now on the container I also like to add some padding zero top and bottom 40 oh no no nothing the container on the left so it's centered better now okay let's add this background color which is linear linear gradients colors saturated all right let's I'm not sure which colors which so I'm just going to try edit on the body background color and that okay that's definitely not the color that's the color for this and for the paragraph so while we're here let's add it we have the h1 which is super big here and later the letter spacing and also that has a span so let's tile that which actually goes yeah right underneath the logo so h1 text decoration uppercase text us form sorry I still confuse them text us for uppercase like that and then the span inside the h1 should have a color of this alright and the font weight will be 200 okay look at that perfect now what we want to do these are our own separate lines we could do that in HTML by adding the breaks here let's see how that looks okay and we have more font a bigger font size 60 pixels alright hmm for some reason the font is not working yeah looks different do we have us discord server yes we do other questions is it the image background pattern desktop we don't have oh we do have background pattern desktop okay thank you for that let's let's use that see that's nice too one of the good things of life swimming is that you get help what are the bad things of life swimming is that you need help background image images background pattern let's see whoa nice let's make it background size cover should be only have it on the Left panel it looks a little bit off right okay now the font is not right so let me go to fancy google.com and search here for the font Josefin click the plus and we want to customize you want 200 and 600 embed okay and here's this instead let's say let's see yeah so it's the same Josephine's some joséphine sense all right I had the plus an obvious cover obviously we don't need that it's caver yeah complete the black hurt eyes for text okay we will fix that now you can see that the heading here has some letter spacing how much 20 that's too much let's add it letter spacing 10 pixels all right that looks about right goody-goody now the paragraph has that color also great it has some letter spacing two letter spacing one pixel maybe line height also 30 pixels too much twenty six pixels okay and no it doesn't have letter spacing is all right pretty close now so we have the first section okay this text I need to style that let's see do we have the color soft red soft red for what soft red animal dark grayish red I think this is for the h1 they should say okay this is yeah that's for the h1 alright maybe looks pretty damn pickle on the front part what do you say hello Gabrielle how is everyone forty-three people that's amazing fluorine Chevron icon yeah we have it is just we don't have the button style yet goody-goody awesome I don't think I had 43 peoples that often and look at this it dropped right let's style the for now the forum will be pretty nice to style this is the fun part the four we have the input we have the button inside the forum we have the small tag now keep in mind that this is not a good practice usually to style directly the the tags usually you'll add the class but because we don't have that many elements on this page it's it's fine for now alright the forum let's see we want the input as it you can see here basically the button is on top of the input and the input takes full weight sort of well it takes full weight actually and we also have this span which is on the second line the line height of the h1 yeah probably line height 1.2 1.1 ok I think it's better the font size it let's see how it looks on big screens yeah almost right we shouldn't allow this to go that much ok well fix that a little bit later when we want to wrap things up also let's see how we're going to start first the button has a linear gradient now we have two linear gradient here and not sure why where do you see another linear gradient okay let's use this to two to the two on the button now the background background image come on help me should be linear gradient this to this okay not right maybe that's because the other one to this okay looks like that's the one now let's add some padding 15 pixels let's remove the border let's make it border radius 50 pixels so we have rounded corners and make it a width of 100 pixels all right her looks close now on the input we want to style this to first the background color will be transparent okay then the border will have this color for the text I think that works one pixel solid that color all right now this also has a padding of 15 pixels it has the border radius the same 50 pixels now the difference is that this will be 100% weight the font size it's bigger font size 16 pixels all right we also need to change the color but we'll do that later now how we're going to position this button on top of the input we are going to make this position:relative so we can have position:absolute elements inside it now considering that this input takes up the full width we can position:absolute this button make it top zero and write zero which should place it right on top of the input now you can see that they don't have the same height so we can force that although usually you don't want to force the height 60 pixels now 50/50 pixels yeah let's also maybe 55 pixels and we'll have both to be the same height so now you'll see the button B exactly on top of de but how does background-color:transparent work well it just transparent it makes it transparent nothing nothing fancy there padding 20 pixels left and right maybe more you can see that it's pushed here a bit all right on the desktop now look at that it looks much nicer we could now considering that this is relative we could also target this error icon class and make it position:absolute top:0 and left something we need to figure out what's the left and also top is not zero that will be let's think we need some mathematical calculations yeah George was right so outline:none is not the best for accessibility although I usually remove it and I remove it you should add something else adhere any perks for patron bronze members yeah you support me he's at the park yeah also Stevens right we need a box shadow get good good good good let's position it so the button here is a width of 100 so we can do right to be width of 1 100 pixels all right where was that image here active States yeah so 100 and then a bit to the left let's make it 120 pixels and top we can play around with these values or we could say top zero and then transform translate but still translate on the y-axis 50% that's still not in the middle because it will be in the middle if this will be half the height of the body height 50% and then so its height 50% we want to move 50% not of the height 25% then so some calculation to make it be in the center but it's too big so then let's leave it what it was and let's find out its height image computed 24 pixels so we have 24 pixels and the height of this is 55 2 2 2 2 you should track 24 you get 30 50 pixels on the top mmm oh and remove the transform all right now it's pretty close one pixels off to be in the center 24 you subtract 45030 yeah so one pixels off half of pixel off to be in the center exactly top 50% transform translate - on the cig hi Erika now it won't work because the height of this div is bigger because of this text so it won't work I think the order gradient is when the button is clicked okay it might be we'll need to check that alrighty let's add the box shadow which is very very subtle so bug shadow 2 pixels 2 pixels 5 pixels are not rgba let's use this so very subtle more on the spread maybe more on top 5 pixels yeah and let's do HSL a and we can do 0.5 we can play with opacity close close of show people how to use the browser dev tools that you're doing it mate you can see things like computer size I think that deserves its own tutorial so I'll do that in it it's in its own tutorial alright this looks a bit too much so maybe that good and the small it also has a color oh look at that we have the red color when it's an error ooh nice and as someone said not sure who yeah max that this background color gradient is when hovered so there are just a couple more things to do well a couple more these little subtle things which we need to take care of also we need some space here less space here probably alright as you can see they're just styling tiny things okay let's make this margin top 20 pixels and we need to make it display:block in order to have margin top and we could also say margin left 20 pixels because it was I usually close things and that's annoying so it's on the same line there so we need to take into consideration the padding of the input which is 30 pixels so margin left 30 pixels all right now it's aligned the color is darkish where is it so that come on open it what's wrong the red color style guide the saturated soft doesn't look like we have soft red did we use this I think that's it let's see color net okay that's it maybe too much margin top alright that looks like it it's also bold now so that looks like it now a couple of things to fix one we need to remove this and this when it's not an error to when it's it is an error we want this input to have the border and three we need the hover state on the button how I'm going to do the error is I'll have a form that error class well an error class on the form which will do something when we have error form the input we'll have a border to pixel solid and that color like this good that's one thing next by default this should be display:none and this should be displayed and when we have the four error the error class on the form we're going to do error I can display block and for error a small display block so now it should disappear which is great we're going to check the email and whatnot in JavaScript and when it's an error we're going to push on the form the class of error and then we should see the error State why don't you write this as well debugging in browser and then copy paste I got used this show people how to okay I read that you could also have the little animation on the words into the screen when the page loads went from the left from the right sure I could how much for that you can enable ah to say for file of the save this will save a lot of time because it have life server installed I yeah but will it overload the browser I'm fine with saving with when I'm saving them manually for now I'm fine but thanks for that good we have that state which is nice we're going to edit on JavaScript let's add the hover state on the button so button however we want what we used this linear we want this linear so let's paste it in copy this and change the values like that and like that save it and now and now what okay something from okay so still not right linear gradient the color the color so it's not the right color seems so why is that if you have time to add animations sure we can add animations why is not the color is not what we want maybe because that's just a color so linear linear to one we used already we have one more okay then I guess I could create my own gradient from this color to this color is it different oh say it's different but it's not that good okay you know what I have a better idea I could remove that and say opacity is 0.6 and now it will be lighter yeah sort of good we can also have transition opacity 0.2 seconds he is and now it will transition it's still not perfectly done I don't know oh well I guess that's fine good now on the desktop we want this to have a fixed weight in order to do that two two two two two let's think we could actually add this paragraph inside the form and have a fixed weight on the form let's try that for we don't need this we want the maximum weight of 300 pixels okay so now that goes there which is not good we can't put the paragraph there sorry about that the form I could do a trick of adding the max weight on the paragraph to but I kind of don't like that should be inside a container we could either add the fixed width on the paragraph and the form or create another container inside this left panel and add the weight on that and I think that will be the way to do it opacity should be 74% cursor:pointer does the button have a box shadow on hover it has it on it has it now - maybe it's too light definitely cursor:pointer you say definitely but there's a reason why they don't add it by default I usually add it cursor:pointer ok good what I was saying index let's wrap this inside another container inner container and then we can have that to be a fixed width all right and here in the left inner container will be maximum weight of 300 pixels or 400 pixels what happened the inner container can't see - the inner container is the parent of all days right left okay and yeah so it is some inner cone okay container good so now if we have it like this it should stay fixed with which is sweet awesome now this looks a little wider for some reason but I guess if we do it like this not not perfect yet the alignment here we have more margin than we should so on the h1 where is it margin bottom that's dizzy row for now and we will control the margin for the prep from the paragraph margin 20% zero maybe more forty all right that's better and let's allow the max width here on the inner container to be more 500 pixels not really so you're just playing around with the numbers I don't have that's it here it says 430 but now I can see yeah 450 hmm 450 looks nice let's see this how much is it close to 450 so yeah I guess we could use this time the spacing then let's see here 30 and 40 so we can use what is the paragraph 30 whoops okay all right so it could looks close to the design sort of maybe more margin here and heading is usually when I'm designing this I have this on the right so I can live see it I have it on my right monitor but now I'm just eyeballing it all right let's on the ball on the where is the input I want to make this two pixels also and should have a software read there was a style guide soft read let's use this input no this saturated but this is what we have Darden maybe it's just one pixel do you know any tools to measure okay so that's for Steven anyone does the outline look bad on the input yeah it does let's I don't like this and let's remove input outline:none input on active focus yeah but now we need to add something else so maybe add this box shadow so it can still see something happening yeah oh that looks it's not that obvious but still you can see that something happened maybe make it zero pixels and zero pixels all right so you can see it's activated sort of or focused we have the hover State also the placeholder is likely in the design yeah I need to find a color place placeholder CSS I never remember what the yeah so placeholder good input a placeholder and for that we also want a color don't we set the color not really let's use the border color for the placeholder and when it's active I guess in the image here we see black which is what we have awesome so we're kinda done with the design well it's not pixel perfect which is fine I will spend another hour just make it pixel perfect well I still don't like this this big curve that's one thing I would like to fix but I'm not sure why is there a combination of hmm interesting to do we added it on the body not here this one pattern let's add it on the left see what happens now not real like it background position center center still don't like it for some reason add some spice to it the outline feature is vital for accessibility I think the box shadow is not enough yeah you're right it's not enough maybe we could on focus we could have the border border width to be 2 pixels yeah so you can see now it's it's better right all right yeah we have the same problem on the button the outline so maybe we could use this on the button also Oh button focus yeah it's not that visible and then click on the button is active not really its focus but why can't we see that much hmm we don't have a border for the button that's one and we already have the box shadow so that's why all right let's add animation on this and this but not that's that's tricky because we have h1 the Spanish side we need to spell elements well I guess first let's just do the entire h1 animation in or I don't know come in coming for 0.5 seconds linear and we can define it come in to be to transform translate X be 0 and initially we can have this to be transformed translate X minus 100% okay and we need for words on the animation alright is maybe nice animation okay we could come in left so the animation is name coming left it takes 0.5 seconds it has an ease animation timing function and it stays forwards so you saw that if we remove this it runs the animation and then it goes back to an original state which is minus 100% if we keep forwards it will remain here and then we translate it from this to 0 don't use focus or active why not all right next on the paragraph letting have to come in right which will do pretty much the same where it will be come in right come in right oh okay okay and we need to do also the transform here alright so you can see when you refresh now it doesn't look that that good because it comes from this text but hmm well I guess we could have opacity zero and here say opacity one I guess and let's use this coming right for the input also all coming left for the input then let's place this here animations this one and coming left - - - - where is it the input and it also needs this so yeah just some basic and oh not on the input let's do it on the form okay so just some random animation by max take care now one thing we need to fix which is very important is the responsive thing look at that now on mobile it looks very bad and we will do that now so max media me just create and max width of 400 pixels we want the right to be display:none the left to be width 100% that left that's right all right perfect so now that fixed the image and this is pretty nice if use keyframes you can have it to go past the finish position to then go back again not sure what you mean and here on the mobile we also have mobile we have this image here so let's add it it's underneath the logo which will be image class of BG mobile iwan image yes what's up oh I forgot here images hero mobile all right look at that nice and I see what we want BG mobile background mobile what we want is this BG mobile which is underneath our logo vigie vigie mobile oops should be display:none on desktop and we display hit block here look like like that all right now what we want is to go 100% of weight and I want it to overwrite this part let's see well actually 100% weight we'll put it that way which is decent but they have it full weight and how we can do the trick to make it full weight is drumrolls first I need to find the padding we have on the left container where is it where are you left after that's left here so have 40 pixels now in order to make this full width we will do margin left - 40 pixels and margin right - 40 pixels right margin left margin right I think I miss oh we need calculation plus 80 pixels yeah so that's what that was a tick keoki so we are pretty much done I think on the mobile the icon is less it's smaller so logo here let's make it smaller 100 pixels a margin 30 pixels all right then look at that we have the nice designer mobile but if we scroll 400 I think let's make it 600 700 or so 768 is what bootstrap uses and now it will stretch and here it should go like that maybe this is it still too much so I don't know 600 yeah all right so we have that could you explain that part which part again let me know exactly which part you mean and I will try okay let's see it outside to see how it's looking this is the desktop version which is decent I still don't like this white element for some reason it's your whites that point good well and on mobile it looks like this okay need some margin here under the input let's add that go to the two on the left here we can have some padding on the bottom and now it will have some padding on the bottom maybe also we could decrease the heading here I would somehow like to get to the input faster so on mobile I also would like to have the h-1b font size 40 pixels yeah so it's almost above the fold closer can you describe calc of weight for BG mobile sure we want let me put it back here somehow I know know how oh I think I could just open it here all right I'm going to do that by default the image looks like this so it's a container which is left let's set the background color of purple left yeah so left is this container but it has 40 pixels padding now if we say this to be width 100 pixels it will remain inside that padding so it has space here 40 pixels and space here 40 pixels so we want to stretch it more stretch it 80 pixels or remove the padding and for that we do the margin left will remove 40 pixels on the margin left well we go to the left and we go to the right 80 40 pixels but then we also need to accommodate the fact that this is no longer 100% but it's 100% plus what we subtracted here so then it becomes this who to follow for angler projects live streaming not sure not me and not good with angular all right guys one less thing to do is to make the form validation on in JavaScript to to do to do to do for that let's add script well then we're going to also upload it to natla Phi so you can see it live script that J s here we're going to have script source the script @ GS we will add an ID to this form and here we're going to target it document.getelementbyid e form and for Advent listener on the submit we want to do something when we submit basically it will sup be submitted when we click the button when it's submitted first we want to prevent default which will be to refresh the refresh the page next will be to take the value of the input and check if it's valid so for that I'm going to add another ID here on the input email we're going to target here in the JavaScript email oops email and here we're going to get email value will be email that value okay like that and we need to check if it is a valid email now for that I'm going to copy a valid email validator projects email valid regex because I don't want to write it from scratch you let's say this okay valid email we could use this from Stack Overflow which is perfectly fine as we don't want to write this as its pain so it'd have valid email takes in the email and then it tests it for with these complicated regex all right now we can check if if valid email then do something email Val otherwise we want to show the error so if it's not a valid email we want to get the form class list add error otherwise form class list remove air so we're adding and removing that class list now if we did everything correctly we should be able to add here something press the button okay so html5 validation doesn't allow us to submit it like that but look at that if we have an email which passes the html5 validation but it doesn't pass our own validation will have please provide a valid email this error now if we do calm if press that disappears and I think we can have success remove error add success and here we also want to remove success if it's not successful and on the style where we are formed that success we want to have what some other color I guess this kind which color for success this one and icon should be green all right we'll we'll remove Taikan will not add icon so ABC BC not the valid okay yahoo.com and look at that now it's that valid input field it sort of also put you strict at the top of your JavaScript to save you some pain I don't need this trick for now you can put your skip in the head and just put the fare as the attribute which you make it wait until the page that's right I usually add it on the body I got you studied before the by the ends make it green it doesn't look right with the design but it's fine now so if it's invalid we get this error if it's valid we get this what I could do is to here in the script else document that body inner HTML will be thank you and then we don't need this success so let's remove it all right now if we have it successful we'll say thank you oh look at this shape which is nice we added it on the body but actually should be on the left on the Left element so let's add it there we added it here let's add it on the left and yeah look at that now we have that shape here all right hmm that shape and here we have some [Music] linear gradient I'm saying that this linear gradient is for our left lefty lefty where are you hmm but we have let's set it on the body background-image:linear-gradient this remove the from remove the to save it alright look at that so we have a linear gradient on the body which adds that nice coloring here alright are you going to do codeword streams today no well do it tomorrow green border yeah doesn't look right so we have our small website I will well you can see that it's centered here so let's Center ours too we can send a raid by saying margin auto ok let's add icon inside our inner container this well okay so now everything will be nicely centered there and on mobile we'll have it looking like this that's pretty nice so this will be valued at a couple of I don't know more than $100 I guess so okay any of you guys who want to learn JavaScript watch for encode work stream tomorrow it's epic thank you you're very nice okay let's think will be to take this project and upload it on net with I so I'm going to close this now close this and here who front and front end mentor I have the first project I want to actually front and mentor open this MBS code and get make a pull request so get full because we added front and mentor not a github repo but oh this is not the project what's the project then I forgot let's see I forgot what's the project name we did it yesterday Fran and Hannah last night doo-doo-doo-doo these are some of my project okay front and mental challenges alright that's it it wasn't in name so let's use that can you read my name correctly please no I can't that's a tough request so I can't and now let's put this inside which we'll have it now in our folder we go to get that ad get that comment base no added come coming soon page get that push but also let's here and HTML do this rename this take the URL and say base Burrell coming soon all right get commit added link to index get push and now if we go here to github from 10 mental challenges we should see this her I didn't add the link in the readme hmm what was it let's go to net with I yeah joy I said it I won't okay and want to see what project is they setting this one let's see the link base a parent coming soon and we have it live awesome logo is not working awesome also this background image awesome live on life see it life I think we can put this come it added live link now I don't know why we don't see the images expect inspect to be expected logo image is /a thing that's not too good now okay we need a dot we need to dot the front our images alright let's add those index where we see images / images we want to replace that with dot slash images so all of these will be replaced with dot slash images well well some don't even have that do that now this is - and now this network so let's add here and add here alright and also in the styles we use the image here alright not sure how that image worked interesting on the right right right right okay so now I should work get comment fixed image path get push okay waiting waiting here we should see that link now see it live if we go here we see this page which is not styled but it's fine we go to this and drumrolls we should see the images look at that also we have form validation and we have this thank you hello have you got to remove that it's fine all right let's fix that scraped innerhtml thank you let's set the date it I usually don't do this but style this will be H 1 H 1 close the div and this will be display flex a line items center justify content Center usually don't do this but for this it should for get come it updated script that's not a good name but should work rubbish grogger again no awesome stream for it thank you cow I am glad that you liked it if you did alright let's refresh again and now if we submit a valid email to the doo doo waiting for it to update yeah so it picked up the images they also have the nice animation and here we would say admin admin thank you all right that's it that's it folks now for tomorrow what do you want code words j/s with coding challenges with JavaScript or we should do another of this I know what Stephen will want the next challenge will be this that you are the one who said dance in the in the suggestions you're crazy okay so tomorrow we will not tomorrow tomorrow we'll do code words and then the day after tomorrow we'll do this design which looks interesting look at this we have mobile nice nice so it has a form here nicely styled with some box shadow this interesting background color web background image all right if you're still in the live stream say something any more streaming today sure for the right amount I will do it George oh I'm glad you liked it okay now I want to any life scene today I will do some planning for future live streams though I also need to do some videos welcome where do you get the designs I got them from front end mentor go to front and mentor the pile and you get the free designs David you're welcome all right if you like this stream don't forget to give it a like tell YouTube that this was good Gulshan how about sharing how you plan I'm not sure if that's very interesting I just think I'm just thinking ahead of what I want to do and write everything down and then I'll try to organize those thoughts so it's not nothing fancy nothing I just think that's all stay and think all right do you have any other questions if not we'll see tomorrow but roughly the same time probably one hour earlier but please check Twitter and check discord I will say what which time I will be live on those platforms all right I need to fix the sounds for some reason it hit arrow doubt you okay thank y'all for watching I hope you enjoyed it I think it was the biggest stream so far are you going to cover all projects from front end matter I think so why not joy you're funny so in the future we'll do code words Jas and more front end mental challenges this will be at least for a while the nice thing with these challenges is that they have some hard ones which will use JavaScript for oh sorry javascript is and react for example this rock-paper-scissors game look at how nice it is and it will be with react probably and then we have these landing pages which oh boy look at how many how many sections it has probably in two lives you know so alright I learnt the new after tix today and a bit of animation awesome that's good make sure you practice with what you learn so you don't forget my wife said is this guy doing stream all day hello girls and his wife yes I am doing live streams a lot hopefully we'll get to 100k that's that's my my goal well I also enjoy it I can't lie the goal is just the gold 100k is just a number but I enjoyed these live streams I can code and explain and have fun with you which is really nice thank you for being a part of grid is the future of present yeah alright guys thank you again for watching I'll see you tomorrow make sure you like this video if you liked it and subscribe if you haven't tell you too that it's worth subscribing so if they will send more people okay have a great day evening night morning afternoon not sure what else what time is during the day hit left bye everyone take care

Channel: Florin Pop

Views: 9,171

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, static website, website, coming soon page, base apparel

Id: 8A7-0gsbHA0

Length: 108min 54sec (6534 seconds)

Published: Tue Mar 17 2020