BUILDING WEBSITE USING BOOTSTRAP || WEB DEVELOPMENT || SCROLL JS || ANIMATED WEBSITE | KISHORE RUDRARAJU | Skillshare

BUILDING WEBSITE USING BOOTSTRAP || WEB DEVELOPMENT || SCROLL JS || ANIMATED WEBSITE

KISHORE RUDRARAJU, Full Stack Developer || Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (42m) View My Notes
    • 1. INTRODUCTION TO CLASS

      0:31
    • 2. GETTING STARTED

      3:32
    • 3. Navigation

      9:30
    • 4. Landing page

      6:45
    • 5. Service Section in website

      7:47
    • 6. Contact us section

      7:43
    • 7. Animation with scroll reveal js

      6:15
44 students are watching this class

About This Class

BUILDING WEBSITE USING BOOTSTRAP || WEB DEVELOPMENT || SCROLL JS || ANIMATED WEBSITE

In this You are Going to learn About :

  1. HOW TO DESIGN WEBISTE USING BOOTSTRAP
  2. SOME CLASSES IN BOOTSTRAP
  3. ANIMATIONS USING SCROLL JS
  4. ANIMATION EFFECTS IN WEBSITE
  5.  RESPONSIVE WEB DESIGN 
  6. HOW TO DESIGN COMPLETE WEBSITE 

At the End of the Class you are able to :

  1. DESIGN COMPLETE WEBISTE USING BOOTSTRAP
  2. ANIMATE WEBSITE USING SCROLL JS
  3. RESPONSIVE WEBSITE

Why Choose This Class :

  1. You mainly learn about web development using bootstrap
  2. you will learn about css
  3. you will learn about scroll reveal js for animations
  4. at last you are able to design responsive website

Support :

email : [email protected]

Transcripts

