Better5afeβ’ 850
@better5afe
Posted
Hi there!
Firstly, congrats on completing the project! π I hope you had a lot of fun while making it.
Please find some feedback from my side below:
- Font - it seems that you forgot to add the project's font. You can open its link directly through a README file with styling instructions.
- Layout - I noticed that you are using flexbox in your project, and you do it correctly. Try wrapping the entire app in a container (
div
or asection
tag are the most suited for it) and adding some flexbox to it, so that the app is centered on a desktop viewport. - Viewports - speaking of desktop and mobile viewport, the app is unfortunately not responsive. Try using media queries to implement layouts suited for different screen resolutions. My advice is to start from mobile viewport and then building your way up to the desktop resolution. When it comes to breakpoints, I recommend those specified in Bootstrap (CSS library) documentation. To check the layout on different screen sizes, you can switch through many devices using DevTools.
- Responsiveness - I noticed that you are using a lot of pixels to define paddings and margins. Try using more em and rem units. They are scalable and make the spacing more responsive to different screen sizes.
- Shorthand properties - instead of using multiple margin or padding properties for a single element, you can use a shorthand property, for example:
margin: 1em 2em
. Remember, that those values are read clockwise - top, right, bottom, left. If there are only two values as in my example, the first one stands for top & bottom and the second one for right & left margin values. - Alternative text - I agree that the star icon does not require a complicated alt text, however user's avatars should have more descriptive text, something like user's headshot, profile picture or user's avatar.
- Linking styles - inside your project, you are linking an external stylesheed and use a `` element. I would recommend moving the footer styles to the CSS file and not mix those two approaches.
- Comments - remember to delete unneccessary comments before deploying the app.
- Color variables - you assign color values to a variables inside a
:root
selector and then just use their names to specify the element's color. It keeps all of the colors in one place, makes them reusable and easy to change.
Overall, the project looks good and I can see that you spent a lot of time on it. Keep going!
Happy Coding! π π»
Marked as helpful
0
Bimme Audrey Zβ’ 100
@Bimme2audrey
Posted
Thank you π@better5afe
0