Image Carousel, Contact and Footer – Bootstrap Website – Web Development 101 – dacade


In this video, we are going to add a carousel
to show some images and finish our website. Ok let’s get to the next section, here we
are going to show some images, Let’s create a new section by copying the
first one. Let’s call it work. A Let’s make this on larger devices a little
bit bigger: col-md-8 div-center I like carousels so let’s use this component
from bootstrap. Let’s get one with controls, copy it and paste
it. Let’s add some images we are going to use
to our img folder and now change the source url. Great, let’s test this. Works fine. Also on bigger screens
We got one last section. Let’s the section again This will be called contact. Let’s add a button We can use a link href and link to our mail
in my case [email protected] Now to have it look like a button, we can
use bootstrap classes let’s go to bootstrap and look for a big button. Ok here we have one. Lets copy the class. Great! Now let’s make a background for our contact
section. Let’s give it teh id contact and style it. Same color as our projects Ok nice and finally we need a footer on our
website, So let’s create a footer element I have prepared a little text. Ok but we gonna need to style this again. One last time I promise. Center it a padding a background color and
the font will be gray too. Ok, we are almost done. One more thing. You can see this little icon on top of the
page. This is called a favicon. We have just a page there at the moment. Let’s change that, to make it simple we will
add an emoji there. Let’s google favicon emoji. I want to use this waving hand. Let’s select it and download it. Ok this is a zip, let’s create a new folder
called favicon and save the files there. Now let’s copy this in the head of our html. Add our folder destination and we got our
emoji as a favicon. You can also just google favicon to style
your own one. Ok that’s it this is your responsive personal
website. Let’s test it on different devices one last
time and our send email button works too. Now there is just one final part missing,
we have created this website, but nobody can see it, because its just on our computer. In the next video we are going to host our
website on github for free.

Add a Comment

Your email address will not be published. Required fields are marked *