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 main

@alvintriseptia

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


Sorry I still dont understand how to make responsive web, do you have recommendations where I should to learn more?

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Alvin

I have checked your HTML structure, a few tips from me:

  • the h1 is an HTML tag that indicates a heading on a website and normally used once on the page => Using more than one h1 will not result in an error, but using only one is seen as a best practice. It makes logical sense => h1 is the most important heading, and tells you what the purpose of the overall page is.
  • I'd recommend reading more about the alt text. You don't need to use words like picture or image, photo, icons in the alt text as it's already announced as being an image. You can easily type the name "Victor";
  • instead of div stats you can use ul > li;
  • the circles are a bit tricky in this challenge: I have used pseudo-elements, position absolute, vw and vh, background url, transform translate and @media (in your solution they are not very stable on different devices;

I can recommend two courses providing by Wes Bos, they are for free:

I think it will help you. Just learn it slowly and carefully and after while you will be able to do RWD.

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

Greetings :D

1

Szymon Rojek 4,540

@SzymonRojek

Posted

@alvintriseptia

Also, I'd recommend to use flexbox or grid generators, games like flexbox froggs etc. => they help a lot to understand what is going on over there.

Happy coding! :D

0

@SaiArunesh

Posted

Please learn about CSS Flexbox and media queries

https://www.youtube.com/watch?v=FTlczfR82mQ&t=907s&ab_channel=DevEd

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

The below link employs all useful css styling to be learnt

https://www.youtube.com/watch?v=ZFQkb26UD1Y&t=4057s

1
prashanth 15

@prashanth345

Posted

w3schools.com

1

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