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

  • P
    Grace 27,590

    @grace-snow

    Posted

    Hi, Looks good. The only small issues I see on this are:

    • breakpoints in px instead of rem or em. This will cause problems on bigger projects for users with a different text size as the layout would not adapt layout correctly for those people.
    • there is no space above and below the component. It touches my screen edges.
    • text is not centered on the component so when I have a larger text size any text that wraps over two lines becomes aligned to the left, which looks odd.
    • the location is not a h2. That would make the location the heading for all these links, not the person's name. It's just a paragraph.
    • the alt text on the image doesn't describe the image
    0
  • @fastcheetah

    Submitted

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

    After code you research I was able to get info from others and made research and now I know stuff I asked questions and I'm Hapoy I'm completing something without a tutorial

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

    I thought we were supposed to use media queries😂 and needed help making the box for the image but with some studying was able to do it all

    P
    Grace 27,590

    @grace-snow

    Posted

    You need to make the repo public. No one can see your code in a private repo.

    0
  • @Beulah-Tomi

    Submitted

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

    What I might be proud of:

    1. Clean and modular code: Writing HTML and CSS in a structured and organized manner can be something to be proud of. This includes using proper indentation, comments, and following best practices.
    2. Responsive design: Creating a blog preview card that looks good and functions well on various devices and screen sizes can be an achievement. This demonstrates a good understanding of responsive design principles.
    3. Accessibility: Ensuring that your blog preview card is accessible to all users, including those with disabilities, by following accessibility standards and best practices can be a point of pride.
    4. Visual design: If you've created an aesthetically pleasing and visually appealing blog preview card, you might be proud of your design skills.

    What I might do differently next time:

    1. Code optimization: You might find ways to optimize your HTML and CSS code to improve performance and load times. This could involve reducing redundancy, optimizing images, or using CSS preprocessors like Sass to write more efficient stylesheets.
    2. Browser compatibility: Ensuring cross-browser compatibility is important. You might test your blog preview card in different browsers and make adjustments as needed to ensure consistent display and functionality.
    3. User feedback: Incorporating feedback from users or peers can help you identify areas for improvement. You might gather feedback on usability, design, or functionality and use it to refine your blog preview card in future iterations.
    4. Learning and growth: Reflecting on your coding process and identifying areas where you can learn and grow can be valuable. This might involve learning new techniques, exploring advanced CSS features, or delving deeper into responsive design principles.

    Overall, continuous improvement is key in web development, and there's always something new to learn and explore in HTML and CSS.

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

    Overall, overcoming these challenges requires a combination of technical skills, attention to detail, and a willingness to iterate and refine the code based on testing and feedback.

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

    styling

    P
    Grace 27,590

    @grace-snow

    Posted

    Hi, i noticed some things that need changing in this code. Hopefully this helps with your learning process. In particular pay attention to HTML at this stage. It's the foundation of everything else and the most important thing when it comes to web accessibility.

    • every page needs a main. All content should be contained within landmarks. This needs a main to wrap the component and a footer for the attribution.
    • img elements must have an alt attribute. That is essential. There's a great post in the resources channel on discord about how and when to write alt descriptions on images.
    • learning is a paragraph not a heading. It's just a topic tag for the blog.
    • think about the context of where components like this would be used in a real site. This kind of card would never be used as the page title, therefore it can't have a h1. Use a h2 for the card heading.
    • this is a signposting component, a card that links to a blog. But how would anyone access that blog when you've not included a link? It needs an anchor inside the heading (wrapping the title of the blog). Note: I recommend you always test solutions with keyboard if they are meant to be interactive to check it works for all users not just mouse users.
    • lists must only be used for list content. There is no list in this design. It's really important not to mis-use lists as they are meaningful elements.
    • remember to update the link in the attribution to your page. It can go to your frontend mentor profile page or to your github page.
    • get into the habit of 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.
    • this challenge must not have a media query. It doesn't need one and even if it did it would need to be defined in rem or em.
    • the body should have a little padding and styles to center the component even on mobile screens.
    • never limit the height of elements that contain text, including the body. Instead of height 100vh use min-height so that the body can extend beyond the height of the viewport when necessary.
    • the max width on the component needs to be in rem not px so that it can scale correctly for all users, including those with a different text size.
    • try to avoid using complex css selectors like nth child unless you really need to. Instead place classes directly on what you want to style. It's much more maintainable, easier to read and avoids specificity wars in css. If you return to this css after a break you'll have no idea what all those styles are doing without combing through the html and switching between css and html to match up the selectors. That's a painful way to work.
    • don't add cursor pointer to non-interactive elements. As I raised above, this component needs a link in the heading. To make the whole card clickable, you then need to add position relative to the card ; and a pseudo element on the link that's absolutely positioned and sized to fill the card. That will make the link extend out over the component so it is all clickable.
    • it looks like you've not included the font(s) correctly. Did you mean to add local ones to the repo or link to fonts hosted on Google fonts? I can't recommend what to fix as I'm not sure on what your intended approach was.

    Marked as helpful

    0
  • Kayla 10

    @honeyyed

    Submitted

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

    I was definately proud of how fast I finished. Next time, however, I would like to be more intentional about how I write CSS rather than jumping around.

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

    I forgot how to center a div within a div and I ended up having to Google how to do it.

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

    Is there a better, more concise way that I could have written my CSS?

    P
    Grace 27,590

    @grace-snow

    Posted

    Hi

    There are some important things to learn from this challenge so I'll list them out one by one. Make sure you understand each and refactor before moving on to another challenge.

    1. All content should be contained within landmarks. This needs a main to wrap the component and a footer for the attribution.
    2. You don't actually need the center div at all. You can keep it if you like but it would be more usual to place the centering styles on the body in a single component demo like this.
    3. Remove the repeating links in the html head. You only need one set of Google font links. These should be importing only the specific font families and weights you need.
    4. The img does not need wrapping in a div. As a general rule try to keep the html as simple as possible.
    5. This component has a heading so you must use a heading element. Using headings appropriately and in a sensible order is extremely important for accessibility and SEO. In this case because it is a single component not a full webpage I suggest using a h2.
    6. Img elements must always have an alt attribute. As this is important content the description needs to say what the image is (QR code) and where it goes (to FrontendMentor.io).
    7. Make sure you update the link to you in the attribution. Perhaps to your frontend mentor profile page or to your github page.
    8. Get into the habit now 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.
    9. The image should not have a width or height in this. All it needs is width or max-width 100% (that is included in css resets). It can optionally have an aspect-ratio of 1 as this is a square image and that helps the browser performance.
    10. As others have said remove the huge paddings and margins in this. Use flexbox to center the component in the viewport as others have advised. Alarm bells should ring whenever you're tempted to add a huge margin or padding — try to pause and question your approach whenever you consider doing that as there will almost always be a better way.
    11. The component must not have a width. Only a max-width in rem. This allows it to grow up until a set limit, while also allowing it to shrink narrower when needed (like on smaller screens). Using rem means the layout will work for all users including those who have a different text size.
    12. Remove all other widths in this. They are unnecessary, cause bugs and make the solution less robust.
    13. Either the body will need a little padding or the component will need a little margin to stop the content ever touching the screen edges.
    14. The component should have a little padding on all sides. (I expect because this is missing that's why you've wanted to set width on each child element.)
    15. Never set font size in px. This is really important. Use rem.

    Overall your whole solution looks very small. So when you remove widths and add the max width see if you can get that to be closer to the original design.

    Marked as helpful

    1
  • perterHUAN 250

    @perterHUAN

    Submitted

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

    I originally intended to use Sass for this project, as I had completed several simpler projects with it before. However, when working on this particular project with Sass, I found it challenging to proceed:

    • There were significantly more variations in spacing, font sizes, and colors compared to previous projects, and no free Figma design was provided.
    • I needed to estimate these values based on rough visuals from images, which took up a considerable amount of time—more than actually writing CSS. This led to less-than-ideal results, with discrepancies between the final output and the design mockups, as well as inconsistent styling.

    Considering this was a relatively straightforward project, I questioned how I would tackle more complex challenges on platforms like Frontend Mentor.

    Consequently, I decided to abandon using Sass and instead opted for TailwindCSS, which provides a comprehensive design system. With TailwindCSS, there's no need to struggle with exact pixel values; we can simply choose from its pre-defined set of spacings that closely match our designs.

    The process involved first writing the HTML and then incrementally applying utility classes until achieving a resemblance to the design mockup. It felt akin to playing a game and clearing levels, with the unique twist being that we create the level ourselves (by writing the HTML). The objective was to make our HTML resemble the design as closely as possible.

    This is my first time completing a project using TailwindCSS, and it fills me with a sense of pride.

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

    In lists, how can we ensure that the marker is vertically centered within the text of a list item, even when the text wraps?

    One solution I've come up with is to forego the native marker and instead create a custom marker using a pseudo-element. We apply a flex layout to the li element and set align-items: center. This way, our custom marker remains vertically centered even when the text wraps.

     
    

    Here are the specific implementation details:

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

    This was my first project using TailwindCSS, and my understanding of it is still rather superficial. I wonder if I have been using it correctly and avoiding common pitfalls. Additionally, I am uncertain if there are areas where my code could be simplified or made more concise.

    Furthermore, I am not very confident about the HTML I have written; I am unsure whether I have used the appropriate tags and whether the nested structure is reasonable.

    P
    Grace 27,590

    @grace-snow

    Posted

    Hi some feedback is the same as the other challenge you commented on, so read that and apply it.

    • b is a deprecated and meaningless tag. Use strong for bold emphasis.
    • header cells on the table are essential. Scope on the header cells is optional but recommended.
    • preparation time is a heading
    • read the post on the resources channel on discord about how to write good alt text then update alt on the image.
    • I recommend against using the grid and place content method for centering in the viewport. This causes content to get cut off on the left and right for users who need to zoom text on smaller screens. This would not happen if you used the flex column approach to center.

    Marked as helpful

    1
  • Havillah 20

    @HavillahAnya

    Submitted

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

    I am most proud of how I was able to use the right media query and percentage sizing to get the desktop layout correctly.

    Next time, I will use a layout tool like grid or Flexbox to solve the challenge.

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

    I encountered some challenges when trying to make the desktop styling.

    I used media query and resized the main element and my image to match the design perfectly.

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

    I will like to know how to approach this project with Flexbox. How will my container's width and height be sized if I use Flexbox for the project?

    P
    Grace 27,590

    @grace-snow

    Posted

    Try to get the colors and spacings much closer to the design if you can.

    0
  • @keziabaidoo

    Submitted

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

    I am proud of my ability to design the QR code exactly as it was intended to look. It was challenging, but I could accomplish it with my skills and knowledge. As I continue to work with this technology, I am also interested in exploring other frameworks to enhance my expertise and broaden my knowledge base.

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

    I found CSS positioning and alignment challenging, but reading about it gave me a better understanding.

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

    After completing this project, I am excited to seek help and support from the community for future challenges.

    P
    Grace 27,590

    @grace-snow

    Posted

    I'm afraid this looks very broken on my phone (I'll add a screenshot to discord for you) and has some foundational html errors. I'll go through each improvement in turn and hope it helps :

    • All content should be contained within landmarks. This needs a main to wrap the component and a footer for the attribution. The component can be a section but a section cannot wrap the main and footer. You can place the centering styling on the body.
    • the attribution should not be inside the component.
    • link the fonts from Google fonts and apply in css.
    • the image needs a proper description. I recommend you read the post in the resources channel on discord about how to write good alt text. This particular image needs to say what the image is (QR code) and where it goes (to FrontendMentor.io).
    • the heading should not be a h1. This component would never be used for a page title when placed on a.real.web page. With that context in mind, make this a h2.
    • get into the habit of 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.
    • the component must not have a width. Instead give it a max width in rem. This will allow it to shrink narrower when it needs to, and using rem means the layout will work for all users including those who have a different text size.
    • the component must not have a height at all. Never limit the height of elements that contain text. Let the browser do it's job and decide what height is needed based on the content inside the card.
    • the image only needs a width or max width 100%. It does not need a height. It can optionally include an aspect ratio property abd/or object-fit.
    • keep css selectors as simple and low specificity as possible. Don't chain or nest selectors or you will end up with a maintenance nightmare on larger projects later.
    • Font size must never ever be in px. Extremely important.
    • the content div is completely unnecessary in your solution. Keep html as simple as possible. The text align can go on the component.
    • the component will need a little margin on all sides (or a wrapping element will need a little padding) so it can't hit screen edges.
    0
  • Riska997 10

    @Riska997

    Submitted

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

    1.I am most proud of my implementation of the responsive design aspect.

    2.It was interesting to learn how to use media queries effectively and ensure the web page looks good on various devices.

    3.Next time, I would focus on using links to join different pages so that more recipes can be added.

    4.I would also use JavaScript to add more interactivity to the project, such as implementing a feature to customize the omelette recipe based on user preferences.

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

    1. The challenges I encountered were: aligning the table cells in the nutrition section properly and indenting the Preparation time code.

    2. I initially struggled with CSS styling to achieve the desired layout.

    3. However, after researching and experimenting with different CSS properties, I was able to resolve the issue by :

               -Ensure that the table has equal columns by 
                 using *width: 100%;* and  *border-collapse: 
                 collapse;*
      
               -Creating a class  **indented list** and 
                styling it with padding so that there are tab 
                spaces.
      

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

    1. How effective are my media queries in ensuring a responsive design across various devices?

    2. Are there any specific improvements or adjustments you would recommend for my media queries to enhance the responsiveness of my project?

    3. Can you provide feedback on the readability and organization of my media queries? Are there any best practices I should consider implementing?

    4. I'm unsure about the readability of my CSS code. Can someone provide suggestions on how to organize it better?

    5. I'm not sure if my design is visually appealing. Can someone give me feedback on the colour scheme and layout?

    6. Does my project meet all the requirements stated in the README.md?

    P
    Grace 27,590

    @grace-snow

    Posted

    This is not a good challenge to attempt first. I recommend you pause this one for now and try the QR code challenge first instead.

    This is not responsive and needs a lot of changes - all the usual foundational problems everyone faces. But it will take a long time to go through them all on this size.of challenge. It would be must easier to explain on the QR code challenge.

    0
  • @Brstone2002

    Submitted

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

    Proud I was able to do my first challenge on my own, with little googling. Just improve in general with every challenge I do.

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

    Just trying to remember how basic things work in general without relying on google constantly. Had to google a few times to get on the right track.

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

    Feedback is appreciated.

    P
    Grace 27,590

    @grace-snow

    Posted

    First, I'm going to point you to someone else's feedback on the same challenge as you have a lot of the same issues here, especially in the html.

    Looking at your css

    • Always use a 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. It's not strictly necessary for such a tiny project but good to get into the habit of including it every time. The reality is you would never work on any project without one in the real world.
    • I can see a sort of reset at the top but it's not enough and has a serious problem: Don't set width and height to 100% of html and body. I'm not sure where you got that code snippet from but it can cause bugs especially when using flex/grid to center things in the viewport. It is making the content get cut off on screens with a small height.
    • Font size must never be in px. Extremely important!
    • the card must not have a width. Instead give it a max width in rem so that it can shrink narrower when it needs to (eg on smaller screens). Using rem also means the card would scale correctly for all users including those who have a different text size.

    Marked as helpful

    0
  • P
    Grace 27,590

    @grace-snow

    Posted

    Hi

    I'm afraid this has some very serious accessibility issues in it due to the html. The good news is they'll be easy to fix.

    Before anything else, I recommend you read my post about planning html using this challenge as a case study

    You must change these things

    • all content should be contained within landmarks. The attribution should be in a footer outside of main.
    • remove all the non breaking spaces you've added to perfume. That's not how you increase letter spacing.
    • perfume is not a heading its a paragraph. It's extremely important to use headings appropriately and in the correct order.
    • the heading on this card must not be a h1. Think about the context of where this component would be used on a real Web page. It would never act as a page title so cannot be a h1.
    • the price is not a heading. It's a paragraph (or span inside a paragraph containing both prices)
    •   is not valid. But spacing should be done with margin or gap in css not by changing the html anyway.
    • the card must not have a height or width. Instead give it a max width in rem only. Let the browser do it's job and decide what height is needed based on the content.
    • similar with the button. Never limit the height of elements that contain text. Use padding not height on that button.

    More general guidance you'll need for every project

    • get into the habit of 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.
    • style mobile first. That means the mobile styles should be the default. Then override specific properties that need to change inside a min width media query.
    • media queries must be defined in rem or em not px.
    • the border radius on components like this can be set on the component along with overflow hidden to crop out the overflowing child corners.
    • use the object fit property on the image so it doesn't get distorted.
    • the line breaks in this look odd and I think it's because you've changed the whitespace property to pre-line. It's rare you'll ever need that. Let lines break naturally unless there is a good reason to change the behaviour.
    • don't style on IDs. That's not what they are for, is unexpected and drastically increases css specificity.
    • set font size in rem. Don't rely on key words which can differ between browsers.

    Marked as helpful

    2
  • @Camagu-Ncoso

    Submitted

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

    I need to practice more flexbox because I noticed that it is mostly there on projects. I am going to build more project on flexbox

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

    I encountered changes on aligning the container. I requested for help from forums online

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

    media query.

    P
    Grace 27,590

    @grace-snow

    Posted

    In this, the component itself should not be the main landmark. It should be a div within the main landmark. If you think about how this component would be used in a real site that should make sense - it would go inside main.

    Similarly, this card would never serve as a page title for a whole Web page. That means it can't have a h1. A h2 would be more appropriate.

    Remember alt text should never include words like "image" because it's already on an image role. This is just a "QR code to FrontendMentor.io".

    CSS feedback:

    • @import is not good for performance. It would be better to link fonts in the html head.
    • get into the habit of 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.
    • the component should likely be display block not inline- block. You would only see this difference once it's on a real page.
    • you can place text align center on the component itself instead of repeating it on the individual child elements.
    0
  • @carstenkoerner

    Submitted

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

    I was proud to have completed my first project and to have worked with Git and Github for the first time.

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

    Not really a challange but first time using HSL Colors.

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

    So far in no area.

    P
    Grace 27,590

    @grace-snow

    Posted

    Hi, overall this is very good. I can spot a few issues in this code, but these are very common things so don't get discouraged. Refactoring them will set you up well for the next challenge...

    1. All content should be contained within landmarks. This needs a main as the container. The attribution should be moved outside of this and should be a footer.
    2. The image is really important content so deserves a more meaningful alt description. In this case the alt should say what the image is (QR code) and where it goes (to FrontendMentor.io).
    3. You must use a heading for the heading content. As this component would not serve as a page title the heading level should be h2.
    4. Get into the habit of 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.
    5. All of the css you have on the container class can go on the body instead.
    6. The card component should have a little margin on all sides so it can't hit screen edges. (Or a wrapping element could have padding for the same purpose)

    Marked as helpful

    1
  • P
    jasoneczek 140

    @jasoneczek

    Submitted

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

    In this project I had the opportunity to use some of the CSS tricks I learned in my previous project, the Blog Preview Card. That is, I used the clamp function again, but this time for responsive sizing rather than responsive text. Using this I was able to (almost) match the card widths at mobile and desktop widths exactly as in the Figma file (more on this in the challenges encountered section below). Additionally, I used a pseudo element for the a tags that are nested in the list items, so that when hovering over the buttons, the user in in fact hovering over the link which triggers the active stylings.

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

    While I'm getting responsive sizing of the card width with use of the clamp rather than media queries, at 375px screen width, my card width is about 10px wider than in the Figma file. It's not a huge deal, but the use of the clamp function seems to cancel out any margin to the card, or padding to the body. Playing with the clamp function was the most challenging part in general, but I am happy with it so far. The padding within the card is responding as I would like.

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

    Besides the problem mentioned above, any feedback on accessibility, best practices or any ways to improve in any way are massively appreciated.

    P
    Grace 27,590

    @grace-snow

    Posted

    This is a really nice solution!

    The only issues I see are

    • the attribution is overlapping the content. There really is no good reason to use position fixed on that, it can only cause bugs.
    • the component is touching screen edges at the top and bottom. Add some margin on the component or add some padding on a wrapping element.

    Good job though!

    0
  • @EAguayodev

    Submitted

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

    I am extremely proud of myself for taking the initiative to document my process and customize my readme file for this project. This helped me to keep track of my steps and enabled me to learn and improve my skills.

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

    I placed inside the firI had to choose between using an anchor tag or a button tag to fit inside a card class within a div for this project.

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

    I would definitely like to have some feedback to see if the margin: 0 auto CSS property is having a positive effect of being centered on desktop view in multiple browsers for others who would be using browsers such as Chrome, firefox, brave, edge, and opera.

    Social profile card

    #accessibility

    1

    P
    Grace 27,590

    @grace-snow

    Posted

    Hi, I can see you've tagged this with accessibility but I'm afraid it is not accessible yet. Here are some things you need to fix:

    1. There is no need for the extra divs. Not an accessibility issue, just really confusing and makes the html hard to read. This is one div (card) with content inside. Keep html as simple as possible.
    2. Remove the divs wrapping each anchor. The list of links should be in an actual list instead.
    3. Read the post in the resources channel on discord about how to write good alt text on images.
    4. The heading level is incorrect at the moment. A h4 would only make sense if this was child content of a section headed by a h3. There would need to be a h1, h2 and h3 all above this component. As this component is a stand alone page if expect the heading to be a h1.
    5. What you've marked up as small is not Smallprint. That should just be a paragraph.
    6. If links are set to open in a new tab that must be programmatically determinable to assistive tech users because it is unexpected behaviour. Either remove the target attributes or add visually hidden text to each link saying "(opens in a new tab)".
    7. It is better for performance to link fonts in the html head instead of css imports.
    8. Never limit the height of elements that contain text, including the body. It's fine to use min-height but not fine to use height because you are causing content to be cut off by limiting the height. (I also recommend using the flex column approach to center the component instead of grid and place content center. This is beause the css grid approach can cause content to overflow on the left and right , especially for users who need to use a large text size).
    9. ⚠️ Never set font size in px. This is a serious accessibility failure.
    10. The component must not have a width. It is overflowing my screen because of this. Instead, use max-width in rem only.
    11. The component must not have a height. This is the same principle as point 8 above. Let the browser do it's job and decide what height is needed based on the content. As soon as you limit the height you're introducing overflow bugs and making a component that is not robust for content authors.
    12. The component should have a little margin on all sides so it can't hit screen edges. Or a wrapping element can have a little padding to acheive this.
    13. Text align inherits so can be set at component level instead of repeating the property on different child elements.
    14. I wouldnt expect the avatar to need position relative or any large margins. That's an image that should be display block, and margin inline auto to horizontally center it.
    15. The whole card should have padding.
    16. The links should have at padding on all sides.
    17. The anchors should be display block or width 100%. They do not need different classes to each other or anything doing in css to position them! Html block elements stack vertically by default.
    18. This challenge does not need a media query at all. If you did need a media query in other challenges, it would be a min width media query only as you should be working mobile first for almost all components; and the media query would need to be defined in rem or em not px.
    19. Make sure you're using the object fit property on the avatar if the original image is not square so it doesn't get distorted.

    Overall I think you've just overcomplicated this challenge. If you've not had feedback like the above before I think it will be very important for you to go back through previous challenges and refactor them.

    0
  • lij110397 230

    @lij110397

    Submitted

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

    1. How to use preprocessor like SaSS

    • Define variables
    $primary-color: #3498db;
    
    • Define mixin
    • Define combined rules

    However, in this case, I don't think it is necessary to use SaSS, since there are limited variables.

    2. How to add strikethrough

    .strikethrough-text {
      text-decoration: line-through;
    }
    

    3. How to add a responsive picture The image source will change according to the media scale, instead of simply switching the size of image. source only indicate the source of the image. But most of css styles are still changed by img

    
            
            
            
    
    

    This can match with media queries. The image will change and some other styles.

    @media (min-width: 43rem)
    

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

    When it is necessary to use preprocessor like SaSS to style the css codes? I did not use preprocessor in the project, but I still add one potential sass file if i would use sass.

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

    When it is necessary to use preprocessor like SaSS to style the css codes?

    P
    Grace 27,590

    @grace-snow

    Posted

    Hi, I'm afraid this overflows my screen. I'll add some Screenshots to discord so you can see the problem for yourself. There are also improvements needed in the html.

    1. This is a component that would be dropped into a larger webpage. That means the component itself must not be a main landmark. Instead if should be a div inside main and with its own class for styling the component.
    2. Similarly, this would never act as a title for a Web page, so should not be using a h1. A h2 would be more appropriate.
    3. The alt text on the image does not describe it accurately. Alt descriptions should never include words like "image" because it's already an image role. Read the post in the resources channel on discord about how to write good alt text.
    4. Similarly, the cart icon should not have any value in the alt attribute at all as it is purely decorative.
    5. The strike through text must be done with s or del tags.
    6. Get into the habit of 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.
    7. Style fonts and colors on the body not on the html. Try to avoid styling on html at all unless absolutely necessary.
    8. Never use width: 100vw. All that can do is cause unwanted horizontal scroll because viewport units don't account for scrollbars. So 100vw actually means "full width plus the width of a scrollbar when present". The body is already full width anyway so you don't need to give it any width-related css properties.
    9. Don't use position absolute to center the component on the screen!! You've already made the body into a flex column so I can't understand why you've added this absolute positioning anyway. It is breaking the solution because it effectively takes the component out of the flow of the document.
    10. The component must not have a width. It should only have a max width in rem. This will allow it to shrink narrower on smaller screens and using rem means it will scale correctly for all users, including those with a different text size.
    11. The component must not have a height at all. This is extremely important: Never limit the height of elements that contain text. Let the browser do it's job and decide what height is needed based on the content inside.
    12. Place border radius on the component itself instead of on the child elements. The component will just need overflow hidden to crop out the overflowing child corners.
    13. The button must not have a height either. (Same principle as no 11 above). Use padding.
    14. Check the font weights and line heights. In places your solution does not match the design closely enough.

    Marked as helpful

    0
  • @Camagu-Ncoso

    Submitted

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

    I'm proud that I'm still learning even when I do a new project

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

    Using units that are responsive is quite a problem but with more practice I will get there.

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

    css: position items. knowing when to use margin and padding. I tend to get confused on those. I'd like to practice more flexbox

    P
    Grace 27,590

    @grace-snow

    Posted

    I'm afraid this is overflowing my screen horizontally quite a lot because you've used an explicit width instead of max-width. But first, think more carefully about the html

    • all content should be contained within landmarks. This should be within a main. Every page must have one.
    • read the article in the resources channel on discord about how and when to write alt text on images. The alt text on both images needs to change.
    • It may be fine to use a h2 for the heading if you envisage this being below other content on a page, but I think that is unlikely. "order summary" sounds like a single page in an ordering process, so I would expect it to be a page title (h1).
    • should annual plan be a heading or a paragraph? Your choice, but it shouldn't be a strong only. That is an emphasis tag that goes inside other elements.
    • not necessarily a problem but I want to ask you to explain something: why have you chosen an anchor for "change", a button for "proceed" and a button for "cancel"? What would you expect to happen when users click each of these?
    • it's better for performance to link fonts in the html head instead of css imports.

    Now onto css:

    • get into the habit of including a full modern css reset at the start of the styles in every project.
    • mobile styles should be the default. Note the design and starter files include a different background image for mobile vs desktop and slightly different padding.
    • the care must have a max width in rem not a width. This allows it to shrink narrower when needed (eg on a smaller screen)
    • the card should have a little margin on all sides so it can't hit screen edges (or a wrapping element / body can have a little padding for the same effect)
    • does container need to be a flex column? I see no benefit when you're not using the gap property. If you did use gap you would remove vertical margins on children.
    • you asked about the difference between padding and margin. Hopefully that helps.
    • it's fine for line height to be in rem, but its unusual. Usually it's unitless like 1.5, or sometimes in % like 150%.
    • use gap and flex properties (like flex grow) instead of large margin on plan container child elements.
    • I think the proceed button should at least have a little inline padding. often padding on elements like this will be in px if you want it to be static or em if you want it to scale with the button text size.
    • this needs a media query as mentioned above. When you add one make sure it's min-width and that it's defined in rem or em not px. https://fedmentor.dev/posts/responsive-meaning/
    0
  • Saran 20

    @Sarank20

    Submitted

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

    I stack with margin, then i solved it

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

    I stack with margin, then i solved it

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

    check my mobile version of my project and help me to solve the issue

    P
    Grace 27,590

    @grace-snow

    Posted

    Hi, I hope you find this feedback helpful. I'll just list it out so hopefully it's easier to follow:

    1. Don't include empty divs in html. There is no reason to use background image over image for this card, and it would have a negative impact on performance if you did this on this kind of component in a real site.
    2. Think about the context of where this component would be used when you build small components like this. This card would very likely be alongside other blog cards —multiple would be used on one page. it is extremely unlikely that this type of card would ever act as a page title which tells you it must not have a H1. H2 would be much more appropriate.
    3. There’s currently no way for anyone to access the blog being signed posted by this card because you’ve not included an anchor link anywhere. There should be a link inside the H2 wrapping the blog title text. (Always test solutions with your keyboard as a good step to ensuring you've used interactive elements correctly)
    4. to make the whole card clickable you would make the card position relative, then add a pseudo element on that link, absolutely positioned and sized to fill the space of the card.
    5. "Author image" is not an appropriate alt description of the image. alt should never include words like "image" because it’s already got an image role. take a look at the excellent post in the resources channel on discord about how and when to write good alt text.
    6. The author name is definitely not a H2. Using headings appropriately is very important. They must only be used when something is an actual heading for content underneath it. this author name is just a paragraph.
    7. get into the habit now 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.
    8. there is a bug in your code caused by limiting the height of the body to 100 VH never limit the height of elements that contain text, including the body. Instead use min height. this will allow the body to extend beyond the limit of the viewport height when necessary.
    9. The main landmark should not be your card component. This component would sit on a page within main. Therefore, the component must be its own div with a class so it can be styled independently.
    10. there is no benefit to making the card into a flex column, unless you’re planning on using the gap property. all of the child elements within the card stack vertically by default.
    11. The card image must not have a explicit width. Once you have changed the image to be an img element instead of background image the sizing would be simple: A standard part of the CSS reset would be to set image elements to have a max width of 100%. That is all this image needs. if you were still using background image, the div would not need a width setting in CSS, but the background image would be sized using background properties.
    12. The whole card should have padding. The child elements within the card should only have vertical margins. Make sure you understand the difference between padding and margin.
    13. there is no need for a content div at all in this challenge, and it definitely would not need an explicit width.
    14. this follows on from the point above about including a link. Remember that anywhere you see a hover style in a design. It means that there is an interactive element there. Never just add cursor, pointer and hover styles to non-interactive elements as they won’t actually function.
    15. delete the media query and everything within it in the CSS. This challenge does not require a media query.
    16. when you do need media queries in future challenges, make sure you know how to use them well. You should be styling mobile first that means the mobile styles are the default CSS and the larger screen overrides, go within a min width media query. Media queries must always be defined in rem or em not pixels.

    Marked as helpful

    1
  • tybaglue 20

    @tybaglue

    Submitted

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

    Proud of my diving in even without enough knowledge and experience, and for trying to make something first even if it wasn't close to the final result.

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

    I go stuck in the css part very early on, with the divs tags and classes confusing me. I went on youtube and found a tutorial from "Mr.Coder". I watched it once and tried to mimick how he did it, but still had to go back several times to get everything right.

    Also the Github repository was confusing, fortunately "codercoder"s video was very clear for the setup, but finding and publishing the live url took me another half hour to figure out.

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

    Not much.

    P
    Grace 27,590

    @grace-snow

    Posted

    Hello! Well done at diving into your first challenge. there are some important learnings from this first challenge that will set you up well for future. I hope this feedback is helpful.

    1. The stylesheet link goes in the head not body.
    2. Remove the header landmark. This challenge had no header and you must never leave empty landmark elements on the page. These are very important elements for accessibility (assistive tech users use landmarks and headings to understand the contents of a page and navigate within it).
    3. This is missing a main landmark. Every page must always have a main. Change container to be a main not div. (NB: This is a single component challenge so these landmarks are not strictly needed but it's best to get into the habit of adding it straight away so you don't forget later).
    4. The image alt description isn't quite right. Think about the context of how this card component would be used on a real site. It's likely there could be several cards like this on a page so the image alt must give an accurate description of this specivific image. It should say what the image is (QR code) and where it goes (to FrontendMentor.io). There is a read post in the resources channel on discord about how to write good alt text if you want to know more.
    5. It's really valuable to make sure you Indent your code consistently so it's easier to read and spot bugs. Your code editor can even do this formatting automatically for you with prettier.
    6. The starter code came with a gitignore file. Do not remove that from your repo! It stops files like DS STORE which should not be there from being tracked by git.
    7. It is better for performance to link fonts in the html head instead of css imports.
    8. Get into the habit of 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.
    9. Justify content center is missing from the body in css.
    10. The components max width should be in rem not px. This is important because many people change their default text size. If you set a max width in px that is an explicit limit but would look awful and narrow for those users with larger text. If you use rem instead the layout will scale correctly for all users.
    11. I think you may be a little confused between padding vs margin. I wouldn't expect a heading to have padding as its not a box, it's a text element and has no concept of needing "internal" space.
    12. ⚠️ Font size must never be in px
    13. There is no need to use position fixed or absolute on the footer. This is causing a horrible bug where the footer overlaps the card because you're taking the footer out of its normal place in the document.
    14. I think your heading text size is too large in comparison to the design. Try to adjust that.

    Marked as helpful

    0
  • @NF0mar

    Submitted

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

    I am proud that i am doing much better than before. I used to hate css but now i am loving it day by day by practising.

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

    The challenge i encountered is that my solution was not responsive and still is not.

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

    Kindly help me with grid and responsive.

    P
    Grace 27,590

    @grace-snow

    Posted

    Hi, To add to the above feedback this is overflowing on my screen quite badly due to the explicit widths used. There must be no widths or heights used anywhere in this except the little image. All the component needs is a max-width in rem.

    Other issues I notice

    • Font size must never be in px
    • place styles in a separate stylesheet
    • get into the habit now 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.
    • border radius can be 100% for a circular image.
    • it is invalid html to have a link inside a button. These are only links, not buttons. Make sure you understand the difference between those elements, it is very important to use the correct one.
    • don't place height on the links, use padding.
    • do not remove outline from interactive elements unless you are going to add a clear and obvious high contrast focus-visible outline. Keyboard users need to see where focus is on the page.
    • as said above, this needs a main landmark to wrap the component and a footer for the attribution.

    Marked as helpful

    1
  • @saifuldt

    Submitted

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

    --------('-')---------

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

    --------('-')---------

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

    --------('-')---------

    P
    Grace 27,590

    @grace-snow

    Posted

    This overflows my screen and breaks very badly for users who use a different text size. It would also break if authors changed the text in any way.

    The reason is a foundational and essential one: do not set explicit widths and heights on components. Let the browser do it's job and decide what height is needed based on the content of the card. Use max width (in rem) instead of width so the component can shrink narrower when it needs to.

    Buttons and paragraphs should not have explicit widths either. In fact the only elememt that should have an explicit width is the music icon. The button should only be full width (100%).

    The other important problem I note is around the use of alt text on images. This is not how to use it. I recommend you read the excellent post I the resources channel on discord about how and when to write alt text on images.

    The last thing is more of a question for you to explain — why is change an anchor, proceed a button and cancel a button? That may be fine, but can you explain why you chose each one? (What you'd expect to happen on click)

    0
  • Mr_Sajith 40

    @Mr-sajith

    Submitted

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

    • I am proud of to complete my second project.

    • Next time, I will do better then privious projects.

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

    I have done that project's actual desktop version but when I code media query to mobile version, I struggled to make.

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

    I don't know to say that

    P
    Grace 27,590

    @grace-snow

    Posted

    This needs a lot of the same changes as I fed back on your social links solution just now.

    A few different ones for this though:

    • all content should be contained within landmarks. This needs a main to wrap the component and a footer for the attribution.
    • if using inline svgs you must decide if the image is meaningful or decorative just like you would with an img element and deciding how to treat the alt attribute. The way you handle that difference is different with inline svgs though as they don't accept the alt attribute. If it's decorative, you can add aria-hidden set to true. If it's meaningful content look up how to accessibly label/name svgs.
    • you've missed out the link inside the heading element that should be wrapping the blog title. This means there would be no way for users to access this blog, making the component useless.
    • the picture element code is invalid html. Change that picture element to a div. And change the span inside it to a paragraph.
    • never style the html element or add hover effects to it! The hover style must be attached to the link (currently missing).
    • to make the whole card clickable you would then need to: add position relative to the card, add a pseudo element to the link sized to fill the card and positioned absolutely over it. That will make the link area cover the card.
    • most other css changes are the same as in the other challenge so apply them all here (note this challenge also does not need a media query).

    Marked as helpful

    0
  • Mr_Sajith 40

    @Mr-sajith

    Submitted

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

    • I am of to learn something.
    • I will execute my new learning in my next project.

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

    Don't know

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

    Nothing to say.

    P
    Grace 27,590

    @grace-snow

    Posted

    Oh dear the html in this needs rewriting I'm afraid. There are lots of fairly serious problems and the css could do with improvements too..

    1. Remove all IDs. This is not what they are for. Also IDS must be unique on a page, they cannot be repeated on multiple elements. They will become extremely important later so you need to learn to use them correctly.
    2. All content must be inside the body. You can't have a footer outside of it.
    3. Remove the header element. That is a very important landmark that has an important purpose. The header sits outside of main as its own landmark and must contain repeating content across every page of a site (like navigation or logo). This design has no header.
    4. The img does not need any element to wrap it.
    5. The img should have proper alt text. "girl" does not describe this image. Read the excellent post on discord about how and when to write alt text (search the resources channel for "alt").
    6. Don't add roles to divs.
    7. The list of links should be in a list element.
    8. The links must be anchors. They are not buttons. Make sure you understand the difference between these elements.
    9. I think you are misunderstanding/misusing the section element. This design doesn't need sections at all. They will behave just like divs, there is no benefit to adding sections and role group anywhere.
    10. Get into the habit of 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.
    11. This challenge does not need a media query at all, all of them should be deleted. But in future challenges, make sure you know how to use media queries well. The mobile styles should be the default, only override certain properties for larger screens, and media queries must be defined in rem or em not px. Theres more in the post.
    12. The component should only have a max width in rem. No widths.
    13. Children of the component don't need widths either, with the exception of the links which may need width 100% (or display block). Remove all of the widths on child elements.
    14. Stop using percentages so much, especially for padding/margin. That removes all control of the layout because you don't know what percentages will equate to.
    15. I'm not sure why you're using grid in this as there is no benefit. Perhaps if you were using the gap property that would make sense.
    16. Text align inherits so can go on the component instead of individual child items.
    17. The img is the onky element that should have an explicit width and height (eg in rem or px)

    I hope this helps. Go back through pervious challenges and make sure you apply the same learnings.

    Particularly focus on getting the html right as everything else stems from that. If the html is wrong, nothing in the solution can be right.

    Marked as helpful

    1
  • Diwakhar 210

    @diwakharpandyan

    Submitted

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

    Im proud to see my page is responsive in both desktop and mobile screen

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

    I was confused with the design since it has 2 pages back to back i thought i had to code it exactly as it is in the design

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

    Need help with best practices and css reset

    P
    Grace 27,590

    @grace-snow

    Posted

    I hope this feedback is helpful...

    1. Look up how and when to write alt text on images. There is a great post in the resources channel on discord about this. The alt text on the image you have written here is not right.
    2. Change the summary element to a paragraph.
    3. Headings must go in order. This is extremely important. Headings give the outline of the document content, much like the contents page of any big document, and are used extensively for navigation by assistive tech users. It's an accessibility requirement failure to skip heading levels like this from h1 to h3.
    4. Don't add non breaking space code in the html. Use css! In most sites you would not have the luxury of changing the content code like this.
    5. Remember strong tags add bold emphasis not spans.
    6. The table must include header cells. This is essential. Ideally, these should have the scope attribute set to row.
    7. There is no need for an extra span inside the table cells. Keep html as simple as possible.
    8. Get into the habit of 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.
    9. Did you mean to set the body's min height to 100vh perhaps? (Not 10vh)
    10. Remove any css properties you are repeating/overruling like padding on the body.
    11. The recipe image does not need height 100%.
    12. This challenge does not need a media query I think. If it did though it would need to be (a) defined in rem or em not px and (b) be a min-width media query targeting the larger screen sizes because almost all projects should be built with the mobile styles as the default. Read about how to make sites responsive and use media queries well
    13. All I can think that may change in a media query may be padding and font size, but if so font sizes would need to be explicitly stated not just a keyword value that removes all control of what that means on different browsers.

    Marked as helpful

    1
  • @Shahzaib-ur-Rehman

    Submitted

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

    Through this experience, I've gained the understanding of effectively utilizing both flexbox and grid layouts in combination. Now, I'm filled with confidence in my ability to construct various layouts.

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

    Initially, I found myself puzzled about constructing the layout. However, I'm grateful to my seniors who provided guidance, enabling me to overcome this challenge.

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

    please provides fonts for headings and some tips in spacing

    P
    Grace 27,590

    @grace-snow

    Posted

    Hi

    I had a quick glance at the html code and it's a real shame you've gone for flexbox on such a perfect fit css grid challenge. I recommend you refactor this to try and use grid only for the page layout. It's the perfect practice project for grid and you're missing that opportunity.

    Also, note there is no header in this design. The header landmark has a very specific purpose and must nit contain any headings or page-specific content. It is designed only to hold primary repeating content that sits on every page of a site (like logo and navigation).

    Marked as helpful

    1