Building A Responsive Coming Soon Page In Less Than 10 Minutes😱💖

9 min readMay 25, 2020

Building a coming soon page is one of the simplest projects you can do in other to test your html and CSS skills.
For beginners, it might be a little bit complicated but by the time we’re back from this journey I’ll be taking us through, you should have been able to create your first responsive coming soon page with just HTML and CSS. Interesting right? So pick up your materials and let’s ride together.🚴🏇

First things first:
So to create any website what do we need🤔?
We need 3 things:

• Logo
• Content
• Colors
In most cases the colors can always be gotten from the logo and the content are provided by the site owners.

STEP 1:

CREATING THE FOLDER

So to get started I will just create a folder on my desktop. I’ll name mine: Coming soon page.
You can give yours any name of your choice.
So next we’ll open our text editor.
There are a lot of text editors you can use;
• Sublime text
• Visual studio code
• Atom and many more..

I’m currently using Visual studio code because its makes works faster for me. You can decide to use any text editor of your choice.

Next you’ll need to ask yourself;
What resources or assests will I be using for this website?🤔.

If your answer was
• logo
• Background Image and

• Icon
then you are right🍾!.

We also have to note that all these assets will be in the coming soon page folder.
So you can decide to create a different folder inside the coming soon page folder where you can put these assets.

But I won’t be doing that, so I’ll just add my logo, icon and background image to my Coming soon page folder.

Let’s move on🏇.

For the logo you should have gotten your company’s logo already.
To get a background image you can visit pexels, unsplash or pixabay. These websites provide you with free images without copyrights. You are free to download and use.

Next thing I’ll need is Font Awesome (Icons).

"Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons."

To start using font awesome icons you’ll have to visit Font Awesome and download the latest versions.
'It comes in form of a folder so you’ll have to register with your email to get your link and then download the font awesome folder." I don’t want to go much into talking about it so let’s move on..🤸.

After downloading the font awesome you should then copy it into your folder where you have your background image and logo.
So if you followed the steps above you should have something like this in your text editor.👇🏻

STEP 2:

Create Your HTML and CSS Extensions

Next I’ll have to Create a .html extension. I’ll name it Index.html.

“index is used as the first file because when we host our website to a host server, the server searches for our homepage first which is a file named index. If your browser can’t find the index the next action is to list our files on that server so that the user can choose or it throws a 404 error".

Okay, so since it’s a single page we’re creating you can decide to use an internal CSS instead but I’ll just do otherwise.
I’ll create my CSS folder in my coming soon page folder and I’ll name it style.css.

STEP 3:

Start Writing Your Codes😁

Now it’s time to start writing your codes:
In your html, we’ll create the html structures.
Here is how it is..

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FemCode Africa</title>
</head>
<body>

Don’t forget to add your meta tag📌:

"<meta name="viewport" content="width=device-width, initial-scale=1.0">"
"A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser."

So basically, what the tag does is that it helps us detect when we are on a small screen or on a desktop screen.

So next i’ll link my font awesome

So the font awesome is an external CSS file. I don’t really need to link all. i just need the all.css file.
so to link we use our link tag as usual:

" <link rel="stylesheet" href="assets/css/fontawesome/css/all.css">"

So its an external css that will be linked right.

The link just means attaching a file to become the content of another file.

So we are bringing in the content of the css file to our html file, it can be any name. We can use any name we want as long as we link it properly📌.

So i will just use style.css as my css file. I need to link it using the link tag .

You can place the link anywhere in the html page, but I prefer to place it in the head section so that it loads faster before the other page contents. but basically you can even put it in the body It still works.

Here is my code so far👇

STEP 4:

CREATE PAGE STRUCTURE

Next thing i want to do in my html is create the structure of the page.

I will add a section to hold the contents, I will give it an id called landing. you can use any name its just an id.
So this section will hold all my contents.

Then, I’ll add my LOGO, after the logo comes the COMING SOON text, after that, A Brief Description about the company.

Finally, a call to action button. So;
• LOGO⏩

• COMING SOON⏩

• ABOUT⏩

• BUTTON⏹️

Lets get started🤸

First, Let’s add a div inside the landing section and give it a class of landing-content.

Next i’ll create a div to hold my logo. I’ll call that logo-div and its inside the landing div.

Next i add my png logo
The logo is an image so just call it up remember to use the name of your own image.
Just make sure you add the logo correctly.

So next i want to add my coming soon text;
I will just use a h1 tag and it will be directly inside the landing-content

Next is the description:

" In the fight to bridge the gap on gender inequality in the tech Eco system, FemCode Africa is here to equip ladies with on demand digital/tech skills".

I will just add that description and place it in a paragraph under the coming soon h1.

Next, i’ll create a div to place my button and I’ll give it a class of button-div.

I’m gonna be using an anchor link for our button and I’ll give it a class of btn.

Next, i’ll create a div to place our social icons.

Remember they are just font awesome icons.

I’ll be adding Facebook, twitter and Instagram. Since it’s a static web-page I’ll set my href to #.
If done properly this is what you should see in your text editor 👇

STEP 5:

STYLING WITH CSS❤️

So html is done successfully, CSS is next.
First, I’ll use a universal selector (*) and set the box sizing property to border box.

*{
box-sizing: border-box
}

Then I’ll set my body margin and padding to 0px each.

Then I’ll style my section:

" section#landing{
}"

So this 👆references my landing section.

I will then add a background image. But i also need to be able to control the opacity, so i will just use a linear gradient.

Section#landing {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0,0.5)),url("../images/bg.jpg");"
}

Still on the section#landing, I’ll set the background repeat property to no-repeat, the background size to cover, color to #fff(white), min-height to 100vh and the padding to 100px.
If done properly this is what you should see in your text editor👇.

Moving Forward🏇, i’ll then style the div landing content.

"section#landing > div.landing-content{
}"

this 👆should reference the div.

Next, i’ll just add some box shadow to that landing-content div. I’ll also add a transparent bg also, some padding and align the text to center.

If done properly this is what you’ll see.👇🏻.

Next I’ll reduce the image size.

section#landing > div.landing-content>div.logo-div{
}

This makes a reference to the logo div

section#landing > div.landing-content>div.logo-div img{
}

This references the image itself. so I will use just width
You need to be careful not to shrink the image.

For the h1 I will just increase the font.

.landing-content h1{
font-size: 50px;
}

So next, i’ll style the button and the icons.

you can decide to style your buttons anyhow its suits you.📌.

Here is what I did:

So next, I’ll create a hover for our buttons. So once we hover on it, it can change color.

I’ll also add a transition so that the effect will be seen properly.
Then I’ll style the icon by increasing the size. I’ll use the margin property for that.

Here is what I did 👇

So we are done for desktop view!🤭💃

Quite simple right!🤸. But not too fast😁.

We’ll have to make sure that the page is responsive. In other to do that, we’ll have to add media queries to the page to make it responsive for mobile devices of different sizes .

Here are some media query break points we can use:

"/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
"

@media only screen and (max-width: 768px) {

}
but i prefer this 👆because it handles more screens better for me.

So adding my media query, I’ll change the logo’s width, the font size of h1 the font size of .landing-content, the padding of the section#landing and the font size and line height of my button.

Here it is....