How to turn Cyborg: Week 3

My adventures through Dev Academy’s web development programme

Dev Academy’s Marketing Manager Maddy King has taken it upon herself to brave the Dev Academy web development programme, and share her #nofilter thoughts on the journey. Check out Week 1 here.

On Tuesday of this week I suffered sunstroke which addled my brain for the rest of the week. During long days of lying in the dark with a headache, drinking lots of water and getting through my workload, there was feeling that I should be coding and that I didn’t want to get behind. I thought I might just have to leave it for the week and double down next week but I woke up feeling okay on Sunday morning and tried to get it all done then instead.

This meant I cut a few corners — instead of deleting all my own code and starting afresh with the new framework, like we were supposed to, I kept all my code and then had to manually remove all the pieces of my code that clashed with the new framework — which probably, in the end, took longer! It was fun figuring it all out though.

learn to code web development
Me taking risks since way back (ft. super trendy Mum)

This week we used a toolkit called Skeleton to design our layouts using a grid. Skeleton is just a predesigned set of CSS (style rules) that gives you a well designed, well styled, good looking grid that’s easy to use. When you’re integrating it into your webpage you can’t actually see the grid, it just lets you place elements in different areas of your page. A huge benefit is that things that sit beside each other (i.e. two pictures) will stack on top of each other when the screen is shrunk right down. So we talked a bit about mobile responsiveness and why it’s so important for design these days. Over half of all internet use is now conducted on mobile so Google penalises any websites that aren’t mobile compatible. Basically your website needs to look good on a mobile first, and be designed with that in mind. Desktop comes second.

Unfortunately I’m very stubborn, and I had problems fitting in with what Skeleton wanted me to do. The way we integrated it was that we got our HTML files to refer to the Skeleton CSS first, and then a normalising CSS, and then our own CSS. We couldn’t edit the Skeleton CSS, but the stylesheet that comes last in the list is the dominant one, so I could override Skeleton’s CSS in my own CSS.

This was lucky, because Skeleton’s CSS had a huge amount of padding and margins on each cell in the grid to make it look pretty. But when I was trying to get 4 portrait-oriented pictures to sit side by side on a page, this looked silly, because Skeleton automatically shrunk the pictures way down in order to accommodate the huge margins. You see the Skeleton framework is made to be mobile-first, so images are supposed to expand and shrink depending on the amount of room around them. But I didn’t know any of this, and I just couldn’t figure out why my pictures were so small. I tried all sorts of manual overrides to set the size of the pictures within the Skeleton framework, but nothing worked.

In the Udacity tutorials last week they’d always looked at a live site and used the right-click ‘Inspect’ function (‘Developer tools’, depending on your browser) to look at the code and experiment with what the page would look like if they changed certain things. So I pushed my website live and Inspected the pictures. I saw these massive margins, and could experiment with seeing what the site would look like if I changed the size of the margins or removed them altogether. I was surprised to find the margins were set in the container class of the CSS — that is, they were built into the overall outline of the grid, not each row or column itself. This is why it took me a while to find. Once I figured that out I had an ‘A-ha!’ moment, created my own container class and overrode all the margins in my own CSS, and my images got bigger and looked great.

So it was a good problem solving week and I got to stretch my limbs a bit with doing my own thing instead of following instructions, which suits me (even if the results are catastrophic haha).

This week’s website. Isn’t it great how it looks better every week:

web development programming auckland wellington

And for MOBILE (so proud):

learn to code new zealand

Phase 0

Week: 3

Sprint: 3

Time logged: 5 hours

If you’d like to change gear in the new year, join Dev Academy and gain the skills to design a creative, flexible, well-paid lifestyle you love. Apply today and you could be graduating by May 2018.