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

Community feedback

• 

  Muqtadeer•340

  @hashmi7917Posted about 1 year ago

  very nice bro, got lot of inspiration from you

  1

  ---

  

  Cheosphere•1,040

  @CheospherePosted about 1 year ago

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

  0

  

  Muqtadeer•340

  @hashmi7917Posted about 1 year ago

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

  1

  

  Cheosphere•1,040

  @CheospherePosted about 1 year ago

  @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.

  2

  

  Muqtadeer•340

  @hashmi7917Posted about 1 year ago

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

  1

  

  Cheosphere•1,040

  @CheospherePosted about 1 year ago

  @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.

  1
• 

  Carlos Daniel Morillo•120

  @Buf3rPosted almost 2 years ago

  que buen proyecto!, te di follow exitos bro

  1
• 

  Chukwudobe Micah Chinedu•700

  @chukwudobe-MicahPosted almost 2 years ago

  Really nice work Cheosphere, I love the bounce effect! I wanna ask, how did you give a colour to the inside of the radial button? Tried doing it in mine, couldn't just get it.

  1

  ---

  

  Chiemeka Okongwu•550

  @Chiemeka2006Posted almost 2 years ago

  @chukwudobe-Micah he used a container element for it

  0

  

  Chukwudobe Micah Chinedu•700

  @chukwudobe-MicahPosted almost 2 years ago

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

  0

  

  Chukwudobe Micah Chinedu•700

  @chukwudobe-MicahPosted almost 2 years ago

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

  0

  

  Cheosphere•1,040

  @CheospherePosted almost 2 years ago

  @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

  2