@jennawlin3Submitted 10 months ago
What specific areas of your project would you like help with?
If you see something that I could improve, please, tell me, I appreciate it, thank you!
Jorge
@f-avalosAll comments
- @Shanahan914Submitted 10 months agoWhat are you most proud of, and what would you do differently next time?
First Junior challenge completed. Learned a few things but no major issues. Not happy with the JS so I'll refactor that over the next week. I'm pretty sure it's not well-written but does work.
@f-avalosPosted 5 months agoEverything is very good, maybe change the color of the border and the padding
0 - @pierrehany1010Submitted 7 months ago
- @hyperavtrSubmitted 8 months ago
- @arsh-deSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I am proud able to create the website and make it work.
What challenges did you encounter, and how did you overcome them?Getting the right design was a little challenging.
What specific areas of your project would you like help with?I am tried using tailwind on this project, but it got to complicated to read and I had to change it in different places, can someone help me with that.
@f-avalosPosted 5 months agonice solution, but the site is not the exactly same at the preview, i guess because you try to use Tailwind.
0 - @jevcenkokozlovskaSubmitted 6 months ago@f-avalosPosted 6 months ago
maybe you could improve the responsive design, but overall it's very good.
0 - @m-maher97Submitted 6 months ago
- @CoolNight99Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I think I got the design pretty close to what was given.
What challenges did you encounter, and how did you overcome them?It was tricky to get the sizes of the grid items correct but then I remembered the grid-row and grid-column properties.
- @eros77scSubmitted 6 months agoWhat specific areas of your project would you like help with?
I had trouble centering the text after the main title. I was using Flexbox, and when I applied
max-widthto the text to create the line-break effect without using ``, the text was aligned to the left, as if it wasn’t following Flexbox behavior. Neithertext-alignnoralign-selfset tocenterworked. I usedmargin-inline-start, but I would like another solution.Any other tips about something I might be missing would be greatly appreciated!
@f-avalosPosted 6 months agoThe width of the cards is static, you could adjust it to fit the screen before it drops below 768px resolution, the rest is very good.
0 - @Fikerte-TSubmitted 6 months ago
- @gabrilovSubmitted 6 months ago
- @haloha1410Submitted 7 months ago@f-avalosPosted 6 months ago
Very good, maybe you could add some type of transition when selecting a button
0 - @Fikerte-TSubmitted 6 months ago
- @Manuel7070Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud to have successfully implemented the design to create a fully responsive QR code component. This project helped me sharpen my front-end development skills, particularly in using modern CSS techniques for layout and styling, as well as ensuring that the design adapts well across different screen sizes. I also effectively implemented accessibility features by keeping the text legible and ensuring the overall structure meets WCAG standards.
Next time, I would focus more on perfecting the alignment and spacing details to exactly match the design specifications. I’d also like to explore using CSS Grid for layout management rather than just Flexbox to see if it would offer a more precise way to handle alignment and responsiveness.
What challenges did you encounter, and how did you overcome them?Challenge 1: Centering and alignment issues One of the main challenges I faced was getting the text and elements to align exactly as shown in the design. Ensuring the design was pixel-perfect and responsive across different devices was a bit tricky. To overcome this, I spent time revisiting my CSS, experimenting with Flexbox properties, and using margin and padding adjustments to fine-tune the alignment. Testing across different screen sizes also helped me identify where adjustments were necessary.
Challenge 2: Ensuring responsiveness Another challenge was making sure the layout remained fully responsive while maintaining its design integrity. At first, the component didn’t scale well on smaller screen sizes. I resolved this by using media queries and setting flexible widths to ensure the design was fluid across various devices.
Challenge 3: Matching the design exactly Replicating the exact visual look from the design, especially with the spacing and font size, was more challenging than expected. I learned that even small differences in spacing or font-weight could drastically affect the final look. I overcame this by reviewing the design specifications more carefully and adjusting my CSS to reflect the correct value.
What specific areas of your project would you like help with?What specific areas of your project would you like help with?
-
Responsiveness and Cross-browser Compatibility: While the project works well on the devices I’ve tested, I’d appreciate feedback on how it behaves across a wider range of screen sizes and browsers. Specifically, any tips for optimizing responsiveness or cross-browser compatibility would be helpful.
-
Typography and Spacing: I'm seeking feedback on the accuracy of the typography and spacing compared to the original design. Any suggestions on how I can make the text alignment and spacing even more precise would be greatly appreciated.
-
CSS Structure and Best Practices: I'd love input on how I’ve structured my CSS. Are there any ways to optimize my CSS for better maintainability or performance? I’m also interested in learning if there are any best practices I missed.
-
Improving Code Readability: I’d appreciate any feedback on improving the readability of my code. Are there specific areas where my code could be refactored for clarity or efficiency?
-
Performance Optimization: Finally, I'd like guidance on any opportunities for performance optimization. Are there any areas where I could reduce unnecessary code or improve load times?
-
