Profile Card Component. Using plain Html, Css and Js.

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Renszo,

  Amazing job. Fun. I like this animation and numbers, really cool effect. I would like to mention just a few details:

  • in the article, you can use the header tag, but it is not very necessary, what do you think?
  • innerText vs textContent; have a look this MDN;
  • transfer .DS_Store to the .gitignore;

  That's it from me. Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  5

  ---

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  @SzymonRojek Yooo! Thank you for take your time and check, I really found very valuable all your advice, you got my upvote on most of them. I learn a lot from them.

  • I was looking at some online newspapers, how they structure their Html articles, and most of them could just have a footer. I think have more than one header could be confusing for people who use a screen reader. I'm not sure tho.

  • I've just done it. Priceless information.

  • You right, even the fronted mentor files say that. I always forget.

  Cheers mate. I do appreciate your feedback.

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @RenszCamacho

  That's kind of you. HTML, hmmm to be honest, it is very tricky for me all the time, sometimes even annoying because lots of things are going on here. I think after a while we will see things naturally, structurally :D

  Have a look at this: => W3C about article tag;

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @RenszCamacho

  I know what you mean, but here we have got a single page - one component (there is h1, p, img ) so IMO it will be ok but it is not a final oracle :D

  1

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  @SzymonRojek Yes, I know, I realize that underestimate Html. I will improve or so I hope.

  Thank you again. 🙇‍♂️

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @RenszCamacho

  Hi again,

  I have read this note about the header and I would like to share with you, of course, it is not about your project above, just generally - using header a few times doesn’t affect the web outline algorithm. It is not sectioning content and therefore does not introduce a new section in the outline.

  Header is a flow content category - this element must not be a descendant of an address, footer or another header element.

  Check it out: => link;

  “HTML Header Element (header) defines a page area that typically contains a logo, title, and navigation. The header can also be used inside other semantic elements such as article or section. A section header might contain the section's heading, author name, etc. article, section, aside, and nav can have their own header. Despite its name, the header is not necessarily positioned at the beginning of a page or section”. => link.

  Let me know what do you think about it :D

  1

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  @SzymonRojek My friend, very enlightening and well summed up on your part. I'm going to have to redo my current challenge and try to improve my HTML. Nothing to say, just thank you.

  Have a good day!

  1
• 

  Stephan Schmidt•85

  @LE-SmithPosted almost 4 years ago

  really great work, also the improvement with the animations. Awesome! Only thing, i can mention as an idea to improve: maybe the fonts can be implemented in css with @font-face.

  4

  ---

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  @LE-Smith Hello, my man. I'm really glad that you take your time and check my code. it means a lot and encourages me to keep coding. I'll take that advice.

  Havo good one. Mate.

  1
• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Fun

  3

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  What would happen when the numbers get really high so there's not enough space on mobile?

  1

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  @grace-snow Hi Grace, thank you for taking your time and check my code. I really appreciated. I thought about the space and how can I fix that. That’s I don’t know yet. I’ll find out tho.

  0
• 

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  I wanted to thank everyone who has given me feedback 🙇‍♂️ , I really, really appreciate it, and those who hit the like button. All of this encourages me to keep coding and improving.💪

  2
• 

  Kristian Dunne•305

  @KristianDunnePosted almost 4 years ago

  Hey Rensz,

  Looks good this and really like what you have done with the animations to add a bit of something extra to it.

  Good work!

  2
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hi there, Renszo Camacho! 👋

  Well done on this challenge! 👍

  As the others said, that loading animation looks very cool! 😎 The background images are placed quite nicely, as well (kudos for that, as they can be quite tricky to place)! 😉

  Keep coding (and happy coding, too)! 😁

  1
• 

  Jane•1,040

  @janegcaPosted almost 4 years ago

  Hi Renszo, very nice animation. Page looks good on the desktop and phone, nice responsiveness in the browser too. Well done.

  1
• 

  David Payne•1,205

  @dpayne713Posted almost 4 years ago

  Nice animation. Cleaver way of implementing the counter too!

  Hard to find anything to improve

  • maybe set a fixed width on the card__social class so that as the number increments it doesn't move the display text below.

  Keep it up!

  David

  1

  ---

  

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  @dpayne713 Hi, David. many thanks for the advice. It's sorted out, now.

  0