Skip to content
OverviewSolutions
9
Comments
1071
P
Steven Stroud
@Stroudy

All comments

  • P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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 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

    * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Outfit', sans-serif;
}
    • 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.
    @media screen and (max-height: 700px)
    • For future project, You could download 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

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

    Marked as helpful
  • AmogTsie•50
    @AmogTsie
    What are you most proud of, and what would you do differently next time?

    I am proud that I did this one siting, However I do believe that I could have finished this quicker. I also wish to have completed the project the way it was wanted

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

    I didn't make it active the way that it was required and I still couldn't

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

    Could someone please help me in making my project active the way it was required, as well as a different way to make it responsive

    Profile Links

    2
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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.

    • Your heading elements <h1><h5>, Heading elements should be in sequentially-descending order (e.g., <h1>, <h2>, <h3>) to create a clear content structure, improving accessibility and SEO. Skipping levels or using them out of order can confuse screen readers, affect search engine rankings, and make your content harder to understand.

          <h1>Jessica Randall</h1>
      <h5>London, United Kingdom</h5>
    • I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.
        <section class="links">
      <ul><a href="">GitHub</a></ul>
      <ul><a href="">Frontend Mentor</a></ul>
      <ul><a href="">LinkedIn</a></ul>
      <ul><a href="">Twitter</a></ul>
      <ul><a href="">Instagram</a></ul>
    </section>
    • 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
    *{
    padding: 0;
    margin: 0;
    font-family: "Inter", sans-serif;
}

    • 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,

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    • 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.

    @media only screen and (max-width:770px)

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  • Akshay Ajeesh•80
    @ajeeshakshay
    What are you most proud of, and what would you do differently next time?

    I am happy that this time I tried to completely code on my own without taking my peer's help. My speed in coding and understanding mistakes got better. I want to focust on increasing speed and including better responsiveness in my future projects

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

    Responsiveness of the webpage. I was not successful in making the page responsive as desired

    Responsiveness using Pseudo class

    2
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.
        <div class="social-media-container">GitHub</div>
    <div class="social-media-container">Frontend Mentor</div>
    <div class="social-media-container">LinkedIn</div>
    <div class="social-media-container">Twitter</div>
    <div class="social-media-container">Instagram</div>

    • 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 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

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", serif;
    font-size: 15px;
}

    • 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,

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  • Rido Septiawan•100
    @riddsep
    What are you most proud of, and what would you do differently next time?

    quite similar to the design provided

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

    The biggest challenge was that the figma design didn't exist so I worked on it based on the existing design photos

    Social links profie

    2
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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,

              <img
            src="assets/images/avatar-jessica.jpeg"
            alt=""
            class="card-image"
          />
    • I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.
            <div class="card-body">
          <button>GitHub</button>
          <button>Frontend Mentor</button>
          <button>LinkedIn</button>
          <button>Twitter</button>
          <button>Instagram</button>
        </div>

    • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

    • 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,

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  • Andre•50
    @dreemanuel
    What are you most proud of, and what would you do differently next time?

    I'm happy that I organized my CSS pretty neatly this time around. I'm also getting the hang of "thinking in CSS", as in, how to write CSS in a way that will not make me get lost in my own code further down the road. I'm on the look out for elements that can be reused later, as well as unique ones. I'm also thinking about class names that can be strategically reused.

    Basically, I took this task and turned it into an exercise for organization.

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

    Somewhere around the midpoint of the task, when there were enough elements to get cluttered, it became hard to keep track of individual elements' margins and paddings.

    I had an idea to give each element's backgrounds a unique color, but it nearly gave me epilepsy looking at it.

    In the end, I just gave subtle dotted borders for every element and that was sufficient to help keep track of every adjustment I made.

    Recipe Page Using Vanilla CSS

    #pure-css
    1
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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.

    • Your heading elements <h1><h3><h2>, Heading elements should be in sequentially-descending order (e.g., <h1>, <h2>, <h3>) to create a clear content structure, improving accessibility and SEO. Skipping levels or using them out of order can confuse screen readers, affect search engine rankings, and make your content harder to understand.

            <h1 class="main-heading title">
        <h3>Preparation time</h3>

    • For future project, You could download 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

    • 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

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    p {
    font-family: outfit;
    font-size: 16px;
    line-height: 150%;

    • 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.

    • 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,

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  • P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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,
    <img src="./assets/images/avatar-jessica.jpeg" alt="">
    • I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.
        <button-group class="btn-grp">
      <button class="btn">GitHub</button>
      <button class="btn">Frontend Mentor</button>
      <button class="btn">LinkedIn</button>
      <button class="btn">Twitter</button>
      <button class="btn">Instagram</button>
    </button-group>

    • For future project, You could download 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

    • 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

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.
    body {
    background-color: var(--Grey-900);
    font-family: Inter, sans-serif;
    line-height: 1.5;
    font-size: 14px;
}

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  • Aminur Muda•20
    @aminurmuda
    What are you most proud of, and what would you do differently next time?

    I can do it without much googling, it is just simple solution which i often use in my work as frontend developer

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

    the syntax of import href and get color code from figma i ask chat gpt for the syntax and i try to explore by myself in figma

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

    is there any simpler solution of css compared to my submission?

    QR Code Component using simple HTML and CSS

    2
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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 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

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    • For future project, You could download 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

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

    Marked as helpful
  • Ineke•130
    @Ineke84
    What are you most proud of, and what would you do differently next time?

    I'm quite proud of how quickly I could make this solution. It was manly practicing what I already learned.

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

    Most challenging was including the font. Since there where different options to include it. I did include it through a link.

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

    I don't have any specific questions, but any suggestions to improving my solution are very welcome.

    Social links profile

    1
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.
    			<div class="accounts-list inter-semibold">
				<a href="clickpage.html?link=github">GitHub</a>
				<a href="clickpage.html?link=frontend-mentor">Frontend Mentor</a>
				<a href="clickpage.html?link=linkedin">LinkedIn</a>
				<a href="clickpage.html?link=twitter">Twitter</a>
				<a href="clickpage.html?link=instagram">Instagram</a>
			</div>
    • These <div> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.
    			<div class="location inter-semibold">London, United Kingdom</div>
			<div class="description">"Front-end developer and avid reader."</div>

    • 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

    • For future project, You could download 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

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  • P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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 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

    *{
    margin: 0px;
}
    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  • P
    wecax•160
    @wecax
    What are you most proud of, and what would you do differently next time?

    Making progress in terms of understanding HTML and CSS. Would like to make rebuild the page in REACT soon

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

    I tried to build the page using Tailwind but couldn't figure out how to change the background image in different breakpoints without using JavaScript. I ended up creating the page in vanilla CSS.

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

    I would like to challenge myself on different layouts such as CSS Grid

    Product Preview Card Component solution

    3
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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,

    <img class="product-image" src="./images/image-product-mobile.jpg" alt="">
    • Overusing <div> tags, known as "divitis," leads to cluttered code, poor semantics, and reduced performance. Instead, use appropriate semantic elements (like <header>, <section>, etc.) to improve readability, accessibility, and SEO. Keep HTML clean and minimal to ensure maintainability, scalability, and better CSS structure.
          <div class="product-type"><h3>Perfume</h3></div>
      <div class="product-title"><h1>Gabrielle Essence Eau De Parfum</h1></div>
      <div class="product-description"><p>A floral, solar and voluptuous interpretation composed by Olivier Polge, 
        Perfumer-Creator for the House of CHANEL.</p></div>
    • 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
    *{
    margin: 0;
    box-sizing: border-box;
}

    • For future project, You could download 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

    • 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.

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  • Bintou karah•80
    @KarahDotjs
    What are you most proud of, and what would you do differently next time?

    I didn't take take to do this project just I to refactoring this

    social-links-profiles

    2
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.

        <div class="profil-infos">
      <button>GitHub</button>
      <button>Frontend mentor</button>
      <button>Linkedin</button>
      <button>Twitter</button>
      <button>Instagram</button>
    </div>
    • 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,
    <img src="./assets/images/avatar-jessica.jpeg" alt="">

    • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

    • 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

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    • 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,

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

    Marked as helpful
  • P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • These <div> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.
            <div class="card-header">
          <div class="yellow-btn">
            <span>Learning</span>
          </div>

    • Overusing <div> tags, known as "divitis," leads to cluttered code, poor semantics, and reduced performance. Instead, use appropriate semantic elements (like <header>, <section>, etc.) to improve readability, accessibility, and SEO. Keep HTML clean and minimal to ensure maintainability, scalability, and better CSS structure.

    • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

    • 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

    • 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.

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  • Bhavana Prabhu•80
    @prabhubhavanag
    What are you most proud of, and what would you do differently next time?

    Learnt new concepts like variable fonts, struggled a bit with grids and alignment, but was a good exercise for a beginner like me.

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

    Have I used the fonts correctly?

    Blog Preview Card Desktop version

    2
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • These <div> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.
              <div class="category">Learning</div>
          <div class="publishDate">Published 21 Dec 2023</div>
          <div class="title">HTML & CSS foundations</div>

    • 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

    • 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.

    • 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,

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

    Marked as helpful
  • P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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 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

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  • ErwiniaDev•100
    @ErwiniaDev
    What are you most proud of, and what would you do differently next time?

    I'm not particularly proud of my work on this project, but the result is quite close I think.

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

    I tried several times to get the paddings for the text that it was be the same as the design. I had to go over it again and again, even though I could see which ones to work on.

    What specific areas of your project would you like help with?
    1. Is the CSS properly organized?
    2. And have I correctly broken down my HTML code (div, class, ...)?
    3. Thank you!

    QR code component challenge - HTML/CSS & Flexbox

    3
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    • For future project, You could download 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

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

    Marked as helpful
  • P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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.

    • Overusing <div> tags, known as "divitis," leads to cluttered code, poor semantics, and reduced performance. Instead, use appropriate semantic elements (like <header>, <section>, etc.) to improve readability, accessibility, and SEO. Keep HTML clean and minimal to ensure maintainability, scalability, and better CSS structure.

    • I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.

        <div class="btn">GitHub</div>
    <div class="btn">Frontend Mentor</div>
    <div class="btn">LinkedIn</div>
    <div class="btn">Twitter</div>
    <div class="btn">Instagram</div>

    • 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

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    • 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.

    @media (max-width:376px)

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  • Joshua Okidi•10
    @Joshua-Okidi
    What are you most proud of, and what would you do differently next time?

    I am proud of how I was able to keep the QR code and it's content in the middle of the webpage. This CSS code:

        position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);```

I hope to make use of bootstrap and design the webpage to be more interactive next time.

### What challenges did you encounter, and how did you overcome them?
I encountered challenges such as;
1. How to make the div and image stay in the middle.
2. How to curve around the edges of the scanner image.
3. The texts were warping and the image shrinking while I resized the window.

How I overcame the above challenges(respectively);
1. I checked different resources and was able to use the `top`, `bottom` and `transform:translate(-50%, -50)` to keep the div and the image at the center.
2. I simply used the CSS: `border-radius` on the `img` element.
3. I found out the warping texts and shrinking QR code image were simply because I used `max-width` for my contents, so any size of the page, it had to readjust. As soon as I changed it to `width`, everything was settled!

### What specific areas of your project would you like help with?
1. I wasn't able to use the specific sizes given in the `style-guide.md`. How was I supposed to use those sizes?

    Simple HTML and CSS Landing Page for FrontEnd Mentor QR Code

    1
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • 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.

    • 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.

    • Every page should have one <h1> tag,

    • 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

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    • 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.

    • Using margin-inline: auto is better than margin: auto for centering elements horizontally because it is more precise. To center an element, set its width and apply margin-inline: auto; this will center it within its container., You can center the height by using this code snippet

      min-height: 100svh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

    Marked as helpful
  • Matthew Lancaster•120
    @lank81
    What are you most proud of, and what would you do differently next time?

    When it came to my text I was using header tags. I'd probably use either semantic html or setup tags for each section and style the font size and weight on my own.

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

    The two issues I ran into:

    1. Setting up the user avatar and name alignment and size.
    2. setting the solid border box to be only right and below

    Blog Preview Card Challenge

    2
    P
    Steven Stroud•11,910
    @Stroudy

    Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

    • Your heading elements <h1><h3><h2>, Heading elements should be in sequentially-descending order (e.g., <h1>, <h2>, <h3>) to create a clear content structure, improving accessibility and SEO. Skipping levels or using them out of order can confuse screen readers, affect search engine rankings, and make your content harder to understand.
          <h5>Learning</h5>
      <h6>Published 21 Dec 2023</h6>
      <h3>HTML & CSS foundations</h3>
    • 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,
     <img class="avatarImg" src="assets/images/image-avatar.webp">

    • 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

    • While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

    p {
	font-weight: 500;
	font-size: 14px;
	color: hsl(0, 0%, 42%);
}

    I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

    Marked as helpful