Welcome to day 2 of 30 day challenge!
Day1: Avatars and authors
There are plenty of places where avatars can be seen- on chat applications, on dashboards, social media posts among some.
Today let’s make some avatar and on top of it extend it to include avatar owner.
Along with it, let’s also make indicators if the person is online, invisible or offline.
Starting off take a look at this Figma file. An image or name should be passed and it will be displayed within circular borders.
Avatar for now will have 2 sizes – small and large.
If an image is not passed, the first letter of first and last name is to be displayed.
Or you may put a placeholder image instead.
Also make a small indicator to indicate if user state on bottom left.
Building on top of it, let’s give the author name beside the avatar.
Lastly finish off with avatar group where you display 3 and remaining appears as +n.
Additional Challenge
This is not required! If you are feeling motivated to pursue further along this path and want to do more, here are a few things to try out but feel free to ignore them. Additional challenges will have a few things that you can do to improvise your solution and refine it further to sharpen your skills.
It is additional for a reason- it may take considerable additional time and you don’t want to get burned out quickly. These are just fun exercises to explore and experiment with on your free time.
- Have some animation on hover of avatar (zoom in, fade)
- Make a our team
Tasks for today and tomorrow will be very small as I have tests and festival Eid.
The theme of this week will be starting out and web sites. Next week we will make dynamic web apps.
Also here is what I have planned for the week –
| Day1 Intro | Buttons |
| Day2 Avatars | Authors | Team |
| Day3 Testimonials |
| Day4 Cards |
| Day5 Contact Us | Newsletter responsive | About us |
| Day 6 Nav | Footer |
| Day7 Responsive landing page |
Good luck and happy learning
