Code a 'Coming Soon' Landing Page in Bootstrap 4

Name: Code a 'Coming Soon' Landing Page in Bootstrap 4
Rating: 4.6 (1271 reviews)

Build your 'under construction' or 'coming soon' landing page with countdown clock in bootstrap 4

Created byAndy Clarke

Last updated 9/2017

English

What you'll learn

Code an awesome 'coming soon' landing page for your product or business
Learn how to develop a responsive landing page
Use many different components of the bootstrap framework
Collect emails from a sign-up box via PHP

Course content

5 sections • 18 lectures • 1h 20m total length

Welcome1:32
A quick welcome to the course and a look at what we will cover during the lectures.
What you will be creating1:32
Here we take a look at the final page and go over the features of what you'll be creating.

Downloading Bootstrap1:45
In this lecture we download the relevant bootstrap files to start building our page.
Creating our file structure3:15
In this lecture we add the relevant files we need to our file structure.
Installing Font Awesome2:50
In this lecture we install font awesome onto our page, so we are ready to use certain icons when coding our page.
Download Course Images1:08
In this lecture we download the images to use within the course.

Background Image2:56
In this lecture we add the background image to our page and add relevant code to ensure it fills the screen on all devices.
Adding our Logo5:03
In this lecture we add our logo to the bootstrap page and ensure it is sized correctly on our devices.
Adding the Intro Text4:34
Here we add our intro text to display to the user, we also add our custom font via Google Fonts.
Adding the Countdown Clock8:20
In this lecture we install the main feature to the bootstrap landing page, which is our countdown clock.
Adding our Social Icons12:28
In this lecture we add our social icons via Font Awesome to the page, we then style them and add interaction for the user.
Adding the Signup Box8:33
Here we code our sign up box to collect user emails.
Adding Media Queries6:26
In this lecture we add all our media queries to ensure the bootstrap page renders and displays correctly on all devices.
Add Additional Media Queries (Bonus)3:19
Here we look how we can add media queries into our stylesheet to ensure our page fits on landscape and portrait views.

Requirements

Basic understanding of HTML & CSS, however not essential.
HTML Editor (e.g. Brackets, Coda, Notepad++, Coffeecup)
Webhost with PHP capabilities
FTP access (e.g FileZilla)

Description

**FREE FOR A LIMITED TIME ONLY**

Learn the basic concepts, tools, and functions that you will need to build fully functional, professional landing page within the new bootstrap 4 framework. This course is ideal for students of all skill-sets, from total beginners or students that simply want to brush up on their coding skills.

In this brand new course you will learn how to code a professional responsive 'coming soon' or 'product launch' landing page within the Bootstrap 4 framework with HTML, CSS & PHP.

Countdown-to-launch landing page
Fully Responsive
Incorporate new Bootstrap components
Understanding of the Bootstrap Grid System & Media Queries
Custom Fonts
Collect emails with PHP Markup
Font-Awesome Icons
CSS Animation

You will work through the lectures and build a simple, yet professional responsive landing page that will incorporate your company logo, intro text, a countdown clock, social icons and a fully functioning sign-up form for you to start collecting emails before your product or website is launched.

You will ideally have a little knowledge of HTML & CSS, however it isn't essential as I will walk you through every step of code to ensure you have the right understanding of the bootstrap framework, and the tools to further your learning after you have completed the course.

You will not only hand code a modern professional looking bootstrap 4 landing page, you will start collecting emails instantly with a sign-up form via PHP markup. You'll be able to build up a customer base and create buzz around your product or website before it is even launched!

You will take the learn-by-doing approach which will help you understand the aspects of bootstrap we use during the course and give you the tools to re-design our template or build an entirely new landing page specifically how you want it. You will be able to download project files throughout the course, which will be yours to keep and work on at your leisure.

By the end of this course you will have hand coded a modern & professional 'coming soon' or 'product launch' landing page using HTML, CSS & PHP, and built a basic understanding of the bootstrap framework to help you develop your own pages in the future.

Who this course is for:

Users looking to create a 'coming soon' or 'product launch page'
Users who want to build responsive landing pages

Code a 'Coming Soon' Landing Page in Bootstrap 4

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 3min

Setting Up4 lectures • 9min

Creating Our Page8 lectures • 52min

PHP Markup2 lectures • 14min

Review2 lectures • 3min

Requirements

Description

Who this course is for: