Easy Fullscreen Landing Page With HTML & CSS

[@kevinerose]

Traversy Media is the best at explaining programming concepts. Most of the time and experienced programmer is likely to forget the small details we need to know. Not so with Traversy. This is hands down the best at explaining concepts and covering all the details and very well spoken.

[@nastrustfundug]

You are matched to none Traversy, I really appreciate your clarity, briefness, and straight to the point exploretion... this video has been massive.

[@sugihartobangsawan]

this is clearly why you have so many haters out there pal , they simply can't match your video quality and teaching skill. keep up the good content , love from indonesia.

[@TraversyMedia]

Thanks man, I appreciate that

[@muvidadyah492]

betul itu

[@vincesanchez7790]

On the header tag ,Can i change that to div class or id?

[@kevintandian6257]

Indonesia unite!

[@gabrielsales7402]

Why does he have so many haters? What do the haters say about him?

[@aleshiamichelle2527]

This is the first landing page tutorial I have completed from start to finish. As a newbie to the world of web development I say " Thank-You" very much!

[@robertzoufood]

Yeah he makes it seem very and easy. Andwhen you do it, it IS EASY.

[@aayushanand278]

I am a big fan of yours , I am in 8th class and am designing so beautiful websites , just because of you ..... I have also won lot of awards in html...and too represented our state in competition. Thank you from bottom of my heart☺️☺️☺️☺️ love from India....

[@TraversyMedia]

The main focus here is the showcase image header area but I would love to see you guys take this and keep going and turn it into a real website. I will approve any links to your work. Little homework assignment :)

[@odunladeoluwaseun7880]

challenge taken.

[@odunladeoluwaseun7880]

I used to think VH unit is actually an Indian way of writing em! I never tried it once. lol

[@shivamgupta2842]

I need explanation for why you think its Indian way of writing em

[@juanrebolledo8123]

Joe Prabawa Hey, man. awesome job. One quick question though. How did you achieve that letter spacing in the " experience the best of bali with us"

[@tkdevlop]

awesome man

[@princechuks7149]

Thanks alot Brad, i am a better developer today because of your tutorials, i started 7months ago and i'm now earning money from designing websites for small businesses. Long Live Traversy Media

[@thefruitofaliens]

It looks like he recorded the tutorial at normal speed, and then slowed down the final input. That was a really good idea. I'm subscribing just for that.

[@arielletann7416]

For the longest time I was trying to figure out a way to fill the screen with an image. Your tutorial was the key. It was awesome and so easy to follow. Thank you so much!

[@19jewels95]

This video is actually perfect. The ideal sort of tutorial, showing how to code the product as well as an explanation for why each element is added. THANK YOU.

[@ArushaShahi]

Whenever i feel like to do something new, i get notified by travery media for a new tutorial. Thankyou very much for keeping us motivated!!!

[@mentoriii3475]

oj Arush bre

[@BipinOli90]

I am pretty comfortable with backend stuffs but design and css was never my forte. No matter how function rich site i made. No matter how algorithmically optimized site i made, it was always a ugly looking crap. But now with your videos i am beginning to grasp the design aspect of things. First time in my life i am gaining confidence using css. Thank you very much Traversy Media. Good Bless you my man.

[@bebesluckyhuman8327]

I just ran through this video for a second time to work on some concepts that just weren't sticking for me. Thank you again for your work. I became a basic patreon and as soon as I working again I will upgrade. Thanks

[@RunOs3]

I have been trying to figure out how to make a page like this for while now. Thank you so much for taking the time, Brad. It's much appreciated.

[@mk_games_official]

Brad you have best tutorials on YT. By curiosity I tried to find something else on YT but mostly hindi channels just killing me. Glad we have you!

[@muhammadkijera76]

:)

[@ahmedalghamdi5253]

This is my first time seeing HTML and the practicality of you making that page and explaining had made things soooo clear! Thank you for sharing this ❤️

[@rahxephon76]

Another flawless vid. Thanks Brad. If u ever running for president, u got my vote.

[@NabhoneelMajumdar]

I used to struggle with centering divs within divs. I reckoned that this video might help. I'll never stop being grateful for your videos, Brad. Thanks a lot! :D

[@alokranjan476]

Thanks, Brad. I have done Frontend Web Development for quite of time, but after watching your video, it seems I have to fill up many gaps. Thanks again.

[@monixmmm]

I am only learning HTML and CSS and your tutorials are brilliant!! Thank you!

[@christopherrecinos2988]

CSS has always been my weakness and I was actually just getting around to working on the landing page for the application I'm designing. Thanks to this tutorial and the skeletoncss tutorial it's starting to turn out alright. A bit more styling it'll be great to go. Thanks for everything!

[@noraizsardar]

you probably don't know this, but man you're Magician!

[@metanoia1122]

Thank you so much. You are a fabulous teacher. There are so many great features to this tutorial. To name just a few: the explanation is clear; the pace is just right; and the example is great. I also like the placement and size of your "talking head" box because it allows students to have a good view of the code but still be able to see you. Thank you again.

[@prateeksharma242]

A Huge Thanks for making this video.....the guys out there don't explain their code and then nothing goes into my head!!!!!!!!! But you were different from the rest!!!!! So thanks a lotttt once again🤘🤘🤘🤘🤘

[@arturobm1073]

So the solution to my week of struggling was just changing "min-width: 100%" to "min-width: 100vh"? This is crazy. You solved my problem, I owe you a beer

[@firstevidentenigma]

Every video is absolutely top notch, university-level goodness.

[@mirzasisic]

When I make small break when learning to code, these html/css tutorials always come in handy, thanks man!

[@Chartisttrader]

Kinda simple you said. lol If it was simple, I wouldn't be here. Thanks for taking the time to do this tutorials. Really, really helpful.

[@aryyzjfroxirisrirod]

so calm, so humble, so professional Thanks, i learn alot from you

[@martins-ecke]

Your tutorials are freaking awesome! gonna name my first child Brad ... no matter what gender it's going to be (=

[@TraversyMedia]

haha! Thanks. For your kids sake I hope i't a boy :)

[@georgeliss4015]

first name: Brad middle name: DevTips those two guys are gods of WebDev/Design!!!

[@TraversyMedia]

One of my favorite channels as well. Devtips and newboston are awesome and both are not making videos. Good for business bad for enjoyment :)

[@nero008]

Are you thinking to switch to VS Code ? Its really fast and lighter that Atom !

[@caybokotze]

Nero Das thing is. With VS code its harder to incorporate plugins like emmet. I use both because they are both awesome.

[@aswadali7547]

Thanks, you're one of the best teachers out there. Love from Pakistan.

[@mikemike5732]

awesome broooo!i started coding one month ago!!!with this tutorial i understand the display:flex; Thnxx a lot!!!!

[@babyzest6073]

bro so much better than like the way some of the courses ive taken! ur a legend keep it up! thankyou so much !

[@reford78]

I love your content as a beginner, just watching the videos have helped so much

[@urosjovanovic3142]

THE best tutorials on THE WEB!!!

[@michawilk9985]

Short, understandable and nice looking. You're doing a grat job Brad. Keep on going !

[@aarontooters]

Highly recommended! Thank you Traversy Media!

[@AyyyJayyyEss]

Glad I found your channel. This is very helpful. Also, if any of you would like to know how to stack the 3 boxes in section-c, you can use @media like this: @media screen and (max-width:680px) { #section-c { display:block; width:100%; } } Of course you could put any value where I put "680px".

[@shivamgupta2842]

congratz brad, you are everywhere from youtube to udemy to eduonix

[@TraversyMedia]

Thanks man. That's the plan, take over the world....j/k :)

[@Zaybone14]

Favorite channels on KZbin: Brad Traversy for coding TheRadBrad for gaming

[@kelvinnwaoyo7362]

Oh, and thank you so much Brad for setting me on my way to becoming a dev!

[@puterablog881220]

i watching all many videos tutorial but i only understand you video only...you r great man... i like you video...

[@tbnaeem93]

I love you man, that 100vh saved me so much head ache!

[@tooomaaa4803]

I am from Poland and I must admit that you are doing a great job. By the way, I improve my English ;) Thanks

[@newokosh]

i truly love your tutorials you love what you do not forgetting me

[@munikeyakubu6006]

You are the G.O.A.T in Tutoring preciate you!

[@alejandrotorres8360]

Great video with excellent explanation and why you did things certain ways. Keep up the great stuff.

[@jrdev4life973]

