The goal of this project is to practice using Bootstrap to layout and style our pages.
There are eight files in this repository:
- word_count/new.html
- word_count/results.html
- loan_payment/new.html
- loan_payment/results.html
- time_between/new.html
- time_between/results.html
- descriptive_statistics/new.html
- descriptive_statistics/results.html
These are blank HTML documents except that they are already linked to Bootstrap and Font Awesome.
Your job is to make static mockups of the following targets:
- https://omnicalc-target.herokuapp.com/word_count/new
- https://omnicalc-target.herokuapp.com/word_count/results
- https://omnicalc-target.herokuapp.com/loan_payment/new
- https://omnicalc-target.herokuapp.com/loan_payment/results
- https://omnicalc-target.herokuapp.com/time_between/new
- https://omnicalc-target.herokuapp.com/time_between/results
- https://omnicalc-target.herokuapp.com/descriptive_statistics/new
- https://omnicalc-target.herokuapp.com/descriptive_statistics/results
Your mockups won't actually perform the calculations, of course, but try to make them look as close to the targets as possible. Also, don't attempt the datetime picker on time_between/new.html
yet.
If you need to write any custom CSS beyond vanilla Bootstrap, you can do so in custom_styles.css
, which is already linked to all eight documents.
We'll bring our static mockups to life soon.
- Fork and clone this repository.
- Open the entire folder in Sublime.
- In Chrome, open the file you are working on in one tab and your target in another tab.
- Create the basic grid skeleton. Shoelace.io may come in handy.
- Add the list of links to the left side. Since the documents are located in different folders, you need to use relative file paths to make the links work.
- Add a panel to the right side.
- Add content to the panel body; either a form or a description list, depending on which page you are working on.
- Add the navbar to the top.
- Include Font Awesome icons where appropriate.
- Make it Responsive:
- On extra-small and small screens, hide the left nav.
- On medium and large screens, hide the navbar links (since the left nav is visible).
- When a form submit button is clicked, make it so that you end up at the corresponding results page.
- Experiment with different Bootswatches.