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 (HTML, CSS Flexbox, Grid, position)

@Slaks97โ€ข 180

@Slaks97

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


I desperately need to understand how to use the position property.

I really struggled with the top and bottom background images.

Also, there is too much whitespace at the bottom of my card. 0 padding and 0 margin so I know this is down to me using the position property on some elements but I can't figure out what needs to be corrected.

I would be so grateful if someone could help me out!

Community feedback

Tushar Biswasโ€ข 4,100

@itush

Posted

Congratulations on completing the challenge! ๐ŸŽ‰

It is important to correctly understand CSS Position property to render HTML elements as per the requirement. Please note:

  • By default, all HTML elements are static (non-positioned elements).

  • By using top, right, bottom, left we can control the final location of an HTML element.

  • Top, right, bottom, left, z-index donโ€™t have any effect on Statically positioned / non-positioned elements.

  • So, basically, we first need to convert a non-positioned element to a positioned element using (relative/fixed/absolute/sticky) then only (top/right/bottom/left/z-index) etc. will work for the targeted element.

You may checkout ๐Ÿ‘‡

12 important CSS topics

CSS Position Property in Hindi

To get rid of the whitespace๐Ÿ‘‡

body { overflow: hidden; }

Hope this helps. Once again you have done a wonderful job.

And I look forward to see cool projects from you in the future๐Ÿš€

Keep at it...๐Ÿ’ป Happy hacking!

Marked as helpful

0

@Slaks97โ€ข 180

@Slaks97

Posted

Thank you so much for your input @itush.

I read the article you wrote on CSS topics and it was a great help. I understand positions so much better now. Still need a lot of practice, but I feel like I have a good enough understanding to move forward, so thanks again! :)

1
Tushar Biswasโ€ข 4,100

@itush

Posted

@Slaks97 You're very welcome ๐Ÿ˜Š I'm thrilled to hear that my CSS article was helpful for you, especially in understanding position property better. ๐ŸŽ‰ It's great that you feel more confident to move forward, and yes, practice and repetition are important to train our eyes and muscle memory ๐Ÿ’ช If you have any more questions or need further assistance, feel free to reach out. Keep up the fantastic work! ๐Ÿ‘ Happy coding! ๐Ÿ’ปโœจ

Marked as helpful

0
@Slaks97โ€ข 180

@Slaks97

Posted

Your words are encouraging and comforting @itush. I've done so many different online courses and tutorials and I feel like I'm nowhere near where I should be despite all that learning. Learning new things is challenging, but learning solo is a daunting task, especially for someone in their forties and no programming or computer background whatsoever. So thank you for your support!

1
Tushar Biswasโ€ข 4,100

@itush

Posted

@Slaks97 Thank you very much for sharing your thoughts!

I completely understand that learning new things can be challenging, especially when someone is starting from scratch๐Ÿš€without a programming or computer background, and not in their 20s any more. This is really tough.

However it's important to remember that everyone's learning journey is unique, and progress takes time. Don't be too hard on yourself for not feeling where you should be yet. โณ

Also, people switch profession all the times for various reasons at different stages of life. Engineers become musicians, salesman etc.

Learning solo can indeed feel daunting, but please know that you're not alone on this path. There are supportive community of learners and professionals out there, like Frontend Mentor that are ready to help and guide you. ๐ŸŒŸ

If you know your goals and objectives clearly when you are starting out, this will save you in many ways. ๐ŸŒŸโœจ It's important to ask yourself why you want to learn front-end development. Here are a few possible answers:

๐Ÿ“š to gain the knowledge and skills.

๐Ÿ’ผ to gain the knowledge, skills and land a real developer job.

๐Ÿš€ to gain the knowledge, skills and build your own project.

Having a clear purpose in mind will guide your learning journey and help you stay motivated and focused. So take a moment to define your goals and let them drive you towards success! ๐Ÿ’ช๐Ÿ’ก

Feel free to reach out whenever you have questions or need assistance. I'll be glad to support you and cheer you on every step of the way. ๐Ÿ’ช Keep going, stay persistent, and you'll be amazed at the progress you'll make. You've got this! ๐Ÿ’ปโœจ

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