Having a website is like opening a door and inviting potential customers into your business.
This tutorial is good for you if you are:
- a beginner web designer looking to tackle freelance projects
- a non-tech entrepreneur who wants to test fast his idea
For this tutorial, we are going to build a coming soon landing page. Let’s say that you have a new app, a prototype or a new web site idea that you want to launch and you want to build some buzz before. That’s why it’s a good idea to start promoting your site and social profiles as soon as possible.
More importantly, you want to start collecting emails so you can start to build a customer base before your idea is launched.
What we are going to build
Instead of creating a basic under-construction page, we are are going to develop from scratch a responsive landing page. One that incorporates:
- countdown clock
- interactive social media buttons
- Integration with MailChimp
We will accomplish all of this within Bootstrap. Bootstrap is one of the most popular front-end frameworks for developing responsive websites and landing pages.
By the end of this tutorial, you will have the skills to develop professional looking pages with HTML and CSS. So let’s begin!
“The secret to getting ahead is getting started.”
― Mark Twain
A. Setting Up
In order for us to start coding in the bootstrap framework, we first need to download the relevant files so we can link all the default bootstrap styles.
1. Download the Compiled CSS and JS
If you go to the Bootstrap site, you should see the large download button and download the Compiled CSS and JS version.
2. Extract the file in an accessible location
3. Create the file structure
We have some files from Bootstrap but we are missing the index file and also our stylesheet.
4. Download the Atom Text Editor
You can download it from here: https://atom.io/. Although you can use any text editor you like. It’s just important that you find an editor you are comfortable using.
So when you have your chosen editor open, go to the next step.
5. Create a CSS file
Create a new blank file and save it as style.css in the CSS folder.
6. Create the Index File
Create a new blank page. Before we save it as our index file we just need to add a little bit of code to ensure we are plugged into the bootstrap framework.
To do that, we need to go back to the Bootstrap website to the documentation tab.
We are going to use the starter template. We have to copy this section of the code and then we can jump back over to HTML editor and paste that into our index file.
7. Get rid of the Hello World h1.
8. Link the index file with the stylesheet we created earlier
The style will be reflected in the index page when we view it in the browser.
In the head section, just put the default bootstrap stylesheet here.
<link rel=”stylesheet” href=”css/style.css”>
9. Save the index file as index.html in the countdown folder.
10. Take a Break. You Deserve it
11. Install Font Awesome
This will give us access to nice vector icons to use in our page.
Bootstrap 4 comes with a large amount of icons you can start with that are called glyph icons but they are fairly basic and don’t really get updated. Also Bootstrap 4 decided to drop support for that glyph icons.
Font Awesome is great because instead creating a image and have to be tied down by its final design, with FA you can easily size out a border, change colors and even animate so they offer a lot more flexibility and freedom.
Head to Font Awesome homepage here: http://fontawesome.io/
The first thing we have to do is installing the stylesheet into our page before we can use them.
Click download
Unzip the archive into your countdown folder and remove the numbers which are just the version.
12. Go Back to the Index File and Install the New Stylesheet
Add to your index file the following line:
<link rel=”stylesheet” href=”font-awesome/css/font-awesome.css”>
Soon we will add the icons on our page where we need them.
13. Add the Project Image to Your Folder
In order to reproduce exactly the coming soon page, here is the photo we are going to use.
If you want to use your own images, that is fine. Just remember to link to those images in the code instead of the ones I’m using throughout the tutorial.
We are actually all set up now and we can finally get start with the designing our page
B. Creating our Page
We have all our files in place and now we can start coding on the countdown page.
14. Add the Background Image
Because we are creating a launching page this will contain all our elements in an single page. There is no scrolling, no menus, we can apply that background image in a HTML tag.
Go to the stylesheet and add the following line:
html, body {
background:url('../img/bg.jpg') center center no-repeat;
height: 100%;
background-size:cover;
}
You can go and open your index page and see the background image on your browser.
Now we can add content to our page and it will simply place out on the top of the background image we added in the stylesheet.
15. Adding our Logo in Index.html
The first thing we are going to add to our page is the brand logo.
Go to index page and add in the body tags:
<section id="logo">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<img src="img/my-logo.png" class="img-fluid"/>
</div>
16. Adjust the Logo in CSS to Center it
Add in your stylesheet:
#logo img {
margin:0 auto !important;
padding-top:20px;
}
17. Add the Intro Text in the Index File
Go back to your index file and add a section under the logo.
<section id="intro">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>we're working hard, we'll be ready to launch in...</p>
</div>
</div>
</div>
</section>
18. Change the Intro Text in CSS
#intro p {
color: white;
text-align:center;
font-family: 'Just Another Hand', cursive;
font-size:1.8em;
}
19. Get a Custom Google Font
In order to do that we have to add a new stylesheet via Google Fonts.
Go here: https://fonts.google.com/
Feel free to take a look and choose what you like. I’m going to look for Just Another Hand — https://fonts.google.com/?query=just+another&selection.family=Just+Another+Hand
Copy the link from their page:
<link href=”https://fonts.googleapis.com/css?family=Just+Another+Hand” rel=”stylesheet”>
And paste it to the index page, in the stylesheets section.
Copy the CSS rules:
font-family: ‘Just Another Hand’, cursive;
And paste them to your custom stylesheet within the paragraph style. Also you can adjust your font size so the text is more readable.
20. Final CSS Style for the Custom Text
#intro p {
color: white;
text-align:center;
font-family: 'Just Another Hand', cursive;
font-size:1.8em;
}
21. Now Go Get Some Snack. You’ve Earned It.
C. Adding the Countdown Clock
Ok, so we made some good progress. Now it’s time to add our countdown clock to our page.
To speed up things, simply copy the first text section and duplicate it underneath.
Change the section id from “text intro” to “counter”.
Now we need some pieces of JavaScript.
22. Get Rendro Countdown
You can get this library from the link here: https://github.com/rendro/countdown
Download the zip file, extract it and get the file jquery.countdown copied in your js folder.
23. Uber Simple Setup
To use the countdown plugin you need to load the current version of jQuery (tested with 1.7.2) and the javascript file of the plugin. Just add the following lines :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.countdown.js"></script>
24. Initialize the Plugin
Add a script below
<script>
$(function() {
$('.countdown').countdown({
date: "June 7, 2087 15:03:26"
});
});
</script>
and include the div with a class in the section below the text
<section id="counter">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="countdown"></div>
</div>
</div>
</div>
</section>
25. Add a Custom Google Font to the Countdown Text
Repeat the same procedure, go to Google fonts and get Amatic SC and add the Bold option to the font.
Copy the code from Embed section to the index page.
<link href=”https://fonts.googleapis.com/css?family=Amatic+SC:400,700” rel=”stylesheet”>
Grab the CSS code “font-family: ‘Amatic SC’, cursive; ” and include it in your style.
#counter .countdown {
text-align:center;
color:white;
font-family: 'Amatic SC', cursive;
font-size:3em;
margin:-15px 0 0;
}
Now Your Page Should Look Like This
26. Let’s Add Some Social Media Buttons in our Index
For our social media buttons, we are going to use the Font Awesome icons.
We have covered installation in the setup section and now we are ready to use them. You can see all their icons here: http://fontawesome.io/icons/
We are going to use the Twitter, Facebook, Google+ and Instagram square icons in a container.
<section id="icons">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline">
<a href="http://www.twitter.com" target="blank"><li class="list-inline-item"><i class="fa twitter fa-twitter-square fa-3x" aria-hidden="true"></i></li></a>
<a href="http://www.facebook.com" target="blank"><li class="list-inline-item"><i class="fa facebook fa-facebook-square fa-3x" aria-hidden="true"></i></li></a>
<a href="http://www.google.com" target="blank"><li class="list-inline-item"><i class="fa google fa-google-plus-square fa-3x" aria-hidden="true"></i></li></a>
<a href="http://www.instagram.com" target="blank"><li class="list-inline-item"><i class="fa instagram fa-instagram fa-3x" aria-hidden="true"></i></li></a>
</ul>
</div>
</div>
</div>
</section>
27. Let’s Add Some Style for Them
We have to align the icons and change their colors
#icons .twitter:hover {
color:#6cadde;
bottom:5px;
}
#icons .facebook:hover {
color:#3b5998;
bottom:5px;
}
It should look like this:
28. Let’s Add Some Awesome Hover Effect
We can make a great hover effect from CSS. We have added in our index page a class for each icon: Facebook, Google, Instagram and Twitter. We can design the transition effect from our stylesheet.
#icons .twitter:hover {
color:#6cadde;
bottom:5px;
}
#icons .facebook:hover {
color:#3b5998;
bottom:5px;
}
#icons .google:hover {
color:#ea4335;
bottom:5px;
}
#icons .instagram:hover {
color:#517fa6;
bottom:5px;
}
D. The Sign Up Form
This is great guys. We are at more than 50% of our process. We have to add our final section of the page which is the sign up form.
29. Have a Motivational Pill
“Hustle isn’t just working on the things you like. It means doing the things you don’t enjoy so you can do the things you love.” Unknown
30. Create the Form Section
Add the classic <div> container
<section id="signup">
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</section>
Go to the Bootstrap 4 documentation and check the inline form code for more form options: https://getbootstrap.com/docs/4.0/components/forms/
We are going to collect only emails for the moment.
The HTML code is
<section id="signup">
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form" method="post" action="#signup">
<input type="email" class="form-control form-control-sm" name="email" placeholder="enter your email">
<button type="submit" class="btn btn-signup btn-sm" name="submit" value="send">find out more</button>
</form>
</div>
</div>
</div>
</section>
31. Style the Form Section
In order to center the form
#signup {
text-align: center;
}
#signup .form-inline {
display: block;
}
32. More Styling for the Form & Form Button
#signup {
text-align: center;
}
#signup .form-inline {
display: block;
}
#signup .btn {
background-color: rgba(161,186,226,0.5);
color: white;
}
#signup .btn:hover {
background-color:rgba(37,165,82,1);
}
E. Email Collecting
Here we have two ways:
- Use PHP markup
- Use an email marketing tool (recommended)
33. Collect Emails with Mailchimp
You can embed a MailChimp list signup form on any page of your website. Customize the form to support your brand, or combine it with special offers to attract new subscribers and boost engagement.
Read the official documentation here: https://kb.mailchimp.com/lists/signup-forms/add-a-signup-form-to-your-website
F. Final Site
34. HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
<link href="https://fonts.googleapis.com/css?family=Just+Another+Hand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700" rel="stylesheet">
</head>
<body>
<section id="logo">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<img src="img/my-logo.png" class="img-fluid"/>
</div>
</div>
</div>
</section>
<section id="intro">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>we're working hard, we'll be ready to launch in...</p>
</div>
</div>
</div>
</section>
<section id="counter">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="countdown"></div>
</div>
</div>
</div>
</section>
<section id="icons">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline">
<a href="http://www.twitter.com" target="blank"><li class="list-inline-item"><i class="fa twitter fa-twitter-square fa-3x" aria-hidden="true"></i></li></a>
<a href="http://www.facebook.com" target="blank"><li class="list-inline-item"><i class="fa facebook fa-facebook-square fa-3x" aria-hidden="true"></i></li></a>
<a href="http://www.google.com" target="blank"><li class="list-inline-item"><i class="fa google fa-google-plus-square fa-3x" aria-hidden="true"></i></li></a>
<a href="http://www.instagram.com" target="blank"><li class="list-inline-item"><i class="fa instagram fa-instagram fa-3x" aria-hidden="true"></i></li></a>
</ul>
</div>
</div>
</div>
</section>
<section id="signup">
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form" method="post" action="#signup">
<input type="email" class="form-control form-control-sm" name="email" placeholder="enter your email">
<button type="submit" class="btn btn-signup btn-sm" name="submit" value="send">find out more</button>
</form>
</div>
</div>
</div>
</section>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>WWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script>
$(function() {
$('.countdown').countdown({
date: "June 7, 2087 15:03:26"
});
});
</script>
</body>
</html>
35. CSS Code
html, body {
background:url('../img/bg.jpg') center center no-repeat;
height: 100%;
background-size:cover;
}
#logo img {
margin:0 auto !important;
padding-top:20px;
}
#intro p {
color: white;
text-align:center;
font-family: 'Just Another Hand', cursive;
font-size:1.8em;
}
#counter .countdown {
text-align:center;
color:white;
font-family: 'Amatic SC', cursive;
font-size:3em;
margin:-15px 0 0;
}
#icons {
text-align:center;
}
#icons .fa {
color:white;
margin:5px 15px;
position:relative;
bottom:0;
transition:all 0.2s ease-in-out;
}
#icons .twitter:hover {
color:#6cadde;
bottom:5px;
}
#icons .facebook:hover {
color:#3b5998;
bottom:5px;
}
#icons .google:hover {
color:#ea4335;
bottom:5px;
}
#icons .instagram:hover {
color:#517fa6;
bottom:5px;
}
#signup {
text-align: center;
}
#signup .form-inline {
display: block;
}
#signup .btn {
background-color: rgba(161,186,226,0.5);
color: white;
}
#signup .btn:hover {
background-color:rgba(37,165,82,1);
}
36. Congratulations
“Think Big And Don’t Listen To People Who Tell You It Can’t Be Done. Life’s Too Short To Think Small.”- Tim Ferriss
Thanks for reading. I hope this helps. If you have any feedback or suggestions, I would be glad to talk to you in the comments.
