Build a Progress Bar in HTML & CSS

Plus more Interestings this week with Creating Zeal!

Hey, hey, readers! 

Take a look at what's been Creating Zeal this week!

📹 On YouTube


In this video, Amy Dutton explains how to code a Progress Bar in only HTML and CSS. She covers several nuances: 3 different states (finished, current, and future), a label over the current state, and a double ring around its dot. There are no images, just good, clean, semantic code.

🤔 Zeal Interestings

A collection of cool stuff the Zeal team found interesting this week.

CSS Can Influence Screen Readers

This article is an interesting read into accessibility and how CSS, a language used for presentation, can affect a screen reader. The following example is used:

The HTML mark-up is the same. Both are unordered lists. However, the CSS applied to the example on the right, not only removes the bullets visually, but also prevents a screen reader from saying the word "bullet". Hmm...

Remote Work Wiki


Due to unprecedented times, many find themselves thrown into remote work, with little to no training. The fine folks at Notion have put together a wiki:

👋A central hub for the best resources on remote work - A central hub for the best resources on remote work - from tips to articles to company policies. Designed to bring together the most actionable advice (and keep adding to it).

Perception, Reality, and the iPhone


In 2007, the iPhone completely changed how we think of phones and mobile devices. In 2013, six years later, the release of iOS7 drastically changed the user interface. Since then, updates and modifications have been minimal, but, these adaptations have integrated themselves into our everyday lives forever altering our sensory perception.

This article explores the evolution of the visual language and mental models that we rely on to interact with our devices.

Looking to join a stellar team of coders (or know someone who is)?