Responsive Fitness Training Landing Page in Bootstrap from Scratch | Krishnaa Kumar | Skillshare

Responsive Fitness Training Landing Page in Bootstrap from Scratch

Krishnaa Kumar, Your Best Mentor :-)

Responsive Fitness Training 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. Heading

    • 5. Box

    • 6. Button

    • 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 Fitness Training 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 will create this webpage. Absolutely. From scratch. In bootstrap, it will be completely responsive. You can see this. Make sure you have some basic knowledgeable step. If you don't have, you can simply for long. Because getting that garbage is very, very easy. See, only 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 we will start creating of a bitch. The first thing that you have to do is to run a background image to have a page. We already got a couple of images in the Metis fordo. This would be the background image. Do your best and shoot and say we can. DCs is fordo Name will be my study Dark CSS in the court file. Just copy this and based retail because you have pulling this shit. It will be my stirred or CSS save it. Select body element here. Make use off background property Part will be this images, background or DPD. It will be no to beat fixed, make use off background size property and it will be color civic Go to Gaza pressure and that's your background. So willingly this part in the next few deal. Have a nice day 4. Heading: this will give alert some content to have a pitch. Make yourself development. Class will be container fluent. There will be a rule and they will be a column. Plus will be coral de well and tax center. No, we need as to element, and tax will be this. There will be a one element and next will be this. Save it good brother. Fresh it. And this is the outward select container fluid class and made Imagine stuff, Cooper said. Save it, the fresh it and that's your word here. Medical A white Say what? Great. Select a tool element and different weight. Vote nice. Make use of development and create one more row with a color close will be quality seven, because off image element on medieval with this glass would be and with responsive on and image circle and my image save it could go the refresh it and thats your put Hurtic last year. That will be her line. Save it in the style ship. Select Hurtling class. Make the margin bottom 20 pixels. Select my image class and rigged. Imagine Happy See would refresh it, and that's output. You were done with this spark in the next video retarded Roxio. See that extra deal? Have a nice day 5. Box: higher doing in this We liberated box here. That's good. Accord! Fire! You're ready. Let him into. Plus we'll be ecology full and tech Santo Inside this there will be a development class will be box hurting Make use off as to element and text will with this Then there will be a p element Text will be this No We need one more development for the body Classes will be box body for this And there will be a p element with this text. Save it Go Browser Refresh it And this is our put notes Fix this Select books hurting close and they're gonna color will be this border This will be 10 pixels Save it Good Browser Refresh it And this is the output. Next make the petition Absolute left will be zero on it will be 100%. Save it Great No select books Body class We're gonna call it will be this border areas will be 10 pixels. Tradition will be absolute left with zero and open be 100 pixels. Save it! Got a browser. Refresh it And this is our foot. Not too many different Size 2125% and starting to fight, exults. Save it good. So it into this part in the next video Belardi. But inhale. See? What extra do you have? A nice day. 6. Button: I even in this preliminary, but end in the blocks. That's good. Goldfine Make use off Burton Element Glass will be deal on text will be scared. Your session There will be a small element with text. Your email is safe. You just cement good browser, fresh it and this is the old Port Select. Begin close and make the background color. This foreign color will be wiped and fun size will be 40 pixels for Great Beach board. Save it Got browser fresh it. And this is the old put select small element made to display block margin. Gordon will be 40 pixels and here emergent topping the 2% margin Bottom political percent and depending toe. See what kind of browser fresh it and the result would. So we're into this part. In the next video, we'll have a custom phone over pitch, see the next video. Have a nice trip 7. Custom Font: Hi, everyone in this room. America's twofold of a bitch. Let's go to google dot com type Will forts in the search bar briefs that if select it core Pittis the district here. Make it a custom front. Save it for the style Shoot in the body element because off for family primary for will be reset. If second we will be more space and said if save it good about, uh, fresh it and that's out. So we're into this part. In the next video, we'll make a webpage responsive. See the next video. Have a nice trip. 8. Responsive: Hi, everyone in this real made of a page Responsive. This is your foot gets her last device. Let's go below 100 between sides off a reading device. And this is the or what? Let's fix this. Need weird a glass here. Cool MD six. And here, Call them Defied. Save it, Refresh it. And this is the output. In case off a medium device, Let's go below 992 This is the old put in case of a tablet Read. Wear a small spacing here but first acting classes here and make it go Listen well here also so that you should spend across fell columns. Save it. This tells you. Make yourself mediocrity. Select box heard in close and make the stop and Excellence Select box Morty and meet the talk 1 10 pixels. Save it for shit. And this is the output in case off a tablet, it's Rubio 76 tiered. Perfect. That's cool. Blue 400 There to fix this. Make use off mediocrity here, Mexico. It will be 400 pixels select box body and made the top 1 40 pixels. Save it. Great. So we're definitely a pitch and this different output, it's even extra. Do you have a nice day