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

All comments

  • Hikmah• 1,090

    @Hikmahx

    Submitted

    Using this api was a bit tricky. Since I formerly use pure sass, I noticed how much faster it is for me to finish a project when I started using tailwind. Like it's done in less than half of the time I'd normally use. I had a fun time with this project. Let me know if you have any feedbacks. Thank you!

    Rest Countries API with theme switcher (using React and tailwindcss)

    2

    Michal• 665

    @mbart13

    Posted

    This comment was deleted

    0
  • Michal• 665

    @mbart13

    Posted

    why are you adding eventListeners to index.js like it was vanilla javascript? :O

    you never do that in react project, it has its own event

    0
  • Anthony Oyathelemhi• 75

    @frontendtony

    Submitted

    Please review on both mobile and desktop and let me know what can be improved on, or added. Better still, add the feedback within the app too, after all it's a feedback app 😀

    To access the app, you have to sign up, but you don't have to use any real details, as long as the email is the correct format it'll work

    React-Powered PWA Product Feedback App

    2

    Michal• 665

    @mbart13

    Posted

    I managed to log in, even left feedback there :)

    but I'm also getting 406 errors in the console, some request keeps firing

    I'm also not able to upvote comments, getting 409 error

    Marked as helpful

    0
  • PeaNu• 90

    @jubeatt

    Submitted

    I've written all my processes in the README, you can find many details from there.

    It may need to take some time to read, but I think it's worth it. (Because it really takes me so much time to write😂)

    If you think there is something that can be improved or any suggestions, please feel free to let me know.😃

    It's a long way to go on the front-end, but I will keep going, and I hope you like this work, thanks!😊

    Build by SCSS, BEM, flex-box, grid-box, vanilla JavaScript and jQuery.

    3

    Michal• 665

    @mbart13

    Posted

    hey, I saw your solution in Matt's newsletter

    thought maybe you could be interested to know that aria-controls are not really recommended anymore https://heydonworks.com/article/aria-controls-is-poop/

    0
  • Fraser Watt• 1,790

    @fraserwat

    Submitted

    The accessibility checking says I need to add landmarks to my <section> tags, but I thought semantic HTML acts in place of this?

    Clipboard!!

    1

    Michal• 665

    @mbart13

    Posted

    all you need to do is to move all sections into main tag, where they belong

    0
  • Michal• 665

    @mbart13

    Posted

    avoid 1 character variables, it is considered bad practice

    hooks name should start with lowercase

    Marked as helpful

    1
  • Michal• 665

    @mbart13

    Posted

    I would advice to start thinking about accessibility, because I'm not able to interact with your page using keyboard

    0
  • Alain• 205

    @Alain-sys

    Submitted

    Hello everybody,

    I'm glad to present my first project solution on Frontend Mentor.

    Any feedback is welcome and very appreciated !

    Maker pre-launch landing page

    3

    Michal• 665

    @mbart13

    Posted

    i'd only suggest to turn off html form validation with 'novalidate', since you are doing it with js

    Marked as helpful

    1
  • Michal• 665

    @mbart13

    Posted

    I wish I knew Redux Toolkit when I was doing this challenge :(

    This is really neat Agata and really like that you stay on top of new trends

    1
  • P
    tediko• 6,680

    @tediko

    Submitted

    Hello👋!

    This is my second project build with React JS. This time I had the opportunity to try styled-components. It is a very powerful tool, but I believe it takes time to learn good practices and organize the code. Right now, I have the feeling that my styles are chaotic but I'm looking forward to correct it and use styled-components to its full potential. In order not to stick to design, I decided to recreate the animated solar system as the home page. Additionally, I added transitions while the route change.

    • I used ReactJS library to create an app. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. Read More(1) - Watch tutorial(2)
    • I tried to write a project using styled-components library. Styled Components are one of the new ways to use CSS in modern JavaScript. It is the meant to be a successor of CSS Modules, a way to write CSS that's scoped to a single component, and not leak to any other element in the page. Also allows you to write plain CSS in your components without worrying about class name collisions. Read More
    • The first time I used Prettier. Prettier is an opinionated code formatter. It removes all original styling and ensures that all outputted code conforms to a consistent style. Read More
    • To animate the pages transitions and mobile-menu animations I used Framer Motion API. Framer Motion is an open source, production-ready library that's designed for creating creative animations. Read More
    • The solar system was recreated from this great Codepen created by Malik Dellidj. It's nothing complicated, it's all based on div rotation with pseudo-elements inside that contains the images of the planets. I recommend you try it yourself!
    • Added counter() function for my pseudo-elements content in Tab button. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Watch video(1). Read More(2)
    • Implemented defer to my script tag. The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script is fetched asynchronously, and it’s executed only after the HTML parsing is done.

    You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

    Additional feedback or a criticism will be appreciated! 😅

    Thanks! 😁

    Planets - ReactJS, Styled-Components, Framer Motion, Webpack

    7

    Michal• 665

    @mbart13

    Posted

    That's like the ultimate solution to this challenge, no point even attempting

    Thanks! :P

    but seriously, isn't 'defer' implied with modules? I'm not sure we have to add it in 'script' tag

    1
  • Michal• 665

    @mbart13

    Submitted

    First of all I wanted to appreciate how well the starter files for this project have been prepared. Responsive images, icons and especially big products.json file containing products data with paths to all images. It must have taken a lot of work, so for that big thanks to FM team (not sure who prepared that, would that be Matt or Em)

    And this was such a great challenge. It's like everything I learned during these 5 months since I joined FM combined into this one big project: modals, custom radios, routing, form validation (checkout form was huge!) and especially creating reusable components. I also tried some completely new things for me like animations, inspired by Tediko and his awesome landing pages I added some on scroll animations on the home page.

    As far as accesibility, new thing for me was 'Skip to content' link and aria-disabled attribute on button instead of 'disabled' for more inclusive disabled form button when cart is empty. For the full list of techniques and tools I used you can check out README.

    One thing I couldn't figure out. In Firefox hero section is included in tabbing order for some reason. I don't see this issue in Chrome. Is that some kind of Firefox bug I'm not aware of, or something wrong with my code?

    If you see anything wrong or that needs to be improved, please drop a comment

    Next.js, Chakra UI, Redux Toolkit, React-Hook-Form, Atomic Design

    #chakra-ui#next#redux-toolkit

    4

    Michal• 665

    @mbart13

    Posted

    fixed so far:

    • changed validation mode to onBlur
    • modal with empty cart will not have link to checkout
    • user is not able to add negative quantity to cart
    • added aria-current="page"
    • fixed focus issue
    1
  • P
    tediko• 6,680

    @tediko

    Submitted

    Hello👋!

    This is my 30th solution on Frontend Mentor! 🥳 The project was made using ReactJS which I just started to learn. I've always liked breaking my code into modules or parts so I instantly liked building my app using components that manage their own state. I also enjoyed writing JSX syntax which makes the code very readable and transparent. The fact that rendering logic, functionality is inherently coupled with UI logic is awesome. I look forward to learn more about React because many of its benefits can be seen at first glance. List of things I learned or used creating this project:

    • I used ReactJS library to create an app. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. Read More(1) - Watch tutorial(2).
    • Implemented defer to my script tag. The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script is fetched asynchronously, and it’s executed only after the HTML parsing is done. Read More
    • Prevented body scrolling on iOS while the mobile menu is open. So far I was using helper class with overflow: hidden on the <body> element to prevent scrolling. But unfortunately, that does not work on iOS. (It does work when nav is on top of the window whole time but it doesn't when we add position: fixed to it when we want our nav to be always on top of our viewport). I use position: fixed on body in combination with storing the scroll position of the user so we can restore the scroll position after the fact. Read More

    In this project I also added touch-enabled mobile navigation, accessibility skip to content link, sticky nav menu using Intersection Observer API and others. You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

    I would like to thank @ApplePieGiraffe for giving me great resources about React and also @brasspetals for sending me good article about how to section your HTML. During the course of the project, I noticed how much I could use a code formatter like a prettier. I will definitely start using it in the next project, if you have any tips about it, please. Any good resources about react files architecture? Additional feedback or a criticism will be appreciated! 😅

    Thanks! 😁

    Bookmark - ReactJS, Webpack, Sass, BEM, Mobile first, IO API

    4

    Michal• 665

    @mbart13

    Posted

    Hello Tediko,

    For files architecture, I'm using Brad Frost's atomic design in react projects (well, one so far + the big one I'm working on right now) https://atomicdesign.bradfrost.com/chapter-2/

    It just fits react in my opinion, but there are many approaches to structuring react project

    I'm wondering how do you like functional style of programming in react? You used to do OOP in vanilla js

    Marked as helpful

    3
  • Michal• 665

    @mbart13

    Posted

    I would suggest to check your project on various devices (there are tools for that), currently on larger screens your background image doesn't take the whole space

    0
  • Michal• 665

    @mbart13

    Posted

    The error message is showing as soon as the page loads, how did you miss that?

    0
  • Jose• 40

    @Goomerr

    Submitted

    This is the first challenge I have done and it is also the first job done from scratch completely by me. I hope you like it and are kind enough to comment on possible mistakes you have made or things to improve: Thanks

    HTML, CSS y JavaScript

    2

    Michal• 665

    @mbart13

    Posted

    Hi Goomer,

    Kudos for trying to tackle this challenge, but I would really advice to do some easier newbie ones first and then come back to this one later.

    0
  • Michal• 665

    @mbart13

    Posted

    overall not bad, 2 tips

    when you set height 100vh on main, use min-height instead. That's a good habit to get into from start

    if you used flex on card you wouldn't need these media queries with margin top on button. If you made card flex container and flex-direction column you could target button and use margin-top: auto, and it would push button to the bottom

    Also use padding on card to push items from the edge, you are using margin where you should be using padding

    0
  • Anna Leigh• 5,135

    @brasspetals

    Submitted

    Hi, everyone! 👋 This project ended up being far more complicated and time-consuming than I anticipated, but was a great learning experience.

    The desktop bookmark button interaction is a bit different than the design - it toggles. I wanted to experiment and have a bit of fun. 😄 Check out the README for my full list of “additions” and “deviations” if you’re curious!

    Questions:

    • How much of a hot mess is my JS? 😅 Up until now I’ve only used it for menu toggling, so this was a challenge. I’m sure there’re a million better and more efficient ways to go about everything I did. Please, let me know!
    • The largest challenge was keyboard accessibility, which I’m still having major issues with. The selection modal focus trap works when you open the modal using the “back this project” button, but doesn’t function correctly if you use the “select reward” buttons. It also breaks once one of the radio buttons has been selected, so I think that may be the issue. Does the focus trap have to be reapplied/"refreshed" every time an input is selected? Any insight would be appreciated!

    Shoutouts:

    Crowdfunding Product Page - SCSS, JS, Grid, CSS Animations

    #sass/scss

    6

    Michal• 665

    @mbart13

    Posted

    Glad to hear I'm not the only one who suffered through this challenge 😂

    Really admire that to you even tried to implement modal trap, I just gave up

    As to js, well... I would advice to check some framwework like react, vue. It would help you structure your code and save you pain of this endleess classlist add/remove

    1
  • T
    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

    Michal• 665

    @mbart13

    Posted

    pictures appearing on scroll blew my mind, teach me! :D

    raised_hands

    1
  • P
    tediko• 6,680

    @tediko

    Submitted

    Hello👋!

    Im surprised how much I learned from a seemingly easy challenge. I ran into problems with CORS on firefox and lost a lot of time trying to figure it out. Hopefully I found solution. List of things I learned or used creating this project:

    • This is first time I used webpack. And more specifically I used laravel mix which is a wrapper for webpack and targets the 80% usecase. I didn't realize how powerful tool it is. LINK
    • Implement an environment variable (link) for my API_KEY. This is a variable whose value is set outside the program to secure our sensitive data. I did it with serverless Lambda function on netlify, so my API_KEY never shows up in my code and no one will steal it. Tutorial
    • This is first time I used object literals (link) instead of if statement in Tracker.changeContent function. Shortly, we have an object where the keys are the conditions and the values are the responses. Then we can use the square bracket notation to select the correct value of the object from the argument passed in. This looks clean and I will definitely continue to use this.
    • Added aria-live="polite" and aria-atomic="true" to my .tracker__results-wrapper element to expose dynamic content changes in a way that can be announced by assistive technologies after my results inner elements change content.
    • I didn't like that results container with address informations cover the map and user can't do anything with that. Added button to hide that container. More useful on mobile tho.

    Errors that I encountered:

    • The problem I talked about is only on Firefox. Console throws an CORS error -> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource. It turned out that after the recent firefox update you cannot fetch data between different origins. The fix is to send request to a proxy. A proxy acts as an intermediary between a client and server. The proxy server operates in between the frontend web app making the request, and the server that responds with data. Simply add https://cors.bridged.cc/ to any URL you’re fetching from or use cors-anywhere. Read about this CORS error. Since i work with serverless function on netlify i didn't have to put this in my fetch, because netlify fetching that data for me. But i think that info will be helpful for others.
    • Since we're using proxy, we have to somehow get user IP if we want to display user info on init. That is because geo api will return proxy ip address on default. I use cloudflare trace utility to work around this problem. It retunrs a plain-text set of key/value pairs.

    Special thanks to @brasspetals for total help, @mattstuddert for helping with these CORS problems and @grace-snow for for throwing the link with object literals on slack. No specific questions here but any additional feedback will be appreciated! Thanks! 😁

    IP Tracker - Mobile first, Sass, Environment variable, Webpack, JS

    6

    Michal• 665

    @mbart13

    Posted

    I wish I'd thought of this hiding map button, cool :)

    Also, I don't know why it's showing incorrect location for me, it used to work correct. Maybe they changed API...

    1
  • Fraser Watt• 1,790

    @fraserwat

    Submitted

    This was the first of the "Junior" level challenges I did (I've just been doing Newbie ones before this), and I'm pretty pleased with how it turned out! 🥳

    SCSS seems clean and without any extra unnecessary stuff, although I'm sure there's stuff I could improve on so really any pointers on stuff I might have missed, or better ways I could have gone about it would be great!! 🙏

    Testimonial Grid (My First Junior Project!!!)

    2

    Michal• 665

    @mbart13

    Posted

    Hello,

    good job on the challenge!

    this is box shadow from figma file, if you would like to match design

    box-shadow: 40px 60px 50px -47px rgba(72, 85, 106, 0.247378);

    0
  • J E F F• 70

    @JustGJ

    Submitted

    I tried to make the application more complete. All feedback is appreciated ! :)

    React - SCSS - BEM

    2

    Michal• 665

    @mbart13

    Posted

    Hello,

    Looks good, but could use "go back" button on job details page. Or making logo clickable so that it takes me to main page.

    1
  • Michal• 665

    @mbart13

    Posted

    hi,

    you need to put "margin: 0 auto" on the body

    currently content is not centered

    0
  • P
    Nicholas• 235

    @fytrw

    Submitted

    Hi!👋

    Here is my new Junior project! It's quite big compared to my other projects. I changed it a little bit the project design. Also added more functionality like checking input value. I would like to add more improvements in the future:

    • add animations to modals
    • make it live - when a user adds a pledge the progress bar and stats are updated.
    • count left pledges when a user adds pledge and add out of stock appearance

    I hope I have done well.😀 It will be great to hear some feedback from you!

    Crowdfunding product page

    2

    Michal• 665

    @mbart13

    Posted

    Hi Mikolaj, I'm currently doing this challenge and I know it's not the easiest, so good job on this

    with that said I just want to give you heads-up that in Firefox when I open modal and select a pledge, it breaks a little, so you may want to check this out

    Generally I'd recommend looking at project in at least 2 browsers

    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

    Michal• 665

    @mbart13

    Posted

    I also think it looks great

    maybe it would be easier to navigate if you showed which link is currently active

    I believe it can be done with NavLink from react-router https://reactrouter.com/web/api/NavLink

    1