Skip to content
OverviewSolutions
31
Comments
136
Rebecca Padgett
@bccpadge

All comments

  • Ahmed Ali•650
    @qayoommunawar
    What are you most proud of, and what would you do differently next time?

    I practiced toggeling between mobile and desktop navbar while using the same html structure.

    <h1>Some HTML code I'm proud of</h1>
```<nav id="mobile-menu"> 
        <ul class="nav-links">
          <li>
            <a href="#">
            About
            </a>
          </li>
          <li>
            <a href="#">
            Services
            </a>
          </li>
          <li>
            <a href="#">
            Projects
            </a>
          </li>
          <li>
            <a href="#" class="btn-primary">
              Contact
            </a>
          </li>
        </ul>
      </nav>

    #mobile-menu {
        position: absolute;
        width: 90%;
        height: 250px;
        top: 80px;
        left: 50%;
        transform: translateX(-50%) scaleY(0);  
        transform-origin: top;
        background-color: var(--color-white);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
}

    btnToggle.addEventListener('click', () => {
  if (window.innerWidth < 768) {
    mobileMenu.classList.toggle('active');
    const expanded = btnToggle.getAttribute('aria-expanded') === 'true';
    btnToggle.setAttribute('aria-expanded', !expanded);
  }
});
    What specific areas of your project would you like help with?
    • how i can manage header+hero section bg without giving header or backgroound img height:100vh; ? because it does not looks good, and the other way if height is not used image is not shown fully.
    • should i use fluid-grid style or manage it through media query ?? for example in section.img-gallery i styled images using fluid grid: here is the css snap:
      .grid-gallery{
    display: grid;
    grid-template-columns:
        repeat(
          auto-fit,
          minmax(370px, 1fr)
        );
    justify-content: center;
    align-items: center;
}
    • in section-flex which is bascially a grid layout, i set grid-rows so that both the image and text take exactly the same height and width, is this a good practice ? wether i use flex for this ?? what is the best practice in these scenerios ??
      .section-flex{
    display: grid;
    place-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2,1fr);
    justify-content: center;
    align-items: stretch;
}
    • looking forward to any postive suggestions to enhance my grip on desgin and logic.

    Sunnyside Responsive Landing Page

    #accessibility#pure-css#van-js
    2
    Rebecca Padgett•2,100
    @bccpadge

    Hi there!

    Try using CSS Flexbox:

    • Set display: flex; on the parent element.
    • Use a media query to set flex-direction: row-reverse; on desktop.

    For the graphic design and photography sections:

    • Add max-width: 40ch; and margin-inline: auto; to limit width and center text.

    Style the "Learn more" buttons with text-transform: uppercase and add hover states.

    To adjust the logo color, duplicate the image, open the SVG code, and modify the fill color.

    I hope you find this useful and don't hesitate to reach out if you have any questions.

  • John Andrew San Victores•30
    @johnandrewsanvictores
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the fact that I was able to build a working project using React, especially since it was my first time working with the framework. It felt great to take on something unfamiliar and see it through to completion. One thing I would do differently next time is spend more time planning the overall component structure and project organization before jumping into coding. I realized that having a clear architecture from the beginning can make development much smoother and help avoid unnecessary rewrites later on.

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

    One of the biggest challenges I faced was understanding the architecture of a React application—how components communicate, how to manage state, and how to properly fetch and display data from an API. At first, it was overwhelming, but I reached out for help and got support from someone more experienced in React. With their guidance and some additional self-learning, I was able to understand how things fit together and started applying the concepts more confidently.

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

    I would really appreciate more guidance on using React Hooks effectively. While I understand the basics of useState and useEffect, I still find it a bit confusing when to use certain hooks and how to manage more complex state or side effects. Learning best practices around hooks and how to structure components that use them would really help me improve and write cleaner, more maintainable code in future projects.

    My Results summary component using reactjs, vite and tailwind

    #react#tailwind-css#vite#react-router
    1
    Rebecca Padgett•2,100
    @bccpadge

    Hi John Andrew San Victores!

    👏 Fantastic job on the project! Your work is really coming together beautifully.

    Just a quick tip for your <div> using flexbox—removing height:100vh will help avoid a fixed height restriction. Instead, adding min-h-dvh ensures a minimum height while keeping things flexible.

    Best practices for heading tags:
    It's always a good idea to use heading tags in chronological order for better accessibility and structure:

    • <h1> – Could be the Result Summary Component with sr-only for improved screen reader support.
    • <h2> – Your Results
    • <h3> – Summary

    Also, for the <button>, make sure to add :focus-visible states so that users who navigate with a keyboard can access your website smoothly. This improves usability and accessibility!

    Additionally, icons in this project are decorative and don’t need alt text. Instead, you can leave the alt attribute blank and add aria-hidden="true" to ensure screen readers skip them.

    To improve your code structure use a ul to group the image, text content. Here is an example:

    <ul>
   <li>
  <div>               
   <img src="./assets/images/icon-reaction.svg" alt="" aria-hidden="true" />
   <h3 >Reaction</h3>
 </div>
 <p ><span> 80 </span> / 100</p>
<ul>

    This will enhance structure and semantic clarity while maintaining accessibility.

    Closing thoughts: Your attention to detail and commitment to accessibility make a huge difference! Keep refining your skills and implementing best practices—you're on a great path. Looking forward to seeing what you build next! 🚀

  • Rebecca Padgett•2,100
    @bccpadge

    Welcome to the Frontend Mentor Community!! 🎉

    Great start to your coding journey

    Your HTML is well-structured, but consider using semantic elements like a <main> and <footer> to improve readability and SEO.

    Every website has a title; in this case, "Improve your front-end skills by building projects," which can be wrapped in <h1>.

    Your alt text is effective, but adding more detail—like "A qr code to Frontend Mentor website" instead of "qr code image"—enhances accessibility. For decorative images, leaving alt="" helps screen readers skip unnecessary content. Great job prioritizing inclusive design!

    I hope you find this useful and don't hesitate to reach out if you have any questions.

  • P
    Sven Notermans•220
    @Sven-27
    What are you most proud of, and what would you do differently next time?

    No comments

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

    No comments

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

    All feedback is welcome

    article preview using flexbox

    2
    Rebecca Padgett•2,100
    @bccpadge

    Hi Sven Notermans! Congratulations on completing this challenge!!!🎉

    To maintain border-radius on desktop, remove overflow: unset; from your media query:

    @media only screen and (width >= 650px) {
  body .container {
    max-width: 608px;
    display: flex;
  }
}

    I hope you find this useful and don't hesitate to reach out if you have any questions.

  • Nhan Phan•50
    @niophan
    What are you most proud of, and what would you do differently next time?

    I 'm proud of figuring out how to use different images with picture element, and how to achieve border-radius when the view is divided into 2 parts( picture and text box) Besides, it is great to review somewhat sass, which i havenot touched for long.

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

    I found it somewhat not similar to the original design, due to the difference of icon selection.

    Responsive using picture/media query

    1
    Rebecca Padgett•2,100
    @bccpadge

    Hi Nhan Phan. Congratulations on completing this challenge!!!🎉

    HTML 📃:

    • Refactor index.html to incorporate HTML semantic tags.
    • Wrap Gabrielle Essence Eau De Parfum in <h1>.
    • Use <del> for the original price to apply an automatic strikethrough.
    • For the price section add more context for screen readers by deferentially the prices
     <div>
  <p class="product-price">
     <span class="visually-hidden">Current Price:</span>
      $149.99
  </p>
   <p class="product-original-price">
      <span class="visually-hidden">Orginial Price:</span>
      <del>$169.99</del>
   </p>
 </div>
    • The visually-hidden CSS class hides the text visually on the website but accessed by screen readers
    /* sometimes referred to as .sr-only */
.visually-hidden:not(:focus):not(:active):not(:focus-within) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
    • Implement hover state for the button and cursor: pointer for better interactivity and make sure it focusable and usable by keyboard.

    Here is my solution to this challenge: Product Preview card component

    I hope you find this useful and don't hesitate to reach out if you have any questions.

  • Rebecca Padgett•2,100
    @bccpadge

    Hi @aneeshthakur67. Congratulations on completing this challenge!!!🎉

    To remove the scrollbar on the website you can use position CSS property to keep the attribution on the top of all the content.

    .attribution{
 position:fixed; 
 inset: auto auto 1rem 1rem;
}
    • To place the attribution where you want you can use CSS shorthand property called inset setting for top, right, bottom, and left property.

    More info📚:

    I hope you find this useful and don't hesitate to reach out if you have any questions.

  • Asilcan Toper•2,960
    @KapteynUniverse
    What specific areas of your project would you like help with?

    Any feedback is appreciated. Is there a way to change only the text color of the logo SVG, or is the dark mode logo missing? Also, is there a better way to fetch data, toggle states, and handle dark mode?

    Browser Extensions Manager UI

    #accessibility#react#tailwind-css#typescript#vite
    5
    Rebecca Padgett•2,100
    @bccpadge

    Hi there! You can change the fill color of the svg.

  • Rebecca Padgett•2,100
    @bccpadge

    Hi jharshavardhan2003

    Congratulations on completing this challenge!!! 🎉

    HTML 📃:

    • Ensure every website has at least one landmark like a <main> tag.
    • Use the <footer> tag for attribution.
    • Replace <div> with <main> for wrapping your content.
    • Upload your images to the GitHub repository to display them on the page.

    CSS 🎨:

    • Flexbox and CSS Grid are two CSS layouts that help you center your content on the page.

    Flexbox

    body{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

    CSS Grid

    body{
display:grid;
place-content: center;
min-height: 100vh;
}
    • Also you can remove the padding on the body and you can apply a max-width on your .container class so you don't have implement a media query.

    I hope you find this useful. Don't hesitate to reach out if you have any questions. Keep up the great work!!

  • Moisés Alfaro•490
    @MoisesAlfar0o
    What are you most proud of, and what would you do differently next time?

    Nothing to say! :)

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

    Well, it was the images in the body; I didn't know how to add them and position them, but in the end, I sort of managed to do it. I found two ways: one using background-image and the other with the <img> tag, but one is fully responsive from the start, and the other isn't.

    Another thing was how to set the profile image as requested. In the end, I managed to do it, and I hope it's okay. :)

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

    Any feedback! :)

    Profile-card-HTML-CSS

    1
    Rebecca Padgett•2,100
    @bccpadge

    Hi!

    Congrats on completing the challenge! 🎉

    HTML Tips:

    • Enhance accessibility with <article> and <section> tags.
    • Avoid excessive <div> usage as it fails to clarify content.
    • For stats, wrap content using a <ul>:
    <ul>
 <li>
  <strong>80k</strong>
  <p>Followers>
</li>
<ul>

    Using a <ul> (unordered list) tag is beneficial for structuring stats because:

    • Semantic Meaning: It clearly indicates the content is a list, enhancing accessibility for screen readers.
    • Consistency: Ensures uniform formatting of list items.
    • Styles and Formatting: Easily customizable with CSS for a consistent design.
    • SEO Benefits: Improves search engine optimization by using semantic HTML elements.

    In short, <ul> tags create well-structured, accessible, and consistent content presentation.

    I hope you find these tips useful! If you need any clarification, I'm glad to help. Keep up the great work!

  • Vijay Kumar Muppirisetti•30
    @Vijaykumar-Muppirisetti
    What are you most proud of, and what would you do differently next time?

    Clean, semantic HTML structure using appropriate elements for accessibility.

    Responsive design implementation that works across different screen sizes.

    Consistent visual styling matching the design requirements.

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

    Getting the equal-height columns to work properly across different content lengths.

    Maintaining button positioning at the bottom of each card.

    Ensuring the responsive layout breaks appropriately on mobile.

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

    I’m happy to receive any feedback and suggestions for optimizing and improving the code! Always looking to learn and grow. 💡

    Responsive Preview Card Component [ HTML + CSS ]

    1
    Rebecca Padgett•2,100
    @bccpadge

    Hi 👋🏼

    Your project looks great! I have few tips to improve your solution.

    Use Proper HTML Semantic Tags

    • Every website must be have at least one landmark like <main> tag.
      • The reason behind using the <main> tag because it identifies the primary content of the page.
    • Attribution information can be wrapped in a <footer> tag
      • <Footer> tag holds content like the copyright information, authorship information, and contact information just to name few examples.

    CSS 🎨:

    • You can add the star selector and remove margin and padding as a default CSS Reset
    *{
 margin: 0;
 padding: 0

}

    • To remove the scrollbar on desktop, you can adjust your CSS styles.

    • On the <body> I used flexbox to center the content the page. and used position: fixed on the attribution so content stays in one place.

    body{
display: flex;
align-items: center;
min-block-size: 100vh;
flex-direction: column;
justify-content: center;
}

.container{
 max-width: 960px;
 margin: 0 auto;
}
    • Inset is shorthand CSS property for top, right, bottom, and left
    • Mobile devices you can hide the content and display it on desktop using a media query
    .attribution{
 position: fixed;
 inset: auto auto 1rem 1rem; 
}

    Here is my solution to this challenge: 3-column preview component

    I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!

  • Robert Horosewski•310
    @horoserp
    What specific areas of your project would you like help with?

    I would appreciate feedback on if there is a way to have both the "button" text and the background JUST under that text be transparent while keeping the rest of the background as it is. Alternatively, is there a way to optimize my CSS so that I don't have to target each button individually: .category:nth-child(2) .button:hover {.

    HTML/CSS 3-Column Card

    2
    Rebecca Padgett•2,100
    @bccpadge

    Hi there!

    • You don't have to wrap the <a> tag in a <div> and its okay to add CSS styling to the <a> tag.
    • Add aria-label="learn more about sedan cars" to the <a> tag to make link more the accessible for screen readers.
    • Here is an article explain the difference between a <button> and <a> tag 
    a{
 background-color: var(--Very-light-gray);
 border: 2px solid var(--Very-light-gray);
 transition all 350ms ease-in-out;
}

a:hover{
 background-color: transparent;
 color: var(--Very-light-gray);
}

    In CSS you can add another CSS class like .button-sadans to change the button text color.

    Here is my solution to this challenge: 3 Column preview card component

    I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!

    Marked as helpful
  • Rebecca Padgett•2,100
    @bccpadge

    Hi @RahmaBahaa. Congratulations on completing this challenge!!!🎉

    Your project looks good so far! I have a few suggestions to improve your solution.**

    HTML 📃:

    • Every website must have at least one landmark like a <main> tag

    Example:

    <body>
<div class="container"><div>
<main class="container"></main>
</body>

    The difference between the <div> and <main> tag is the <div> is non-semantic element that doesn't explain the content.

    More info📚:

    CSS 🎨:

    • CSS has two layout options: Flexbox and CSS Grid to center your content on the page

    Flexbox

    • You can remove the padding because it is not needed.
    .container{
 display: flex;
 align-items: center; 
 /*padding: 20px 100px; */
 justify-content: center;
 min-height: 100vh;
}

    CSS Grid

    .container{
 display:grid;
 place-content: center;
 min-height: 100vh;
}
    • You can also add max-width instead of the width to .leftSection and .rightSection so the content will not stretch the page.
    • Providing a width gives elements a fixed width that doesn't change

    More info📚:

    Here is my solution to this challenge: Responsive Sign up form using HTML, CSS & JS

    • The reason why the background-color is blue because the title and paragraph meets WCAG AAA accessible text for Color and Contrast fix.

    I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!

    Marked as helpful
  • Rebecca Padgett•2,100
    @bccpadge

    Hi @alaa-mekibes. Congratulations on completing this challenge!!!🎉

    Your project look good and the only thing that concerns me is <div> for each section of the page.

    You can fix that using the <section> or <article> tag

    Example:

    <section aria-labelledby="ingredients-title">
<h2 id="ingredients-title">Ingredients</h2>
</section>

<article>
<h2>Ingredients</h2>
</article>

    More info📚:

    Here is my solution to this challenge:Recipe Page

    I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!

    Marked as helpful
  • Rebecca Padgett•2,100
    @bccpadge

    Hi @kisu-seo Congratulations on completing this challenge🎉!!

    Your project looks amazing!

    The only I notice is you are using multiple h1 on the page.

    There should only be one h1 on the website.

    You can use a h2 and h3 for the other titles.

    Don’t use a certain heading level just because you don’t have style it in CSS.

    I hope you find this useful. Having questions and need further guidance I’m happy to help.

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

    I have tried to use correct semantic for my project and tried making it responsive as much as I can using SASS.

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

    Any feedback is welcomed to make my project accessible and responsive.

    Responsive QR Code

    #sass/scss
    1
    Rebecca Padgett•2,100
    @bccpadge

    Hi @hkaur108. Congratulations on completing this challenge!!!🎉

    You are on the right track and need to focus on using semantic HTML tags.

    HTML 📃:

    • Every website must have at least one landmark like a <main> tag.
    • Wrap your content using the <main> tag and attribution info in a <footer> tag.
    • Alt Text for Images: Always include descriptive alt text for images. This ensures that screen readers and other assistive technologies can understand what the image represents, making your content more accessible.

    Example:

     <img src="./images/image-qr-code.png" alt="Scan the qr code to visit frontendmentor.io website">

    CSS 🎨:

    • Media query does not need to be used in this simple project.
    • Look at the styleguide.md file that give in the starter files provided from Frontend Mentor with the correct font-family.
    • Best practice to only apply CSS styles that are needed.
    • Max-width:100% and display:block; are great reset for images in CSS.

    Text-algin: auto; is a invalid CSS property. When building these projects be sure to use Developer Tools.

    .text-container {
  width: 100%;
  text-align: auto;
}
.text-container {
  width: 100%;
  text-align: auto;
}

    Here is my solution to this challenge: QR Code component

    I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!

    Marked as helpful
  • Marzia Jalili•9,170
    @MarziaJalili
    What are you most proud of, and what would you do differently next time?

    Well, I don't know. Maybe speed. Actually I am shown in Wall of fame this week with 110 points, so NOT BAD😎😎.

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

    I used to set the font-size for different pages in media queries, but I came accross an interesting function called clamp which made my work much easier😁😁.

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

    GUYYYYYYYYYYS, I need to scroll to see the entire page while it shouldn't have been like this. Help me out!!!!!!

    Ping | Landing Page

    1
    Rebecca Padgett•2,100
    @bccpadge

    Hi @MarziaJalili. Congratulations on completing this challenge!!!🎉

    Your project looks great so far!

    On <body> you can remove the the default margin and padding.

    .ping-container keep the padding-block:3rem on mobile devices and use a media query to remove the padding-block. The padding-block is the reason you see the scrollbar on desktop.

    I hope that answers your question.

    Marked as helpful
  • P
    Brandon Taylor•250
    @brandontaylor1
    What are you most proud of, and what would you do differently next time?

    I liked this design overall, nothing currently that I would do differently.

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

    I didn't encounter any significant challenges.

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

    I didn't need any help with this project in particular.

    Social Links Profile

    2
    Rebecca Padgett•2,100
    @bccpadge

    Hi @brandontaylor1. Congratulations on completing this challenge!!!🎉

    Your project looks good so far!

    HTML 📃:

    • Add alt text to images for screen readers: <img src="assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall">

    • Wrap social media links in a ul tag:

       <ul>
     <li>
       <a href="https://www.github.com">GitHub</a>
     </li>
   </ul>
    • Use target="_blank" to open links in a new tab.

    More info 📚:

    CSS 🎨:

    • To make your solution more like the design, you can change the <body> and .container background color.
    body{
background-color: var(--gray-900)
}

.container{
 background-color: var(--gray-800)
}

    Here is my solution tho this challenge: Social Links Profile

    I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!

  • soniluvi•50
    @soniluvi
    What specific areas of your project would you like help with?

    I'd like to learn to put this on a mobile device so it looks good on 375px screen as well.

    Blog Card - CSS flexbox

    1
    Rebecca Padgett•2,100
    @bccpadge

    Hi @soniluvi. Congratulations on completing this challenge!!!🎉

    Great job on your project! I wanted to share a few thought that might help you take it to the next level:

    • On mobile devices you can margin-inline:1rem; on the body that sets space on the left and right side.

    If you don't want to use Flexbox to center content on the page you can use CSS Grid as well.

    CSS Grid in action below ⏬

     .container {
  display:grid;
  place-content: center;
  min-height: 100vh;
}

    More info📚:

    Alt Text for Images: Always include descriptive alt text for images. This ensures that screen readers and other assistive technologies can understand what the image represents, making your content more accessible.

    Example:

    <img src="images/image-avatar.webp" alt="headshot of Greg Hooper">

    Heading tags in HTML are so important on webpage, guiding both users and SEO through the content.

    Here's a quick breakdown:

    1. <h1/>: Represents the main heading of the page. It's the most important heading and typically used once per page.

    2. <h2>: Used for subheadings under <h1>.

    3. <h3> to <h6>: Represent lower-level subheadings, each level down is less critical.

    If you don't want to use the <h1> as the title use the <h2>

    <h1> can have .sr-only for screen readers

    Check out my solution here: Blog preview card

    I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!

    Marked as helpful