All solutions

Hi, everyone! 👋🏻

I had fun practicing HTML and CSS in this challenge.

To improve accessibility, links that open a new tab or window (target="_blank") are described with the aria-describedby attribute, which points to a visually-hidden element that contains the "opens a new window" text. That text is announced by screen readers when one of those links is focused.

Any feedback, comments and suggestions are very welcome and appreciated. Thank you!

Hi, everyone! 👋🏻

I had fun practicing HTML, CSS and JavaScript in this project. Some highlights are:

• Accessibility:
  • Input labels are always visible;
  • Input fields with invalid data receive the aria-invalid attribute and are described by their error message using aria-describedby
  • The first input field with invalid data receives focus after submitting the form.
• Graceful degradation: if JavaScript is disabled, the default HTML5 client-side form validation is used and labels are positioned on top of input fields by default.

Questions:

• Do you think the comments in my JavaScript code are useful? Can the code readability be improved in any way?
• To ensure that form error messages appear and disappear smoothly, parts of the functions that show/hide them wait for the transitionend event. However, if a user manages to completely disable transitions (via a user style sheet or user script), form error messages could become stuck, because the transitionend event would never happen. Do you think this is something to be worried about or it's an unlikely edge case?

Any feedback, comments and suggestions are very welcome and appreciated. Thank you!

Hi, everyone! 👋🏻

This was a fun challenge in which I learned how to use the <dialog> element to create a modal. It takes care of most of the things that should be considered when implementing a modal:

• Making the background inert while open
• Focusing the first interactive element inside the modal after opening it
• After closing the modal, returning focus to the element that was focused before opening it
• Adding a backdrop
• Being able to close it with the Esc key

Questions:

• Are there any accessibility improvements to be made?
• Do you think the <dialog> element is ready to be used in production? As of September 27, 2022, it is supported by 92.18% of browsers in use globally.

Any feedback, comments and suggestions are very welcome and appreciated. Thank you!

Hi, everyone! 👋🏻

I had fun practicing DOM manipulation in this challenge. My solution features:

• CSS animations between states
• An error message when submitted with no value selected
• Accessibility: aria-live attribute, prefers-reduced-motion media query, outlines for keyboard navigation, and screen reader focus management via the focus() method.

Questions:

• The numbers inside the buttons look a little bit off-center vertically. Why? I have centered the radio button + label with Grid, and the line-height of the label is equal to the size of the button, so they should be centered. Does this have something to do with the font itself?
• Are there any best practices when it comes to styling components and pages for big screens (QHD, 4K)? I'd appreciate any tips and resources about this.
• How can I set up a simple back end to which I could send the ratings and make the form actually work?

Any feedback, comments and suggestions are very welcome and appreciated. Thank you!

Hi, everyone! 👋🏻

This is my first solution with JavaScript!

For form validation, I used the Constraint Validation API, and a CSS animation plays if the user tries to submit invalid data.

I learned that it's best to place error messages above input fields and that the built-in form validation in the browser can present some user experience and accessibility issues (read more about it in the README).

I couldn't find a way to have the "Base Apparel" logo always be aligned with the "We're coming soon" heading in every desktop screen size — at least without significant changes to the markup. Do you have any advice on how to improve this?

I also found that making good HTML forms is a vast subject, and I look forward to learning more about this in future challenges.

Any feedback, comments and suggestions are very welcome and appreciated. Thank you!

Hi, everyone! 👋🏻

In this challenge, I practiced using Grid to implement this interesting layout.

I used a pseudo-element to create the colored top edge of the cards, and setting the color with a custom property that is altered by modifier classes makes it easy to create new cards with different colors.

The paragraph color in my solution is a bit darker to ensure it has enough contrast with the background, thus improving accessibility.

I found it difficult to match the box-shadow of the cards in the design; the one in my solution looks a bit different. It was my first attempt at using layered box-shadows, and I've linked two useful articles about this in the repository's README.

