Responsive Coming Soon Landing Page With Countdown

[@Omaro__]

Thanks Brad you taught me a lot in 8 months and I just GOT A JOB. Thanks A LOT! You are an excellent teacher!

[@stancedtaco]

I just love Brad's channel. Very informative tutorials that are ACTUALLY useful in the real world. And to top it off, he keeps them all updated which is extremely nice.

[@kevinzhang8974]

I just completed the tutorial (Friday night)... I changed the date and background image to countdown my year-end cruise .... 2888 days left!!! showed to my wife and she really like it. :-)

[@irinadelgado876]

Thank you Brad, for quite sometime I’ve been scared to jump to JavaScript, but your videos make me gain confidence

[@lukas85s]

You are amazing. I hope that someday I will be a programmer at a similar level as you. Thanks to your films, in two months I've made more progress than before for a year. Thank you very much. Greetings from South Poland :)

[@Ebes-MB]

Another Great tutorial! I will use this for the launch of my new website that I have built with what else but previous training from Traversy Media! Keep 'em coming!

[@siddheshdingankar604]

Thank you so much...that was simple and awesome!!! Watching it develop from scratch made me feel like I am building it too together. Nice confidence booster for a beginner to believe that its possible to develop. Instantly subscribed your channel. Looking forward to learning more from you with similar awesome videos.

[@forzaforza9204]

That's awesome Brad! I am taking your JavaScript course. I really like the course and how it covers the new es6 and different design patterns. It answered most of my questions. There is one major thing that I was not able to figure out is object composition over class inheritance. If you ever update JavaScript course it would be nice to have one. Looking forward for the React course!

[@milleniummoses]

Good video as usual. I recently learned that if a parent element is {display:flex} you can perfectly center the child by simply saying {margin: auto}

[@phyothiha5612]

I really love all of your javascript tutorial. You're awesome Brad. :D

[@tacva2607]

You are excellent,Brad, Thanks for this amazing tutorial

[@matthewtetley7048]

Had always wondered how countdowns had worked, great project use again

[@Neworldexport]

Thank you for motivating us by sharing, I added a calendar functionality to choose the date to practice your code.

[@aniskarim1934]

Thanks Brad, I am following your 2020 Partical Guide.

[@piomandizvidza3606]

Good stuff. Especially when it comes to learning JavaScript with web design.

[@kevinzhang8974]

this will be my Friday night's to do list .... thanks for another practical example.

[@Tigap]

Wow, this is nice Brad. We are doing this together, it's your boy from Nigeria. I have seen this on Instagram, that great I am ready to learn along, even due I don't have a laptop to do so, put for you I need to use my phone. Love you Brad.

[@sahilnagotra547]

Thanks for creating such an awesome channel and tutorials

[@ayushguarg7053]

nice video brad. I am always eager to watch video. you explained very well .Thanks for helping people

[@yanskievl3520]

thank you ! Teacher Brad ,now i know how to use this mediaqueries to make sites responsive, out teacher never taught us that.

[@tomaszwisniewski319]

Very useful tutorial, I will use the idea on my new future website

[@equestriansa3482]

Thanks, great vid, looks like you opened my eyes to a great page editor there!

[@azamatakramov2194]

You are one of the best web genii Broo!

[@klesar84]

Brad, thank you for your effort, you are such an inspiration for all of us. Can we espect some new Wordpress theme developing from your, much deeper and complex theme?

[@osmeig6025]

No entiendo mucho el idioma Inglés pero tus videos me fascinan! Gracias, Saludos desde Argentina!

[@TheITGuy]

Hey Brad...Firstly another awesome video..Thanks for that..Just wanted to say something..I made kind of Similar Countdown timer and the math was easy to remember..I just went exactly bottom up from your approach..Calculated seconds first and then used that second variable to cal min then hr then days..So the math part was easy there...But thank you for this approach as well..Learning from you has always been an awesome experience for me :)

[@pedrosousa6576]

Really handy! Thanks brad!

[@GCom0]

Thanks BRAD!

[@aalolooo]

Great lesson. Thank you so mutch !!!!

[@m.junior4726]

Great tutorial as always!

[@geekatari4391]

Awesome work. Thanks for sharing!

[@jassehomar]

weew! first person to be comment... Brad thanks so much for your awesome tutorials. I am learning a lot from your videos.

[@vanrensburg3760]

Fricken love you dude.

[@storyden5]

Nice videos.. Brad you encourage me alot😁😁

[@ssm2015_ita]

You are awesome man keep it up and make more videos like this and more stuff of css and JavaScript

