This article focuses on steps to recover lost 8-digit backup code for Gmail accounts and as well as measures you should take when activating 2-step verification on any of your Gmail accounts. Can’t remember Gmail password or your 8-digit backup code for Gmail, then read this post carefully to then end.

How to recover 8 digit backup code for Gmail accounts. Recovering lost 8-digit backup code for Gmail accounts, or 8-digit backup code is easy and simple if you take the necessary measure to secure both your account and your backup code at the time of activation.

If you are in a situation where you forgot Gmail password and backup code of your google account then, this article is for you. Many people have suffered great losses due to their failure to activate 2-Step verification and apply other security measures to protect their accounts. Whereas many have suffered due to carelessness and failure to keep their backup codes secure even after activation. If you are finding it difficult to log in to your Gmail account and you are requested to enter your 8-digit code, then follow this simple trick explained in this article.

Are you reading this because you already lost access to your account? If so then scroll to the end of this article and see the steps that maybe help your account recovery. But if you have ‘t then take this simple measure to secure both your account with 2-Step and your backup codes. The key to your account recovery is dependent on how you set up the security measure to protect it.

First, understand that the 8-digit backup code is a measure added by Google to help protect your account from potential hackers, even if they have stolen your password. There are up to 10 different 8 digits which were issued when activating the 2-Step verification of your Google Account. Hence, you do everything possible to protect it and keep them within your reach.

Remember, when turning on your 2-Step Verification, Google will tell you that your phone’s built-in security key is one of the strongest forms of security measures to secure your Google account. Therefore, take every security measure you set up for your account seriously. Wondering how to get 8 digit backup code for Gmail without login into your account, well this may be possible if have access to an old device you have previously used to login into your account because the device is saved.

Then the general question should be;

› What if I lost my 8 digit Backup code for Google?
› What if I lost or someone stole my phone?
› How do I recover it?
The answer to the above questions depends on what measures you put up to keep your backup-code safe when turning on 2-Step verification for Google Account.

Measures to take when activating 2-step verification

• Choose which method of verification is suitable

During 2-step activation, Google provides about 3 different options which include Text message, Phone call, and Backup option.

Which method is suitable for me, text messages, phone calls, or backup codes? Here carefully select the one you can access even without the Mobile phone you link to your account.

•  Setup an active recovery e-mail or phone

If your suitable option is e-mail or phone, then set up an active recovery e-mail or a phone configured to your account. This will also help in proving that you truly own the account if by tomorrow you could not access your account.

•  Define the storage location of your backup codes

If your suitable option is backup codes Then Ask yourself, where can I store my backup so I can easily retrieve it when I do not have access to my phone. Hence you must choose this carefully, because failure to access your backup code may result in unable to recover your lost account. Therefore, take the necessary steps to store it securely where only you can access it.

How do I secure my backup codes after activation?

•  Print and Keep a Hard copy of your 10 backup codes

Download the backup Google and get a hard copy by printing the code. Keep the printed copy safe and free from unauthorized access.

• Save the softcopy in G-Drive of a different Google account

Create another Gmail account without 2-step verification then upload it on Google drive of the new account. This is that you can access this even though you lost your phone and the hardcopy is not within your rich at the moment. Again, Google Account without 2-Step verification is much easier to recover.

The above-mentioned measures can be useful and applicable when turning on the 2-Step verification of your accounts.

How can I recover my Google Account without Backup code?

There are many articles provided by Google before now on account recovery. Therefore, here are a few steps I took to restore my lost account

Read google documentation on how to recover lost 8-digit backup code for Gmail accounts  https://accounts.google.com/signin/v2/recoveryidentifier?flowName=GlifWebSignIn&flowEntry=ServiceLogin

•  Enter your email and password

This option is for those who lost their backup code and can remember their password and email. Click on Try another way as shown in the screenshot below

The next phase is where google tells you to sign in again and ;
› Answer as many questions as you can
› Use a device where you’ve to sign in before
› Chose a familiar Wi-Fi network, such as home or work

At this stage, you couldn’t recover your account using the recently used device, location, or IP address. Then, I think you should try out this method explained in google support: https://support.google.com/accounts/answer/7162782?hl=en

HERE ARE MORE HELPFUL TIPS YOU READ

• How to recover your Google account: https://support.google.com/accounts/answer/7682439
•  Tips to complete your account recovery: https://support.google.com/accounts/answer/7299973

How can I access my Gmail account without verification code?

The only one-time solution to recover lost 8-digit backup code for Gmail accounts is to look for your old device which you have previously used to log into the account, with that you can access your Gmail account and disable the 2-step.
You should be more careful during and after activation of 2-Step, so that you may not be frustrated. Furthermore, if you can’t securely protect your backup code there is no need to activate it. This is because once you fail to supply any of the requested recovery details for your account, and you could not use account recovery from a previously logged-in location or device, the account probably may never be recovered.

