This is my 2nd challenge I've completed and I really wanted to test myself with a intermediate challange and I'm proud with what I came up with.
I have to give credit where credit is do and Coder Coder help me with getting a idea on how to make the hero section responsive in this Coder Coder
If anyone has any advice on how I could improve the design or make it cleaner I would really appreciate it.
The webpage looks perfect and like the way you have used animations on your mobile menu activation. The only pointer I can give you is that the webpage scrolls horizontally due to the large hero image, if you could change overflow to none it would be much better. Overall a very GOOD JOB indeed!!
I'm human, so I'm imperfect by nature :)
Here is my proposal for this challenge. Don't hesitate to give me your feedback on my mistakes, so that I can improve.
Thanks in advance.
The overall webpage looks goods on all screen sizes. Good Job!! I would like to point out that the font hasn't loaded so you can fix that, The sizes of the font don't match the design and its sizes are not consistent, for example, the paragraphs and footer links should be of the same size but they are not. The buttons both say the same thing instead of "learn more". The Logo should be bolder than what you have used and the method you have used to open the menu in the mobile view is not a good one. I see this is your first full-page challenge so you not be discouraged by changes suggested to your code but see this as an opportunity to grow as a dev.
You can read about typography [here] (https://madebyshape.co.uk/web-design-blog/heres-why-typography-is-so-important-for-your-website) and your mobile menu can be fixed with the method mentioned [here] (https://css-tricks.com/responsive-menu-concepts)
The mobile view is perfectly done, no complaints there, The only problem I noticed apart from the one mentioned above is the form is positioned relative for reasons I couldn't understand, if possible explain it to me by replying to this comment. I also appreciate the fact that you have used visibility as a toggle value to show errors and nice job on the scroll bar, it is a nice touch. One minor design issue is that your box is a little smaller in dimensions to design so that would come with practice. GOOD JOB and KEEP IT UP!!!
I'm so proud to complete my first Guru challenge ! 🎉 6 months ago I could hardly finish a Newbie project but thanks to FME and his amazing community here I am !
It was pretty challenging and once again I find myself not being very DRY friendly, but it's getting better. I plan to finish the form validation later as I want to focus on other stuff.
Also, I found out that the website renders well on Chrome/Edge but is totally broken in Firefox. For example display: grid isn't working properly, so I'm wondering what is the problem ? I'll try to fix it, but now I get why browser compatibility is a pain haha.
Lastly, do you know a good way to preload images ? On loading some images take time to load and thus worsen the user experience.
Good Work!! The website looks amazing, great to see your progress. I really loved the hover effects on project images and the scroll effect on the phone was also a nice touch. The only feedback I may provide is that the standard react favicon could be changed to the custom website icon. For preloading the images and other data you can use any lazy loading npm library but if you need it only for images I would prefer react-preload-image, as I have used it the most for lazy loading and animating images. You can read about it here -> https://www.npmjs.com/package/react-preload-image
This is a very well-made, awesome project! The best part about the project is the light them to dark theme conversion, it is easy on the eyes and pretty smooth. You took out the time to have an empty list component so the list would never remain empty, that's a good touch. Nice use of the react-dnd library. My only feedback is that when you complete a task in the ALL tab you get a strike-through animation but doing the same in the ACTIVE tab removes the item very abruptly. Overall a GREAT project! Keep up the good work.
I'm pretty happy with my solution, although I've got the feeling the media queries could be simplified.
Any feedback is welcome :)
P.S.: My initrial try was using CSS grid for the main layout, but I wasn't able to get the header background image use the full width (larger than the grid childs width). Does anyone have an idea how this could be done?
The website looks awesome and has a very well-written codebase. My only pointer would be to increase the font height for headers only as they are a bit smaller than the ones in the design. Keep up the GOOD WORK!!
Now to answer your question you can create a wrapper class and make it the grid container and use the original header to add the background property. You can read more about it here -> https://stackoverflow.com/questions/21127424/extending-background-color-of-div-in-grid-system
This is a good project! Keep up the hustle. I would like to point out that the custom font has not been used but it can be fixed by adding it to the index file or importing it into one of the CSS files. The CTA button which is should be on the single line and can be fixed by using nbsp. Overall great work but can be worked upon!!
This is a working demo of a full stack invoice app with all the required CRUD functionalities present.
I used MERN to build this full stack application, but I didn't implement any private routes or user settings so please refrain from inserting any personal or sensitive data as everyone has access to one shared database.
Any feedback is highly appreciated !
Your App looks awesome!! Good Work sir! I absolutely love the light and dark theme you have implemented and how you switch between them. There are two things I would like you to look at
In the new invoice form top parts of some text fields are getting flattened due to line-height.
Please add some spacing between the due date and the price.
And as an improvement, you can add a Modal or confirmation message that the new invoice has been added or when something is to be deleted.
Overall A Very Solid Project!! Keep up the work.
The grid came out very well. I like that you have considered all screen sizes only feedback would be to reduce the height of the cards so that it would be pixel perfect with the design since the width is actually pixel perfect. No other pointer you have hit this one out of the park.
This design looks very impressive, keep up the good work!! I can see that you have considered using multiple breakpoints to enhance the design but I saw that the cards overlapped in 1024px width which is a standard screen size so some work is needed. Apart from that, I would love to see the spacing between the images and the words reduces since it would resemble the design more closely. GOOD JOB!!
I appreciate the fact that you have put in a lot of effort and the webpage looks good. You did a very good job. The only feedback I may provide is in 4k screens your elements are not centered properly. To recreate the view go to inspect option in chrome and select the max size on the grey bar provided over your webpage.