Profile card using Flex and CSS Positioning

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  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

  @IamAbhiDevPosted over 1 year ago

  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

  @MeghaS4831Posted over 1 year ago

  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

  @IamAbhiDevPosted over 1 year ago

  @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