The post How to recover lost 8-digit backup code for Gmail accounts first appeared on Codeshua.

<form class="form">
<label class="input">
<input type="password" name="psw" id="pw">
<span onclick="showpw()" id="spw" class="showpw">
<i class="bi bi-eye-slash w3-large"></i></span>
</label>
<button class="button" onclick="generator()">Generate</button>
</form>

.form{
margin:14px;
padding:24px;
border-radius:5px;
background-color:orange;
}
.showpw{
width: 5%;
color: gray;
border-radius: 4px;
resize: vertical;
margin-left:-28px; 
}
i{color: green !important;}
.button{
width:20%;
padding:13px 10px;
background-color: rgba(70, 0, 130, 1.0);
color: whitesmoke;
}
.button,.input{
margin: 10px 1;
border-radius: 8px;
box-shadow:0 2px 5px 0 rgba(222,210,110,0.16),0 2px 10px 0 rgba(110,101,210,0.12)
}
.input{
width:80%;
padding:3px 5px;
display: inline-block;
background-color:#eef;
}
/*remove border and make tranparent*/
input[type=text],input[type=password] {
width:100%;
padding: 12px 20px;
border:none;
outline:none;
background-color:#eef!important;
-webkit-box-shadow:none ;
}
input[type=text],input[type=password]:focus{
border:none;
outline:none;
background-color:#eef!important;
-webkit-box-shadow:none ;
}

/* Function to toggle generated password*/
function showpw() {
var x = document.getElementById("pw");
var btn = document.getElementById("spw"); 
if (x.type === "password") {
x.type = "text";
btn.innerHTML ='';
} else {
x.type = "password";
btn.innerHTML ='';
}
}

/* Function to generate combination of password */
function passkey() {
var PassWord = '';
var str = '@#$%^&*()}{][?.!'+'0123456789'+
'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz';
for (let i = 1; i <= 8; i++) {
var char = Math.floor(Math.random() * str.length + 1);
PassWord += str.charAt(char)
}
return PassWord;
}
/* Pass the generated password combination
to an password input field */
function generator() {
document.getElementById('pw').value = passkey();
}

The post Learn to Make JavaScript Auto Password Generator button first appeared on Codeshua.

This is achieved Using `:empty` a CSS pseduo-class which shows skeleton loading screen background only while container is in a loading state.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty for more insight.

Skeleton loading screen has many names given to it by the different users depending on how it was applied. To some, it is called content loaders, others called skeleton loading screens, mirage elements, and content placeholders.
 
The skeleton loading screen is not a new thing in the programming world. Many giant companies in the likes of Facebook, Youtube, Linkedin, has this effect implemented in their web applications and websites, as you may have noticed before now. 

Although, achieving this may have been a bit complex for some developers especially newbies before now, this tutorial presents a simple way you can.

Every website owner or developer wants to give their visitors a seamless experience and make our web application load as quick as possible, there opting for a skeleton loading screen is a great way to achieve this.

When content is added to the container element, the pseudo-class selector won’t match anymore and the skeleton screen will be removed automatically; no need to toggle a separate class on the container.
Animating one layer of the background which is a tilted linear gradient with white in the middle to achieve shine effect.

Quick shortcut to the content this lesson

• » What are skeleton loading screens? 
• » Types of skeleton loading screens
• » Importance of skeleton loading screens
• » When to apply skeleton loading screens
• » Making skeleton loading screens with CSS

What Are Skeleton Loading Screens?

Skeleton Loading Screen is an animated placeholder that simulates the layout of a website into view while data is loading state.

These simple tricks let the user think that some content is loading and as well provide a clue of what is loading, it could be an image, text, or both of them. It also creates a notion that the website is faster for visitors because they already started visualizing the type of content loading before its full appearance.

Here is an excellent example of a skeleton loading screen from Facebook

Types of skeleton loading screens

Currently, we have 2 major types of skeleton screens:

1. Content Placeholders
2. Color Placeholders

Content Placeholders

Content Placeholders are generally light gray structures that appears like boxes and  circles that depict the structure of the page. This can seen on popular website application like Facebook and LinkedIn.

An example

Color Placeholders

Color Placeholders on the other hand are colored boxes that simulate  the user interface layout of a web page.

The Color Placeholders is more difficult to makee than the content placeholder, and the reasons that it does not only simulate not only the layout of a web page but also the dominant color.
An excellent example of this is mostly  found on picture-based websites such as Pinterest and Unsplash. as you can see from the diagram below 
Example from Pinterest

Importance Of Skeleton Loading Screens

To ensure that visitors have a seamless experience when they visit your website or web application comes the need to make users remain captivated and not bored as they tried to open your website.

