bootstrap-lab's Introduction

Bootstrap lab

Project 1: Build a responsive cookie store web page

In this exercise, you have been given an index.html file that already contains our content. What we will do in the next steps is add bootstrap for styling and for a responsive layout.

Link the css/styles.css file in the index.html <head> section.
- We will use this to add our own custom styles.
Add Bootstrap
- Use the CDN link tag
Apply the bootstrap grid classes
- The 4 cookie products should appear side by side in one row on large screens
- The 4 cookies should appear one per row on medium and smaller screens
Apply styling to make the page responsive as follows:
- On larger screens:
- On medium and smaller screens:
Using only bootstrap styles, and not moving any html tags, make the cookie products alternate as follows on larger screens:
- Hint: You can wrap your existing HTML in extra <div> tags
- Hint: Look into the reordering classes
- Clarifications
  - Don't change the order of the 3 main cookie html tags, the <h3>, followed by the <p>, and then the <img> tags. Remember, we want to keep semantic order.
  - You can add <div>'s and bootstrap classes as needed, you can wrap any tags in divs as needed, as long as you don't change the order.
Stretch Add a custom google font to our page:
- Select and link a font from: https://fonts.google.com/
- Add the font style to select tags

Project 2: Build a personal (professional) web page for yourself

Build a personal (professional) web page. Follow the following criteria
- Use HTML5, CSS, Bootstrap
  - You can use existing themes (i.e. http://bootswatch.com/)
- For the content:
  - Introduce yourself
  - Post projects you have done
  - Education/Professional Experience, Relevant Skills
  - List any technology or blog links you recommend
  - Include at least one image (project related, you, or related picture)
  - Optional: Post a "blog" entry about a technology you have used, or school topic

Recommend Projects