ali Dhainy• 130
@alidhaini
Submitted
matt2282
@matt2282
All comments
- matt2282• 310
@matt2282
Posted
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.
0 - PSamuel Adu• 1,010
@samuel-adu
Submitted
matt2282• 310@matt2282
Posted
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.
0 - Konrad• 370
@konradbaczyk
Submitted
matt2282• 310@matt2282
Posted
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
0 - PKamran Kiani• 600
@kaamiik
Submitted
What 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.
matt2282• 310@matt2282
Posted
Good 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.
0 What 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!
matt2282• 310@matt2282
Posted
Good 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.
0- Bart Feesley• 220
@antimatterhut
Submitted
What 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.
matt2282• 310@matt2282
Posted
Good 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
1 - sankiss55• 200
@sankiss55
Submitted
What 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
matt2282• 310@matt2282
Posted
You 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 [email protected] every time.
- You forgot to make a mobile friendly version. It looks not right on mobile.
0 - Ahmed Bouhrira• 80
@Ahmed-Bouhrira
Submitted
matt2282• 310@matt2282
Posted
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.
0 - DipakMahara• 30
@DipakMahara
Submitted
What 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
matt2282• 310@matt2282
Posted
It 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
0 - PAram Hekimian• 410
@Hekimianz
Submitted
matt2282• 310@matt2282
Posted
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
1 What 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.
matt2282• 310@matt2282
Posted
You 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.
0
