Responsive Google Ranking Guide Landing Page in Bootstrap from Scratch | Krishnaa Kumar | Skillshare

Responsive Google Ranking Guide Landing Page in Bootstrap from Scratch

Krishnaa Kumar, Your Best Mentor :-)

Responsive Google Ranking Guide Landing Page in Bootstrap from Scratch

Krishnaa Kumar, Your Best Mentor :-)

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (16m)
    • 1. Introduction

    • 2. Bootstrap Package

    • 3. Background

    • 4. Left Section

    • 5. Right Section

    • 6. Controls

    • 7. Custom Font

    • 8. Responsive

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Hi Everyone,

In this class, we will create a responsive Google Ranking Guide landing page in bootstrap absolutely from scratch.  Make sure, you have some basic knowledge of bootstrap.  If you dont have, then you can simply follow along because creating such landing page is very easy.

Meet Your Teacher

Teacher Profile Image

Krishnaa Kumar

Your Best Mentor :-)


I am a software developer. I have been developing softwares for the last 3 years. I know many programming languages and would love to teach you all of them. I create mini-projects for beginners in various languages like C#, JavaScript, CSS3, HTML etc.

If you are beginner and wants to start with some mini projects to learn basics, then just don't be reluctant, Enroll Now!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction: Hi, everyone in this class. Rickards. Arpege. Absolutely. From scratch in Bootstrap. This one. If I looked and it will be completely responsive, you can see this. Made sure. Yes. And this inaudible step If you don't have, you can simply for long Because critics of Europe it is very, very easy. See you in the class. Have a nice trip. 2. Bootstrap Package: he's able to step up site to get started. First Folio to download the package that simply click on this button and you're Donald will start after that, you have to go toe dickering upside and your download this package, I have only utensil. And after extracting the goose step package, you will get this folder this folder and this fold up and make sure the degraded file should be in this for love. Okay, when you are done with this, you can simply put them in a boat. Steph Older like this. You got all your content in one folder? No. In the basic template to the head, the website off the board step where you can find the basic template. And this is the camp. It was simply to copy this and based it on these of lime text. You can see you already got a reference for the bootstrap files. But since they are in the would step fold up, which is this one year to make little tea in his hail. Make it bootstrap. Just copy this person over time. Best Rick Hill and kids are degrading. We need the final aim. But in this case, is this one? Just simply copy the file him and replace this here. Make it DRDs and copy the part with his bootstrap. This one and baster tail. Make it J. Grady. So we're done with it. Just save this file, and we won't ask this on a local host. Refresh it. And this is your book. So we're done with the download installation process off our boots. Step in the next video. We'll start with the recording process. Civil X radio. Helen, I straight. 3. Background: hi, everyone in this room and start creating a webpage. First thing that you have to do is to add a background image. Garbage. I already got a couple of images in the Mideast folder. This will be a logo on. This will be a background. Let's go to court, file your distant shoot and se within the CSS folder and they will be my style. Lord ceases. No, it's done toe link the file. So just change it to my style. Shoot and in the name here, toe my style yard CSS see it noticed and shoot. Select Gordy Element. Make yourself background property. But will be this images, background or PNG It will be noted be done fixed. No. Make use off the ground size property and it will be covered. Save it Goto browser Fresh it And that's your poop. You were done with this park. See the next video? How will I stay 4. Left Section: higher. Doing this would have allowed some content over a page. Let's go to court file. Make yourself development. Class will be continued. There will be a role So class with little here. No, we need columns. Plus we'll be calling D for there will be a hurting Make use off. That's two element and hurting will be this. Just copy this and be a strict here. There will be a horizontal line after this and some content make use off the element and basically content. See what good browser fresh it and that's the are good. Let's fix this in the body element. Medical er white. Select container close and make the model up a percent. Save it nice. No. Select the element and make different size 20 pixels. Save it. You wanted to be somewhere here. The dreaded class class will be calling the offset to save it. Great. That's a technical over this next. And a spending limit here close will be freeze. Save it. Select free glass. Make different weight bold and medical yellow. Save it good. So we don't need this part that extra. Do you Look over the dissection. See the next video. Have a nice day 5. Right Section: hi everyone in this rejuvenated content on the night turn side, let's go to go to trial because off development here class will be quality, for there will be image. So make use off image element on source will be. This class will be made responsive and local. Save it good browser. Fresh it and that's the output. Next week's this Mr Farhadi horizontal line. Here, Save it now. Goto stand shoot. Select low class beauty Height off 1 20 pixels in modern will be. See a week. Good browser. Fresh it and thats your not fix this or is on the line Way Contribute decides to 1 19 Nice . How did you let him? Until glass will be box makers off as three element and text will be your email address. Save it. Could a browser fresher and that's the output Select box class and make the text. Elaine Santo Select. That's three Element and the modern top and since save it, could a browser fresh it, and that's the output. So we're done with this part that extra d'Olonne control CR controls like X box in the bottom. You next video. How would I stick 6. Controls: I will let you live in any button textbooks. Here, let's go to court File make is a formal, even tail and input element. Thank Will be email name will be email class will be form, control place. Order will be And your email actors make use off Britain Element a glass of BBD in and that will be subject. Next will be click here to continue. No, we knew this small element here and next. For this will be this Cvik Groza the fresh it and that they are put there to fix this. Go to court file. Select begin. Class form. Size will be 40 pixels. Margin, Dr B 15 pixels margin. Water will be 20 pixels, depending five pixels and 10 pixels and background color will be this. Save it. Good browser fresh it and that Your book? It's fixed horizontal line and make it 2118 because I think that will be the perfect Nice. So we're done with this part? The next video. We'll have a custom phone to have a bitch See the next video. Have a nice day 7. Custom Font: Hi Everyone in this room political stuff won't go of a pitch. That's what it will not come Type Will points. The search bar type was work. Copy this. And Mr Tail, it will be my custom Fort Save it Goto style. Shit The body element. Make yourself for assembly. Family will be swirled. Second, we will be one of space and safe. Save it. Go to blows up. You're fresh it and that. So we're gonna be dating a custom for want of a bitch. In the next video, we'll make a webpage responsive. See the next video. Have a nice day. 8. Responsive: in this revelator LePage responsive. This is the old put in case of a last device. Let's do this ice and go toe and redeemed by size. And this is the output in case I'm reading device. Let's fix this. We need to have two classes here. Call Andy full and call him the offset for here. Also see what it would browser. Refresh it and they're still what it should. We do not for see that nice I'll extra duty size and go below lining toe And this is the output. In case off this small device, you have to fix this. Also this style shoot Make use off video ready select form control class and make depict 50%. Make use off. Imagine property. Andi, make it Otto Select. But in close big difference Size 15 pixels. Save it could browser fresh it and that they are put in case off a small device. Let's go below 500 nuts. Fix this. Make yourself mediocrity here. Mex first 506 cents select from conduct glass and begin class. Give it 100% or you can do one thing. You can make do it of peoples and here also in cuts off a small device, save it could closer fresh it. And there's your put in case off a extra small device. Let's increase the size. And this is your book. In case of a small device like Publix, this is the are put in case of imaging device and this is the old put in case off it last choice. So we're done with this webpage and the city Final output. See that extra deal? How can I stay?