[@smitshah1737]

I always watch this videos on the incognito window as I am using Adblock. #ThanksBrad

[@RuggieroGuida]

Amazing video. Thanks!

[@RichardCodes]

Love it man, keep up the good work.

[@gody1305]

Can't wait to see the React / Redux udemy course Brad 😀!

[@ClassicCartoonsNL]

How do you set a background image + welcome message into your browser?

[@devmuse1957]

just bought few of your courses on udemy...my aim to buy all :)

[@CCGGCCGY]

thanks for your help. it's really helpful! I wish I could know your channel earlier!! I will try my best to learn! =)

[@ashutoshnayak609]

I don't like your videos, I ABSOLUTELY LOVE THEM!!!

[@bishalsenhdri7655]

Thank you so much 🙏

[@danteanjos_]

Hi Brad, great tutorial! What if a tutorial creating a onepage website loading bar?

[@zmOe1]

Thanx Brad ! U R Awesome

[@ahtjohn2341]

great tutorial !!! just keep continuing...

[@mohamedkhan5430]

will this use the server time or the computer date

[@alexandermelo2918]

Brad quick trick. You can use this pseduo selector to hide everything but the first child .countdown div:not(:first-child) { display: none; }

[@xNakkato]

Hello bro i follow all your tutorials very good job as always, your videos help me a lot in work since i'm a young developer, i'm trying to learn angular5 and reactjs too jeje but what you should do is upload a video with a kinda of more robust app in Angular5 and FireStore since i have some issues displaying data between components

[@npmSteven]

Hey @Traversy Media, Thanks for the video, I've been doing some research into TypeScript, and I was wondering if you could do a video of you implementing a NodeJS backend with an Angular front end, as there not really any tutorials out there about this. Oh, and I have brought your Angular course, about 45% of the way through, loving the course so far!

[@samuxui]

Hi, I'm Brazilian. I'm using google translator. I have difficulty understanding javaScript. If I want the counter to start with only 3 hours, how should I do it?

[@hakunamata_tuh]

Thank so much! :)

[@ssm2015_ita]

Traversy makes videos like this with pure css and JavaScript without using any framework .

[@phillipmaser132]

Brad your on top of this from html to php complex stripe objects and PDO. I am a direct marketer constantly getting rip off with landing pages, wordpress plugins that fail or go out date. I can't change the look or color sometimes. They charge or rent out tools very overpriced. After studying some of your videos, it appears that you can building landing pages with product, jump to another page for upsell or downsell. Store a few products in mysql , display products and show products in the Cart view and do a Check out using Stripe custom form or Paypal, Sales tax, and Shipping. You make this look easy but its not, plus you capture the subscriber in an email if they choose to enter. I would love to get where your at soon. The only reason. I can do this right now is I am out of work. Soon starting my new job. I will not have to time to watch and learn this stuff on a continuous bases. I will contribute to hard work.

[@andersonrosa8085]

good content! Brad.

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@tony-go-code]

Thank You very much, i learn a lot from your channel. Could you please create Laravel series? I am waiting to learn from your course.

[@taykratzer]

You're so awesome!

[@ilusionem2347]

What programme are you using for coding?

[@htmlcsstutorials1869]

For some reason, my numbers won't show up. I have typed the exact same code as you, Brad, compared to the code in your CodePen, but that didn't work either. Can you tell me what I have done wrong?

[@chimpionboy]

OK. Nice. Will be waiting on it Cuz;

[@homayounshokri5041]

lovely like always. tnx bro.

[@petronjuno8938]

thank you

[@juhandvan]

thanks you so much

[@pikachu5223]

Brad are you thinking to do a React with Redux tutorial? Thanks!

[@TraversyMedia]

Udemy course but yes after that Ill have some YT tuts on React/Redux

[@devilmanscott]

Not to burst people's bubble, but Redux isn't the go-to state management anymore, it's still used for certain use cases, but Apollo and similar are now the go to.

[@devilmanscott]

Not just that, the fact that Apollo and similar can automatically cache, update in real time, its the reason Twitch and few other large websites have moved over, also you can still use Apollo currently like Redux, with the withApollo wrapper which gives you direct access to the cache. The apollo-link-state package is just about making it easier with a nice @client abstraction. Don't get me wrong, I still use Redux, mostly for things that wouldn't be relevant to cache, like a text editor or calculator, but for most of your data & state needs Apollo pretty much covers it.

[@pikachu5223]

Scott Berry thanks for the info!

[@arthurprather6720]

Scott Berry - Thank you for the info... I was wondering about that,

