@proabreSubmitted over 1 year ago
sup ! guys ! let me see what i miss here .drop any of your feedbacks.
Omar
@omar-csdevAll comments
- @omar-csdevPosted over 1 year ago
Hi, you are missing input validation upon submission. Try clicking on the button before typing a valid email in and you'll see what I mean. They also require you to show an error state for the user. Check the design images provided by frontendmentor.
Also on smaller screen sizes you can scroll and see the confirmation message.
Marked as helpful0 - @0xabdulkhaliqSubmitted over 1 year ago
πΎ Hello, Frontend Mentor Community,
This is my solution for the News Homepage.
- Scored
97%on Google Pagespeed Insights! π€© - Changed some of the font color's intentionally due to it's bad contrast which may affect accessibility π π»ββοΈ
- Custom navbar w/ scroll-in & scroll-out animation π₯
- Solution with
99.9%Percent Accuracy π― - Accessible hamburger menu w/ ES6 π
- Minified the
cssfiles to improve site performance π - Used
Prettiercode formatter to ensure unified code format βοΈ - Layout was built responsive via mobile first workflow approach π²
- Had a lots of fun while building this challenge ! π€
- Feel free to leave any feedback and help me to improve my solution π‘
.
π¨βπ¬ Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks
Ill be happy to hear any feedback and advice !
@omar-csdevPosted over 1 year agohi, I noticed that there are repsonsive issues on larger screens. Mainly the bottom half of the screen on full width 24 inch monitors.
2 - Scored
- @Haiko-ESubmitted over 1 year ago@omar-csdevPosted over 1 year ago
Hi, small tip: after submiting an invalid email you get an error hint which is good, but when you go ahead and try inputting a new email, the error hint stays there. If I didn't manage to make it clear, you can check out my submission on my profile from yesterday. Other than that looks good!
Marked as helpful1 - @CuriousFullStacksSubmitted over 1 year ago
any feedback or advice is appreciated! I had a lot of fun making this and I'm not sure if I could do anything better. I had some thoughts of possibly overusing rem units in this case?
@omar-csdevPosted over 1 year agoHi, it looks good on large screens but not so much on smaller devices. I advice you to check that out and make it responsive using @media queries. Also on smaller devices the image should change to the mobile image provided in the files. You can achieve this using the <picture> tag, look that up it's not difficult. Good luck!
Marked as helpful1 - @void-404Submitted over 1 year ago
- @tom-kelly9Submitted over 1 year ago
I think I used margins when I should have used padding which may be affecting the sizing when in mobile view. please advise. Any other advice welcome
@omar-csdevPosted over 1 year agoHi, it looks fine on desktop view. But when you resize it towards 375px, it becomes clogged up sometimes. Go in dev tools and resize the window, you will notice between 700px width and 376px width that it's not as intended.
0 - @Ivan-BrcinaSubmitted over 1 year ago
I'm only starting out with my first ever Frontend Mentor project.
I understand this beginner project isn't perfect due to issues with padding, font sizes and font weights, to name a few that I can see.
Any general tips about best practices for a complete beginner which can be directly applied to my project would be very useful.
@omar-csdevPosted over 1 year agoVery minor thing that I tend to notice: you can adjust the font size or the width of the card to match which words are at which line. What I mean is if you look at your version and see the last line you can see two words, while the solution shows three words.
Apart from that, code seems good to me :)
Marked as helpful0
