Learn Bootstrap 4 & Web Development on Real World website! (HTML 5, CSS 3, Bootstrap 4) | Lukas Vyhnalek | Skillshare

Learn Bootstrap 4 & Web Development on Real World website! (HTML 5, CSS 3, Bootstrap 4)

Lukas Vyhnalek, Microsoft Employee, Programming Teacher

Learn Bootstrap 4 & Web Development on Real World website! (HTML 5, CSS 3, Bootstrap 4)

Lukas Vyhnalek, Microsoft Employee, Programming Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (2h 6m)
    • 1. What we will create?

      2:27
    • 2. 01 Getting Started and Navbar

      11:16
    • 3. 02 Home Page

      11:08
    • 4. 03 Call to action

      5:28
    • 5. 04 Gallery Items

      10:29
    • 6. 05 Carousel Testimonials

      9:04
    • 7. 06 Contact Form

      9:50
    • 8. 07 Footer

      11:22
    • 9. 08 Simple Bug Fix

      0:22
    • 10. 09 CSS Navbar

      14:28
    • 11. 10 Homepage and Call to action

      6:50
    • 12. 11 Testimonials

      4:56
    • 13. 12 Contact Form and Footer

      11:41
    • 14. 13 Javascript

      8:32
    • 15. 14 Responsive website

      8:29
  • --
  • 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.

117

Students

2

Projects

About This Class

Master bootstrap 4 development and learn to create responsive websites that use bootstrap's CSS grid and flexbox.

