@G-Gakii
What specific areas of your project would you like help with?
- How can I change the color of icons on hover
- How can I improve performance
rosemutai
@rosemutaiAll comments
- @rosemutai
Good job working on the design. Please check the 'Start New Order' button as it is not working.
- @kaoutar-ouadihWhat are you most proud of, and what would you do differently next time?
I'm proud of completing this challenge!
What challenges did you encounter, and how did you overcome them?I struggled with deploying the project.
What specific areas of your project would you like help with?Anything that can help me improve.
@rosemutaiGreat work implementing the design
- @rosemutai@rosemutai
Hello Tesla_Ambassador. This was a good challenge, I also enjoyed working on it. Thanks for your feedback, will implement that. Happy Coding!
- P@nataliesmythWhat are you most proud of, and what would you do differently next time?
I'm proud of being able to put together without using any tutorials. I used MDN documentation but I can tell that my ability to think like a programmer and understand how to break certain problems down has improved significantly, and this project was was challenging but fun all the way through.
What challenges did you encounter, and how did you overcome them?I got confused when I realized I was building functionality for one input that I already created for another input, and refactoring my code to use the same functionality once took longer than I thought it would.
What specific areas of your project would you like help with?I always love feedback to improve my work, I'd love feedback on the layout of the app in between the mobile view and desktop view.
@rosemutaiGood work implementing the design. I have tried the live site and it's not working as expected. Please check
- @Risa2422@rosemutai
Time boxes are not displayed in the live site
- P@fsahinbas@rosemutai
Good work implementing the design. ✅Clear HTML Structure ✅Form Validation
Marked as helpful - @gmagnenatWhat are you most proud of, and what would you do differently next time?
I learned new attributes and experimental css rules such as the popover API and anchor-name. At the end I didn't use these but I did some experiment and I think it will be great for placements of popover when the browser support will be better.
I pushed the requirement a bit further by adding more interaction in javascript for :
- click => open share links
- click => close share links
- click outside of the button => close share links
- press escape key => close share links
I keep learning about accessibility testing.
- I learned about tools such as axe and wave.
- testing reflow, keyboard navigation and voice over
I wanted to use the popover attribute but faced some issue to style it respecting the design. After a while trying to find a way to use this attribute on mobile and desktop I decided to switch back to a classic div and JavaScript functions. I felt I needed to add a lot of markup to respect the figma design between mobile and desktop. The fact that the element is displayed in the top layer made it complicated to style it on mobile because the popover element isn't influenced by parent display or overflow properties.
What specific areas of your project would you like help with?Accessibility. I tried to do my best with svgs, links and keyboard navigation. I'm always open to suggestion for improvement in this area.
@rosemutaiGood job! Use semantic elements like <header>, <footer>, <section> to improve accessibility
- @canbld@rosemutai
Good job replicating the design and making it mobile responsive
- @iamkadibiaWhat are you most proud of, and what would you do differently next time?
In this challenge I was able to understand the power of grid and it's responsiveness
What specific areas of your project would you like help with?Having completed the challenge. I will like anyone reviewing this work to tell me how i can make it look better and also a simpler code or approach I can use. Thanks
@rosemutaiGood job: Use of semantic HTML ✅ Responsive design ✅ Well structured code To match the design provided, change the paragraphs color.
- P@josifermaodevWhat are you most proud of, and what would you do differently next time?
I am very proud to have managed to complete this challenge in its entirety.
What challenges did you encounter, and how did you overcome them?I had a little difficulty with the responsiveness but after a lot of research I managed to reach a good result, I believe!
What specific areas of your project would you like help with?I would like to receive any kind of feedback, any teaching is important!
@rosemutaiGood job using semantic HTML and creating a responsive page
- @Evgeniy-Hozyainov@rosemutai
Good work. I recommend you use a '<table></table>' tag instead of '<div></div>' to create the table.
Marked as helpful - @manzii07What are you most proud of, and what would you do differently next time?
I'm proud of successfully creating a clean, social link profile that closely matches the design. It was a great opportunity to practice my skills in semantic HTML and CSS Flexbox. Next time, I would like to explore adding some animations or links that actually lead ot somewhere when you click the buttons. Additionally, I would use a CSS preprocessor like Sass to streamline and organize my styles more efficiently.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was ensuring that this profile card looked good on all screen sizes. Initially, the layout didn't scale well between different devices. I overcame this by adopting a mobile-first workflow and using CSS Flexbox to create a flexible, centered layout. Additionally, I made extensive use of media queries to adjust the styling for various screen widths, ensuring a consistent and responsive design across all devices.
What specific areas of your project would you like help with?I think it was all good
@rosemutaiGood work! Please use semantic HTML to improve accessibility of your site.
- @TheBeyonder616What are you most proud of, and what would you do differently next time?
been able to create a responsive design without using mediaQ
What challenges did you encounter, and how did you overcome them?Using the figma design was difficult to navigate
What specific areas of your project would you like help with?figma
@rosemutaiUse of semantic HTML elements such as '<header>'. This is excellent as it enhances accessibility of your code.
- @joseneto0@rosemutai
Great work
