@zeynabmvsSubmitted 3 months ago
What specific areas of your project would you like help with?
I can navigate through form using tab key, but since I styled the radio buttons they get skipped, It would be helpful if anyone has a solution for this.
Amjad Shadid
@amjadsh97All comments
- @TedJenklerSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
What I’m Most Proud Of I’m most proud of the final result of the key-controlled calculator, which features smooth animations and engaging hover effects. The combination of accessibility and visual appeal makes the app both functional and aesthetically pleasing.
What I Would Do Differently Next Time Next time, I want to explore creating a 3D version of the calculator using Three.js to add a unique and interactive dimension to the user experience.
What challenges did you encounter, and how did you overcome them?What Challenges Did You Encounter, and How Did You Overcome Them?
I encountered some small TypeScript challenges, which were quickly resolved with further research and debugging. This project served as a refreshing break from my larger project, where I had been heavily focused on SCSS. It provided a valuable opportunity to practice TypeScript and enjoy a change of pace.
What specific areas of your project would you like help with?Anything really, but I don't think this one has any improvements; however, I could be wrong.
@amjadsh97Posted 3 months agoVery nice job!
I think if you add this code to this element (".result-value") the app will not grow and shrink when you change the value.
.result-value { min-width: 100px; text-align: center; }1 - @Adesmith001Submitted 3 months ago
- @O-Julia-OSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Tried to use methodology BEM. Tried not to repeat the same line of code. I'm wondering how to improve the responsiveness of the site.
What challenges did you encounter, and how did you overcome them?Challenge with background, i didn't find the correct way to place it. So I still looking for the way to solve it.
@amjadsh97Posted 4 months agogood work! about background you can add this to main element: main { background: url(./images/bg-pattern-card.svg) no-repeat; min-height: 100vh; background-size: cover; background-position: center; }
1 - @O-Julia-OSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of doing readable and understandable code. I used BEM Methodology for naming block.
What challenges did you encounter, and how did you overcome them?Small challenge was with margins in flexbox block_subscription. I delete them and used flex-grow.
What specific areas of your project would you like help with?Did I use BEM correctly? If no, what should I change? How about responsiveness? Does it readable for you? If no, please, share you opinion!
Any feedbacks are important! :)
@amjadsh97Posted 4 months agoHey Yuliya, Great work! I would like to comment on css.
you can wrap .card__text, .card-wrapper__subscription and .card-footer with another element and then add padding 3rem instead of add margin(left and right) for each element.
0 - @O-Julia-OSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Finally, I placed the image with faces on the page similarly, as shown in the design.
What challenges did you encounter, and how did you overcome them?Challenges related to layouts, flexboxes, and grids. Difficulties in understanding the best names for blocks and elements.
What specific areas of your project would you like help with?Hi everyone ✋
Feedback on my website's layout and suggestions for improvement
I would appreciate your feedback on both its layout and the usage of HTML tags. I'm particularly interested in whether I've used the correct tags for structuring content and any suggestions for improving the layout.
What a better way to put the circle with number
How better to place the image with faces
I used a div block and css background-image for that, but I'm interested in knowing if there is a better way to place it on a webpage.
Here is a snippet of the code I'm using:
HTML:
CSS:
.image_faces { background-image: url("./assets/tablet/image-hero.png"); width: 100%; height: 200px; background-size: 120%; background-repeat: no-repeat; background-position: top center; }Please help with naming blocks and elements in HTML.
Thanks a lot in advance:) Any feedback is important :)
@amjadsh97Posted 4 months agovery excellent work!!
*small notes:
1- I think you can use button element instead of this code. because button element is semantic. so it will be accessible.
<div class="button button-cyan" role="button"> <a href="#">Download <span>v1.3</span></a> </div> <button>Download <span>v1.3</span></button>2- when you add flex to element by default it take flex-direction:row, so there is no need to add it. .wrapper { display: flex; flex-direction: row;}
3- please add alternative text to img elements to make it more accessible element .
1 - @grgrnkooSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This time I made half of the validation in Vanilla JS, I'm sure that it is possible to do with react only, but I couldn't figure out how to do it on form Submit, only on input change
Also, it became a bit messy cause I had to add a few divs in the process, but I adjusted everything to work properly, so it's 100% valid
It is not my last form in React, so I decided to keep this variant
What challenges did you encounter, and how did you overcome them?Adding divs and figuring out how to debug it. Everything else was going well
What specific areas of your project would you like help with?I would love to receive any reviews from the amazing Frontend Mentor community.
Happy coding everyone!
- @RDifaultSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I've made this project to be slightly differ from the given design. One of the noticable changes is that in the original design, the flags are supposed to be shown fully in the card from edge to edge. But in my web, there are a wrapper for the country flags. This is done to respect each flag's aspect ratio, and to make it differ from another country's flag if there are countries with similar flags like Indonesia and Monaco.
But most importantly, i'm proud to have finished this project to deepen my knowledge in API calls, using React hooks, especially useContext, and routing using React-router. I've also learned how to filter and implement search bar in this project
What specific areas of your project would you like help with?I'm open to any critics and advice. Thank you
@amjadsh97Posted 4 months agogood job! I suggested to add those rules to the img tag for flag. img { width: 100%; height: 100%; object-fit: cover; }
1 - @TheAashaySubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Proud that made it in less time than I estimated and I'll arrange the CSS properties properly while using comments to understand the workflow better.
What challenges did you encounter, and how did you overcome them?Encountered challenges while spacing elements, developer tools from browser were helpful for seeing where paddings and margins are currently used and when to add or remove them.
What specific areas of your project would you like help with?I'll revise the sizes of the content a while later, so do not need any help with it.
- @AnCialSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
"Do or Do not, there is no try"
What challenges did you encounter, and how did you overcome them?"A heavy sword is heavier than a pen"
What specific areas of your project would you like help with?"If you put Math.random()... it puts out a random number"
@amjadsh97Posted 4 months agogood job! I suggested you to increase the the font size for text according to the design. it will be more better!
1 - @Ricardo-TeslaSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I was able to finish this Component in less time. I was able to integrate the responsiveness of the page to all devices.
What challenges did you encounter, and how did you overcome them?Redundancy in responsiveness of the page
What specific areas of your project would you like help with?Code review and any other review
- @Rashid12356154Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I learn html css in 2 months this is my 2nd project please comment me how look
