Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Alright, so how did you do? Well here's my solution to the challenge, and this is my completed webpage here. You'll see that I've got a left column here with the cute little puppy dog, the information about what they specialize in, and over on the right side here, we have the broad introduction to the veterinary firm here. And then down underneath, we have pictures of the doctors, with their bios directly underneath of those. So, that's what my page looks like, and if you take a look at the HTML, you'll see how this is put together. So, I reordered the source.
I took the aside, that was originally at the top of the page, and I've moved it down towards the bottom. And then I've made use of Bootstrap's push and pull classes to push and pull the content on the page so that when this page gets narrower, like this, we start with the content here about the veterinarians and then we have their bios underneath. And then down here at the bottom we have this extra little bit of information. So that is accomplished here in this first row here around line 14.
Then we don't end the article too quickly though, inside of that we have embedded another row. This is coded with the medium grid and just the medium grid. So these are going across until it reaches a certain break point and then they're going to stack vertically after that. So there's the bios for all the doctors. Using the medium grid system and then finally we end the article at line 36. Then we have the aside here with the information about their various areas of specialty, and we've used the pull class again. To pull that all the way over to the left side of the screen at large dimensions whereas at the smaller mobile dimensions this will be further down on the page.
So, hopefully you managed to make use of the grid system to do something kind of like this or maybe you've come up with your own brilliant solution. So, well done everybody! And in the next chapter, we're going to move on to more styling with CSS.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66050 Viewers
61 Video lessons · 96653 Viewers
56 Video lessons · 110364 Viewers
82 Video lessons · 105130 Viewers
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.