Day 5 of #100daysofcode: Some Formatting Success

I am going to temporarily take Python out of the tags whilst my focus is still on styling and page formatting. I feel a little guilty keeping Python in the tags while my blogs focus entirely on front-end stuff. Short update today, as I am staying busy. Even though it is a short update I am progressing steadily.

Today

I sat down today and really elbowed through getting a basic layout for my app. It is rough, imperfect and ugly, but the layout is roughly what I want. I would consider todays work to be only a little better than playing around in a sandbox. Maybe playing with legos. Here is a look at the current situation my app is in.

While I think the layout is undoubtedly better than it originally was, the overall look of the app is... clashing to say the least.

I modified the background color only to give myself a decent representation of the size of the divs that each element is in. The layout is almost entirely ran by grid at the moment, though both the song display and the artist display are technically in their own flexbox. Admittedly, I had to fiddle around quite a bit to get the position I liked.

Tomorrow

Tomorrow is another busy day, so I am not really sure what I will have time to do. I would like to get around to reading through some more CSS Grid and Flexbox tutorials and perhaps find a video or infographic that helps visualize each property. I really want to get to a point where each change I make in CSS feels more deliberate and less like "what is this going to do?"

What I am Struggling on

Front-end design. At heart, I think I am a back-end developer. Moving numbers around and creating functions which accomplish things feels more my speed. When messing around with all this front-end design, I feel like a fish out of water being forced to play football. In a way, it makes this exercise of learning front-end design much more worth it.

Resources