All solutions

Hello everyone ! 🙂

I didn't post a challenge for a long time ! I tried Vue for the first time by doing a FME challenge. After trying React and Angular I can definitely understand why people tend to say it combines the best of both worlds haha.

On this challenge I focused on transitions between elements and screen resizing.

Would love to read what you think about Vue and get your feedbacks !

Have a nice day ☀️

Hello everyone ! 🙂

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.

Otherwise, any feedback/remark is appreciated !

Have a nice day ☀️

Hello everyone ! 🙂

I tried to tackle this challenge in around ~30min.

Any feedback is appreciated !

Have a nice day ☀️

Hello everyone ! 🙂

Very cool challenge ! I love the work from the designer on this one !

I learned a few things such as using the <picture> tag to adjust images and the mix-blend-mode property to get the "orange" effect on one of the images. Also, I've used the new and recommended way of doing import with SASS with @use instead of @import which behave really differently because it's not a global scope anymore.

I would like to have any feedback on the project and especially on how I structured my SCSS files. I divided them by (abstracts | components | layout). But at the end, I didn't really used the components folder, thus , I could have simplified the layout folder.

Have a nice day ☀️

Hello everyone ! 🙂

Here is my version of this challenge, had a lot of fun, especially in trying to make smooth transitions ! I have a few questions:

• How do you name your components when using a library such as styled-components ? When I use pure CSS I mainly try to follow BEM convention. However, here I'm not sure what is the best approach, thus I got lost really fast in my naming and it becomes hard to identify "what is what" haha. So I plan to refactor the code to make it more readable.

• When I select a reward, I would like others to "unselect" so they toggle back. I've been struggling to find a solution even if I guess it's not a big deal I always ended up trying to do something complicated. Should I use radiobutton ? Or there is a simpler way to create a parent component that handle the toggle state of child components ?

Also, any feedbacks/remarks are welcomed, I already noticed that my code wasn't as generic a I want to, so I'll work on this as well. I finally decided to take the PRO subscription after completing a few challenges, can't wait to tackle even more interesting ones!

Have a nice day ☀️

Hello everyone ! 🙂

Here is my version of this challenge, any feedback/remark is appreciated ! I have a few questions:

• The API is blocked by adblocker such as uBlock, is there a way to avoid it ?

• I tried to hide the API key with the netlify GUI, but is there a simplest way to do it with Node.js for example ?

• If the text returned is very long my boxes info-container__box get pushed. How can I make sure that no matter the length of the text I receive, the text fit the box ? Or dynamically adjust the font-size ?

Have a nice day ☀️

Hello everyone ! 🙂

Here is my version for this challenge, any feedback/remark is appreciated ! It's not pixel perfect and I feel I'm off with some font weights. However I tried to focus on semantic HTML as I always used divs only before, so suggestions about a better use of those tags would be nice. Moreover, for the images section part I started with <img> but I switched to the CSS property background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent), url(../images.jpg); because I struggled to find a way to apply a dark linear gradient on the bottom of the image. So I guess it's quite bad for screen readers due to the absence of alt attributes am I right ?

Have a nice day ☀️

Hello everyone ! 🙂

Here is my version of this challenge, any feedback/remark is appreciated ! I guess it would be better to load countries while scrolling ? But I wonder what might be the best direction to achieve this. Also the theme switcher is a bit laggy when there are all countries displayed, but it's smoother if I filter by region, so it's because the height is massive right ?

Have a nice day ☀️

Hello everyone ! 🙂

Here is my version for this challenge, any feedback/remark is appreciated ! I guess I could have done a media query for tablet view to make the transition softer.

Have a nice day ☀️

Hello everyone ! 🙂

My code is quite messy because I was too absorbed to make things work with my CSS, next time I'll make sure to think twice before coding haha.

My main goal was too make it responsive I hope it's working. Any remark/feedback is appreciated !

Have a nice day ☀️

Hello everyone !

I'd like to get a feedback on how to position correctly background images. Here I tried to play with background-position and background-size but I can't get a good render and the code is not very clean too. So I guess there is a simpler/better way to achieve it ?

Thank you and happy coding ! :)

Hello !

I have a question :

• How could I do a transition so that when I open/close a question the action goes smoothly ? Because I use "display: none" and "display:block", thus, the text appear directly.

Thank you :)

Hello !

Any feedback is welcomed, I still have a question about the "SHARE" text that I can't get "thin". I tried using "font-weight" but it only worked for the big text section I don't know why.

Thank you :)

Hello I have a few questions :

1. How can I control when the text start wrapping or not ? For exemple on the main title I use mostly "<br />" for line breaks but I guess there is a better approach.

2. How to make stars from the ratings stick to the left as on the example ? As it's in a display flex I thought a "flex-start" would do the job but it doesn't.

3. For media queries I'm pretty lost I don't know if what I've done is "okay" as everything get squashed together pretty fast. isn't flexbox supposed to fix this ?

Thank you for your advices, I'm new to the front-end world so any remark is welcomed ! :)