@KewaunC
Just started exploring this awesome world of frontend web development and trying to become better at it every day. If you have any suggestions or any work or if you want to collaborate in any project, don't hesitate to reach out.
I’m currently learning...Currently learning Javascript (AGAIN! for the 3rd time). But this time I will not be stuck in tutorial hell and will become better at it.
Latest solutions
Responsive Dictionary App
#reactSubmitted 8 months agoI want some feedback on how to add form validation in React because it is something that I have always struggled with. That's why you will see that I added an alert popup instead of proper form validation in this solution. Also additionally, if you guys can give some feedback on how to improve the code quality and efficiency of the current code that I have written that would be helpful. And of course, if you have some additional feedback other than this which would help me further advance my existing knowledge of React and overall frontend technology that would be helpful too. Lastly, a huge thank you to everyone who will take a few minutes out of their precious time and write their feedback here. You guys are great and I appreciate your help, perspective & feedback.
A Responsive Frontend-Quiz-App built with React and Tailwind
#react#tailwind-cssSubmitted 12 months agoExperienced React developers, I’d love your insights on how I can improve the code quality of this project. Your valuable suggestions would be greatly appreciated. Additionally, if you could provide some resources to help me enhance my understanding of React concepts, that would be extremely helpful. Thank you!
Latest comments
- @Aayush895
The only suggestion that I can give you is to make your website responsive for all devices. Your website is working absolutely fine for mobile and desktop but I think you can make your website responsive to tablets as well. I mean to say that for tablets your component is looking a bit congested. You can always increase the width of your overall component for tablets. Other than that your website is great brother.
Marked as helpful - @blck-zed@Aayush895
I think that your image is not loading properly. If I am not wrong then just doing this should be sufficient to load the image:
<img src="/image-qr-code.png" alt="an image of a qr code" />Hope this helps to correct the mistake. Happy Coding!
Marked as helpful - @raresmanta@Aayush895
Brother the reason you weren't able to center your entire component using flex is because you haven't set the 'main' element to a height of 100vh. The reason why you have to set the height of the main element as 100vh is that the align-items:center property in flex center the element relative to the specified height of the parent element. This means your result-summary component will center itself vertically relative to whatever the height is for the main component. Second of all create a div inside which you put the section and the summary component together. So the code should look something like this: HTML portion:
<main> <div id="result-summary-component"> <section>...Code for this portion...</section> <div id="summary-component>...Code for this portion...</div> <div/> <main>CSS portion:
main { height: 100vh; display: flex; align-items: center; justify-content: center; }The above code should center your entire result component to the center of the screen. Another suggestion would be that try to make your component responsive for different devices using the media queries in CSS. Let me know if the above snippet helps or not. Happy Coding!
Marked as helpful - @AlexMdz5620@Aayush895
I am not an expert but am also learning about front-end web development so consider this only my opinion.
1.) My first opinion would be to increase the overall width of the component as it seems to be a bit congested and small. 2.) My second opinion would be to increase the padding a bit for the summary component from left and right. 3.) My final opinion would be to add a hover state to the continue button.
Marked as helpful
