Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

@RenszCamacho

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi guys, this is my second challenge. I added some extra features and changed the design slightly. I'd like to hear your thoughts, what kinds of problems you find, and how you would approach them.

Cheers.

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

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

@RenszCamacho

Posted

@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

@SzymonRojek

Posted

@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

@SzymonRojek

Posted

@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

@RenszCamacho

Posted

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

Thank you again. 🙇‍♂️

1
Szymon Rojek 4,540

@SzymonRojek

Posted

@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

@RenszCamacho

Posted

@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

@LE-Smith

Posted

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

@RenszCamacho

Posted

@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
P
Grace 27,870

@grace-snow

Posted

Fun

3

P
Grace 27,870

@grace-snow

Posted

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

1

@RenszCamacho

Posted

@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

@RenszCamacho

Posted

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

@KristianDunne

Posted

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
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

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

@janegca

Posted

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

@dpayne713

Posted

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

@RenszCamacho

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord