In this task you will be using a HTML/CSS framework called Bootstrap to create a front end for a gym diary.
Bootstrap provides reusable components such as badges, inputs and cards.
The gym diary application will allow a user to record their progress on various exercises (e.g. squats, benchpress, curls etc) so that they don't have to remember what weights they used last time.
The design process will be iterative (meaning the design will be improved over time) and eventually you will be creating a website that can be installed on a mobile phone as a progressive web app.
Create a new Empty Project type IntelliJ project called gym-diary-ui-poc and create a file called index.html.
In the file, set up a basic template for you to build on.
Open the file in a browser and verify that you can see a Hello World message.
A nav bar is normally situated at the very top of a web page. Bootstrap gives a component for this purpose.
Create a web page with 3 links:
- Home (which links to index.html)
- Exercises (which links to exercises.html)
- Bodybuilding Forum (which links to https://forum.bodybuilding.com/)
Also create the extra html files mentioned in the links above with the starter template and nav bar elements.
Use the exercises.html page, create a table listing various example exercises in one column and example weights in another.
Next, add a form which would allow a user to add a new exercise into the application. You can use any elements you want for this.
Using columns allows you to add various elements on a same row.
Use a column to add the exercise table and form on the same row.
Looking at the various components available in Bootstrap design the rest of the application on paper and try to implement it using HTML/CSS.
Think of how a user may want to use the application and what they might want to see/add when using the application.