Categories
Code

Weeks 3 & 4 of #100days

These past two weeks were super hectic as we wrapped up the last of our time in the U.S. and planned for our return to Shanghai. We first left Shanghai over a year ago for a two-week hiking trip to New Zealand and Australia but ended up returning to the U.S. instead of China due to covid outbreaks that were happening there. What followed were increased cases in the U.S., closed international borders, visa expirations, and canceled flights. When our Jan 26 flight didn’t show signs of cancellation, we knew it was happening for real this time. We prepped for the long journey home and spent quality time at home with family before we had to say goodbye.

Although I still coded regularly during this time, I allowed myself to spend less than usual minutes on this daily and stretch the deadline. I learned about descended selectors for this project and used them in conjunction with reviewing properties from weeks prior. Lastly, I paid more attention to my syntax and applying the DRY (Don’t Repeat Yourself) Method. I realized there’s still a lot I can do to improve how I write code and continue improving on that each week.

This time I chose a song by a band I adore, Belle and Sebastian. They are an unpretentious band who never desired to become as famous as they have, yet they’ve stayed humble and honest to their unique style. Their natural charm and low-key dispositions reminded me a lot of zine culture. Zines—which have a history of being a cheap and convenient method to express and share thoughts—don’t strive for perfection or attention by the masses. These qualities, shared by Belle and Sebastian, inspired me to explore simple ways to apply similar zine-like visuals into my digital design solution.

A moodboard I created exploring the visual style I was considering for this week’s project.

Because zines were produced on photocopy machines, many were made on different colors of copy paper and printed in black and white only to save cost. I also noticed a trend of overlapping text with images and using a variety of font-sizes. I took these observations into creating a site that evoked these design sensibilities but adapted it to give its own unique look.

Given the song’s name, I used the property position: fixed; on the image to mimic the song lyrics and title of wanting the world to stop. As the words keep scrolling, the world indeed stays put.

Click video below to watch site design.

I didn’t do any sketches for this design and instead focused on exploring in code while considering the style I wanted to achieve and the properties I wanted to practice. It was an exciting exercise that took me out of my typical creative process and taught me the creative flexibility designing and coding simultaneously can produce.

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

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