Categories
Code

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.)

Some rough brainstorming sketches for this week’s project. Determining how to incorporate the new lessons with layout, theme and imagery into the design.

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!

2021 Coding Challenge

The only way to get better at something is through practice. Learn more about my goals for coding in 2021 and how I plan to achieve them.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s