⌨️ Fetching Data from APIs in JavaScript

🌐 Top Websites to practice coding skills

🔰 Color-scheme in CSS

🔰 Container queries in CSS

If you have not tried out container queries yet, would highly recommend that you do 🤩

This is a relatively new CSS feature, which is similar to media queries. While media queries are based on the dimension of the entire page, container queries are specific to individual elements in a page.

👉 Here we define a "container" and conditionally style elements inside the container based on the dimensions of the container

👉 Some other examples include, when you want to style an individual card based on its size

🔰 A simple, CSS-only typing effect

In CSS, the ch unit defines the width of a single character. The reason we are using a monospace font is because they have the same width for any character 😁

We use a simple key frame animation to automate the width of the element from 0 to some max size of the text.

✨ The steps animation timing function is important, because it enables to set the width in a staggered manner (1ch, 2ch, 3ch, etc) and not a continuous smooth way

✨ We also disable text wrapping so that the text is presented in a single line irrespective of the width - which is important for this effect