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 an 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're 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 at 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 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 codepen 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 toolbelt.
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 text, 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,
and 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 home page, 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 src 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're 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 200px.
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 btn-light and we've got a btn-outline-light so that it would look the same as the
final design.
Now, right now, this button is a btn- primary, so we're going to have to change that to light.
And this one, instead of btn-outline-secondary,
we're going to change that to btn-outline-light.
Let's hit Save and see what we have.
Now you'll notice that this button is 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're 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 this 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 Checkmark 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 when 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
5.
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 5, 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 a h1.
Let's turn it into a subheading by changing that to a 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-img 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 100px 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-img" and let's set it to have a height of 100px,
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-img 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 5 between these two sections and a margin of 2 between these two sections.
So I'm just going to add some margin top to the image.
So a size 5 margin to the image so I can hit space on the class and then do mt-5,
and then for the text, I'm going to do a class of mt-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-lg (large)
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 TMW.
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 btn-dark, btn-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.
So 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 for 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 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 border 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 and 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 because 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 an 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 because 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.