Week 2 of #100days

This week I continued with the Team Treehouse track and learned about CSS positioning, z-index, and viewport sizing. A lot of these concepts felt familiar since they are similar to design functions. The positioning property gives coders a lot more flexibility in laying out content outside of their normal flow and can help create more dynamic layouts. z-index enables elements to be “stacked” on top of each other. For example, a class with the property z-index:0; would appear underneath one with z-index:10. And viewport height and width control how an item is sized based on the screen dimensions. For example, a box with a display: 25vh; would take up 25% of the screen’s height.

The song for this week was a new finding from my Spotify Discover Weekly playlist. As I listened through the playlist, I realized I was bobbing my head along pretty hard to the song Oh Mandy by The Spinto Band and decided to roll with it. It’s an upbeat indie tune with quirky lyrics that—like last week’s song—sounds and feels summery. I must be ready for warm weather and tank tops!

As I was sketching different directions, I got caught up with the lyrics about a “gnome in the backyard” and started to imagine a visual story of this traveling gnome who begins in the backyard and goes out into the world (kind of like Mandy heading out to the Midwest.)

I had initially imagined using rough black and white sketches for the visuals in order to mimic the band’s artwork, but my drawing skills are lacking, and I couldn’t get the design down, so I created the collage framed pictures instead. This change of direction actually ended up working in my advantage—it allowed me to add another layer of surprise and interactivity between the text and imagery, which became much more interesting than my initial idea.

Click video below to watch site design.

Getting the sticky positioning to work correctly took a lot of trial and error. I finally realized that for some elements to stick while others continued flowing, the containers needed to be nested within each other. I also had issues with double-scroll bars, but after I added this declaration: body { max-height: 100vh; } it fixed the problem.

Overall, I am happy with what I learned and created this week. I was able to pivot when my initial ideas didn’t work out, and I gained a solid understanding of the week’s properties. I look forward to doing this all over again next week! 🙂

If you have any thoughts or questions, I’d love to hear from you! And if you’re doing a coding challenge yourself, I’d love to connect and share support!

Here are a few resources I found especially helpful this week.

https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

Listen to this week’s song!