Bonus feature is missing because I didn't want to use any library in this project. Please let me know if there is any way to add drag and arrange feature using Vanilla JavaScript only. Feel free to post constructive feedbacks.
Hey, it looks great and works as expected. But in my browser, filter menu (All, Active, Completed) is not having proper margin.
give me some feedback pleas :) it's my first project and i need your opinion :)
Hey congrats for finishing your first challenge π You mistakenly typed "%" instead of "$" in pricing text. Fix thatπ
On very small screens smaller than 375px, the card starts shrinking and the content inside starts overflowing, how should I go about fixing that? Also, for the hover states the style guide doesn't specify the colors I should use, does it mean I have to just find out the colors myself?
You can just make the colour lighter in hover state. We are given hsl color values from frontendmentor. (h=hue, s=saturation, l=lightness) Decrease the "l" value a little and done :)
I see you are using "display: flex" on your component. To get proper height of image in "row-direction: column". You should insert image in HTML instead of applying "background-image" in CSS.
This simple work, to my surprise, took me several hours to complete and honestly speaking, most of it was achieved through trial-and-error method.
I'm just starting out and I'm a bit proud but I NEED HELP and suggestions so next time, i can build a simple task in record time and with lesser code.
It looks good. Just fix your button width and text alignment as suggested by Ahmed Faisal
Fun project :) Any comments you might have, I'll be happy to read and learn ;)
Wow. It looks perfect β€οΈ But there is a subtle suggestion (UI/UX) you shouldn't apply clicking animation on links ("Change" and "Cancel Order"). Animation on a button gives a visual haptic of clicking. But same effect on links is distracting in my opinion.
Any feedback on how I can Improve my implementation is welcome
Congratulations for finishing your project. οΏ½π Functionality works fine in your website.
But I noticed few things that you can try to fix.
When all items are expanded it overflows your main container. It would be better if you don't define a fixed height for the container.
Add some media queries to make it responsive
any feedback on styling improving or thing tools I could use to make life easier
Good Job! It works perfectly. I would like to suggest a small thing. Try to do something about the overflow of the output. Text goes outside if we enter a large input. (You can check my solution for reference. I used "word-break" property. If you can do something better please also let me know)
Adaptability problem in different browsers (Responsiveness), How to do to achieve this?
Congrats for finishing your project. π I would like to suggest you few things.
I guess you downloaded images from somewhere else. You can find all the required images in the project folder itself. (usually in .svg format, but can be used in "img" tag also. Explore more about svgs for more advanced use)
To make it responsive. You have to learn "Media Queries". Basically what it does is, set breakpoints for different sizes. So, you can apply different css for different sizes.
Happy Learning :)
The items are not hidden , but you just need to activate the animate I used sass language for design and AOS plugin for animate and , I am waiting for you feedback, good luck πββοΈπββοΈ
Slick animations π π But I noticed one thing. Images are streching when resizing the browser. Try to fix that.
huussshhh....finally... It took almost a week
Will be really glad to hear out from you guys . π€
You've done a great job! π€©π It looks perfect βοΈβοΈβοΈβοΈβοΈ
I have completed the challange but i have a samll problem that how can i change the position of background bubbles.... Any suggestion about that would be very helpfull.... Thanks in advance.....
Use "position:absolute" property on bubble svg. Then adjust their position accordingly.
Responsive Blogr Landing Page using FLEXBOX