» Skeleton loading screen  is a great way to ensure that since content placeholder and  color placeholder tends to appear much faster and are more user-friendly.

» It equally help to improved perceived performance which in-turn provides both good user experience and helps in increasing conversion rate.

Making skeleton loading screens with CSS

Following this two simple steps below you can now make your skeleton loading screens.
Step one: Make A HTML container

<div class="skelecton"></div>

Step Two: Make A CSS

.skelecton:empty{

margin: auto;

width: 100%;

height: 600px;

background-image: 

radial-gradient(circle 50px at 50px 50px,lightgray 99%, transparent 0 ),

linear-gradient(100deg, rgba(255,255,255,0),

rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 80%),

linear-gradient(lightgray 20px, transparent 0), 

linear-gradient(lightgray 20px, transparent 0), 

linear-gradient(lightgray 20px, transparent 0),

linear-gradient(lightgray 20px, transparent 0);

background-repeat: repeat-y;

/*YOU CAN ALWAY CHANGE  'background-size:'  TO TAKE A NEW STRUCTURE  see example 2*/
background-size:

100px 200px,

50px 200px,

150px 200px,

350px 200px,

300px 200px,

250px 200px;

background-position: 

0 0,

0 0,

120px 0,

120px 40px,

120px 80px,

120px 120px;

animation: shine 1s infinite;

}

Step Three: Animate the solids in 2

@keyframes shine {

to {

background-position: 

0 0,

100% 0,

120px 0,

120px 40px,

120px 80px,

120px 120px;

}

}

Sample Output 1

Custom CSS for example 2

/*YOU CAN FORMAT THE  'background-size:' TO SUIT YOU NEED*/
background-size:

100px 200px,

50px 200px,

200px 200px,

200px 200px,

200px 200px,

50px 200px;

Sample Output 2

Conclusion

Congratulations! You made it all the way to the end! Now that You’ve learned about the simple tricks behind skeleton loading screen. Remember! that it contributes to user experience by simply making this loading illusion of speed when loading data in a web page or application.

I hope you found this simple tricks explained in this lesson is useful for to make more skeleton loading screens for web application.

The post how create skeleton loading screen with custom CSS first appeared on Codeshua.

Google has made a lot of its products available and free for its user, ranging from #blogspot a platform that allows users to create and host their blog for free, and #google business which allows users to get their business online, Google Sites, and a lot of others.

Overview of Google Sites

Google Sites is a powerful website building tool that encompasses another awesome web stack [e.g. Google Docs, Google Sheets, Google Slides, Google Drawings, Google Forms, and Google Keep] that aid website building.

Pros and Cons of using Google Sites?

Pros (good side)
1. It is entirely free.
2. Easy and simple to use
3. Allow migrating to a custom domain
4. It does not require programming skills required
5. It is compatible across different browsers
6. Guaranteed access control [You can control who should visit your site, and post comments]
7. Access to other useful web stacks as mentioned above.
8. Already made template.

Cons (Bad side)
1. Although it is free, you will need to buy a domain name to remove the default URL like “sites.google.com/view/mysite” to a custom URL.
2. Limited to a few basic functions mostly the default ones, unlike other popular CMS like WordPress has enormous functionalities
3. Not good for a dynamic website like blogs site and eCommerce website
4. No plugin is allowed.

10 Steps to Build portfolio website on Google Sites

1. log in to Your Gmail, or Google Workspace account to access the Google site.
2. choose a template or create new
3. Decide a suitable name for your site
4. Upload your custom logo
5. Select a suitable Theme
6. Add a title to your website
7. Choose header type
8. Create important pages for your portfolio
9. Add an influential section
10. Set Access and control viewer on your Google sites
11. Add a custom Domain
12. Publish your Google site
13. Share your new site

1. log in to Your Gmail or Google Workspace account to access the Google site.

You need to log in to your Gmail account to be able to use any Google product and services from which google is not excluded. Go to
https://sites.google.com and log in with your Gmail account to continue.

2. How to Choose a template or create a new one

There are ready-to-use templates available once you log in, But you will decide according to your need. In this case, we shall be using the portfolio template as shown below.

But in a case you did see any that suit your need then you can as well create a customized template by yourself. To do this, select a blank template as you can see below.

3. Choose a suitable name for your site

Click on Your name on the header bar and type in the name of your site.

4. How to Upload a custom logo

Your site logo is a short description of your brand. Add a suitable logo that describes what you do. Click on Add Logo

as shown below then select from your local computer and upload. After uploading your logo, you can also add a favicon – that tiny image that shows on the browser

5. How to change or add a suitable Theme to your site

Click on the theme and select any that make your logo or create new ones, Theme in this regard are background-color, font color, and font family, for the header section

6. How to Change or Choose header type on your Google site

