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 charliedunderdale.com.

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.

 

Advertisements