I am learning React and I picked this easy challenge to practice my skills, but now I’m a bit distracted by its design. The original design is beautiful but it does not meet the contrast ratio guidelines, so I wanted to try out different shades of green. The page does pass the contrast ratio test now, but the design is less … appealing.
Questions:
Do you find my design acceptable? If not, what would you change?
Would it work better if I replaced the green with a different color?
I completed this version with just plain HTML and CSS, but would like to try a different color scheme with the React version.
Great Work, your layout is perfect so is your design,
Where my issues stands, would be the colors not matching the actual design. Compare the design that was given look at the colors and note where they are not similar.
While the your layout is fine, you are not matching the colors in the design, all the same great work.
And agreeing with the comment above some box-shadow would make the card section more pronounce.
Hey, guys! This is my first project submission. It took me a while since I'm new to programming in HTML, CSS, and JavaScript.
What did you find difficult while building the project? I found some difficulties in DOM manipulating and maybe optimizing my code. It was a nice challenge for me to learn new things.
Hi Tiago, nice one. You did well but like the comment above I faced the same issues.
When I add 0 on the number of people text field, and the error appears. I expect that the error disappears if I correct it, by adding a number greater than 0. But the error still persist. That needs to be corrected.
To change your input border on focus, you need to select that particular input element and add the focus pseudo element eg
Input: focus{
border: 2px solid #whatever color you want
}
For your first you did well but I suggest trying newbie projects first before coming to Junior.
Happy coding.
I'm feeling very proud of myself for how far I've come and I am very grateful to Frontend Mentor for helping me throughout my coding journey!
I'd like to improve the style of the cards and wonder how I can get them to stay consistent when filtered out
The dropdown menu gave me problems and I just used a react bootstrap template for the styling. As far as the functionality goes, I was struggling to filter out the countries properly since the filter method kept slicing the original array I was using to render the countries. In the end, I figured out how to render them using the useEffect hook although I don't know if its the best way to do it.
Well done matt on your first advance project here on frontend mentor. I know only little on react so unfortunately can't advice you on the right way to carry out the filter, but the current method works any ways. Where i have problem is the design of the project and also that dark "dark mode" on right side is too bold and the icon of the half moon should be an outline icon not a fill icon. You could reduce the font a bit. The background shadow are too pronounce. I mean it can be there but it's distracting.
All the same well done you indeed should be proud of your self. Keep up the good work.
I have developed this landing page as my first UI front-end challenge. I took the challenge as an inspiration and tried to improvise upon the design by making my landing page a bit different from the design mock-up. Please share your opinions on what did you like the most about my work, how can I make it look better and more appealing. Would love it, if you'll also check the mobile responsiveness.
Nice job, but i can't help but notice your background image is repeated and not position properly, add background repeat : no-repeat to it, and position it.
Nice job, but i can't help but notice your background image is repeated and not position properly, add background repeat : no-repeat to it, there's background image to both desktop and mobile versions they differ, please check that properly. And there's also a background image at the bottom of the website for both desktop and mobile. Please check the design well and see if you can make corrections, Goodluck.
