The Capstone Project of the Coursera specialization Web Design for Everybody gives students three options: code your site completely from scratch, use a framework like Bootstrap3, or modify an existing template (a common practice in web development). I chose the last option. On this page I describe what I did to tailor the template to my needs and wishes.
Taking an existing template may seem like choosing the easy way out, but to modify it you still have to gain an understanding of a lot of its code. I selected the template 'creative' by Bootstrapious because I liked its clean and simple look, putting the emphasis on portfolio items placed on the home page. See the screenshot below.
The grading rubric for the course listed four areas in which you could collect points. Below I will discuss each of those areas.
I checked the css of this site at www.css-validator.org and am pleased to report that there were no errors. Fortunately the template that I used as a basis was already errors-free; but at least I did not add any.
The original template was already responsive. The number of columns in the photo gallery depends on the device size. In addition the menu is placed in an off-canvas left sidebar, which disappears but can be opened again with a button on xs-devices (it then takes up half the screen, see screen shot). I was not fully satisfied with this xs-design:
So I made sure that the site description becomes visible above the photo gallery/pages on xs-devices, yet stays on the off-canvas left sidebar on devices bigger than xs.
I also made various changes in the CSS to improve the design on xs-devices, such as making the font-size for the headings relative / small rather than hard-coded / big.
I made a number of small changes to the site's initial design (see picture above):
More substantial was adding a background color to the photo gallery and the pages (but not to the text on the pages). Once that was done, it became visible that the left and right padding of the photo gallery was quite small. So I increased it to be the same as the padding on top of it (40px on each side). For xs-devices however this was too much padding – I solved that with an @media query.
The design change that is most important for the 'look' of the site, and that I am most proud of, is styling the menu items. I gave them the same background color as their respective page and make them look like 'labels' attached to the page. This required various small CSS changes, such as aligning the text on the right side and adding a border radius to the corners. The effect is, I think, really nice.