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 using Flex and CSS Positioning

#accessibility
MeghaS4831β€’ 30

@MeghaS4831

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!

This is my second challenge and I'm super excited to explore further :D In this challenge, I have aimed to use semantic elements wherever I felt it was needed. Hope it is correct.

I also wanted to understand if there is a way to change the svg images background using CSS? For instance, I used an svg file as <body> background but I wanted the colors to be different than ones currently in use.

Feel free to share your best practices to enhance the code efficiency! :)

Community feedback

Vanza Setiaβ€’ 27,795

@vanzasetia

Posted

Hi, MeghaS4831! πŸ‘‹

For those circles, I recommend showing them as pseudo-elements. You can see Grace's solution for your reference.

Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution

This is another way to help you position those circles.

If you want to change the colors of those circles, you need to change the value of the fill property in the SVG file. But, I think that can be tricky because the colors are gradient colors.

Some suggestions:

  • Alternative text should be in a readable format: Alternative text for images should not be hyphenated.
  • Decorative images should not have alternative text: Not every image needs alternative text. This will tell the screen reader to skip over the decorative images. As a result, it saves screen reader users time navigating the page. For your information, decorative images are images that do not add any information and serve only aesthetic purposes.
  • No inline styling: Move all the styling to the external stylesheetβ€”style="font-size: 18px; font-weight: 700". Separating the HTML and the CSS can make it easier to maintain the code.
  • Do not use pixel unit for font sizes: Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more β€” Why you should never use px to set font-size in CSS

Avoid id selectors: Do not use id selectors for styling. There are two reasons for not using ID’s to style content:

  • They mess up specificity because they are too high (the most important reason).
  • They are unique identifiers. So, they are not reusable on the same page.
  • Learn more β€” What the ID attribute is REALLY for

I hope this helps. Happy coding! πŸ‘

Marked as helpful

1
Abhinavβ€’ 240

@IamAbhiDev

Posted

Hey there πŸ‘‹. Congratulations on completing the challenge! πŸŽ‰

You did a great job completing this challenge! πŸ˜ƒ Here are a few recommendations that I have to help you level up yourself and improve your code -

GitHub πŸ§‘β€πŸ’»:

  • It seems like you're new to using Git & GitHub as your version control and code hosting πŸ™‹β€β™‚οΈ β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž β€Ž
  • I would recommend you watch this tutorial covering both Git and GitHub - Complete Git and GitHub Tutorial

β€ŽBackground πŸ“Έ: β€Ž β€Ž

  • To position the background the way you desire, you can use the background-position, and the background-repeat property, and then add the fill the color using the background-color property as follows:
body{
background: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
background-repeat: no-repeat, no-repeat;
background-position: right 52vw bottom 35vh, left 48vw top 52vh;
background-color: var(--dark-cyan);
}

Responsive Design 🎨:

  • You can use media queries to make your design responsive and adapt to different screen sizes. Define breakpoints and adjust styles accordingly to ensure a consistent and user-friendly experience across devices. Always go for the mobile-first approach while designing and developing a responsive website.

I hope you find this helpful πŸ˜„ Above all, the solution submitted is good!

Marked as helpful

0

MeghaS4831β€’ 30

@MeghaS4831

Posted

Thanks for your inputs! @IamAbhiDev. The code for background-position and background-color was helpful and it did work as I was expecting it too!

1
Abhinavβ€’ 240

@IamAbhiDev

Posted

@MeghaS4831 Glad that I could help! Here's a piece of advice from my side to help you progress more - Allow yourself to be as bad as you can at the beginning. Be consistent and keep learning from others' code too. First, try to write some code on your own without any tutorial or help, and then after finishing it up. Go and take a look at the code of a senior developer and see what can you do to improve your code and trust me, this helped me a lot to grow up too! And I still follow it to learn more and improve myself. I hope it will work for you too. Best of luck! πŸ˜„

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