Code a 'Coming Soon' Landing Page in Bootstrap 4
4.6 (559 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
15,892 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Code a 'Coming Soon' Landing Page in Bootstrap 4 to your Wishlist.

Add to Wishlist

Code a 'Coming Soon' Landing Page in Bootstrap 4

Build your 'under construction' or 'coming soon' landing page with countdown clock in bootstrap 4
4.6 (559 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
15,892 students enrolled
Created by Andy Clarke
Last updated 1/2017
English
English [Auto-generated]
Price: Free
Includes:
  • 1.5 hours on-demand video
  • 1 Article
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
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 is the target audience?
  • Users looking to create a 'coming soon' or 'product launch page'
  • Users who want to build responsive landing pages
Students Who Viewed This Course Also Viewed
Curriculum For This Course
18 Lectures
01:20:37
+
Introduction
2 Lectures 03:04

A quick welcome to the course and a look at what we will cover during the lectures.

Welcome
01:32

Here we take a look at the final page and go over the features of what you'll be creating.

What you will be creating
01:32
+
Setting Up
4 Lectures 08:58

In this lecture we download the relevant bootstrap files to start building our page.

Downloading Bootstrap
01:45

In this lecture we add the relevant files we need to our file structure.

Creating our file structure
03:15

In this lecture we install font awesome onto our page, so we are ready to use certain icons when coding our page.

Installing Font Awesome
02:50

In this lecture we download the images to use within the course.

Download Course Images
01:08
+
Creating Our Page
8 Lectures 51:39

In this lecture we add the background image to our page and add relevant code to ensure it fills the screen on all devices.

Background Image
02:56

In this lecture we add our logo to the bootstrap page and ensure it is sized correctly on our devices.

Adding our Logo
05:03

Here we add our intro text to display to the user, we also add our custom font via Google Fonts.

Adding the Intro Text
04:34

In this lecture we install the main feature to the bootstrap landing page, which is our countdown clock.

Adding the Countdown Clock
08:20

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 our Social Icons
12:28

Here we code our sign up box to collect user emails.

Adding the Signup Box
08:33

In this lecture we add all our media queries to ensure the bootstrap page renders and displays correctly on all devices.

Adding Media Queries
06:26

Here we look how we can add media queries into our stylesheet to ensure our page fits on landscape and portrait views.

Add Additional Media Queries (Bonus)
03:19
+
PHP Markup
2 Lectures 13:52

In this lecture we add PHP markup to the bootstrap page to ensure our sign-up box sends an email when the user provides their information and hits the 'sign up' button.

PHP Markup
09:44

In this lecture we add styles to the alerts to make the message fit in with the design of the page.

Styling our Alerts
04:08
+
Review
2 Lectures 03:04

In this lecture we look at our final page, tidy any code up and go over what you have created.

Viewing our Final Page
03:02

The final page files are provided to download.

Final page files
00:02
About the Instructor
Andy Clarke
4.6 Average rating
1,238 Reviews
20,533 Students
5 Courses
Web Designer/Developer

I have been in the web design and development sector for over 10 years, working on various aspects of design and build. I've always had a passion for design and coding and enjoy creating various sites through HTML, CSS and Javascript, especially Wordpress & Bootstrap sites. I also design website and apps layouts in either Photoshop & Sketch.