Day 35: Getting Responsive

A combination of sheer exhausion and the literal dust of the Sahara kept me from blogging for a couple of days, but I never missed a night of coding because I’m determined to hit 100 consecutive days (and I’m also more than a little obsessed).

I completed the Technical Documentation page tonight, and, as the only user story I had left to fulfil was a media query, I took some time to build it out right, testing it on my phone as I worked. I’m really proud of how it came out in a functional sense (even if I’m still a little mortified at my lack of design skills — one step at a time).

Take a look!

I had to face-palm when, after fretting over how to ensure that my fixed nav-bar didn’t cover the content it linked to when the media query shifted it to the top of the screen (still haven’t quite figured that one out) I realized that the navbar wasn’t required to be fixed in that instance. I still very much want to know what workaround is used to rectify that, so it’s on my list of things to investigate further.

Speaking of workarounds, I had no idea how much web development consists of them. I’d assumed that the challenges I’d been encountering were purely the result of my Code Newbie status, and they are, but not just solely in the sense that I’ve no clue what I’m doing. It turns out that the the Cascade in Cascading Style Sheets can seriously trip you up if you’re a novice and unaware of how different styles and properties can interact with each other.

Which is how I spent one night re-doing navbar in grid (for no good reason that I can recall) only to discover that once I fixed the position of said navbar, everything fell apart. I felt like a bit of a moron until I stumbled across a video revealing that CSS is tricky for everyone (worse yet for little old me). In fact, given the fact that grid (and flexbox) are relatively new additions, I’m pretty lucky to even have them in my toolbox, so to speak.

That said, I’m looking forward to putting everything I’ve learned towards the last challenge of Free Code Camp’s Responsive Web Design course: a personal portfolio page.

Wish me luck!

Leave a comment