Stefan Bojkovski• 580
@xStephx
Submitted
collins-ai
@collins-ai
All comments
- collins-ai• 130
@collins-ai
Posted
Yoo this is awesome. The solution looks exactly like the original design and the JavaScript reaction is perfect. Good job 👍
0 - Adriano• 36,730
@AdrianoEscarabote
Submitted
collins-ai• 130@collins-ai
Posted
Very nice work bro, the mobile responsiveness and JavaScript interaction are amazing. Keep up the good work.
0 - Farel Ganlaky• 210
@Farelart
Submitted
collins-ai• 130@collins-ai
Posted
Hello Farel, the html and css code on your github looks kind of ok, tho i saw two html and css files which I don't understand why. I couldn't see the design on your live site, it contained just a bunch of texts. You can look it up yourself and let me know if i misunderstood your design.
0 - Blaze• 80
@PaulAdetomiwa
Submitted
What are you most proud of, and what would you do differently next time?
I would like to use pre-processors in my styling next time. I am not very good at it yet, so I'd like to use them when I revisit this project.
What challenges did you encounter, and how did you overcome them?
The layout kept breaking down whenever the webpage is resized smaller, so I had to use a bunch of media queries at strategic screen widths.
collins-ai• 130@collins-ai
Posted
congratulations on your solution. The outlook is ok but your code doesn't contain semantic html like header and footer.
0 - Allan Sancley• 100
@AllanSancley
Submitted
collins-ai• 130@collins-ai
Posted
Congratulations on your solution, the solution is looking almost like the original design. Semantic html like header and footer are present in your code which is very nice. The accessibility of the solution is also very good. Concerning the layout it looks ok in different screen sizes but in smaller laptops it doesn't fit properly.
0 - Ye-Won Seo• 80
@yaywonah
Submitted
What are you most proud of, and what would you do differently next time?
I learned three to four new things with this project: styling and using the hr, table, and marker tags for my list. I would probably try and use an alternative to hr when it comes to the line breaks in the project, just to see if there's a way that's simpler and neater. I was pretty proud for buckling down and coding most of this in one sitting, except when I got to the table portion.
What challenges did you encounter, and how did you overcome them?
I didn't know how to make the numeral notation in the list section a different color, but I managed to figure it out using markers. I also was confused on how to set up the nutrition information at the end, but I eventually chose to use a table.
What specific areas of your project would you like help with?
I did choose to use to emulate the line breaks in the design, but I'm curious to see if there's a better or neater way to accomplish that with another kind of CSS. I'd also like to know if I used the table html correctly for the nutrition information section.
collins-ai• 130@collins-ai
Posted
Congratulations on your solution. Semantic HTML is included in your work which is good. I found it easy to access your live site for review and it was responsive on a mobile device good job. Although there's a little difference between your solution and the original design, I believe you can do better when using the figma application to get the accurate design details
0 - collins-ai• 130
@collins-ai
Posted
Congratulations on your result. I reviewed your code and site and they were look good. You made use of semantic html elements which is good. The site is easy to access and very responsive, looking nice accross various screen sizes.
Marked as helpful
1 - collins-ai• 130
@collins-ai
Posted
Hello, congratulations on your solution. Based on your solution, your code doesn't contain semantic html elements. Adding semantic html like header, section and footer makes your code more understandable by the browser. Concerning responsiveness, make use of media query to make your web page look good accross different screen sizes.
0 What are you most proud of, and what would you do differently next time?
Made it using the default CSS Flow Layout
What challenges did you encounter, and how did you overcome them?
Making the page responsive was the most challenging thing in this exercise, it turns out the problem arose because I gave a fixed width to my container without including max-width to make it responsive
What specific areas of your project would you like help with?
Responsive website
collins-ai• 130@collins-ai
Posted
Great work on your design outlook. I believe you got the correct design details from figma. Semantic html elements are absent in your code, instead of using much divs try using semantic elements like header, section and footer. Concerning responsiveness, media query is the best solution i can suggest to you. Look up media query from "w3schools.com" under their css tutorial and you'll be good to go. Your solution looks almost exactly like the original design nice work.
0- dominic298• 50
@dominic298
Submitted
collins-ai• 130@collins-ai
Posted
You did a very nice job especially in the design outlook but there's a little problem. Your work does not contain semantic HTML elements like header and footer, you also used a paragraph in place of heading. Using media query or bootstrap will help make your design responsive and appear nice on different screen sizes. yours was ok on large screen but not fitting on smaller screen. The difference between your solution and the design was not too much, i recommend using figma to get appropriate design details.
0 - glennbuen• 10
@glennbuen
Submitted
collins-ai• 130@collins-ai
Posted
.Your solution does not include semantic HTML. Add semantic HTML to your next challenge and you'll be just fine. .The solution is very accessible. .The layout is not very responsive, it doesn't properly fit in different screen sizes. Try making your next project responsive. .Improve your HTML and CSS code structure and readability. Add proper spacing and indentation. .Your solution differs from the design in spacing and font styling. Try working with the figma application for more accurate design details.
Marked as helpful
0
