Responsive Sign Up Page using Bootstrap from Scratch | Krishnaa Kumar | Skillshare

Responsive Sign Up Page using Bootstrap from Scratch

Krishnaa Kumar, Your Best Mentor :-)

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

      0:26
    • 2. Bootstrap Package

      2:25
    • 3. Heading

      3:14
    • 4. Input Controls

      2:50
    • 5. Button & Responsive

      4:48

About This Class

Hi Everyone,

In this class, we will create responsive sign up page using Bootstrap absolutely from scratch.  Make sure, you have some basic knowledge of Bootstrap.  If you don't have, then you can simply follow along because creating such sign up page is very easy.

I am going to use Sublime Text as my text editor and will test web page on localhost using XAMPP.  After finishing the class, you can download the project and modify it as per your need.

Transcripts

1. Introduction: Hi, everyone in this class I will teach you how you can create your own simple and basic responses. Ira Pidge using bootstrap. This will be my lot put and you can see design. A page is completely this oneself Make sure you have some basic knowledge of bootstrap. If you don't have, you can simply follow along Because critics assigned a page is very, very easy Seeing 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. Heading: Hi, everyone. In this we will start with recording process. Let's go toe court file and believed this part because we don't need this No cater development Tail class will be container. We need one more development here Class will be true now we need a heading So created development plus will be cool lg for this. Dilute this. Make use off at one element and the text will be signed up Se week Good about the fresh air and this is the output. Now let's have some nice background for this year Diseases file first save it says my started or CS is Goto Estimate file And just copy this and Mr to make it my stun shit. And also TNT name here to my style CSS I already got a background image in this for you which I'm going to use Select body element Make use off that gun Property link will be images. Did you dark deputy? It will be no repetition for this. Then it will be fixed. Background size will be Go save it. Good browser The flesh it And this is the output. No, it's a big dark. We have to make it. Why didn't color, and also he wanted to be somewhere Hill. Let the actual element and make good Dexter Laine center and the color right because people f in terms off hex laxity, Blasio College offset for Save it Nice. So regarded. Heading in the center. The next video, we'll walk over the controls, sing the next video. Have a nice day. 4. Input Controls: do you want in this ruler? Couple off Xboxes to assign a pitch. Let's go to court file. Good development class will be ecology full. And they will even more class which will be called G off sec for Do you perform element here and greater development Plus will be form group and there will be in port Element will be email name will be in 40 mil Placeholder will be e mail Then the close will be formed. Save it. Go to Bauza Fresher and this is the awkward. Now let's aired more controls. Simply copy this. They always text boxes we could pass would And what will be passport? This holder will be crossword with this case. Make it next. And what will be named placeholder will be full name. Make it next. Also make it company. This order will be Save it, Refresh it! And this is the awkward. No other Tencent spacing between this textbooks and this. Sign up heading in the attorney element. Make use off margin mortem property and make it 20 pixels. Save it. Go to Gaza Refresher. And this is the work. If you want to have more margin, you can increase the value to 30 40 and 50. It's uterus, but I think in case according pixels, it's absolutely right. So in this case, we got be hurting. You got the controls, the next level work over the button, and I had some privacy in terms of condition. Link at the bottom. It's in the next video. Have a nice day. 5. Button & Responsive: hi. Everyone in this terrible endeavour tend to assign a Pidge. Let's go to court file. Make use off battle element here. Next will be Sign me up. Glass will be beauty in video, primary and beauty and group justified. Save it photo browser repression And this is the output. Hundreds. Make our text a big board go to style shoot Select video in class front wit will be bored. Let's increase the size toe, 20 pixels, a fresh shirt and this is the awkward under its surface, Um, next year, or the privacy policy and terms of service already break here and make yourself a span element. Next will be by signing Go you agree to our comes up. So is on and privacy policy. Save it fresh it nice. I also like the span element here. Medical. Oh white, Great. Let's make use off and good element here because it pulling toe terms of service pitch and it will be another anchor element. This building toe our privacy policy pitch. Save it Great. Now let's do one thing Select and care element also and make different wit board nice. We need some spacing here. Also, we want on the line below the privacy policy and the terms of service like this, which you can see here. So, first of all our spacing here and one more thing, just correct this. It should be company. Save it. Go to style shoot select anchor element. Make the tax decoration on the line. It's a direct, fresh fruit and this is the No, because we have to make up a page responsive. We have to add a couple of classes because this is the output on the last screen. We have to fix it for the medium screen, small screen and extra small screen. In the estimate file, we need to have a couple of classes Just only here, so forced to us will be calamity for for the medium devices and offset will be full just like this 1 19 devalued before In this morally wisest it will be God s, um before when you can make it five because that will look much better And make it for you say, of this or the browser. You're fresh shirt Herbert within the screen sized so you can see a sign of pages completely responsive or all the releases is the final output and we're done with the project. See the next video? How a nice day