Hello everyone! I'm excited to share my solution for this challenge. While I kept the styling simple using Vanilla CSS, I welcome any feedback related to accessibility. Thank you for taking the time to review my work!
Hey, man! Congrats on completing the project. Have you heard about CSS modules for your React components? I took a glance at your code and noticed that you keep all your styles in a single file. If I may, I'd suggest diving into CSS modules and getting comfortable with them, especially for larger projects. For now, it's fine to keep all your styles in one file for a small project. However, as your projects grow and you start building multi-page websites, having everything in a single file can become a real mess. Trust me, I've been there and made that mistake myself.
When it comes to organizing styles in React projects, there are a couple of other options worth exploring. For instance, you could check out libraries like "styled-components" or leverage the power of CSS preprocessors. Take the time to experiment and see what works best for you. Happy coding!
Hello there 👋, I am @rajkp10
The challenge is quite easy from the logical point of view.
However, implementing 3 different themes was a bit of a challenge for me as I have not worked with multiple themes in the past. So, it took some time for me to figure out how to design the solution.
The themes are implemented using CSS3 and Vanilla Javascript only.
Any kind of suggestion regarding the code or the design are most welcome. 🙂
Looks pretty good! I like the sound effects you've incorporated when clicking the buttons. I have a suggestion for improvement. Consider implementing a restriction that disallows consecutive periods after an existing period in the input. For instance, when I enter '0.0...0', it's evident that this isn't a valid operand. The current error code display works fine, but preventing users from entering invalid operands would be even better. You could consider incorporating a regular expression into your existing code to perform validation on the input. But other than that, keep up the good work!
Fun project. I'm not good in JavaScript and cannot understand the code, but after this project I am able to read and understand the code. The js code is not completely mine, I saw some solutions to figure out what was happening and then I tried to write the code myself. However the html and css is completely coded by me from scratch. Getting the accurate sizing and margins without the figma file was the hardest part. And I noticed the color of the card was not plain, it was a radial gradient. A lot of solutions I saw made the card plain. getting the exact gradient was very difficult for me. Overall fun project, learned a lot.
Great job on completing the project and pushing yourself to learn more about JavaScript! It's impressive that you were able to write the HTML and CSS from scratch and tackle challenges like accurately sizing and positioning elements without the Figma file. And even though the JavaScript code wasn't entirely your own, it's great that you were able to understand and incorporate other solutions to figure out what was happening. Keep up the great work and continue to challenge yourself!
One suggestion I would make is to add a label element for the email input field to improve accessibility. This will associate the label text with the input field, making it easier for screen readers to identify the purpose of the field.
Another suggestion is to include alternative text for the header logo and hero image. This will also improve accessibility by allowing screen readers to describe the image to users who may not be able to see it.
Overall, great job! Keep up the good work.
Hi there! 🤗I'm Yufei, and this is my solution for a challenge created by Frontendmentor. Since I'm new to HTML and CSS, this project is a good opportunity to practice them. The main challenge of this project is to build out this QR code component and get it look as close to the design as possible. The users should be able to view the optimal layout depending on their device's screen size. Built with
Hey so If you want to make your websites responsive you'll want to utilize Media Queries
Do some research on media queries and then you'll want to start with a mobile first approach when building a website. It is much easier to build the mobile site and then add media queries for tablet and desktop sizes. Take a look at some of my projects source code for some examples.
As for the tool you can use the browser's built in dev tools, it will allow you to see what your website will look like at various screen sizes
Hey congrats on completing the project! Some advice
Ensure your body takes the entirety of the viewport. I suggest setting the min-height to 100vh
I assume the margin 600px on the .header class was for centering the component. A better approach would be using display flex on the body and justify-content and align-items to center.
You used an h3 for the header and then an h5 for the next heading. It is best practice to move in increments of 1, so go from h3 -> h4 -> h5.
It is best practice to use landmark elements, so for the div with the class header. Try using main or section instead. You can read more about landmark elements here Here
Here is an example, also remove the margin from the .header class
body{
background-color: hsl(217, 54%, 11%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.header{
background-color: hsl(216, 50%, 16%);
width: fit-content;
padding: 20px;
border-radius: 20px;
}
I had some trouble with floating elements with this one. It caused some weird overflow issues, but setting overflow to auto seems to have fixed it.
Hey congrats on completing this component!
One thing you might want to look into is making this component responsive, if you check devtools you can see that the design isn't holding up on smaller device screens. Also the component size is too big for desktop screens as well.
Happy coding, good luck!
