Portfolio Review Notes

[thebearingedge]

Hi Mike, here are some notes for your anime-watchers project. Be sure to re-read the CSS Guide first.

https://lfz-lms.herokuapp.com/code-guides/Learning-Fuze/curriculum/effective-css

• [x] Fix logo dimensions.
• [x] Fix header thickness.
• [x] Make form control / button fonts larger and consistent
• [x] Fix select box text color
• [x] Add a short explanation of how to use the app
• [x] Make purpose of Genre select control more obvious
• [x] Add more descriptive wording to buttons
• [x] Fix button alignment
• [x] Use more screen space for content in anime description view
• [x] indicate successful save to the user
• [x] disallow duplicates in watch list
• [x] use a clearer delete icon
• [x] use more screen space for content in the watchlist view
• [x] make the Anime Watchers navbar item take you to the home page when clicked
• [x] fix alignment of art/title in watchlist view
• [x] make sure that button/select line up on mobile

[thebearingedge]

The dimensions of your logo are kinda weird. You should make it a proper circle. Avoid relative length units except for column widths. This is covered in the effective css guide.

[thebearingedge]

Your header thickness changes with the viewport. It should stay one thickness.

[thebearingedge]

These form controls don't have the same font size.

[thebearingedge]

Your select box text shouldn't be white, it's relatively hard to read.

[thebearingedge]

You should add a short sentence or two explaining what to do. It's not obvious what the user should do.

[thebearingedge]

It would be helpful if this select box had a label or the default said "Choose Genre" instead of just "Genre".

[thebearingedge]

One of these buttons says "save me" and the other says "click me" but it's not clear what "click me" does just by looking at it.

[thebearingedge]

These buttons are not properly aligned

[thebearingedge]

This page content is really small. The text and image should be bigger to use more screen real estate.

[thebearingedge]

it's not clear what is happening when i click this button. it would be good to show some kind of confirmation (maybe an icon appears) when the user successfully saves something

https://user-images.githubusercontent.com/7432943/137371761-1d3e944a-bcb2-4170-b7b1-d710184fefef.mp4

[thebearingedge]

It's possible to add the same anime over and over.

[thebearingedge]

It's not obvious that this is how you delete things from your list. I recommend a font awesome icon instead

[thebearingedge]

These should be much bigger. on mobile i recommend showing them all in one vertical list. (see css-responsive-layout exercise)

[thebearingedge]

I thought that "Anime Watchers" would take me back to the home screen, because it has a pointer cursor, but clicking on it doesn't do anything.

[thebearingedge]

this alignment looks random. I recommend absolutely positioning the delete icon in the upper-right corner of the cover art so that your cover art and title can be centered above one another.

[thebearingedge]

On mobile, these buttons don't line up