Responsive Coming Soon Landing Page With Countdown

[Music] hey what's going on guys in this project we're gonna be building a coming soon or an under-construction landing page from scratch and we're not using any frameworks or anything like that it's just vanilla HTML CSS and JavaScript okay we're going to include this dynamic counter here at the bottom that updates every second so we can simply set a launch date and it'll calculate the days the hours the minutes and the seconds and this is something that's very practical that you can use for your own projects this is actually for an application I'm working on for my full-stack react course it's a social network called the dev connector but of course you can switch out the logo and the background image the text whatever you want alright it's also completely responsive so if we were to make this smaller you'll see once we get to a certain point what I've done is I've I've changed the we're actually using flexbox for these these boxes here and I've changed the orientation to column and just stretched out the width and I got rid of the minutes and the seconds and the hours because when you're on a mobile device it's gonna be much shorter and we're setting an overflow of hidden so there's gonna be no scrolling I don't want there to be any scrolling at all so I feel that if I kept that the other stuff it would be just be too long so I think that it's fine for on mobile devices to just show the days all right we also have a responsive height so if I were to make this shorter once we get to a certain point you'll see that the logo gets smaller the little paragraph goes away if I go even shorter then the h1 should go away as well all right so it still looks good even at a very small height so that's what we'll be building hopefully you guys enjoy this and you can use this in your projects feel free to use it it's completely open-source so let's get to it coding dojo is a programming school that turns beginners into developers and only 14 weeks over 90% of their grads land jobs within three months of graduating often making over seventy K per year to learn more visit coding dojo com or click the link in the cindello all right so let's get started here so I just have vias code open and I have an empty folder called coming soon landing and there's nothing in it so we're gonna create this from absolute scratch so let's create our index dot HTML file and we're gonna need just a couple folders here so let's create our CSS folder and let's create our JavaScript folder j/s and let's also create a folder for images so IMG now I will have the code pen in the description which will have some links to some remote images so you can grab the images from there especially the logo one of the images the background I got from pixels calm and I'm not exactly sure what I what I search for might have been programming let me see and you can use any image you want it doesn't really matter but if you want to be exact yeah it's this one right here so I got the the ten eighty nineteen twenty by twelve eighty version all right if you want to be exact and then the logo you'll be able to get in the code pen I might I might even put a link to it in the description all right so let's get started here the HTML is gonna be very simple I'm just gonna use Emmet to put in some boilerplate code actually you know what let's also add in our CSS file and stuff so let's add style dot CSS and let's add main dot J s and then I'm just gonna bring the images over as well alright so in the image full IMG folder I'm gonna bring over three things there's actually three images because I'm actually going to create a favicon for this as well just in case you guys don't know how to do that I'm gonna use a program called dynamic drive or a website called dynamic drive that allows us to take a PNG or a JPEG and turn it into an ICO file but if we take a look at these images they just look like this okay this is the main logo this is the background the showcase and the favicon alright so let's go ahead and continue with our HTML so I'm just going to change the title here too just say coming soon and we're gonna add a link to our style sheet which is in the CSS folder and then style dot CSS let's also add a link to our JavaScript so that's gonna be in the jas folder and it's gonna be main dot j s alright and then let's go ahead and put in a section here I'm going to use html5 section tag and give it a class of landing and then in here we're going to have a class of landing - inner and the main reason for this class is because I want an overlay I don't want just the image as the background because there's just too much noise we won't be able to read our text so we want an overlay where we can actually add a background color like a darker color with some opacity with some transparency so that's why we're doing that and then let's put our logo in so it's going to be an image and it's gonna be in the image folder and it's called logo dot PNG for the alt I'll just say dev connector you can put whatever you want and under that will put our paragraph and we're just gonna say a social network for developers and guys the react course should be out within might say 30 or 40 days as an estimate it's gonna be completely full stack you know nodejs mongoose in the backend JWT tokens all that stuff so look forward to that h1 we're gonna do an h1 with the class of coming soon and we're just gonna say coming soon and then under that we'll have another h1 this is going to be a placeholder for the countdown so I'm gonna give it a class of sorry about the phone guys ever ever feel like every video this happens let me just shut this off all right so we have an h1 as a placeholder and that's it that's our HTML so we'll save this and you can go ahead and just open the HTML file if you want but I'm using live server with vs code so I'm gonna say open with live server and we're just gonna see something like this alright so now let's go to our CSS ok CSS is next we'll do the JavaScript last now I'm gonna just go ahead and set all everything to have a box sizing box sizing property of border box and that's just gonna make sure that any padding or border or anything like that goes inside of the box model alright so it doesn't add to the width or the height or anything like that then we're gonna take the HTML and body and we're going to set margin to zero let's set the font-family I'm just gonna use Arial which is right here and let's add a color we want white as our color and someone asked me recently why I use hexadecimal values and not the color name and it's just preference you can use what the word white if you want it's just it's just a preference no special reason I guess so the background I'm also either even though we're gonna have an image background I'm gonna set the background color to a dark dark gray almost black and then I'm gonna set overflow:hidden which is going to make it so that we can't scroll so it's a overflow:hidden and that's our body so let's save okay next thing we'll do is the landing okay which is the main section has a class of landing and we want to position this as relative because the landing inner that goes inside of it is going to be positioned absolute and we want the landing we want this class to be its parent so it has to be relative and then we'll set the background and we're gonna set that to a URL and let's say dot dot slash because we need to go outside of the CSS folder into the image folder and then we want showcase dot PNG okay we want to add a couple background properties here so we want background size and we want it to cover okay we want to cover everything we also want to position it so we'll say background position and let's say Center okay and then the height I want to take up the entire the entire height of the the browser window so we're going to set it to 100 V H which is viewport Heights all right so if we save that let's see why are we seeing it section class landing what I miss here image showcase oh it's a JPEG I'm sorry not it's not a PNG there we go okay so now we just have the actual image there's no overlay and it's just it's very bright and just doesn't work so this is why we have the landing inner where we can put our overlay okay and and for VH if you're not familiar with that it stands for viewport Heights and you can basically think of the height of the browser as a hundred different slices across and we want to take up all 100 if I were to put 50 VH and I've explained this in quite a few videos it'll only take up 50 of those 100 slices okay but we want it to be full screen alright next we're gonna do the landing - inner okay so landing inner we want to position as absolute and so it's basically it's it's basically just gonna completely cover the landing okay its parent so let's see we want to we want to basically the position we want from the top zero and left zero so from the top left-hand corner and then we want it to be a hundred percent across so we'll say with 100 and then a hundred percent height so it covers the whole thing and then we want to add a background it's going to be a color but we want to do rgba okay and the reason for that is because rgba allows us to specify an alpha value which is an opacity value so we can make it transparent and we're gonna make it black which is just three zeroes now if I did that if I did RGB like that that's not gonna work or if I did a hexadecimal value not gonna work because we need to add that extra value at the end which is the opacity which I'm going to set to zero point seven and if I save now you can see that week it's actually transparent okay another thing we're gonna do inside the landing inner is I'm just gonna text a line everything to the center and let's add just a little bit of padding at the top of 50 pixels and there we go now for the h1 this coming soon and actually that the counter will also be an h1 we're gonna set a font size so we're gonna say landing h1 and let's set the font size of that to 50 pixels and then I'm also gonna set for the paragraph will set a font size of 20 pixels okay and the paragraph is this right here all right so let's see the rest of the stuff aside from the media queries has to do with the countdown and we can't see the countdown yet so we're gonna hop over to our JavaScript now so that we can get that settled alright so we're gonna start off by creating a variable called countdown and we're gonna set this to the the elements with the class of countdown so we're going to use document dot query selector and we want to choose the class of countdown let me get rid of this sidebar okay next thing we're going to do is we're going to set the launch date okay so we'll say Const launch date and let's set that to new date okay we're gonna use our javascript date constructor and the launch date I'm gonna choose is going to be January 1st of 2019 and I'm gonna say it's gonna be at 1 o'clock so 13 0 0 0 0 and we want this as milliseconds so we're gonna attack on the get time method and that'll give us the milliseconds all right so if I were to console.log here the launch date save that let's open up our console and you'll see that we have the milliseconds for that okay now we need to set an interval for every second so every second we want the the time to update or the countdown to update so let's say update every second and I'm going to create a variable called int V al for interval and we're going to use the JavaScript function set interval okay now set interval takes in a function I'm going to use an arrow function this is an es six arrow function you could you could just do the word function and get rid of the arrow like that but I want to keep it more modern and use this syntax and then the second parameter is how often do we want this to go on which is every second now good it takes milliseconds so we want to do 1000 okay every second and if we were to do like let's say console dot log hello and let's save and let's what let it run you'll see right here every second it's law its console logging the word hello okay so it's gonna run every second and that's what we want alright so in here what we want to do now is we want to get today's date and time and we want to get it in milliseconds okay this is also in milliseconds so to do that we can create a variable I'll call it now and we'll set it to the new date and if we just do new date with no parameters it's going to be today's date and date and time and then we use get time to get the milliseconds okay now what we want to do is get the distance from now to the launch date in milliseconds and we can do that vile it's set a variable whoops don't want it to be capital so distance equals and then we can simply do launch date - now alright and if we console.log distance and save you can see that well it's actually gonna do it every second and it's gonna give us the distance from then until now and it's gonna go down one second every time alright so next thing we want to do is our calculations and this is how we get the days the hour is all that stuff and they're just just general formulas to do that I am I am horrible at math I had to look this stuff up and I'm not ashamed to admit that I'm just I'm not good with math but basically we want to create our days variable and say floor which is going to round down and we want to take the distance and divide it by 1,000 times 60 times 60 times 24 okay so 60 minutes in an hour or 60 seconds in a minute 60 minutes in an hour 24 hours of the day this is gonna this is gonna get the days for us and the next thing we want to do is get the hours so we're gonna do the same thing math dot floor and we're gonna take now distance and we're going to use the modulus operator and pass in that same formula so this right here alright and then we want to divide by 1,000 times 60 times 60 all right so that should give us the hours and then we want to get the minutes so we'll say mins and we'll set that to math.floor and this time we're gonna put in here actually know what this this part of the equation here should be in parentheses so we want to put one there and we want to put one here and then I'm just gonna copy this whole thing four minutes and then we just want to change let's see all you have to do is get rid of one of these six T's so it'll just be 1000 times 60 all right and then I guess I'll just copy this down and this will be our seconds so seconds and then we want to take this same thing oh you know what I'm sorry for the minutes we don't want this last 24 so it should be 1000 times 60 times 60 divided by 1,000 times 60 and then for seconds it should be 1,000 times 60 for the first divided by 1000 so we don't need these parenthesis because it's just 1000 okay and if you're not that great at math that might confuse you it does confuse me a little bit but it's just a general formula you'll see this all all over the place online so next thing we do now that we can calculate all that stuff is we want to display the result okay so we're gonna take that countdown variable which is the countdown class okay we set it to the element in the DOM and we want to do inner HTML equals and we have quite a bit to put in here so I'm going to use a template string which is part of the es2015 or es6 standard so we use back text not quotes and we can put we can mix in here HTML with variables all right so we're basically going to have for dibs can I use em in here I'm not sure if I can yeah I can all right so we have our divs and then in here we want the day's value and this is how we can use a variable with template strings so that'll be the value and then we want the word days but I want it inside of span oops I'm it's not working there so we'll say span like that and we'll say days all right and then this next one here will be the hours so we want that hours variable our calculation and then we'll say hours okay so this one will be mins say minutes and finally we have seconds all right so that's our output now the last thing we need to do is check to see if the time is already past is it or is it January first or later and we can test that by simply saying is distance less than zero so let's say if launch date passed which really I mean if it's your launch date you're most likely not even going to have this up anymore but just in case we'll say distance if it's less than zero then let's stop the countdown and we can do that by using clear interval okay but we want to pass in the interval which I called int VL so clear that and then let's just style and output some text it says launched so we'll take the countdown which is our element our h1 countdown element I'm gonna set the style dot color I want it to be that bluish green color so I'm gonna set that to the hexadecimal value of one seven a to be eight and then we just want to put some content so we'll say countdown dot and our HTML equals and we're just gonna say launched like that and that's it so let's save okay so you can see that it's working the functionality is working and the second two counting down if I were to let's say change let's change it to January 2nd and save and you can see now this is 298 days all right if I were to change the time to let's say 17 and you look at the hours well I guess that would add to the day as well because I mean right now it's 108 p.m. but you can see that this is working it just looks horrible so now we want to go back to our CSS now that we have this done and continue on alright so the countdown itself if we look the countdown is just an h1 right and it has it has if we look at what we put inside of it some divs some spans and so on now I guess that I guess that really doesn't make sense does it because we don't want divs inside of an h1 so I'm actually going to change this to a div not in h1 okay but then what we want to do is change this just get rid of that h1 no I'm sorry not that you just want to say count down and make sure we set the font size to the same 50 pixels all right good I didn't realize I did that anyway so let's continue on here now the countdown is going to be displayed as a flexbox okay if I do that it's gonna automatically just align horizontally which is what I want if I were to make this bigger you'll see that it's not in the middle so we want to add a couple things here we want to justify the content to the center we want to align I'm not aligned content we want aligned items to the center and we'll also do text aligned to the center and save and now it's pushed to the middle okay and I can make this bigger I guess yeah so let's see next thing we're gonna do is take each of the divs now the divs are the actual Flex items countdown is is the display flex everything in it which our divs is gonna be the Flex item okay so let's go down here and let's say countdown div and we want to first of all I'm gonna set padding to 20 pixels and we want a border around each div so it's gonna be border one pixel solid and white okay so that gives us the border I want two border radius I wanted to have a little bit of a curve so we're gonna say border radius 10 pixels alright we also want some margin to break them up because they're right on top of each other so that moves them out we want a little bit of opacity a little bit of see-through this here transparency say 0.7 and let's see we want the background to be black and there we go all right so next thing we want to do is let's say I want the these days hours minutes the words here these are in spans remember if we look at our meat our main j/s those are all in spans so we can target those by saying countdown span and we want to display block which will knock it on to the next line I save that and then just change the font size make it smaller so we'll set the font size to half which will be 25 and there we go now the first one which is the days I think that's the most important so I want that to have the blueish background so what I'll do is I'll say countdown and actually I want this up here yeah so we'll do countdown and we can grab the first one by saying div first child so that'll grab the first div which is the day's box and we're gonna set the background to hexadecimal 1 7 a 2 B 8 alright so we'll save that and there we go so now the days has the the bluish greenish background alright so we're pretty much done for for this this screen size but if I were to make this smaller you'll see it's not responsive at all okay same thing with the height so we want to change that so we're gonna add our media queries I'm gonna go down here and let's do a media query for any screen size that is 650 pixels or less so we want to do max width of 650 pixels and for those of you that aren't really familiar with media queries it just means that anything that we put inside of here is only going to be an effect if the device that you're viewing this on or the browser is 650 pixels or less okay so if I were to take the body and say display:none and save it's gonna go away because right now it's less than 650 if I go above 650 the body shows because that's no longer in effect so what I want to do in here is take the landing image first of all so this actually should be class landing and we want the IMG and I'm just gonna set the width to be 70% okay that's gonna make it a little smaller and it's gonna make it fit better okay so you can see once I hit 650 the the logo is basically relative and it has a percentage of 70% all right next thing I want to do is the coming soon text I want to make that a little smaller so I'm gonna say down here landing H actually we can do just landing h1 now that I think about it because before we had two H ones and that's really the only reason that I had these classes so we can get rid of that make that a little bit cleaner and then we can go back and we can just do landing h1 so landing h1 let's do font size forty pixels okay so that made that a little smaller let's also do the countdown let's see countdown I'm gonna set the font size to 30 pixels all right now you could make this even smaller and you could keep you know keep that the hours and minutes and seconds if you wanted to but I don't want I don't really want to make it too small so that's why I'm gonna do the getting rid of the hours minutes and seconds and just doing the days and I'm gonna just change the Flex orientation to be in a column fashion so what I'll do is actually in this countdown I'll say flex direction it's already displayed as flex from above but we want to change this to column and save and it just changes the orientation to be vertical okay let's see so I want to get rid of these because again if you're on a mobile device it's probably going to be shorter and there's no scrolling so I want every bit everything to definitely be visible but you can I mean you can do some testing if you want that's just what I'm what I'm choosing to do so I'm going to take all of the divs from countdown which are the Flex items and we're going to display:none and if I save it's gonna get rid of all of them okay now we want to grab the first one which is the days so we're gonna say countdown div and we're going to use the pseudo first child selector and we want to then set that to display as a block instead of display:none and if I save then that will show alright and I'm also gonna see it set the width to 80% save that and let's also make the padding a little a little less it's 20 right now I'm gonna set it to 10 okay and there we go so now it is responsive width wise so now what I want to do is take care of the height because right now if we get to a certain height let's just bring this up it just doesn't look right so let's add some media queries for height and this is gonna be pretty easy so say media and let's do height or I'm sorry max height so max height of 600 then I want the image which is the logo to have a width of 20 percent so I'll save that and you'll see that the image automatically gets smaller and then I don't want to display the paragraph so I'm gonna just say display:none all right now if it gets even smaller like like right here then I want to get rid of the h1 so I'm just gonna add one more media query and just change the max height to 400 instead of six and then simply put in the h1 here and display that to none and save and there we go we probably want to add yeah let's add a little bit of padding to the image to the bottom because they're like right on top of each other now so we'll say padding bottom 30 pixels and there we go that's good alright good so now it's responsive in every way and that's it alright so we now have a landing page that has a count down feel free to experiment with it a little bit if you want to change some things up if you want to of course change the logo and the background and all that but it gives you kind of a boilerplate for future projects you know when you're working on and for your clients you can throw up a page with their logo and you now you can really understand everything rather than going and finding a template there's plenty of under construction templates you can buy but now you've actually coded this yourself and you understand everything and you can easily edit it and stuff alright one more thing I almost forgot is the favicon so in d.c in the image folder you have this favicon PNG if you want to use that up here then one of the tools that I use is I'm just going to search for favicon generator and there's a few of them the one that I've used for I've used this for years I mean like seven or eight years now is this tools dot dynamic dr.com slash favicon and you can simply grab choose a file we're gonna grab this favicon PNG and we're gonna click create icon and it's going to basically just translate it or convert it into an ICO file that we can download and I'm gonna put that right in let's see where am I into my project folder which I think I have in here and here so I'm gonna save it basically to the root of the the paid the the coming soon landing folder that I created so I'm gonna save it there alright and then close that up and then just grab this right here which is just a link to that ICO file ICO file and we're gonna go to our index.html and just throw this in right under the the link to the CSS okay and I'll save that now if you reload you're not gonna see you might not see it if you don't just hit ctrl f5 which will clear your cache and now you can see that it's there as our favicon and of course you know if this you're doing this for your own projects you're probably not going to want that image but just to show you an easy way to do it okay but that's gonna be it guys for this video before I go I just want to mention real quick that a lot of you guys tons you guys offered so much support so much support and positive comments in my last video where I kind of it was kind of personal I talked about my past and a little bit of just you know stuff that that I thought maybe I'd be judged for but the support was just insane the like the like to dislike ratio was insane and I just thank you guys for that really that really just made my day it really did I just wanted to mention that alright so that's it guys thanks and I will see you in the next video coding dojo is a programming school that turns beginners into developers in only 14 weeks if you're serious about landing a career in tech but lack the formal education or background coding dojo will get you there in no time with over 3,000 graduates to date over 90% of their grads land jobs within three months of graduating often making over 70 K per year at tech firms of all sizes from companies like Google to local startups to learn more visit coding dojo com or click the link in the description below

Channel: Traversy Media

Views: 41,241

Keywords: html, css, javascript, landing page, coming soon page, under construction page, html under construction, html landing page, responsive web design, responsive landing page, responsive website

Id: NNpwqrvPyyU

Length: 38min 24sec (2304 seconds)

Published: Fri Mar 09 2018