I finally completed another challenge! 🎉 I know it's been a while, but I'm happy to submit another solution after taking a little break. 😆
This was a short, simple challenge that I created with Svelte. Svelte is such a joy to use and it worked out really well with GSAP (which I used to add the animations to the site). I also used ScrollTrigger and smooth-scrollbar to enhance the animation and scrolling experience just a bit! 😀
And for a tiny surprise—scroll past the hero section and back again to toggle the avatars of some of your favorite Frontend Mentors! 😆
Of course, feedback is welcome and appreciated! 😊 Do let me know of any issues you find (since I'm afraid I'm bound to have missed something somewhere)! 😅
Oh, yes, and click on the giraffe for the attribution. 😉
Wowww I'm blown away by your creativity 🤯 Like who would think to include avatars of FM members as an easter egg? It works so well and is so clever though! This really makes me want to play around with ScrollTrigger now! Thanks so much for sharing your beautiful solutions with the community 🙌 Absolutely amazing job, keep it up!!
In this initial release, I deviated from the design in a couple of ways:
I left out the DarkMode label. I think it looks better as a single icon.
I still need to fix the blinding darkmode flash. It's annoying on the initial load, but it becomes downright infuriating when you rapidly navigate between border countries (while in darkmode).
I'm planning to use this Josh Comeau post as a guide The Quest for the Perfect Dark Mode, but I'm going to need to overhaul my themes and darkmode to fix the flash. 💥
Addressed:
<del>I used flex box for the grid, so I couldn't get the cards to justify along the sides (justify-content: space-between) with a gap. Should I refactor using css grid?</del> (Safari now supports gap with flexbox as of last month)
Hey Aaron, really well done!!😊 I went ahead and bookmarked it so I can study it more and learn from it. I really like the country card loaders that are displayed during the initial API call and the sound effect on toggle between light and dark mode is a really nice touch 👏
One suggestion I have is maybe have more of the country card loaders during the initial API call so that there aren't any big blank spaces on the screen without loaders if the user is viewing it on a wider desktop.
Also, it looks like you're doing quite a bit of prop drilling with the prop handleSearch (it's passed to FilterableCountryList, then FilterControls, then SearchBar before it's actually used) Could you declare that function in the SearchBar component so that it lives in the component that actually uses it? You could use Redux to manage the state and access countryFilter in App.jsx and then dispatch the action to change the state from SearchBar.jsx. I realize learning Redux may seem daunting but it's worth it!
Overall super awesome job and keep up the great work!! 💪
Hey there, just came to check out your solution to this challenge after seeing that you left feedback on mine 😊 Really nice job on it! I love the little coffee cup favicon you included and the order summary message before the user selects any options. The detailed README is also really nice to see 👏 One thing I noticed is a bug when the user doesn't select the coffee subscription options in the order that they appear on the plan page. I tried selecting them out of order and then even when I had made a selection for every question, the button to open up the modal was still disabled. Something I would consider doing for future projects is to break up your scss into more files (organized by page, components, etc.) so that you don't have over 1000 lines of code in one big scss file. Overall you did a really nice job on this challenge! Keep up the good work 💪
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.
Hey Enayar, just want to return the favor and leave you a comment on your solution 😊 Absolutely amazing work, everything looks and functions beautifully and your use of animations is really impressive!! I loved the animations so much that I've been learning all about Framer Motion since I first peeked at your solution. Really the only suggestion I have for an improvement is to make the Designo logo in the footer into a link that routes to the home page like you've done for the Designo logo in the header.
I would really appreciate feedback regarding 2 things:
It took me forever to position the different images and I am curious to know whether I did a decent job or whether there is a better(?)/more responsive way to do it.
I also used SASS and I am never sure when it's best to nest, to use variables and so on, so if you have a moment to give me some feedback on how I did there, that would be awesome!
Hey Elisabeth, nice job on this challenge!! It definitely took me forever to position the images too, so not sure if I'll be much help in that regard. Looks like your accordion is working well and it's responsive. I also like the animation you included for the box image.
I noticed that the text color isn't changing when the user hovers over the questions in the accordion. It looks like you just used the wrong CSS selector for that declaration. Instead of
button:hover {
color: $hover-color;
}
it should be
.faq-button:hover {
color: $hover-color;
}
It would also be nice to have the cursor set to pointer on the questions in the accordion. I'd also recommend changing your media query to a bit of a wider screen width because at 1000px width, the box image is getting cut off a little on the left side.
Really nice execution!! It looks very close to the design, is responsive, and the theme switcher works great. The hover states on the cards also look really nice. The only things I would really suggest would be to vertically-center the dashboard within the viewport height. Also the design shows that when on the light theme when you hover over the switcher, the pill-shaped part of it should turn to the linear-gradient. The design also shows that the 'Overview - Today' heading should be a gray color on the light theme. Keep up the great work!!
Hey there, nice job on your 2nd FM challenge!! It looks really nice on both desktop and mobile and the theme switcher works really well. I just have a few minor suggestions for you.
It would be nice if on tablet screen widths if the cards were laid out in two columns instead of having the columns jump from four to one at 1220px.
In the design it shows that when you hover over the switcher in light mode, the pill-shaped part of the switcher should change to the linear-gradient.
The design also shows that on hover all the cards should show a pointer cursor and change their background color slightly.
Hey David, well done on this challenge 👏 It looks pretty close to the design, is responsive, the theme switcher works, and you included hover states on the cards. Your CSS is also organized nicely. I just have a few suggestions for you:
It would be nice if the switcher worked if the user clicked on any part of it, not just the circle part of it.
The design shows a hover state in light mode for when the user hovers over the switcher. The pill-shaped part of it should turn to the linear-gradient.
The layout starts to get a little wonky between 1000px and 1200px screen width because the large cards aren't centered with the small cards.
It would look nice if at tablet screen widths you had the cards laid out in two columns instead of jumping from four columns to one column at 1000px.
I would like to know how many ways are there to navigate a page on toggle using JavaScript & If you're free, I would also love a feedback like how is my code, how should write code most efficient way. Thank you.
Hey Jeet, if you're looking for a tutorial on how to make light theme/dark theme switchers, check out this YouTube video. It's not for this exact challenge, but I was able to use the methods from this video in my solution 😊
Hey Juan, nice job! Looks close to the design, it's responsive and the theme switcher works nicely 👏 I just have a few suggestions for you.
You're missing the hover states for the cards. The cards should change colors slightly and the cursor should be a pointer.
The Overview - Today heading should be a gray color in light mode
It would be nice to have the cards laid out in two columns for tablet screen widths. You can create two equal width columns like this: grid-template-columns: repeat(2, 1fr);
In your HTML you have <p>F O L L O W E R S</p>. Instead of putting it in all caps and with spaces between the letters in the HTML, it's better practice to style it that way in CSS.
You can keep all your CSS in one file with media queries for different screen widths instead of splitting them into separate files for desktop and mobile.
Wow, excellent work Sankara 👏 Looks incredibly close to the design and I love the animations. Scales up and down really nicely and your code is really organized and readable. The only suggestion I really have is to consider using min-width media queries in future projects. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain. I was resistant to coding mobile-first for a bit, but tried it out on a few smaller projects and now I really like it 😊
Hey Mustafa, nice work on this challenge. It's responsive and the form validation for the email input works when the user submits the form with no input. One improvement you could make would be to expand your email validation to include instances when the user inputs strings that are not valid email addresses. I did this by using a regular expression https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
Another suggestion is to add some more whitespace on mobile screen widths. It could use more of a margin between the image and the heading as well as some more padding on the left and right sides of the hero-content. Happy coding!
I started from mobile layout with flex box.
When I moved to desktop version I used absolute-relative positioning to place the elements; I'm not sure I did it in the best way possible; can someone give me some advice?
I added some animations, but I've some issue if someone hammer the buttons. How may I handle buttons hammering?
Hey Giovanni, really nice job with this challenge! I really like the animations and the hover state on the buttons and it looks really close to the design :) I just have a few suggestions for you:
I would try to stray away from using id's as your CSS selectors and instead try to always use classes. You can read more about the rationale for that in this article (https://paulcpederson.com/articles/css-for-people-who-hate-css/)
It would be nice to see some change in the size of the elements/layout for tablet widths. At just under 1200px screen width, it looks like there is too much whitespace.
You might consider adding a max-width to the container because at large desktop screen widths, the text and the image get really far apart.
Hey Faraz, nice job! Your solution looks pretty close to the design and the functionality of the slider works well. Here are some suggestions I have for you:
For cleaner code, it's best to write your JS in a separate file instead of writing it directly in your HTML file.
Try using more semantic HTML tags like <p> or <blockquote> instead of just <div>.
Try to avoid using the <br> tag in your HTML and instead try positioning elements in CSS with flexbox or CSS grid.
Your avatar image gets really stretched out at many different screen widths. One way to avoid that is by giving either the width or the height of an image a value and then setting the other measurement to auto.
Hey Biswanath. Your solution looks really nice on desktop screen widths between about 1300px and 1750px. The layout breaks above that width as well as between 768 to 1300px. It would also be nice to add a pointer cursor on the buttons on hover. Happy coding!
Hi,
How did you implement the share tooltip functionality, especially the little downward-facing arrow below the social media icons? I implemented it using the font-awesome arrow icon and absolute positioning but I suspect that's not the ideal solution.
Hey Eyob, overall it looks like a really clean solution 💪 Feel free to check out my solution for how to code the little downward-facing arrow below the social media icons. I did it in CSS with the ::after pseudoclass. It would look something like this:
I tried to apply border-radius: 1.5rem to the main tag but it didn't work. Had to individually target every corner. Why is that? Any kind of feedback is welcome.
Hi Emmillie, really nice solution!! Basically pixel perfect 👌 Really nice, organized, readable code too. I'll have to study more of your projects to learn some things from you! I just have one super minor suggestion for something you could fix. It looks like on a small mobile screen size like an iPhone 5, the attribution overlaps with the content on the page.
Wowwww, absolutely incredible solution 🤯 I'm definitely going to study your code very carefully. It looks like I could learn a lot from you. I agree with @magdakok that your attention to detail and surprising features are really impressive. Hope to see more amazing solutions from you and best of luck to you with your interview prep, portfolio, and job hunt!
Hey Patel, nice solution. Looks pretty close to the design :) I just have a few suggestions.
Your images look a bit squashed (like the right and left sides have been squeezed together). You can avoid this by giving the width a value and setting height: auto;
The features are not centered at all screen widths.
In future projects, I would try to avoid using id names for CSS selectors and instead use class names. You can read more about the rationale for that here: https://paulcpederson.com/articles/css-for-people-who-hate-css/
On screen widths below 1128px, the features section and the productive section could use more whitespace between them.
Hey Denis, I'm not sure what you mean by your question. What are you setting a minus value for? As far as the design of your solution goes, it looks really good. I just noticed that at screen widths above 1400px, the elements don't stay centered and a bunch of whitespace just gets added to the right size of the screen. You can fix that by getting rid of max-width: 1400px;
It looks like you forgot to vertically center the part that says "GB LEFT" like is shown in the design. You can do that with flexbox by doing this:
display: flex;
align-items: center;
}```
I would also suggest trying to avoid using id's as CSS selectors. Instead use classes. You can read more about the rational for that here https://paulcpederson.com/articles/css-for-people-who-hate-css/
Very nice first Frontend Mentor project! Keep it up! -Jen
Your solution looks great! Really clean look on all screen sizes. I really like the look of the lighter grey part behind the quote boxes. Your code looks nice and organized too, easy to follow. Just a couple suggestions. Try to make the font look different for the for the name of the person who said the quote and the position they hold in the company. In the design the name is in bold and both the name and the position have smaller font size than the text for the quote. Also, try to use relative units (rem, em) for things like font-size, margin, padding, etc. It will make it easier to make your pages responsive. Keep up the great work! -Jen
Nice work! Looks pretty much spot on with the design. Design-wise, I just noticed was that at screen widths above 1400px, the background image no longer covers the entire width of the screen. It also looks like the dark blue background color for the storage bar is a little darker than the design. Another suggestion is to use relative units (like rem, em) for things like font-size, margin, padding, width, etc. Keep up the good work! -Jen
Hey Abhijit, nice job coding this. Using class names for almost all your CSS selectors is really good and nice job using relative units. I would suggest giving the entire price grid component a width and then centering it within the page. It looks too wide as it is on large screen sizes.
Looks really nice and clean in both desktop and mobile version! For some reason the link to your github repository isn't working so I couldn't look at your code. Just looking at the design though, the only suggestion I have is for the input box consider adding type="email" and required so that it doesn't let the user succeed in pressing the Subscribe button until they have entered a valid email address. Keep up the great work! -Jen
