Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions25Comments23

All comments

  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Submitted

    Hello, everybody! 👋

    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. 😉

    Happy coding! 😁

    Meet Landing Page | Svelte + GSAP | Surprise!

    #svelte#gsap

    18

    Bonrey• 1,130

    @Bonrey

    Posted

    OMG, @APG! Your solution is simply out of this world! 🤩

    I myself decided to create something with animations on scroll recently, but my attempts go in no comparison with your work! I should definitely check out the library you used, especially if it is compatible with React. 😉

    Also, I think it's great you take your time before publishing something new! This way, you make sure to bring your creativity to the maximum level and struck all of us with your breathtaking sites!

    P.S. Your custom scrollbar alone is already worth checking out!

    1
  • Yaiza• 410

    @Yaiza16

    Submitted

    Finally, I finished this challenge. It took me a long time to finish it but I think result is good and I had a lot fun doing it.

    I struggled a lot with JS part so I decided focus on that and put the responsive design aside. I’m starting with JS so there were some issues related to.

    • I feel JS code is a little messy and hard to read so any advice or tip to improve it it’s welcome. Would it be better if I put all code in just one file? • I’m starting with SASS too. I put components in a folder apart but should be modifiers components there or these should be in the layout folder?

    I tested everything to make sure that everything works properly and there are no bugs. So, if you found a bug, please let me know!

    Any feedback related to a cleaner and more efficient code it’s welcome. Besides, feel free to give any other feedback too. It will be appreciated. 😊

    Crowdfunding product page using JS vanilla, SASS and BEM

    2

    Bonrey• 1,130

    @Bonrey

    Posted

    Hello, Yaiza! I think you did a pretty good job on this challenge! 🎉 I couldn't find any bugs as regards the JS part. 😄

    However, there are still some things you might want to improve. 📈

    • First of all, I would fix your accessibility issues by adding the aria-label attribute to your input elements. This way, you'd let assistive technologies know what all these radio buttons and text fields are about.
    • Each of your sections should have a heading. So, it'd be a better idea to put your section tag inside div and not vice versa. 🙂
    • Probably, not so important, but still worth mentioning: I'd make the Crowdfund logo clickable (and refresh the page on the click, for example).

    As for your SASS folder structure, I think it's fine! I refer to this site whenever I want to make sure I put a new .scss file in the right place.

    Anyway, it's great that you put so much effort into this challenge! I think you learned a lot along the way. 😃 So, keep on coding, and good luck! 🍀

    1
  • Bonrey• 1,130

    @Bonrey

    Posted

    Hi, Muhammad! Your site is quite notable! I especially liked the desktop version: it is very close to the original. 😃

    There're a few little things you might want to fix, though. All of them are about your mobile version. Let's go from the top to the bottom:

    • Your site logo isn't clickable. It'd be a good idea to make the page refresh or scroll to the top when you click it.
    • There is no padding around your paragraphs and headings on smaller devices, which results in a poor user experience. We all don't like it when the text sticks to the sides, do we? 🙃
    • The Supercharge your workflow section isn't centered, and the headings with icons get skewed to the left. 😟
    • Finally, company labels are arranged in a row instead of a column, and therefore, they look somewhat small on mobile devices.

    All of the above are easy fixes. But they're worth doing, IMHO. 🙂

    As for your code, I suggest you make more meaningful class names. For example, workflow-section instead of section2. It may take you some time to come up with those names, but you'll be able to quickly grasp what each section was about if you decide to return to your code after some time. 👨‍💻

    By the way, I saw in your profile that you're just 18 y.o. I think it's commendable that you're creating such complex projects at this young age! 💪 Keep on practicing! I wish you all the best! 😃

    Marked as helpful

    2
  • Bonrey• 1,130

    @Bonrey

    Posted

    Hello, @olgak169! 👋 Fine effort on this one!

    I like how your site is almost pixel perfect. I know how hard it is without any Sketch or Figma designs, so congrats on that! Also, it's great that you put in some time to add transitions and form validation. In my opinion, all this visual stuff is always worth the effort. 😊

    There're a few little things you could fix to make your site look even better:

    • Make your logos clickable. It'd be nicer if the user could move to the top of the page (or refresh it) on the Huddle logo click.
    • Consider removing one of your h1 tags: there should be at most one such tag for a page. (You can also check your HTML Validations issue for more info.)
    • Add some transition-duration to your links and buttons. That way, the overall look will be smoother.

    In addition, it's great to see that you used the :invalid selector. To be candid, I didn't know it existed before I checked your code. 😅

    It's great to see you're completing many challenges on this site. Keep on coding! And best of luck with everything you're learning! 😄

    0
  • Bonrey• 1,130

    @Bonrey

    Posted

    Hi, Dinesh! I think you've done a bang-up job on this challenge: everything looks good and responds very well. Kudos! 😄

    There is one little thing that needs fixing, though: font-family of your input and button elements is set to Arial instead of Open Sans. The thing is, form elements don't inherit font settings from the body tag. So, you should set them manually. You can read about it in more detail here.

    Other than this, everything looks great. So, I can only wish you good luck with your coding! 🍀

    1
  • P
    tediko• 6,580

    @tediko

    Submitted

    Hello👋!

    Damn! It was really tough challenge. This was my second time i tried to finish it, this time successfully. This is few things I used while creating this project:

    • Used backface-visibility property. This property defines whether or not the back face of an element should be visible when facing the user. So when i rotate my cards, back of them isn't visible to the user so I can create this nice flip animation.
    • Added .sr-only element to announce countdown time to screen readers. Also used aria-live="polite" attribute to expose dynamic content changes in a way that can be announced by assistive technologies after every minute of countdown.
    • For interactive elements like socials icons i used :focus-visible pseudo class (spec). This selector indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device.
    • Implement prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. I used it in my resets so every element with animation apply to that.
    • I didn't like flip animation when these "holes" on card were done with before/after elements. Instead i created svg-backgrounds for cards and this way card animation also contains these holes - I think it looks way better.
    • Hats off to Wes Bos, I found his countdown timer tutorial and it was really helpfull to understand how countdown should work. Even tho it was just tip of the iceberg when it comes to JS in this project i think it was very helpful to understand how countdown timer should work.

    I ran into a problem with safari where my card flip was looking good both on firefox and chrome, but on safari there was a weird bug where two my animated cards was shown at once. I struggled with if for two days but turned out that I have to use backface-visibility on two rotated cards instead just on one. It seems like safari ignores my z-indexes in this case, and firefox/chrome doesn't - but working good now.

    No specific questions here but any additional feedback will be appreciated!

    Thanks! 😁

    Countdown timer - Mobile first, Flexbox, Sass, JS, backface-visibility

    5

    Bonrey• 1,130

    @Bonrey

    Posted

    Hi, @tediko! Glad to see you completed this challenge! It is quite a tough one, indeed!

    First of all, the countdown animation you added is sublime, and I think there is hardly anything that could be improved. 😅 The site is responsive, and everything works without glitches. 👍🏻

    Probably, there is only one bug that I found: on my screen, which is 1280px wide, the social media icons stick to the bottom of the page. Plus, when I scroll the page, a white strip appears at the bottom. You can see what I mean if you set (width, height) to (1024px, 580px) in the DevTools and try to scroll the page to the bottom.

    Anyway, the overall look and feel are awesomesauce! So, I'd encourage you to keep coding! You're doing great! 😉

    2
  • Bonrey• 1,130

    @Bonrey

    Posted

    Hi, @soransh-singh! 🙋‍♂️

    Good job on this challenge! Here are a few suggestions I can offer:

    • Add some padding to your header so that it doesn't stick to the top of the screen. It would look much better, I promise! 😁

    • It'd also be nice to set some border-radius for buttons and input fields. This way, they would look less jagged.

    • To fix your accessibility issues, I suggest adding aria-label with some text to both of your inputs. Also, it's not a best practice to add an empty name property to the buttons (<input type='submit'>). You can safely delete it, I presume.

    P.S. It's great to see that you're completing so many challenges on Frontend Mentor! Keep up the good work, and good luck with your coding! 🍀

    1
  • Rayane• 1,935

    @RayaneBengaoui

    Submitted

    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 ☀️

    Designo multi-page - REACT

    7

    Bonrey• 1,130

    @Bonrey

    Posted

    Hi, @Rayane! 👋 I'm a little late to the party, but still, I'd love to write a few words. There aren't so many stunning GURU solutions out there, after all. 🙂

    First of all, I love the overall look of your website! All these transitions and animations are very entertaining! I especially liked the one with the smartphone moving on scrolling. 😍

    Probably just a couple of things that are worth pointing out:

    • In the Locations tab, the United Kingdom section appears without paddings on either left or right on my screen (1280pxs wide).
    • I think it'd be nice to add a custom favicon to your site that would fit with the overall design. 😁 I personally use Flaticon for icons. It's a noteworthy site with lots of free images of many sizes.

    Also, it's great to hear that you've improved so much in just 6 months! Indeed, it's surprising how much you can learn in just half a year if you put in consistent work! I hope you'll enjoy your job as an Angular developer and still find some time to post new solutions on FME once in a while. 😄

    Good luck with your work, and happy coding! 🙌

    P.S. Hopefully, I correctly inferred that FME stands for "Frontend Mentor".

    1
  • Bonrey• 1,130

    @Bonrey

    Posted

    Hello there! 👋

    I think you've done an amazing job on this challenge! Everything works fine and smoothly!

    Probably just one little 'but': the font is a bit too small on my laptop (the screen is 1024px width). Especially, in the search bar and the accordion menu. Also, I can't see the search bar icon. I think you should fix these little problems.

    Other than that, your site is awesome! And all these transitions are especially satisfying 😃

    0
  • Roc Tanweer• 2,500

    @RocTanweer

    Submitted

    Hello folks 😀

    This past ten days with this challenge was the best..!. I learnt a loooot of stuffs, either by making a mistake or by the requirements. I tried to make this as good as possible within a week or two because you never get satisfied by the design and details...

    Even now while submitting the solution, I am thinking of adding some more things like when the user redirect, there will be an animation of fade-in only when the theme is dark but I controlled myself because I wish to touch some other challenges too🤣

    There is this feature called maybe PWA that I really wanted to do which lets the user to add the web app to mobile home screen but it was quite hard for me for now 😅

    Questions

    1. How to reduce the delay while using the fluid typography(as you may have noticed)?
    2. How to smoothly displace elements while sorting?
    3. How can I make my JavaScript code cleaner?

    Any other feedback is humbly welcome..! 😘

    HTML Sass JavaScript Sortable.js Local Storage

    4

    Bonrey• 1,130

    @Bonrey

    Posted

    Hello, Roc! 👋

    It's so sad to see such a beautiful solution without any feedback 😥. That's why I decided to leave some. I'm not proficient in JavaScript myself yet, so I don't know how to help you with your items displacement. However, I'd like to point out a few other things 😉

    • First of all, I'd set cursor: pointer for the remove-item button in your list.
    • Also, I'd forbid the text in the list item to go on the next line. Now, if you narrow your screen, you'll see that the existing text breaks into several lines, and the crossing line goes somewhere in between them, which isn't cool.
    • Finally, when added text is too long, the remove-item button goes to the bottom left corner. I think it's worth fixing, too.

    Other than that, your solution is super cool! 😍 I especially liked the transition between light and dark themes, and also that checkbox fadeIn/fadeOut. The latter is just amazing!

    I hope you keep on creating new projects! I'd definitely check out some more of yours! ✨

    1
  • Bonrey• 1,130

    @Bonrey

    Submitted

    This is my first challenge with styled components. They are indeed very convenient, and I learned a lot about them! I also learned how to create a drag-and-drop effect, which was quite gratifying as well. 🤩 However, I faced some problems that I couldn't resolve 😥 Here they are:

    • Using drag-and-drop made my TodoItem component rerender quite frequently, and when I tried to pass some props to TodoItem styles, using styled-components, I had to deal with very poor performance (due to the constant rerendering). That's why in the end, I put all the styles in a separate css-file and added them using className property. I read about using attrs in styled components and putting the dynamically changing styles there, but it didn't help improve the performance 😞

    • Another little bug is one-time background image flickering when I drag a list item. It happens quite randomly and sometimes doesn't happen at all, but I think some of you might notice it.

    • Finally, I spent quite a lot of time fixing the caret position in the text field. By default, it is aligned to the top of the text instead of to its middle. So I wanted to align it ~2pxs above the text, but I couldn't figure out how to do that properly so I left everything as it was.

    All in all, it was an interesting challenge with lots of opportunities to deepen my React knowledge. 😅 For example, I practiced using useState and useEffect hooks (see TodoItem component) and for the first time applied localstorage to the list items.

    I would be very grateful if some of you could take your time and comment on my solution or shared some insight on how I could resolve the aforementioned problems. Anyway, thank you for checking out this solution and reading this entry till the end! 😊

    P.S. Check out my README.md description file for some extra links.

    📃 Todo App | React | styled-components | localstorage | drag-and-drop

    1

    Bonrey• 1,130

    @Bonrey

    Posted

    By the way, all these 27 HTML issues seem to have come from the drag-and-drop library I used. 🙄

    0
  • Luis• 270

    @luibernip

    Submitted

    Hello community, thankyou to anyone helping with my coding skills. This is my only question:

    1. Can I make each card position correctly in mobile mode without using the media query? Should I use min max values or is there another technique I'm ignorant about?

    If you see anything that can help me get better at coding I would greatly appreciate it.

    Four Card Feature Section (HTML + CSS)

    2

    Bonrey• 1,130

    @Bonrey

    Posted

    Hi, Luis! 👋 Your site looks great! It's responsive and works fine! However, I wouldn't use the section tag for cards (see your HTML ISSUES). The thing is, each section should have a heading (one of h2-h6 elements) and the main part, but here there's simply no heading.

    2
  • Bonrey• 1,130

    @Bonrey

    Posted

    Hello, Alan! Good to hear you learned a lot! 😉 Here are a few suggestions on how you can improve your work:

    • Make your site more responsive (see what happens when the window is 600px wide, for example);
    • Make left & right paddings of your card bigger in mobile design.
    • Add some animation. Especially to the arrows of the list when you open/close the menu item.

    And good luck with your coding! 🍀

    1
  • Bonrey• 1,130

    @Bonrey

    Posted

    Your site is very well done! Everything looks fine to me 🙂

    0
  • Bonrey• 1,130

    @Bonrey

    Posted

    Hello, Jurijus! Your component looks great! 👏 However, there're a few little bugs that I noticed:

    • When I toggle the switch from "monthly" to "yearly" billing, the text / month doesn't change to / year;
    • Also, the price should be calculated for the yearly billing the following way: monthly billing * 12 * 0.75 = monthly billing * 9. (I'm taking the discount into account here.) Now, it works somewhat strangely.
    • Just a minor suggestion: change your toggle switch background color when it's activated (set on yearly billing) rather than on hover.

    Good luck with your coding! You're doing great! 🌟

    1
  • Bonrey• 1,130

    @Bonrey

    Posted

    Hi, Jakub! Your site looks really awesome! 🙂 Especially with all these animations!

    There's just one little problem that I see on my screen (which is 1280px wide): In the "Eyecam" section, filters stack on top of each other, since they don't have enough space. You'd probably want to fix that. Other than that, everything is responsive and fine!

    And just one extra recomendation: add transition: 0.3s (or any other number) to your filter buttons. This way, the background color will change more smoothly on hover.

    1
  • Bonrey• 1,130

    @Bonrey

    Posted

    Hello! 👋 In order to change placeholder color, you should add to your input tag the following class:

    input.custom-placeholder::placeholder {
  color: red;
}

    And then, every time the input is invalid, you should toggle this class in JS like so:

    inputField = document.querySelector("your input field");
...
if (invalid input) {
  inputField.classList.add("custom-placeholder");
}
...

    To reset the placeholder color, just remove the class:

    inputField.classList.remove("custom-placeholder");

    And of course, don't forget to set the default placeholder styles in css:

    input.default::placeholder {
/* something like this */
    color: gray;
    opacity: 0.5;
}

    Good luck! 😉

    1
  • Bonrey• 1,130

    @Bonrey

    Posted

    Hello, Kevin! Wow, your site looks really awesome. Congrats on this one! 🥳 I especially liked the animation in the beginning. 😊

    Just a couple of things I'd suggest:

    1. Get rid of your validation error by changing your section.rateds to div. I think that'd be more semantically correct, since every section tag should contain a heading, and here there's none.
    2. Well, that's just my opinion, but I'd probably avoid stacking stars on top of each other on smaller screens. In one row, they look somewhat better ⭐⭐⭐⭐⭐

    Everything else is smooth and responsive. Great work and good luck with your coding! 👨‍💻

    1
  • Andy• 295

    @AndreanaPerla

    Submitted

    Unfortunately I was not able to create the flip animation, no matter how many tutorial i saw... if someone can give me some tips it's would be very appreciate :)

    Countdown javascript

    1

    Bonrey• 1,130

    @Bonrey

    Posted

    Hi, Andy! 👋 Nice effort on this challenge!

    A few suggestions:

    • I'd make the site more responsive by changing the breakpoints. The problem is your site doesn't look pretty when the screen width is between 375px and 700px 🙁
    • Also, I'd probably not squeeze the background image when you resize your window (making it narrower). Just show some part of it (e.g., left or right). In my opinion, that'd look better. However, it's just my opinion 😏
    • As for the flipping animation, I myself struggled with it for a long time. But eventually I did it using a tricky html & css combination and setInterval() & setTimeout js functions. You can check out the solution in my profile 🙂
    0
  • Rayane• 1,935

    @RayaneBengaoui

    Submitted

    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 ☀️

    IP Tracker - HTML/CSS/JS

    2

    Bonrey• 1,130

    @Bonrey

    Posted

    Hello, Enayar! Great work on this challenge! 🥳 Everything works well on my laptop, although I have an adblocker turned on.

    Probably, just one little suggestion: I'd fix your html accessibility errors by adding aria-label attribute to your input field. It's a nice workaround when you don't have a label attached to the input field.

    As for the font size, I'd indeed dynamically adjust it depending on the screen width. It can be done in JavaScript like so:

    function updateFontSize() {
  let infoTexts = [dataElements.location, dataElements.isp];
  for (let i = 0; i < 2; i++) {
    if (infoTexts[i].innerText.length > 36 && window.outerWidth <= 1200) {
      infoTexts[i].style.fontSize = "0.8rem";
      infoTexts[i].style.lineHeight = "1rem";
    } else if (infoTexts[i].innerText.length > 36) {
      infoTexts[i].style.fontSize = "1.1rem";
    }
  }
}

    (In fact, that's the exact snippet from my code. I recently completed this challenge myself. 😅)

    Have a nice day too! And good luck with your coding! 😉

    1
  • Sven• 295

    @Sven72

    Submitted

    It would be great if I could get feedback relating to the codestructure. How can I improve it so that it become professional and maintable? Also there is an issue with the Dollar Sign and the price. Because the "$" is not vertically centered. I have no clue how to accomplish this? Best and stay healthy

    Nearly no use of classes and IDs in HTML

    1

    Bonrey• 1,130

    @Bonrey

    Posted

    Hi, Sven! The website looks pretty cool! However, on my laptop (with the screen width of 1280px) I see the mobile design, which isn't good :( So, I suggest you make the mobile breakpoint closer to 600px or something like that. And simply reduce the components' size and fonts for the screens like mine. As regards the dollar sign, I'm not sure but I think you can try adding to your dollar span "line-height" property equal to the parent's height (in your case, it's "p"). And it should help to vertically align the dollar sign.

    See this great article for further details: https://css-tricks.com/centering-css-complete-guide/

    1
  • Bonrey• 1,130

    @Bonrey

    Posted

    It looks nice 😉 I especially liked the animated button! But I would add some kind of response to it, though.

    0
  • Bonrey• 1,130

    @Bonrey

    Submitted

    This time I decided to reorganize my files. I used to store all the style files in one folder, and I don't think it was a good practice. Now I hope it looks better 😉 Also, I learned about blur() function, which helped me get rid of that unnecessary focus (and :focus styles) after I click the links.

    There's one question that's nagging me though: should I avoid using pixels in favor of relative units? I use rem for text, but in the end, it all comes down to px again, since rem units depend on the root font size, which happens to be in pixels. I feel especially uneasy adjusting some elements using "margin-top: 2px" or something like that.

    Simple page with some animation and input form validation.

    1

    Bonrey• 1,130

    @Bonrey

    Posted

    Also, it would be nice if someone could tell me how to get rid of the accessibility issues I got. Should I use buttons if my links contain only icons?

    0