Instructor: All right,
so now that you've learned all about Bootstrap,
it's time to apply what we've learned and build a project.
I want you to imagine that a startup has approached you
to build their landing page.
So, the company is called TinDog,
and they make basically Tinder for dogs,
helping dogs meet new and interesting dogs nearby.
Obviously, this is a fake startup that I've created.
Now, if you want to go ahead and steal this idea,
then I fully support you,
but essentially, the idea is very simple, you have a dog,
you want your dog to have friends, so let's use TinDog.
Now, our website is pretty fully fledged, and,
if you want to look at what the finished product looks like,
head over to appbrewery.github.io/tindog,
and this is what you'll see,
it's a really simple startup website
with a animated gradient background
with buttons to download the app
as well as features, testimonials, pricing, and a footer.
We're going to be creating this beautiful website,
and the way we're going to do it,
is through the use of the different snippets
that are provided by Bootstrap
as well as the different components,
and using Bootstrap layout to get it responsive
and looking beautiful on desktop and mobile.
Straight out of the box.
To get started, first, download the TinDog project,
unzip the file, and open it inside VS code.
Now here, I want you to open up the index.html
and you can see I've provided some comments
and some section HTML elements.
These section elements are mostly used
to separate different sections of a website,
so, it's just a group or area of the website,
and in modern websites,
you'll see very often these sections.
So this one is a section,
this is a section, this is a section,
and it keeps the code nice and organized.
And you are going to be writing your code
in between these section elements
in order to create each of these areas.
Now, what are you aiming for?
Well, you can always refer to the live website
appbrewery.github.io/tindog
to see what everything should look like,
but I've also provided goal images
for each individual section
that's marked up to point you to certain areas
that need more attention,
for example, what's the name of the image
that's going to be displayed here?
Well, it's iPhone.png,
and you can find it inside the images folder.
But also things like,
this little Apple icon is actually an SVG,
and you can find those inside the README.
So, I've included all the SVG code in here,
and I want you to be copy and pasting these SVGs
because some of them have different heights,
they have different sizes,
and instead of getting it from the Bootstrap website,
which this is from, I want you to use this version.
So, just copy and paste it into your code.
Also, if you scroll down, there's the text copy
that you'll need on your website.
And so, you can either copy it straight
from the final finished website
or you can use the text from the README
and just copy it from here.
If you're working as a web developer,
this is a very common workflow.
You'll want your client to create the text copy
because they know the most
about what they want on their website,
and all you have to do is just to place it and style it
in the right ways.
Now, the final thing I want to mention
is if you look inside the style.css,
this is going to be your css style sheet for the website,
you can see that already in there,
I've got a class called gradient-background,
and this code comes from a code pen by Manuel Pinto
where he created a pure CSS gradient background,
and we're simply just using this code,
but defining some unique colors of our own.
And you can see in here we are having our animated gradient
hovers between these three colors,
a blue, a red, and a sort of peachy color,
and that's how we're going to get this gradient background.
Similar to other things you've been doing with Bootstrap,
in order to get this gradient to show,
all you have to do is to add this class to your HTML element
and then it will automatically animate
with this beautiful color scheme.
This project is going to require
a little bit of exploration,
a little bit of looking around the bootstrap example
seeing which ones might work and comparing them,
for example,
which of the heroes might be the one that we could use
or which of the features might match
the one that we've got here,
and customizing it and checking its css
and making sure that things look pretty much the same
as the final outcome.
Now, it's time for you to pause the video
and give this challenge a good go.
You might have to spend half an hour, an hour on it,
just give yourself lots of time to make mistakes,
try things out,
don't be too harsh on yourself.
This is a big project, but I believe in you,
I think you can do it.
Pause the video now and see how you get on.
All right, hopefully, you've completed this challenge
and you're just here to see how I'm doing it.
If you haven't given this a go,
I really recommend you to stop, pause the video,
and actually try it first
because you can listen to me all day long,
but you're not going to learn
until you actually take the first step
and write the code yourself.
I know it can be really, really tempting,
but I promise you this is the only way
you're going to be able to move on to harder things
in the future
by struggling through each and every single step.
Because once we start moving on,
I'm going to assume that all of these things
are in your tool belt.
So, make sure you practice, practice, practice,
and this is a perfect opportunity.
All right, pep talk over.
Let's go ahead and build out this website.
Now, the first thing I'm going to do
is build out this title section.
So, if we take a look at the title goal,
we can see it's pretty much what we call a hero section.
If we take a look inside the bootstrap examples
and we look inside the heroes area,
you can see it looks incredibly similar to the layout here.
It's got some big texts, some buttons,
and an image to the right,
which is pretty much what we have.
So, let's go ahead and right click inspect
and scroll up to the top level
that contains everything just after the divider
and let's copy the entire element.
I'm going to paste that element into this section area
and let's hit save, and see what it looks like.
So, I'm going to show preview just to get this URL
and I'm going to open it inside Chrome
so I can see it in full screen.
Now, you can see this doesn't look like bootstrap at all.
The text is not the right font, the buttons are not styled,
this is just pure HTML.
This should give you a big hint as to what is wrong,
and that is because we have not yet added a link
to the bootstrap css.
So, let's go ahead and do that now.
So, if we go back to the main bootstrap docs
and go to the homepage,
we should be able to grab hold of the link
and we can paste it into our project.
So now, let's hit save and go back to our TinDog.
We should see that we have what is closer to the example
that we saw right here.
There's a couple of things that we will need to fix.
First, let's go ahead and get rid of this broken image
and put in the image that we want.
Here is the image.
So, let's go ahead and change the source to our image,
which is inside the images folder
and it's called iPhone.png.
And let's change the alt to "app demo,"
let's hit save, and go back
and we can see this is absolutely massive.
So now, we are going to have to adjust the size.
So here, it's set to width 700, height 500.
I'm going to keep the aspect ratio,
so, I'm going to delete just the width
and hopefully it will adjust proportionally.
And I'm going to change the height to 200 pixels.
And this looks more or less the right size.
Now, yours might be a little bit bigger,
a little bit smaller, it doesn't really matter
as long as it looks good to your eye.
Now, the next thing we're going to do
is let's change all of this text
so that it reads the same as the final copy.
And to do that, I'm going to find the text inside my README,
go ahead and copy and paste it into the right areas.
So, we've got an H1
and that's where we're going to replace
with our big heading,
"Meet new and interesting dogs nearby."
And then I'm going to delete this paragraph element
because we don't actually have it in our final design.
And I'm going to change the two buttons
to both say download.
In addition to the download,
there's obviously two SVGs as well,
and these are the icons from Bootstrap.
But remember,
I mentioned that you can get hold of these SVGs
in the README file.
So, I'm going to wholesale just copy this Apple SVG,
and paste it into here,
add a space between the SVG and download.
And now, hopefully, we have a good looking Apple symbol
in the download button.
And I'm going to do the same with the Google Play logo,
hit save, and that's it, there it is.
We're going to change the color scheme here a little bit.
We've got a button-light
and we've got a button-outline-light,
so that it would look the same as the final design.
Now, right now this button is a button primary,
so, we're going to have to change that to light.
And this one, instead of button-outline-secondary,
we're going to change that to button-outline-light.
Let's hit save and see what we have.
Now, you'll notice that
this button's almost completely disappeared,
if not for this rollover effect.
And the reason is because it's more or less a white outline
in order for this to show we need a background.
So, let's go ahead and set it up
with this css gradient background.
Remember, I mentioned that
if you look inside the style.css file,
there is already a class called gradient-background,
which we can add into our HTML for it to show up.
Now, where do we add it?
Before we can add it, we need to import our css,
and as always, we put our custom css after the bootstrap,
so, in case there are any collisions
in terms of targeting the same selectors,
the final one wins out, which hopefully is our css.
So, I'm going to link to the style.css
and then I'm going to put that class gradient-background
into my title section.
So, where do I put it?
Now, if I put it inside the container,
you'll see that it's only inside the container
and the container's got these big margins
on the left and right.
So, this is not the look that we want.
Instead, we are going to put this inside the section.
We can't put it into the ID because it's not an ID,
it's actually a class.
So, make sure you've got it set inside the class property.
Now, let's take a look and this looks pretty good.
Now, the only difference between what we have
and what we're aiming for is a lot of padding.
Now, the reason I can tell is padding and not margin
is because padding extends the background.
So, if this was an extra margin,
then this area would be white,
but instead it's actually the same as the background color.
So, where does this margin come from?
Let's go ahead and hit inspect
and make this just a little bit smaller
so we can see this padding.
And if we scroll up until we see the padding show up,
you can see that orange down there when I hover over it,
well that is what we need to get rid of.
So, you can see we've got padding top and padding bottom,
and if we get rid of the top and bottom,
it will look a little bit too much.
So, if we just target the bottom,
then we've got more or less the right layout.
So, let's go in here and find that py-5 for the container,
which is right here.
And remember, the p stands for padding,
the y stands for the y-axis.
So, it means it's adding padding to the top and the bottom.
So, if we want to change this to only have it on the top,
then we change this to pt, padding top.
And then we've got another div that has the padding
on top and bottom as well, so let's change it there.
And then when we go back,
we should see that we have pretty much the same layout.
And now, if we compare our layout to the final outcome,
it looks pretty much exactly the same.
So, we can now move on to our next section
which is the features section.
If we open up our features goal,
you can see that we've got three different areas
with all of the features that we want to show off.
And we've got this sort of rough layout.
If we go back to the bootstrap examples,
and if we look inside the snippets at the features,
you can see this is pretty much the same layout
as what we're aiming for.
So, let's go ahead and inspect and find
that row that we need to get hold of.
Let's copy the element and put it inside our index.html.
Now, once we paste it in, let's hit save and see it.
You can see this is occupying
pretty much the entire full width,
which is not quite what we want.
We actually want it all to be
roughly along the same vertical line.
So, why is this?
Well, it's because the top level here is a Bootstrap row.
If we want it to be contained,
then we need to add a container.
So, let's add that container class
and then let's move this closing tag
to wrap it around all of this, hit save.
And now, you can see we've got that perfect alignment.
The next thing we need to do
is we need to get rid of all of these buttons,
and that is pretty easy, they're just these anchor tags.
So, there's one there, there's one here,
and there's one up here.
So now, we're pretty much on the design we're looking for,
all we need to do is replace the text.
This is probably a little bit boring,
so, I'm going to use video editing
to speed things up a bit for you.
All right, so now that we've got all of our custom copy in,
the final thing we need to fix are these SVGs.
So, let's go ahead and replace the SVGs
that are in the example with the ones that we want.
So, the first one is going to be the check mark SVG,
let's copy and paste it in.
The second one is the graduation hat,
and the final one is the heart with an arrow through it.
So now that we've replaced all of our SVGs,
you can see them show up,
but the background doesn't look quite the same.
It should have these rounded corners,
it should be a little bit larger,
and we will look on the bootstrap example
where we copied our code from, they look perfect,
but why is it that when it's in our website,
it doesn't quite look the same?
Now, this might be something that you got stuck on,
but in order to figure this out,
the easiest way is to inspect on it in Chrome.
You can see right now I'm highlighting the SVG,
but if I go one level above and hover on that div,
that is the one with all of that fancy styling.
And if we look inside the styles,
you can see there's actually some custom css in here
because it's not in the utilities
which comes from bootstrap,
this is actually custom css just for this feature section.
So, what we need to do is we need to copy all of the css
and put it inside our style.css.
So now, this icon square, which is the class for this div,
can be activated.
And when we look at it now,
you can see that they all have the right styling
that we expected.
So, the final thing we need to sort out
is just to add a little bit more margin
in this features section, and then we're pretty much done.
So, if we look at the features goal,
you can see I've given you a hint
that it's actually margin top five.
If we want to add some margin to this entire container,
then we can go up to the div class
where we have the container,
and then we add margin top five, mt-5.
And now, we should have enough space
between that top title section and our feature section.
So, we're now ready to move on to the testimonial section.
Again, let's take a look at the goal that we're looking for.
So, the first section is an H2 with an image
and some paragraph text.
This area comes from this Jumbotron section.
And if we scroll down,
we can see this full-width jumbotron right here.
So, let's go ahead and inspect on it.
And let's take the entire section just after the divider.
So, let's copy the element
and paste it into our testimonial section.
Let's take a look at what that looks like,
it looks pretty good,
but we need to modify it for our purposes.
So, let's change the text inside.
If we go over to our README,
we should see our quote here from Pebbles,
and we can replace the text inside the H1.
Remember, from our HTML classes,
we should only have one H1 per website.
And remember at the beginning in our title section,
we've already got our big heading.
So, here it should really not be an H1.
Let's turn it into a subheading by changing that to an H2.
Now, this paragraph element, I could delete it,
but I'm actually going to keep it
and use it for showing the name where the quote comes from,
which is Pebbles from New York.
And all I have to do now is add an image in between,
and the image is going to be our dog image.
And I'm going to add the alt text as well.
Let's take a look at what that looks like, it looks great
other than the fact that this should be rounded
and it should be a little bit smaller.
If we look at the goal,
we can see it should be 100 pixels high
and it should be circular.
So, how do we make it custom?
Well, we're going to need to create some styling, right?
So, let's create a class called profile-image
and let's set it to have a height of 100 pixels.
And, in order to make it circular,
remember we need to set the border radius to 50%.
Now, if we apply that class to our image profile-image,
and we look at our website
and you can see that looks pretty much perfect
and similar to what we've got here.
Now, the only thing we need to add
is just a little bit more margin.
We should have a margin of five between these two sections
and a margin of two between these two sections.
So, I'm just going to add some margin top to the image,
so, a size five margin to the image,
so I can hit space on the class
and then do margin top-5.
And then for the text,
I'm going to do a class of margin top-2.
And now, we should have enough space in between everything,
and it looks pretty much the same as the example.
Now, we need to add in all of these outlets
that have featured our startup.
And you can see from the goal image here
that we've got a 12 column grid here from Bootstrap,
and they're each occupying a fourth of the space,
but notice here where I've said
it should take up three columns on desktop,
but a full width 12 columns on mobile.
So, it should be responsive,
and we can find all these images in the images folder.
Let's go ahead and add that below this container.
In order to create the Bootstrap 12 column layout system,
the first thing we always need is a container.
So, let's create a div of class container.
And inside here is where we need our div
that has a class of row.
So now, we're ready to create our columns.
Each of the columns are going to be three columns
in the desktop format, so that's col-large or lg,
and it's going to be -3, but on mobile,
so col-sm, small is going to be full width, so 12.
And inside here we can place our image,
which is from the images folder,
and we're going to start off with TechCrunch,
and I'm going to add the alt text as that.
Now, I'm going to copy this and paste it three times.
And now, I'm just going to replace each of these images
with the ones that we have here.
So Mashable, Business Insider, and TNW.
All right, so now, we should have all of our images,
but they are a little bit large.
One thing we can do is we can limit their height
so that they are all equal in height
instead of having this uneven start and end line.
So, I'm going to set the height to 30,
and that should be enough height to be visible,
but not so much height that it takes up too much space.
And that looks pretty good.
So now, we're done with our testimonial section
and we are on our penultimate section,
which is the pricing plan.
And as you'll remember,
Bootstrap has the pricing plan section right here.
And these three cards
are the ones that we want to get hold of.
So, let's inspect on that and find the area that we need,
which is probably this div row.
So, let's copy it and put it inside the pricing section,
but as you remember,
a div row needs to go inside a container.
So, let's go ahead and do that.
And if we look at our pricing table,
then it's already in and looks pretty good.
The other section we need is a title for the pricing table,
which is this area right here,
and this is the div that contains all of that content.
So, let's just copy it and put it at the beginning
of our container right here.
So now, we've pretty much got the pricing table down.
We just need to update all of the text here
to the ones that we have in our copy.
So, I'm going to do this,
again quickly I'm going to fast forward
and replace all the text.
All right, so now, all the text has been replaced,
and you should see
all of that text inside the pricing section.
So now, we need to update the design a little bit,
and the main difference is the color scheme here
is all using the bootstrap primary color,
which is this blue,
but we need to change it all to the dark kind of color,
which is this kind of black color.
And if you look inside the pricing goal,
you can see the parts that we need to change.
This needs to become outline dark,
this needs to be button dark, button dark,
and this also needs to be dark.
A shortcut here is to simply use the Ctrl + F on Windows
or Command + F on Mac in order to bring up our search bar.
And if we search for the word primary
and we replace it with dark,
then we can actually go through each of these examples
and see if we want to replace it.
What I recommend doing is to actually do this one by one
instead of doing replace all
because that way you can see which parts you're replacing.
And many times I've done replace all only to find out
that I've messed up the entire project in some big way.
So, just a word of advice, go through it one by one,
make sure that it makes sense,
and it's the right area that you're changing.
But hopefully, when we go back to our website,
we can see we've now updated all of the right places
to this dark color scheme.
Coming back to our pricing goal,
we can see that this title needs to be an H2,
and this subtitle needs to be a paragraph element.
So, let's go into our section
and make sure that is the case
because when we copied it over, it actually gave us an H1.
Now, the styling is not going to change
because it actually comes from the display four class,
so, you won't see the size change that much
or the color scheme
because it is actually not dependent on the HTML element,
and this happens very frequently with Bootstrap.
So, we're able to adjust that pretty easily.
And now, we're ready for our final section,
which is the footer.
So, let's find ourselves the footer snippets,
and let's find the one that looks like one that we want
or one that is similar to the one in the example,
which is this one right here.
And let's find the container
that we can copy and put in into our footer section.
So now, straight up, we can see our footer section show up,
and all we need to do is to adapt it to our design.
Firstly, you'll notice there's this area
that you can't really see, but when you hover it,
it seems to be clickable.
And if we refer to our code,
you can see this is actually a link
that links to the Bootstrap logo.
So, let's go ahead and delete that,
but let's change this paragraph class to copyright,
and then the name of our company, TinDog.
And I'm going to leave these links alone
because I don't know,
maybe in the future you'll want to use this website
and put in some different links to different sections,
but for now, it just kind of looks more or less
the right kind of style
that we would want on a startup website.
So, let's leave that alone,
but let's get rid of this border line here.
And this borderer came from the footer,
so, there should be a hint in here.
If we look at the footer element,
you can see there's the border top class,
which again comes from Bootstrap,
but it's a really simple way of adding some borders
to the top left or right,
but once we delete it, then that's completely gone.
So, the final thing we need to do,
is just to add that gradient background to the footer area,
and then we are pretty much done.
So, let's take that section footer
and add the class gradient-background.
And now, hit save.
And we should see that we have almost the same website
as the final result.
The only thing that we need to do now
is to get rid of this little bit of space at the bottom.
And the fact that it's white
should give you a hint as to what it is.
If we select our footer section and we go into the section,
look inside the container,
at some point our hover is going to show us
where that margin comes from.
And right here you can see that orange box
showing that margin at the bottom.
So, if we select it,
we should see there are some margin classes applied.
So, there's a margin top,
which I think we should probably keep
'cause it adds a good amount of spacing
between the different sections,
but the margin bottom we could probably get rid of
so that we don't have that white space down there.
So, let's find this my-5 class in our footer element,
and it's right here,
and let's change it instead of y to just having it on top.
And now, let's hit save and refresh.
And you can see we have now completed our design
for our website.
In less than half an hour,
we've managed to build a incredibly complex
and beautiful website for our TinDog startup.
I hope our clients will be pleased
because we've created this amazing,
incredibly modern looking website for them.
And we should be pleased
'cause it only took us so little time to do
by leveraging the power of the bootstrap components
and using the different helper classes, utilities,
as well as snippets that they provide.
Hopefully, this gives you an insight
into how we can use Bootstrap
to create beautiful, complex websites quickly.
And also, you see the difference between what css Grid,
Flexbox, and Bootstrap are all good for,
they all have different strengths and weaknesses,
and I think Bootstrap is really good
for throwing some components down
and creating something that looks incredibly modern
very, very quickly.
Whereas Flexbox and Grid are great when you want to get into
the nitty-gritty of creating a very, very custom layout
for your website.
So, well done on completing this section.
And in the next section,
we've got the capstone project for css.
So once you're ready, head over to the next section.