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
OverviewSolutions18Comments25

All comments

  • Nick C.• 710

    @niemal

    Submitted

    I implemented downshift for the first time and it was a lot of fun. I learned how to implement a very powerful search combobox that is flavored with a cool animation thanks to framer-motion. I had to implement react-window along with it to avoid the tremendous cluttering that so many items can cause, which leverages a powerful performance (react-window is in the search combobox and the mobile version of the home layout only). I could leverage the countries API to decrease the overall bundle size but I just didn't. Perhaps I should and will in the future. All in all, I enjoyed this challenge! Feel free to give any kind of feedback.

    Responsive implementation using downshift, react-window, framer-motion

    #react#styled-components#framer-motion

    1

    Nick C.• 710

    @niemal

    Posted

    Updated with github-pages client-side routing, react-window working on all devices for all content!

    0
  • Nick C.• 710

    @niemal

    Submitted

    I learned how to implement special SVG offset hovers. I honed my button-creativity by implementing a proper radial gradient rotation with a maybe weird way of triggering the transition effect with ::after and ::before pseudo-elements. Furthermore I implemented a flashy icon-spreading animation with framer-motion! Feel free to give any feedback, thank you.

    Responsive solution with shiny button and some animations! 😎

    #react#styled-components#framer-motion

    1

    Nick C.• 710

    @niemal

    Posted

    Updated with greater main animation depth, fixed animation cluttering.

    0
  • Nick C.• 710

    @niemal

    Posted

    Hello there,

    First off congratulations 🎉, I believe you put in some good effort in getting this done. I will be pointing out something on the mobile version:

    The second tab has the footer bar floating in the middle, you might want to take a look at that!

    Wish you fun and joy going forwards!

    0
  • P
    Justin Green• 2,610

    @jgreen721

    Submitted

    React Comments

    Featuring

    • JS confetti library to celebrate a LIKE 👍 🙌

    • Ability to update a comment 💬

    • Parsing function to detect some tech language terms and generate a link. Use a hash to make sure there's no duplicates.

    -Input Character counter to (try!) to limit your banter!

    Feedback and suggestions welcomed! 🙂

    Comments Challenge completed via React

    2

    Nick C.• 710

    @niemal

    Posted

    Hello there,

    This looks pretty solid congratulations! I have a suggestion to make, at least on the mobile version:

    When you click on an upvote button, the button hover-states and remains hovered. You might want to do something about that and remove the hover on mobile or just make it a keyframes animation on mobile.

    Last but not least fixing the accessibility report on this page should also be a fine task to take on.

    Overall solid, love it, keep it up!!!

    Marked as helpful

    1
  • Nick C.• 710

    @niemal

    Posted

    Hello there,

    Just want to note that in the mobile version the cross icon does nothing (is supposed to remove the entry).

    Looks decent btw!

    1
  • Nick C.• 710

    @niemal

    Posted

    Hello!

    The planet animations are just amazing 😍, very nicely done! I do not have access to a desktop right now so I will be commenting on the mobile version.

    I have a suggestion: you can preload some images in the header so as soon as the crew page is visited for the first time, the experience looks as sharp as possible!

    Besides that, this looks really solid, well done. Will get back for the desktop version if I find something that can be improved on there.

    Marked as helpful

    1
  • Praneet Dixit• 120

    @PraneetDixit

    Submitted

    This was a fun project. It was the first time I got my hands dirty with angular! Working on color scheme and state management was also fun. I decided to add pagination support with an external library but ended up in making one myself. I am working on adding pwa support and fixing accessibility issues. Currently the design is not mobile responsive. I am working on it. Although the application structure and code is quite dirty, but a quick glance and review of the code will be helpful.

    Countries detail app using angular

    #angular

    1

    Nick C.• 710

    @niemal

    Posted

    Hello there,

    First off, this looks quite decent, congratulations. However I think you forgot to implement the responsiveness for the mobile version, you might want to take up on that one!

    Cheers.

    1
  • Nick C.• 710

    @niemal

    Posted

    Hello there,

    I must commend your effort in creating such an engaging and user-friendly experience. I will be doing this review for the mobile version of the website.

    I would like to bring to your attention a few areas that could benefit from further refinement. Firstly, I encountered a "scroll burglar" issue that hindered the smooth navigation of the web page. Addressing this problem would enhance the overall user experience and make browsing more enjoyable.

    Secondly, I noticed that the "filter by region" button was not functioning as intended. Ensuring that this feature works seamlessly would significantly improve the usability.

    Lastly, within each country's dedicated page, I found that the border buttons were not linking to the actual country page so perhaps that's a feature to implement.

    Kind regards and best wishes!

    0
  • Bilal Türkmen• 340

    @bilalturkmen

    Submitted

    it was a good challenge for css grid. i think it was better with a little color adjustment 😉

    • Custom components and Responsive navbar created.
    • i tried to get all the data from a single json file.
    • and worked for the good user experience.

    i hope you will like it ✌

    News homepage - with React + Ts

    #react#typescript#accessibility

    1

    Nick C.• 710

    @niemal

    Posted

    Hello there!

    First of all, I want to commend you for the effort you've put into completing this challenge. I can see that you've paid attention to various details, and the overall design is quite impressive.

    While reviewing your project, I noticed a small oversight regarding the focus-ability of <a> elements. It appears that the :focus state styling is not applied to these elements, which could impact the accessibility and user experience for some users, especially those relying on keyboard navigation.

    I hope this helps!

    Marked as helpful

    0
  • Nick C.• 710

    @niemal

    Posted

    Amazing job man, very nicely done 👍!

    I would like to recommend preloading all the images to improve the experience on the first loads with those beautiful animations. And also I would like to point out there's a small gap on the mobile home page at the bottom, probably need to do something about that!

    Besides that, one of the best implementations in my humble opinion. Keep it up!

    Marked as helpful

    1
  • Nick C.• 710

    @niemal

    Posted

    Hey there,

    The accessibility report is a good place to start getting feedback from, perhaps you would like to start from there. I have no access to a desktop right now so I will be reviewing the mobile version only.

    The implementation looks lovely overall but there is something that should be noted and fixed: when I click on the small dots below the feedback cards nothing happens. I expect the horizontal scroll view to scroll on a specific card when that happens.

    That's about it for all I can look at right now, wish you fun going forwards!

    Marked as helpful

    0
  • Nick C.• 710

    @niemal

    Posted

    Hello there,

    I just want to mention that you perhaps forgot to review the mobile menu. Aside from that it looks pretty good to me!

    Regards.

    1
  • Nick C.• 710

    @niemal

    Posted

    Hello there,

    Right now I don't have access to a desktop or laptop so I can't review such devices therefore I will stick to mobile.

    First off, I would like to mention that a good starting point is reviewing this page's accessibility report which indicates for semantic errors.

    Secondly, it looks quite decent, nicely done! I can only make a suggestion about the mobile menu, perhaps you would like to switch the menu icon to a cross icon when it's open so there's a clear clarification on how it closes. A good area of expansion is learning about animations which can spark some magic as well. ✨

    Wish you a great journey into web development!

    Marked as helpful

    1
  • Nick C.• 710

    @niemal

    Posted

    Hello there!

    First off I would like to mention that the design implementation looks quite solid and I would like to congratulate you on that. Now to pinpoint some potential issues:

    1. Review the accessibility report errors and try to fix them.
    2. When typing "google.com" in the input field, it says I need to type a valid link. Perhaps reconsider making it strict to "https://" or "http://", you can indeed just post plaintext "google.com" to the API and get the same result. If the link is invalid, you can let the API itself derive that conclusion.
    3. There's also a scroll-burglar on the mobile version. You should reconsider the fixed width on something (I won't spoil!).

    Keep having fun on the journey of web development, regards!

    Marked as helpful

    1
  • Lucas 👾• 104,540

    @correlucas

    Submitted

    👾 Hello, Frontend Mentor coding community. This is my solution for the Art Gallery Website

    When I started my journey in Frontend Mentor this was my dream challenge that I always wanted to complete. Now, after 7 months (I know it took to long, but I am a noob 💁‍♂️) its done! Challenge accepted and completed.

    The challenge was really challenging, the main struggle I had building this html structure/css was with the header and the image gallery. I had some fun trying to figure out how to make the grid-template-area and after some tutorials I get how to use this tool (was my first time with grid-area).

    🎨 I added some custom features:

    • 👽 Hover Effects
    • 🧚‍♀️ CSS Animations

    🧐 Special thanks to:

    • @AdrianoEscarabote - AdrianoEscarabote Profile that helped me with the Leaflet Map (I have zero knowledge with JS so I had no idea how to include the map).
    • @VanzaSetia VanzaSetia Profile to explaining me how to make the h1 heading effect in the header with mix-blend-mode: difference.
    • @elaineleung ElaineLeung Profile To have explained me how to add CSS Animations. Now I am really happy adding motion everywhere hahaha. She is of the FEM greatest mentors.

    Tutorials used to learn grid-template-area:

    🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 1 missing)! Gotta Catch ’Em All

    Ill be happy to hear any feedback and advice!

    👨‍🎨 Art Gallery Website VANILLA CSS (CSS Animations & Hover Effects)

    8

    Nick C.• 710

    @niemal

    Posted

    The top section animation with the smooth roll-up is just beautiful. Good job!

    0
  • Nick C.• 710

    @niemal

    Posted

    Very impressive I liked this a lot, keep it up!

    1
  • Nick C.• 710

    @niemal

    Posted

    Hello there!

    Looks pretty good keep the effort up! I would like to point out just one thing:

    There's a scroll burglar on the mobile view. You should probably do something about it!

    0
  • Nick C.• 710

    @niemal

    Posted

    Greetings!

    As a CSS in JS fan myself I welcome you to the cool side of web development 😎. I don't have access to a desktop/laptop right now so I will be reviewing the mobile version only.

    1. The slideshow of the gallery crashes when I hit either button.
    2. You will probably want to make a disabled add to cart button state for when the product was added.

    Best of luck and wish you lots of fruitful development!

    Marked as helpful

    0
  • Nick C.• 710

    @niemal

    Posted

    Hello there!

    First off good job on completing this challenge. I would like to mention that a good first review is the accessibility report on this page. As you can see there are multiple errors which you should fix and take care of.

    Secondly, the design preview does not match the result on mobile, perhaps you should look into it and proceed accordingly (No thumbnails, buttons for next and previous etc).

    Last but not least I love the burger animation, keep it up!

    Marked as helpful

    0
  • Marko Dumnic• 150

    @dumaaas

    Submitted

    I didn't manage to implement the bonus feature of flipping the card today, so I've left it to be done in the next couple of days, but I wanted to leave the solution as it is. Any feedback is welcome. :)

    Launch Countdown Timer built with Vue & SCSS using Figma

    #accessibility#sass/scss#vue#animation

    1

    Nick C.• 710

    @niemal

    Posted

    That's really amazing, nice job! I didn't think to move the background in a loop, was that your idea or from the figma? Also the light theme was not included on the free version. Nonetheless amazing!

    1
  • Henry Shih• 120

    @henry-shih4

    Submitted

    responsiveness of background images was a challenge elements moving as text changes in height on the page is still something I wish to manage better.

    Space Exploration Responsive Webpage

    #tailwind-css#react

    1

    Nick C.• 710

    @niemal

    Posted

    Hello there!

    I see you are putting in quite the effort and I would like to commend that. Now on topic, the home page is broken on mobile. I recommend using background-image with background-position for the image. I also recommend looking into the min-height property as it can stretch the height to your liking, i.e. 100vh.

    Hope you progress further into your journey!

    0
  • Nick C.• 710

    @niemal

    Posted

    Greetings!

    Looks nice but it's kind of broken with scrolling off screen on my phone. Not sure about tablet, you should probably do a device check and see what needs fixing. Eitherway looks very good, wish you a good journey!

    0
  • Nick C.• 710

    @niemal

    Posted

    Greetings! Looking decent enough although I believe some tinkering could help the overall experience.

    First off, sadly I can't get the link to the source code to work so I can't get a view on that. However, I believe you could improve the following:

    1. Add an onClick event on the hamburger icon on mobile which will turn the cart card off when clicked.
    2. Perhaps decrease the padding inside the cart card.
    3. Bonus: Try implementing some transitions and/or animations.

    Take care!

    0
  • Nick C.• 710

    @niemal

    Posted

    Greetings!

    First off congratulations for your first project on frontendmentor 🥳. The site seems responsive to me, although I am on my phone right now. However I noticed the following potential improvements:

    1. You might wish to add min-height: 100vh; to your body. This will actually allow you to center your main element both vertically and horizontally.
    2. You might wish to add a pixel width to your main element. It's perfectly fine to design in pixel principles instead of percentile ones. i.e. width: 330px;.

    These were my 2 cents. Wish you a wonderful journey!

    1