HomeХобби и стильRelated VideosMore From: Drew Ryan

Full Screen Landing Page - Responsive HTML5/CSS3 Tutorial

2849 ratings | 265712 views
➢ LATEST TUTORIAL: http://bit.ly/COMPLETE-HTML-WEBSITE ➢ HTML WEBSITE TEMPLATES: http://bit.ly/html-website-templates ➢ BOOTSTRAP HTML THEME COURSE: http://bit.ly/bootstrap-html-course ➢ WEB HOSTING: http://bit.ly/put-website-online ➢ SURVEY: https://w3newbie.com/survey ➢ FACEBOOK: https://www.facebook.com/w3newbie/ ➢ TWITTER: https://twitter.com/DrewOnCue ➢ INSTAGRAM: https://www.instagram.com/drew_ryan_/ In this video we'll learn how to make a full screen responsive landing page with HTML5 & CSS3! Background Photo: https://static.pexels.com/photos/26206/pexels-photo.jpg
Html code for embedding videos on your blog
Text Comments (278)
Drew Ryan (2 months ago)
Hey guys thanks so much for liking and subscribing 😎 ➢ SEE MY LATEST HTML WEBSITE TUTORIAL: http://bit.ly/COMPLETE-HTML-WEBSITE ➢ NEW BOOTSTRAP WEBSITE UDEMY COURSE: ​http://bit.ly/advanced-bootstrap-course (94% Off Link) ➢ BOOTSTRAP 4 UDEMY COURSE: http://bit.ly/bootstrap4theme (93% Off Link)
JB music (2 days ago)
Rathish Rts (9 days ago)
good one..thank u
Nobleノーブル (24 days ago)
For some strange reason, I am unable to get my paragraph to the bottom of the slide (if you know what I mean). The step you told us to do by using the period to call the class, it didn't work for me. Possible you could help me? Thanks!
Ranjan Pai (1 month ago)
Why to use 2 div tags
Hey Hey (1 month ago)
My picture is not full screened in this case still.
Ian Kenneally (2 months ago)
absolutely great video, but misspelling breathe kind of bugged me ngl
Sigred Clxtr (2 months ago)
Thank you so much for this
Sk Rezwan (2 months ago)
omg!! can't believe its free.
Gabriel Perez (2 months ago)
so i've made two text files. one that is the .html, the other that is the .css.... where do I paste these onto my website? do they get pasted separately? together? one on top of the other? does the order matter?
Drew Ryan (2 months ago)
You can link to a css file like this where you put the css<link rel="stylesheet" type="text/css" href="css/style.css">
sara emam (3 months ago)
where paragraph ?
Drew Ryan (3 months ago)
Hi Sarah, you can use any text you want for the paragraph section.
PaperTowel (3 months ago)
How do you add multiple buttons side by side?
Drew Ryan (3 months ago)
Hey, check out this video I have where the buttons are inline next to one another: https://www.youtube.com/watch?v=9cKsq14Kfsw
Jhansen R. Machado (3 months ago)
Nicely done! I was in trouble trying to resize image i made to my website. Thank you very much.
Jon Snow (3 months ago)
My background image is only showing as a small line at the top of the page, suggestions? =(
Drew Ryan (3 months ago)
Hi Jon, I haven't seen this happen first hand but my best guess is it's coming for a height/background CSS line. May sound obvious but as long as the CSS matches the video it will work just fine.
MixaOnPC1080p (4 months ago)
My content can't set up in the middle. Why is that? I tryed everything
Mikah Palquiran (5 months ago)
is it okay even if i'm using a Notepad++?
Jhansen R. Machado (3 months ago)
Notepad++ works just fine +Drew Ryan
Drew Ryan (5 months ago)
That works!
Ria Clash (5 months ago)
How do you make the background a local jpg file without uploading it online somewhere?
Drew Ryan (5 months ago)
Hi Ria, you'll just need to add the image to the folder the website files are in and reference it in the CSS. if it's an image called "background-image.jpg" in a folder called "images" it would be "images/background-image.jpg" for example.
Miyuki Umeki (5 months ago)
super easy to follow, thanks!
Drew Ryan (5 months ago)
Thanks for watching!
Daniel Arledge (5 months ago)
I don't understand why in line 19 you specified .intro .inner but on line 25 you didn't specify .intro .inner .content....Isn't the content class within class inner and then further within class intro?
Daniel Arledge (5 months ago)
I guess I'm trying to figure out why you would put (.intro .inner) as opposed to just (.inner). Sorry if this is a stupid question...I just am trying to figure out the logic behind how to reference classes in CSS
Drew Ryan (5 months ago)
I'm not sure I understand your question entirely but with CSS you don't need to reference each class or id the class you want to target is inside of in order to style it. At least I don't, it takes too much time.
Daniel Arledge (5 months ago)
I'm very new to this and I'm attempting to learn by literally parsing through website templates. I've learned enough syntax to be dangerous but I'm more or less trying to learn structure and this explanation would be very helpful.
Jaime Rehbein (6 months ago)
Very fast development and beautiful design, thank you very much!
Drew Ryan (6 months ago)
Thanks Jaime!
KagemandenDK (6 months ago)
My <p> text is not under the picture but right under the button. Do you know how to fix that? And also my text that is meant to be on the picture dont want to go to the middle. I can only center it in the top.
Drew Ryan (6 months ago)
Hey thanks for watching! Just make sure your html tags are closed and the should separate the content just fine. For the content over the picture double check the CSS in the area of "vertical-align:middle;".
AJD (6 months ago)
This is super helpful. Thank you OP
Drew Ryan (6 months ago)
Thanks for watching!
Rym Bouchetara (6 months ago)
Again thanks a lot! It seems there's a problem with the backgrounds, even in next videos i can't find it in pexels, so guys if u need the background here it is : https://pxhere.com/fr/photo/916947
Rym Bouchetara (6 months ago)
You're welcome :D
Drew Ryan (6 months ago)
Awesome, thanks for finding this link.
Rym Bouchetara (6 months ago)
Thank you so much for your priceless tutorials!
Drew Ryan (6 months ago)
Hi Rym, thanks for watching and participating!
allthingsfreda (6 months ago)
So I have a question, I have a personal blog, will this work with any Wordpress theme? Also how easy will it be to incorporate it with a theme? Thank you
Drew Ryan (6 months ago)
Hey thanks for watching! You can always create your own Wordpress "child theme" no matter what theme you are using to make your own custom designs but a lot of themes have a full screen landing page feature to theme. This tutorial isn't meant to be plugged in to a Wordpress theme though so I can't promise it will work for you.
Charity Olubunmi Adekoya (6 months ago)
If just because of this I am subscribing. I designed mine too ,will be practicing on it again tomorrow. Thanks a lot. Lots of patience and simple steps to follow.
Drew Ryan (6 months ago)
Awesome, thanks for subscribing!
Ravi maurya (6 months ago)
how to do the same using bootstrap?
Drew Ryan (6 months ago)
Hi Ravi, Check out my latest Bootstrap Tutorial where a full screen landing page is designed: https://www.youtube.com/watch?v=Ht1F9KuhJO4&t
_fach (6 months ago)
Mayra Gomez (7 months ago)
oh man... Video about to end, and I 'm over here like..."NOOO....don't leave me don't leave me don't leave me..." LOL
xGapp (6 months ago)
The Background doesn't work. I cant get it to work and i try to skip doing a background and nothing works after that..
Drew Ryan (7 months ago)
lol thanks! :)
Rk Emon94 (7 months ago)
Background photo Link don't work.
Drew Ryan (7 months ago)
Here's another link to the original photo: http://www.jobchange2007.com/wp-content/uploads/2015/09/photo-1444021907648-1baf30e38d9e.jpg
William McEntee (7 months ago)
Thanks Drew! Great tutorial!
Drew Ryan (7 months ago)
Thanks for watching!
Patel Patelparth (8 months ago)
Create anything web site please share me
PRETTAE KOOKIE (8 months ago)
You are the most prepared YouTuber when talking about website tutorial I have ever seen. All of your tutorials are very practical and easy to follow. Big love from a new subscriber. I hope you will make a video about building comments part, which requires basic database building skill. I can’t find anything on YouTube that really works now.
Unidad Web & Graphics (9 months ago)
Thank you for your videos I am learning a lot.
Jordon Meyer (4 months ago)
I usually take the Landing Page Templates at https https://e-web.top/landing-page-templates-type/, if someone needs, please contact
Tia Maria (9 months ago)
Great work. thx.
Austin (9 months ago)
for the backdrop image, how does one center the image? i keep getting the background images top left portion instead of the centered image
okme oj (9 months ago)
Thanks man
hemali chandan (9 months ago)
Why does my background image gets blur
vuckovic zvonko (9 months ago)
This was great, I been tryin to find out about "free landing page creator online" for a while now, and I think this has helped. Have you heard people talk about - Doniden Landify Pages - (Have a quick look on google cant remember the place now ) ? Ive heard some incredible things about it and my co-worker got cool success with it.
Stephen Piro (9 months ago)
Thank you
Florencia Quiroga (9 months ago)
This was really useful! Thank you!
ashiinsane90 (10 months ago)
what if you dont want to center the button and instead just slightly above vertically?
ashiinsane90 (10 months ago)
why .content h1 why not just h1?
aseem rana (10 months ago)
send me source code on [email protected]
Larisa Suciu (11 months ago)
I cannot get the content centered, no matter what. Any idea why?
KagemandenDK (6 months ago)
I couldn't get my stuff in middle and the <pr> stuff under the picture. But for centering you can also go to your html codes and put <center> and </center> on each end of the <body> <center> <body> </body> </center>
Shareef Milligan (11 months ago)
hey I'm having trouble with my image not uploading. heres the code exactly like yours .intro { height: 100%; width: 100%; margin: auto; background: url(https://www.pexels.com/photo/architecture-buildings-business-city-325185/) no-repeat 50% 50%; display: table; top: 0; background-size: cover; }
1950Archangel (11 months ago)
This is BRILLIANT! Thanks very much -- I understood everything (well, not yet the "@media" line in the CSS -- but it's my first look at anything other than basic HTML4! You did an amazing job keeping the speed and clarity exactly right for an old HTML/CSS hand, with no knowledge of HTML5!
Thijmen Star (11 months ago)
thanks, your it was easy to follow
Ninjalol64 (11 months ago)
hey bro, useful vid but plz reply the dimensions of your background pic, thx
Austin Gruhn (11 months ago)
what are you using for the smaller scaling to show the phones size on?
Ahmed Hameed (11 months ago)
always use image link from localhost (your pc) for test, beacuse some ppl just copy and past, so they will learn more about links
Jhon Dale Beniales (1 year ago)
Thank! very helpful!
Sha Def (1 year ago)
I love how beginner friendly your videos are! I have learned a ton, thank you.
Cheez Wheez (1 year ago)
I did everything on the video but still the "Get Started" text doesn't go in the middle. Can somebody help me?
Sanjeev Lamba (1 year ago)
sir can i get this html code
Alex de Jong (1 year ago)
Hi, thank you for sharing your skills mate, one question please, everything works but, in your video you have the text breath easy and your button in the middle of the web-site, in my web-site its in the middle, but not from top to down only in the middle from left and right, i done everything the same in your video, except the pic. the text is a little bit more in top how cane i make this ok??
ADESHPAUL SINGH Gill (1 year ago)
Add below line in: .intro background-position: center center;
Derek Coulahan (1 year ago)
great video, image not available unfortunately
Marco (1 year ago)
I'm finding it difficult to add a menu bar at the top of the page now the text is centred. Am I doing something wrong?
Sumit Aryan (1 year ago)
great video
chandra sekhar (1 year ago)
Hi Drew Ryan Nice Landing page tutorial .Thanks for that. But i am facing a problem with background image in CSS Property that used in Css( background-image: URL(/img/pexels-photo.jpg) no-repeat 50% 50%;) i am not able to see image on html page plz resolve my problem
Mrsonicthunder (1 year ago)
I see you have 30 fans on the down likes...hahaha this was a great video forget them
avocadoras (1 year ago)
how come the background image is not resposive? sorry I'm new and dont know if that's also supposed to be resposinve
A\ex (1 year ago)
Thanks Ryan! Cool stuff
Obet Creations (1 year ago)
Hey drew! I followed your procedures and it works like a charm. just one question how did you open your code on a phone sized browser?
Stefan Eben (1 year ago)
For some reason I can't get any padding on the "Get Started" button, even though I followed your tutorial to the T.
Cyrill (1 year ago)
Try it like this: padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px; worked for me ^^
郭甜心 (1 year ago)
Your voice is so chill ;) great video for the beginners, thanks xxxxx
Colorful Codes (1 year ago)
How am I so late with finding this stuff? Thank you.
b1g shawn (1 year ago)
Argha Basu (1 year ago)
hey help,,, background url image is not showing in browser???
Help Me God (1 year ago)
The image has been removed by the host, you'll have to use a different image.
John Garcia (1 year ago)
Great video. Make unlimited html landing without knowing any html code by using Foxstar. Here included 50+ pre-made landing page template. You can easily customized by html page builder. Check now: http://bit.ly/foxstar2018 Thanks!
TECH CREATER (1 year ago)
nice video but sir i want be when click on get started that screen will slid up ans show menu bar
Carla Gonçalves (1 year ago)
first sound effect name please?
Crundee MC (1 year ago)
any suggest of a cool background image like that? thx
Mario Mcmeans (1 year ago)
Rony Ahmed (1 year ago)
great video .I made a bunch of landing pages.I have learned many new things from this video . https://goo.gl/Ec7EYC
PiggyMan (1 year ago)
i cant link my css to my html pleasee help i tried sooo much things but nothing is working
Brunol Alpachino (1 year ago)
i also had such problems with my pycharm but i figured it out its quite simple
PiggyMan (1 year ago)
Brunol Alpachino atom
Brunol Alpachino (1 year ago)
what editor you using
PiggyMan (1 year ago)
Crundee MC thanks bro i already linked it
Crundee MC (1 year ago)
make sure you put your html file and css file in the same folder and do: <link rel="stylesheet" type="text/css" href="*name*.css">
Al-Qamar Group (1 year ago)
DrewWorldOrder (1 year ago)
I’m using a different link from the same website. I have everything entered the exact same (except the link of course) and the picture isn’t showing up
DrewWorldOrder (1 year ago)
Fixed it
Syed Moinuddin (1 year ago)
remove the ads to get a like😛
Help Me God (1 year ago)
"Stop making money to get a like"
Mike Wakelyn (1 year ago)
Image wasnt working at first but looks DELICIOUS now! Nice vid. Subbed.
Fischhändler (1 year ago)
gj boy! :)
Shane Kidson (1 year ago)
Easy-To-Use Drag and Drop Software Creates All Your Landing Pages In Mere Minutes... Without Expensive Fees! https://tinyurl.com/y9zgwnra
Stefan Clarke (1 year ago)
I had an image problem. Since the link has been removed, i decided i would save an image in a folder and tried to link the css to that and i swear its done correctly yet nothing happens. Folder structure: (file)html -> (folder) = css file(s) -> (folder) = image(s) so my code to link a css file out of the folder, into a new folder, and select an image should be sommet like: background: url(../images/picture.jpg) no-repeat 50% 50%; this correct?
Stefan Clarke (1 year ago)
i decided to start from scratch and somehow made it work - even though its the same code. Believe i was just missing ' ' within the url. background-image: linear-gradient (rgba(0,0,0,0.2), rgba(0,0,0,0.2)) , url('../images/showcase.jpg');
Mike Wakelyn (1 year ago)
Same here!
Mustafa Tas (1 year ago)
Very muc thenk yuu
Mufidul islam tapadar (1 year ago)
Thank you so much, let see some good stuff here https://goo.gl/Xraq8Z
Sanja Sanjic (1 year ago)
Cheers for this, been searching for "making a good landing page" for a while now, and I think this has helped. Have you heard people talk about - Wanmila Splendid Simplification - (should be on google have a look ) ? Ive heard some incredible things about it and my neighbour got excellent results with it.
Non stop funny (1 year ago)
Winner of a video, I been tryin to find out about "landing page creation software" for a while now, and I think this has helped. You ever tried - Wanmila Splendid Simplification - (do a google search ) ? Ive heard some super things about it and my work buddy got excellent success with it.
Stalker 1 (1 year ago)
This is glorious, been searching for "landing page перевод" for a while now, and I think this has helped. Ever heard of - Wanmila Splendid Simplification - (should be on google have a look ) ? Ive heard some amazing things about it and my brother in law got cool results with it.
ZoommaiR (1 year ago)
I've referenced this video at least a few times already. Thanks bro! Subbed.
Dapper Owl812 (1 year ago)
Great tutorial! Do you know that says Breath Easy instead of Breathe Easy? LOL
Ahmad Al Alwani (1 year ago)
you need to explain each and every step you're doing there buddy
Nikolai Nacianceno (1 year ago)
im just asking what editor did you use
TCC Graphic Design (11 months ago)
Nikolai Nacianceno he used Sublime text editor but he said you could use Brackets or any other
Nafana Nafana (1 year ago)
Think he said he uses sublime text editor, can't recall for sure.
Madalina Tanase (1 year ago)
Hey, thank you for the video :) the image isn't working for me - even if i click on the link in the description - would this work with any other jpg / png image? Thank you!
Quang Hong (BON BON) (1 year ago)
u save my life ! thanks for blessing m e with this video so I can work on my hw !
westfield90 (1 year ago)
mohamed amine Badji (1 year ago)
This is just superb, I've been looking for "one page landing page" for a while now, and I think this has helped. You ever tried - Fanadeey Controller Excellence - (do a search on google ) ? Ive heard some unbelievable things about it and my work buddy got cool success with it.
iroka alaa (1 year ago)
Cheers for this, been searching for "how to create a landing page for free" for a while now, and I think this has helped. Have you heard people talk about - Fanadeey Controller Excellence - (do a google search ) ? Ive heard some unbelievable things about it and my partner got great results with it.
InfiniteWorkers (1 year ago)
Just wonderful, I been tryin to find out about "landing page html template" for a while now, and I think this has helped. Ever heard of - Fanadeey Controller Excellence - (do a search on google ) ? Ive heard some decent things about it and my cousin got cool success with it.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.