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

All comments

  • P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    👋Hello again, Great job with this solution and wanting some feedback, This is what this community is about, A few things I noticed...

    • I would put these into a <ul> <li> because they are a list of social links and the text should be wrapped with a <a> like you have already done so it is accessible with a keyboard using the tab key,
    <a href="https://www.github.com/" class="button card_button">GitHub</a>
<a href="https://www.frontendmentor.io/" class="button card_button">Frontend Mentor</a>
<a href="https://www.linkedin.com/" class="button card_button">LinkedIn</a>
<a href="https://www.twitter.com/" class="button card_button">Twitter</a>
<a href="https://www.instagram.com/" class="button card_button">Instagram</a>

Something like this,

 <ul>
      <li><a>GitHub</a></li>
      <li><a>Frontend Mentor</a></li>
      <li><a>LinkedIn</a></li>
      <li><a>Twitter</a></li>
      <li><a>Instagram</a></li>
    </ul>
    • Tho not a problem you could set the width and height for an <img> helps the page load faster and prevents content from jumping around as the image loads. This is good for performance and improves user experience. However, if your image needs to keep a consistent shape (aspect ratio) across different screen sizes, it's better to use the CSS aspect-ratio property instead.
    <img src="assets/images/avatar-jessica.jpeg" alt="Jessica's profile image" class="card_image">

    • For padding and margin,

    • rem Is best for consistency and scalability,

    • % Best for responsive layouts,

    • px Best for fixed, precise spacing,

    • Best practice is rem for accessible layouts, In my opinion.

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

    • Add this code snippet to your body to center the vertically,

      min-height: 100svh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
    • min-height: 100svh;: Sets the minimum height to 100% of the small viewport height.
    • display: flex;: Enables flexbox for flexible layout.
    • justify-content: center;: Centers content vertically.
    • flex-direction: column;: Stacks items vertically.
    • align-items: center;: Centers content horizontally.

    I hope you found a lot of this information helpful, I know it is a lot and it is not to say you have done anything wrong because you have not, In fact you have done very well and make so much progress already. Keep building on your knowledge, and remember, every step forward is progress. You’re on the right track, and you’re doing great. Have an awesome day and happy coding! 😊

    0
  • Nico Velasco• 10

    @Darionvr

    Submitted

    What are you most proud of, and what would you do differently next time?

    I was able accurately calculate the total space between each element and make the text fit just like in the original mockup

    What challenges did you encounter, and how did you overcome them?

    To align the card in the center because it was the only element inside the body. Then I realized the body had to be set at a minimun height of 100vh

    Centered QR code using Flex

    3

    P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

    • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.

    • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

    I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    Marked as helpful

    0
  • P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    • I would put these into a <ul> <li>, To give it more semantic meaning because it is a list of social links,
     <ul>
      <li><a>GitHub</a></li>
      <li><a>Frontend Mentor</a></li>
      <li><a>LinkedIn</a></li>
      <li><a>Twitter</a></li>
      <li><a>Instagram</a></li>
    </ul>

            <a href="https://github.com/Egnodia" target="_blank">Github</a>
        <a href="https://www.frontendmentor.io/profile/Egnodia" target="_blank">Frontend Mentor</a>
        <a href="https://www.linkedin.com/in/devantetoussaint/" target="_blank">LinkedIn</a>
        <a href="https://codepen.io/Egnodia" target="_blank">Code Pen</a>
        <a href="https://www.freecodecamp.org/Egnodia" target="_blank">FreeCodeCamp</a>

    • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

    • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.

    I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    0
  • P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

    • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

    • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.

    • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

    I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    0
  • P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.

    I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    Marked as helpful

    0
  • P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • I would put these into a <ul> <li>, Like this because it is a list of social links and give more semantic meaning.

    <ul>
      <li><a>GitHub</a></li>
      <li><a>Frontend Mentor</a></li>
      <li><a>LinkedIn</a></li>
      <li><a>Twitter</a></li>
      <li><a>Instagram</a></li>
    </ul>


        <a href="#" class="card-link">GitHub</a>
    <a href="#" class="card-link">Frontend Mentor</a>
    <a href="#" class="card-link">LinkedIn</a>
    <a href="#" class="card-link">Twitter</a>
    <a href="#" class="card-link">Instagram</a>

    • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

    • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

    • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

    • Using position: absolute is not always best practice because it removes elements from the normal document flow, making layouts harder to manage and potentially causing overlap or misalignment on different screen sizes. Instead, use flexible layout techniques like CSS Grid or Flexbox for more responsive and maintainable designs.

    I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    0
  • P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

    • I see you still using px mixed with rem as a developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.

    I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    0
  • Karl Chiong• 10

    @Karl-Zy

    Submitted

    What are you most proud of, and what would you do differently next time?

    As a beginner in programming i am proud of what I've made now, i would be better at coding.

    What challenges did you encounter, and how did you overcome them?

    I'm really having problem writing a clean code and what type tags to use, I overcome them by searching the web and a help from a friend of mine.

    What specific areas of your project would you like help with?

    Proper using of tags and where i can improve as a beginner

    qr-code

    2

    P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    • Avoid using id selectors for styling in CSS because they are too specific and hard to override, making your styles less flexible and maintainable. Instead, use class selectors (.), which are reusable and more manageable, allowing for better control over your styles and easier updates.

    • Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

    • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

    • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.

    I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    0
  • WhyEmBee• 50

    @WhyEmBee

    Submitted

    What are you most proud of, and what would you do differently next time?

    proud that it didnt take much time

    What challenges did you encounter, and how did you overcome them?

    i'm disappointed that i had to google many things, but at least i did it lol, i have a problem with the size its too big and i couldn't modify that

    What specific areas of your project would you like help with?

    the size please

    social links

    1

    P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

    • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.

    I hope you found this advice helpful! Keep up the great work, and don’t forget to dive deeper into the details. You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    0
  • Eugene Choi• 10

    @emchoi7

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm happy that I actually got the project started and finished it - I was letting it sit in the backburner for too long.

    What challenges did you encounter, and how did you overcome them?

    I found gaps in knowledge of CSS, specifically flexbox and positioning elements. I did have to take a peek at others' solutions to get a push in the right direction after making a small mess of container divs.

    What specific areas of your project would you like help with?

    I'd like feedback on if there is something I can do to make the CSS more organized and whether I'm following best practice - I know it's a smaller project, but better to start implementing it now than have to backtrack on bigger ones!

    QR Code Component Using Flexbox

    2

    P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    Hey, fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

    • Setting font-size: 62.5% can affect accessibility by reducing the default browser font size, potentially making text harder to read for users with visual impairments. This does make it easier to work out the relative units but at what cost?

    • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

    • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.

    Keep building on your knowledge, and remember, every step forward is progress. You’re on the right track, and you’re doing great. Have an awesome day and happy coding! 😊

    0
  • Carlos Torres• 10

    @devsiders

    Submitted

    What are you most proud of, and what would you do differently next time?

    Manage the font-size measurements a little better and manage them by rem.

    What challenges did you encounter, and how did you overcome them?

    The measurements of the container, but it could be better with a height or rem.

    What specific areas of your project would you like help with?

    In container measurements.

    Distribute and align elements inside a container in a flexible.

    3

    P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

    • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.

    You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

    0
  • P
    Steven Stroud• 4,040

    @Stroudy

    Posted

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.

    • I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

    • Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like 1.5 for flexibility. Avoid using fixed units like px or %, as they don't adapt well to changes in font size or layout.

    • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

    You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

    Marked as helpful

    1