Responsive Bodybuilding Niche Landing Page in Bootstrap from Scratch | Krishnaa Kumar | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Responsive Bodybuilding Niche Landing Page in Bootstrap from Scratch

teacher avatar Krishnaa Kumar, Your Best Mentor :-)

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (12m)
    • 1. Introduction

    • 2. Bootstrap Package

    • 3. Background

    • 4. Box

    • 5. Button

    • 6. Custom Font

    • 7. 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 Bodybuilding niche 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.

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: I Even in this class, you're going to build this webpage Absolutely. From scratch in boot step. This will, my lord put it will be completely responsive. You can see this. Make your some basic knowledge of boots Step if you don't have, you can simply for long. Because skipping such a page is very, very easy. Sin 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: I even this would have started. According process. The first thing that you have to do is turn it back on image to our webpage. You're a good image, an image, this world. And this will be a background image. Let's go to court. Fight first full of U two. Greatest is this file. So goto file, you're fired. And so it does my style dot CSS diseases for look and yes, duel file. Just copy this, Mr Tail and make it my stewardship, you know? So it will be my stone York CSS Save it The style sheet. Select Barney element. Make use off back on property about this, it will be no repeat and fixed background says will be covered up. See ripped Rosa, your flash it. And that's a background. So we're done with this part. See the next video? How can I stay 4. Box: higher doing and this would have already box here. Let's go to court file. Make yourself development. Class will be container. It will be a rule. A caller close will be going to be fun and calling your sect zero. There will be one low class that will be folks. It will be a stew element. Text will be talk to do Gordy bleeding challenge. There will be span Element on next will be saved. 30%. Are you gonna make it 50? There will be p element with this text. Just copy this and Mr Till. Save it. Good browser. Fresh it. And this is the output there to fix this select container clothes and with the modern top 8% save it. Good browser's Refresh it and they're still would the body element white select box class make use off more the property and make it creeping self gnashed red. Next line will be center seeing it too fresh it and this is your put. Now select a span element. Foreign size will be 50 pixels for Rick to be board on a level with this, see with fresh it and the CEO Select beer. Lee went here make default size 20 pixels on margin. Top 10 pixels. Save it. Refresh it. And this is your So we're done with this part In the next video, we'll ready? But in here. See what to do. You have a nice day. 5. Button: Hi, everyone. This would have been anybody in here. In the court. Trials make use off, but in element give it a class median. Next will be saying up. No, See it good. A browser. Refresh you. And this is They are put there to fix this. Select beauty in close maybe background color. This more familiar 20 pixels. Everything will be done. Pixels color will be white. Save it. What about the fresh fruit? And this is the output. Many different size 35 pixels on 4 to 8. Board. Save it Great on the Burton who ability in Nicola from Bagram could be this and for color will be waiting. Save it fresh it. Nice. So what in this part? In the next video, we'll have a custom formed a bitch. See the next video? How will I stay? 6. Custom Font: higher you. This would have already cost unfold. We're pitch. It's what? We will not come. Well forms any search bar? Well, Suard, select this wound. Andi got me this in the court file. Mr. Tail, make it my story. See what in this style shoot in the body element. Make use off. Foreign family crime reform will be once work secondary will be one of space. It said See what good about, uh, do fresh it. And this is your work. So where did this spark? In the next video, we'll make a webpage Responsive CFOX radio. How would I straight? 7. Responsive: Hi, everyone. This we will make up a page. Responsive. This is the output in case of a last device hurts coping with him device size, which is below 1200. And this is the output. Let's fix this. We need to wear two classes here. The first class will be Call them Define on second will be column be offset zero Save it fresh it. And this is the output in case off a rhythm device, Let's go below nine Topics is with your size off a a black or you can say smaller ways and this is the output notes. Fix this, giving it wear glasses here the first will be coalesce in it and second will be coliseum offset to save it fresh it. And this is your foot in case of a small otherwise that's cool below 7 68 This is your put in case of extra small device. Next fix. This are two classes. The first will be called existent and second will be Call exists offset one See it, Refresh it And this is your put in case off the extra small device. So whatever the webpage on the certify, a lot would see the next video How when I stay