@alidhaini
matt2282
@matt2282All comments
- @matt2282
Good Job!
A few things to note: *On the nav bar on the mobile screen, you cannot exit the nav bar with the keyboard only. *The background color on the design is off-white, you used white on your solution *The ability to select the hyperlinks on the page with a keyboard is missing.("Hydrogen VS Electric cars", "Reviving Retro PCs", ect.) *If you resize the page to larger screen sizes the main image gets stretched out. You could either limit the size of the grid or make the grid scale up to larger screens.
- @samuel-adu@matt2282
Very Good!
It might be more intuitive to have the query type buttons work when you click anywhere in the box, and to also display a pointer cursor.
The consent checkbox is overlapping with the custom image when it is checked.
- @konradbaczyk@matt2282
I like the animation on the buttons and the accordion functions as expected.
A few bugs and issues I encountered:
- When on mobile and you expand the accordion all the way out on all four questions the top of the page can start to get cut off.
- Your page does not have any support for keyboard only navigation.
Marked as helpful - P@kaamiikWhat are you most proud of, and what would you do differently next time?
Using Astro for the first time in a project
What challenges did you encounter, and how did you overcome them?HTML structure and do this project based on making component was challenging
What specific areas of your project would you like help with?I think accessibility issues is the most important part and html structure is important too.
@matt2282Good job!
My understanding of accessibility is that your page needs to meet a few criteria: -alternate text on images: you provided an alt text on the image on the thank you page. -navigation with the tab key on the keyboard: the tab button does not select the rating buttons on the main page. -using the correct semantic html elements -ensuring a screen reader can read the content on the page and its convey its context.
There is more to it than this, but this is the basics I have learned so far.
- @ikethedevWhat are you most proud of, and what would you do differently next time?
I am proud that I wrote this more modular and I believe I did a solid job on naming function descriptive names
What challenges did you encounter, and how did you overcome them?A few challenges I faced was writing a function that updated the object in a way that wasn't overly complicated
What specific areas of your project would you like help with?Still working on pixel perfection!
@matt2282Good job on the overall layout of the app, but I would recommend giving this another shot. I can't seem to get your calculator to give any values or at least when it does output some values they are not correct.
The grey "bill" and "number of people" and "custom" divs do not go 100% of the container and they don't line up with everything else. The text in placeholder for Custom also isn't centered.
Some additional features you may consider adding: -border around the custom tip, bill, number of people and amount to know you have it selected. -when you press reset it may be preferential to set 0 as the placeholder and not have it be an actual zero. Additionally, having the reset unselect the selected tip value if you prefer. -error checking for zero and subsequent error message -allow only positive integers as the input -greying out the reset button after it is pressed.
- @antimatterhutWhat are you most proud of, and what would you do differently next time?
I am very proud of the fact that I could do this at all.
What challenges did you encounter, and how did you overcome them?I have never worked with async/await or promises or none of that. I didnt even know why they were used or what they did until now.
What specific areas of your project would you like help with?Optimally, I'd like to condense the js code into just 2 big functions instead of 6.
@matt2282Good job! I don't have much to say except that you forgot the hover state on the ellipsis. It is supposed to turn white when you hover over it.
Marked as helpful - @sankiss55What are you most proud of, and what would you do differently next time?
saber muy bien como manejar el estilo de display: grid en css y me gusto como lo diseñe sin dificultad
What challenges did you encounter, and how did you overcome them?creo que ninguno
What specific areas of your project would you like help with?en todo un poco estaria bien me ayudaria mucho
@matt2282You did the email validation and switching of the pages correctly and the general layout of the page is good, but it does have a lot of issues.
The email input has a cursor pointer when it should be a text selection pointer(this is default I believe). Desktop: -background color should be hsl(235, 18%, 26%)
- The padding on the right of the image gets messed up when you switch from mobile back to desktop.
- Missing a space on "Stay updated!"
- I'd recommend setting a fixed height/width for the outside container because things get weird when the container gets resized.
- Also recommend keep the image at a fixed size. -Could use a bit more padding especially on the left.
Mobile:
- The original design has the image at the very top of the page while your solution has it centered and the desktop background visible.
Success Page:
- Misspelled "subscribing!"
- The email should be the same as the email you entered in the box on the first page not ash@loremcompany.com every time.
- You forgot to make a mobile friendly version. It looks not right on mobile.
- @MatPawluk@matt2282
You swapped Kira and Jeanette.
The design is centered on the page whereas your solution is at the top of the page.
- @Ahmed-Bouhrira@matt2282
I'd recommend giving this another shot as most of the styling deviates from the original. The site is not responsive when you change the screen size to mobile and the cards start to overlap.
- @DipakMaharaWhat are you most proud of, and what would you do differently next time?
try simple things and dont jump directly to div tags.
What challenges did you encounter, and how did you overcome them?my friend give some pointer to work on
What specific areas of your project would you like help with?i thick my basic about html
@matt2282It is common practice to name your css file "style.css"
When you load a mobile page and then go back to the desktop page it was keeping the mobile image loaded instead of changing it back to desktop again. You can replicate this by zooming in all the way and zooming out. The only way I was able to fix this was using this method: <picture class="product-image"> <source srcset="images/image-product-desktop.jpg 600w" media="(min-width: 600px)" /> <source srcset="images/image-product-mobile.jpg 686w" media="(max-width: 599px)" /> <img src="images/image-product-mobile.jpg" alt="Product Image" /> </picture>
You could also use media query to do this but that is less efficient as it loads both images regardless of which device you are on.
Marked as helpful - P@Hekimianz@matt2282
Perfect! Being picky the only real issue I see is that the button is not centered on the share active mobile layout.
Marked as helpful - P@gajbos99What are you most proud of, and what would you do differently next time?
/
What specific areas of your project would you like help with?Feels like im not sure what is the best way how to size things.
@matt2282You forgot to implement the mobile layout.
The font color is not brown in the right side of the nutrition table. I just manually changed the style in the html like this.
<td style="color: hsl(14, 45%, 36%);"><b>20g</b></td>It helps to rem and em instead of pixel measurements especially for things like padding, font size, and border radius.
- @joaotfrodriguesWhat specific areas of your project would you like help with?
Always striving to improve HTML semantics, website performance, and accessibility. If you have any tips, please share them in a comment
@matt2282Your desktop version looks very good and exactly like the original. When viewing on mobile screens the layout becomes uncentered. Your 'reset.min.css' and 'sytles.css' files are all on one line making them hard to read in Gitub.
- @saehriWhat are you most proud of, and what would you do differently next time?
This project took me a while to finish, but I'm proud that I can finally finished it hehe. My guess is because I choose to do this projects when exam season is started. Because having to do a project like this in exam seasons probably not a good idea because it's divided my focus when I really need it the most for exam preps. Which thankfully now I learn from it, painfully. Moreover, I will pick better occasion next time, even though to be honest by me foolishly chose the worse occasion when starting this projects it's made me learn something, and I definitely not mad about it.
What challenges did you encounter, and how did you overcome them?The challenge that I encountered during the working of this project is time management, which is on my part, my fault. But, I learn that if I put like minimum 30 minutes on this project a day, I will finished it, so I did.
What specific areas of your project would you like help with?As for now, my design eye and creative mind is not develop fully so I do need a bit help on finding the mistake I did on the HTML Markups, CSS properties, and or maybe my writing skills.
@matt2282Good Job! You solution looks almost identical to the design. The hover feature is a nice touch.
- @DolbyTheSheep@matt2282
Good job! The box takes up the entire height on my laptop maybe specify a height that is a bit smaller than it is now. The font is different from the font in the style guide.
