Managing learning gaps

How will I remember before I forget? Slipknot might have the answer to this but I had to adjust how I’ve been studying to find mine. After the final lecture of the week, I identified a few gaps in my learning. Firstly, I was struggling to understand the process of merging local branches back into the main remote branch. Secondly, up until now, I have always veered towards Flexbox for my responsive layouts and to my detriment, I’ve neglected to use Grid. Thirdly, web design is something of a struggle for me and I need to do something about it.

Do you remember that song from the second Mission Impossible movie by Metallica called ‘I Disappear’? Well, my code did an impression of that when I made changes to the HTML and CSS files in my portfolio, and then attempted to merge the branch I was working on into the main. I lost all of my changes because I hadn’t fully grasped how to track changes on GitHub. I then had to write my code from scratch again. On this occasion, let’s put it down to a learning experience and in that sense, its value comes in how I overcame this challenge. The next day after the lecture I created a new repo specifically to practise pull requests. I Googled the steps required to complete it, and all seemed fine. No problem with anything. However, the next morning I’m sitting in front of my screen like a deer in headlights because somehow I've completely forgotten how to do what I did yesterday. Guaranteed to put a downer on your day. Here comes the good bit. I found a crash course by Danny Thompson that covered everything I was struggling with, and boom, problem solved. That’s the TL;DR. Here’s the long version including the twist. I didn’t just follow the steps Danny took and replicate them in my own working environment. That doesn't work. I've followed along with tutorials like that before and found myself staring at headlights again. I believe that’s known as tutorial hell. This time I properly studied what I was watching. It’s a 26-minute video but I spent double the amount of time on it at least. I paused it frequently and replayed parts when I needed to. I made notes that made sense to me and I practised from the words I’d written down. I was taking what Danny was saying and interacting with the content in a way that meant I was able to digest important information effectively. After the course was over I was able to apply the skills I’d learned to my new portfolio with confidence that I knew what I was doing, and why I was doing it. I'll be adopting this technique of retaining knowledge in the future without a doubt.

As I mentioned earlier, another area that I needed to improve was my use of Grid. This was more straightforward for me. I followed the steps in my course track and referred to the MDN documentation. I built a basic layout Grid layout that comprised two middle content columns, sandwiched between a header and a footer. I think I was craving doughnuts at the time because all of my grid-area backgrounds had images of pink iced and sprinkled treats. Homer Simpson would have been proud. Also, it should be noted that this precedes what I’ve just said about the technique I’ll be implementing going forward. This bit was earlier in the week. I’ll get to it though. I need to roll back the years for this next part of the story. A friend of mine suggested I learn to code because, at the time, I was unemployed after quitting a retail job that I hated. I never thought coding was for somebody like me. Who is somebody like me? Let’s not get too deep. This isn’t called My Philosophy Diary. I don’t have a computer science degree and I haven’t been playing with circuit boards before I could walk. Hyperbole, yay. Ok back on track. My friend introduced me to the Codecademy Frontend Developer Pathway. It was great for learning programming languages and building projects. Come to think of it, if I knew how to learn properly I would have done what I did with Danny’s tutorial and it might have been more effective for me. Nonetheless, I am where I am and Command Shift is the right place for me. Okay, quickly before I get stuck in tangent hell. During that course, I eventually got introduced to the CSS Flexible Box Layout model and I struggled and I struggled. I could not wrap my head around it. The years go by and I haven’t progressed. I don’t have a portfolio and I’m still struggling with Flexbox. I’m not happy about that. That’s when I decided to commit to #100DaysOfCode a couple of times. I timestamped my goals and what I wanted to achieve. After that, I went on to build and deploy my first portfolio and I conquered Flexbox. All it took was killing zombies with a crossbow. No, seriously. I can’t remember who it was exactly but somebody on Twitter posted a link to Flexbox Zombies, a beautiful game designed to help people master the Flex. As it turns out, I’m more Rob Zombie than Rob Froggy. Flexbox Froggy is another game that had been recommended to me but for some reason, it was taking out the undead that gave me the lightbulb moment and helped it finally click. I guess that explains my attachment to Flexbox but now I can use it with Grid. I’m confident I can build mobile-first responsive design with Flexbox or Grid, and use them together when needed.

That’s the layouts taken care of, and now on to the final thing I’ve struggled with this week. Design. That one-word sentence has caused me creative anxiety because I just couldn't find what I was looking for. Nor could I think up a design on Figma and wireframe it. I think I’m the problem. I’m the type of person to switch between radio stations every five seconds because whatever is playing isn’t doing it for me. I’m not trying to reinvent the wheel, I just want an aesthetically pleasing portfolio. I got there in the end, or at least to the point where I don’t want to change my design. Here’s my approach to design for people, like me, that need a bit of help with logos, fonts, colour combinations and all that fun stuff. My first port of call is to go somewhere that is going to provide me with inspiration. In this case, I went on Dribbble, Webflow, Wix, and Squarespace and searched for mobile-first websites. Next up, I took screenshots of the things I liked and then mashed them up all together in a Frankenstein mixture on a blank canvas. Here’s the final design-related item I had to deal with. Of all the CSS things that I've obsessed over, this is the latest one. I thought it was just me until I started looking at other people's portfolios. I’m referring to the little gap to the left of the h1 element created by the font you’re using when it sits above a paragraph in a hero section. The text can never be fully left aligned because of this and we’re stuck with it. For example, if you look at some of the portfolios here and highlight the heading and paragraph, you’ll see this little tiny annoying gap. I couldn’t figure out how to remove this indent in any other way than adding a minus margin to the left. I reached out to CSS Evangelist, Kevin Powell on Twitter and he said, “it's a typography thing, rather than a CSS thing. It has to do with how the individual character glyph is designed.” He went on to say, “I’ve been dealing with this since I was in print design a decade plus ago.” Elly Loel on Twitter also said, “this spacing is coming from the glyph, aka it's baked into the font.” Comfortable with the knowledge that I couldn’t do anything other than disguise it somehow or select a different font, my web design is complete.

Landing on a design that I felt good about capped off a productive week of coding. That, along with the GitHub branch merging breakthrough I had, felt like tangible progress. I like that I’ve improved the way I learn things and I will be copying that practice with future tasks. Now I’m going to break a literary convention by introducing a new topic in the closing paragraph. The highlight of my week was hosting and arranging study sessions outside of our bootcamp sessions with my cohort. It’s great to be able to ask people for help and overcome challenges together. That was week three.