Responsive List Building Report Landing Page in Bootstrap from Scratch | Krishnaa Kumar | Skillshare

Responsive List Building Report Landing Page in Bootstrap from Scratch

Krishnaa Kumar, Your Best Mentor :-)

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

      0:29
    • 2. Bootstrap Package

      2:25
    • 3. Background

      1:25
    • 4. Box

      3:13
    • 5. Controls

      1:58
    • 6. Custom Font

      1:25
    • 7. Responsive

      1:38

About This Class

Hi Everyone,

In this class, we will create a responsive List Building Report 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.

Transcripts

1. Introduction: Hi. Everyone in this class prepared it to a pitch. Absolutely. From scratch in Bootstrap. This will file output and it will be completely responsive. You can see this. Make sure. Yes. A Ms ignored a bold step. If you don't have, you can simply for long Because critics is rep. It is very, very easy. See in the class. Have a nice day. 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: how you in this world will start with, according process The first thing which you have to do this with a background image to have a pitch. I already got an itch in the Mideast folder for the background in which this will be about growing image. Let's go to court file and you destroyed Shoot. Say what? In diseases Ford up and give it a name. My stone dark ceases in the Estivill file. Just copy this because we have to link sees this while So make it my style Shoot. It will be my style dot CSS See what this style ship select body element make use off back home property, but will be this images. It will be noted bit and fixed background size will be covered Civic Good about, uh, refresh it and that's a back on. So you were done with this part? See the next video heaven, I stay 4. Box: Hi, everyone. And this will attract where the box Here in this location X, go to court while make use off development class will be contained. There will be a row and they will be a color class will be. Call it default and Donald G off certain zero extra with this. Just copy this and the studio. There will be a pre element and for this text will be this. See? Whipped Good browser fresh it. And that's the output that six this select Contain a glass here and make the mountaintop it percent save it. Two fresh it and that your foot Early glossy. Oh, that would be box. Save it. Select box class. Make the background color. This See what? Nice made the border areas and pixels. Text align Santo and me Tikolo White Great, depending five pixels on 20 pixels. Nice. This panel even kill because we have between the color of this text, which is free report. Save it. Select spare element and medical. Uh, this Save it. Nice. Different Like book. Great. Select the element on with emergent top 20 pixels. Nice. So we're done with this part in the next video? Well aired condole. CIA control suggests we're doing an X box to the next video Overnight street 5. Controls: in this would've American Dol Seo. Let's go to court fight. Make use off four million. Until then, input element like will be emailed name will be email. Less worried. I will be. This loss will be formed. No. Make use off button element that will be submit. Class will be median and begin block extra be download the report. See what? What about the the brush it and that's the our group X Fix this select Begin close on background color will be this four color will be this made emergent dog when the pixels on a margin bottom to depict since save it would closer fresh fruit. And that's the output. Let's make false eyes 20 pixels on make default rate board save it, but it so we're done with this part in the next video. When our custom for Flora pitch in the next video, how will I stay 6. Custom Font: I had one. This related costume phoned to a page. Let's go to google dot com. They will. For once in the search bar. I sent Sita. So like this one. And copy this in the court file stood here. Make it make us too important on Dhere. Fix it endless. Save it. Go to style Ship in the body element. Make use off for family sensitive will be family form then more space and sad if civic Good . Broza two. Fresh shoot. And that's your So we're done with this part. In the next video, we'll make a pitch responsive. See the next video. 7. Responsive: hi. Everyone in this would ever make up a page. Responsive. This is the output in case of a last device at school below. 100 will immediately by size and this is the output. Let's fix this. We need to work to glasses here. The first will be eleventy five, and the second will be. Call and be off Sect zero. Save it good Rosa, your fresh fruit and this is the or put let's go below 99 To which he decides off a public . And this is the output that's fixed this. Give me to wear two classes. The first will be a lesson six, and the second will be Call a samosa tree. Save it good. Let's go below 7 60 years decides off a extra small toys. There. It's fixed. It's also make it go. Alexis in and go, Alexis offset one. Save it. Profession it. And this is your So we're gonna do a page and this defy law would see the next video. Have a nice day