1. INTRODUCTION TO CLASS: So when you scroll down, we can see the textually pop up after a certain period of time. So this is how we can make a fully responsive website design by using Bootstrap four. And we can make some animation efforts by using School revealed or JS. So if you want to learn how Buddhism is website, so keep watching the video. 2. GETTING STARTED: So let's get started. I have created a folder called midday. So instead of that I have a minute folder. So and these other four SVG images we are going to use in the upset. So we are making a fully responsive website by using Bootstrap four. So let us open, the visuals should occur. So instead of that, let us open this folder. So I'm familiar with DVs we should occur. You can use any text editor you want. So instead of the four legged, let us create a new file called index.html and then create a new file for the style.css. So by using these two files, were willing to design the website. So instead of the HTML, Boilerplate and maintaining that ICT less MEG data. So let us link the style.css also. So that is link heterotrophic caldo style.css. So let us include all necessarily student links for doing this website. So we're using Bootstrap four booster for serial links. So let us copy the CSS link bashed in third section. So we don't need these integrated and cross-origin. So let us remove distinct. So i'll let us copy this group tax also. So we have three script tags. So let us copy them. And then partially heard section. So we don't need this integrating cross-origin. So let us anymore distinct for the three script tags. So let me make this align. So and then we're going to use the Font Awesome icons for that. Let us such as Font Awesome icons in Google. So just we need a font-awesome CDN. So copy this link and then push it in that section. So there's clearly a link. So instead of HREF, We're going to push this link. So unknown, we are using a Google Fonts to make it a font-family Poppins so far that instead of the Google Fonts, let us search for the font. Poppins become that link. So I'm going to use this medium 500. So for that, let me end by this link. So copy this link and pitched him hips action. Otherwise we can include this link in style.css swore that we have to take the link input. So copy this link and then be shipped in style.css. So let me close this parenthesis. So that's fine. 3. Navigation : We'll get no, let us clear the navigation minimal so far that we are going to use the Bootstrap for navigation mode. So let us open the Google Chrome and such what Bootstrap four. So instead of a booster for the component section, so in that pecan now bar. So we're going to use this type of navigation bar. So copy that code and paste it in. Let us give it facilitates clear dissection for the navigation. So create a section with the 80 car navigation. So let us go inside of the section. Changes. Now what brand name to make, the so and then the MODIS, some extra classes which are not really required. So first let me open this in late server. So would our navigation is aligned to the left. So for that, let us remove this span tag. This is an article. And then remove these extra classes like an actor glasses. These are not really required. So let us change the home, do practice. And then features to compete. And that's led to changes praising today. And then Jane disable do discuss. So let us copy this list items and budget for two more times. So for logging section on for the sign-up section, let us based this link LA for dgamma times and change that to login. And then saying I'm. So to make it aligned to the right, we're going to use a class called mulatto. So instead of UL, let us add this class, that is M L dash. Let us refresh the page. So again Z, it is aligned to the right side of the website. Let us open this VIP first elevators. So we have a toggle button. So let us remove this, visualize it. So let us remove the background gelato. So let us add some Font, Awesome icons to make the respond to and gives them a toggle bar. So for that, let us add an IE. So instead of that, let us add a class. So we have a class called file, an FAA dash bus. Let us add some Font Awesome icon for design up. So instead of dot, FA and FA dash user. So we are using for sign up for that. And then that will let us refresh the page. So this not really included. So I think so. Then change the circle. Do CERCLA, refresh the page. Now you can see the Font Awesome icon. You can always add some stands for the navigation bar. So for that, instead of style.css, firstly, we have to remove the marginal pairing for that, set the margin to 00. So let me close the semi-colon. So let us add some status to body. Body, body. Let us font family too, Poppins. So in case if it is an art really included. So let us add a default style do sensitive. So let us make it important. Okay, and then the navigation ID. So instead of that, let us add sup position to be sticky. So I'm not at the top is 0 to ten. So the navbar class. So instead of Dark Side of the background, white. So that is the fff. And then, and then add padding to 0. So that is important. So and then add some styles for the navigation brand. So that is the main logo. The navbar brand. Inside of that color will be dash three, c3, and then 66 b. So now let us add a font-weight 2602. So and then add a padding left. So that is five pixel. So for that, we have to use some styles for that. Select navbar. Now list items. So we are using stands for the list items. So we had pairing to 0. And so now we have to add some styles to the anchor tags also. Ok. Now we're now. And finally, so for that, let us add a color to color. So make it important to align the two center so that text-align center. Add some transition that is 0.5 seconds. The page. So this is how it is look like. So let us change this padding pixel. Racine mobile view. Let us add some styles to the toggle bar. So for that, let us select a fair dashboards. Finish bars. Add the color to violet color, font size to make it important. Then. So let us remove this moderato for that served the navbar-toggle. So let us add the outline, do none, and then make it important page. So this is how it look like for small-scale events. 4. Landing page : We can create a comment for the niche section we are going to create for the banner. So let us include a comment. So that is landing van up. So this is a section at the top of the website. So write the common test landing and then Ben up. Similarly create a section. So what is included ID for this section. So idx equal to Banner. So instead of the section, let us clearly do so with the class call container. So instead of the do, let us clear to do with the classical row. So and then finally clear do it column B6. So it will take six columns and then add a class to make each center so that we help you use Pitch Center. Predefined classes by the bootstrap. So that is included the image. So let us include the first image that is Image.all is Vg. Okay, let us add some class for the image. So classical do image Nash fluid. So let us add the Altai goto so we can write anything. So I am going to write the landing image. Will get, let us refresh the browser. So this is the image we heard. So no, let us add the textural too. So copy the column indices here. So and then for the next six columns, we are going to add that text. So let us see Moody's Tech Center. Please do. Let us create a paragraph tag instead of p. So let us write it as a coding class text center. So I'm done. Let us create another B. So this patter of tag. So touched I how pressure. So now let us create a button. So for that, let us credit do we teach center? The inside of the do. Let us create a button. So let us add that bypass button and classes. Btn, btn-primary. So it, by default it will be in blue color. So let us add the font-weight to bold so it can use font-weight bold. So instead of the burton, Let us write us start coding. So let us refresh. The browser. Will just change this button position. So how to push inside of the column receives. So card this do so unambitious instead of d column Basics page. Okay? So in order to add some styles for this banner, for that. So let us take the ID banner. So instead of that banner, Let's add a background color to white colour to the same somewhat white color. And then add the padding top so that you can add anything like three-pixel. Can use the percent. Undertake a large quantity so that I am using d percent. Let us add styles for the paragraph tag. So for that, let us add a class, so that will be promoted. So instead of the style.css, let us solve this. So that is dark promo. So instead of this, we're going to add font-size to 40 pixel and then add font-weight 600. So and then add a margin top is sound depicts it. So let us add some styles for the button. So today's dot btn-primary. So instead of that, let us add the bach shadow. That is none. And then add padding. So that is the eight pixel by pixel border radius. So that is 20 pixel. So let us give it a border. One pixel, solid. So it will be weighted color. So use ash fff and then add a bank loan. So use the same VCC and six, 6B. So but the styles are not added for the button. So because these all lifestyles are defined by the boost app, but the primary for to use these tiles, we how to make it important. So let us make important for the border-radius also. So let us differentiate page. So these styles are added for the button. 5. Service Section in website: So let us create another section for the services. So first let us include a comment. So right as services of Meg do. So these other services provided with that comment. Let us create a section with the ID services. So instead of this section, let us get to do with the class called container. So let us create h3 tag will include a class called idle. So it will be center so that ad text center and then add font-weight bold. H3. Let us write as all conditions. So after that H3, let us clear down that do the class called a row center. So use pick center. So instead of dot do rule, let us cleared it. I'm gonna do with the classical column before. So let us add a glass of services for the do, do. Let us add a image. So let us add the image one dot SVG, and then write Aldous image one. And that glass has, we can write as dash image anything you want. Notice that inside of that, right, as daily contest. So and then create a paragraph tag. So I'm going to paste this text, save the file, and refresh the site. So let us, let us have some styles for the side of me says. So instead of the style.css, so self DID called services. So instead of this, Elvis's first let us write padding AD pixel and then picks up and then colored 2366 b. So let us add some styles for the class Services. So instead of padding. Gandhi pixel. So let us saddened that image. So we have given a class called service image. So now let us write width equal to 180 pixel and then height equal to 150 bucks. It does add some margin, top. Margin top as Gandhi pixel. Ok, let us write. So let us add some styles for the suddenly says hedge food. So instead of that, let us write font-weight. So that is bull. And then padding phi pixel. So let us add some marginal to margin top pixel. Let us use a text to uppercase page. So this is how the all contact section look like. So let us copy the same column before. And then for two more times. And then change the source of the image to image and then image to debate. So these all contact section look like. So then change that daily condensed to weekly contests and then daily conditioned to monthly contests. To refresh the page. Look, it's fine. So let us add a button. So let us, so before that, let us make a Underline for the content section. So we have given a class called title. So use Title and then added before. So non write content. So space, back grown. So there is same three, c3, double six B, and then a height to phi pixel. And then we do 200 pixel. And then add margin left, that is auto. And then margin-right auto. Align to the centre. And then add display block. So let us write the border-radius transform, translate y. So we can use 46 pixel. So let us refresh the page. So now we can see a underlying below the All Content section. So now let us include a button below the all contact section. So for that, let's copy the Martin from the banner. And then below the service will then patient below the rule. So let's change the text. So instead of dot button, right as enter contacts. So save the file as the output. So this is the button for the all contact section. 6. Contact us section: So another security, another section for the contacts is so before that let us add a comment, landing banner to contact as. So below this comment. Let us clear another section with the ID card contact. So instead of this section, let us geared to deal with the class container. So instead of the dual, let us clear the hedge three, the classical ideal. So aligned to the center, we can use a sender and then use font-weight boot. So instead of H3, let us write as contact as a defense DuPage. Fine. So below the H3, let us clearly due to the classical the rope. And then let us take a margin. Let's take it batting of 4% from the top. So non-graded deal with column B six. And let us make it centered. You can use to send data. So and then inside of there do there is clearly a image. So we can use the image 3.The SVG. So instead of the ol tag, right, does contact image. So let us include the cat class also. So that is conduct dash IMG. So let us do that column the six, and then add a tech center to make it center. And then add a padding top 4%. So instead of do, let us get on the do with the classical contact details. And then we let us make it center, use Dick's dead center. And then same batting 4%. So instead of that contact utils class. So let us get down in that paragraph tag. So we inserted that. Let us create a i with the classical FA, FA dash map, dash market. So instead of the paragraph tag that has included a location that is make do. So and then add the location. So that is, so let us get another paragraph tag. Instead of that, let us theta i0, the class classical. You have FE and then f a dash. So what it has included a mobile number plus 91. Write anything you want, like double-blind 89988. Then I just created another paragraph tag. I unused a class called FA. And then f, a dash envelope. So we'll use ENV E and it will be 0. So we'd start 0. So let us write it as, let us write the email ID. That is make do a dated 0.com. So we'll see if the file or the city fish don't put. So we have to reduce a mid-size. So inside of style.css. So before that, let us include the copyright also. So for that, create a paragraph tag with the class Car. Copy dashed right? So let us make it goes center. Center, and then use font-weight bold. Please have better-off tags. All right, as all rights reserved. So let us make the copyright symbol. So for that, let us use BY nine semicolon. So and then make sure the file and refresh. So at the bottom you can see these are two instead of cellular diseases. So self dot conduct image. And then add a bit to do thrifty pixel. And then height equal to def did except. So let us take the margin also. So and then margin top. So again, used 20 pixels. So we will and then suddenly contact details. So we use dot contact details. So instead of that, let us make margin top 40 pixel. And then let us make some styles for the batter Feng also. So use font-weight. So frustrated us make font size that equal 15 pixel and then font-weight bold. So let us make margin-left, skip Excel, and then text-align left. So far to the Font Awesome icons. Let us add some styles. That is margin-right to pixel. And then font-size, prolific cell, and the height equal to 40 pixel. And then added a bit that is 40 pixel. Padding top. So you can use some pixel 275. We can see this is the Lipset. 7. Animation with scroll reveal js: So let us use cruelty will yes. So for that, the Google Chrome, such as schooled images. So open the website so that the conduct guide. And then click on installation to let us copy the script tags. So and then paste it in the head section. And then copy the next script tag also. So and then patient in the head section. So let's close the script. So below that and customization, we can find that the function that is given. So we can add some delay that is 500 milliseconds. So we're at the bottom of the HTML. Let us open the script tag. So instead of a script tag, let us pick distinct. So let us add a class for the banner image. So that is the peak. So I'm for the paragraph tag that has given IT color sub one for the button. So let us include this script. So let us remove this tagline and then include pick. So copy and ambition for two more times. T2 dot promo dash title. And the next 12. So that is f sub. And the last one has quote, let us make a dealer to those and so on then delay to 4000. And the last one to Pluto's him to see if the file output. Now we can see that text will be revealed after some time. So we have given a delay of certain time periods. So let us make the same thing for the remaining Caltech sectional too. So for the contests, let us add ID for the hedge for data. So make the same ID for the all hedge full and for the paragraph tag out of the same ID as content. So copy the same ID and fish it for all the paragraph tags inside of the old context section. So on for the button, let us give an ID called Contest underscore play. So copy this skipped. And below that, it especially for the more times. So let us make this outline. So let us include this ID. So change the ash CO2 as sodomy says. And then ask, go to Data. And then content. And finally changed the context underscore plate. So let us make the delay also. So 500. And then change the delay to 504, the content change to the condition underscore play 200. So let us refresh the page again. So nobody can, when you scroll down, we can see this text will be shown up after a certain delay of ten. So let us make the same thing for the context of section. So use the ID peak. So we have already given the scroll effect for this. So that is for the contact details, AID called info for all the BTEX. So for the second Peter, we can do in full one on, for the last one in photo. Copy script tag. So bear it for three more times. And then change the ideas info. And then Jane side of 0s is 241. And finally info to change their dinner time also. So five hundred, eight hundred and then chosen. So what if the page, again. So when you scroll down, we can see that textual will pop up after a certain period of time. So this is how we can make, if we lead responsive website design by using Bootstrap four. And we can make some animation efforts by using school db.json.