Bootstrap 4 Project | Lukas Vyhnalek | Skillshare

Playback Speed


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

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

16 Lessons (1h 20m)
    • 1. What we will create?

      2:22
    • 2. 01 Navigation

      7:30
    • 3. 02 Home Section

      5:04
    • 4. 03 Call to action

      2:57
    • 5. 04 Services

      3:31
    • 6. 05 Portfolio

      8:17
    • 7. 06 Contact us

      7:24
    • 8. 07 Footer

      6:51
    • 9. 08 CSS Basics

      1:23
    • 10. 09 CSS Buttons

      7:23
    • 11. 10 CSS Navbar, home and call to action

      4:12
    • 12. 11 Services and Portfolio

      4:57
    • 13. 12 Contact Us and Footer

      3:48
    • 14. 13 Responsive web development

      5:44
    • 15. 14 Adding Animations

      7:55
    • 16. 15 Bug Fixing

      0:27
  • --
  • 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.

118

Students

--

Projects

About This Class

Master responsive website development with Bootstrap 4 from Scratch!

This course will teach you how you can use Bootstrap 4 in order to create real-world websites. We start completely from scratch, at the Bootstrap documentation. Which is a great place to learn about Bootstrap 4 components and utilities. In my opinion the best way to learn any technology is via practice. That is why, we will jump right into projects where you will learn the most important concepts of Bootstrap 4 and responsive web development.

Once you've completed the course you'll be able to design and develop you're own Bootstrap 4 responsive websites and themes. The source code for the completed theme is added as a resource to this course. Same goes for images used at the website template that you will create.

You do NOT need to know Bootstrap 4 for this course. The course is designed even for complete beginners. If you are already familiar with Bootstrap you can skip the first section and go directly to the projects.

Who is this course for?

  • Anyone who wants to learn or expand their Bootstrap 4 knowledge

  • Beginner web developers curious about responsive web design and Bootstrap 4

  • Someone who wants to create real-world websites with Bootstrap 4, HTML 5 and CSS 3

Are there any course requirements or prerequisites?

  • You need to have basic knowledge of HTML and CSS but only a beginner understanding is required.

Course Curriculum:

As mentioned earlier, we start with bootstrap 4 documentation. I took a moment to explain the CSS Grid layout often used in Bootstrap websites. Then we take a look at Bootstrap Components & Utilities. Then we finish of the first section with a brief lecture on Best Practices and Versions of the bootstrap library.

After finishing this section we move on to first project, which is the E-commerce Landing Page. This web template is fully responsive. We start implementing it from scratch but if you want you can download the source code.

Then we move to second project which is a simple responsive landing page. Once again implemented from scratch.

I'm here to help you along the way while you master Bootstrap and I'm ready to answer any questions you may have.

So do you want to learn Bootstrap 4 and create your own responsive websites?

Enroll today and I will see you in the course.

Meet Your Teacher

Teacher Profile Image

Lukas Vyhnalek

Microsoft Employee, Programming Teacher

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
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.

Transcripts

