Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So, now that you know everything about Bootstrap's grid system, it's time for a challenge. So, here's what I would like for you to do. I'm going to give you an unstyled HTML document inside of your exercise files folder, and I would like you to. Make it look like something on the page deploying a grid system, so that the information that's there makes some kind of sense. Make sure that your source is in the right order, we talked a lot about source ordering and making sure that things are in the correct order to work with search engines.
And how you can change that source ordering using some of Bootstrap's classes to make sure that it still displays on the page the way you want. So make sure that the source is in the right order. And I'd like you to try experimenting with things. Like nesting the grids, offsets, or the jumbotron. To make this page look a little bit better. Anything else would be just great. So to show you what this is going to look like, if you open up your file 02_07.html and right click anywhere on the page and choose Open in browser, this is what your webpage is going to look like to start with.
You got a cute little puppy dog here, aww, with a whole bunch of services here. It's talking about what they specialize in. Then we have a bunch of text that talks about their extensive experience, and then we have some pictures of vets with little bios after them. So that is your starting file and you're going to try to make it beautiful. I estimate this is going to take you about ten minutes or so. Give or take a little bit to go ahead and lay this page out and I'll show you my solution in the next video.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.