This was a fun challenge, my first React project! I put the user data into its own file to mimic pulling from an API. I definitely had to adapt to the lack of separation of concerns using JSX. Because of this, I changed the way I did my CSS. I'm wondering if doing the CSS this way will make it more readable/ETC. If anyone has any thoughts please let me know : )
Hi Eileen! Amazing work!
I did notice that the page content does not fully display on devices that are not up to 900px. This can be changed by removing justify-content: center on the <body> element. I can see that you made the rule on multiple elements, so you can make another rule like
body { justify-content: unset }.
Then you can set a padding-top to the body element to move it away from the top.
To build this page I used grid/flexbox layout. Waiting 4 ur comments
Hi, Olaf. Nice one from you on this one. I will say the "stay productive wherever you are" section will be better with a background-color of rgb(248, 248, 254). Your navigation-item are also blue in color, it's more like the color of your first header.
I put the img inside a div because when I first saw the designs I thought the blue background was stylistic and the QR code sat inside. I know I could have simply used the img tag itself, or even used a background image, but this seemed like it might be best practice. Is that right?
Any feedback on best practices would be great! Thank you.
Congrats Darren, in my experience it's better to put images in a div, it makes it easier to give a max-width. Also, if the image is going to take up space such as this, it's better to make it an image and not a background.
I also, noticed your first heading was h4, it's better to start with an h1.
Again, well-done on this challenge.
Thankfully I have finished this project, any and all feedback is appreciated especialy feedback on best practices.
Hi Maxmillian, I noticed that inputting a floating number shows an error like 142.55. I see that you are using a regex on the value but it seems unnecessary. You can simply make the input type="number"
<input type="number" onkeyup="validateInputMoney()" id="bill">
I don't understand what these HTML errors mean
Couldn't figure out the background to make it look like in the original, any feedback is welcome
Also changed the :hover a bit
Hi Luciano, congrats on completing the challenge. I just want to say the "CSS:" errors are from font awesome. Also, the <section> in HTML are started with a header like h1 or h2 and so on.
I'm opened to opinions to make my code better.
Hi. I see that the border on the images are all purple; the original design has only Daniel Clifford border and Partick Adams with borders. The color of Daniel Clifford's border is the color of his "Verified Grafuate".
Hello everyone,
I have done several projects before, but this is my first project on this website, feel free to check it out and please let me know if there are any bugs or suggestions.
Regarding bugs, I have encountered one myself, which is related to media query. All media queries are working fine, except the one with min-width:780px, when I checked the dev tools in Firefox, it said that there's an error regarding grid-template-areas and that it is deprecated. I'm confused because the other queries are working fine, except that one. If anyone knows how to solve this, please kindly leave a comment.
Thank you.
Hi Shiva about "min-width:780px" the problem is that in the line below
.testimonial-grid {
grid-template-areas:
"one one two"
"three five"
"four five";
}
"three five" must have a third area name so "three five" should be "three five five" or "three five (anything)"
Same thing applies to "four five", it should also be something like "four five five"
If you want it to be empty then you can "." on the area. Example "three five ."
Lastly <!DOCTYPE html> should be on-top of your html