I still need to practice a lot flex-box, and have the sizes adjust automatically depending on the available space. Any comments, tips or better ways to do it would be much appreciated (with explanation included haha).
Congratulations on completing this challenge.
Here are my few suggestions:
I saw that you have an accessibility report. It says that you should have at least 1 heading on your page.
I review your CSS file code and noticed that you are using absolute units like px. As a good practice, try to avoid using it because it can lead to unresponsive design. Try to search relative units such as rem, em, vh, vw etc.
In the design, add a little bit more padding to the card itself to become more match to the actual design.
That's it. I hope it helps. Happy coding!
Any feedback would be welcomed
Fantastic project Bradley!
I suggest minimizing the transition at the Home button. The max recommended length of animation or transition is 300ms.
Also, for the 1440px screen device, I think the invoice items should be in column order. Another is to try to lessen the time to open the add invoice sidebar.
Another is for the buttons, I think the radius of the corners is not enough to make it a smooth corner.
Lastly, for the sidebar icons such as the profile icon and dark theme icon, I think it is better to use the assets that are given in the starter files.
All in all. It is great man. Keep it up <3
There are definitely some things I could have set up better in my solution. I'm still quite proud of completing the challenge solo after a long hiatus without coding. Hope to update this soon, and sort the JS into modules
Hey Jon! Really well done!
I notice some issues:
First, so I test your calculator app, so the user can't type in the keyboard?
Second, I notice you also code in JavaScript for the hover effect, I think you can also do that in CSS. So, if the user changes the theme, you can use the classList attribute to toggle the classes for a certain theme.
Third, for the theme button, I think it is better to make the numbers clickable so that the user doesn't have to click on the toggle button. It is also for accessibility purposes, since you are using a button for the toggle's circle, you can use a <label> tag to point to a certain button so that the user can click the number.
During the development of this project, I encountered responsive design issues of the mobile app and the tablet app. I don't understand how to do it right, if anyone can tell me how it works, it would help me for next time, thanks.
Hey Brother. So I checked the preview of your site, and whenever I am shrinking down the site, the content is broken.
Since in this challenge, they also give the mobile design. Try to do it in a mobile-first approach.
So for your media queries, you are only using min-width and it makes you enable to have minimum changes when you are growing the page.
I also recommend you to think about what contents are together so you can use flex or grid to it depending on your approach.
I think the only reason why the design is broken is that you are using inconsistent media queries to it. I hope it helps, thanks <3
So, this one was a mixture of feelings, rsrs.
I would LOVE feedback on my media queries because I took a desktop-first approach and I REALLY struggled with the mobile layout. For this project I tried to go the extra mile in some aspects, and I used Webpack, SASS and Babel (as transpiler). It was really fun do set all these things up and have a more realistic idea of a real project, feedback on this setup would also be highly appreciated.
The active states didn`t specify anything to be done in case of a valid email, so I threw an alert message and changed the border of the form, just to provide a visual confirmation that the email was accepted.
Is there any other way I could`ve set the height? I had to hard code it because there was an annoying gap below the whole screen...
Anyway, thanks for taking the time to check my solution!
Hey. I check the preview of your site so the input field seems a little bit off at the right in my screen size, 1920x1080. I notice also when I shrink down the page, the contents' positions are also broken. I highly suggest avoiding using media queries a lot.
Your comments please
Hi Dusviry. Looks like the preview site is cannote be found. It gives a 404 error.
Try to check the link that you are uploaded in this project if it is totally hosted.
Hope this helps.
Any feedbacks or suggestions are welcome !
Hello Kev! <3
My suggestion is each item is a little bit squished. also, for the first item with the profile picture, i think the container below must be a little bit higher so that it looks like it is clipped to it.
I have never do this project but my first solution that I will come up with is using position: absolute;
just put the two containers inside a div and set a div (parent element) as a relative position, so that it is not relative to the body itself.
Also, the font size of the hours, weeks etc. is not bigger enough. The background of the body must be black.
I hope it helps. Keep learning brother <3
Got back on coding again while on vacation. Feel free to drop suggestions.
Hello Obhuri! Great work! <3
My suggestion is to have additional left and right padding. also for the gap of each element inside the card. All in all. It is great <3
First time using react-beautiful-dnd. Your feedback would be helpful, Feel free to point out any mistakes in my app or in my code.
Hello Luka. Great Work! <3
My suggestion is to have a confirmation modal when deleting a certain item.
I am still having trouble with being consistent with sizing, this attempt I started with the mobile responsive design first and it seemed great but as soon as I started to work on the desktop part it didn't come out how I wanted it to again. I am just stuck on how to properly measure and style my projects so they are looking good no matter the display width and height.
Hi Raul. I think you need to use flex for that also do not use other absolute units. try to use relative units for its responsiveness.
Also, you can use % for sizing the images like 100% etc.
Along with basic client side form validation this challenge tested my CSS skills. Totally enjoyed this one!
I'd really appreciate if you could answer the following:
What did I do wrong? What did I do right? How can I improve?
Thanks in advance :)
Happy coding & Merry Christmas :)
Great work! <3
Try to change the border of the input field and try to fit the arrow button to the input field so it makes it look like more attached to it. Also, the letter spacing of the main title seems a little bit wider. try to adjust it and the font-size of it on 1440px screen size.
All in all. it looks great <3
comments or suggestions are welcome
Great work! <3 I suggest to lessen the width of 'Fylo' container and try to add an additional padding to the right container. All in all it looks great <3