[@arsalanahmed7332]

Whats the chrome Extension for date and time you using I'm curious about it..Thanks

[@PTGINDIA]

type momentum extension and you will get what you want :)

[@NathanBudd]

Why did you use span, and set to display: block? Why not use a div?

[@TraversyMedia]

I guess i could have done that. Initially i was going to do like 298d 23h and keep on the same line so they were in spans. Then i decided to do the whole word and i left the span and changed the display but yes div would be fine

[@NathanBudd]

Ah, ok. That's good to know. I'm a it rusty with CSS, and wasn't sure if there was some kind of CSS3 or FlexBox difference.

[@nenogeen7153]

you're amazing thank you so much. would please make a video on async awite.

[@anuraghazra4772]

Hay brad it will be awesome if you can make a video on JavaScript Performance Tips And Tricks (Specially On Events Handling)... I will be very glad if you do so.

[@IamMclov1n25]

when will the react course be live on udemy?

[@Deliverant]

FULL STACK REACT course? WHENNNNNN tell me Brad !!!!!!!!!!!

[@TraversyMedia]

A month or so. Working on the app now

[@n_fan329]

its already there !! AMAZING

[@Syed-wj4pj]

@@n_fan329 is it the meetupz one?

[@UgandaFilmTalks]

hey Brad thanks for the tutorial......Am kind off topic but "How can you make List of Countries in Select-Box " Dynamically PLiz feedback needed.

[@onecarwood]

Uganda Film Talks look on GitHub

[@thySerge]

Uganda Film Talks check this - codepen.io/Simetria/pen/GxgWbr?editors=1010

[@UgandaFilmTalks]

Thanks Sergio Ribeiro

[@nsf56k]

Will the course be on udemy?

[@VideoServicesLI]

Brad, I purchased your Full Stack web dev course a few months ago, from eduonix. Is there a more up to date course on Udemy? Looking forward to the React course.

[@elatighetfaghaoubeid9463]

my first comment on KZbin "you are the best "

[@savannahbrown1]

does anybody know where to go to learn what's important to learn for wordpress.org

[@snjuro4755]

Love it

[@michaelsteiner230]

Ok great for those of you who know what emit is and how to use it for us old folk we are just left in the dust as the hand is quicker than the eye and so i will just have to type it out by hand

[@Leshgans]

Super!!!

[@seansgonewrong]

**Edit: SOLVED - I didnt set a closing in my js file when we displayed the result using countdown.innerHTML. It just threw a bunch of stuff off. *** Anyone know why display:flex isnt doing anything for me? I've tried display:inline flex width:100% as well and still no change. My countdown is remaining stacked on each other.

[@informatiquedz9800]

I love you man :)

[@neradau]

Hey, im using this code for my school task and it doenst work in IE.... Can someone please help me fixing browser capabilities?

[@dimitrisefstathiadis6562]

I have one Q: I did exactly as you said but in the Countdown, the MInutes and Seconds have Decimals. Does anyone knowhow to fix it?

[@BruceOnder]

James Read make sure you use Math.floor()

[@kadaiapak9661]

build more app with html css, and javascript or react please... or you can make a video about problem solving on javascript (sorry about my english) cheerss :)

[@connormccallum1377]

Awesome content. The only thing I struggle with is using certain properties and when to use them. Does this just come with time or am I missing something?

[@HeyAbyss]

Connor McCallum re-read your comment, it doesn't make any sense.

[@seansgonewrong]

I think understanding when to use certain properties definitely comes with experience. If youre ever curious why a certain property is used I would recommend googling it. Even if he explains why he does something, googling it will help you remember next time you need to do it.

[@roshanrajani9180]

Hey Brad, Big fan buddy. Seems like you are uploading the same kinda videos, I guess this is the 4th video with same kind of responsive page. Can you please make some videos on Paradigms and some detailed concepts on Angular JS/ Angular 2.0/4.0 and React.js too. ??

[@bogdankyuchukov2124]

You are a complete jerk. :)

[@devilmanscott]

No he's not, it's a valid and constructive criticism he's asking for different kinds of tutorial, the only one being a jerk is you, don't hero worship brings out the worse in people.

[@bogdankyuchukov2124]

There is enough content on this channel about the technologies mentioned above. People should search for it before making 'constructive' accusations. And not to mention that the videos you guys also get here are highly educational and completely free so you might as well be thankful for that :)

[@devilmanscott]

I am thankful, because I do it as-well, I also fill in the blanks for people, just check a few here in this thread, or my comments in general, but asking for something which isn't in Brad videos list isn't being a jerk, instead of admitting your overreaction you've dug deeper. Also the free argument doesn't float, TV is mostly free, we don't give them extra praise, he's being rewarded, not only with ad revenue but with sponsors. Again, stop hero worshipping, makes people do weird things.

[@bogdankyuchukov2124]

I don't praise or worship anyone and I am also glad that good KZbinr's get rewarded for their work. That's the way it should be. I am annoyed by unthankful people and by the way @Roshan Rajani expressed himself because that's how you can kill the motivation of a KZbinr who has worked on putting valuable content online. That's just being a jerk. At the end, I don't really get your point :) Like I said, I don't warship anyone but when I see someone being disrespective I will point this out.

[@nightprogrammer7474]

Hi Traversy Media , i have an idea that u should create a video , that wil help me and i think everybody a lot to they're carrier. Create a video showing us a Proffesional Project , maybe something that ur client order , show us how is ti done and help us a lot , even if it take other programming languages but explain whats going on with what ur writing too , if u could do that i would be very grateful , even if u dont i should say good job and keep the great job ur doing.

[@charlesdesbiens3233]

Why are you using 100vh instead of 100%?

[@UNIQUE_GAMINGG]

because if he uses 100%, it'll be 100% height of the section with the class "landing"...which in this case will be half page only(because % targets the area of the content).....if we use 100vh it target the entire page and not the content....hope that makes sense. try experimenting with % and vh u will understand.

[@gomo8651]

Regular follower, came to precisely see how to change responsiveness, which is something one min at the end of this video. But had to watch it all :).. And I dont regret :).. Thanks man.....By the way just run on well known bug where cant set 100vh for my body element or the main container, so dont have the footer at bottom. Its problem that exist on modile devices, regarding the vh. Apparently you have to use JS to sort it, but I wonder if someone has sorted it with just CSS. The Vh works smooth on my s8, but on the 10 inch tablet has huge gap at the bottom if is dont have enought content to fill the 10 inch vertical position position. Anyone with some idea? :)

[@boscocorrea1895]

Hey brad can you do a tutorial on progressive web app

[@saniyadchowdhury2866]

why you are so awesome buddy??? :p

[@kevinzhang8974]

I completed this tutorial few weeks back; then I checked out Brad's video for Google Map and Particals.JS ... So, I created my test app to bundle landing page (this video) + ParticialsJS + Google Map: kevinzhanglibertyville.com/cruisecomingsoon/index.html which I created to track my upcoming year-end cruise ...

[@alxndrdg8]

everything was fine. My math is not that great when it comes to programming so it was difficult to understand conversion of 'distance' to 'days: hrs: mins' around 23:45 Instead what I did for myself is, introduced a new variable called 'remaining_distance' and coded the lines as below: /* File: main.js Conversion of Distance to Hrs : Mins : Sec -- the math part see Line#14 to Line#20 of Brad's code - rewrote it for my understanding => introduced a variable called 'remaining_distance' to do intermediate calculation */ //initialize with distance calculated earlier var remaining_distance = distance; days = Math.floor( remaining_distance / (1000 * 60 * 60 * 24) ); //new remaining distance remaining_distance -= days * (1000 * 60 * 60 * 24) ; hours = Math.floor( remaining_distance / (1000 * 60 * 60) ); //new remaining distance remaining_distance -= hours * (1000 * 60 * 60) ; mins = Math.floor( remaining_distance / (1000 * 60) ); //new remaining distance remaining_distance -= mins * (1000 * 60) ; seconds = Math.floor( remaining_distance / 1000 ); /* Above is alternate to Line#14 to Line#20; Rest follow Brad's code */

[@andreyqkey8867]

Waiting for your react course

[@EfosaMichael]

Is it strange that the only thing I heard from this video was "...this is from my full stack React course I'm working on.."? After that, everything went grey.

[@pheak7ra]

Please do a turtorial on chartist.js with php

[@Tigap]

Please brad can you help me with a laptop, am really using my phone. I have tried getting one small one but I don't have the money required. Please Brad, if it an old one that more cool for me.

[@rv3263]

Can you make an project. An admin panel.

[@engsiyad]

ĐΔŘᗯʘⱢVƩᘕ he made it but it was just design.

[@devilmanscott]

Admin panels are really hard, because not only do you need to build a serviceable API, you need to make it generic so you aren't breaking the dry principle, it's one of those things you have to do the hard work.

[@joshxperia441]

Hello, i wanted to ask you how to add this coming soon page to an existing project?