How to do a simple landing page from scratch

<p>Here is my process to create a super simple but responsive and slick looking landing page.</p>
<p><strong>Create a HTML File</strong></p>
<p>Create a html file called index.html as this is the file used by most web servers as the primary file that will serve up your webpage.</p>
<p><a href="https://imgur.com/goPDPbk"><img title="source: imgur.com" src="https://i.imgur.com/goPDPbk.gif" /></a></p>
<p><strong>Open it in a text editor</strong></p>
<p>Get yourself a nice text only editor, not something as complex as microsoft word, you can use a program called notepad.exe in windows, which may hurt your eyes due to the black on white text that is used. I personally like to use sublime text editor, but i used to use notepad++</p>
<p><a href="https://imgur.com/DoHNFMf"><img title="source: imgur.com" src="https://i.imgur.com/DoHNFMf.gif" /></a></p>
<p><strong>Create a basic html file content</strong></p>
<p>Once you have this file open in sublime type <strong>html</strong> and press <strong>tab</strong> this will create a very basic layout for you. Sublime should auto fill this for you.</p>
<p><a href="https://imgur.com/Z8RLPZz"><img title="source: imgur.com" src="https://i.imgur.com/Z8RLPZz.gif" /></a></p>
<p>Here is the code for you if you dont have sublime, just copy and paste it into your text editor of choice.</p>
<pre>&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt;&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /><br />&lt;/body&gt;<br />&lt;/html&gt;</pre>
<p><strong>Add a Title</strong></p>
<p>Ok so now that we have our bare bones html we can start adding some fun stuff to it. Actually before we do that, lets just open the file in a browser so that we can see whats going on in there, and it will be blank unless we first add a title.&nbsp;</p>
<p><a href="https://imgur.com/7JLSqdR"><img title="source: imgur.com" src="https://i.imgur.com/7JLSqdR.gif" /></a></p>
<p>This title is what will appear on the browser tab up the top of the browser not on the actual landing page so make it count.&nbsp;</p>
<p><strong>Add some meta tags</strong></p>
<p>For out landing page to be responsive we will need some <a href="../../code/vjxya/responsive-viewport-meta-tag/">meta tags</a> to make it that way. Lets add this one up the top:</p>
<pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</pre>
<p><a href="https://imgur.com/gHjgwk0"><img title="source: imgur.com" src="https://i.imgur.com/gHjgwk0.gif" /></a></p>
<p><strong>Pick a font</strong></p>
<p>Lets head to fonts.google.com and pick a font for our landing page.</p>
<p>In this one we will pick&nbsp;<strong>Montserrat</strong> and also the <strong>bold</strong> and <strong>regular</strong> font weights. then copy the embed link and we can add it to our html file in the header area.</p>
<p><a href="https://imgur.com/IwqXfBB"><img title="source: imgur.com" src="https://i.imgur.com/IwqXfBB.gif" /></a></p>
<p>As this is a landing page we will mostly have titles on here anyway so using a font like <strong>Montserrat </strong>should look pretty good.&nbsp;</p>
<p>We will need to copy the following to embed the font:</p>
<p>This for the header:</p>
<pre>&lt;link href="https://fonts.googleapis.com/css?family=<span class="collection-drawer-emphasized-code">Montserrat:400,700</span>" rel="stylesheet"&gt;</pre>
<p>And this to apply the text to the elements.</p>
<pre>font-family: 'Montserrat', sans-serif;</pre>
<p>Then we are going to add a <code>&lt;style&gt;</code> tag to get some css styles in there.&nbsp;</p>
<p><a href="https://imgur.com/0ZBY2zh"><img title="source: imgur.com" src="https://i.imgur.com/0ZBY2zh.gif" /></a></p>
<p>Here we added some basic resets and set the main body font to the new google font&nbsp;<strong>Montserrat</strong>.</p>
<p>Actually before we do that lets drag the file into a browser so we can see what it looks like at the moment, which will be just blank page, but dont worry some content is coming next.</p>
<p><strong>Add a Main Header and Style it</strong></p>
<p>Now lets add a nice hero large box and heading.</p>
<p><a href="https://imgur.com/K50LpaT"><img title="source: imgur.com" src="https://i.imgur.com/K50LpaT.gif" /></a></p>
<p>Drag this file into a browser of your choice, i prefer chrome as im used to the dev tools, but you can use firefox or edge if you really prefer.</p>
<p>Once you have opened the file in the browser press <strong>F12</strong> to open the dev tools so we can start tweaking it.&nbsp;</p>
<p>Actually im also going to just add some of the <a href="../../utilities/fFyOq/css-margin-and-padding-framework-generator/?maxwidth=50&amp;pixelstep=5&amp;googlefont=on&amp;simplegrid=on&amp;boxsizing=on">margin and padding framework</a> reset from this tool as it makes moving things (or padding them and adding margins) a bit easier later on.</p>
<p>You can click on the element inspector and then highlight the bit you want to see in the dev tools, then you can click on each bit and change it in the browser to see how it looks.</p>
<p><a href="https://imgur.com/a531e3n"><img title="source: imgur.com" src="https://i.imgur.com/a531e3n.gif" /></a></p>
<p>Once you are happy woith how it looks copy the whole css and overwrite the one in our landing page file.&nbsp;</p>
<p><a href="https://imgur.com/aBFG6hU"><img title="source: imgur.com" src="https://i.imgur.com/aBFG6hU.gif" /></a></p>
<p><strong>Background image</strong></p>
<p>Lets find a nice background image that we can use for the whole page, to make it look slick.</p>
<p>You can find a nice free to use wallpaper from sites like <a href="../../../../linx/?search=stock+images&amp;p=%2Fsearch%2Flinx%2F"><strong>pexels</strong></a> or <a href="../../../../linx/?search=stock+images&amp;p=%2Fsearch%2Flinx%2F"><strong>unsplash</strong></a>.</p>
<p>Lets try <a href="https://unsplash.com/photos/0v9dKOVKBy0">this one</a> from unsplash. Save and rename it to something easier to remember like&nbsp;<strong>photo-sky-bg.jpg</strong></p>
<p>Add this to a folder called images where we have saved the <strong>index.html</strong> file.</p>
<p><a href="https://imgur.com/N76gzm0"><img title="source: imgur.com" src="https://i.imgur.com/N76gzm0.gif" /></a></p>
<p>&nbsp;</p>
<p>Now lets set this image as the background of the whole site.</p>
<p><a href="https://imgur.com/MKFYp7l"><img title="source: imgur.com" src="https://i.imgur.com/MKFYp7l.gif" /></a></p>
<p>This looks a bit weird now so we need to tweak the header image text to fit in a bit better with the massive background.&nbsp;</p>
<p><a href="https://imgur.com/ou1oPP5"><img title="source: imgur.com" src="https://i.imgur.com/ou1oPP5.png" /></a></p>
<p>Lets make the background transparent and fix the font up a bit to fit in with the page a slight gradient to the top, and fade it into the background image with some darker text shadow.</p>
<p>This is usually how i tweak it just see what fits in, then you can add other sections in the same way with other text or images.</p>
<p><iframe class="imgur-embed" src="https://i.imgur.com/Eia1R4K.gifv#embed" width="100%" height="572" frameborder="0"></iframe></p>
<p>Not sure why but that video embed is not working so maybe use the following link:</p>
<p><a class="btn btn-primary" href="https://i.imgur.com/Eia1R4K.gifv">Link to Video</a></p>
<p><strong>Download Landing Page Files</strong></p>
<p>Here is a link to download all the files (all 2 of them)</p>
<p><a class='btn btn-primary' href="/files/landing_page.zip">Download Landing Page zip</a></p>
<hr>
<p>This is the end of Part One of&nbsp;How to do a simple landing page from scratch.</p>
<p>If this gets some views i might continue with Part 2! :P</p>