There are four different types of header which include
» Cover
» Larger banner
» Title only
Click on each of the header-type and see how it looks and select the one that is best for you.

After adding the image, the anchor format it by clicking on the anchor image icon to change the positioning, it could be anchor left, right, bottom, top, or leave as default.

8. How to Create pages for your portfolio site

Click on pages to add new pages, then type page name and put the link, the good thing is that you can add an external link to your site as well.

We are building a portfolio website and there are important pages that are necessary. These pages include your contact us, about us, project page, and products or services you render to customers. These will help people understand you more. Adding these pages is another wonderful means of boosting your presence.
Example:
Including features like contact form, e-mail Address, Telephone, and your accounts on popular social networking sites (Facebook, Twitter, Instagram, etc.) can help you expand your reach.

9. how to Add Sections to Google sites

To add a section to your site then click Insert. Select Embed, Text box, Images, or uploads from your Google Drive.

List of elements you can add to your Google site

1. Text boxes – text boxes allow you to add custom text or comments to a particular section
2. Chart – In a case you need an illustration you can use Google chart, Click on the chart to add new
3. Sheet – You can create and import and spreadsheet document to your site using google sheet
4. Docs – This allows you to add document files to your site
5. Slides – you create illustrative slides and add them to your Google site
6. Map – Allows the addition of google map to your website
7. Calendar – In case you have a schedule and meeting, birthday, or anniversary, google calendar can help you set it up
8. YouTube – You can add videos Allow
9. Placeholder – Allows the insertion of text image or video or any of the items mentioned above into a particular section
10. Divider – This is a horizontal line that cut across a section depending on how you want to place it.
11. Button – Action buttons help you to add navigation like go to next back etc., to your Google site.
12. Image carousel – You can use this to add an image slider, or create a slide show
13. Table of content – A table of content allows you to structure your content for easy navigation
14. Collapsible group – You can use this to create an accordion, which helps to keep a large portion of your content hidden until a user clicks on it.

Having known these above, in your portfolio site, you can add a screenshot, image slide, or video demonstration of your work as shown in the screenshot above

10. How to Set Access and control viewer on your Google sites

Google site provides means of regulating access to your site, both those that can view it and those that can edit it.

Click the user icon on the menu bar make your settings and your desires and then save.

11. How to Add a Custom Domain to your Google site

This is entirely optional. However, if you which to add a custom domain name and URL for your Google sites, then Here are steps to achieve that. But before you continue, it is expected that you have already purchased your domain.

» Click on Setting
» Enter your domain name, the Google will ask you to verify your site.
» Verify your site, once you pass the verification test.

» Change domain DNS and point to google site.
You will log in to the cPanel of your domain name provider then go to DNS Zone and Change the Domain name server to the one given to you by Google as shown below, after changing the DNS the wait for 12 or 24 hours for your setting to propagate.

12. How to publish your Google site

To Publish your site, navigate to the menu bar and click on publish.

13. Share your new site

To share your new site click on the link icon, and a public link will be given to you. Then share with your friend on other social media sites.

Important FAQs about Google Site

Is Google Sites a good platform to build a website?

The answer to this depends on our needs. If you are new and have no money to buy a domain name, it is an ideal place to start because it is easy, free, and requires little to no coding experience to get started.

How can I upload a file to my Google Sites website?

To upload a file to your Google site:
1. Click on Insert.
2. Choose file type: You have options like Image, Drive, Text or, embed. Select any of them, and then select your file.

Is AdSense applicable to Google Sites?

No, AdSense has been removed from Google sites. But there are still alternatives to that, you can use the affiliate link or sell personalized ad space, and e-books to earn money.

How to delete or remove a page on Google Sites?

To delete a page on your Google sites
1. ClickPage
2. Navigate to the page you want to delete and click the icon on the right side to drop-down
3. From the drop-down select delete

How to upload Youtube videos on my Google Sites?

To upload a Youtube video on Google sites
1. Click Youtube
2. Select Upload if you have a video apart from Youtube OR
3. Type the video title in the search bar, then select from the result and click on it.

How do I log in to Google sites?

To log in, you must have a Google account, then go to https://sites.google.com/

How do I make Google Sites look good?

Google site has awesome tools like Google Docs, Google Sheets, Google Slides, Google Drawings, Google Forms, and Google Keep, Calendar, all these and more can assist you in building amazing web templates.
Alternatively, you can use a ready-made template customized to your taste.

Is Google site templates free for download?

Google site templates are free but with a simple design for your need that may not be sufficient, However, there are third parties that build and sell other remarkable ones you can buy for your need.

Top 9 google sites templates free for download

There are many google site templates for download but not all are for free because most templates are built by third-party mostly for sale. You can check some here https://sites.google.com/site/arctemplates/free-google-sites-templates

The post Build and Host website on google sites with custom domain first appeared on Codeshua.