Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
31
Comments
136

Rebecca Padgett

@bccpadgeChesterfield, VA2,100 points

Building Accessible Web Experiences ♿️ | HTML, CSS, Tailwind, SCSS, JavaScript, React.js, Python

Latest solutions

  • Responsive Fylo using HTML, SCSS, & JavaScript

    #accessibility#bem#sass/scss

    Rebecca Padgett•2,100
    Submitted 2 months ago

    All feedback is welcome and greatly appreciated.


    3 comments
  • Responsive Time Tracking Dashboard using HTML, CSS & JavaScript

    #accessibility#bem

    Rebecca Padgett•2,100
    Submitted 3 months ago

    All feedback is welcome and it's greatly appreciated.


    1 comment
  • Responsive Contact Form using HTML, CSS, & JavaScript


    Rebecca Padgett•2,100
    Submitted 5 months ago

    N/A


    3 comments
  • Responsive Bento Grid using HTML and CSS

    #accessibility#lighthouse

    Rebecca Padgett•2,100
    Submitted 6 months ago

    All feedback is welcome and greatly appreciated.


    3 comments
  • Responsive Advice generator app using HTML, CSS & JavaScript

    #accessibility#bem#lighthouse

    Rebecca Padgett•2,100
    Submitted about 1 year ago

    N/A


    0 comments
  • Responsive Fylo data storage component using HTML and CSS

    #accessibility#bem#lighthouse

    Rebecca Padgett•2,100
    Submitted about 1 year ago

    I used :is() CSS pseudo-class to apply the background-color for header and article.

    :is(header, article){
     background-color: hsl(var(--clr-neutral-300));
    }
    

    I went to the website on my iphone SE with IOS 17.5.1 background-color doesn't appear even if I remove :is(). I applied -webkit- and -moz- vender prefixes per this article How to Fix CSS Issues on Safari and the background-color still doesn't show.

    Is there something wrong with code that I'm not seeing? What other solutions can I use that fixes this issue?

    Thanks,

    Rebecca


    0 comments
View more solutions

Latest comments

  • Ahmed Ali•650
    @qayoommunawar
    Submitted 8 days ago
    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
    Posted 8 days ago

    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
    Submitted about 1 month ago
    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
    Posted about 1 month ago

    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! 🚀

  • T Moses•150
    @Andrew-003
    Submitted about 1 month ago

    QR Code component using html and css (flexbox)

    1
    Rebecca Padgett•2,100
    @bccpadge
    Posted about 1 month ago

    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
    Submitted about 1 month ago
    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
    Posted about 1 month ago

    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
    Submitted about 2 months ago
    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
    Posted about 2 months ago

    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.

  • aneeshthakur67•160
    @aneeshthakur67
    Submitted about 2 months ago

    FAQ accordion

    1
    Rebecca Padgett•2,100
    @bccpadge
    Posted about 2 months ago

    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📚:

    • CSS inset property

    • Also you can add self-host Work Sans font family using this website: google webfonts helper

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

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub