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

  • SH• 10

    @YoYoIsFun

    Submitted

    What are you most proud of, and what would you do differently next time?

    i am proud of making my second project.

    Next time i will not do so much nesting and make my code cleaner

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

    trying to make it responsive

    i overcame it by learning how to make it responsive

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

    not nesting so much and also fix the nutritional part

    recipe

    2

    P
    Grace• 28,590

    @grace-snow

    Posted

    Feedback as promised. These are all for this challeng but also lay foundational practices for other projects.

    1. All content should be contained within landmarks. Everything in this design belongs inside a main landmark, and the attribution should go inside a footer.
    2. Get into the habit ASAP of always including a full modern CSS reset at the start of the styles in every project. Look up Andy Bell's or Josh Comeau's and read about why those properties are good to have at the start of the styles.
    3. Every img element must have an alt attribute. This image is important content, so that alt must contain a meaningful description of the image. There are some great posts about alt text on the resources channel of the discord server.
    4. Remove all the br elements in this. It's very rare you'll ever need or want to use a break in HTML. Margin (or the gap property in flex/grid layouts) is how you create space between elements.
    5. Once you've done that you can remove these weird negative percentage margins.
    6. Font size shouldn't ever be in px, but it also shouldn't ever be in em units! Make sure you understand what these units are for. Em is a unit that compounds so can lead to a total mess if over-used, especially on font size. Em is for other properties on the rare occasions where you want a property to specifically scale with the element's font size.
    7. In the head of the HTML you don't need to repeat the google fonts preconnect links. Only have them once. You should be importing the specific families and weights you need for the project. You can do this all in one font link too instead of a separate one for each family.
    8. It is invalid HTML to have list items on their own. Look up the unordered and ordered list elements on MDN. Meaningful HTML structure is extremely important, I really can't stress it enough. Search engines, browsers and all assistive technology relies heavily on the HTML structure being well formed and meaningful.
    9. There are extra empty paragraphs in your code that shouldn't be there. That's caused by your HTML not being indented consistently, which makes it extremely difficult to read and to spot bugs. Add the prettier extension into VS code (or other editor) and the HTML can be auto-formatted for you. Make sure every opening tag has a corresponding closing tag (unless a self-closing element like img).
    10. Do not use position relative and directional properties unnecessarily. There is no reason for any complex layouts in this challenge, it's almost all default html.
    11. Data tables must be coded as a HTML table. Look up these elements and apply them. You will need to use header cells and the scope attribute on the header cells in the design and td (data cells) for the other cells.

    This is probably enough for now. Good luck.

    0
  • P
    Grace• 28,590

    @grace-snow

    Posted

    Well done on completing your first challenge.

    I give feedback on this a lot and it’s almost always the same things as this is the challenge to lay down important foundations.

    So rather than repeat myself I’m going to point you to read others feedback I’ve left on this challenge.

    For example, see my comments on these solutions and use those learnings to refactor yours:

    Once you've fixed this one, go through your others and fix those too. And I need to stress -- Don't rush through lots of challenges before getting or at least reading others' feedback on the challenge and then improving what you've done using that feedback. All rushing through will do is repeat mistakes over and over, which then will be very hard work to go back and fix on so many. It's the feedback where you will get the value from this platform.

    Marked as helpful

    0
  • Vasavi Dwivedi• 100

    @vvvasavii

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm mostly proud of how i was actually able to build my first ever project and use version controls correctly.I'm also quite proud of how i didn't just give up and cheat my way out of this with countless challenge solutions on ytube. Next time i would be more precise with my code and will hopefully try to complete it a bit early.

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

    Although very basic but flexbox gave me a hard time even though i thought i had the basics down clearly. i overcame it by deepening my understanding of flexbox.

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

    Pls read my code and tell me the unecessary or redundant piece of codes,if you happen to have some spare time.Also pls provide any critical feedback,even and especially the negative ones.Thank you in advance.

    Qr code component

    3

    P
    Grace• 28,590

    @grace-snow

    Posted

    I hope this feedback is helpful

    1. Don't set all those styles on the HTML element. You will hardly ever have to touch the html selector in your styles. The html doesn't need to be a flex element or styled at all, and the height: 100%; is causing breakage -- a really nasty overflow bug for people who need to zoom text or use a larger text size. Remove all those styles from html and leave them on the body.
    2. The body needs a min height in viewport units. Default the body is only as tall as its content which means in this case because the content is only a small card the height of the body is very small. That's why you need to give it a min height. Tell it to be at least as tall as the viewport e.g. min-height: 100svh.
    3. All content should be contained within landmarks. This needs a main wrapping the card and a footer for the attribution. Every page should at least have a main Element and there should only ever be one of them.
    4. Avoid using keywords like Min or max content. These are advanced topics and they won't work how you expect them to work. This card does not need it. The card needs a single max width in rem.
    5. To stop the Page contents from hitting the screen edges you either need to give that content a small margin on all sides or you need to give a wrapping element some small padding on all sides. For example in this case you could add a little padding to the body or to the landmarks.
    6. Make sure you understand the difference bttween padding and margin. The image doesn't need padding, only the card does.
    7. This is invalid html: width="250px" height="250px". Those attributes must not have units inside them. The browser would read them as pixels anyway. But really you need to understand what they're therefore if you want to include them. The purpose is for the browser to be able to calculate aspect ratio of that image and save the space for the image, thus improving performance slightly. You could put width 600 x 600 if you wanted and it would do the exact same thing -- tell the browser this image is square (i.e. it has an aspect ratio of 1). If you choose to include a width and height attribute you will need to set this image to be 100% wide in the CSS. Whether or not you include width and height this image should be styled to display block and max width 100% both of which are usually included in a standard CSS reset.
    8. Get into the habit of always including a full modern CSS reset at the start of your styles in every project. Andy Bell or Josh Comeau both have good examples you can look up and use.
    9. Image elements must always have an alt attribute. This image in particular is extremely important content in the component so it must have a proper description within that alt attribute. In this case, the alt must say what the image is (QR code) and where it goes to (to frontendMentor.io).
    10. Don't wrap everything in a div!! You only need a div for block element styling or span for in-line element styling. Only add them when necessary. You don't need to wrap every single element in one of these. Keep the HTML as simple as possible.
    11. Instead you must use meaningful HTML elements. I can't stress how important this is. It is extremely important, more important than anything else. Like in architecture the HTML is the foundations of the building you build on -- if you get that wrong everything is wrong. You need to look at a design, think about the content and carefully translate that content into the most appropriate meaningful HTML elements. It it is an essential skill. This card is made up of an image with meaningful description. a heading and a paragraph. Other challenges you do unlikely to have more HTML elements such as Lists, headings which need to be in the right order, buttons for actions, links for navigation, tables for tabular data etc.
    12. Never style on IDs. That's not what they're for. Use single class selectors wherever possible. That will keep your CSS specificity as low as possible, which is a very good thing, making styles much easier to manage.
    13. Remember in CSS order really matters. You mustn't ever have reset styles or wildcard selectors at the end of your CSS. This will override earlier styles and lead to horrible bugs. Styles lower in the style sheet will override what has been written above. This is called the Cascade and it is core to how CSS works -- Cascading Style Sheet. This will become even more important in later larger challenges.
    0
  • Randomgituser69• 180

    @Randomgituser69

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm proud of making it similar to what is in the picture

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

    I didn't remember that much on the challenges that i encountered or like didn't remember did i really encounter or not

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

    How can i add the image to the background on top and bottom just like in the picture?

    Profile Card Component

    1

    P
    Grace• 28,590

    @grace-snow

    Posted

    You've done something to the image asset that came with this, making the image look srambled and broken. Use the assets as provided.

    I've left feedback on your QR card challenge solution, and much of that is applicaple and needs applying here (as well as to all other solutions). Here are a few additional points:

    • You cannot have aria-labels on divs! Aria-label is only to be used sparingly and the element would need to have a role to work consistently. By littering your solution with aria, you are making it much LESS accessible not better.
    • Look up how and when to write alt text on images. There are some great posts about this in the resources channel of the frontend mentor discord server. The alts need to change in this.
    • It's really important to carefully think through the HTML that's appropriate for the content in a design. As well as avoiding so many divs which I've already meantioned to you, you need to carefully choose meaningful elements particularly for text content. For example, headings and their order are meant to give an outline of the content of a page or component. It would never make sense to have a number as a heading like "80k". Imagine what this content would be in a plain document. The statistics would be a list -- three simple bullet points. So that's what it should be in the HTML -- an unordered list with three list items.
    0
  • Randomgituser69• 180

    @Randomgituser69

    Submitted

    What are you most proud of, and what would you do differently next time?

    Proud of making it similar to what it looks in the picture of the design. Though I'd apologize for the photo not loading for some reason. Idk why it didn't it load. Btw not sure what would i do differently next time

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

    I was struggling with putting the card to the center but when i set the display to grid,place content, place items to center then it's fixed

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

    Guys how can i fix html img not showing on GitHub repository? Adding ./images/ to the href didn't even work. How do i fix it please please? I've never been so angry over this

    Finished QR code component

    3

    P
    Grace• 28,590

    @grace-snow

    Posted

    Here is some foundational feedback to help you. Note you will need to refactor all projects with some of these things.

    1. All content should be contained within landmarks. This needs a main wrapping the component, and a footer for the attribution.
    2. You don't need to use the picture element in this. The picture element is used when you want to serve different images at different screen sizes. This only has one image. When you do need to use the picture element in future, you would make the mobile image the default inside the img element and you would use a min-width media query in the source tag (media query defined in rem or em not px) to serve the larger screen image.
    3. The Imogen this is extremely important content. That means it needs a proper description. In this case the alt should say what the image is (QR code) and where it goes to (two frontendMentor.io).
    4. There should be no hgroup in this.
    5. You don't actually need an extra div to wrap the image or the text. It's no problem having it in there but as a general rule keep the HTML as simple as possible.
    6. Remove the br from the heading. That is not how you create line brakes. Some screen readers will announce this as "break" in the middle of the heading, which is not what you want. Instead let the lines break naturally. In some cases in certain challenges if you need lines to break earlier you would give the element a max width rem or ch units, and margin-inline auto if that limited width element also needs horizontal centering.
    7. Never set font-size in px. Use rem.
    8. Get into the habit of always including a full modern CSS reset at the start of your styles. Andy Bell or Josh Comeau both have good ones you can look up and use.
    9. It's better for performance to link fonts in the HTML head instead of CSS imports.
    10. Recommend use the flex column method to centre components like this in the viewport and not the grid place-content center method. This will prevent overflow people viewing a site on smaller screens who have a larger size. It's a more robust method.
    11. There should be no widths or heights in this challenge. All the card needs is a single max width in rem.
    12. The image must not have a width pixels. All it needs is what is included in a CSS reset anyway (Display block and Max width 100%).
    13. There is no benefit to using grid on this card. All it needs is a text align center. The only benefit using grid or flex on this card would be if you wanted to use the gap property instead of margin to create vertical spaces. But really that's unnecessary.
    14. The image doesn't need small padding and margins. Let the image be Full size. Can optionally have a margin bottom. But as you've already given margin top to the H2 even that is unnecessary.
    15. Your card is actually off centre at the moment. This is because the footer (attribution) is wider than the card and the card sits to the left inside it's grid area. If you use the flex column approach to center your component as I suggest above this would be solved.
    0
  • P
    Gilbert Koomson• 260

    @Gilbert-Koom

    Submitted

    What are you most proud of, and what would you do differently next time?

    Proud I could finish a project in a day

    Product preview

    3

    P
    Grace• 28,590

    @grace-snow

    Posted

    Hey is your repo private? I can’t see the code.

    1
  • Ayobami2411• 20

    @Ayobami2411

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am glad I was able to figure this project out, and create something stunning

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

    I didn't know how to align the items to the center and also I don't know how to make the item bigger than it is right now

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

    making the images bigger so that there will be no need for zooming in at 100%

    Responsive barcode page using css media query and grid to solve it all

    2

    P
    Grace• 28,590

    @grace-snow

    Posted

    Hi, sorry for the delay! I've just got back from some time off and remembered I promised to give feedback on this to help you lay some better foundations.

    I'm afraid this has some substantial problems. I'll list them out one by one and hopefully it will help you refactor this and take the learnings over into other projects.

    1. All content should be contained within landmarks. This needs main landmark with the card component inside and a footer landmark for the attribution.
    2. The image does not need rapping in an extra div. Try to keep the HTML as simple as possible.
    3. The image is extremely important content. Therefore it needs a proper alt description. Remember alt is not code it is content. It must be a human readable description of that image. In this case needs to say what the image is (QR code) and where it goes to (to FrontendMentor.io).
    4. The paragraph must be a paragraph not heading. Choosing appropriate HTML elements for the content is an essential skill that you must master.
    5. Get into the habit of always including a full modern CSS reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good examples you can look up and use. This will do important things like remove margin from the body and make images display block and max width 100%, as well as lots of other useful things. You always need a reset at the start.
    6. There is no reason at all for this card component to be displayed grid. The block elements within it will all stack vertically by default, so unless you're planning to use the gap property to create space between the card's child elements, there is no benefit to use grid or flex in this case.
    7. Make sure you understand the difference between padding and margin. The card should have padding to create space inside it and stop it's children from hitting its edges. The child elements within that card should have vertical margins only to create space between them. See https://fedmentor.dev/posts/padding-margin/. Stop setting weird margins on on the left or top of different elements you don't need to do this.
    8. Remove all heights and widths from this. You don't need any of them. Instead use a single max-width in rem on the card. That tells it to grow only up until a certain width and no wider, and also tells it it can shrink narrower when it needs to such as on small screens. There is no need at all for a height. Let the browser do its job and decide what height is needed based off the content within the component and the spacings within.
    9. Never limit the height of any elements that contain text, including the body. This solution currently breaks because you have set the body height to be 100vh. Instead, change this to min-height. That says "I always want this to be at least 100vh (or svh) tall, but it can grow beyond the viewport height if needed." For example Think of how small 100 VH is when viewed on a small mobile phone in landscape orientation. The body would need to grow taller than that. It's the same principle on the card it doesn't need a height and giving it a height will break it for people who have their text set to be a larger default size.
    10. Speaking of text size, you must never use pixels for font size. Instead use rem. This will respond to the users chosen text size. Everything in your solution at the moment is way too small. I can't even read the text it's so small. The style guide states what font size should be used for the body, it just needs to be converted to rem before use in CSS. That is the size that your paragraph should be.
    11. The image doesn't need a width or height. All it needs is what's already included in the CSS reset which is max-width 100%. You can make it width 100% if you wish. The image shouldn't need any margins because it is full width of the card anyway. Remember the space from the edges of the card is created by padding on the card.
    12. I recommend against using Display grid place content centre on the body. This can cause overflow bugs for people who have a larger tech size and view on a smaller screen. Instead I recommend making the body a flex column. Then if you wish to push the footer down to the bottom of the screen you would simply place flex-grow: 1; on the main landmark.
    13. To make sure the component can never touch the screen edges either give the card component a little margin on all sides; or give a wrapping element (like the body) a little padding on all sides.
    14. As all the text in the card is centred you can place text-align center on the component itself instead of on individual child elements. They will inherit the text alignment from their parent.
    15. I noticed there are several places where you are adding flex properties to non-flex elements which means the CSS declarations do nothing but bloat your CSS. Try and remove everything which is not needed.
    16. I'm not sure that you mean to use rem for border radius... It's not "wrong" but it is unusual. Only use rem when you want a property to specifically scale with the users chosen font size. So rem makes a lot of sense for max-width on a component or for font-size declarations but may not be what you want for border width or radius. I expect the image border radius will need to be slightly different than that of the card itself.
    17. Do not remove underlines from links. In your attribution there are links that don't look clickable -- this is an accessibility failure. Keep the text decoration and preferably a different colour and a hover style. Also make sure you update the href for your own link. Currently it goes nowhere, but should go to your GitHub or Frontend mentor profile.
    18. Check you've linked the font-family correctly. I can't see the actual font link in there, only the google font preconnect links.
    19. Move your CSS into a separate linked CSS file.
    0
  • chrisk71• 40

    @chrisk71

    Submitted

    What are you most proud of, and what would you do differently next time?

    6/21/24 - I've updated my solution based on feedback from members. I hope I updated my solution the correct way here... Anyway, I had problems with positioning the 'attribution' text below the flex container without affecting the positioning. I still had issues with positioning the flexbox container on the screen - justify-content and align-items weren't working - but I found this article about using 'margin: auto' and that worked. Wish I knew why justify- and align- didn't work on the flex container but worked on the internal flex items.

    This was a good challenge for me after watching several beginner courses on YouTube. I struggled a bit but felt that I learned a lot about troubleshooting html and css issues.

    Next steps: read through the MDN docs and watch a few more courses, then tackle the next challenge.

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

    I encountered issues with sizing the elements in CSS.

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

    I'd appreciate it if a more experienced dev can give me feedback on my html and css structure and what I could've done differently.

    QR Code Component Solution - updated 6/21/24

    2

    P
    Grace• 28,590

    @grace-snow

    Posted

    I give feedback on this a lot and it’s almost always the same things as this is the challenge to lay down important foundations.

    So rather than repeat myself I’m going to point you to read others feedback I’ve left on this challenge.

    For example, see my comments on this person’s solution and use those learnings to refactor yours.

    Also note we cannot see your code from the code link above. I expect you've made the repo private but that means no one can review your code.

    Marked as helpful

    0
  • ndenbef• 10

    @ndenbef

    Submitted

    What are you most proud of, and what would you do differently next time?

    As a complete beginner in the world of Front end development i am extremely proud i could finish firstly finish my project and secondly being able to finish my project without any framework. Only html and css.

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

    Finding the correct padding and the correct css attribute was maybe the greatest challenged i encountered.

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

    The deployment of my project on github did not give me the exact result i had, when deploying locally. I would like help to understand if it is due to my code or if it is normal.

    QR-code-component using simple HTML and CSS

    1

    P
    Grace• 28,590

    @grace-snow

    Posted

    I'm afraid there are quite a lot of problems in this that will need re-writing. Don't worry though they're all very usual things that come up when people are first starting out. I'll try to list them out one by one.

    • update the title of the page in the html head.
    • all content should be contained within landmarks. They are a specific type of element that communicated the core structure of Web pages. In challenges like this that are not full pages and only a single component demo, all you need is a main landmark to wrap the component (the card).
    • stop wrapping everything in divs!! You've added so many on here and it's all unnecessary. This is a simple card with an image, heading and paragraph inside. That's one div with a few elements inside, no more complexity is needed. As well as making the code complex and difficult to read it's making the styling way more difficult than it needs to be.
    • this image is really important content so it needs a good alt description. That needs to say what it is (QR code) and where that goes (to FrontendMentor.io). There are some great posts about how and when to write alt text on images in the resources channel on discord.
    • heading elements are really important for communicating the structure of a Web page to various other technologies. Headings should be in a logical order, hierarchical, because their job is to show what content belongs to what. Heading levels have absolutely nothing to do with the text size of a heading in the design, they are all about semantics. It's extremely unlikely this heading would be a h5 as that means it belongs to some h4 content that belongs to some h3 content and so on... I'd make this a h2 as h1s are for page titles (which this component wouldn't be) and if in doubt it's always going to be better to choose a more important level over a less important one.
    • moving on to CSS... Get into the habit straight away of always including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
    • to center a component on the screen (or to build any layouts in fact) don't try and use huge paddings or margins. All this needs is some flex properties on a wrapping element and a min-height of 100vh (or svh). You could put those properties on the body in this, or on main.
    • the card must not hage a width. This is a really important approach to grasp when thinking about building responsively. Instead use max-width so the card can only grow up until that set limit, but it can also shrink narrower when it needs to (like on smaller screens). You can give it width 100% if you like as well as the max width, but don't ever give it a width with a pre-defined value.
    • that max-width should be in rem too. That means the layout would scale correctly for all users, including those with a different text size setting. basically, if someone had a text size setting of 200% (32px) you would want them to see a card that is also scaled up for them, which is what happens when that max width is in rem. If it was in px that person would see huge text squished into a very narrow card.
    • there is no reason for the card to display flex in this unless you're planning on making it a column and using the gap property.
    • the card should have padding, not the image. Make sure you understand the difference between padding and margin.
    • all the image needs in this is what's included in any standard css reset - display block and max-width 100%. You can give it a width of 100% too if you like and of course add the border radius. But there is no need or benefit to using flex on this image. In fact I've just notices that may be styles on a wrapping element which as I already said isn't needed at all.
    • I recommend generally against using % for border radius as its a bad habit that can lead to bugs. The only time you'll want that is on circular or square images. so it's OK in this case but just be warned it's often not the right unit to choose there.
    • don't use key words for font size. That loses all control. The style.guide said what font size to use on the body (which would be inherited by the paragraph). You just need to convert that style guide px Value to rem so you can use it in the code.
    • really stop over using flex. Only use it when you need it for a specific purpose!
    • beware using percentage for padding. Again you can lose control easily as you wont know what that equates to. Choose an appropriate unit for the task at hand.
    • you need to import the font(s) and weights you need. Pay close attention to details in designs. A designer wouldn't be happy if you chose different fonts or sizes to their design.

    I hope all this helps. You should be able to get your solution much closer to the design now and improve the code quality. Good luck.

    Marked as helpful

    1
  • Eugene Vuong• 30

    @EugeneVuong

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of my usage of the BEM in my CSS as it structures everything cleanly. Next time, I want to try to use CSS Sass, so I can remove some redundant code.

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

    One challenge I encountered was moving the image to the center of the card. I overcame it by using padding on the card.

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

    1. I would like to know if my usage of the HTML5 semantic is used correctly.
    2. I would like to know if my QR code component is responsive.
    3. I would like to know if using REM (instead of REM) through my CSS is a good idea. If it is not, what parts of my design require the px instead of REM? 3A. When is using PX better than using REM (in general and in the case of the QR Code)?
    4. Am I using the BEM structure right?

    QR Code Component using BEM

    #bem

    1

    P
    Grace• 28,590

    @grace-snow

    Posted

    This is a really nice solution. I only have a few small tweaks to suggest:

    1. Give the body a little padding or the component a little margin on all sides so it can't hit screen edges as it's doing now.
    2. The alt text can be shorter. "QR code to FrontendMentor.io" is fine. I wouldmt say "that links to" as that implies you've wrapped it in a link.
    3. You don't need to import the font twice. Just choose the specific fonts and weights you want and include that one snippet Google fonts provides. You never need to include the preconnect fonts twice in particular.
    4. Personally I wouldnt use article for this. It's fine to do if you want but there's no benefit to doing it and I'm not sure this is really what article was intended for. The card definitely shouldn't have a section element inside it. You could make this whole card a section if you wanted but not it's inner parts. Again there would be no actual benefit to making it a section except perhaps making the code slightly easier to read/understand as a card is mentally a "section" of content when we look at a design.

    Marked as helpful

    1
  • P
    Grace• 28,590

    @grace-snow

    Posted

    There are some important html misunderstandings in this I'm afraid. This challenge is all about html forms. The component is not a web page with a header and footer. Remove both of those landmarks. You have to understand what these landmarks are for and it's not this. They are for site-wide content not page-specific content.

    Instead, this is a form with a fieldset of radio inputs. The fieldset should have a legend which can be sr-only. The radios don't go in a list element, thats a very confusing semantic structure. Look up about fieldset and role radiogroup as you need one or the other here. The button is a submit so must also be inside the form.

    The good news is once you've done that, the JS becomes way simpler. You should only have one submit listener in this. No clicks and no change. On submit, you get the rating from the form like form.rating.value (where "rating" is the name on the inputs).

    You must not hide the inputs as you are doing at the moment either. When you set opacity to 0 some screen readers won't announce them, and moving them off screen can break the click target for voice control users too. Instead use sr-only (otherwise known as visually-hidden).

    I hope this is all helpful. Good luck with it.

    Marked as helpful

    1
  • Ermiyas Tilahun• 60

    @Erma-T

    Submitted

    What are you most proud of, and what would you do differently next time?

    The thing I am proud of the most is keeping myself still in the challenge :)

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

    No challenge.

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

    Still, i have some difficulties in CSS.

    Responsive age calculator app

    2

    P
    Grace• 28,590

    @grace-snow

    Posted

    I think I keep leaving you the same kind of feedback. I can't stress enough how important it is you learn html to a higher standard. This is inaccessible. Think through the html carefully.

    For example

    • how should forms be structured?
    • how should inputs be labelled?
    • how should a group of inputs be labelled for the group?
    • how can icon buttons have an accessible name?
    • how should errors be programmatically linked to their inputs?
    • how should results be announced to screen readers?
    • when should heading elements be used and at what level?
    • what are the appropriate meaningful elements for the content? (Always a separate consideration to the styled design).

    And then back to the css fundamentals...

    • why do css resets matter and what ones would be appropriate to use?
    • what's the most performant way to load fonts?
    • when to use width vs max width, or rem vs px...
    • what's the appropriate unit for font size? And line height? Letter spacing? Etc.
    • what are the alternatives to margin when needing space between flex items?
    • what's the impact of having no borders at all on buttons for high contrast mode?
    • why do focus visible styles matter so much and what should they look like?
    • why should we build mobile first?
    • how should media queries be defined and how should we choose appropriate values for them?

    I know you've had a lot of this kind of feedback already, so I am switching tactic now. No more answers or lists of corrections. Apply what you've learnt already and look up the rest.

    Marked as helpful

    0
  • escannord• 160

    @escannord

    Submitted

    What are you most proud of, and what would you do differently next time?

    During this project I learned a lot, especially about CSS. Usually we use css in the ordinary way except that there was a simpler way to write it: writing nested styles just as is the case with tags. with this we are able to properly manage the scope of css logic.

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

    no problem

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

    I did everything logical but I forgot to put the exit animations from one step to another step. you can add these animations to it.

    multi step form with validation and responsive in html, css and js

    1

    P
    Grace• 28,590

    @grace-snow

    Posted

    There are very serious accessibility problems in this. I don't have time to give full feedback for now so my best advice is to try using your solution with a keyboard and then with a screen reader.

    The accessibility requirements of this kind of challenge are the whole reason it's at a higher difficulty level. Pay really close attention to them!

    Another thing I note is misuse of headings or incorrect heading order. That's more of a best practice than a fail but still worth mentioning.

    Remove the empty header and the progress / steps component should be an ordered list with aria-current on the current step.

    0
  • Ermiyas Tilahun• 60

    @Erma-T

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud to start since always it is the first step that is the most difficult one. Next time I will continue my exercise and also try challenges from other difficulty levels.

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

    Since it is a beginner-level challenge, I didn't face any challenges in the coding part. The main challenge tho was in the organization of the solution. Like organizing it on GitHub and submitting it here. I planned to submit all the challenges from Frontend mentor as a directory in a single repo but as per a comment from Discord, I set up each single challenge in its own respective repos.

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

    For now, none!

    QR Code Component

    2

    P
    Grace• 28,590

    @grace-snow

    Posted

    Some important HTML points in this, and CSS.

    • Decorative svgs must be aria-hidden and all inline svgs must be focusable="false".
    • The results list should be a list.
    • The explicit width of the results circle plus large padding is causing a reflow failure. There is some horizontal scroll when there shouldn't be at some screen sizes/zoom levels. If you use max-width: 12rem; width:100%; on the circle that should fix it.
    • Usually side padding will match on left and right e.g. in mobile view but in yours the top section looks narrower.

    Marked as helpful

    0
  • P
    Gwenaël Magnenat• 1,040

    @gmagnenat

    Submitted

    What are you most proud of, and what would you do differently next time?

    Practicing css organisation with low specificity first. A better quick understanding and implementation of grid areas.

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

    CSS best practice for good Maintainability.

    Single Price Grid Component with SCSS and Vite

    #bem#vite#sass/scss

    1

    P
    Grace• 28,590

    @grace-snow

    Posted

    Only one small question -- why is "sign up" a button element?

    0
  • Rowert Méndez• 40

    @P0wertDev

    Submitted

    What are you most proud of, and what would you do differently next time?

    My code knowledge is much better each day and i'm proud of that 😁

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

    I haven't had any challenge, for now 🤘🏽

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

    I'm fine, no questions for now 😀

    Principal properties of CSS and HTML

    2

    P
    Grace• 28,590

    @grace-snow

    Posted

    Also note this is currently inaccessible. You must use a table for the tabular data. The header cells must use header cell elements and include the scope attribute to make it clear they are row headers not column headers.

    0
  • Rowert Méndez• 40

    @P0wertDev

    Submitted

    What are you most proud of, and what would you do differently next time?

    My code knowledge is much better each day and i'm proud of that 😁

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

    I haven't had any challenge, for now 🤘🏽

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

    I'm fine, no questions for now 😀

    Principal properties of CSS and HTML

    2

    P
    Grace• 28,590

    @grace-snow

    Posted

    You really should have every project in its own repo.

    1
  • Josh Javier• 790

    @joshjavier

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm proud of taking a "first principles" approach and implementing the CSS and JS without a bundler, only using the native import features available in the browser. Not exactly ideal from a performance perspective, but it's good for learning. I promise I'll use a bundler next time. 😉

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

    HTML forms. Dividing the work in stages definitely helped keep things sane and manageable. So first I worked on structuring them semantically, then making sure they follow the design, and finally adding field validations. It's frustrating when I encounter a gotcha, but coming up with a workaround feels pretty satisfying. 😌

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

    For accessibility testing, I'm limited to using VoiceOver on my iPhone SE, so feel free to let me know how I can improve the accessibility implementation. Of course, you can comment on other parts of the code as well!

    Contact form using 11ty and Valibot

    #accessibility#eleventy#cube-css

    1

    P
    Grace• 28,590

    @grace-snow

    Posted

    There's a few accessibility problems here.

    1. Use the autocomplete attribute on the fields that can be auto filled.
    2. You don't need role alert as well as aria-live. Stick to aria-live, then use aria-desciribedby on he input pointing to the ID of its error. That way, the errors and inputs will be programmatically linked.
    3. Add focusable="false" to the svgs. They are added to the tab order by some screen readers.

    Marked as helpful

    1
  • P
    Gwenaël Magnenat• 1,040

    @gmagnenat

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm practicing planning. How to prepare the project and start organising the styles needed to be more effective. I have a good workflow with vite and prettier. I will add a little script to clean the files and organise the folders. I want to search for a script to optimise the assets.

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

    I first added the svg as inline in the html. It was difficult to handle the sizes to make them scale in case of font size change. I ended up using a normal tag to add them as I don't need to control a color. It was easier also to just add an empty alt tag so screen readers ignore these decorative svg.

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

    Any feedback is welcome.

    3-column preview card component (SCSS/BEM and Vite)

    #bem#vite#sass/scss

    1

    P
    Grace• 28,590

    @grace-snow

    Posted

    Try not to make aria labels too verbose. "Learn more - Sedans" would be fine!

    Also beware how you are nesting the scss. There is no reason to nest classes like this and it can create high specific css that's unwieldy and difficult to manage.

    1
  • Michael Degorre• 110

    @MDEGORRE

    Submitted

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

    It was tough setting the background color on hover.

    NFT preview card

    1

    P
    Grace• 28,590

    @grace-snow

    Posted

    Sorry to tell you this is missing all the essential interactive html elements and structure shown in the design.

    If the design shows a hover style that means there should be an interactive element there. It's indicating something would be clickable. But you have no links in this.

    Instead you have

    • no main landmark
    • an incorrect use of the header element. There is nithibf appropriate for a header landmark in this design.
    • lots of misused section elements. This whole card could be one section, but not anything within it.
    • misuse of the alt attribute (it should be empty on decorative images, or describe meaningful images).
    • a footer inside the component that should be outside of main.
    0
  • P
    Grace• 28,590

    @grace-snow

    Posted

    Some quick feedback

    • remove explicit widths. The component should only have a max width in rem.
    • fix the html. Specifically heading use and order, and use of image alt. See https://fedmentor.dev/posts/html-plan-product-preview
    • use a css reset at the start of the styles.
    • you shouldn't need any !important in the styles. That's a sign there are problems in the css. Fix them don't try and brute force override them.
    • don't guess font sizes. I can tell you're choosing random rem values. They shouldn't need to change between movie and desktop. Use the size the style guide says for body/paragraph.
    • the img needs object-fit
    • the picture element should only have one source in this for the desktop image.
    • only set media queries when there is room for the layout to change. Define media queries in rem or em not px. And make the mobile styles the default with larger screen styles in the media query. See https://fedmentor.dev/posts/responsive-meaning/

    Marked as helpful

    1
  • Silviu Miron• 210

    @Miron-Silviu

    Submitted

    What are you most proud of, and what would you do differently next time?

    HI all, this is my solution for this challenge .

    Interactiv-Rating

    #accessibility#bootstrap

    1

    P
    Grace• 28,590

    @grace-snow

    Posted

    It's essential to label a group of radios or checkboxes, not just the individual inputs. That's what the fieldset and legend elements are for.

    I recommend you read this about the 62.5% font size hack and why it's a bad idea.

    Never limit the height of elements that contain text. That includes the body. It should have min-height 100svh (or vh) not height.

    The component shouldnt have a height or width at all, especially not in percentage or px. You lose all control of your layout using percentages because you won't always know what 100% equates to. Use a single max width in rem on the component, that's all it needs.

    The only things that should have height and width in this are the images and optionally the radio.

    It's really important that font size is never in px. Use rem. There's a detailed post that explains why on the same site.

    Make sure you don't remove border from buttons. Make it transparent or the same color as the background but don't remove it. If you remove it, the button will be very hard to see in high contrast mode.

    There's no need for any media query at all in this either. One you fix all the sizing issues above you won't have a need for it any more.

    Marked as helpful

    0
  • Yaroslav Petrov• 80

    @PetyaBiszeps

    Submitted

    What are you most proud of, and what would you do differently next time?

    During this project I've learnt the most of all 3 I've done on Frontend Mentor. It gave me more understanding of JS overall since I'm new into it. It also gave me some basic understanding of JS/CSS transitions and how to communicate between JS/CSS to make them out. Overall, in my opinion, that's an amazing challenge to start with JS if you already know something about both HTML and CSS. At least that's how it worked for me ;)

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

    Well, there is couple of them. Some were hard for newbie like me :D First of all is of course JS function that will control both showing answer and changing icon dynamically and depending on specific lines. I could go easy way but I'm learning so I spend kind of much time on creating short and single function that will control this process. Second thing is keyframes. I have never used them, that was the first time using them and at the start I didn't really understand them, but I overcame this as well ;)

    Except that (because JS and Keyframes were really tough for me at this point) everything went just fine. Really good challenge for anyone starting their journey in JS!

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

    I want to see overall expressions of this project. Is it okay in terms of CSS and is it good in terms of JS logic. Would be amazing, if someone could make advice on how to make it better!

    FAQ accordion using CSS Flex, @media, @keyframes, JavaScript functions

    1

    P
    Grace• 28,590

    @grace-snow

    Posted

    Sorry to tell you this, but you mustn't ever add click listeners to non-interactive elements like divs! Always test with a keyboard at least.

    You'll need to change the markup on this to use a button with the required state information via aria. And once that's done, you'll need to change the js and maybe css too.

    I strongly recommend against messing with in-line styles in JavaScript. Keep the concerns separate. Let JavaScript handle only the interactivity such as toggling aria values and optionally toggling a class. Let CSS handle all styling (including showing the correct icon).

    Here is a post about how to build a disclosure (accordion) pattern like this.

    Marked as helpful

    0
  • Mayra Matos• 20

    @mayramatos

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm proud because it's my first project that I finished without feeling uncapable. I started studying HTML and CSS in August last year for a month and spent around 7 months without studying or practicing. I returned in August and for the first time I managed to finish a project without getting discouraged despite the difficulties encountered, because now I know that I have the knowledge and it's not wrong to ask or research in moments of doubt.

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

    Questions related to CSS such as list markers left me with a lot of doubts, but I looked for answers on reference sites.

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

    Specially with CSS, i think that can exist a better to get to the same result.

    Página de receita responsiva

    1

    P
    Grace• 28,590

    @grace-snow

    Posted

    Hi, this needs much of the same feedback as I've already left on your social links solution so make sure you apply the relevant parts here. Plus there are some very important extras needed in this one!

    1. All content in this design must go inside the main landmark. You can have sections within that if you wish but there is definitely no content in this that belongs in a header and everything must be inside main.
    2. This image is important content and must have a proper alt description.
    3. The nutritional table is tabular data so must use a table element. The header cells need to be marked up correctly as header cells, and include the scope attribute.
    4. The component needs a single max width in rem. There shouldn't be different max widths once all.os properly inside the one container. (This container could be the main landmark but it's more usual to use a div inside main for this kind of component as on a real site it is unlikely that every page would have this exact styling on the main landmark.)
    5. Styles should be mobile-first and media queries must be defined in rem or em not px. There are accessibility and layout problems when media queries are done in px.
    0