Bootstrap 4 is a great library that allows you to create responsive websites is a easy and efficient way. Bootstrap is a technology that every web developer should be aware of! It can make your life much easier.

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.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. What we will create?: Okay, so this is what we will create. As you can see, there's like some navigation, some items inside years, some buttons. And yet and we have like those those free I had no cars or however you want to call them and eso as we start to scroll, the navigation will change the color and stay a detail of the page. We have like this discount section and we have our beautiful dress sections. So, as you can see, when I hover over, it changes and I can also filter does images by category. So that's quite cool. And if I, for example, change into some category right, there are only few of them. As you can see around here, we have a slider off some like testimonies or something like that. You can obviously click on that. It can change the content off the slider and yeah, it also changes the slider. So it also should slide automatically. And and then we have the Contact us page, where we basically have, like, the email addresses, stuff like Dad, and we can enter the name messages and pretty much everything. And we can basically submit the Dee Hall for and lastly, we have the footer. So yeah, that's how the page looks on a desktop. This is how it looks on a iPad. So basically some tablets, As you can see, the the images are right now taking care off, taking the full screen. The menu is just classic drop down menu. It looks great. Cool, in my opinion, and the idea category will stay the same. Everything about is will stay the same. Then we have the testimonials, contact ass and the food, sir. And lastly, we have the mobile versions. So I'm displaying this on an iPhone X. So as you can see the menu worse the same way when I start scrolling is basically this girl's everything is the same. Those buttons are moved to the center, right? I can still select. And there is only one column for the items and yeah, he testimonials Looks like this. And the contact page and everything looks quite good, in my opinion. 2. 01 Getting Started and Navbar: Okay, guys, let's get started. So, first of all, I am using a visual studio code, and inside here I am using a extension. And if you go to this stab, you will see the extensions that I have enabled. And one of them is the bootstrap for extension. So it basically allows me to use, like, code snippets and stuff like that. So if I go back to my file Explorer, as you can see, I have flack, CSS folder images folder and VEP phones. Father, so about Yvette phones. This is basically a 40 fund. Awesome. So as you can see around here, the front awesome is just awesome. Page. And it allows you to use all of those Aikens for free. Right? So you can use these icons in your inside your website, so you definitely want to download it from the front Awesome bait. And then you need to extractive that phones folder. And also you need to add the all that men that CSS. Okay, so then what I have is some images, basically images that we used inside the website. So basically all of those are included. OK, so feel free to download them or use your own images. I don't really care. So, yeah. Then what I have is the index dot html, which is basically this site and that we will create. Okay, so let's get into it. First of all, I will just close it. So I have more space, and let's start by using the bootstrap extension. So I was simple type and a boof before. All right, and as you can see, it automatically suggests me write it automatically suggests me the template. So if I click on that, I have the template, the basically default template. And what do we have in here? Well, first of all, we have the doctor. I'm dot h Look, type html, right. Makes sense. Then we have the html tack inside. We have the hat. So basically the meta data for the browser. And yet and then inside here we have something called Vieux Port. So that's basically for the page to be responsive. Okay. And then we have a link to the bootstrap, right? So, as again see dearest, automatically linked to the newest version off the bootstrap, and yeah, So then what we have It's actual body off the base so basically what you can see inside here, and yet then we have some scripts. So what are we going to do first? Well, first of all, let me just import things that we need to import inside D had. Okay, so inside he had what we need to import. Well, first of all, we need to in 40 style. So, allergies write a comment like this, and let's say that this will be just the ar style, right? So on top of the bootstrap, CIA says we will have our our style. And in this style, we will basically a link the the our CSS file. Okay, so we need the have the relations style sheet, and then we have the ref t to these to the file. And as you can see, we will go to CSS, and then inside here we will create a new file called main dot CSS. Okay. And let me just goes this stack. Cool. So let me also create the file. So inside here I will go to the CSS folder and then create a new main doubt CSS file. Cool. So let me just close this thing again, and I'll save it. All right. So what are rewriting next? So next We also need to include the phone. Awesome. All right. So I'll just copy paste these things right underneath here and inside. Here. Algaze. Right front. Awesome. It's quite useful to use the comments right inside your coat so that, you know, where are you? Right. You need to keep track off. Where the The certain section iss. Right. So I definitely use differently. Recommend using these stacks a lot. So from Dawson and inside here, it's the all all that men that see assess. All right. So cool. Then what do we need to do next? Well, as against see, on this page, we have some front, right? This is not the default like aerial front, but this is like some some cute nice front. And Google allows you to basically import any phone that you want. And it's extremely simply so simply go to Google fonts. And then inside here, you can basically import any phone that you want, right? But I will use the front cold monster sour. So like this, and yeah, I'm not sure where I'm spelling it correctly, but if you click on that you can see all kinds off examples, right? And yes. So inside here when you could come, Dad, we also want to guess demise it so that we have a bald and a extra bald for our headings. Okay, so yeah. Okay. And as against the inside here, we have a link, right that we can simply just copy based into our code. And then we can use the fund for free. So right as again, See, As you can see, I'll just put it inside here, okay? And yes, So I'll just also Raidi comments for that, or yet you write it, and so I can close this thing, and I can take a look at the bootstrap. So this is a bootstrap documentation. So if you go to the bootstrap page and go to the documentation dap, you will find all kinds of useful Resource is okay, So if you, for example, wants at a not right a nav bar. So if you go and check what kind of not verse you have in the code snippets, right? So that's like extremely great, right? It's like things that you can differently. Use that if you are, don't find what you're looking for inside here. You can definitely use the documentation. So if I type in here a not bar, for example, I can just take a look. And they are extreme, right? There's a lot of examples. The deacon news. Right? And all of them are responsive. I think I think they should be. And they they look quite good. And all you have to do in order to use them is simply click on the Skopje, then go to your code and then faced. And yet so then you have a knob are. So if I reload the page, as you can see, there is the knife bar. Okay. Quite cool, right? So yeah. I definitely recommend using this this documentation a lot. You can also find a for example, if you are looking for, like, spacing, right. You want to do some spacing on your website, You can definitely take a look at all the glasses that you can use. Right. There are a lot of examples that you can exactly see right. And yeah, it's great. Recommend using that a lot. All right, so let's go back to our coat. So first of all, we can change the title. So basically, this is the thing that will be displayed as the big text inside the Google search and also up here. So if I reload the page, as you can see diversity shopper right now and then. So then let me go through these. So inside here we have the not far. So this one will be changed to shopper. Okay? And then we have the actual navigation. So if I wrote us as again, see, there is the shopper, and yes. Oh, As you can see, there are some classes fort enough bar inside here is the background fort Enough bar, right By default, we can see that the background is a bit different than the ground underneath that I will delete it because I don't want that. And I will also make the made enough are fixed at D Top. All right, so, as you can see, when we scrawl at our final demo, right, the number stays atop, so yeah, that's basically the fixed stop. That takes care of that. And yes, so right now, D never is fixed at top and what we can do now. Well, as you can see, the logo is just at the total. Etch. Right. I wanted to be inside a container, so basically, I will have some container so that there's a bit of space at the edges off the page. So how did I do that? Well, inside here just before this, I'll just create a new def. And inside here, I will say that there's a glass and it will be the class container. All right, save it. And let's move all of this right inside here. And let's also save it. And if I run this as you can see, it's there's a space, right, And there's also space on the other side. But you can see it. All right. So yeah. All right, let's move on. So then we have the night of our brand. As you can see, you can change the you can change the Ralf off the off the logo body. Yeah. Obviously you don't have to. Uh, then we have the columns buttons. So basically, thing that will appear when we are, like on mobile phone, right? So D basically the toggle Aiken. Okay. And then we have the actual Navarre. So inside here is the columns of bar. So that basically means that d not bar will collapse when we are on mobile phone. Oh, r a tablet and yeah, And then what we also want from the nav bar is to be a d. Right? Right. So how do we do that? Well, inside here we will just add a class called justify content and then end. All right, so basically, we will move it to the end of the contents. If I reload us as you can see this Andy end of debate. So basically on the other side, right? Same as inside. Here's our page. All right. One side, second side. Cool. So, Al, just keep the part when I change those menu Aiken's 3. 02 Home Page: Okay, guys. So I changed all of the items. Right now it looks like this. So it doesn't look quite that as you can see, there is one I can that I used and yeah, that's exactly this one. So this is basically the phone. Awesome. I can. And it's basically the shopping cart. I can. Okay. And I also used a classic old margin. Right? So inside the spacing, as you can see, there's declasse m for margin. Then our is for margin, right? Right. And then one basically means only the amount off the space. OK? And that doesn't mean one pixel. It's just like the defaults basing times one. All right, so yet and inside the front Awesome. I found the Eiken basically, by going what I want. Well, I want a shopping cart. So, like this. And when you hit enter, it will automatically like suggest Teoh Aikens that you might be looking for. You can obviously type whatever you want and yeah, it looks great. All of those looks great. And as you can see, you probably want to. For example, these one will be great to use in a shop or stuff like that so Yeah. Cool. So another thing that I want to change is as you can see, those items around here If I were load them, those are just spaced. Died together, All right. And around here, right in the default menu. They are far away for Norway. So what we want to do is change. Actually, this you are class, so a Norden list, and then we have the items, right? And we want to change this from Nav Bart Enough, Which basically just gives it a different styling. And yes. Oh, but if you obviously like this one, you can stick with that. But I'll just choose this one so that it looks exactly the same s on this theme. Cool. So what do we do now? Well, right now we have the menu behind us. So what do you want to do is just take a look at this home home page. So as you can see, there are, like, free of those and there's some background. So do you think this background is created where a image? Well, obviously it is Bar. It's not the image that you probably know, right? It's a background image. So anyway, let me get through it. So, first of all, I'll just type in here a comment so that we know that this is our navigation. All right. And then I will also use this and inside here I will just tied the home screen. Okay, So another cool thing that you can do is just simply collapse all those things. So I don't want to see the navigation anymore, and I will just collapse it. And yet inside the home screen, what do you want to do is create a section. All right, So section is basically a HTML five element that, like, allows us to group things together. Okay? And it's used browser used that. So it's quite good. We'll also type in here a class called home. We will use it in our main CSS to target key elements. Okay. And all right, when I save it, it expands. So I will just keep it expanded, okay? And then went beyond to do well, we want to create a diff that have the glass row. So the glass row is great when we want to space elements inside toe. One row. Okay. And yeah, right now, what do you want to do is just create a A basically one of those. So these things. So how do we do that? Well, first of all, we will create a def. So basically, this will be the whole article or horror whole boasts. Or however you want to call that item and this one right now, we want to define how big it will be. As you can see, it's quite small, right? You, Maybe you want to say that there's like 2 12 off the off the screen, and he would be right. So by default, when you have the row, you have basically, like 12th 12 rows that you can use, right? So I can just say that this on the large screen. So that's the algae right here. If I type in here or something like MD, it's basically the middle screen. So, for example, a tablet large a desktop and small is a a phone, and then I tied the number. So basically how big I wanted to be and let's say to right, so, yeah, then what do you want to do? Is also say that we runs even on the DAB, lets you still have a too right, and yet so let's just close this thing. And inside here, what we want to create is a something called Khar. So we will just have once again this and inside here we will have the glass car, and this guard basically allows us to like group elements so that they look quite great. There's a styling behind it, okay? And it's like the fault element off the bootstraps. So if you go to Bootstrap and inside here, it's I d card, right? As you can see cards when you click on that, it's automatically right. As you can see, there is the example of the card, and it looks quite similar to the our car to dead that we use in our template. Cool. So then what we also want to do is lined, indexed to the center inside the car. So next center. And yet that's it right now what we want to do. Its ad, the image so I'll just add the image. And there's a glass city image which is called the card image top, and then we also want to define the source, and the source will be just images and then there's, like, broad one. I think so. Product one and yeah, also a out. So that's 40 browser. If something doesn't load, you can obviously type like something. Like a dress. Basically, you want to describe what it's on the photo, All right? And then what do you want to do? Is also defined Edith 40 text around here. Okay, so if I type in here death and then class off the card body, So card body. Basically, I'm typing whatever is inside this cart. Okay, so card body has again see card image Top right. Same thing, basically. And yeah, inside the card body, we want Teoh add a cards title. So let's say that the heading will be off the level five. OK, we don't want us to be, like, hugely important on decide, And there will be a class, and this glass will be the card title. All right, like this. And inside here, we can write something like summer dress and save this and let's see how dead looks. So if I reload this page, as you can see, there is the dress. So we have basically the card. We have created the card from scratch. And yeah, as against also see inside here, I'm not sure what do you consider it? But there's a shadow behind it, and it looks quite cool because of that. So what do you want to do is also add the shadow to it. So inside year, what do we want to add? The shadow? Well, to the card, Right? So that means this death. And when you want to add shadow, it's extremely simple. So simply typing here shadow. And then you can specify how big the shadow should be. I want the shadow to be, like large, so allergy for large. And if I were low, this thing, as you can see, there's the shadow, okay? And it looks quite cool. So right now, as you can also notice, the first card is moved so that it iss like there's a spacing in front of it. All right, so how do we actually do that? Well, first of all, let me just copy based those cards so there, because there's free of them and like this, save it and let's also change the product to product to and product free. And yet, so let's save this and Yes. So how do we do the spacing? Well, it's actually quite simple. So inside here we just type offset. So basically, we say, Hey, I want this to be large by two, all right? And I want us to start after, like, four cells. Okay, So offset. And then we have the large right of the screen. And And we have, for example, four and true. It's this thing. And we can also do, like, offset 40 middle. Or we can just keep it without the offset 40 mil. Right? And if I reload this thing right now, there should be placed somewhere inside here. Okay, cool. Right now, As you can see, the one off the images is bigger than the other two. And it looks quite silly, but we will fix it later on in the CSS. All right. And another thing that you can notice Is that the heading, right? It's basically in front of it. This is hidden behind the behind our navigation. So what do you want to do? Is maybe at some, some margin to D top. Right? So how do we do that? Well, basically, inside the row, I can say margins up and five is the biggest that I can use, for example, so when I reload this thing now, there should be a margin. As you can see, there is one. And if I want to add more, you can obviously just add the margin to those things. So, for example, yeah, instead of writing just margin a D top and margin at the bottom, you can simply type D access. So the Y axis and then add the margin. So the number of margin right it's It's extremely cool how easy it is to add stuff to your page with the bootstrap, and I'll just add it to every article. And when I reloaded, they are yet it looks quite cool, right? So that's basically the home page, and yeah, that's pretty much it. 4. 03 Call to action: Another thing that we need to create is the is basically this part. Do you like discounts? And yes. So this is basically just like usually it's gold called to the action or something like that Call to action things. So yet let me first of all, and equipment for this section and like this and there will be a call to action. Right? And as you can see around here, basically, we have a section so section and there's a class so declasse will be just a culture action or something like that. So where we can use it in the CSS, I'm not sure whether we will have to maybe. Yeah. And yes. So then what we want to do is basically inside here once again, creating container. So, def over the class container so that it doesn't flow directly to the edges off the page. And inside container, I'll create a new def with the glass row. And yes, so once again, same thing as before, and then inside here, we want to create the part where we will have this thing. Right? So basically this thing, as you can notice, it's a bit bigger than this part of the page right There was like I know, 8 to 4. I would say so. Yet if I do it, I can I can simply write it. So this will be just the comb on the large bait on the large offset. It will have the eight. Right? So that's eight against four. So this is basically the part when we have the text, and then the part where we will have the button will be just def with the class off the call the large da slash for And yet so then what are you going to do? Well, inside here? As you can see, there's the headings. So there's just the heading free and in half a few glasses so we can use it a as a call to action heading so that we can style it later inside our CSS file. So call to action heading and yeah, and then we have detects. So do you like the scoundrel and quite some mark off course? Everybody likes discounts. And then inside here we will have a prior graph. And as you can see, there some text, allergist Copy. Paste it. This is called the alarm absent text. I'm sure you are aware with their It's basically a style text so that it looks quite good on a webpage. And then what we have is the button. So some button and there's a couple of glasses when we are creating a button. So in the bootstrap we have the button class, which is basically a batting 40 button and stuff like that, and then we can also define he bought in primary. So that's basically the finding color and everything about it. And yes, so that in this case, the primary button, I would say, is the different one. So inside here, this button is quite large. When you take it right, this one is smaller. This isn t u R T button. So button large basically takes care off the making the batting bigger. Then we have, like, different types of buttons. If you go to the documentation and dive inside here a button, why do you have the button tax? And yes, so there's a couple of them, and what do you want to use is the button outline secondary. So this one basically and you don't worry, we will style it later on in the CSS. And yes, so let's just Oh, sorry on close the attack. And right now let's save this and let's see how that looks. So if I go to the shopper and reload this thing, there should be a part. Okay, it's Do you like this counts. I forget to put the text, not sure what it says right now. There's like Learn more, I think, yet learn more so inside here there will be learned more and also, as you can notice, there's de text and it is aligned to the right. So inside here I can just simply type fixed right, and that will basically align Destexhe to the right. And yes, so let's see how it looks. And if I reload us, yeah, as you can see, it looks a bit better. We will add the styling in the CSS. OK, so don't worry about it right now. And what we also want to do is add a margin to the buttons. So, for example, margins up off four. Let's see how it looks right now, and it should look a bit better. Yeah, it looks, it looks quite nice. I think it looks the same and it's so cool. That's pretty much it. 40 Culture. The action button 5. 04 Gallery Items: Okay, so let's right now. Take care off this part. So off the are beautiful dresses card and inside here, As you can see, it's bit of a e show up e commerce if you want. And ah, yes. So there was a Bryce Tech image. All those categories. Let's get into it. So yeah, Okay. Let me get to the coat. And first of all, inside here, I'll just write a common for it and it will be just a gallery, or I know how you want to call it. Yeah, let's just called a gallery and because it's usually, like referred to as a gallery on pages. But in this case, it could be like a products or something, whatever. And then inside the section, right? So we will create a new section for this section and inside here we will call it a class. Whatever you can call it like shop. And let's also add a margin to the top so that it is not directly underneath. Right? There's a bit of space between those two, so that's the margin. Cool, then what we want to do. Well, we would like to add the container, so def, glass container and container. And inside here, we're going to do is basically at all the content. So there will be a heading to and is heading to, Basically, is this one this one thing? So are beautiful dresses. So beautiful dresses and yeah, And inside year we will add some classes to it. So there will be a class, and this glass will be just like section heading right section heading. And we will just style it in the main dot CSS. Okay, good. So then what we have in here? Well, there are some buttons, right? So how do we create that? Well, if you can go to the bootstrap age and type in here deflects box, As you can see, there's a basically anything that you can do. And you may know it is that this thing, this third example is pretty much exactly what we are looking for. So I can just copy paste it into a crowed so basically deflects. So that means flex box and divulge is justified content to center. So there will be space around it. Cool. So I'll just copy based it. And then instead of those free dots, I'll just put free buttons, and those buttons will take care off the off, the item changing. So inside here there's a filter, right? There is a JavaScript filter so that when I click on something, basically the gala gory will change. Those images will change, and they're so basically those buttons will be responsible for that. So button off type button, Who would ever guess that, right? And then inside here we will have eight glasses for it. So there's a button, and this one will be the primary button eso button primary. And as you can see, it's not as big as this large button, so I'll just keep it at button. All right, the default sides. And yet also inside here will be the filter class. So that's 40 JavaScript. Then we will have a a tech called De Terrell, which basically defines what's this button will be filtering. Okay, so inside here will have the all and it will be the all button. So like this. Okay, As you can see, there's just be closing tack underneath and I'll just go if you base this button and do it for the other categories. So there will be like few categories on debate. This one will be the 2nd 1 So I'll just call it category Juan. And this one will be the category two and, uh right. And then we will have the target. Basically one and two. Okay, you will see why this is so important in a minute. So if I were loaded page and see how it looks, there should be a bit of space. Okay. Are beautiful dresses Well, style it later on. And dirty free buttons, they are aligned quite nicely. They have a bit of a different styling. Once again, we'll take care of dad once we have the html done and we can move to CSS. Okay, cool. So another thing that we want to do now it's great d gallery. So inside here, I'll just create the diff of the class gallery. And so basically all the images, right, This will be a container for all the images. And then inside the year, I will just based the all of those images, so there will be a diff forever image because we also have the price tag inside the image. Okay, so we need to, like, somehow put them together and this different will have a few classes. So first of all, we have the margin at the Baden. All right, so we will add some margin so that the images are not, like, exactly at right. So there's a bit of space, and then what we have, we have the class so that we can style it in our CSS. Then we also need to include basically these glasses, so every item we'll have the whole class, right did make sense. When we want to filter all of those all of those images, we want all of those items to be displayed, right? And then we will have some of those categories. So, for example, imagine that this is a shorts. And if I put one in that, basically when I click on the category one, this image will be displayed. And when I type two inside here, basically, when I click on the category to this image will be displayed. Okay, Cool. So I'll just close it. And yet, so then what do you want to do? Is basically add something Basically t t page. So this will be just something like detailed out html whatever. And so that when we click on the image and will take take us to the detail page. And yes, so then we also need to add the image. And basically we'll add the glass Freud image. That means that the image will take care all the space it can, right, and it needs. And then we also add the source. So this one will be image and there's like product. And as you can see Derris a lot of them. So we will start with product one and move all the way up to product. I don't know. And yet also, we can add the alternative for the Google crawler and stuff like that. So this will be just a product. You obviously want to write something like nice being dress or or something for the CEO. Okay, but for this example, I would just call it burn it cool. So that's one thing. And then the other thing that we need to take care is the price tag. So I will just great a paragraph and give it the glass Bryce stack. That kind of makes sense, right? So, Bryce Stack and also, as you can see on this example so we will style it a bit later in the CSS bar. Basically, we will move it to the correct position in the CSS. But we can use a few glasses off the bootstrap in order to style this thing. And for example, as you can see, it is surrounded. So if I put in here board around it, I think or yeah, I'm not sure right now, So I'm sorry. I don't have to just I've been here around it. And yet, as you can see, if you just so like something yet it's surrounded circle. Okay, so basically this thing, right? Obviously, as you can see, this is, like, so great, so great to use. So inside here price tech, and it will be around it circle. And yes, so that will basically take care off it, looking like a circle. And then inside here we have the price, and then we have the dollar sign. The dollar sign is looks a bit smaller. Okay, so we will once again take care of that in the CSS. But we need to ride the html for red. So inside here, I'll just write a span and give it a class cold rice. So this will be the actual price, right? Like $99.29 dollars. Sorry. And then underneath I once again Taipei spend and give it a class called dollar. Right. And inside here will be just the dollar side. Right? And we will started with the CSS so that it looks smaller. Cool. So if I go to this shopper and reload this page, you should be able to see the image. Okay? Right now it looks extremely big. And yet it makes sense because the image is not styled yet, but we will style it later on. So what we want to do now is basically at all of those images inside the gallery. How you want to do that? Well, you can simply just copy and paste all of those right based, based based. And they didn't change the product image and the price and maybe the category, right? So, for example, to one and yet, but it will. If I were loaded. Batch. It will be infinite, right? It would be like there will be free, huge images, so I will just keep it this way for now. And I will add all of those images later on at the end of the course. Okay? 6. 05 Carousel Testimonials: Okay, So another thing that we need to take care off is those testimonies, right? As against the inside here, it's basically a slider that allows you to switch between different testimonies off different people. And yes, so let's do that. So, first of all, underneath the underneath the gallery section, I will just create a new comments saying that basically, this is the testimonials barred. And yet and inside here, I'll just create a new section given the glass testimonial so that we can we can then use it to style in our CSS. So, like this and closed deck. And then inside here I will create a new def the class container so that those images don't are not behind this invisible margin. Cool. And yeah, and then we need to add something. 40 count saroso. So this will be mostly take care of Bye bye, javascript. But we need to add some classes and some ideas for the job script in orderto work. So inside here I will just put an I d called Garrow so and a glass 40 Garrow. So So this will be just like saroso and like this and slides inside story right so that it just slides as you can see the animation behind it. And then what you want to do is just add the basically one another day for the Carol. So? So there will be a class, and this will be like Garrow saw in it. Or Carol So inner. Yet Carol in there. I have a typo inside here and then inside this well, basically at all of those items. So one item is basically this thing that you can see Saudi after image heading and some text. So in order to create at the wheel, just write a new def with the class ro. Well, first of all, we need the carousel item. Right? So inside there will be the glass. Garrow. So, Iten So that basically tells the JavaScript. Hey, this is one item how the other ones and right, And this one will be the starting run. So you say it's the active one. Okay, cool. And then inside here, we need to create does X, the actual content. Okay, so this will be just a row and inside the row, As you can see, there is the image and the text, and I would say that the image is like the four size. So if I type in here did give it a glass inside here I have only one s right to two of those. And then inside here I type basically 40 large screen I wanted to have, like, the four cells. And underneath we have the dext and this one will have, like, six cells. So inside here, out the the glass and this will be just call large and let's say six cool. And if so, inside here we will add the image. So basically the Avatar photo right out, as you can see inside here. So this will be just the class and we wanted to float right, as against See, It's directly next to the text. So throat right. And we also wanted to be the some class so testimonial image so that we can style it later on inside our main CSS. And yeah, I didn't close the attack. So inside here we also need to type the source and this will be just image and testimonials . Just one cool and yeah, also the out 40 browsers. So John and close Etec and save it so that it looks great. Better. Okay, so yeah, this is the whole thing. And an inside here. We need to add the heading for it. So gay inside here. This will be just heading free and there will be some classes. So class off this heading will be basically, it will look same as the equal to the action heading. So allergies used this class so called to action heading right. And I will just dance style the CSS for those classes at the same time. And then he heading says, Just John Doe, John Doe like this. And then there is a paragraph or a back block quote. Right? There's a big quote. So let's use the element quote. And inside the quota is the text. So, Al, just select and copy paste it and detects this same for all of those elements. Cool. So there's just one of those items there are free of those, so one to free. And I will remove those active glasses from them right from the attitudes and save it so that it's the for mating is great, right? When you save the file, it automatically for mates for you, so that it looks quite cool. So if I were load he shopper and take a look at how it looks. As you can see, there are like Frio does and the image will be huge. So there's no need even to scroll it Maybe doesn't even load. But so we will need to take care of it in the CSS. Okay, later on. So yet another thing that we have in there are does basically those arrows those little arrows. So how do we add them? Well, first of all will be inside he Carol so well, it will not, right? It's those are just the images and underneath we want to have does those arrows. Okay, so each era will be just a link and it'll have the class called Caro saw control and Previ ous And then we will be the next Ok, the target for it. It will be just the Caro, So Okay, so this one I d care also and yeah, the your role is just a button. So a button and yeah, we also want the I did other slide Zach to be basically the previous right. So previous slide. And when I close it inside here we need to add some spends so that it looks quite nicely, Aiken. So inside will be a span like this. And this span will have some classes, So there will be a glass cold e Gareau saw control breaking. I can. So, Carol, so control free, like previous. And then I can Sorry, I can. So this will basically add the ICANN and yeah, just let's also add the area Haydn and said it's true. Cool. And yeah, nothing that we need to do is basically at when it doesn't display. So span glass s are only and inside here will be just like a previous. Okay, cool. So let's do the same 42nd Aiken. So I'll just copy based it and save it so that it looks good. And inside here will be the next one. Then we have the Barroso button, and inside here will be next. Cool. And then we need inside here D next, Aiken. So next I can. And instead of previous, we will have to be next, So yeah, and that's about it. So this is basically the carol, So And don't worry about the JavaScript and the CSS. We'll handle it later on. So yeah, that's pretty much at 40 Carol. So 7. 06 Contact Form: Okay, I So the last thing that we want to do well, second to us also footer, that is the contact us. Okay, So the contact as is basically a section that we have a heading and a form, So let's get into it. So underneath this section, I will once again write a comment for the contact us and yet And we will create a new section on this page, and this section will have the glass off, contact us just contact to keep the simpler. And as you can see, the background is a bit lighter, right? When I hover over with the with the never bar, As you can see, there is white and this is a bit like darker, I would say, but it's quite light. So in order to do that, we can just use this Ben ground light and it will basically keep d background at this color . Okay, then what we also want to add is basically some batting A and e top and Andy bottom, and that's about it. So then what we want to add is the container, So death glass container and underneath we will have the heading. So the eggs to with the glass section heading right. So we will style all of those with the CSS. And it says, Just contact us like this. Cool. And so, Dan, what we have is the actual form, so no sorry. Mm. Right now, right here. And there will be just a form. You can obviously define the action and stuff like that. I will not take care of it right now. And, as you can see, just, like have the size of a six Basically 1/2 off the space. So, yeah, let's type in here call large six like this. And yeah. And also also a offset. So offset. Large free. Right. So it had It is exactly in the middle. Cool. I also need to close this thing and then inside here, we need to type does forms. So first of all, there will be a death because we have a group off guidance. So this will be a foreign group, and then inside there, we will have the label so label, and we need to also define for what control the label will be. So, al, just type in this side here. The email. So, like this email and then inside here. I can't I have the email address this cool and then we have the actual input. So input and the type suit type will be just email. And the I D will be the email, right? So that this label is for this input cool and then one. What do you want to do? Well, we would like to define a few things about he email so there will be a class called a form control. So that's basically all the controls in the bootstrap, right? They do add some styling to it and stuff like that, and we were also. You can also add the area described by, if you want to describe it by some note, Right. As you can see, there's a note underneath and yes, so there will be like no email, health or something like that. And we can also add the placeholder. It's a place holder, and there will be just enter email and the email, and that's about it. So I'll just close it cool. So right now, let's also defined the the hint for it. So basically this thing and we can use just the smile. Small tack, and we will add the idea of the email help. So, as you can see, the area described by is the I D off this thing cool and yeah, and then we will have the glasses for it. So class there will be a form text, and there will be also de text muted so that it just like it's it's quite muted. As you can see, right, It's not as bright as those Texas right, and it makes sense is just like a help, right? And then there will be the text al just coffee basted because it would take me forever to write this thing and save it so that Ziyuan control and it's basically the email control. So let's just copy paste dose and use it for the other two. So one and two, let's save it. And in the second we have the name. I'll just leave this thing right so there will be no note at the end. Instead, off enter email there will be like inter name, and it will not be described by anything so like this and the glass will stay the same. I d will be name inside here will have a name and the type will be a next. And the label will say just name. So like this And then we have the message. So inside here we will have the message and it will be four. So 40 message. And then instead of input, we need the text area. So I'll just the lead both of those lines and creative you new text area element. So next area and there will be like glass off, Dad. So did will be once again formed control. And then there will be the idee off that so that will be just message. You can obviously define other other tax like name if you won't deform to actually work. But I will just keep it simple for now and then we also have blaze older. That's a stipe, your message and yeah, And also, as you can see, there's a couple off rose and there's five of them, right? One, 12345 And then we start scrolling. Okay, so five rows. So, in order to define that the simple type row and then five and cozy tack, right. If you want some default, value can type something in there. I will not. And so does the text area taken care off? And what do we have next? We have these subscribe check box. So then will be just easier. One I can cut be No, no, I will not copy. I'll start from scratch. So we will have a Dave off the class foreign group, right? Same as before. But now we want it to be the form check like this, so Oh, my God. Okay, that's correct. And yeah, because we will have the check box inside here. So then we have a input, and the type of the input will be the check box like this. And yeah, we also need to add some classes to it. So class, and this will be form check. Is it for Yeah, from check input, I think. And then the i d to it. If you want. I'll just keep it Blaine or no, I will not keep it plain because we will define the label for it. Right. So, LeBeau of the glass. Ah, form jig label, chick label Like this. Right? So there's the form, check, input and form check label, and also that we need to define the i d. This and this will be for the check. Okay, cool. And then we have the text inside it. So that's just the subscribe to our newsletter. I'll just copy Paste that and yeah, save it. That's about it. Lastly, we have the button, so we will once again have the aid if inside which we will have the button. And we wanted to align a d sender. So I'll just typing here Text center and inside here we will have the actual button and the button will have a few classes. It will be a button, and it will be large as you can see the button iss a bit larger than, for example, Oh, one of dose, right down smaller. It's a slouch at this one. So button large and yeah, and another thing that we want to add is the button primary. So this will be the primary button, and that's about it. Inside here we have the submit text so like this, and that's about it. That's the does the There's the Contact US section and let's move on to the food 8. 07 Footer: Okay, So funny thing I notice right now is there. We have the body tech right now, right here. And obviously everything that we rode should be inside this body tech, right? So I'll just take it out and move it to the top of the bait. So right now, right to here and yeah, I removed the stack and save it. And yeah, right now it z better. That should be That should be better. Cool. And yes. So let's move on to the food or so once again outside the savvy comments for every section . So footer and inside here I will have the html Jack footer, okay? And we will add some classes to it. So this will have a glass. Foods are in order for us to be able to stand it in the main CSS. And I will also add a batting to it a d top. As you can see, there's a batting, and yet so right now, let's add the class container, right. As you can notice, those are there is a space between those so class and there will be a container container. It's or like this. And inside the container, we have, like free comes right. There's one second effort, and all of them have, like four right off the sides, for they have equal sizes. So inside here we will create the diff glass and this one will be call large and for okay. And yeah, and let's Discovery based it 40 other free sections. So there's one that's the debate section, and that's the the social media section. OK, and save it cool. So right now let's take care off this section. So inside here we have a basically a brand, right? It's style the same way as the brand, so I'll just add a link and this will have the class off the enough Barbara end, right? And let's also add the de linked to it. Don't really care about it, and inside here will be the shopper like this. Then what we have is the text. So there's just a simple paragraph. No need to style it ologists GOP based this thing. So copy and inside year based cool And then underneath we have some social media Aikens So yeah, what is it? Well, that's an a nordeste right? And inside Ian ordered list. We want basically We want the an ordered list to be at one row. So we will add some classes to it and we'll have the class enough and social media so that we can style at the bet. And we also add a margin to it so that it is Yeah, maybe. Yeah, free. That will be enough. And yes, so that it is. There is a space between the paragraph and the social media. Aikens, go. Nothing is that we actually need to define those items. So we will have a list item for each and every I didn't. And we will also add some padding to delist item. So batting on the X axis. So that means this access and we will right to so that basically means betting cleft and betting right will be set to two. Okay. And so then we have, like, some link and the ref will be once again something obviously that should go to your to your social media pages. And then we have the the front arson Aikens. So this will be the FAP and F a slash facebook and yes, So this will basically create the Eiken. Yeah, I shouldn't have done that that And yeah, so that that looks better. So that's just one of those science. If I copy paste those and change the Aiken to YouTube to Weather and Google. Okay, so inside here will be just YouTube, the waiter and and Google I thing going. And yes, so that should be the Eiken steak and care off cool. So let's move on to the second section. So inside here we have the heading, right, and this will be just a heading for right heading for And let's put it a no, we don't have to actually put into class. We can style is ready, Footer. And yet let's go this one other pages like this And then once again, we have a a Norden list and I can just maybe copy it from this thing so I can just base that get rid of some of those and let's change it. So instead of enough, we wanted to be a right inside here. We have enough because we wanted to be at, like inland. But right now we wanted to be a calms. So what do you want to do is basically change. The margin will stay the same body inside here, or you're basically toe flex and come like this. And then inside here we want those to be styled those elements right, to be styled as a Neff item. So inside here, we'll just stop enough item navigation item. And yes, So then we have the link. There will be a class to it once again. That item and the link where, where it should take us, actually. And then we will get rid of those I can and simply typing here about us like this. Save it and let's add all of those. So our just skip the part of the video when I changed us. Okay? And there's something different when I save it. It just doesn't form eight correctly. But as a look at decode, it looks just fine. Not sure what happened. Maybe the extension doesn't work for this case for some reason. Yeah, but it looks it looks cool. Decodes the code should work just fine. Anyway, let's get rid of this and move on to this third part, which is the easiest one in the year. We have just social media and some some images, so this one should be quite easy. So the H four will be just the off the glass. We will add some margin to it so margin bottom will be free because we have all of those things have laying margin top. Oh, sorry. I clicked on that eso as move on to the They have margin top, but we would have to define margins off for all of those things. So it's simpler to just add margins up to the heading, right? So heading will have a margin bottom. Sorry. And then inside here we have the social media text and then we have a few images and I used the fake image page to get image. So if you type in here fake image that bl Basically it's just a page that allows you to simply used this thing to basically import any image that you want with any color that you want, and it's quite cool. So I can just simply copy paste it and into my code and it will look ever looked like those things. Yeah, I'll just I need to change it. Right. So there's 100 and 100. Okay, so this thing will be 100 eggs 100 and the color will be. Let's make it white. Okay, like this. Cool. So that's one image, and we won't Six of them, right? And yes, so do we have, like, some classes already at We do. We do have some classes. So inside here we will have a glass. Obviously. All also want to define the out to be something. I just keep it like this. And the classes. Basically, as you can see, the image is a bit around it. So we can do that. Why? Writing just round it. And then we have the some margin on the X axis and some margin on the Y excess body? Yes. So margin on the X will be one and marching on the why will be also one. Yeah, and we want those images to be just floated left so that they are lined, and that should be it. So if I just got repays this thing, all right, I coffee paste it and just simply based it several times. I think there are six of them. 123456 Okay. And save it. And let's actually look at how deep age looks like. Looks like, right now. So if I scroll tits up and go for it again before we start with the CSS right? Leaning to add the image, we need to figure out those things at styling. Yeah, before we at all of those images, we need to take care of that. Okay, The testimonials doesn't work. The contact us looks quite good, right? There's Yeah, it's looks quite good. And then we have these shopper and yeah, that's about it. I think I forget with the shopper to put dirty classroom because that shouldn't look like this. So and my right here, I'm right. So if I just put it inside here, it probably want to add a new diff with the class. Ro. Yeah, I need to I need to add in Univ with the classroom. So def glass row like this and l removed a stink. And we need to move this underneath all of the content and we just add it. So that means here, save it suited its style properly. And then when I reload this thing yeah, as against either the space Cool. So that's mounted for this lecture. And in the next one, we will take care of the CSS 9. 08 Simple Bug Fix: okay. When I went for the code, I noticed that I made a mistake. And inside here instead. Off enough item. It doesn't make sense. It should be enough link. OK, so sorry about it. Make sure to change it and just get we based all of those. And it will be like five of them. Okay, cool. 10. 09 CSS Navbar: Okay? Yes. So let's take a look at the CSS inside here. I already used something. This is just a CSS selector for basically every possible input. And we will style the deform using dose. But as you can see, the form looks a bit weird. Right In the final final theme, it looks much, much better in my opinion. And yes, so we will use those selectors. I didn't want to tie them all right? It would take me forever. That s so let's start from the beginning from the total beginning. So inside here, let's die body basically the default stuff for everything. So that will be the fund family Ready for family would be the more I'm not sure how to spell that. So let me go back to the index it out html and add it up. When we inserted the fund, there's the name. Okay, it looks quite great. I really like the phone, but I just can't learn how how to spell it anyway. So that's he phoned. When I reloaded the page, it should look a bit different, right? As you can see, it looks a bit different. Cool. And so let's also type in here. The phone to wait and let's keep it 400. Okay, for basically by default, we will have a 400. Then what do you want to do? A stargate. All the Aikens, So every I can in the basically in the whole document will have the color. As you can see, I defined in here some colors and yes, so I will use that. It's usually you want to define a goal color theme before you start creating the website. And usually you want to tap the colors inside here so that you you know, you have them in place and you can use them anyway. So when I reloaded, the ICANN should change. Yes, against any color off. This Aiken is a bit different, right? It looks a bit different. And yes, so let's move on. Let's also, for example, at the font size. So the fun sized this and let's just use 18 pixels, and we also need to make it important because there is a some some in Fort Important like this and because there are some, like default size and we need to override it. Yeah, so yeah, it's a bit bigger cool right now. Let's take care off all the headings. So Darcy heading one heading to and heading free and dose will have, like a bigger funds. Wait if you want. So inside here will be just the front. Wait. And that would be like 909 100 for dose and 40 h for H five and h six. Let's make it just the 700. Okay, so fun. Wait. And this will be just 700. Cool. So if I save it, it will be styled properly, and I'm not sure those things should change. Yet, as you can see, the headings just changed. Cool. And then so nothing that we can do is to style the button. So every button in the page a Z can notice in the final theme, we don't have the border radius, so I'll just remove that. So border radius. And yet I'll just move it 0%. And it needs to be important. And also a bucks shadow. We also need to remove that. So Brooks shadow and the nude beaches none. And once again, let's make it important. Cool. So that would be it. A fire load this page there should be no border. Yeah, no cool. No border radius course. So that's about it. 40 defaults, defaults, stuff. Let's right. Now, take care of the buttons. So I'll just moody comments. And inside the year outside the buttons and its place. But you're cool. And then inside here, I want to target all the buttons and all the colors. So inside here we have the button primary, and we want to usually change the colors. Saudi background color off this Well, beat black. So as you can see, the here is defined the black color. Okay, I'll just coffee Bassitt for now. And it needs to be important because we don't want the bootstrap to override this. And we also need to define the border color for this. And that should be once again black like this. And it should be important once again for the same reason. So in important like this, and let's reloaded page and see how it looks like it should look a bit bigger. Yeah, as against see, it looks a bit better. And, uh, yeah, so that looks great. Cool, in my opinion. Cool. So let's also take care of the hover effect If I have are worried, nothing happens. So let's add add so button slash primary and how our And when I hover over it, I would like to change the background color. So that's ground color and let's make it transparent. So basically there will be no color. Okay, let's make it important and the color will be black. So color off the text inside the button will be black. And it also needs to be important like this. And if I were low this thing and hover over it, as you can see, there is the animation. Yeah, it looks quite cool, I think. Yeah, let's get Okay. So let's move on to these second button that we use, for example, inside here. So we also need to style that, and that's the button outlines secondary. So outline and secondary. And when we want to style it, we want to add the color so the color of the button will be just I would say this thing or yeah, let's let's use the white white color. So this one like this and let's make it important. And let's also set the border color so border color so that it it's once again the same color, this one, and let's make it important. Cool. So less of your lotus. Think and see how it looks like. Yeah, it's white because we need to change the background of that. But yet, anyway, let's just keep it this way. And then when he changed the background off the off this section off the call to the action section, we can actually see it. Okay, so yet right now, let's take care of the button. Outlines secondary, however effect. So when we have over it, what do we want to do? We would like to change the color to be like one. So this one and let's make it important like this. And we also would like to change the background color, sued the white one. So this one and let's make it also important. And they're so does RD buttons basically taken care off. So right now let's take care off all the headings inside our and start I our files so headings and inside here what? Heading in stevia? Well, we have few of them, but basically all of them are the class section headings, right, So section headaches and what do we want to do? Well, we have like to align them to center, so fixed a line center, and we would also like to add some margin to it. We could have done it, Wadi. Bootstrap. But I will just do it right now. Right here. Yeah, You probably want to add it in the bootstrap. Okay. And then we also want to said the first leather, if I'm not mistaken. Yeah. As you can see, the first leather have different color, so we can target the first letter. So section heading and and just first leather like this. And inside here, we just defined the color. Right. So let's get back to our our page and let's typing here the color and this one will be like this. And if I were Lotus, it should be in the center, and there should be okay. It doesn't work yet. Okay, so So as you can see, I made a mistake inside here. Okay, Thanks. Section heading and yeah, if I reloaded, it works. Okay, Cool. So, as you can see the first leather and it works for every heading, right? If I take a look at the contact us yet looks quite cool. So yeah, that's the heading. Right now let's take care off the enough bar. Okay? So those already the things that we just defined for everything on debate Let's just start all the elements from the beginning, from the top to the bottom right now. So, Dina far, what are we going to do? Well, let me just look at distinct and and see what? Actually, what do we actually want? So in the beginning, we want the style, the actual Navarre. So sorry like this. And inside here I want to study, not bar. And as you can see, the capacity is set to one. So the capacity basically it will be There will be no background off. The knob are cool. And then what do we have? Well, as you can see, the the heading off enough bar basically the logo. Enough, Barbar end If you want a bar Brende half a Sorry Bren like this have a bigger size, right? The phone size IHS like Sue relative, I would say and they're so let's also style those nothing's and as a default the enough ling And also do enough Barbara end. Right, so enough bar brand half a color off black rights. So the color will be black like this, and it needs to be important. I think so. If I save it and they're low distinct, let's see how it looks like yet. So it looks pretty much exactly the same as this one. I would say, Yeah, it looks exactly the same. Only this time when I hover over it, there's the animation. We don't have that yet. The yeah, that I think that that looks quite cool. Also, the I can I think that's yeah, we need to change this so that the text is is white. And also the ICANN should be white. I think so, Yeah, let's change debt and let's also Andy hover effect. So when we hover over the naff link so like this, we would like to change the color so the color would be, I know, like 777 Okay. And let's make it important like this. So when I hover over a d, color will change. Yeah, nothing too interesting. And then what we need to do is also target the button that is inside enough bar. So button primary right on the button primary and inside here. What do we want to do is just is just basically changing color, right? So color And this one will be the white one. And let's make it important. So if I save it and reload this thing, let's see if I reloaded. Yeah, looks great. Cool. Nothing too fancy if I have or over it, it works. Yeah, looks like good. And nothing that we want to do is basically changed the however effect. When I have her over it, there's a wide background and there's a white text. So I need to change that. So I'll just go up in this selector and inside here I'll just food the hover effect, OK? And when I hover over it, I would like the color to be black. So zero su and the rest. No, no, no. 0 to 01 and 00 You're pretty much couldn't tell the other friends about Yeah, and we also can said the background color to be a transparent right, so that would look great on the on the image. So let's make it important. I'll just show you what what we are doing right now. Basically When I hover over it, there will be the image background, right? That will be seen. All right. Cool. And yes. So right now it looks Yeah. Reload the page. So if you were loading page and then you have are over, right? Yeah. The Texas Black cool. So that's basically the Nachbar taken care off. 11. 10 Homepage and Call to action: Okay, so first of all, we need to put the home comment inside here and let's take a look and D home section. So if I'm not mistaken, we used the home class, and right now let's define the the style of that. So let's define to it a min height, and this one will be like no, 660 pixels and the overflow would be hidden. And oh, sorry. And let's also make the background image. So we need to add the background to it. So background image and the image will be from Earl, right? So from Huaral. And we will just use the image from the image folder. And I think it's the main five image. And I forget to put a string so like this and like this, and when I save it and reload the page, it should work. Yes, so it's a bit bigger and daresay background. But as you can see, the image is extremely large. And right now, the this woman is basically at the end of the image, right at the bottom. And since we are getting the image, basically, we, ah, basically remove her from the image so What we want to do is basically the finding background position. So the background position basically means that we will move the image so that the bottom is at the bottom. So the bottom of the image will be at the bottom of the off the death and the and other here will be the arrest of the image. Right. So we will not see the top of the Yemen so we can do it Seemed like this. And if I reload this thing now, it still doesn't work. Yeah, because I need to and let Wadi background size so background size. And I need to make it cover cover like this. And right now it's should work. If I'm not mistaking the yet, it works so cool. There's the lady and we have the items inside here. Yeah, right now it's starting to look like the like, the actual thing that we want to create, right? So there's only a few things that we need to change. So yeah, let's see. It was actually do that. So, first of all, when we have our over d over the guards, there is no animation in the theme. When I hover over it. As you can see, just scales right and it looks quite cool. So let me actually create the animation. So everything this is the card glass, if I'm not mistaken and what we want to do is basically add a transition duration for it. So did the animation takes in time and let's say, like half a second. And let's also add the transition timing function so that the the timing is a bit different and I would choose this one. Okay, you can obviously use something like easing out and stuff like that, or you don't necessarily have to use the the timing function for it. It's just after you. And then we have the what happens when you have are over the car and what we do is we just at trance firm and then scale, right? So scale. And inside your regis scale it like 5%. Yeah, let's say five and let's see how that actually looks. So if I were loaded page and hover over it, I'm not sure one of my computer Yeah, that's cause of my computer, because I'm recording and making yet, but the animation looks quite cool, okay? And nothing that you may notice is that the image, all of those images, they don't have the same size. So we need to make them to have the same size. And in order to do that, I'll just I started the card image. Yeah, I saw. It s the card imaged off glass. And the height will be, for example, like free 100 pixels. And we also need to add the object fit. And this will be just deco are Let me just first of all show you how it would look the Saudi object fit. So if I just for low debate, right, as against the those images are just yet it doesn't look good and the better when I used the object fit and inside here at the cover like this and they're Lotus thing, as you can see yet it looks a bit better A lot better in my opinion, girl. So that is basically this thing right now let's move on to the culture, the action thing. And so I'll just copy paste this this comment and inside here I'll just type culture the action. Okay, like this. And yes. So this is quite simple. Inside here. I'll just right go to action. And inside here I will have the background color, and I'll set it to the black one. Agnes. And the color will be the white one. Like like this. And yes. So if I were a load this thing right now, the button will be seen. OK, right now we can see the button and yeah, it looks right. Good. That is it can notice there's a betting right If I'm not mistaking in the version that we are creating their spotting and also discolor is the different run. Yeah, but I might actually prefer the white one yet it looks a bit better, in my opinion, but anyway, there's a batting, so we can either at batting in the CSS. But what I would prefer you to do is just when you find out something like that, you just go back to beg Here and, for example, add deep betting on D u. I inside the HTML used the bootstrap technology, right? So if I were load this thing right now, it's there should be a patting, and yet it looks exactly the same on Lee. The color is different, So yeah, that's the culture, The action thing 12. 11 Testimonials: So before we go to the gallery, I just need to add all of those images I already did so that I don't bore you with that. Obviously want to change the product image and yeah, and basically copy based off those things, right? So, yeah, that's basically how we can add all of those images and let's move on to the CSS. So the important thing. So first of all, let me just take this commend and put it inside here, and this will be just the gallery or like the items. However you want to call it and let me start with the Bryce stack. So did Bryce Stack. And the price tag will be We'll have the position off absolute right, and it will be like top 20 pixels and left also, like, 20 pixels so that it is not directly at the corner off the image. And, yeah, the background is black. So like this. And let's also add some batting to it. So, like, 20 pixels and that the color of the text will be just the big one. Right? So this this one and that's about it for the price deck Right now. Let's take a look at the price. So when I go back to the theme that we are creating, as you can see, the price is a bit bigger than the than the dollar sign, right? And yes, so inside here I'll just change the front size. So fun size. And it's our informed like this, and the phone size will be like to. And also let's change the fund weight so that it is a big bowled, a bit bolder, and that's it. And let's also move into the dollar. Our analysts make it also like a big dick so fun size, but not as big as the Bryce tax. So, for example, like one point for and like this, if I save it and let's see how it looks whenever low debate. Yeah, you can see it right now, but yeah, let's style the images, and then we will take a look at it. So Okay, so right now let's take a look. We need to move to the gallery part. So first of all the gallery have free comes right, so inside here, I'll just write. Come count. There will be free columns, and I also need to define the column with so coming with. And it would be like 43%. Okay. Cool, huh? Then we need to take care of the picks. So gallery, gallery picks. And yet this glass picks and okay, like this And what we want to do is we want to add the position relative so that the price take and appear on them. And we also want the overthrow to be hidden. Even the heiress. Well, I'm not sure whether we need that. Yeah, we will find out later on Andi, if I just reload debate. As you can see, it looks a lot better. A lot better. So it basically looks the same as this thing. We forget about it patting. Yeah, but that's not a big deal. And, yeah, we need to take care of the hover effect, so the hover effect is actually quite simple. So when we go to the gallery and picks where you won't, the image hover effect and the hover effect is simple because we just scale it right. And there is no, like animation. No timing. So it's It's simple. You can obviously use your own animation. Yeah, but I won't bore you with, like, creating 10 different animations for it. So if I reload this thing and hover over it, Yeah, as you can see, there's the same animation. Cool. So let's also add the space to it. So I think I forgets maybe around here, put a margin and detox 05 And let's see how it looks like if I were loaded. Page, Yeah, I think it looks exactly the same. Yeah, I think it does. So cool. That's the Yell Ary. And after the gallery is only the testimonial, So, yeah, let's take care of that. 13. 12 Contact Form and Footer: So, Alan, just couple days this comment and inside here change its duty Testimonials. So, like this. And yes. So let's first of all, change the image Sodi testimonial image. And what do you want? The well, we just want the image to be quite small. So, for example, 100 pixels and the height to be also 100 pixels. We also want the object to fit. So we sing trick as before and yeah, we need to We need this to be around it, but I'm not sure whether I added the class before. No, I didn't. So yeah, I will just change this to border radius. You can also add the glass your HTML. I'll just do it like this because it's a bit faster about it. So right now it's yet there, say circle of him. And another thing that we need to add is the to the testimonials. So the steam o Neill's like this and we need to change the background color. Obviously So background Keller and the background color will be just the black one and the color off those texts should be like white. I I'd say I think there should be an s. That's because yeah, that should be an s. And the also the color will be will be white like this And let's see how that looks. So if our load ISP age Yeah, it looks quite good. I also forget about batting. So let's Addy batting to it. So that's underneath the gallery and inside here Let's be batting on the y axis to be free and it should look a bit better. As you can see, there are the arrows. But right now, yeah, they do not do anything. They only do the animation about the actual sliding doesn't work if I'm not mistaken. Oh, are If I just forget? Wait, wait a minute. I forget probably about changing deuce images. There should be like testimonial sue and testimony free. And if I save this and reload a page, let's see what it it works. I also need to add the now I also need to add the body ing. So, for example, I need to add the margin bottom to the gallery. So I'll just change the margins up to the margin on the Y axis and reload the page. Okay, that looks a bit better and let's see whether that works. It seems like a dust, actually. So yeah, that's cool. That's the the testimonials taking care off and let's move on to the contact ass. So the contact as we will use those selectors that I already very right, you can just copy, paste them or just somehow get them. And yes, so inside here we need to change the border radius, Saudi border a tous, and this one will be zero. And we need everything to be important because we are overriding. We also need to add a batting to it. So let's say the batting on the X and Y axes will be quite big and yes, like this. And let's also make it important. The batting from the left and right can be a bit smaller, right? And let's get rid of the default border. And let's only put daddy border at the bottom. So bottom border and the bottom border will be just one pixel, solid and black like this. And let's make it important on and okay, bottom border, it said. V border bottom. Sorry, border about him like this. And let's change the color actually, so that we can see it a bit better to the black and let's make it important. So if I just reload the page, as you can see, it looks quite good. Not sure why this doesn't work for the email address. That's that's a bit weird. Okay, why? Why? It doesn't work. So if I just used the I pressed the F 12 button I used the Web developer to. So if I just click on there, I can see that I have the import and that it doesn't have the class. So input type e mail instead off email, right? So I make a typo in there so that it was just a brief hey, back fixing. So instead of for D in the side, here is a type of email. If I save this and reloaded base, it should work. Yes, so that's the developer tools that I just show you. You can press the F 12 button, and it's a great, too if you just have some error on your page and you are not sure what is happening, you can just click on one element on your page and see the CSS that's affecting the element . It's great great. Another thing that we want to do is just change the focus. So when I click on that, as you can see, there's like, blue blue box shadow and we don't want that we wanted to be black, right? So let's actually change that. So inside here, I need to change the border color too. Two black. So the card that I actually want not instead of the blue and I also need to change the box shadow. And this thing is a bit hard to figure out. Ah usually recommend using, like, some some to online that basically allows you to create your books shadow. But yeah, basically, you have thes starting color and the ending color and you define the inset border and the outset. And I would say, Chad Oh, sorry. And yet so I'll just define it like this. So there should be like, four picks us. And yeah, it's like CSS basic CSS, and I need to make it important, and I also need to add the outline, and this should be like none, I think. And let's also make it important. And Liz reload the page and see how it looks like. So If I click somewhere inside here, it looks quite good on. Let's see what happens if I zero inside Heever and your low debates. Okay, get to the bottom and that it looks the same. I'm not sure what What? What's the difference inside here if just click on that? Yeah, the border. I think it's but the shadow is a bit brighter. Okay, so let's just instead of this, use the use the rgb a so that basically allows us to add the capacity to the color. So this should be to on zero that's the color. And then when you ride the capacity and it should be like zeroed out zero sewn five, Okay. And let's see how that actually looks right now. So if I were loaded bait, it should be the border should be or the box shadow should be should look a bit different. Yeah, it looks It looks exactly like that. So cool. Let's move on to the footer. So the footer in order to create the footer, I'll just coffee based this this thing and put it inside the year. And let's change the comment. Two footer So footer and yes, so what do you want to do is start a deep footer. I think I added the glass footer to it. Sodi background color will be background color will be just black. So 020100 and the color will be white. So this one and let's make it important, Chris. So if I were loaded page, it should be black, and there should be a white teller in front of it. So let's take care of the of the links. Dealings are just black at this moment, so I'll just right footer and A and I will just change the color of them to the wise one. So, like this and let's make it important. Cool. And let's also change the enough bar brands. So food, sir, and dot not Bar Brent like this. And let's also change the color of death. And I could have just used Yeah, well, let's just do it this way and make it important. I could have just type this in front of it and make a common side here, but whatever. And let's reload the thing and see how it looks like. We can also add some margins to it, so that it looks a bit balanced, right? As you can see the shopper as just direct ITT's lowered and dose to things. So let's add a margin to the age force. I think so for their H four. And let's add a margin top margin. It's up to them and there should be like I would say, 10 pixels and yeah, let's see how it looks like you can maybe even change the color to the primary color if you want. Yeah, right now they are balanced. It looks quite good. And the M we can also add some margin to the bottom of the page. We can do, like margin to the footer or batting to the folder. So let's do it actually, in the HTML. So instead of batting at the top, I will just put batting on the why access And you have a sick look at the theme and how it looks in there. Yes, So the color is different, and I also have this made by me bar. Yeah, you don't have to put it in into your own own own template or into your own website. Yes, that's that's in my opinion. It looks the same 14. 13 Javascript: Okay, So another thing that I noticed is Dad. The header doesn't change when we start to scroll. Right? So we need to fix that. And also, we need to fix this thing, right? So that those buttons actually take care of the category filtering. Okay, so let's do that inside. Here we have the script. We we need to write a job script in order to just work. So inside a script, Jack, we will start to write a javascript, so we need to also crows it like this. So, first of all, we need to write it into the documents already. Right. So inside here, we read the document dot ready function. So when basically everything is loaded, we want this function to be called. And this is just an anonymous function. And inside here, I only write the code that you want to execute. So when we start a scroll, So, for example, when the window detects that we eat scrawled, we want this function to be called so function once again. We don't need any bar meters. We just wanted to be God. And what we will do is basically check. And if the if the scroll height is greater than 50 pixels. We will change the enough bar. So inside here I'll just change. Say that if the document document dots Grote up, sqrat up. So basically get the current vertical position off the East crowbar. In other words, how long is it to the top of debate or a Okay, and if it is greater than 50 we'll just do some stuff. We will change the styling of the navigation. And if it's less than 50 we will just change it back so that if you scroll back to the top , the the style will become the in the same. So what do we actually want to change? Well, we want to add the background, many with Medina. Far right. So inside here I will just select enough bar like this and I want to change the CSS property. And the name of the property is the background color, background color, and I will just set it to not say white one. If it is greater than yeah, let's set its wide one so f f f and six of them, I think. And let's also change the border city to the navigation so once again we will select Dean of our like this and the ones again we will jdc assess And inside here you want to change your border and you want to change the bottom border and we will set it to like one pixel Sollett And the color will be like, let's say just DVD. Okay, so it's actually saved this and see how it looks like if I lo de page and start scrolling, okay, it needs toe needs to low deep wagons, and it's quite slow with those. Those are, like, extremely big images. And it doesn't work for some reason. Not sure why? So, yeah, let's take a look at the council. So if 12th and inside here, we can have all the element OK, all the errors that happened in job script. So inside here. And as you can see, the dumb, um, net is not defined. So obviously I made a typo inside. There should be document, so if I save it and we're low debate and starts growing, let's see, it doesn't work for some reasons. So once again, let's bring up the council and take a look. There is no error. So what could be a problem. I could be setting a background color. That's ground, okay. And not a type of sorry about it. And yet, but I'm sure you quite interesting information. And that's basically how to fix the box when you make a mistake. Because if you write some code, you will make a mistake. And it's just yeah, it will happen at some point. And yes, So what do you need to do is be able to fix them when they happen. And yes, so the deviled developer tool is a great tool to do that. So, as you can see right now, it works. Only this time we don't actually change it back. So when we are at the top, it doesn't work. So I will just change the background color when we are a detail too transparent and France , You are end like this home watching the typos now and the border to none. So let's see how it looks. If I reload the page, it shoot war. Yeah, so it does work. When I scroll, It changes. Yeah, So that looks quite good, in my opinion. So let's move on. Actually to this part. So inside here. We want to define a function that will be basically I need a variable that will be just the selected glass. And in the beginning, it will be just nothing. And then what I want to do. Well, all of those batons have a class gold filter, right? I want to target debt glass. So, like this and dot filter. So every button and what I want to do Well, when I click on the button, I want some function. Basically this function to be called and what is functioned us. Well, I need Teoh change the selected glass to the value off the off the doctoral dead we defined in the button, right? So inside here I will just select. Okay, so equals select this. So this basically means the button that we clicked on. And I want to ask the value off the attribute off the That's a role like this. And so right now I have the selected glass, and when I want to do is just get rid off all those pictures. So, like this dot picks that are not okay. The don't have the class, the selected class, so dot and then the name off the selected class. Right? So that blast selected glass. Okay, I need to change this selected glass and what I want to do to them. Well, those are the pictures that I don't want to display. So I will just change the CSS property off the display, and I'll set it to none like this. And I'll also need to right now display those images that were hidden previously. OK, so basically, those that have t selected class will be selected, so we'll be display. So if I just basically take this button inside here and dance, I've CSS and I want them to be display block black like this. And right now it should work. So if I save it and reload the page, let's see. So if I click on that yeah, it does work. So yeah, there's basically at this basically had That's all the javascript that we need. 40 page 15. 14 Responsive website: So right now, we also need to take care of the responsiveness off the page. So if I just type in here responsive and let's take a look at how it looks right now. So the cool thing is, even though I'm on laptop, if I open up my developer tools and click on this funny Aiken, it basically allows me to change it, change the view to like, some some mobile phone or something like that. So, for example, this is how it would look like on iPhone X. So, yeah, As you can see, we have the menu. It doesn't look as good. Those should be definitely on one line, right. This should be at center. This looks terrible. Yeah, the conduct firm looks fine. And this looks also fine, but yes, So let's take care of those problems. So I'll just move the study bottom and target the CSS. So Algaze Raidi, Media query. And inside here I will just Syb Mex with And I want the Mex with to be let's say, like 700 big sauce, for example, and from debt point. I want to target Dean of Bar and Enough Iten and I wont enough item to be displayed block, and I want them to have the with off 100%. And I also won the batting to it. So So, for example, the batting on the X axis will be like 10% and zero, then pixel story and on the X, uh, on the left and right will be zero. And I also want the text aligned on center text line center and that's about it. Let's also take care of the of the naff, so dot naff and what I want is the head on f right, if I'm not wrong, but it should work. So probably I should select it because I'm maybe using the enough bar. So I'm maybe used the enough class somewhere else than in the heather. And if I would just like the enough, it would also change the style of the other naps in the in the documents. So I don't want that. And inside here, I'll just typing here deep background color. And outset it sued the white one. So known it's not the white one. This is the white one, okay? And yeah, I was just see how that looks right now. so if I were low debate, there should be a background to it, and there's not. Okay, So what's wrong? There should be a background. Okay, that looks quite cool. But I'm probably doing something wrong with the targeting, so let's take a look. And enough. So navigation. And I have a enough bar. Yeah, let's just select enough bar. Okay, So So So so right here. The class, not bar. Yeah, I made a table in there. So dizzy. Problem? Probably. So let's see. Okay, it's it's white. And when I click on the icon Okay, that looks go. That looks cool. That looks go. So, yeah, we also need to remove the the scrolling thing because, yeah, it just makes it or we don't have to because I can just do it like this, and they will take care of it. Okay, That will take care of that problem. So yet And I also need to add the Eiken to the HTML. Yeah, that looks quite so. Let's also add d I can to the menu. So inside here, I'll just type in here. I can and let's pass in here. Do you found awesome? Icann's and this should be bars if I'm not mistaken. And yes, sir, If I saved this right now and they're loaded Page, there should be a Aiken kind of the hamburger menu right yet? Yeah, there it is. So, yeah, when I click on that, there's D menu. Looks quite cool. Okay? Everything looks fine. So yeah, let's also take care off this text. So back to the sea assess and inside here, what do I want to target? I think that that was like the culture action, right? So, girl to action and the world I used, like text, right? So I think I should also target the text right inside here. And what I want to do is just typing here detects the line and the line into center like this. And if I were low debate, it should work, okay? And yet thus quit coup. And let's also take care off. Distinct. So the gallery, obviously, when we are on phone, we don't want free columns, right? We want basically one column. So let's take care of that inside here. I want to study gallery gallery like this, and let's just change it. Sooty. Let's change the gun count. to one. And the song with 2 100 So column with 2 100%. And that should make the trick. So if I were a load eBay h it works. Yeah, and it looks quite good. So, yeah, that's the theme. It looks quite good. Nothing that we may want to do is check for the tablet size. So, for example, the iPad okay, there is a good of a problem with those things. Many looks fine. Okay? Yeah. Do you like this Counts. All right. So basically, these things will we need to make them from Okay, so we need to change those things too. Like, 900 picks us so that they apply even on a so that this CSS file applies even on a tablet, right? So if I were a, load this thing and check this once again. So if I click on the menu yet, it looks a bit better. Okay? Okay. We don't Well, actually, let me just change this gallery, because this gallery right now looks a bit silly, so I'll just write another media query and this one will have the Mex with off. Let's say, just 500 picks us and inside here. I would like to change the gallery, but when I'm on a I pair, I want there to be still free. Comes Yeah, that looks good. That looks actually good. So okay, but we have a problem with dose those dresses, right? So we need to take care of dad. And I think I made a mistake inside the HTML because this is the medium website, right? So the medium page and offset on the large is for But I want this a d medium to be be four , right? So I one does those basically items or cards are, however you want to call them to be the size of four. And right now they should take care off the holes. Yeah, that looks that looks great. Okay. So yeah, and it's about it. I think that's that's everything. The base looks great. Everything works just fine. So yeah,