Chat App CSS illustration (HTML | CSS | JS Vanilla => animejs lib )

@hashmi7917 Thank you very much for appreciating my work bro.

@Cheosphere will you share some your learning resources from where you have learned it would be very helpful to me, thanks

@hashmi7917 Hello Muqtadeer, first I started taking a short web development course at an institution in my country Chile, there I learned the fundamentals of html, css and a little javascript, then I continued going deeper and learned through some channels on YouTube, and also some very good web sites like W3Schools, CSS-tricks, freeCodeCamp, Mozilla Developer, among others. Another thing that is very important, and that is recommended by the most experienced developers, is to carry out as many projects as you can. There are many sites on the web (like Frontend Mentor) where you can find challenges to develop and put into practice what you have learned, this is very important because in practice is where you learn the most, when you are carrying out a project or exercise and you encounter an obstacle, you will have to investigate to be able to solve it and that is how you learn a lot. I recommend that you practice a lot, that you have a tolerance for frustration, there are days when everything goes well and you feel like a god of web development, and other days when things go wrong and you feel like you are the worst developer in the world, that is normal and it happens to all of us, but you have to tolerate those states of mind, not give up and keep moving forward continuously my brother.

@Cheosphere thanks so much for sharing your experience, i will definitely keep going on practice and carrying good attitude towards web dev :)

@hashmi7917 Hello Muqtadeer, on more specific topics, I recommend that, regarding HTML, you focus on learning what the DOM is, and the different types of tags and their correct use, so that your developments have correct semantics. As for CSS, learn the box model, flexbox, grid and animations. For javascript, understand variables, the differences between var, let and const, understand array or loop traversals, functions and the manipulation of DOM elements to include interactions through javascript.

@chukwudobe-Micah he used a container element for it

@Chiemeka2006 so he gave the container a background colour? Which affected the radial button?

@Chiemeka2006 so he gave the container a background colour? Which affected the radial button?

@chukwudobe-Micah Hello Chukwudobe Micah Chinedu, thank you very much for your comment, I really appreciate that you value my work.

Answering your question, this time I used a graphic design trick and designed the button in svg format 😅, but you can do it only with css, here is an example in codepen:

Codepen Example Button

To make effects with Javascript in a simple way, you can use the animejs library, here is the documentation:

Animejs Library