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.cssfile 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.
- 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
- 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