Skip to main content

Command Palette

Search for a command to run...

14. Starting with effects, animations, and typography (Day 10)

Making words and images pop!

Published
2 min read
14. Starting with effects, animations, and typography (Day 10)
M

I've just started my journey in learning to code and using Hashnode to chronicle my learnings and experience. Besides this, I work full-time and dabble in vlogging, podcasting, drawing, startup ventures, and fitness training.

In today's live lecture, we delved into the captivating world of Effects and Animations, as well as Typography. While this might sound intricate at first, rest assured that with a bit of practice, it can become a skill you can comfortably add to your web design toolkit.

The tutor showed us:

    1. Hover-Activated Resizing: We witnessed a simple yet eye-catching effect - a red box that gracefully expanded in size when the cursor hovered over it. This not only adds a touch of interactivity but also provides an elegant way to engage visitors.

      1. Image Pop-Out with Shadows: Three images lined up side by side came to life as we hovered our cursor over them. They gracefully popped out with a subtle dark shadow, imparting depth and dimension to the page. It's a clever way to draw attention to important visuals.

      2. Auto-elongating Element: Another intriguing animation involved a red box that elongated on its own over time. This effect offers a dynamic feel to your website, making it less static and more engaging.

      3. Typing Effect: The lecture also showcased a cursor diligently typing out a sentence, word by word, mimicking the typing effect often seen on blogs and apps. This subtle animation can bring your text content to life.

One of the most exciting aspects of this lecture was the opportunity to glimpse "behind the scenes" of these effects. Many of us have encountered these animations on websites and applications and wondered, "How did they do that?" Well, now we have the answers.

So, what's next? In the coming days, I'm excited to dive into the world of web design and put into practice what we've learned. I look forward to sharing the results with you.

In conclusion, our exploration of Effects and Animations and Typography today was both insightful and inspiring. Web design is a dynamic field, and mastering these skills will undoubtedly enhance your ability to create visually stunning and interactive websites. Stay tuned for more updates as I put my newfound knowledge to the test in the days ahead.

Learning to Code

Part 1 of 50

In this series, I will share lessons learned from my intense 10-month coding bootcamp, starting Tuesday, 17 October 2023. The course aims to develop me into a full-stack web developer.

More from this blog

Manoj's coding diary

71 posts

I am Manoj Kumar, from Sydney, Australia. I am focusing on sharing my study of coding as a complete beginner here. My other activities: full-time work, blogging, vlogging, drawing & podcasting.