All solutions

My first time using the <progress> element and my main concern is: if Firefox doesn't allow styling the background of the progress bar nor supports ::before or ::after pseudo classes on it, then in a real world situation the correct thing would be to not use a <progress> element altogether and instead create a custom progress bar that is able to follow the design in all browsers, no?

As always feedback of any type is very much appreciated!

My first Junior challenge and my first time using Grid for something non-trivial! Please give me feedback on any aspect of it. I feel like the JavaScript can definitely be polished. Is there anything you'd do different with the layout or form validation? Etc.

My first time validating a form with multiple inputs. How can the JS be improved?

Any feedback is more than appreciated, no matter how basic the area. I'm just starting.

Getting the hang of forms a little bit. Any criticism/feedback is very appreciated.

It's my first time with form validation. What are some best practices I'm missing?

I used grid to position the error message in desktop (1440px) resolution. Would position have been a better way to do it?

It looks good in the requested resolutions (1440 and 375) but it breaks in any other. What's the best way to learn image and background positioning so that it works in most resolutions? I'd love any resource you think I should study.

Any feedback to improve best practices or feedback in general is really appreciated.

Any feedback is appreciated, be it general or small details.

What's the best way to adjust the text wrap in the title section's paragraph for the desktop view? I added padding in the media query and it looks good in both of the indicated 1440px and 375px views, but in the transition (when I manually resize the window) it looks horrible between 1000px and 1440px. Should I worry about that? Is there a better way to adjust the text wrap for these cases?

I seem to be having trouble spacing between elements inside of flexbox and grid. I stopped using padding inside of children element to force the spacing but I don't seem to be able to get properties with values like ´space-evenly´, ´space-around´ or ´space-between´ to work. I feel like I'm missing something very simple.

How do I get my FontAwesome icons to not be bold?

The example seems to apply a very slight filter to the image but I'm not sure which one it is.

I'm puzzled by a couple of things.

1. I used the display: inline-block property so that the div that holds my image fits into it but it doesn't seem to work (desktop view).

2. I use the media query to adjust the flex-direction of the <p> elements for the desktop view but it's not applying it. Why is that?

3. The style guide provides two fonts. I'm not sure where the Lexend Deca 400 is used.

Any help is very much appreciated!

I'm definitely doing something wrong with grid. I built mobile first and it was all fine but then when I adjusted desktop the sizes of the boxes were different in mobile so I just "fixed it" by giving different paddings for each box. There's gotta be a better way.

Practicing SASS and media queries. Any feedback about anything weird I'm doing (about those or about anything) is more than welcome!

The background isn't exactly the same as the design. I'm not sure if the best way to get it exact is to tinker with the background-position or if there's a better method like maybe using translate.

Should I have used media queries for this one? I thought I would need to but then I previewed it in the Chrome dev console changing the width to 375px and it seemed in line with the mobile-design image. When adding a media query I wasn't sure what to change within it.

Any feedback about anything weird I'm doing is more than welcome!