Web Design 3: Week # 9

Quiz time!

Please take Quiz # 7 on D2L!

Lynda

So, just like last time, I'll be providing notes for the content in the Lynda.com videos. I know the students for this quarter are online, so I figure videos help more than anything else. Please give me feedback so I know if this is a good/bad/whatever approach (always). Thanks!

Learning Time

• Let's start off with the Jumbotron. The jumbotron is just a way of highlighting and separating a body of text from the rest of the text in the body.
• Jumbotron is actually really easy to implement. Just create a div for your jumbotron container and give it the class of "jumbotron". Then, place whatever text you want within the div.
• To get a centered and properly aligned div, add another div element with a class of "container". Then, place the text within this div instead of the jumbotron div. This should give the text more spacing and an even look.

Media Components - Jumbotron

Learning Time

• Labels are another easy-to-add component in javascript. To add a label, simple create a span element and give it a class of "label". Then, give the label a class of what the color of the label would be. The default color is "label-default".
• Badges are just little pieces of information that generally appear in a grey color next to the element you place them in. To add a badge, you create a span element and give the element a class of "badge". There is a caveat to the grey color, in that it is contextual. That is, the badge may appear in different colors, depending on its container, like a button. However, the default is grey.

Media Components - Labels/Badges

Learning Time

• If you want your images to be arranged like thumbnails, you can use the "thumbnail" class. First, wrap your thumbnail images each in a div and give it a couple of column layouts based on the breakpoints you want. For instance, if you want the thumbnails to take up half the screen on a small breakpoint, give the outermost div a class of "col-xs-6". Next, create a wrapping div around your thumbnail images and give them a class of "thumbnail". You should now have great-looking thumbnail-type images on your site.

Media Components - Thumbnails

Learning Time

• When setting images or other media to position along with text, you want to use the "media" class. The "media" class helps you organize how the different media aligns with the text and helps them position themselves responsively. 
• For instance, if you want your image to be on the left and your text to be on the right, you can wrap the whole thing in a div with a class of "media". Then, wrap the image in a div with a class of "media-left". Wrap the text in a div with a class of "media-body".
• You can also create lists of these media objects by replacing the "media" class with "media-list" and placing the class in a ul element. 

Media Components - Media

Learning Time

• Bootstrap's responsive video settings are actually really great, because, like tables, videos are difficult to adjust responsively. Luckily, Bootstrap makes this easy for us by allowing us to create responsive videos simply by wrapping a video in a div with a class of ""  the classes of "embed-responsive" and "embed-responsive-PROPORTION". The PROPORTION is a placeholder where you're going to replace it with an actual proportion like "4by3". 
• Then, give the video a class of "embed-responsive-item"

Media Components - Video

Learning Time

• List groups are a way of styling lists in a group-type fashion. To create a list-group, simply add a class of "list-group" a div. Then, create a series of anchor tags to represent your li elements and give each one a class of "list-group-item". 
• You can also add badges to the anchor elements by creating a span with an element of "badge" within the anchor tags.
• giving the anchor elements a class of "active" or "disabled" will give them the respective feature
• There are also some other meanings, represented by colors, that you can implement, including "list-group-item-success", "list-group-item-failure", etc

Content Containers - Styling List Groups

Discussion

Don't forget to answer the discussion question for the week!

"Find examples of Jumbotron websites online and post them in the discussion. What are some similarities between the ones you found and the ones from the tutorial? What are some differences?"

Project Update 9

• Once you're done with the reading and the lecture, I'd like you to continue working on your web application.
• This week, your project requirements will be:
• 1) Create a set of thumbnails and text. Style them using the "thumbnail" classes in Bootstrap.
• 2) Add either 3 videos or 3 labels/badges to your project. Style them using their appropriate Bootstrap classes.
• Remember, the assignment for each week will result in a completed project. The next 3 weeks will be based on completing a final project, so see the project guidelines to see what the minimum requirements will be for your projects.