Charlie Dunderdale

Things I've done on the computer.

First Portfolio Site: Live Release — June 23, 2017

First Portfolio Site: Live Release

Since the last post I’ve added a lot to my site, but there isn’t much that I can precisely document because the changes have been made over a long period of time and I can’t remember them all. The main thing is that there are more pages, and they’ve now got some content. It’s a decent start I think, with more to come in future.

Although I plan on using this site for a while (because I’ve spent quite a long time on it!) there are some issues concerning best practises which I will address in the future. In this project I tried my best to keep to good coding practises and I think my CSS is for the most part good, non-repeating and well documented. However, I could have definitely improved on the re-usability of my CSS by adding lots of classes together rather than make new classes for each element, and some of the naming conventions aren’t very versatile. Generally my use of classes could have been smarter. I am nitpicking myself however and I’m actually very proud of this site: while it might not look like much, I put a lot of effort into making it the most stable and responsive project so far, with a great number of changes between the desktop and mobile versions to try and improve the user experience. It’s taught me a lot about responsive design, CSS best practises and Javascript DOM manipulation.

Below is what I wrote the day after the last update, but I then left it for ages and now there isn’t much to say except ‘I added more stuff’. You can look at the live site at

After getting the index page mostly working I wanted to do some more work of adding extra pages. What I wanted to do was make an image grid using flexbox or CSS grid, which would be fully responsive and stack while keeping the images and gutters at about the same size. Unfortunately I failed at this, highlighting an area to improve on in the future, so instead I used the same column-width method as the grid for my other page.

While this works perfectly and perhaps looks better than my initial idea, it scales the images which is not something I wanted to do. It is responsive in the sense that there is a breakpoint where the columns become width: 100%; but not the fluid responsiveness I had hoped for using flexbox or CSS grid. However this method works for now and it’s not exactly awful, just not quite what I hoped to achieve.

I also wanted to add descriptions within the images when hovered over, which worked fine except for when I attempted to make these descriptions display below the image rather than over the image when on the mobile version of the site. This turned into a really ugly, confused messed of CSS which I eventually deleted entirely and opted instead to show only the title of the project. Who needs descriptions anyway? In the near-future this is something I will learn properly and iron out, but flexbox is not something I want to dive into just yet. I’d like to move onto formatting sites using the grid layout and move away from the custom method I’ve been using.


Self-initiated Project: Starter Portfolio Site — June 9, 2017

Self-initiated Project: Starter Portfolio Site

Having spent some time looking at web portfolios, in particular for those finishing my course this year, I wanted to finally build something from scratch with aesthetics in mind. I took time to select a combination of typefaces which complement one another, and paid a lot more attention than usual to how my elements are spaced. This is not a final portfolio but rather a placeholder to, again, practise my web building skills. However I will be using it to host most of my work throughout the year, making changes to the site later on.

I used the calc() function CSS offers along with vertical height to make the landing screen take up the full height of the window, accounting for the height of the navigation. I also contained the landing screen within a div with padding all the way around to create the white lines around the image. This was done using a re-usable class, ‘content-box’, which simply creates this padding around the elements:

.content-box { padding: 16px; position:relative; }

This class is applied to all elements which contain content, in order to more uniformly space elements. It is also part of an initiative to use more generalised and re-usable classes, rather than creating new classes for each section / element which has been causing a lot of headaches and messiness in my files.

I also built a very simple grid system, using the box-sizing: border-box; attribute and setting three different possible widths:
.whole { width: 100%; }
.half  { width: 50%; }
.third { width: 33%; }

So my content is contained within a div which has one of these three classes attached to it. Then, that div is contained within a .row class which has the purpose of clearing the float if it’s necessary.

This site is fully responsive using media queries with a break point at 800px. Since I read on W3schools that it’s better to develop for mobile-first, the default values of my grid classes are 100%, and they change to their correct values when the window width is over 800px.

Something I’m glad I managed to get working was the responsive navigation bar. I built one on my Provise demo site, but the issue I kept having can be explained by this gif:

As you can see, pressing the menu button caused the navigation to disappear when resized. This is because while my script toggled the visibility of the nav on the button press, it would not affect the visibility on window resize. While I know there are ways to get this to work in JS I opted for the much easier option of forcing the visibility using a media query:
#menu {
display: block !important;
clear:none !important;
float:right !important;

So far this is my best site to date, and I am proud to have been able to get the JS to work on my own. I also feel my CSS skills have greatly improved and I am able to solve problems much faster than I used to.

My next step here is to build a specific portfolio page and showcase some of the work I’ve done so far there, and fill in the ‘Lorem ipsum’s with my own content. On this page itself, I want to add a scroll button under the intro paragraph on index.html, and I also want to truncate this paragraph on mobile devices as currently the text overflows beneath it’s container.

Demo site here.