Any feedback, comments and suggestions are very welcome and appreciated. Thank you!

Hi, everyone! 👋🏻

I've started Wes Bos's free CSS Grid course, and I have applied what I've learned so far in this challenge.

Regarding semantic HTML: It's unclear to me if I should have used the <article> element for this component, as I'm not entirely sure how much "independent" and "self-contained" it is. What do you think?

Any feedback and comments that you might have will be much appreciated. Thank you!

Hi, everyone! 👋🏻

In this challenge, I practiced using Grid to create a responsive component in a mobile-first workflow.

While coding it, I learned how to create accessible links by giving them descriptive ARIA labels. Additionally, even though I am not entirely familiarized with the official BEM documentation yet, I learned about the concept of mixes in BEM and found it useful when creating the buttons in this challenge. It's all described in the GitHub repo!

Any feedback will be much appreciated. Thank you!

Hi, everyone! 👋🏻

This was my first time using Grid in a Frontend Mentor challenge, and I can't wait to learn more about it. I have two questions about the card's image:

I inserted the image with background-image so that I could use background-blend-mode: multiply to create the purple color effect. For the containing <div> to match the size of the background image, I added it in the markup too — with the <picture> element — and set its visibility to none.

This feels like a hack — adding the image "twice" —, but it was the easiest way I could find to make the <div> match the background image size exactly. Questions:

• Since the images in the <picture> element and in background-image are the same, I imagine that this would not affect performance — the image would only be downloaded once. Is this correct?
• Is there a better way to make the <div> match the size of the background image?

Any other feedback will be much appreciated. Thank you!

Hi, everyone! 👋🏻

I had fun sharpening my Flexbox skills in this challenge. However, I was a bit unsure about the best practices for styling links with CSS.

I styled the :hover and :focus states as required by the challenge, but did not add rules for the :link, :visited and :active pseudo-classes. I did not notice any interference from the browser's default styles, but maybe I should have added rules for those pseudo-classes too, just in case. What do you think?

I added the accessibility tag because I ensured color contrast ratios in text follow WCAG 2.0 level AA, and VoiceOver and TalkBack seemed to read out the page smoothly. I would be grateful for any accessibility-related feedback that you might have.

Any other feedback is much appreciated. Thank you!

The card contains a visually-hidden text intended for screen readers only. I noticed that it will still be copied if I select the entire content of the card. Could this be an issue? Would it be better to position the visually-hidden content off the screen?

What are the best practices about the feedback provided by interactive elements? I made the "add to cart" button shrink slightly in its active state. However, in Firefox, it only shrinks when clicked, but not when the space bar or enter keys are pressed while focused. In Edge, it shrinks when clicked and when the space bar is pressed, but not with the enter key.

Is it correct to say that there is a lack of feedback when the user presses the button with the keyboard (particularly in Firefox)? Should I correct this with JavaScript, changing the browser's default behavior?

Any other comments are welcome! Thank you!

The two circles in the background are absolutely positioned <img> elements. Is this a good approach for positioning items in the background? I tried placing the circles with the "background" property, but positioning them correctly with "background-position" turned out to be difficult. It seemed more intuitive to use absolute positioning and "transform: translate();".

In this project, I came across a difference in how outlines are rendered in Safari compared to other browsers. If I didn't have access to an iOS device, I probably would not have realized this. Is there a simple way to see how a page will be rendered in different browsers and devices?

What tag should I use for the card title to give it the best HTML semantics? I used <h1> for the title of the card, since it is the only <h1> in the page. However, this is not ideal if I were to reuse the card component in a page with more content. I'm also not sure if a heading tag is even the best option for a card title.

I used "max-width: min(80%, 300px)" to make the card width match the design, as well as to prevent it from going edge to edge on small screens, but I'm using a "magic number" here. Is there a better approach to this?

Any other comments are more than welcome. Thank you!