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
OverviewSolutions0Comments1602

All comments

  • P
    バレンタイン 😈• 64,290

    @vcarames

    Submitted

    Mobile First approach 📱 > 💻

    Layout was built using CSS grid along with grid-template-area;

      .card-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      "supervisor team calculator"
      "supervisor karma calculator";
  }

    The font-size were styled using clamp and calc to minimize the use of the media query and make them fully responsive to all screen sizes.

    Icons were positioned using position: absolute;.

    Any and all feedback is greatly appreciated!

    UPGRADES: 😎

    • Entrance Animation
    • Glassmorphism Card Background
    • Hover Effect
    • Additional Layout
    • Background

    Four Card Layout [Mobile First + CSS Grid]

    6

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Your solution to this project looks fantastic! Nice work! 🙌

    Regarding the heading, it's all one heading, so I would go with a single h1 with span elements inside to differentiate the styling. Also, a section defines a group of related content. So you could wrap all the cards in a single section and then use individual div elements for each card.

    I hope those pointers help! Keep up the incredible work! 👍

    Marked as helpful

    1
  • P
    Yazdun• 1,310

    @Yazdun

    Submitted

    Hello everyone, This challenge turned out way more trickier than I've anticipated. Specially It took me some time to come up with a solution for masonry layout on the landing page.

    This is the first time I'm using Typescript and the reason I took this challenge was learning Typescript, So I'd like to get some feedbacks in regards to TS 😅

    I'd like to know about your thoughts and opinion on this solution, possible issues you encounter or any improvements you may come up with.

    Thanks in advance

    Galleria | Next and Typescript

    #framer-motion#next#react#typescript#react-testing-library

    1

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Excellent work on this project, Yazdun! I've never used TypeScript personally, but I just wanted to say nice job. Your project looks fantastic, and it's obvious you've paid great attention to detail.

    I also love the challenge difficulty badge you've created for the README.md file!

    Keep up the incredible work! 👍

    Marked as helpful

    4
  • Kevin Mason• 300

    @mrfinesse47

    Submitted

    I found that having a non-monospaced font for a timer where the text is changing constantly is very difficult to keep steady in place. If I had to ever make a timer again i'd use a mono-spaced font. Any ways how do you guys like it?

    Pomodoro Timer created with the Vanilla JS framework

    #sass/scss

    2

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Excellent work on this project, Kevin! It looks great and works well!

    My main piece of feedback would be to avoid adding event listeners to non-interactive elements. For example, you're using li elements to switch timers and an img element to open the settings modal.

    Whenever you expect a user to interact with an element, you should use an interactive element (e.g. a' or button`). This will allow people who can't/don't use a mouse or trackpad to use your app.

    As the timer switchers and the settings trigger don't navigate to new pages, I'd recommend using button elements to trigger the actions.

    It's always a good habit to try navigating anything you build while only using your keyboard to see if you can still use the app. If not, it needs refactoring to make it more accessible.

    I hope this helps. Keep up the great work!

    Marked as helpful

    1
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Brilliant work on this challenge, Nakoya! Your HTML looks great, and you've done an excellent job getting the solution close to the design. My only small suggestion would be to add focus states so that the label has an outline when the corresponding input is focused. You can do that with the sibling CSS selector like this input:focus + label. The visual state changes if you use the arrow keys when on the radio inputs, but you'll notice if you tab through the page, there's no initial style to provide a visual cue.

    I hope that helps. Keep up the incredible work! 👍

    Marked as helpful

    0
  • Benja.min• 700

    @BenjaDotMin

    Submitted

    I went with local storage to store the users bookmarked items, so they persist on refresh.

    Thank you for any time spent on feedback!

    Browse videos app - React, SCSS

    #react#sass/scss#framer-motion

    1

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Excellent work on this challenge! You've hit the nail on the head with the design comparison. I like the subtle animations you've added as well. Here are a couple of small pieces of feedback:

    • If you scroll down on a page and then navigate to a new one, the screen remains halfway down the page. I'd expect it to pop up to the top when navigating to a new page.
    • The items are duplicated between the Movies and TV Series sections on the Bookmarks page. So there are movies showing in the TV series section and vice versa. You could use .filter() instead of map to return only the items of a given category.

    Amazing work overall. Keep it up! 👍

    Marked as helpful

    2
  • Angelo Barbarulo• 280

    @Jorahhh

    Submitted

    Really nice and funny challenge!

    I tried to make this landing page super responsive on almost the most (common) screen. But I'm not sure of what I've done. SO!

    • I did maybe too many '@media screen', but I'm sure there is another (and right) way to make it responsive as well, without using tons of lines code.

    • Had some problem with the orange square (in my code '.info'). I was undecided if I should use 'position: absolute;' or 'position: relative;'. By the way, I think that was not the better choice.

    That's all, people! I would be glad if anyone would leave some feedback (or suggestion), specially on the first point.

    Equalizer Responsive Landing Page

    2

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Hey Angelo! Excellent work on this challenge! It's great that you've made such an effort on the responsive side. You have quite a few instances where you're setting specific heights, widths, margins, and other values to position elements. This seems to be what's contributing to most of your repetitive code.

    I'd recommend checking out Every Layout, which is an excellent resource to help shift layout decisions onto the browser instead of manually overriding your own code and fixing positions.

    If you find yourself writing code like margin-left: 13%; and top: -410px;, it's usually a sign that there's a better way to do it. These are what developers call "magic numbers" as they're pretty arbitrary and are essentially plucked from thin air.

    You'll find yourself using them less and less as you continue to gain experience building projects. So, for now, it's mostly a case of being aware of it and then trying to find more reusable solutions whenever it happens again.

    I hope this helps! 🙂

    P.S. Please try to avoid swearing in your messages as it goes against our community guidelines. You can edit your message by going to "Visit challenge hub" at the top of this page and updating your solution. Thanks! 👍

    Marked as helpful

    3
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Good to see you getting back into it, Gerben! Doing this project as a time-limited challenge is a fun idea. I know this was more about speed vs getting everything "right", but I'd recommend checking out the accessibility report 🙃

    I hope you're doing well!

    2
  • Raymart Pamplona• 16,140

    @pikapikamart

    Submitted

    Hello. This is my 24th challenge here and my first premium challenge taken^^

    This challenge was taken around January but took me too long to build it. January and early February was really hectic as again, lots of school activities/projects and even short film animations, those was grouping so that I had to shift my focus for it at the time! Glad that it was over. Phew:>>

    I picked this challenge as a first out of the premium challenges because this challenge was the one that I really want to create when I saw way before the challenges here at fem and i'm really glad that I was able to take this one!!

    This is my first time using styled-component as well. I haven't searched articles about what is the proper approach or convention when using styled-components. That is why for every styled-component that I used, I prefixed it with a "Styled" word like "StyledNavbavList", I was thinking that it is too verbose and kind of felt a bit off at first but I just continued with it. It will be really nice if you share your thoughts about using styled-components, specially naming each styled.

    I added some animations as well on the site and I think I got the functionalities right? Hehe, hoping so. For the create-plan page, I initially thought that there will be no logic in the price computation, the moment when I had to push now the site, I saw a readme on the challenge folder from the challenge.zip, there it was. The logic for the computation :>>> That was close submitting a not fully functional site!!

    Lastly, if you could give me a resource/information on how to render svg dynamically. For example, I have 3 svgs in a folder, how can I just import that and use it without using the svg as a value for src prop in the img. Thanks!

    (The hover for the social media icons was supposed to make it colored paleOrange but never did it because I want to render svg dynamically and not manually adding svg code if there is such a way)

    Overall, I am really happy with this one and hoping that I could not tackle more challenges. Thank you for checking this one out!!

    Coffeeroaster Multi Page | Next.js , Mobile first

    #framer-motion#next#styled-components#typescript

    7

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Great to see you post a solution for your first premium challenge, Raymart! ✨

    Your project looks fantastic, and I love the extra details like the animations and the sticky header. Great to see you add the prefers-reduce-motion query as well for those who prefer not to see animations.

    I'd recommend reviewing your implementation of the "Create plan" page with keyboard navigation in mind. I couldn't choose individual options as it always focused on the group when tabbing through the content. I could use the arrow keys, but I'd expect to be able to tab through the options easily and select one using space or enter, which I wasn't able to do.

    I'd recommend adding the name attribute to your radio inputs as well so that they're grouped appropriately.

    I hope that helps. Keep up the excellent work! 👍

    Marked as helpful

    1
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Fantastic work, Danilo! Your solution looks great, and the animations are really smooth! Just a quick heads up that the LeafletJS map isn't working for me at the moment. It has the words "No Active Subscription" tiled across it.

    Keep it up! 👍

    Marked as helpful

    0
  • Maria• 200

    @mariapenaa

    Submitted

    Hey! This is one of my first projects with firebase, so there are probably still a few errors I have to workout. I´m still learning how React apps should be organized, and near the end of this project I realized I had made many mistakes when I created each component. So I would really appreciate any feedback related to react and how the data flow should be organized. Thanks!

    Interactive comment section with firebase storage

    #firebase#react

    2

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Excellent work on this challenge, Maria! I really like how you've adapted it and made it your own. One area I'd recommend reviewing is using buttons to trigger actions like replying and deleting comments. If you expect a user to interact with an element to trigger an action, it needs to be an anchor tag or button to ensure it's accessible to anyone not using a mouse/trackpad.

    I hope that helps. Keep up the awesome work! 👍

    Marked as helpful

    1
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Excellent work on this solution, Mateusz! Your project looks incredible, and I like how you've used Storybook and implemented tests.

    There are a couple of areas you could improve, which would be great to see:

    • You've used buttons for setting up the game and restarting a game, which is great. However, you've not used them for the actual game tiles, which means they're not accessible to anyone navigating using a keyboard. Adding buttons would make playing the game accessible to anyone not using a mouse/trackpad.
    • As @yaloswog mentioned above, the CPU player isn't smart. An excellent way to test yourself further would be to make the CPU smart. This would mean the CPU would proactively block potential winning moves from the player and try to build sequences of its own to win.

    Keep up the amazing work! 👍

    Marked as helpful

    1
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Awesome work on this challenge! The visual side looks great. One thing I'd recommend improving is the accessibility of it. You're not using interactive elements, like button, for the tabs, start/resume, or to open the settings modal. This means anyone not using a mouse/trackpad can't use the application.

    I'd recommend refactoring to add interactive elements and test navigating the app using only a keyboard to see if the accessibility has improved.

    Keep up the good work! 👍

    Marked as helpful

    1
  • Remus D. Buhaianu• 3,125

    @Remus432

    Submitted

    Hey guys!

    This is one of the craziest projects I've worked on! :) Nothing prepared me for what was about to unfold with this seemingly simple project :D

    Initially, this was supposed to be a straightforward Newbie-level challenge from Frontend Mentor. As far as I can tell, this must've been the simplest and easiest design for a Frontend Mentor challenge. Including the project setup (files, folders, etc), finishing this project required less than 30 minutes.

    From what started off as ~25 minutes project, it ended up into a min full-stack project that spanned across hours and used multiple technologies (some of which I was either completely unfamiliar with or was still learning)

    There's still some tweaking I'd like to make to it, but for the time being, I think the project is good enough to be reviewed by you guys!

    Here are the technologies / tools I've used for it:

    • Svelte
    • Typescript
    • SCSS
    • QR API
    • GSAP
    • VanillaTilt
    • Express
    • MongoDB
    • Mongoose
    • Puppeteer
    • Heroku
    • Vite

    Special thanks to @ApplePieGiraffe, @darryncodes, and @skyv26 whose works have really inspired me to keep growing as a developer!

    Thanks a lot for checking out my project and see you in the next challenge!

    Fullstack QR Code Generator - Svelte-TS | Express | MongoDB | and more

    #accessibility#express#svelte#typescript#mongodb

    10

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Wow, now that's what I call customising a project and making it your own!! 😍

    I love that this simple project sparked that idea and turned into this. What you've created is AWESOME!! Fantastic work on this challenge, Remus.

    I'm already looking forward to seeing what you build next! 🙌

    Marked as helpful

    2
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Excellent work on this challenge, Clément! I like the additional verification you've added, and your solution scales up/down really well on different screen sizes 🙌

    Marked as helpful

    1
  • PhoenixDev22• 17,130

    @PhoenixDev22

    Submitted

    Hello There, I have completed this great challenge, I have learned a lot. I would love to hear your suggestions regarding clean code, and other things. Please let me know if I have made something in the wrong way. Thanks in advance.

    Four-card-feature-section HTML & CSS

    3

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Excellent work on this challenge! Your code looks good, and I like that you've added a 2-by-2 grid for tablet screen sizes to help with the responsiveness. Keep up the great work! 👍

    Marked as helpful

    0
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Hey Khaled, nice work. The main thing I'd recommend working on with this project would be to make it accessible. At the moment, you're using div elements instead of buttons for the keys. div elements aren't interactive and so can't be accessed by people not using a mouse/trackpad to click on the keys. Always be sure to use interactive elements if you expect the user to interact with the page.

    Also, you're not using any of the technologies you've added as tags. I'd recommend removing the tags so that they match up with what you've used to build the project.

    Keep it up!

    Marked as helpful

    0
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Hey Vivian! Congrats on submitting your first solution! I've just taken a look at your code. Here are a few suggestions:

    • I'd recommend reviewing HTML semantics for structural elements. You've used a section element for each column, whereas sections are typically used for larger groupings of themed content. For example, I'd expect a single section element to be nested inside the main element, which wraps three div elements that would make up the columns. Here's the MDN article on section elements for more info.
    • You've currently got multiple h1 elements. Although this is valid HTML, it's generally still considered a bad practice, as it can cause accessibility issues with the content hierarchy. Instead, I'd recommend sticking to a single h1. This project is tricky, as all three headings are the same level. Personally, I'd have a visually hidden h1 heading saying some like "Frontend Mentor 3-column preview card component challenge" and then the visible headings would all be h2 headings. You don't need alt text for the icons, as you're just repeating what the headings say. In this instance, I'd leave them blank, e.g. alt="", as this will ensure screen readers skip them. They add no context to the content, so it's OK for screen readers to ignore these.

    I hope these tips help. Keep up the great work! 👍

    2
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Hey Niladri, it seems the live version of your project hasn't been updated since you made edits to your code. This is why the reporter is still showing duplicate ID errors. If you use the inspector to look at the HTML in your project, you'll see the duplicated anchor tags with the "cancel" ID.

    I'd recommend clicking on the "Learn More" links in the report to try resolving the other issues. Most of them will be cleared up by adding a main element and a h1 for the main heading, which in this instance would be the "Order Summary" heading.

    Also, I'd recommend avoiding IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.

    I hope this helps! Keep up the good work! 👍

    Marked as helpful

    3
  • Byron• 2,120

    @byronbyron

    Submitted

    Hello ladies and gentlemen! Here's another React project with Tailwind. Getting the filtering to work properly was quite tricky 😅. Really please with the final result for this one! Feel free to leave a like and maybe even a comment as well. Happy coding everyone!

    Job listings with filtering using React and Tailwind

    #react#tailwind-css

    1

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Hey Byron! Fantastic work on this challenge. The filtering is definitely the most challenging part of this project, and you've done an excellent job. Your solution matches the design brilliantly as well, and I can't see any accessibility issues. Keep it up! 👍

    0
  • Benja.min• 700

    @BenjaDotMin

    Submitted

    Hello there! This was a fun little project, and I got to try implementing a functioning map. Any advice is welcome!

    Learning Vue and Maps

    1

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Hey Benjamin! Excellent work on this project. I'm glad to hear you enjoyed it! Your solution looks fantastic, and it's good to see you made the map interactive. I'd recommend reviewing the accessibility and HTML reports and resolving those issues. But you've done a brilliant job overall. Keep up the great work! 👍

    Marked as helpful

    1
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Hey Christian! Nice work on this challenge. Your solution looks great! I'd recommend reviewing how you use section elements. Sections are typically used to outline standalone groupings of content on a page. For example, an introductory section or a "How it works" section on a landing page. I'd expect a section element as a child of the main element to wrap the whole card component for this layout. I'd then use div elements for the smaller content divisions.

    I hope that helps. Let me know if you have any questions! 🙂

    Marked as helpful

    0
  • Igor Ostojic• 300

    @igor-ostojic

    Submitted

    I am very proud of the smooth animations i managed to make with JavaScript / CSS for both mobile and desktop versions of the site.

    If there is an easier way of animating pop-ups / modals , please let me know !

    Article preview component

    2

    P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Fantastic work, Igor! Your solution looks excellent! As @Dev-Martinien mentioned, I'd recommend reviewing the accessibility report and resolving those issues.

    To answer your question about the animations, how you've done it by toggling classes and keeping the styles in your CSS is perfect. Wherever possible, it's best to keep your styles in the CSS. JS libraries like GSAP are brilliant for more complex animations and sequences, but that would be overkill for this.

    When reviewing your code, I noticed a couple of areas where I'd recommend tweaking things:

    • You're using Sass, which is great. However, you're nesting a lot of selectors unnecessarily. Nesting selectors adds to the specificity of the generated selector chain in the compiled CSS file. For example, in your CSS, you've got this selector section .right_section .social_wrap .name_and_date .avatar which would be much be as .avatar. Creating overly specific selector chains can lead to specificity issues, especially in larger codebases. So it's best to keep selectors as simple as possible.
    • You're using max-width media queries at the moment. Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and benefit from loading in fewer styles for mobile users, which can be a nice performance gain.

    I hope these tips help. Keep up the great work! 👍

    Marked as helpful

    2
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Happy New Year! 🎉 A great solution to kick off 2022! It matches up beautifully with the design. Well done!

    One small thing I'd recommend reviewing is how you're doing the hover state for the image. Instead of having two img tags, you could wrap the main img in the anchor tag and then use a pseudo-element with a background-image for the hover state. This would clean up the HTML ever so slightly 🙂

    Keep up the brilliant work!

    Marked as helpful

    0
  • P
    Matt Studdert• 13,591

    @mattstuddert

    Posted

    Excellent work on this challenge, Anosha! The solutions you've been submitting are really high quality! 🙌

    You've received some great feedback so far. One thing I'll add is that you're quite right about the brand name being a good h1 in this design, but I'd recommend wrapping the h1 around the logo and changing the image alt text to "Fylo". The alt text of "Logo" isn't very descriptive, as it should say who the logo is for. Wrapping the img in a h1 will mean the "Fylo" text is defined as a h1, which will have the desired effect.

    I hope that helps. Keep up the great work! 👍

    Marked as helpful

    2