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

 

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.

My First Responsive Site — June 2, 2017

My First Responsive Site

Some of the homework I’ve been setting myself over summer has involved taking an existing website and completely re-building it in my own code, only looking at the source when I’m really stuck. I find this is a great way for someone who has no experience designing for the web to get practising the basic skills of front-end development; as well as this I think that copying from good examples gives me some insight into the world of screen design before I learn more of the design side in my second year of university.

I’ve finally begun building fully responsive layouts as shown in the page below, copied from a web template site. It’s not an overly complex site, however I was able to learn a lot about media queries which I’ve not used previously. As well as this I made an effort to avoid creating new classes where I could to be more reliant on selectors, something I needed to practise. For the mobile-sized version of the site I also did a lot of reading into and playing around with Javascript’s DOM, clearly something that I will need to know much more about in the future.

For now my sites will not be built using frameworks, as I believe a robust understanding of standalone HTML / CSS will be more useful to me for the time being than frameworks. The very primitive method I used was to contain elements that needed to be responsive in a div, then adjust the widths of those elements according to the screen size. In this case it pretty much means changing everything to 100% when the window is at lower widths. The main responsive elements are the navbar (with it’s heading), the four information box elements (sized at 25%, 50% and 100% for each window width) and the large blue section at the bottom.

I certainly don’t think the code is great but I have a much better grip on media queries as a result which I will carry forward with better practises in future. Currently my goal over summer is to be able to quickly re-create existing websites; I’ve been practising on site templates and I want to move into replicating sites from a .psd file – there seem to be plenty of practise files for this sort of thing online so I’ve decided to spend my summer playing around with CSS. I want to be able to code¬†effectively according to good practises and I want to focus on writing according to the DRY principle. After that, it’s time to get deeper into the DOM and Javascript in general.

Have a look at the site here.