Bootstrap 4 - Features by page section
Started with a container fluid - most useful when thinking responsively 99% of the time.
Nice element to provide an impact / hero area of the page. Modified this to contain a background image & overlaid it with my own image, social links and a contact button.
Also found a very useful CSS class "vertical-center" which I applied to all elements overlaying the Jumbotron to keep them in place relative to each other.
I used a modal to overlay a form once the user clicked the "Contact" button
This also lives within the Jumbotron tags so that it stays consistently in this space.
In this section and throughout most of the page, I relied on the Bootstrap grid system to provide me with a unifrom way to manage divs and their positioning on the page.
The content in this section is positioned by placing two empty div columns either side of it
A very useful technique I discovered during this CA was the ability to add margin to divs inline where the div class is declared.
And example of this is < div class="mt-5 mb-5 myDivClass">.... < /div> , which will add a margin top and bottom of 5px, without needing a CSS rule.
This section of the page required some thought as there was potentially a lot of information to display and I had to get creative about how to display it, so that the UX principles were adhered to.
There are 3 sections in the accordian which expand and collapse on click or touch on a device.
To reflect each year of study and the modules covered at TUD, I chose a sidebar nav style which has a very nice fade effect on the content displayed in the main area.
This is called a collection of Bootstrap 'pills'. In fact it is a horizontal version of these I have also used, and in which you are viewing this content in right now.
Within this parent, (the Pills element) I also made use of the grid system to display my GPA for each year, and floated this right to fill out the page.
In this section I again relied heavily on the grid system to lay out my work experience history.
I used the Bootstrap img-fluid class wherever possible, but found the company logos problematic when looking through some of the device type emulators in Chrome developer tools. I therefore decided to add a rule whereby once a screensize gets smaller than 768px, these images should not display.
I added a small border-right property here to give a nice line seperator between the divs, with margin on either side of it. This is not perfect with responsive, but it works for most screens.
Similar in nature to how I approached the Education section, but for the sake of variety, I designed this section to make use of a horizontal style nav. again using the Bootstrap pills classes. I have reused this section to neatly display this content on this page.
Wireframes
At the start of this project, I used an online tool called Balsamiq to sketch a quick wireframe of the page. This was useful as it took the guesswork out of things and allowed me to focus on the code and layout instead of making design choices on the fly.
