All solutions

This was my first API call. I don't have any specific questions, but I would love it if you reviewed my code and provided any feedback on ways I might improve the next project. Thank you so much. Cheers!

• I split the JavaScript variables/error variables into it's own partial. It seemed useful to me. Is there a downside I'm overlooking?
• It bugs me that when the 2px border is applied to the error fields, the form changes ever so slightly in size. I tried using outline instead of border, but I couldn't quite pull it off. I suspect I could have manipulated the padding via JavaScript but I was worried that was overkill. Suggestions?
• How could I improve my JavaScript (syntax/formatting)? Can my code be simplified?
• How can I improve accessibility?

1. At what point does increased precision no longer pay dividends? I recently chose a line height of 1.07. Is that too granular of a value? Would it be better to use 1.0 or 1.1? (For the record, I have read Josh W. Comeau's article about pixel perfection. This is more about how many decimal places are relevant.)
2. Is it okay to use percentage for padding like I did to make my hero image to appear? (It's ".hero" selector in the _mobile partial.)
3. Did I achieve some responsiveness? I could make it look good at 1440x800, but at wider sizes not so much (in my opinion). But adding an extra media query keeps the page centered starting at the 1441px mark. I think this looks better at those wider dimensions.
4. Anything else you notice.

Thank you in advance for the feedback!

Thanks in advance for the feedback. I'm getting better at this in large part to all of the wonderful help I receive with each project.

Here are a few questions that came to mind:

1. I used multiple scss files for really the first time. I would love to receive some feedback about how that went. Other ways to approach it and so on. (I kind of did what "felt natural" in this case. For a larger project, I imagine I might divide the css differently.)
2. Is there ever a time I would use px instead of rem for the unit? The only thing I could think of is when I set the html font size. (In this project it was 13px.) Should I just keep using rem to my heart's content?

Please let me know about anything you think I can improve upon - BEM, accessibility, anything really. Thanks in advance for the help!

This was mostly a review of past "card component" projects.

• How would you suggest I handle the widths for this project (compared to what I did)? Considering they were card components, I assumed it was fine to use "static" widths. Your thoughts? As always, let me know if there's something else I missed. Thank you in advance for your feedback. Cheers!

• Did I use the aria attributes correctly? I need to learn a lot more about this.
• I'm still fuzzy on the times to employ min-width, max-width, or width? It works, but could it better? More flexible?
• JavaScript - is there a difference between accessing an element directly and creating a variable then referencing the variable?
• What about getElementById versus querySelector? Anything else you can suggest is much appreciated.

Cheers!

Please provide feedback on the JavaScript. What could I have done better? (It's my first attempt!) And of course I welcome feedback on anything else you deem useful. Thank you as always for the feedback. Cheers!

Tear it apart!! No, I'm only kidding. Please be gentle. But I have much to learn so the more constructive feedback I receive the better. Always at the top of my mind is accessibility, organization/structure, best practices and so on. Thank you in advance for the help and support. Cheers!

The most difficult part of the project BY FAR was the controlling the images. Please look over my solution and report if I succeeded and if there was a better/faster approach than the one I took. (I'm guessing there was...)

Any other thoughts and feedback to help me grow as a developer is much appreciated.

Thoughts on accessibility? I read several articles that addressed hiding content and accessibility. I believe I chose the correct course of action. Thoughts?

Thank you in advance for reviewing my project and providing useful feedback. Cheers!

I suspect there is more than one way to style the radio buttons. I wasn't totally satisfied with my solution.

Please just look it over and let me know what you think.

1. Would it be better if I had used a header tag for the title section?
2. I converted almost all my px values to rem. Overkill or good job?
3. When I change screen width, the background "moves" relative to the page content. Is this okay? Or should they stay in the same place relative to the content?
4. To test my changes, I take screenshots of the page then reduce the opacity and lay them over top the design images to evaluate how they match up. (I do this in Illustrator.) Is there a better way to test changes?
5. Anything else you can share with me. Thanks!

Please let me know how I can improve on my Grid implementation.

How can I better implement responsive design concepts?

Organization and BEM - how am I doing?

Anything else you notice. Thanks in advance.

Cheers!

I would love some feedback about my implementation of Grid. It was my first time using it. (I used it for the wider layout.)

As always, I'm curious how I did with my BEM naming conventions.

Other thoughts?

Thanks in advance!

Did I implement my BEM modifiers correctly (based on BEM standards)? Did I use flex-basis correctly and was there a different/better way to solve the problem of making all three sections a uniform width? Regarding best practices, please confirm that using a link instead of a button was the correct choice for this situation. Other thoughts?

As always, thank you for the feedback and support!

When I was testing, I noticed that very quickly the desktop version was wider than the screen. Most of the card was covered until the screen was narrow enough to invoke the mobile design. I freelanced and added an "in between" version that made the desktop design a column instead of a row. I used flex-wrap to achieve this.

1. Is that okay? And did my solution work?
2. How are my BEM naming conventions?
3. I used CSS to add the decorative/hero image. Is this okay? Since the image was decorative, I thought taking it out of the html would not negatively affect accessibility.
4. Other thoughts and insights?

Update ** Corrected missing alt tag and background color **

I would love some feedback on my first BEM implementation. Did I follow the naming conventions correctly? What can I do better next time?

I'm curious if there was a more simple way to implement the section I named "card__status". I wrapped the left and right part in separate divs then used Flexbox to space the divs across the section.

Regarding the alt attribute for the images, I left them empty since the images were decorative. Please let me know if this is the right approach or not.

Any accessibility issues I missed and any other feedback on how to improve is much appreciated!

Thank you.

I'd like to know if my CSS is organized well and as simplified as possible.

Thank you in advance for the feedback!

Jason

These were the questions that accompanied my original submission. They were answered but the more the merrier I say. Thanks!

Question 1: I set the dimensions of the component card using pixels like so: width: 320px; height: 496px; I think I was worried if using fixed dimensions it wouldn't be truly responsive. Is that a misconception or would it be more appropriate to use a different unit like percent or rem instead of px?

Question 2: Did I successfully build it? I was surprised that the dimensions were the same for both the mobile and desktop versions. Did it just work out that way or have I made a mistake?

Question 3: Other than adding an alt tag to the image, I wasn't sure what other accessibility features I could include. Please let me know if I missed any - I'm still just learning the basics of accessibility.

Thank you in advance for your time and feedback. This is my first submission to Frontend Mentor.