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
- Apply styling to make the page responsive as follows:
- 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.
- Don't change the order of the 3 main cookie html tags, the
- 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
- Use HTML5, CSS, Bootstrap