Assignment
Please find my final webpage here
Technology
This webpage was created using React as well as Semantic-UI ( which was only used for the creation of the dropdown menu). I used plain CSS for styling and deployed it with Heroku for review.
By using React I was able to make some of the elements into re-useable components; namely the Bootcamp cards and the Right-hand menu items. I chose React in order to make the code more concise and to ensure that implementing new content will be more efficient in the future (for instance if new Bootcamps are required to be added).
Adjustments
I added minor adjustments to spacing and alignment in certain areas such as giving a little more padding to the navigation bar and extending the width of the Bootcamp cards in order to align with the above Trial-block card ( within the desktop view). I did this to give a little more breathing room around the menu items and to make it easier to read. The alignment of the boxes was just done for a more consistent sense of space and flow around the components.
I added a hover effect to all clickable elements. Within the trial block, all buttons have a box shadow and the Bootcamp cards below have a more prominent shadow. The call-to-action buttons on the Right-hand menu change to orange – as to draw maximum attention.
Further work
If I were to continue working on this project, I would allocate more time to ensuring the page be more consistent and slightly more refined across all mobile devices. While I am happy with the appearance on the main breakpoints and most popular device types ( desktop, tablet and mobile) there is definitely room for improvement on certain breakpoints ( between tablet and desktop and smaller mobile views).