P
@taceseptSubmitted 17 days ago
percydocomo
@percydocomoAll comments
- @percydocomoPosted 13 days ago
Your solution used semantic HTML elements to define the layout and applied aria attributes to make the whole page more accessible. Great!
You disallow the body from scrolling when the navigation is displayed which I think is a better solution than having it scrollable. Thanks for the idea!
The solution looks pretty similar to the design. Good job!
0 - P@JairRaidSubmitted about 1 month ago@percydocomoPosted about 1 month ago
The layout looks good on different range of screen sizes and almost identical from the design. Just that the hover and focus states of the inputs are missing. The page is keyboard accessible, included labels with inputs and used fieldset and legend to group related fields. May be you can add the 'required' attribute to inputs that are required or using ARIA attributes for errors and instructions. You used the trim() function in your JavaScript which reminds me that I should have used it too! Thanks! All the error display functions are doing the same thing, so I guess may be they can be simplified into a function that can be reused with different inputs?! Great Work!
Marked as helpful1 - @Dadv-a11ySubmitted about 2 months ago@percydocomoPosted about 2 months ago
The HTML is semantically well written and the code is readable. The page is keyboard accessible too. The card div from the original project is not centered vertically and horizontally so your solution's layout looks a bit different from it. The size of the card div is also different.
Marked as helpful0 - @saadsrabonSubmitted 7 months ago@percydocomoPosted about 2 months ago
Some minor stuffs like font size, color and line height being different from the original.
The color of the rating buttons and submit button are different when they are on hover and on focus.
Marked as helpful0 - @gauravk2203Submitted 3 months ago@percydocomoPosted 3 months ago
In mobile version, it needs some margin between the tip total div and the container div. There are some different between your active state effects and the original. You're also missing the red border and error message when the number of people is set to zero. Most importantly, your app calculates a tip total when it should be a tip amount per person. Whereas, the total amount per person becomes the tip amount per person which is completely different from the project.
Marked as helpful0 - @hmonster013Submitted 3 months ago@percydocomoPosted 3 months ago
The code is well-structured and readable. Just that the font size and and font weight are a bit different from the original design. The active state effects are also different. The alignment of the buttons and the content of the activity cards are also different from the original mobile version. Other than that, the JavaScript works fine, the CSS responsive designs are great!
0 - P@SaeedAbakahSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Im proud of being able to write the validation without a third-party code. I'm still learning javascript so will hopefully refactor that code in the not so far future
What challenges did you encounter, and how did you overcome them?desktop svg fill wouldn't show when I toggle the display property for the desktop svg and mobile svg. I haven't found a solution yet but will hopefully do soon
What specific areas of your project would you like help with?desktop svg display
@percydocomoPosted 4 months agoHow about using <img> element and just provide the source address with the desktop/mobile pictures?
0 - P@MattJM1007Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I finished this project faster than previous ones. It felt easier than past projects which makes me feel like I'm getting better!
Next time I might try other ways to position the social icons next to the button. But it still works!
What challenges did you encounter, and how did you overcome them?Did not know how to make the little triangle part under the social bar. Had to search for it. Otherwise everything generally went well.
What specific areas of your project would you like help with?Any feedback on the semantics or anything I can improve in html/css/js :)
@percydocomoPosted 4 months agoI also had to do a little research on the 'triangle' part of the social media section. My solution is similar to yours and your result looks great!
Similarly, I also used 'toggle' in the JavaScript section. I guess this is one of the simpler solutions for the project.
The overall design is very close to the original. Great work!
1 - @ziedlahbibSubmitted 8 months ago@percydocomoPosted 8 months ago
The layouts on different screen sizes are correct. Just that some testimonials and their names are mixed up.
The size of each card is slightly different from the original. Fixing the margins and paddings might help?0 - @ziedlahbibSubmitted 8 months ago
- P@HekimianzSubmitted 8 months ago@percydocomoPosted 8 months ago
The layout looks good on different screen sizes and yet the code is concise and simple.
1 - @Abdulazeez-20Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
Just
What challenges did you encounter, and how did you overcome them?Do
What specific areas of your project would you like help with?It
@percydocomoPosted 11 months agoI can't view your code somehow, so I'm not going to comment on that. The heading's font weight may be a bit different as well as the size.
The layout is basically right but just a little bit different in size from the original design. Good work!0 - @DuloeWSubmitted 11 months ago@percydocomoPosted 11 months ago
The font weight is a bit different from the original. The design guide listed 400, 600 and 700, may be you can try those weights. The unordered list does not include any anchor tags, may be try adding them so to make it more like a link list. Other than that, the solution looks pretty!
0 - @Enes-hackerSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
I learned a css animation - box-shadow hover effect, used semantic tag
What challenges did you encounter, and how did you overcome them?box-shadow hover effect was a bit tricky for me and the spacing between paragraps and HTM & CSS title, I used margin-top I hope it is a best practice
What specific areas of your project would you like help with?I am welcome to any advice and constructive criticism from fellow developers regarding my final project
@percydocomoPosted 11 months agoyour design is almost identical to the solution! the code is readable to me even I'm beginner myself.
Marked as helpful0 - @thetinyelephant85Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of completing the project and having the courage to share it with others for the first time. However, reflecting on it, I would definitely improve the organization of the CSS structure and selectors for better clarity and maintainability in the future.
What challenges did you encounter, and how did you overcome them?Throughout the process, I encountered challenges such as spacing issues within images, which I resolved by remembering to declare "display: block". Additionally, I initially struggled with flexbox due to a missing "flex-direction" property, which I quickly corrected.
What specific areas of your project would you like help with?Moving forward, for the next iteration of my project, I would appreciate assistance with implementing CSS Grid and delving into learning Sass and Tailwind CSS to enhance my styling capabilities further.
@percydocomoPosted 11 months agonice simple html structure and easy to read css file
0