1. What we will create?: Okay? Yes. So let me show you what we will create in the next few hours. So, as you can see, there is the home page. We have a beautiful animation right here. And the best thing is that we will created animation all by ourselves. Okay. And if I reloaded Page, there are a few more animations, as against the right, And yet we will use a library. Four debt. So don't worry. We'll write it like, literally in five minutes. Okay, Then we have the call to action section A Z can see there are animations playing on the background, and once we scroll to the poor in the animation will start playing and then we have deport four year old section and inside here we have, like, Okay, so about it inside here we have, like, few images and some text around it. And then we have the contact us section where we have, like, simple form once again, the animated button and a a map. And lastly, we have a footer. Basic simple footer. I think it looks quite cool. So let me actually show you how it looks like on a tablet as you can see there is the menu . Simple drop down menu. Then we have a the 1st 1 The home section. Basically. Okay, It looks quite cool. In my opinion, we go to Action section also these services and deport four e o. Okay, it looks quite similar to the to the desktop size. Only the contact us page is right now takes the whole screen okay. And the foot looks exactly the same. Cool. And let's also take a look at the moon bio versions. So as you can see, there is once again the drop down menu. And then we have, like, a same thing, right? So the home screen, we have the buttons call to action. And right now each services take the whole screen. Okay? A and something goes for D portfolio. This will take the whole screen. Okay, let's move on inside. Here we have the contact us. As you can see, there is a map, Andy form. And lastly, we have the footer. Everything is styled properly and works great 2. 01 Navigation: Okay, so let's get started. As you can see, her is my visual studio code. Here is the bootstrap for extension. Make sure to install it. Okay, so let's go and reach out to our files that we have in here. So as you can see, there's the CSS folder inside, which we will have to animate. Okay, so the animated that's he assess, then we have the image folder with all of the images that we need. And lastly, we have D JavaScript folder. Okay, so let me actually get started and create a new file called index dot html. And let's also create a new CSS file. So inside the CSS folder, let's great demain dot CSS like this cool. So inside here we will use the bootstrap for extension and create the basic templates of simply type before and then hit Enter and the let's said the title off the website. So, for example, back toe Okay, like this and it's safe so as against see, everything is automatically in boarded cool. So let me also add another styles that we will need. So let's write a common and inside here will be the the style well the style. So the main style of ours, and we will simply type a link, and it will be a style sheet. So, like this, and then we will have a reference to it. And this will be inside the CSS folder and main CSS. Let's close this thing. Okay, So what? Save it and let's also import the front. Awesome. So basically this thing, Okay, this will in in 40 Aikens that we need so inside here. Allergies, right? A new ruling with the same routes. So this will be a style sheet like this, and the reference will be to the link that we just copied. Okay. And let's close the tech and save it. And lastly, we will also need a fond so l just close the step and let's take a look at the Google phones and inside here we will use this one. I cannot even pronounce it correctly yet m and something else. Okay, Whatever. Basically, you just want to select this formed, So click on this button and then inside here, you want to customize it and import even the bold and the Super Bowl and yeah, and then you want to simply just copy and paste this link. So copy and then inside our project, well, you'll just based it like this. Cool. So debts, basically every CSS a property and dependency and we have been taking care of it. Course. So let's actually reload the page and see how it looks like there should be nothing. Okay, the title is correct. So let me actually get started with the navigation. So inside your body, what we will do is I would just close this thing. So we have more space. And inside here we are basically typing here, Dean of Bar. So the bootstrap for enough bar, and we will use the default, not bar. OK, so this one Cool, let's gather it off those things. And then, as you can see, there's enough bar expand. So that basically means when do you on the enough bar to expand? So when we are on move iPhone there Darabi like the menu I can that you can click on and the menu will expand right. And inside here we can define the with of the device where basically the Aiken will appear . Okay, So if this is a small like this, so That means the Aiken will appear on a mobile phone. But on tablet, we will just have the menu like this the same way as on desktop. Okay, if we put a MD, that means the the Aiken will be even on a tablet. Okay, so, yeah, let's put in nearly empty. And you can even make the enough bar fixed at details. So Fixed top. Okay, let's actually reload this thing and see how it looks like. Okay, so there is the enough bar. It should be fixed. That job. You cannot see it right now. Cool. So then inside here, as he can notice inside our theme, there is a space around it. So that peace, it is inside a container. So you can simply type in here D container. And it doesn't. Yeah, that's container. It just took a while. So, like this and yeah, let's get rid of deed up. And let's simply copy based everything. So all the content Well, just select it, control X, and put it inside here. Cool. So then we have the Navarre. So instead of this, we'll just type the victor, okay? And then when we have next, then there is the Eiken. So we will do just nothing about it. And then there is D enough bar. So the actual enough bar. So let me just get rid off this form. We will not need it anymore. And inside here is the drop down menu. So you can even keep the drop down menu if you want. But we will not use it in our projects. So I will just get rid of that. And yes, So let's actually styled in that bar. So the number should have the classical laughs now bar collapse. And then we also want to move enough bar to the right side of the page. Right? So inside here, we will have just justify go intent and Okay, let's save it. Unless actually reload this thing and see whether it works. Okay? It doesn't for some reason. Okay, Let's see. Okay, inside here. You want to get rid off although stuff and simply inside of your time d naff. And let's reload this thing and see whether it works. See, I had works now. Cool. So then what we need to do is basically change all of those Aikens off those items Story so inside here is the about us. And then what do we have next? Pricing team services and gallery. Okay, So pricing and let me just coffee based Does be based Bryce saying team. Then what? Service this and then gallery it very much. Doesn't matter. You can call it whatever you want, right? And lastly, was the button Contact us, right? So contact us, and as again, notice inside. Here it is styled as a button. And in order to do that, we can simply just at glasses to this link. Right? So inside here will be just the button, and this one will be the button outline secondary like this. Okay, so Well, it's actually reload this think and see how it looks like. And it looks like this. Cool. So that's pretty much it for this one. 3. 02 Home Section: underneath the Neve bear. We have the home section, so let's just create that. So underneath the nap bar, I'll just move like this and we will start typing a command for the home section. Okay? And this will be just a new section. So that means an html five tack with the class home and because we will style it later on in our CSS and then also the glass container. And inside here we will have a diff with once again the glass role. And it also have a margin a detailed if I'm not mistaken and OK, and then what do we have there? So inside here is a image, right? So let's actually write that down. So this should be a deaf with the glass coal large and six and have some margin a d top. So margin top will be five and also batting on the y axis just to make the image bigger. Okay? And also depending on the left to me to move it towards the right. Okay. Cool like this. And then we actually have the image itself. So there was a few classes 40 image. If I'm not mistaken, it should be the image through it, and it also should have the alternative text and the source of the image, which is in the image role that are, and the phone that being g. Okay, So if I close the deck, save it and reload our page. So this one and reloaded, As you can see, there's the image, and it looks exactly the same as this one. Cool. So let's move on to D to detect bark. So once again, we will create a new death with the class off the remaining six so called large and six. And we also wanted to be aligned on the Y axis. Right? So margin on the Y axis will be auto. And then we will have another class with Nero. So basically, inside the six, we will have another role. So another 12th. Okay, 12 combs that we can use and from the 12 columns will use only 10 and we will have the once based and the other one also is a space around it. Right. So as against the around here, there's a space inside here and space inside here. So that's basically those ones. Okay, so let's actually write it down. So inside the world we will have the class and this one. We can also add a glass, too. It's because we maybe want to style it in RC assess. So let's call this one home content. And let's also give it a offset. So offset on the heart screen will be one. And the call on the large screen will be then. Okay? And yes, So let's let's close this thing and let's actually add the heading. So, age one, um, we also need to add a glass through it, some some batting. It will definitely need some batting. And yeah, let's copy pasting text. So this one, Copy and and based. Okay, here it is. And that we also have a paragraph in there, and this one will have just the same class as the headings. So, Al, just copy based it in here and copy paste this text. Okay, so this is just a larma Epsom. You can obviously use some alarm Epsom generator, or you can just keep those texts empty or you can write whatever you want. Okay. Cool. And then we have two buttons. So one of them is a button with okay, but like this, with the glass off basically be Tien is a button. And it also is the button outlines secondary like this. Okay. And then we have also, if I'm not mistaken day out. Yeah, they are large. Okay, so button large button large like this. OK. And it says learn more. So learn more like this. Say this thing and let's also just simply copy basically button for the 2nd 1 and the wheel styling later on in our CSS. Okay. And this one should be just button secondary. And it says, I think contact us or something like that. So contact us. And yes, so let's save it. And let's actually were load this thing and see how it looks like. Okay, it looks quite good. So we will style with the phone spacing and the buttons later on. Right. But the CMA looks quite good 4. 03 Call to action: All right. So let me start with the comment, and this one should be just the call to action. Call to action like this. And inside here we will have a section and inside the section while we will actually at a class duty section. Right. So the section will have a glass and the glass will be just called to action. Call to action like this. And let's also add a batting to it. So betting on the Y axis will be around five. Let me just get rid of this one. And I also need to leave this thing. Okay. And then what do you have? Well, we have some def with a class container. Okay. And inside it we have the text and stuff like that, but it's great. Small, right? It's like half of the screen, and it's aligned to the center. So was actually write it down. So de text is a lying to center and the with will be only 50% okay. And an inside ID. We will have the h do heading gay like this with the glass basically betting on you. I access. Okay, so we will add the same padding gas city in the home section. Okay. And it says Just call to action. If I'm not mistaken, so call to action. Obviously they will say something different in a real website. And yeah, Then we have a deaf. So this basically this line, okay? And we need to add some glasses to it and then style it later on with the CSS. Okay, So? Well, basically, align into center. So margin on the X axis will be set to auto, and then we need to add some class to it so that we can style and later on in d c sso, for example, heading line. Cool. And then what we have. We have some paragraph if I'm not mistaken, and it also has some space around its batting on the Y axis will be free. Cool. And let's actually coffee based its text. So copy and based around here. Okay, based it. And then we have a button and the button ISS What? It iss Well, let me actually take a look at it. It's not different. It's not the outline. It's just the primary. Okay, so this will have the button. It's also a larger button and it's the button primary if I'm not mistaken and it says just learn more like this school. So let's save it. And let's actually take a look at how it looks like there will not be the the black background or something like that. And also the line is not here body I. Overall it, it looks quite cool. 5. 04 Services: So let's move on to these services. If I go back to our theme and take a look at them, OK, these services looks like this. So, Al, just simply write another comment. Ah, like this And this will say just services. And inside it I will create a new section and OK, he not service. Obviously that section and it will have a glass cold services so that we can stand it later in our CSS if we need to. And then what do we have? What? We have some heading, right? And it is just a lined to center. Right? So it's basically the same as this one, So I will probably just copy paste this thing, this whole thing. Okay, company based. Save it and let's get rid of dose too. And inside here it says, just a services or something like that. Cool services and genders D line. So let me actually reload this thing and see how it looks like whether it's actually aligned to center. Okay, it s cool. So let's go back and let's see what we have next. So that's thes services and the line taking care off right now. Let's take care of the content. So I will create a new death with the glass container. And inside it we will have a another death with D classroom. And inside it we will have a nonnative. And that will be just this thing. Okay, so I'm actually write it down so it will have a class off call Large four if I'm not mistaken, or we can even display it. Same way as on the middle device. So even on day by day, we will have, like, free free comes next, next to each other on one road. Okay, cool it. Have a text align to center. Like this. It half what did half. Well, that's this. That's it. Probably. Let's see. And then we have and I can write. And the class of the action is just a fait. And then if a laptop, if I'm not mistaken so like this and screws this thing, okay. And then inside here we have the h four heading with the class off, betting on the Y axis free. So we just keep the batting pretty much same sing way throughout all of those elements, right everywhere, spouting free and 40 section is betting five. OK, cool. And yes. So inside here it says just design. Okay. And then, lastly, we have the paragraph, and it's just also it have some batting about this time. It's like betting between those two, so that's a bit larger. So padding at the bottom will be just five. Okay? And let's just copy based this thing Copy and and based. So that's that Should be one article there. Six of them. So allergies copy based those. Oh, okay. One more. So this and save it. And let's actually reload the page and see how it looks like whether that's okay. Yeah, that looks fine. 6. 05 Portfolio: So I also changed the heading Andy Aiken for each of those articles so that it match our theme. Right. As you can see, there's the briefcase and code and CSS phrase. So this this one buck and magnet. Okay, so it looks like this, and it looks exactly the same way. It's as year. Okay? Only the styling is a bit different. Will fix that. And let's move on to the portfolio part. So deport four e. Oh, cool. So inside here, I would just great a new comment. So portfolio like this, and then we will have a new section. So this section will have a class off portfolio so that we can style it later on. And also a container fluid. So what it means, what's the difference? So D container. Okay. I need to close this thing cool. And so D container, as you can see, for example, in here takes only this part off case owning from here to here. Okay, this is a space and the container for it just takes the whole screen. Okay, So the 100% with cool and yes, So let's right. Actually, the rest down. So once again we have the heading, so I'll just copy vase this thing. And yeah, I noticed just one more thing, and that is dead inside here is a different background, right? It's the background light if I'm not mistaken, so let's actually add it. So inside here should read it back. Round light, Okay. And yes, so inside here are just copy. Basically, Dext and its support for Leo like this. Everything stays the same and yeah, then let's actually ready content. So if glass row and inside Hero Uh, well, you have a few images and a few had no like articles or something like that. Basically, descriptions of the project. So let's actually do that. So, first of all, we have a image and in heavy glass, off call large and free right Does four of them 12 divided by four is free and there's also some batting by default. So I will just remove the batting by writing betting zero and yeah, so it's close this thing, then what you can notice is that there is some green like rectangle in front of it, so let's actually write down. So it's like just a diff and I will just give it a glass off. Filter it very much. Doesn't matter. We will just started later on in the CSS. Okay, Cool. So, uh, let's just ride the image. Let's add the image so the glass will be just image through it so that it will take the whole space it can. And the source well, be just the in the image folder. And there is, like, the portfolio one cool. And let's also add the out and let's just keep it empty. Obviously, if you want to write something new can and yes, so let's move on and right D description. So inside here we will have a new deaf with the class. A cool large, free. Okay, so they are the same size. We also need to add some glass to it s so that we can style Italy their own in our CSS. So let's just keep it dark gay. And I forgot to close this thing and I need to writing. You'd if Okay. And let's see if this thing and after after the dark, we want to display it flex. So we will display it as a flags Voakes, and we will align those items to center. So a line items is basically how we can define how those items will be aligned on the Y access and justify content aligns them on the x axis in the flex box. Okay, so inside here, I will also align into center on the X axis. So justify content and center like this, and that should be it. Okay, so let's actually write the actual content. So inside here we will have a glass. We also need to add a div with the glass text center. So that it this actually centered with the text? Okay. And inside here we will have just some heading. So, for example, heading off the level four. And let's just add some batting on the Y axis like this and inside here, it just says html. And then there's theon percents like this. Okay, like this and CSS. Okay. And let's actually write those Aiken's So one of the Aiken is the Facebook. So once again, we are using the front. Awesome. And this one is the Facebook. Okay, Like this. And another one is the twitter. No, I forget to put them inside. A I think obviously he wanted burbling some something so I'll just add a link to it. And I will just put a margin to the links or marching on the X axis, right? So that there is some space we can even use the margin on the y axis yet. Why not? Why not? I will just use the margin on the oh, the area surrounding the element. OK, cool. And what we have next. Well, we obviously want to define the viewing, so I'll just keep it like this and cozy tech. And actually, let me put this like an inside inside the link and let me just cover days distinct so could be and and based. And there's four of them and inside your excess Ah, Twitter return like this, then terrorist Google and lastly is get So let me actually save this thing and see how it looks like. So I will reload our theme and move to the end. There is deep portfolio, okay? And it looks quite cool, right? There is the HTML and CSS induce Aiken's so Yeah, let me actually, just okay inside here is a title, Okay? It should be at center. I dose elements should be at center. So if I reload the page here, they are cool. And yes, So let me actually copy paste those things because there is, like, two of them. So, like this and inside here will be the second for for Leo. And I'm not sure what it says in the in the actual resulting theme programming. It's s okay. So instead of this, it will say programming Cool. Let's save it. Unless for loading page and see how it looks like. Okay, there's another imagine for women. Cool. And then what we need to do is just basically change the order of them. So first of all will have the text okay, on the next throw. And it will just say what design or something like dead. And then we will have the image. Okay. Is so image girls underneath the dext and the portfolio will be just like free. Okay. And let me just actually company based this thing and change its 40 last one. And you asked. One says, I think port for your or something like that behind it. It doesn't matter. Okay? And inside here we'll have the four. So let me actually reloaded patients see how it looks like. And basically, the portfolio is the hardest part off the off the whole project. And Ed looks good. So, yeah, we are done with dead. 7. 06 Contact us: the contact us page is quite simple. As you can see, there is the contact us than there is the A, some map and some inputs. And so Alice was write it down. So underneath these section, I will just write it in you comment. Okay, So, like this, and it will just say contact us. Okay, Like this. And we'll just have a new section for it section with the class contact and inside here we will have a new def with declasse container. And yeah, Then we can just once again use the heading from different sections so that we don't necessarily have to write it down. So I will just got the basic getting OK. I can scroll for some reason what's happening. That's weird. And yeah, OK, so I will just based it inside here, and then what do we need? Well, we need a Google Maps. So, Alan, just create a new def with the class coal on the large sixth. Okay. And inside it, I will just based the Google maps code that you can generate. I already generated it in at the Google Developers, right. There's a A p I that you can use. And basically, you can get decode that I am using right here. Okay, so that will basically take care of the Google map. You can obviously change the place where you want the math to be displayed and stuff like that. So yeah, and nothing that we want to do is create a new def. Well, actually, let me change it to form, right, because we will have just a form, and it will have the glass of call art six. Right, So the other half of the screen and inside here we will have the inputs. So there's, like, the class in the for reform group. Okay. And inside it, we will have the label. So the label for male like this and it will just say email like this. And then we will have the actual input so input, and it will have the i. D. E mail. Okay, so I d email. It will have the type of female suicide will be email like this school, and you can obviously defined name and stuff like that if you want the day. I also add the area described by so described by this one. And I was just right e mail hints or something like that. And you also a placeholder. So plays older and it will just say and their email like this on. Let's go, Zedek. Cool. And let me actually go to underneath and inside here I will write a new tack and it will be a small text. Okay, so it is just a tack for a text and it will have the i d off this email hand. So let me just based this and yeah, it will also have a glass off a form text, so form text and also a text mute it. Okay. And yet that's it. So let me actually comfy base the text from here. Copy and then based like this, right? Obviously you can just delete that if you don't want it to be displayed on your side. And yes, so that's about it. This one. Control taking care off and let me actually just copy paste it and do the same 40 name so name and inside here we will have name inside here will be name Any type will be next and instead of enter email will be inter name and averages get rid of this thing, okay? And I will also get rid off distinct. And yet it should be it. That should be it. And last the wheel, half the message. Right. So that's the name taken. Care off and let's move on to the message. So around here I will just write e message. So the label message and it will be 40 message. The idea of disarmament will be message, and this will be a text area. Okay, So instead of input, OK, text area and let me actually define the closing track for it. Cool. And instead of here should be, like, enter message or something like that. And yes, So let me actually were loading patients, see what it looks like. And I think we probably forgot about something, so we will just need to fix that. Okay, there's some error. So what is going on? Okay. Obviously, inside here, we need to define the with the glass row or and put everything from here inside it like this control X and control we and let's save it. And let me actually reload this thing. And I notice another mistake I made so inside here I forget to define the glasses and the glass should be just form control like this. So average just copy based those and put it to ever input. So inside here and even inside here. And let me just save and reload this thing, okay? And let's see how it looks like. Now there is no change that I save it properly. Okay? There's no change. Okay. I made a mistake. I made a typo. So control. Okay? And let's were loaded. Page right now, it should work. And yet another thing that you can know, this is the dearest. A multiple rows inside the message. Okay, so let me actually change that by typing inside pretty much down here, all right? Just rose and the number of them. I'm not sure. Ready? You can see it because I have had inside here, so yeah, basically, this thing grows and the number of rows just five or something like that. So let me actually saved this thing and reloaded. And you have We also need to add the button. I forget. I completely forgot about nothing. And s o d button is just the classical buttons. Sodi type will be submit and the glass will be just button. It's the large buttons. So button large and it's the button outline primary. Okay, so basically, we will start later on, and it just sent submit or something like that. I think you can change it to Sanderson like that, that if I reload the page, it should look. It should look. Yeah, it looks like that. So cool. Let's move on to the footer. 8. 07 Footer: Okay, So before we go to the footer, we also need to take care of some problems, I notice. Well, that's those are not problems, but they are definitely not necessary. As I copied and pasted those elements, I noticed that we also have the container class inside here, and we also have the with off 50% inside here, and we just definitely don't need there. And yet, also, as you can notice, there's like some padding on the Y axis with the heading. So let me actually add that glass, right? If you take a look at the heading inside, our final theme there is like betting around it. So let me actually change all of those. So even the the portfolio. So instead of container and instead of the with off 50% I will just add a batting on the Y Access off five and yet seen goes 40 services, right? So instead of container right, we don't need to just change the with and 50. It would still work, but it's better this way. So let's add the batting off the five cool. So let's actually move on to the footer. So allergies, right? A new Calmund a called footer like this. Okay. And yes. So let's take a look at how it looks like we have some heading. Basically. Then we have text, we have links. And then we have, like, the the no copyright and stuff like that. So yellows Write it down inside here, and we will create a new tackled footer with the class footer if we want to style it. And then inside the food, we just have, like, few things, right? We have the basically the heading. I can just copy paste it, so copy and paste it. And inside, you're just say Victor or something like that and obviously want to probably say the name of your company or something like that. And yes, so then we have the the riff, def Sorry with the text. And yes, so let's added a row. And it also has some basically space at the bottom. So let's at a marching to bottom off free because we, like, keep using the free. And yes, so let me actually write down. So this one will have the def off the class. Call large. And as you can notice, detects doesn't flow directly to the edges. Right? So this would be like 12 but it has, like, eight. Instead, I would say so. Call large eight. And it also have a offset on the large off to. And we also aligned the text to center. So text center and then and then we have basically the paragraph. So our just copy paste this thing and we actually don't need any class for it. We'll just have, like, d plain text. And if we need to style it, weaken style it using the footer class. Right, so we can target it as a paragraph inside footer. Okay, school. And then we have the menu. So basically an unordinary list with the class. Ah, navigation. Right. So we have the basically want to align it and at one row, and then we want to align it to center. So justify content and center and yeah, and inside here we will have just a linguist the glass off enough item like this and inside every enough item will be a age so basically a link. And with the glass off a ne fling like this and also some a drift. So basically, you can write whatever you want? I was keeping this way. And inside here, it's like about us or something like that. And yeah, you usually want to put, like, terms and conditions of the page stuff like that, Like idiots. Or maybe something like that. I will just drop in based it several times. And let me just reloaded Bates, see what looks like. So obviously it will not be black, and it will not look like the final theme. Right? So inside here will have the the line body. It looks quite cool. And lastly, we have the credits, so yeah, this is Ah, for example, this image is from the free pick side. If I'm not mistaken on firm directors. Yeah, basically from this side. Okay, so we need to credit them in order to use it for free. Right? So, Jones, don't put those links a way you could get suit. Okay, so that's actually a headed into our bait. So, uh, down here, underneath the death. Well, actually, underneath this death, okay, we will have another def. With a class off. I know, like copyright. And we can add, like, text centered center center. Okay. No, I have a typo Center coup. And then, like some batting. So betting on the Y axis, let's say free and yet also a border and topped and let me actually make the text muted. So it looks cool, right? It's not muted inside here, but it will look better when it is muted. And then we have, like, some paragraph basically made by me. Cool. So, Al, just copy and pasted inside year. And instead of this thing, we will have to copy like this, and then we have the link to do you vector designed by once again a paragraph. And inside you will have the victor designed by somebody somebody from here. So reaction needs at a link with a draft being equal suit this thing. Okay. And yeah, well, let me actually at https in front of it. Like this school and, uh, yeah, inside as a text, we will just have the same thing. So this thing like this, and yes, So let's save it and let me actually check how it looks like. So if I were loaded page, there should be, Yeah, that redness. It looks great. Cool. So that's pretty much it 40 foot. There 9. 08 CSS Basics: Right now we are down with the HTML. So let's actually take a look at the CSS and style Deep age Exactly how it looks right here . So yet let's go to the main That CSS inside here. I already pasted the colors that we will use inside our theme. And let me just actually start with the whole body. So basically everything that will apply to everything and inside here, where you want to define the phone and the front is just the one that we ah already imported from the from the Google phones. OK, and it should spell like this Ah, like this and let me actually reloading debate whether it works. So if I go to the theme and reload debate, the phone should be Yeah, it's it's different, Different, different. So let me also target defund wave off the headings off some headings inside. Here we will have the the biggest fund wave. Okay, And then we will have the smaller 1 40 h four h five and h six. Right, So these one will be still Boulder bod and not as bold. So this one will have like 700. Let's save this thing and we're loaded. The heading should be, like, quite bigger. Okay. Damn it, This 10. 09 CSS Buttons: All right, so let's move on and style of those buttons. OK, so let me go with a comment for buttons and was the government's star and slash like this. And then what do we have? Well, we have the button primary. Well, secondary right, Saudi button outlines secondary, and we want to style it a bit. So inside here of what we want. Well, let me actually go back to the template and see how it looks like. Okay, so we have the background color of none. Right? So the background color, we'll be transparent like this, and this needs to be important. Otherwise, the Bootstrap library will override this. OK, And then what do we have? We have the border color and the border color is deep black one. So it was your A 1 16 and 27. If I'm not mistaken. Yeah, is what? And let's also write it as a important thing. And also the color will be the same like this, and also important, like that's cool. Let's save this thing and actually see how it looks like. So let's go back to our theme and reloading page. And we also need Teoh change the border so born radius will be zero. And it's also needs to be important. I'm not sure. So I'm actually really low debate. See how it looks like yet it doesn't necessarily have to be important. Cool. So does basically button batteries still don't have the animation in there. So let me actually go ahead and create the animation. So in order to do that, we will create something called a sotto element off the CSS. So you can think of it as a def or something like that that you can target by using the before or after keywords. Okay, so basically, this thing is the select select selector. Okay, for the diff, that is before the button outlined secondary. Okay. And in every social element, you need to define the content. Usually it is just empty, and then he can style it. So the position will be absolute like this a the background color. No will be the primary one. So this one Okay, copy and paste it cool then. And what we have next d top. So we start a detailed visibly, this will be set to zero and the left will be also set to zero Andy. Hi will be 100%. So basically everything and be with will be zero. So did you will not see it right by default. We will not see the before element, but it will be there. We also need to define the Z index so that it is actually behind the button. So the index minus one and, uh yeah, also the transition property. So transition. And let's make it, like, 0.5 seconds like this. And that should be at so also, we need to define inside here D position relative. So position relative, okay. And death. So then we actually need to take care of the animation. So basically, button outline, secondary and hover. So when we have our over the button outline secondary, we want to do something to D before element like this. And what do we want to do? Well, we would like to send the with 2 100% and debt should work. So let me actually go back to our theme and reloading a page and however overdose buttons and see whether it works there. Innis. Cool. That's that's quite cool, right? And yes, So let me actually take care off the other button, so this should be just button secondary. It's buttons secondary like this, and it should have the background. Often he black want. So black Juan. This needs to be important. A. The board radius is off. Nothing's aboard Raiders. We probably could have used, like the only the button class in order to target the board radius body. It's too late for that. And yes, so also, we need to define the voter color. Andy. Border color will be just like Juan. Let's make it important. And let me actually see how it looks like it should look exactly like the one at the theme or gate, thus right. And when we have our over, it just changes d color. So that's an easy animation. So basically, when we have her over the button secondary, but nothing secondary, Howard, And what do you want to do? Well, we would like to change the color to the primary on, so this one and we also need to make it important. And yes, if I were loaded page and have over it, it should work. Okay, It does cool. And also we need to take care of this one so that the button primary and that's the last one. So inside here we have the button primary, and let's actually go back to our theme and check out how it looks like. All right, so that's it. So that this one will be also easy. If you feel like you could do this on your own, feel free to pause the video and try to do it on your own. Okay, I will be here if you if you somehow mess up or or get lost. Okay about anyway, we need to set the background color. Dan, we need to string d Border, radius zero okaying. Same as before. And then what do we have? We also need to change the border color once again to the primary one. And this, once again is to be important like this. And the color is the black one. So the black color and this is also important. So it saved this thing and let's actually do the hover effect. So when we have our over it okay, the background and the exchanges so button primary hover and when we hover over it, the background will be changed to transparent or or the I'm not sure. Okay. Did like one. Cool. So the laquan suit is like the 01 this one, and let's make it important. Cool, Andy Color. Well, change to the primary one. So this want and let's make it also important. And that's about it. Soared me actually reload and see how it looks like. Okay, there there is the button. And when I hover over it Derris Cool. So that's basically the buttons taking care off. 11. 10 CSS Navbar, home and call to action: All right. So let me go from leads up to the bottom right now. And so inside here, I'll write a new common 40 not bar. So a navigation bar. And yes. So what are we going to do? Well, you like to target de Enough bar, and we would like to change the background of it to the white one. So completely white color. And also the border color so Well, yeah, there's only border at the bottom, so border bottom and this one should be just one pixel solid and some light color. So, for example, E okay. And then what do we have? We have, like, the navigation, right? The logo, Andy, the items. So let me actually target dead. So now fling and also do enough bar Brende. So we have our friend and inside those I would like to change the color to d black Wanna so like this Cool and yeah, let me also defined he however effect. So what happens when we have over 80? It changes slightly the d color. So Dean appling and hover And you can also do it with the navigation brand you Alice to do . It's none of our brand. And when we hav e either on the link or only brand we want the color to be changed to something like 777 Cool. And let me actually reload this thing and see how it looks like. So it's reload, and it should look exactly the same as this one. Okay, Yeah, it looks exactly the same. Cool. And also, if I'm not mistaken yet, the the logo is big. Right? Is bigger definitely than inside here. So let me actually change that. So enough of our brand. And inside here we would like to define the phone size, and this one should be, like 1.8 off the relative right Like this, and then safe and reload a page. And you had ever Sterritt this. It looks cool. So Yellen may actually go ahead and take care of the home page because I'm not sure whether there was something wrong with it. Okay, there's, like, some maybe spacing. No, no, no. The home page is basically taking care off, So let me actually go ahead and start doing the goal to action. So the culture action is actually also great. Simple. So inside here I will just write call to action and let me style it up. So this should be the call to action class. And what are we going to do? Well, we would like to change the background, right. So you background And this one will be just black one cool. And the color off the text will be. Otherwise I d white one. So f a f A f f like this and let me save the thing. And let me actually were a load e page. Also, we need to take care of the heading line. Okay, for some reason, it doesn't work. Okay, I get free else inside. Here's on the two of them. Let's reloading bait and see how it looks like. Yeah, there were this. And yes, So let's also style the line. So it should be like the heading line if I'm not mistaken. And yes, just defined the height of it. Do you like free pixels? Or send leg dad? And also the with of it, too, like 10%. So basically 10% of the space it can take and the background is the is the green one? I think so. The primary color. So this one and let me actually check how it looks like it should look exactly the same. He had us. So right now, you cannot see difference between dough stews, themes. Right. So cool. Let's also move on to these services barred. 12. 11 Services and Portfolio: so these services should be quite easy to style. So let's get into it. As you can see, there's only the I can that that is different from from our point of view, right. So let's change it. So, Allergist, copy paste the comment inside here, put an inside here and let's ride these persists. And inside here average just target services. Any Aiken, Dennis inside the services, Okay. And for every I can what I want to do. Well, I would like to change the font size of it to, like, to relative. And I would also like the changing color to the primary one. Okay, so that's this one. And let me actually load the theme and see how it looks like it should look exactly the same. Okay, there in this, I think it looks exactly the same. So let's move on to the portfolio thing. So inside here, let me actually take a look. Okay? The background is good. The spacing is good. So only we have a problem with those images and those cards. So let me actually take care of that. So I was just go up eBay's dis comment. So instead of services it will say portfolio. And yes, So let me actually first of all, take care of the dark things. So basically this rectangle and what it will say, Well, the color is the primary one, and the background is basically the black color. And let me actually were loading Bay CEO. It looks like so there will be the most problematic thing will be felt there probably and the images. But this thing is is good. We also need to take care of the Aikens insider. So basically, every Aiken that is inside the dark card, we would like to change the front size of it to, for example, like when one point free relative. And we also need to changing color, right? The color should be the primary one like this and let's put a semicolon in. Their analysts were loaded page and it should look exactly exactly like the one seconds on the theme. Yeah, there were this. I think it looks exactly the same. So if I go to the theme yeah, I think it's seem okay. And there's a big of a difference. Maybe optical, because because you need to, because those images are bigger in there. So let me actually take care of the images, and then you will see that those look the same. So basically, portfolio and every image inside it, so image fluid. OK, so ever image inside portfolio, we'll have the height off like 300 pixels, right? Because right now, as you can see, those images have like different heights. There was a space underneath this one. So when I said a fixed height to it, those images will just have the same height, right? And then we we also need to say, care off how the images being displayed. So we'll just used the object fifth property and set it to cover like this endless reload the page and it should look much better. And yes, so then we also need to take care of the filter. And that's basically the last thing for this section. If I'm not mistaken. So actually, I will just let it load in the background. Yeah, it seems like it's it looks great. So in order to take care of the filter we need, we need to target every column, right, so every comb like free and we need to make the position relative like this, and then we can actually target de filter. And what? He filtered us. Well, it have the position Absolute. Okay, so absolute like this. And it have basically do you with off 100% and d hi off also 100%. Okay, so it will basically take the whole image with and the whole image what life? And it was at a background to it. Oh, sorry. So background like this and this will be just the primary color. And we also need to add the capacity to it and the bass sitting. You will be like 0.8. Let's try to small and yeah, let's reload the page and see how it looks like. So, as you can see, there are d filters. And as you can see, there is the A pass ity. So the images behind them are actually like visible, but they look like greeting. Okay, so it looks great in this theme, right? Because we, like, keep the color scheme untouched. Cool. So that's basically the portfolio taken care off 13. 12 Contact Us and Footer: all right. So as I'm looking at the contact of section, I noticed that I forgot to change his services. And this button doesn't fit quite right. So let me actually change that. So and the end of the page, Ok, there should be, like contact us. Okay. Here. So instead of services, it will say con detect us like this. Let's save it. And also D button. There's something wrong with the button. There should be secondary like this. So but outlines secondary less real OD page and see how it looks like it should be much better. Okay, there it is. So if I have over the button, you cannot see any animation. Yeah, you do. So I have a problem with the computer when it's recording a full HD video. It have traveled travels with the animations. Yeah, but hopefully you can see it. So let me actually go ahead and style the footer, right? And the footer is actually quite simple to style. So inside here I was just writing you comment, or I will just got based it to save some time. Not sure how much time I will send by this. Okay, Not much And so like this and inside here will be like Footer. If I wrote it, I would, like, save some at least 10 seconds, whatever. And inside here I was a star gdi footer, and what we owned is changing backgrounds suit like wanna and changing color to the white one. So if a if a ff And also I think Well, actually, I'm not sure whether this will work. If I were loaded Page, I'm not sure what I saved it. I didn't save it. Sold me, actually loaded again. Okay. There, Innis. We need to add a margin to it. So let me actually go back to this thing and inside here to put a marching and the top off five. Okay, let's save it and reload this thing. And also, the links are not seen. So basically, ever link in the footer, we'll be just white. So cover and inside, you know, you have the white like ness. Let's save this thing and let's actually were loaded again. And yeah, there it is. I think it looks quite cool. Even the muted Tex probably looks better than the the old one. So if I go back to the theme and take a look. Okay, there it is. Yet this thing looks a bit too wide. Okay, so this should probably be six. So let me actually fix that inside here should be called large six. And inside here will be the offset of free. Okay, so let's see that. Analysts were load this thing and see how it looks like it should look better there. It iss well, okay. Okay. What's the problem? So maybe there's, like, batting on the Y axis, so Well, actually had me adding marching on the X axis like this to it and see how it looks like right now. Maybe does the thing. I'm not sure how I created the old template anyway. Okay, so that's not a problem. Okay, This, like, completely wrong. I need to get rid of this. Mm. Okay. Anyway, it doesn't matter if you want to fix that. Feel free, Feel free to fix that. I will just keep in this way because, like, yeah, it's still X. Quite cool. And I have been in maybe even better than the first thing, so, yeah, that's pretty much it 40 CSS 14. 13 Responsive web development: Okay. In order to finish up our theme, all we need to do is take care of the responsiveness of the page. So in order to do that, I was just simply click on the F 12 button and the devil Pro Tools will pop up. And if you click on this thing, you can tackle between the device that you are showing this on. So basically, this is these side on a on the, uh, iPhone X. Okay. And let me just go quickly fruit this and see how it looks like. Okay, we need to add some space around here, so let me actually fix it right away. So actually, let me just get rid off this thing and g o that reckless city home. And let's just add some margin. A deep bottom or five gay Cool. It's really low debate. See how it looks like yet it's better. And also the call to action. We need to take care of that. Definitely. So inside here I will just put another query or just not a common for the responsiveness so responsive. And then inside here, I will just put a media query. So media and then inside here we will have just DMX with off, Let's say just 900 pixels. So this will apply even on a tablet. And what do we want? Where we want the call to action and a container inside ID to have the with off 100%. So like this and this needs to be important. Otherwise the bootstrap will override it. But if I were loaded Page Dara tous it looks much better. Much better. Okay, let's move on. The services looks good. How about a portfolio? Okay, there's a bit of a problem. Let me also add 300 pixels to D dark Sodi. Height of the other cards will be also free 100 pixels, So basically same as the image. So let me just load this thing and see how it looks like now. Yet it looks definitely better. Okay, maybe you can play with the order of things on mobile, but I will just keep it the same. And then we have the contact us looks good and the victory footer and as looks also great only thing that we have a problem with is the Aikins and enough bar. So inside here, there's no I can that I can, I can see, but yes. Let me take care of the enough bar first. So inside here I will just take not bar. And I want to target ever enough item. So basically every one of dose okay. And an inside here. What I want to do. Well, every one of them will be displayed block. Okay. So instead of in line, this one will be block, and it will have a with off 100%. And there will be also some batting around its them Axelsson Zero pixels on the left and right. And we also want to align into centers, takes a line center, and let's see how it looks like now. So if I were loaded page and click on this yet ever notice it looks much better. Cool. So does basically everything in the mobile version. Let me just add the Aiken for it. So this should be in front. Awesome. Aiken Barce, if I'm not mistaken. So inside here I was just at I can with the class off front. Awesome and Ford awesome bars. And let me just close this thing, save it and reloaded and see how it looks like Derris. Okay, so this looks quite cool, in my opinion. Okay, let's actually change the device to iPad and see how it looks like on my bad. Let me just reload this thing. And Okay, so this one is definitely a beard. There's some back with the menu if I'm not mistaken or yeah, there is a problem with the menu being expanded even on a middle device. OK, so you won't expand it on a large device. So sorry about it. So expend on large device. Okay? Right now it looks much better. Okay, the menu is still quite get align The picture, is there? Yeah, that looks good. Also called to action. The the text will take the whole space. That looks good. These services looks still the same Bar D portfolio looks horrible. So let me actually fix that. So, underneath the services, we have deep portfolio and let me actually just keep these same size of the portfolio items , even on a metal device or basically on an iPad. So instead of large, I will just change all of those two middle. So that means even on a middle device, it will take well free off 12th comes inside the inside hero. Okay, But it will not change how it looks like in the large device. Okay, so let make sure loaded page and see how it looks like now. And yeah, there it is. It looks much better, in my opinion. So once the images load, you should be able to see them and cool. So the contact us looks great, and the vector looks also great. So that's about it for the responsiveness. This was quite an easy task to do. 15. 14 Adding Animations: Okay, so let me just add the animation to our project. So when I reload the page, you can know what is the animation? As you can see, they are being played right now. And when I start scrolling, for example, the heading or the articles will prop up. So basically the pages animated. And, yes, let's do that. So in order to do that, for example, in order to add a animation inside the home section, all we need to do is at a animated glass through the element. And then we can use just the animate that CSS some of those glasses in order to animate the element. So, for example, inside here, I can just put animated and then zoom in and let's save debate and reloaded and see how it looks like. So if I were loaded page okay, it doesn't work for some reason. Oh, I notice I didn't actually added, So we need to add the any made that CSS so style sheet and then the a traffic, too see assess, and there should be animates yet says cool. So it save it and let's actually loaded page. And there should be animation. Yeah, there it is. So, Yakult. That's basically how you can add the animation. So when he put an any made it glass to an element, you can then choose whatever classy won't in order to animate it. And you can also add some delays to it. So when I actually play this animation, you can notice that there are some delays, right? There's one second two seconds and then three seconds. And those items are delight. Those animations are delayed. So let me actually create, even does. And it's not that hard to accomplish. So inside. Well, yeah, he heading this animated so inside here should be animates it. And then there should be like, ah, slide in left if I'm not mistaken, slight and left So we will slide in from the left side and we also want to put a delay to it. So delay it for one second and let me actually save it and see how it looks like. So if I were loaded, Page and let's see Okay, there it is. So yeah, there is a problem with this being still shown even when it is animated. So inside here we will just right overflow hidden. So basically it will hide everything that is not inside the diff. So like Dez, let me reload TBH Right now? Yeah, there it is. So yet And I can just simply copy paste this animation Sudi paragraph and just delayed it even more to two seconds and do the same thing for the buttons. But right now, I will just delay them for free seconds. And this one will be just fate in animation because it would look weird. 40 buttons and yes, So I will just go baste it and actually let me or low debate and see how it looks like. Okay, Okay. Okay, That looks cool. But instead of fading, it should be like Zuman if I'm not mistaken. Oh, let me just go ahead and check out those animations. There's a lot of them. Yeah, assume in So sorry about it. So instead of fading, obviously, if you like the animation, you can just keep it this way. I will just change it to assume in and the real OD pay trio There was weird and reload the page. Okay, That looks cooled. It was also cool. Yeah, whatever. It iss Derris and nothing I want to mention is that as it's this inside here in the documentation somewhere, Yeah, you can, Delaine only for five seconds. And if you want to delay more, you need to add your own CSS code. Okay, body it. Five seconds should be enough. Okay. So let me actually go ahead and style. Even the call to action so they go to action is also animated. And it it's like, slight in the from down. Okay, so from oh, down like this so sliding down It's animated that when I reloaded bait the animation will start Even though we are not scrolling right, we didn't reach the element yet. So when I go inside here, there is no animation. But if I were loaded right now, you should be able to see the animation you doesn't wise dad. Okay. Animated slight in down. Oh, I didn't 70 file so that it was quite embarrassing. And les were loaded page. And right now there should be the animation yet evidence. But once again, when I reloaded right here the animation is being played, but we didn't see it. So in order to fix that, there is a library called wow dot Js. So basically this thing right, you can take a look at the code, right? It's just a javascript library. In order to basically played the animation. Once you reach them and only have to do in order to use the library is put a well, class in front of the element. Right. So this is stupid. Shouldn't go inside here. I'll just call this thing. No, no, no, no. It should go. Sit. Yeah, Sorry about it. So around here, and we need to also in the shit initialize it. So first of all, we need to import it. So script with the source off JavaScript and then wow, that Js. So, like, that's cool. And also, we need to just create a new object. So script and inside here should be, like something like new. Wow. And like this, let me actually reload you patients, see whether it looks like whether it works. I'm not sure, to be honest, I think I saw some animation down there, so it doesn't work. Okay, So what could be the problem? The problem probably is the job script. I think that there there needs to be a in it called. Maybe yeah. In order to take all of those well elements. Yeah. So if I were loaded page once again. Okay, this animation looks cool. And let me just scrawl, Okay, There it is. So once I reached the element, the animation is being played. So yeah, that's 40. Uh, this 40 call to action and also the services are being animated if I'm not mistaken. So if i g o you had those services are animated once again, once I reach them. So inside here for every service will put wow and animate it, and then will be something like zoom in. I think it's it's this one. So zoom in. Obviously you want you can add any animation that you want. Okay, Did you like, But I'll just use these to these things because I have them in the the theme body. It so happy. Face it to every element, and we should be done. So let me just actually reload the page and see whether it actually worked. So did I save it? I saved it. And let me just load this thing, okay? And let's go down. Dara tous cool. So that's about it. That's about it. That's but much everything that we need. And yes, So if you have any questions, feel free to ask in. I'll see you next time. 16. 15 Bug Fixing: Okay. So quick, Buck fixing. I forget to put the closing tack inside here. And that caused that the front awesome. Aikens didn't load properly. So when I put the closing tech inside here and save the file, it should work. So when I reloaded Page there should be in Aiken's. Oh, right there. Yeah. There it is. Cool. So we and it's it.