How To Create a Landing Page in HTML: In this small project I will show you how to create a simple HTML/CSS landing page with a fullscreen image in the background OR How To Create a Landing Page in HTML. We will also use a little bit of flexbox styling.
How To Create a Landing Page in HTML: we’re going to be creating a landing page with a full-screen image background. now this is something that stumps a lot of new developers and new designers is how to get it so that no matter how the browser has sized the image the background image stays full width and full height
We’re going to start by grabbing the image now. of course, you can use whatever image you want the one that, I’m using is this Beach image from pixels comm which is a fantastic site for free stock photography very high-quality images and you have different sizes to choose from this is the URL for this image. if you want this one and I’m grabbing the large which is the nineteen twenty by twelve eighty, so let’s click download and we’re going to save this to the project folder that, I’ve already created called beach landing. How To Create a Landing Page in HTML learn more.
okay, there’s nothing in it right now, so I’m going to create a new folder in there called IMG that’s for our images and we’re going to save this file as showcase dot JPEG all right. so now that we’ve done that because you have downloaded it a couple of times, now that we’ve done that, I’m going to open up atom which is the text editor, I’m using which opened on the wrong screen all right. you can see over here I have my beach landing folder with our image folder. How To Create a Landing Page in HTML learn more.
So there are a few other things, we need to create here of course. we need an HTML file, so we’re going to create index dot HTML and then we’re going to need a place for our CSS file. so let’s create a folder called CSS and inside there we’ll create a file called style dot CSS and that should be it as far as I’m the structure. so let’s go to the index.html and we need to generate some head and body tags standard HTML document structure now I’m using a plug-in called Emmet, which is incredible it allows us to quickly add HTML and CSS abbreviations I just did a tutorial on it I think two articles back. How To Create a Landing Page in HTML learn more.
so you guys may want to check that out, but that allows us to do exclamation and then tab and it generates our structure for us gives us head body tags HTML tags also gives us a viewport for responsiveness. so very handy plugin and I’d highly recommend it, so let’s go ahead and just change the title, I’m going to call it the beach and we’re going to have to link our CSS files. so we’re going to put in a link tag here, so that’s going to be CSS slash style dot CSS, and then we’re going to go into the body now the main image showcase area I’m going to put in a header tag alright so I’m going to say header and we’re going to give this an ID of showcase ok now I can do this here because I’m using Emmet. How To Create a Landing Page in HTML learn more.
so I can say header and then we want an ID of showcase and then hit tab and that’s what it’ll give us all right, so in this header, we’re going to have a couple of things we’re going to have an h1, so when the h1 I’m just going to say welcome to the beach and then we’re going to have a paragraph and I’m going to generate some text here, so I’m using Emmet. so I can say lorem 15 tabs that will give us 15 words some sample text again, if you’re not using Emma just go ahead and type you know put whatever you want in here, so let’s go ahead and put and create a link that’s going to be styled as a button. How To Create a Landing Page in HTML learn more.
so it’s going to be a tag, I’m going to give it a class of buttons alright and it’s not going to go anywhere we’ll just put a hash in there, and then for the text, we’ll say read more all right. so that takes care of our header now I’m going to save this and I’m using a plug-in called atom live server which will allow us to open up this directory on my localhost and a browser of course you don’t need that you can simply open up your index.html file but I’m going to go ahead and say start server and it’s going to open it up in the browser and this is what it’s going to look like. How To Create a Landing Page in HTML learn more.
How To Create a Landing Page in HTML Full Tips
so far alright now what I’m going to do, I’m going to hold off on the rest of the HTML the sections below it, because I want to focus on this part of it the showcase image. so we’ll hop back into the atom and we’re going to go to our CSS, all right. so let’s add some stuff for the body okay, so for the body we’re going to zero out the margin. so there’s no spacing around it you know what let me open let me split the screen here yeah well just I guess, I guess that’s good. How To Create a Landing Page in HTML learn more.
so margin and this is all the load, by the way, this atom live server as soon as I save this will update. so we got rid of the margin around the body let’s go ahead and change the font because I don’t want Times New Roman it’s very ugly. I’m going to say font family, I’m going to use Emmet and just say F, F font-family. a tab and that will give us Arial with a backup of Helvetica and sans-serif save that and you’ll see the font changes alright. so let’s change the size of the font I want it to be a little bigger than the default. How To Create a Landing Page in HTML learn more.
so we’ll say font size and I’m going to set it to 17 pixels alright and then we’re also going to change the color to a brownish color which is the hexadecimal value of nine two six two three nine all right and then we’re just going to set the line-height the default line-height 21.6 and save alright, so that’s the styles for the body, now we’re going to work on the image the showcase area remember, we gave the header an idea, of the showcase. so we’re going to use that and we want to give it the background image. How To Create a Landing Page in HTML learn more.
background image and then URL okay, so the URL it’s going to be dot slash because we want to go outside of our CSS file and then into the image folder. so into IMG and then showcase dot jpg now what this has done is it’s given aback it’s given the image background to the showcase header, but it’s only taking up the amount of the actual content which is the h1 the paragraph and the link so what we want is it to take up the entire thing now when you’re starting you may think that you can just say height 100% like that, but what that’s going to do is it’s not going to change anything because it’s taking up a hundred percent of its content all right.
now we could also set it to a fixed pixel-like, if we said 800 pixels and save that we’ll make it 800 pixels high which is okay. if your browser is always going to be at that that 800-pixel mark which it’s not you know a lot of people are going to view your, your content your website on different devices different browsers different sizes. so that’s not going to work either, so what we want to use is we want to use the VH CSS unit. so if we look up CSS units you know we have pixels we have percentages we have points what we want is VH and this stands for viewport height okay so this is the main secret of what we’re doing here and the viewport height what you can think of is the whole viewport which is the body of this browser here think of it as a hundred slices across okay and
then you can fill it you can fill whatever amount of slices that you want, so we want it to cover the entire thing, so we want a hundred viewport Heights. so we’re going to set it to 100 VH and save and now it’s at 100 by the way. the space you’re seeing up here is just from the margin from the heading okay by default. you know what I’ll do is I’ll just zero out all the margin and padding by using an asterisk right here okay. so this is actually, called a reset we’re going to set margin zero and padding zero by default there we go alright.
so we have a hundred VH now if we wanted to take up half the size we could do fifty VH and save and you’ll see it takes up those fifty slices of the hundred slices available and you can do V W as well you can do it with wise, but we’re going to stick with just the VH now as it is the image is taking up the full window but we can’t see the whole image we’re just seeing a piece of it. so we want to add a couple of extra things here we want to add a background-size property.
so I’m going to go right here and say background-size and we’re going to set that to cover okay and then we also want to set the position I want to Center the image, so we’re going to set background-position and we’re going to set it to Center alright. so now let’s go ahead and save it and there we go, so now if I go ahead and I resize this you’ll see that it’s a hundred it’s going to be a hundred viewport Heights now. if I add some content below it under the header let’s put in a section I’m going to give it an ID of section – an alright and then we’ll just put let’s put some content will say lorem 100 tab
and, let’s put that in the paragraph, so lorem 100 tabs save and now even though I have some content in there we have to scroll down to see it because the image the header takes up a hundred viewport Heights alright. so that’s the main ingredient in creating this full-screen landing page now, I don’t want to just stop here and leave you with this even though. we’ve covered the viewport height. so we’re going to continue to style this now this text and this content I want to be in the middle where there are a few things, you could do you could add you know padding to the top you could Center it.
but we’re going to use flexbox which makes it easy to align things and is the recommended way to do things like this at least recommended by me. so we’re going to set the showcase to display flex which makes it a flex container as soon as we do that it’s going to take all the content within it all you know, we have the h1 the paragraph, and the link and it’s going to align them horizontally as flex items okay, now there are different properties. we can use it here to change the layout and I don’t want it to go across like this I want to go down. so we’re,
so the default is a flex row but we want to change it to a column and we can do that by saying flex-direction and we’re going to set it to column and we’ll save that and now it’s going to go you know vertically instead of horizontally, now I want to set it to the center I wanted to I want to align to the center both horizontally and I want it in the middle here okay vertically. so there are two properties we need to add here one is to justify-content and we want to justify it to the center.
if we save that that’s going to move it down to the middle and then we want to align it to the center as well, so we’ll say a line content center and save, I’m sorry not online content Hawaiian items and save and now it’s in the middle, okay and I do again I have a flexbox in 20 minutes article that you may want to watch a few if you want to learn more about flexbox. so I’m also going to just add a little bit of padding on the sides here because when the window gets small, you’ll see that the text is right up against it.
so let’s go ahead and just say padding you’ll say zero top and bottom and then 20 on the left and right okay that way when the screen is really small it has some space on the sides. so now let’s take care of this stuff in the middle. so we’ll start with the h1 I’m going to make it a little bigger, so let’s go over here and say showcase h1 and I’m going to set the font size to 50 pixels okay. so make it bigger and then I’m going to set a margin-bottom well we don’t need the margin-bottom I initially was I was going to do that because. I didn’t have this reset up here at first but, I’m just going to leave the reset alright and
what that reset does again is just taken away the margin and padding from all elements on the page, because by default h1 and paragraphs have default margins. so that’s just going to remove it, so for the paragraph, I want to make that a showcase paragraph and I just want to make the font a little bigger on that, so we’re going to say font size and we’re going to set that to 20 pixels all right, and then for the button or it’s a link formatted as a button.
so showcase remember we gave it a class of button, so for that, we’re going to change the font size to font size to 18 pixels and we’re going to take the underline off, so text-decoration we’re going to set that to none we’re going to change the color to that brown color which is this right here this hexadecimal value okay. we’re also going to add a border around it if I save it, so far it’s going to look like that but let’s go ahead and add a border, the border is also going to be that brownish color.
so just grab that we’ll say one pixel solid we also want some padding, so padding is going to be 10 pixels talking bottom 20 left and right, and then let’s make it a little rounded. so we’ll safe order radius we’ll set that to 10 pixels and save and there’s our button all right, now we’re going to have to push it down a little bit. so what I’m going to do is add a margin-top of let’s try 10 pixels let’s do strike 20 all right. so that’s good now when I go when I make this smaller you’ll see that it kind of messes up that’s because we need to add a text-align: center – to the items in the showcase as well.
so right under a line-item Center let’s do text-align: center there we go all right, now the line height for the heading and see when it breaks into two lines, I want this a little smaller. so what I’m going to do is in the h1 I’m going to set the line-height line-height we’ll set that to one point to save and that looks a little better all right. so that’s the showcase that’s yeah that’s the whole showcase now what I want to do we want to take care of the button: hover, I wanted to have an effect where the background turns brown.
so real quick let’s just say the showcase class button on its hover State we want to add a background of this color here and we want to make the color of the text white okay. so now we have that hover effect all right, so the showcase is done now let’s move on to the sections, I’m going to go back to the HTML let’s just make this a little bigger all right and we have our section here and we’re going to have a section B as well. so I’ll just copy this whole thing and we’ll go ahead and paste that in and we’ll change this to Section B and then we’re going to have a section C, section C is going to have three divs within it so let’s say section ID will be a section – C
and then in here, we’re going to have a div with the class of box 1, and let’s put alarm we’ll put 20 words in here, and yeah. so let’s copy that we’re going to have box 1 box 2 in box 3 alright. so if we save it this is what it’s going to look like by default just a bunch of mess so let’s go back to our CSS and let’s see we’re going to add some padding too, we’re going to start with section a, so ID section we’re going to add 20 pixels padding okay. so 20 pixels padding let’s add a background of the brown color now we can’t see any text because the text color by default is that brown color.
so we’re going to go ahead and just change the color to white all right and then let’s just text-align: center all right there, we go now for section B. I’m just going to copy this, so section B again will have 20 pixels padding but the background, we’re going to say the background is going to be very light gray. so f4 three times and then the color is going to be the brown color which is the default. so we don’t need a color all right. so let’s save that and there we go and then for section C I want these three divs to be aligned horizontally. so we’re going to turn them into Flex items.
so we’re going to say I D section C we want to display as flex okay once they save that you’ll see that they’ll automatically align horizontally, so what I want to do is each the first and the last box one in box 3 I want those to have a dark background, I’m going to put a – box – one two and three all right. so let’s say we want to take section C and we want the class of Box one okay. we also want Section C, the class of box three that actually should have a dash there okay.
so one in three and we want the background to be the brown color. so I’m going to grab that base that in and scroll down we’ll also need to make the color white okay let’s add some padding to each of these divs here, so I’m going to say section let’s say section C, div, and say padding 20 pixels, okay, there we go now the middle one, here you could leave it at white. if you want but I had it at a slightly lighter gray than this gray.
so what I’ll do is grab that and let’s do box two and we’ll set the background to f9 three times get rid of the white coloring save and now it’s light gray and it’s a little lighter than this one alright. so that looks good guys, I think that’s it yeah. so let’s just you know make this a little bigger, see how it looks good so let’s change the height and notice that that the image is going to stay in the background, no matter what size until we scroll down on mobile devices it’ll look like this which looks pretty good.
so that’s it hopefully you guys enjoyed this project and I know it was kind of simple but I think you know a lot of you guys seem to like this kind of front-end projects with CSS and HTML and stuff I try to keep my content very diverse you know, I think the other day we did an ionic 3 mobile app and now we’re doing you know CSS landing pages. so expect things to you know be pretty diverse I want to kind of you know reach everybody. so that’s it guys please subscribe please you know leave a like follow me on social media you know support Patreon whatever you guys can do is fine or just watch the tutorial.
How To Create a Landing Page HTML and CSS code
Create the basic structure.
Create a navigation bar.
Stick the navbar to the top of the screen.
Create a great background.
Add some style.
The first thing you need to create a landing page in HTML is a text editor since both HTML and CSS are written in plain text.
One option is opening Notepad for Windows or TextEdit for Mac but if you want to streamline the process open your WordPress site, log in and use the Custom HTML Block function. You can also click on a specific block in your WordPress editor, click on the three dots and then select Edit as HTML. If you want complete control over your HTML elements, start by editing a page or post, then click on the three dots in the top-right corner of the editor and select Code Editor.
No matter which method you choose, you’ll want to include some basic elements:
A heading using the <h1> tag at the top of your page
Some text using the <p> to define paragraphs and CSS styles for color and font
The <input> tag to create form fields where visitors can enter their name and contact information
Links using the <a> tag that lets visitors download or access content once they’ve provided their contact details.
To build an HTML landing page from the ground up, your best bet is using a simple HTML framework like MDB — the Material Design for Bootstrap — available in both free and professional versions.
Once you’ve downloaded and unzipped the MBD package you’re ready to get started on your first landing page, which needs five key elements: Basic structure, a navigation bar, a navbar class, a full-page background, and some CSS stylesheets.
In practice, this lets you create a quick description on your landing page, include links to forms or sign-up sheets and design something visitors want to look at. Let’s break down each step.
1. Create the basic structure.
Start by opening the index.html file in your project folder — this is typically where you’ve unzipped the MDB or other HTML editor package — and paste this code underneath the <body> tag:
How To Create a Landing Page in HTML Main Navigation Bar
2. How To Create a Landing Page in HTML Create a navigation bar.
Paste this code between the opening <header> tags:
<nav class=”navbar navbar-expand-lg navbar-dark primary-color”>
<!– Navbar brand –>
<a class=”navbar-brand” href=”#”>Navbar</a>
<!– Collapse button –>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#basicExampleNav”
aria-controls=”basicExampleNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<!– Collapsible content –>
<div class=”collapse navbar-collapse” id=”basicExampleNav”>
<!– Links –>
<ul class=”navbar-nav mr-auto”>
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Home
<a class=”nav-link” href=”#”>Features</a>
<a class=”nav-link” href=”#”>Pricing</a>
<!– Dropdown –>
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” id=”navbarDropdownMenuLink” data-toggle=”dropdown” aria-haspopup=”true”
<div class=”dropdown-menu dropdown-primary” aria-labelledby=”navbarDropdownMenuLink”>
<a class=”dropdown-item” href=”#”>Action</a>
<a class=”dropdown-item” href=”#”>Another action</a>
<a class=”dropdown-item” href=”#”>Something else here</a>
<!– Links –>
<div class=”md-form my-0″>
<input class=”form-control mr-sm-2″ type=”text” placeholder=”Search” aria-label=”Search”>
<!– Collapsible content –>
Pro tip: Don’t forget to add .container so your links will stay centered.
3. How To Create a Landing Page in HTML Stick the navbar to the top of the screen.
Adding this quick line of code ensures that even when you scroll down the page, the navbar stays with you at the top of the screen:
<nav class=”navbar navbar-expand-lg navbar-dark primary-color fixed-top”>
4. Create a great background.
A great background helps your landing page stand out. Put this code underneath the navbar and before the closing </header> tag:
<div id=”intro” class=”view”>
5. Add some style.
Open the style.css file in your project folder and paste this code:
background: url(“https://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20%283%29.jpg”)no-repeat center center fixed;
CODE: Code for this project https://codepen.io/bradtraversy/pen/X… SPONSORS: DevMountain Bootcamp – https://goo.gl/6q0dEa BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia
We also know about: How To Create a Landing Page in HTML, How To Create a Landing Page Without a Website, Mlm Landing Page Templates,How To Make a Good Landing Page,landing page builder, what is a landing page, how to create a landing page,landing page design,what should be on a landing page, what is a landing page and how does it work,landing page templates,landing page quotes
|[su_button id=”download” url=”https:IPS2030/” style=”3d” background=”#ec0e13″ color=”#1a1414″ size=”10″ wide=”yes” center=”yes” text_shadow=”0px 0px 0px #000000″ download=”download “]IPS2030[/su_button]|