My coding journey: (to) Do it with style!

Time for more CSS styling | Image: Unsplash

I kicked off week 7 by delving into the part of my apprenticeship which I’d been finding tricky and subsequently putting off…blogging!

I’ve struggled to figure out what parts of the journey to capture, what might be interesting and how my blogpost could be useful to myself/others. Thanks to some great advice from fellow apprentice Sarah and crafter Dan, I began making notes each day of the todo list project. The notes were to remind myself what I’d struggled with, of web links which had been particularly helpful, and why something hadn’t been working. Thanks to this advice I’m slowly settling into developing a voice for my blog. It’s definitely preferable after a full week of learning to open a partially populated page and thread through a narrative, rather than staring at a blank page!

Monday and Tuesday were focused on backtracking through previous projects. Hitting publish on Hangman and Contact Manager was definitely a small personal win! I also had a much more fleshed out overview of todo list week 1.

What I had created by the end of week one of todo list.

On Wednesday I returned to writing code. Having not written any code for four days (including the weekend), my programming muscles felt a little weakened and “hump day” felt like a definite hill.

One of our mentors had given me a specific goal for todo list as I really loved the graphics in his personal project. It was to add more styling to my todo list to make it look and function more like this.

Screenshot of the example todo list

I inspected the page, played around with it, and started to think about how I could achieve a similar layout without the benefit of Elm and Javascript.

Planning out the changes to my todo list web app.

First, I added Google Font ‘Shadows Into Light’ because I liked the handwritten style.

Whilst I managed to get the lists showing as rows, this only works once the filter button has been pressed, so fails when the page is first opened.

I then worked on getting my page to look more like my plan using flexboxes, centring text on my page, and rounding off the submission buttons. I also changed the inputs on the forms to require an entry so that they wouldn’t accept empty data, which made them much harder to edit or delete from postgres later on.

Closer, but still more “todo” … geddit?! ?
Highlights from week seven…

Highlights this week:

  • Actually feeling a little more excited about blogging
  • CSS
  • Zagaku’s given by the team

Things I’ve learned:

  • taking notes makes blogging much easier, as does having a style/structure
  • how to add a new line on a .md file – add a double space at the end of the line!! The messy formatting on my README’s has been bugging me ?

Things I’ve struggled with:

  • CSS
  • Not writing code for four days
  • Feeling a serious bout of Imposter Sydrome – this article really helped!

Things I’m curious about:

  • Elm
  • JavaScript

What I’d like to focus on:

  • Continuing with the styling, including adding some shadows to my form similar to the Elm example
  • Continuing on to one or two more of the stretch goals for todo list
  • Getting my lists to display each todo on a new row
  • Learn more JavaScript