All solutions

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

I am most proud of using the template tag again.

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

I had issue with accessing the the dismiss button in the template tag. When I console.log the button I would get null.

In my index.html file placed a data attribute of [data-js-reset] on the button.

Dismiss message

I created returnToForm function in JavaScript.

// return to the Newsletter form
function returnToForm(e) {
  if (e.target.hasAttribute("data-js-reset")) {
    location.reload();
  }
}

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

N/A

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

Hey everyone,

This is my solution to the Project tracking intro component. All feedback is welcome and greatly appreciated.

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

I would like feedback on the mobile version of my website. I have an iPhone SE and can't scroll past the image to see the section content. I have the transform CSS property on my image.

section < img{
  transform: translate(10%) scale(1.1);
}

I am unsure if that is causing the issue and if you have any suggestions, please let me know.

Thanks, Rebecca

Hello everyone,

This is my first junior solution to the Frontend Mentor Testimonials grid section. All feedback is welcome and greatly appreciated. I am getting this error in my HTML validation report: Element "ficaption" not allowed as child of element "figure" in this context. What is the best way to fix this issue?

Thanks,

Rebecca

Hello everyone,

This is my solution to the Intro component with Signup form challenge. I changed the the background color and button text color to fix the contrast issue so it not going to look like the design files. All feedback is welcome and greatly appreciated.

Thanks,

Rebecca

All feedback is welcome and greatly appreciated.

All feedback is welcome and greatly appreciated.

Hello everyone,

I hope everyone is doing well. This is my solution to the Recipe Page. All feedback is welcome and greatly appreciated. I wanted to submit this solution now because I won't be coding due to my birthday is tomorrow.

For the paragraph, I made the gray color darker to fix the accessibility issue.

All feedback is welcome.

Hey everyone,

This is my solution to FAQ Accordion Card challenge. In this challenge, I focused on making the FAQ accordion card accessible. The user can TAB through the each question. Also, you can use up and down arrows on the keyboard to navigate to each question as well.

Thanks,

Rebecca

You can connect with me via Github and Linkedin.

Hey everyone,

This is my solution to Social proof section challenge. All feedback is welcome and greatly appreciated.

Thanks,

Rebecca

Hey everyone,

This is my solution to Huddle landing page with introductory section. All feedback is welcome and greatly appreciated.

Thanks, Rebecca

Hey everyone,

This my solution to Base Apparel Coming Soon Page using HTML, CSS & JavaScript. The only issue I had doing the project is placing the bg-pattern-desktop.svg on desktop. All feedback is welcome and greatly appreciated.

Thanks,

Rebecca

Hello everyone,

Hope all is well.

This is my solution to the Article preview component. In this project, I made sure the tooltip is accessible by using aria attributes [aria-expanded="true"] and [aria-expanded="false"] and when you press somewhere else like the card for example the tooltip will close. Additionally, you can press the ESC to hide the tooltip and pressing TAB on the button a dotted outline will appear.

Any other feedback would be welcome and greatly appreciated.

You can connect with me via Github and Linkedin.

Hey everyone,

This is my solution to the Ping coming soon page. I changed the button text color to black because there was a color contrast issue. All feedback is welcome and greatly appreciated.

Thanks,

Rebecca

Hey everyone,

This is my solution to order summary component.

All feedback is welcome and greatly appreciated.

Thanks,

Rebecca

Hello everyone

I hope all is well.

I have a couple questions about my HTML structure.

• Should I wrap each card component using an article tag or section tag along with using aria-labelledby="" attribute?

<article class="card">
  <h2 class="card__title"></h2>
</article>

<section aria-labelledby="sedans">
  <h2 id="sedans"></h2>
</section>

• In Firefox, I checked the inspected acessibility properties and had a warning like a text label with the figure tag. To fix the issue I added figcaption with the visually hidden class for screen readers. Do I need need to keep the figcaption or remove it?

Text labels and names

<figure>
  <img src="./assets/images/icon-sedans.svg" alt="" aria-hidden="true" />
  <figcaption class="visually-hidden">Sedans</figcaption>
</figure>

• The color given in styleguide.md file has color constrast issue for the paragaphs, what color should I use to fix this issue?

Thank you for taking the time to look at my solution and feedback greatly appreciated.

I made a custom version of this challenge: Custom version

Rebecca

Hey everyone,

In this project, I used modern CSS techniques like the min() and clamp() functions. Any feedback is welcome and greatly appreciated.

Thanks for taking the time to check out my solution.

Rebecca

Hey everyone,

All feedback is welcome and greatly appreciated.

Thanks,

Rebecca

Hello everyone,

This is my first Frontend Mentor project using Tailwind CSS. All feedback is welcome and greatly appreciated.

Thanks,

Rebecca

Any feedback would be welcome and greatly appreciated.

Thanks,

Rebecca

All feedback is welcome and greatly appreciated. Thanks, Rebecca

In this project, I learned how to apply the visually-hidden to differentiate the current price and original price for accessibility reasons.

Any other feedback is greatly appreciated.

Thanks, Rebecca

All feedback is welcome.

Thanks, Rebecca