Thanks for all of your great content. Thanks for flex content. I added @media(max-width: 580px){ #section-c{ flex-direction: column; } } for mobile devices. thanks for all of your time Brad

[@TheGhostRider2]

I love ur videos brad , i just press like before i even watch the video

[@arctic_frost1]

I'm a self tough css/html designer and I really enjoyed this tutorial to help me out with the background vh. I was use vh and vw but the scroll bars were appearing. Thank you for the help. Also was really intrigued by the flexboxes and will be looking at your 20 min intro to flexbox

[@Keepcalmandweewee]

Thank you for this explanation how to make it flex and fullscreen in the same time!

[@oaxaquita03]

Thanks man you are great. Sometimes the simpler the better.

[@TraversyMedia]

Yes what Ive noticed is I tend to loose a lot of people with the more advanced stuff. I get more views with videos like this. But then again my advanced programmers feel left out. It's a tricky balance :) I do my best

[@crocodilecrox3758]

Brad i appreciate both. Right now im doing an app for my diploma so i needed your mean stack till part 5 for my backend. Really great! HELPED ME A TON :D

[@argeelearner3978]

Thanks for having all of us "newbies" in mind.

[@YabbaDadADo]

I'll definitely be signing up to your patron account. Great content as always and a really nice guy!

[@doublem8135]

Keep up the good work traversy. Your explanations as you code away make all the difference👌

[@Colstonewall]

Awesome, Brad! One thing I hadn't noticed with Flexbox, is things such as justify-content and align-items change directions of influence when you go from flex-row to flex-column. I had done another project w/Flexbox and had used mainly flex-row direction and noticed that in my project align-items pushed things horizontally and in your project it pushed things vertically. Same with justify-content.

[@u76-f4u]

Very good tutorial. Clear and easy to understand. Very useful. Thank you.

[@muchimi]

thanks so much for all of this! shared and liked on facebook and linkedin

[@josecoverlessons]

This is really cool im very thankful! Ill put you in my list of people do donate to once I land a full time position

[@whynotgetupandrave]

Yet again, another awesome video!! One of your early videos made me decide to pursue a career in web development 👐

[@mohamedsheik1905]

I am watching this 2021 and I found it very informative. Thanks

[@echo_then_void]

This helped me tremendously thank you. Liked and followed.

[@ngrok0100]

Thanks to you man, now i can progress. Awesome teaching

[@angelicagabrieli7169]

You rock Brad!!! Love your videos!

[@valentinneufeld6182]

Thank you, I'm just starting and this video is helping me a lot.

[@TrangLe-dp8jf]

I love your lecture. Very realistic and easy to understand.

[@Chuby_ubesie]

This was awesome. Really needed it. Lovely work bro

[@Algebrodadio]

Brad - this was super helpful. Thanks man.

[@davidjohnmorse]

Another awesome tutorial with Brad! Keep churning it out - wow 467 likes on the same day it was published!

[@TraversyMedia]

You guys have been super supportive making my channel fly past just about any other dev channel :) thank you!

[@kevinzhang8974]

thank you for such nice and practical example ... I am applying this to a real small project ...

[@WillKriski]

These are really great, as a non designer person who hates CSS.

[@russelldriver6394]

As always When I need a solution, you have an answer, thanks for all your video's, a true legend ! :)

[@LarsRyeJeppesen]

Great video. A suggestion for further improvement: Add srcset for the background image so you can serve different images depending on resolution and orientation. Example: background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );

[@lemueljunior]

Dude, I love your videos! You always make all the process look more simple than it is haha. Thanks for sharing this with us =)

[@jenglish1986]

Your content is wicked awesome. I really like the deliver - No BS straight up info. Kudos dude hope all good things happen for you because you are so on point!!

[@imaddinamsif]

I do not know why you don't do a complete course about node js. I watched your fourth or five videos about node js, but i wish you continued with your section about nodejs. Thank you for share your knowledges.

[@keithh4797]

Finish building my version and this will be my template. Thanks Brad!

[@margaretnjoki3598]

Great Video. Just what I was looking for. Thank you.

[@crocodilecrox3758]

First like then watch! Idk where u get the topics from but ive stept on many of em while doing my first few projects :D Thanks brad

[@whomakesdabeats]

incredible video. so helpful.... really helped me make a beautiful landing page.

[@pjmofperk]

Thank you Brad. Great video to code along too. It filled a lot of gaps that I was missing. Thank you for including the source code.

[@alxndrdg8]

Good example. Simple on content but covered a lot on CSS tricks.

[@gabimuresan9188]

Thanks Brad for sharing this project.It was so easy to follow.👍😀

[@jellybean3544]

thank you! I am new to this, and you explain it so nicely, that it makes it easier to learn. Thank you again.

[@sankyeat]

I love this front end stuff. Your stuff is great!

[@johnnygutierrez6617]

Awesome! Love the way you explain! 👏🏻

[@moosword5322]

Thank you so much for the tutorial! your're tutorials are a great help in understanding css styling!

[@ivmilicevic]

Just commenting to say thanks, your content is amazing. Keep up good work

[@lemueljunior]

Nice basic and simple project to learn a lot of useful stuff for responsive front-end. Thanks for taking your time to do this =)

[@FlashStarGaming]

Clean and concise tutorials. Love it.

[@kendo4165]

Thank you for the video! It's nice seeing what can be done with just HTML and CSS!

[@memontaser]

I have started loving your teaching process :) Its much more helpful. I need to create a modal and inside the modal need to put datepicker.

[@HASSANMUSTAFAhass797]

I learn a lot from your channel, So thanks

[@TrendForJesus]

Like your video and your videos so useful for my class... Thankyou brother

[@1bmxam]

Your videos are the bees knees

[@britishsushi]

Thank you so much for these tutorials! They really, really help.

[@chimpionboy]

Thanks Brad this is a really beautiful task.

[@WorldRenounced]

Thanks so much for this tutorial, straight to the point. Subscribed!

[@carlocruz9209]

bro thanks for this and to your other tutorials!! ur way better than my prof's lol

[@elpe8043]

Great project, I've enjoyed it! Nice appetizer of flexbox ;)

[@misterjaypeasmith]

I'm just gonna go ahead and like this off the bat 🙌🏾