Skip to content
OverviewSolutions
35
Comments
40
Arne
@Dudeldups

All comments

  • Nahin Moreira•240
    @nahinMSMSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Este projeto foi uma ótima oportunidade para colocar em prática minhas habilidades em JavaScript, HTML e CSS. A integração com a Advice Slip API foi particularmente desafiadora e ao mesmo tempo gratificante, permitindo-me explorar a manipulação de dados em tempo real.

    Fico animado em compartilhar essa solução e receber feedbacks para continuar melhorando minhas habilidades de desenvolvimento front-end.

    Advice generator app

    1
    Arne•1,110
    @DudeldupsPosted 3 months ago

    Hello!

    Your solution looks good, there's just one small flaw with the divider. Always look at your result with the dev tools of your browser (or better more than one browser). If you set the viewport to 320 px (that's the smallest viewport you should take into account when laying out the website) the divider is breaking out of the card.

    Do not use px to declare font-related sizes. This is crucial for accessibility. If a user sets a custom font-size in their browser and you use rem or em, their font-size will also change accordingly.

    Headings should always be in descending order. There's no reason to use <h6> since there is no other heading on the site. Don't use heading levels just because they "look like that heading".

    And here's an article about the alt attribute, the divider should have an empty alt attribute, since it does not add to the info on the page. It's just a decoration item. https://www.w3.org/WAI/tutorials/images/decision-tree/

    Please take the time to go through your solution and try to improve it. As a small tip, you can visit the challenge hub after you completed a challenge and look at other ppl's solutions. Look for some that have comments on them and see if someone gave feedback to that person, there's a high chance that you can also learn from that 🙂

    Hope this helps, happy coding 👾

    Marked as helpful
    0
  • Ian Parker•200
    @i-prkrSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am really glad that I think the design is properly responsive, as I'm still getting comfortable with responsive design elements. I was able to successfully use the grid system with media queries along with the clamp() for font sizing.

    What challenges did you encounter, and how did you overcome them?

    Initially I had chosen to use flexbox for the responsive design, but found it difficult to create the component correctly according to the design. The design was responsive but I was having difficulty getting the correct sizing for the larger screens. Using the grid system I was able to better halve the card for the image and product info.

    What specific areas of your project would you like help with?

    I would really like feedback on whether the solution correctly implements responsive design, particularly whether my font sizing is good practice using the clamp function. Any tips on better practice would be greatly appreciated.

    Responsive product preview card

    1
    Arne•1,110
    @DudeldupsPosted 3 months ago

    Hello!

    Here are some tips to improve your solution:

    You should read through the basics of semantic HTML again, there are some errors that are covered in very basic beginner tutorials. For example, a website should only have one <h1> heading. The product name does not qualify for an h1 level heading. In this single component, you don't really have an h1 so either leave it away or add one outside of the card and hide it visually with CSS.

    Headings should be in sequential, descending order. If you have a product category description like "Perfume" in this case, just wrap it in a <span> or <p>. In a real world application, the perfume's name would be a h3 or even lower, depending on the previous elements on the site. In this small example, you would probably choose an <h2>.

    The description below does not need to be wrapped in an <article> element. <article> and <section> elements should always contain a heading.

    Your choice of a <section> could rather be an <article> or just a simple <div> (or you change the section and the div.card, this would also make sense.

    To show that one price is not the current price (or old price) and the text is struck through, you can use the <del> or <s> elements.

    Please take the time to go through your solution and try to improve it. As a small tip, you can visit the challenge hub after you completed a challenge and look at other ppl's solutions. Look for some that have comments on them and see if someone gave feedback to that person, there's a high chance that you can also learn from that 🙂

    Hope this helps, happy coding 👾

    Marked as helpful
    1
  • Arne•1,110
    @DudeldupsPosted 3 months ago

    Hello Robel!

    Your solution looks good on larger screen sizes but not so good on mobile screens. The go-to is to account for screens with a width from 320px up. Your containers use a fixed width, which is generally not good. Let the elements take up the space that they need - that's what makes your site responsive. If you give the outer container and the card a max-width instead of a fixed width, then you should already see what I mean.

    Furthermore I advise you to go through the learning paths here on FEM or reading the MDN documentation about the main rules of semantic HTML. Your site should have a <main> element and since there is no <header> provided by the challenge, you could have just left it out for this one, but the attribution fits perfectly inside a <footer> element (sibling to the <main>)

    Also there are general rules for CSS which you should look at again: Do not declare font-related CSS styles in px, this makes the website inaccessible to people that declared a custom font-size in their browser. Using rem accounts for that.

    Another quick tip from my side, it's generally easier and more common to use (min-width) media queries, so going "mobile-first". On larger layouts you'll have it easier, because stuff just stacks on top of each other in mobile views most of the time. This is the default behavior of block elements. Then you only have to add min-width media queries for larger screens to add the neccessary styles. 😀

    I strongly advise you to go through your code and look at it again to fix at least the stuff I pointed out and also re-test your site with the help of the developer tools of your browser for different screen sizes. You should at least use Firefox and Chrome to ensure it works for most of the users.

    Hope this helps, happy coding 👾

    Marked as helpful
    0
  • Valeria Montoya•240
    @ValeriaMontoyaSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the way I organized folders, files and even my code haha

    What challenges did you encounter, and how did you overcome them?

    I feel like it was pretty easy to build the project.

    What specific areas of your project would you like help with?

    Let me know if you see anything I could improve :)

    Social links profile: mobile-first solution using flexbox

    1
    Arne•1,110
    @DudeldupsPosted 9 months ago

    Hello! 👋🏻

    Your solution looks good, well done! You could give the card a max-width because card components that get too wide look mostly weird 🤓

    Using a <figure> element is good, if you have written text that also describes the image, you can also use the <figcaption> as a child of the figure.

    A <section> should always contain actual content that makes sense viewed separately from the rest of your site. You can replace the first section with a regular div.

    For the second section, a <ul> with each link inside a <li> would be semantically more appropriate. Almost always where there's a repeated element, you can think of a <ul> or <ol> if each item is actually numbered consecutively.

    In your CSS, you set the font-size to 62.5%. There's no need to do that. Just get used to think in rem and don't recalculate something that has been calculated. Users that change their default font size have potential issues with this and it's a red flag for potential employers, if you want to apply for jobs later.

    And one quick tip for your focus state, if you use :focus-visible instead of :focus, the style will only be applied for keyboard interactions. This is almost always the desired behaviour, of course there are use cases for :focus, too 😋

    Hope this helps, happy coding! 🤖

    Marked as helpful
    0
  • Arne•1,110
    @DudeldupsPosted 9 months ago

    Hello! 👾

    Let me give you some tips on how to improve your solution.

    You are setting your font-sizes in px while you should do it in rem or - if you know what you're doing - in em. This way, if a user has set a custom font size in their browser, the font on your page will adjust accordingly. If you use px, the font size is static.

    When you need uppercase letters, do not do this in your HTML. Use CSS to make them uppercase. Most screen readers would pronounce the letters one-by-one and this would be confusing.

    Most of the time, there's no need to set a fixed height on elements. If you give the elements some padding you can just let them take the space they need. This also simplifies making the site responsive.

    In your HTML, your site is missing a <main> element and for the footer you need to use the semantic element <footer>.

    The headings always need to be in descending order. Every website needs one h1, the next sub-headings are h2 and the ones below h3 and so on. If you have two sibling sections, both would have an h2 as title.

    When citing people's testimonials or similar, you should use the <blockquote> element.

    If your images do not add any meaning for the website, the alt tag can be empty, but for everything else you should always provide meaningful alt text.

    A <menu> element is the same as a <ul> and should always have <li> as direct children.

    On several screen sizes, your site has a horizontal scroll bar. This is because you set fixed widths on elements. This is the same as the fixed height, if you just let the element take up the space it needs, you should always get away to use a max-width.

    I can see you didn't get any feedback on your previous solutions. One good way to still learn something, is look at other ppl's solutions for the same challenge that get feedback. And the good thing is, that the beginner challenges have plenty of submissions each day here 🙂

    I would advise you to do some more easy challenges and maybe tackle the new learning paths that have just been introduced here on Frontend Mentor 🤠

    Hope this helps, maybe come back later to this challenge and do it again or go ahead and try to implement the changes to adjust the solution 🙂

    Happy coding!

    Marked as helpful
    1
  • matbac85•600
    @matbac85Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully implementing grid layouts in my project.

    What challenges did you encounter, and how did you overcome them?

    I couldn't trouble figure out how to decrease font size without using media queries. I've searched online and consulted documentation on units of measurement like vh, vw, etc., but haven't found a solution. Can anyone help me?

    What specific areas of your project would you like help with?

    I would like the solution to adjust font sizes based on screen size without using media queries. Additionally, I'd like to know how to create a smooth transition in the size of elements between screens.

    Blog Preview Card with hover effect

    4
    Arne•1,110
    @DudeldupsPosted 9 months ago

    Hello! The solution looks good!

    Some small tips: When creating a website, you should always consider screen sizes from 320px and up. Your component does not have any space to the borders of the screen when viewing it at 320px.

    Also, a good use case for a <figure> with a <figcaption> is the profile picture + name 🤓

    And you don't have a <main> element in your HTML. A real website should always have a <header> and <main> element, as children of the <body>. It's probably less important on this single component challenge, but keep it in mind for future projects

    For your first question: To adjust any size (font-size, margin, padding...) you can use the clamp() function. If you already think like this, I'm sure it will become your best friend. You can also search for "clamp generator" at the search engine of your choice and it will calculate a clamp for you.

    Using anything else than rem or em for font-sizes is not a good idea. And clamps of course.

    You don't really need a transition "between screen sizes". When a user looks at a website, it is very unusual for the screen size to change. You should rather focus on having the site look good on all separate, static screen sizes 🙂

    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarSubmitted 9 months ago

    🎁 Features:

    • Next.js Server Actions to fetch data with:
      • Filtering 📂
      • Pagination ♻️
      • Sorting 🔍
    • Achieved +95% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
    • Resemblance with the original design. 🎨
    • Small animations with Framer motion. 🎬
    • No errors or warnings using ESLint (Airbnb style guide). ✔️
    • Custom hooks. 🎣
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. 💻

    🛠️ Built With:

    • Next.js 14. ⚡
    • TypeScript 🚀
    • TailwindCSS. 🎨
    • ESLint (Airbnb style guide). 📦
    • Framer-motion. 🎬
    • npm - prettier - prettier-plugin-tailwindcss. 💻

    🔍 Clarifications:

    • While the Rest Countries API was an option, it had limitations like lack of pagination and limited filtering capabilities. I opted to utilize Server Actions in Next.js and the data.json provided with the challenge. This allowed seamless integration with MongoDB for efficient data handling.
    • I acknowledge that continuous polling for change requests might consume more data, but it was implemented for experimental purposes.

    Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

    Thank you. 😊✌️

    REST Countries API (Next.js & Server Actions + TypeScript + Tailwind)

    6
    Arne•1,110
    @DudeldupsPosted 9 months ago

    Hello! 👋🏻

    I know you've been active for a long time on here, but I just wanted to say that this is a challenge tackled by many users that should not yet be doing it and I'm not lying: You are the first person I see that keeps the aspect ratio of the flags so they're not cut off on the sites 😅

    I also like the animations when you select another region from the dropdown (the cards gradually move to their "new" position). How does that work exactly with Framer Motion?

    One or two small things I saw: "Where in the world?" is kind of an inappropriate h1 heading. It doesn't really describe the site.

    Your text input is missing a label.

    Your toggle button for the dark mode is not accessible. Best practice would be to use an aria-pressed state on it. Screen readers would then pronounce it like this: "Activate dark mode, toggle button, pressed" if it's active.

    The icon does not change when the button is clicked.

    On the detail page of the countries, you set the countrie's name as an h1, but you already have an h1 in the title.

    Overall very nice solution 👌🏻

    Marked as helpful
    1
  • Barbara Ward•1,160
    @bward67Submitted 9 months ago

    This was a huge challenge for me. I first inserted the images on the cards as background images and placed them in the correct places BUT then when it came to the JS and I was appending a new section for the cards I realised I must insert them in my HTML rather than in my CSS. I had also used Flexbox on the cards but had to change them to Grid as it worked so much better when switching to a larger screen size.

    The JS was an enormous challenge and so I eventually watched a youtube video from Seer Studio and it was really good - I learned sooooo much! Thank you Seer Studio - you should make more videos!. This is the link to Seer Studio: https://www.youtube.com/watch?v=l9Qw8y3LfCY

    In the end it is not absolutely perfect as there is a very slight colored outline around the cards but maybe I will awake up in the middle of the night some time soon with the solution on how to fix it :) - ahh come on - we've all done that!!

    Responsive Mobile-First time-tracking-dashboard

    1
    Arne•1,110
    @DudeldupsPosted 9 months ago

    Hello!

    Good looking solution! Let me give you a few tips:

    The single pixel tearing in the corner of the card is a common issue with those wrapped elements with different background colors. I solved it by changing the color of the colored card to a linear gradient. So at the top you have the custom color and at the bottom the dark blue color, something like this:

    linear-gradient(cardColor 0%, cardColor 75%, blue 75%, blue 100%);

    Regarding your HTML, the h1 of a site should be the main heading of a site. Using Jeremy's name is not really appropriate here, it should be something like "Time tracking dashboard" or similar, visually hidden with CSS. Yeah I know, the smaller component-sized FEM challenges don't provide proper h1 headings. The headings inside the six cards should be "work", "play", etc. and not the time. You only created divs there, divs with only text are not semantically correct. Pure text should be wrapped inside a <p> or <span> or similiar, as needed.

    The site is missing a <main> element (usually a child of the <body>).

    In your CSS, you are setting the body's font size in px while you should do this with rem. If a user changes the default browser font size, your site will not adjust so the user won't see any changes.

    Using !important in a CSS file is generally bad practice, just as using id selectors. The selectors have different specificity, id selectors have the highest, then class selectors and then element selectors. If you use id selectors you end up having problems to overwrite this style (for example for .active classes, :hover states etc.). If you try to keep it to class selectors, the need for !important should be gone.

    When you look at the container between 565px and 1200px, it is missing space to the corner of the screen (you removed its margin at the breakpoint).

    And one small thing, you forgot to center the dashboard vertically 🤓😀

    Hope this helps, happy coding! 👾

    0
  • Arne•1,110
    @DudeldupsPosted 9 months ago

    Hello! Some things I can see that need revision:

    You are using id-selectors for your CSS. This is generally bad practice, because they have higher specificity than class-selectors and those on the other hand have higher specificity than element selectors. So when you use id-selectors, you already set the highest specificity for those CSS rules and it's problematic to overwrite them. Especially if you're working in a bigger project, at some point the question comes up: 'Why does my element behave like that?'

    For your HTML, you only used a <header> element, but your site is missing a <main> element (and a footer, I don't know if one was provided by the design)

    Also, your header does not have any background. White text on a white site is not visible. You could add a background as soon as the page is being scrolled.

    You also have a horizontal scroll bar. This is most likely due to using 100vw. You should avoid using this, as the vw does not account for a scroll bar.

    And just a tiny thing I realized when selecting the next image, you would expect the image to slide to the left, but instead it moves to the right. This feels kind of weird 😅

    Your buttons for the left and right "arrows" are not accessible. You should add an empty alt tag on the image for the arrow (so screen readers will ignore this) and add a text on the button (something like "select next/previous image"). The text can be wrapped inside a <span> and made "invisible" by adding an .sr-only class or something similar to it. (Which you would need in your CSS). See: here

    Hope this helps 👾

    Marked as helpful
    0
  • Arne•1,110
    @DudeldupsPosted 9 months ago

    Hello! 🙂

    There are some things in your CSS to optimize the site:

    Avoid setting the width to 100vw. The vw does not account for a scrollbar and your site ends up being 100vw + the scrollbar's width and you have a horizontal scroll bar.

    On the card, you have a fixed width, try to only set a max-width. Let the elements inside the container just take up the space they need.

    It's also better to use min-height: 100vh instead of height for the outer container elements. This way, on a larger project, the element could still expand if it was bigger.

    Try to find a sweet spot for a max-width of the card before the media query kicks in. When the card expands too far, the text looks a bit "lost"

    By setting a margin on <main> you push it down from its "original spot". If you used padding instead, it would just push the inner elements away from the corners of the screen and keep the <main> element where it is.

    See a good explanation here

    Hope that helps 🤓 Happy coding!

    Marked as helpful
    0
  • Alyfer Jacobsen•450
    @AlyferJTSubmitted 9 months ago

    Hi there, this one i struggled XD... I made this with what i learned this last week, so i wanted to challenge myself with some more difficulty. I really liked the result, besides there is things that i could do better, and would really aprecciate every feedback. Thanks.

    Age Calculator App [React.js, Responsive]

    1
    Arne•1,110
    @DudeldupsPosted 9 months ago

    Hello!

    Very nice result including the JS logic to count the date. I just see one thing to improve:

    You're setting the color in the style attribute with JS. It'd be better to just add another class to the className, because inline-styles are harder to maintain especially in a bigger project. This way, you'd also have all your CSS in one place and don't have to search 'Why is my text red?' ( -> Always think about your future self... and other developers looking through your code) 😄

    Oh and you forgot to connect the labels to the inputs (also input tags are self-closing, no need to add a closing tag)

    Overall, very well done! 👏

    Marked as helpful
    1
  • Arne•1,110
    @DudeldupsPosted 9 months ago

    Hello! Some things I can see:

    Let's start off with the scrollbar. It's nice that you know how to change its style, but this card component is so small, there shouldn't even be a scrollbar in the first place. Maybe keep your focus on the actual project and not overcomplicate it - there are many projects on Frontend Mentor where you can use this 😋

    Also, you don't really need any media queries for this component. Just give it a max-width and let padding and margin handle the rest. You're giving the container a percentage width, which ends up in weird behaviour.

    Furthermore, you only need to declare a fixed height on elements in very few cases. The regular way to go is using margin and padding inside your container or surrounding element, so all the stuff inside can just take up the width or height they need.

    You're setting font-size in rem which is best practice for people who don't use the browser's default fonts. Also you got a <header>, <main> and <footer> inside the <body> 👍

    In the HTML is one major flaw though, the 5 circles to choose the rating are supposed to be radio-inputs inside a <form> Radio inputs have default behavior to only allow one selection if you set the same name attribute on all 5 of them.

    Hope that helps, keep practicing and happy coding 😀

    0