@ccreusatSubmitted over 2 years ago
Any feedback is welcome !
Ollie
@ohermans1All comments
- @christopher-adolpheSubmitted over 2 years ago
Hello there!
This is my 1st challenge on Frontend Mentor and I really enjoyed it. I am pretty much satisfied with the final result.
Major challenge(s):
- The custom-styled select was a bit challenging. I used a list of radio button inputs to mimic the list of options and wired that with JavaScript to handle the events. While I this was a great opportunity to practice my JS skills, I still wonder if some of you have found a simpler approach for this feature.
Unsure of:
- When I validated the compiled css, I noticed that some of my sass variables went being output as well. I'm not sure if there is an issue with my breakpoint mixin or if it is because I recently switched from @import to @forward and @use in my
.scssfiles. I'd be grateful if you could point out what I'm doing wrong here. - The accessibility validation notified me of 3 contrast errors, I chose to ignore them and stick to the design. Would you have done same ?
Bonus features:
- The signup form shakes to display the invalid state and flips to display a success message when valid.
- I added some animations using GSAP and the ScrollTrigger plugin.
Your feedback would be much appreciated.
Thanks in advance. 🙏
@ohermans1Posted over 2 years agoHey Mate
Just want to say that this is awesome! I really like the shake on invalid for the form - I'm gonna give it an idea in a future project!
I'm looking forward to seeing what you do next!
Ollie
0 - @K4UNGSubmitted over 2 years ago
This was a very challenging and fun challenge. I learned a lot about more array methods and got to practice my state management skills. For the drag and drop feature, I couldn't do it for mobile touch. Other than that, I'm happy with what I got. I'd love to hear your feedbacks and suggestions on how I can improve further or implement the drag and drop feature with touch. Happy Coding!
@ohermans1Posted over 2 years agoWow this is awesome! You managed to get the fully functionality in! Well done!
1 - @dsaglam94Submitted over 2 years ago
Hello guys!
I continue my learning journey. I really liked the design of this project so I wanted to make it and put it in my portfolio. Added some personal touches.
I really love to hear your opinions and recommendations.
Happy coding y'all!
- @Ketema741Submitted over 2 years ago
my first project, please give me some feedback
@ohermans1Posted over 2 years agoWow! For a first project, you have done an awesome job!
The only minor issue I can see is the incorrect font and font alignment above the learn more buttons. Also, adding a little padding to these boxes would make the header text and paragraph text look a little closer to the original.
Where you have the classes .transform-brand, .standout etc, it may have been better to make one class, as the styling is the same across these? You could then just add a text-align right, a padding of about 3 rem and correct the font color and you'll be good to go!!
Anyway, great job overall! Looking forward to seeing your next project!
Marked as helpful0 - @catherineisonlineSubmitted over 2 years ago
Hello, Frontend Mentor community! This is my solution to the Sunnyside agency landing page.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
- @AbrosssSubmitted over 2 years ago
My biggest challenge here was that round underline in links and navigation bar on mobile:D The first time using javascript too.
@ohermans1Posted over 2 years agoGreat work on the JS! Very tidy for a first attempt.
Out of interest, is the white space around the page a design choice? I notice that it goes away for mobile view, but is there for desktop and the screenshot?
Nice job overall!
Ollie
1 - @mrobbins0422Submitted over 2 years ago
Had trouble scaling the entire component. Since I knew the text was fixed at 15px and a font-weight of 400, I boxed it in and scaled everything else to fit. Is there a better way? I am still having trouble geting my repository to show up as a github pages. Does anyone have any cheat sheets on the topic? Any feedback would be appreciated. I'm gonna go look and see how everyone else did it. :-)
@ohermans1Posted over 2 years agoHey Mark - Great work on this one!
One suggestion - I would take a look at using rem instead of px for all measurements. The rem unit means everything is linked to the root font size in your document (which is 16px), therefore 1rem = 16px.
Its a little tricky to explain, but if you set your root font-size to 62.5% - this will mean that every REM is 10px, so its easy to convert. A plus of this, is that if you use REM for every measurement, when you go to do your media queries, you can change the root font-size to a different % for different screen sizes to scale the entire project.
Sorry if my explanation is a little rough, but take a look into it :) https://www.aleksandrhovhannisyan.com/blog/respecting-font-size-preferences-rems-62-5-percent/ This blog might help!
Marked as helpful0 - @PhsesSubmitted over 2 years ago
I couldn't change the color of the logo in the footer and the color of icons in the hover state too. I change the images using JS for responsive design.
@ohermans1Posted over 2 years agoHey! Take a look at this for changing the SVG colours (in this case your footer logo).
https://codepen.io/sosuke/pen/Pjoqqp - basically you apply a filter to the SVG that changes the color. It works best if the SVG is black, so I usually first go into the SVG file and change this (you'll see the hex code in there with the current color.). The filter method works for hovers and everything.
Marked as helpful0 - @ohermans1Submitted over 2 years ago
I really enjoyed this project - it is my second using React, and involved a lot more props and other behind the scenes react then my last project to get the slider etc working. I also used SCSS as I much prefer it over standard CSS.
The initial app was created using create-react-app, and was built and added to github pages using gh-pages.
I am really happy with the end result, but of course, appreciate any feedback!
Est time: 4 hours | Total time: 6 hours
- @ZeroBl21Submitted over 2 years ago
I really don't know how to do the light box without repeat all the carousel with Vanilla CSS and Vanilla JS, By proxy I could do it, but I would not like to see the result, I am already quite uncomfortable with the normal JS result.
PD: Sorry if I write something wrong, English is not my native language.
@ohermans1Posted over 2 years agoLooking Awesome!
For my carousel I just used a counter, that went up as you clicked right and down as you clicked left. I then used this to create the file name. For instance, if you were on image 2, the file name would be "image-product-" + counter + ".jpg". Each time you clicked, it would change to a new file name :) - Not sure if this is the best solution, but its an idea
0 - @nasim67rejaSubmitted over 2 years ago
It was too hard for me 😢.I tried my best.You must check the slider and tab component. I have added some animations on cart icon and the tab component. Don't forget to give feedback. Any feedback will be appreciated 😊
@ohermans1Posted over 2 years agoTake a look at my shadow-box / slider. I just used a counter, that went up as you clicked right and down as you clicked left. I then used this to create the file name. For instance, if you were on image 2, the file name would be "image-product-" + counter + ".jpg". Each time you clicked, it would change to a new file name :)
Nice work though! Looking super close to the original.
2
