Intro to Bootstrap

For this project you will engage with a powerful CSS framework called Bootstrap. Bootstrap is known for its ease of use and flexibility. It has become one of the most common CSS frameworks in use on modern websites, and it shows up everwhere.

There are currently two active versions of Bootstrap: Bootstrap 3, which uses float to create responsive layouts, and Bootstrap 4, which uses flexbox to create responsive layout. You'll be using Bootstrap 4 in this assignment. In addition to using Bootstrap classes to provide responsive layout, you'll use flexbox to create a footer with left and right aligned paragraphs.

For additional information about Bootstrap please reference the Official Bootstrap Documentation Site.

In this project you will be asked to assemble a linked website for an imaginary business. You will be required to fill in certain aspects of the code, provide some images and/or media files, and make certain elements responsive to different viewport sizes.

You have been given a set of starter files that show layouts for different kinds of page content. Your job will be to look through these files, noting which pages you wish to include in your site (you must include at least 4 pages, counting your index.html page).

You will decide what you will name these pages, what images you will put on the pages, and how you will organize your site. It will be your responsibility to create a sensible IA for your site. (Please note: You do not have to write content for the website. It's OK to use the Lorem Ipsum text that is provided.)

In order to accomplish all of the goals of the project, you must complete two parts. First, you'll design and plan the project. Then, you'll build out your pages and implement your design and information architecture in a mobile-friendly website.

Part One: Design Phase

During the design phase you will plan your project and gather all of the materials you will use to build your site in the next phase. For reference, you can view the full, working template that you have been given on the author's website: View preview of Modern Business theme.

Please note: You have all of the files for this theme in your current repository, but they have been altered so that you must make them work properly.

Basic Requirements

To successfully complete this phase of the project, you must fulfill the following requirements.

• Create a design document (PDF) in the design-docs directory describing your site. You will need to convey the following information:

  • Name of site/company
  • Description of your design concept/approach
  • What you hope to accomplish with your design concept/approach
  • Other sites you looked at for inspiration (include links)
  • Other sites for comparable businesses that justify your concept/approach (include links)

• Create an Information Architecture diagram (PDF) that shows the organization, hierarchy, and relation between all pages on your site. Place your IA Diagram in the design-docs directory.

  • Use any application you prefer to create your IA Diagram
  • Be sure to include every page in your site and indicate every link in your site
  • Provide additional explanation as needed

• Gather all images you will use on the site: all background images, carousel images,faux employee or staff images, and any other images you will use on the site.

  • Determine the size at which you will need these images (keep in mind that you may use multiple sizes in order to support multiple devices)
  • Size and compress the images appropriately using any image software you choose
  • Place all images in the images directory in this repository

  For full credit on the design documentation, you must provide four documents which may include the required documents (design document and IA diagram), as well as formal requirements list, wireframes, design comps, timeline, user stories, or task list.

Stretch Goals

• Create comps of the pages using your favorite image editing software so you can show what pages will look like after your design tweaks have been made.
• Create a more full design proposal that includes other elements such as audience personas, a more thorough competitive scan, or other elements bound into an appealing presentation (PDF or slideshow).
• Plan a site with more than four pages.

Part Two: Production Phase

Basic Requirements

To successfully complete this project, you must fulfill the following requirements.

• In the index.html file, find the TODO comment indicating where you should add your viewport meta tag. Add the proper viewport meta tag to make the homepage render properly on mobile browsers.
• In the index.html file, find the TODO comment indicating where you should add your image URLs to the HTML markup that creates the Carousel. Include at least 3 photos in the Carousel.
• In the index.html file, find the "Portfolio Heading" section and apply the proper classes to make that section use the proper grid layout (as seen here). Include at least six photos in the portfolio.
• Add navigation menus to all of the pages you have chosen to use in your site. Consult the Bootstrap Documentation for Nav Bars for additional help creating your navigation menus.
  • You must have at least four links (counting the "Home" link) in your nav menu
  • You may have more links in your navigation menu if you choose
• In the index.html file, find the TODO comment indicating where you should modify the footer contents to include left and right aligned footer containers that hold the copyright, date and your name. Use flexbox CSS styles to implement the left/right horizontal positioning.
• Update 404.html to reflect the actual IA of your site.
• Add the images you have chosen for your site to each page as needed (be sure to use the img-responsive class on all images that should respond to screen resizing).
• Use at least two advanced CSS selectors that utilize one or more of the following: attribute selector, pseudoclass, conditional selector.
• Use pseudoclasses, transitions, and animations to create at least two custom instances of interactive styling.

Stretch Goals

If you have completed all of the Basic Requirements, then you may push yourself by attempting some of these stretch goals.

• Add a completely new section to one of the pages (be sure to indicate what you've done in your assignment submission comments).
  • The new section should be responsive and should recognize at least mobile and desktop viewport sizes
  • The new section should fit into the theme style
• Modify the styles more significantly to create an even more unique visual style.

Acknowledgements

This repository uses the Modern Business theme from http://startbootstrap.com.

The Modern Business theme from Start Bootstrap was created by and is maintained by David Miller, Owner of Blackrock Digital.

https://twitter.com/davidmillerskt

https://github.com/davidtmiller

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

Start Bootstrap and Modern Business are Copyright 2013-2016 Blackrock Digital LLC. Used with permission under MIT License.