Skip to content
OverviewSolutions
9
Comments
1065

Steven Stroud

@StroudyUnited Kingdom11,890 points

🥇Hi, I'm Steven Stroud from Swindon. I've been passionate about coding and learning for the past five months. My goal is to complete most, if not all, Frontend Mentor challenges to sharpen my skills and grow as a front-end developer. Looking forward to connecting with fellow enthusiasts!💻

I’m currently learning...

I'm currently focused on strengthening my HTML and CSS skills, building on a solid foundation. I'm also learning BEM and SCSS to improve my code organization and efficiency. My true challenge lies in mastering JavaScript due to its complexity, but I'm determined to enhance my front-end capabilities.

Latest solutions

  • Meet landing page with BEM, Variable, Hosting own fonts

    #bem#lighthouse#accessibility
    Steven Stroud•11,890
    Submitted 10 months ago

    I faced challenges aligning the footer image with the Figma design, as it seemed like the photo might not be the correct size. In an effort to reduce the amount of CSS, I tried condensing styles by utilizing utility classes, grouping elements with similar properties (such as font sizes), and applying shorthand properties where possible. However, I recognize there's significant room for improvement. I would greatly appreciate extensive feedback on how to streamline my approach and achieve more efficient solutions. I understand there are much better methods to implement this design, and I am eager to learn and refine my workflow.

    1 comment

  • Testimonials grid, BEM, Mobile first approach

    #accessibility#bem
    Steven Stroud•11,890
    Submitted 11 months ago

    I would appreciate feedback on how I used CSS Grid for the tablet and desktop layouts, particularly in combination with the :nth-child selector. My goal was to minimize the amount of code, as most of the blog cards shared similar styling with only a few differences, which I addressed using :nth-child. While this approach felt efficient, I’d like to ensure it’s the most optimal and maintainable solution.

    2 comments

  • Four card feature - Grid

    #accessibility#bem#lighthouse
    Steven Stroud•11,890
    Submitted 11 months ago

    I'd like to improve my CSS Grid skills, as it's a crucial area I need to strengthen. If anyone has recommendations for resources, tutorials, or examples specifically focused on CSS Grid, I’d greatly appreciate it. My goal is to take some time to learn and master CSS Grid to apply it more effectively in my project.

    3 comments

  • Responsive, Accessible Product Component

    #accessibility#bem#lighthouse
    Steven Stroud•11,890
    Submitted 12 months ago

    There is still so much I don’t know, but I am learning more with every challenge. I would like to use Google DevTools more effectively to help me build in the future, but I don’t fully utilize it because I am unaware of all that it can offer. Any advice or guidance on using DevTools is highly welcome and encouraged.

    1 comment

  • Social Profile, Custom slider, Multiple style sheets

    #bem#pure-css
    Steven Stroud•11,890
    Submitted 12 months ago

    I would appreciate help with optimizing my handling of typography in Figma, especially in understanding and applying font weights more effectively. Additionally, I’m looking to improve my JavaScript structure to make my code cleaner and more maintainable. Any tips or best practices in these areas would be valuable as I continue to develop my front-end development skills and work on more complex projects.

    1 comment

  • Recipe page using SCSS/BEM

    #bem#sass/scss
    Steven Stroud•11,890
    Submitted about 1 year ago

    ℹ️ I would appreciate help with a few specific areas, particularly around fine-tuning my table styling to make it more precise and accessible. I found it challenging to get the table design exactly right, especially when balancing aesthetics with usability and accessibility.

    ➕ Additionally, I’d like some guidance on best practices for handling default browser styles, such as dealing with unexpected font weights on headings or the positioning of list markers. Understanding how to manage these defaults effectively would greatly improve the consistency of my designs.

    ❓ Finally, I’d appreciate any tips on optimizing file paths and resource linking for web hosting, as this caused some issues during deployment. Ensuring that all resources load correctly the first time would streamline the process and prevent headaches down the line.

    0 comments
View more solutions

Latest comments

  • Steven Stroud•11,890
    @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
    Steven Stroud•11,890
    @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
    Steven Stroud•11,890
    @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
    Steven Stroud•11,890
    @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
    Steven Stroud•11,890
    @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! 💻

  • Steven Stroud•11,890
    @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! 💻

View more comments