P
Francis7575• 580
@Francis7575
Submitted
What specific areas of your project would you like help with?
Could anyone tell me how to remove the empty space at the bottom of the solution? please
P
Grace
@grace-snow
All comments
There are lots of accessibility challenges in this challenge that you need to pay attention to.
- The dark mode toggle is currently inaccessible. Because it's label on the control (the button) is just "toggle button". How would an assistive tech user know what that button does? If using a button it would need to be aria-labelledby by the "dark mode" text node's ID and it would need the aria-pressed attribute (where true equates to dark mode being active).
- On that note, you're making the application of that dark mode very complex. I recommend you check the tailwind docs as you can make this simpler I think where tailwind can apply the theme automatically for you (eg based off one class high up in the dom then using tailwind theme classes).
- The h1 doesn't usually ever go in a header. It should be the first heading within main. I don't think it matters for this challenge specially as its probably a one-page site but mentioning so you know for next time.
- That said, I would add a visually-hidden h2 before the first row of cards at the start of main. Assistive tech users commonly jump to the main landmark or by headings and would not know what this content is as it's currently untitled.
- In follower cards the icon img is acting as the card title. That means it needs to be in a heading element (h3 if you've added that h2 above) and the alt should only say the platform name not "icon".
- Text should never be in divs or spans alone. Use meaningful elements like paragraphs.
- A lot of the data in these cards will need extra visually hidden text to make the data make sense like "username:" before the username.
- The label like "followers" is definitely not a heading. To make sense it has to be read along with the number above it. That means they both need to be in a paragraph together. You can use spans inside that paragraph to style each part separately.
- "Arrow icon" causes a critical accessibility failure because it does not communicate the meaning of the image. I recommend you treat that image as decorative and include the label as visually-hidden text. It needs to conditionally communicate whether it is an "increase" or "decrease" based on whether it's arrow up or down being shown.
- The feedback on the other cards is very similar. Make sure the heading is meaningful like "Facebook likes" and the content makes sense including whether it's showing an increase or decrease in the stats.
- Lastly, it's optional, but I would find it beneficial for these cards to be in lists. That would tell screen reader users how many there are.
Marked as helpful
1- Wondahs• 100
@Wondahs
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of being able to better organize my code. I still have a lot to learn, though.
What challenges did you encounter, and how did you overcome them?
Selecting certain elements in my JS and CSS was a bit tricky, but with more focus and carefulness, I was able to overcome it.
What specific areas of your project would you like help with?
I'd like more understanding on the use of '+' and '~' in selecting elements in CSS.
Hi, I'm afraid I see quite a few accessibility issues in this. I recommend you try using it with a screen reader to debug and run an automated scan at each step (eg using Axe devtools).
There is also an important usability problem because you've chosen to disable the next button (very bad for accessibility too). This means users must choose an add on in order to continue through the form.
The other problem I had was with some controls being hidden by the "next" bar at the bottom of the screen. I couldnt scroll down far enough to reach the toggle at all, for example.
The last thing I couldn't understand was why the steps numbers are buttons... If they're not interactive they mustn't be coded as interactive controls.
Marked as helpful
0 - mrsaviBeliVojvoda• 110
@mrsaviBeliVojvoda
Submitted
What are you most proud of, and what would you do differently next time?
Next time I will try to read documentation for TailwindCSS more :)
What challenges did you encounter, and how did you overcome them?
The biggest challenge was to find right TailwindCSS classes to finish it to be responsive 100%. I was trying with few different solutions and I think this final solution is quite good.
What specific areas of your project would you like help with?
Maybe I need to know more about container TailwindCSS class - when and how to use it.
I actually think the biggest issues here are with html knowledge. I recommend you spend some time really focusing in on meaningful html structure as this needs quite a few changes (some essential, and some general recommendations). I'll try to list them out.
- All content should be contained within landmarks. It's great you've got a main landmark in here, but make sure the attribution is in a footer.
- This is one component. That could be one section but shouldn't be split into two sections. Try to think of a section as a chunk of content that has a h2. (Sections are actually meaningless unless labelled, but I think it's good to get into the habit of using them well in case you ever need/want to label one in future.
- There's no need for the div wrapping main. If you want the body or the main to have padding, give it padding.
- This component should be using the picture element not two Img elements. The mobile img src should be the default in the img element within the picture, and there should be a source tag above referencing the larger screen img source with a min-width media query defined in rem or em. It's important to learn how to use the picture element so you're serving images in a performant way and not forcing all users to download all images.
- This is not how you write img alt. There is a great post in the resources channel on discord about how and when to write alt text that is worth reading!
- There is only one heading in this. It's extremely important for accessibility and SEO to only use headings appropriately and in the correct order. They are the main elements that explain the content structure on a page and they are relied on for navigation by those using assistive tech. Remove the h2s and h3s in this.
- Those stats should be a list with 3 list items. Note the list items are the meaningful elements here. The numbers and words must be read out together to make any sense. To split them visually only, so you can apply different styles use strong and span (or both spans, but set to display block so they can vertically stack).
- If links are set to open in a new tab you need to notify assistive tech users of that behavior. The most common way to do that is with some visually hidden text in a span within the link that says "(opens in a new tab)"
Marked as helpful
0 - Fastcheettahh• 20
@fastcheetah
Submitted
What are you most proud of, and what would you do differently next time?
I used a different way when laying out my work and I think it will be very helpful in the future
What challenges did you encounter, and how did you overcome them?
I know more about my areas of weakness and I am trying my best to solve them like I specifically have problems with flex and box models and im trying to fix them
What specific areas of your project would you like help with?
If you have problems with the site please feel free to comment
I think the most important place for you to focus your learning is on HTML at the moment. This needs some important changes, essential for accessibility, SEO and usability.
- You only need to use the figure element if you need a figcaption. It is not a generic wrapper for all images. These images don't need a wrapping element at all, but you can use a div when the only reason is for layout purposes.
- Make sure you know how and when to write alt text on images. There is a great post about this in the resources channel on discord (search for "Alt" and you'll find it).
- Headings must be used appropriately. Learning is not a heading, nor is Greg's name. Heading tags must only be used when the text is an actual title for some content around it.
- Also, it's essential that headings are in the correct order. On a full Web page the headings list should act like a table of contents in a book or long document — reading it communicates the structure of the document (in this case web page) and relationships between content, and allows people to jump to the content they want. Every page has a h1 as the title of the page and then other headings below are sequential. In this case, because it's only a single component challenge, you don't need a h1, just a h2 for the blog title as you have already.
- This component would be unusable on a real site. There is no way at the moment for users to access the blog it's signposting to, because you've not included a link anywhere. There should be an anchor within the h2, wrapping the blog title text. This is what makes the card interactive to all users (eg including keyboard)
- Once you've added that link you'll need to make the whole card clickable in this case. That is not always the case, but we know the whole card is meant to be clickable in this because the design includes hover styles for the whole card. Always take note of where you see hover styles — that means something is meant to be interactive. To do this, you will need to make the card position relative and then add a pseudo element on the anchor inside the heading. That pseudo should be positioned absolutely and full height and width so it covers the whole card, effe tively making the link take up more space so the whole card becomes clickable even though the link is only small inside that card.
0 - Aldo Adabunu• 290
@KwakuAldo
Submitted
What are you most proud of, and what would you do differently next time?
I learned a lot about javascript with this project, especially with the drop down menus. There is still a lot I need to polish with this project and I would love some feedback on what to improve on and how to add the shadow overlay without breaking the side nav menu in mobile view.
What specific areas of your project would you like help with?
How to make the menus open one at a time, and have them close if anywhere on the page but the menu element itself is clicked on. I would also love to know how to get the shadow overlay when the side menu opens to work without it breaking the page, if you look at my solution I already attempted it with an empty div but that seems to break the code, any solution on how to go about that is welcome.
I'm afraid this overflows my mobile screen a lot and behaves strangely when the mobile menu is open because I can still scroll. I'm away from a computer but I expect there may be problems at other screen sizes too.
Before that though, I'll go through the html and list out some necessary changes & recommended improvements as those are the most important to start with...
- The mobile menu (hamburger) menu button must be the first element inside the nav. This is so that assistive tech users can find it easily.
- That same button must have an aria-expanded attribute, whose boolean value will toggle between false and true on click (thus communicating the state of the disclosure to assistive tech, if its expanded or collapsed). This is necessary on all buttons that trigger a disclosure so is needed on all of these "dropdown" triggers within the nav. They are not anchors. I've written up a full post about disclosure UI code and recommend you read it.
- Additionally, I recommend the hamburger open/close buttons are just one button. You can change which icon is visible within the button based on its aria-expanded state (true/false).
- The hamburger menu button must have an accessible name. Currently you are using the image alt for that, which is OK but it would need to say "navigation toggle" instead of "hamburger menu" and "close menu icon". Alternatively you could leave alt blank on those icon images and use aria-label on the button instead, or visually-hidden label text inside the button. The way you choose to solve it is your choice from those options.
- "Register" should be an anchor not a button. Same with "learn more".
- The paragraph underneath the h1 is definitely not an article. Make sure you understand what that landmark is for.
- The company logos are important content, not decorative in my opinion. You have to ask - are they included for a reason? It's to show clients. That's valuable information for people to know about a brand/service so must not be hidden from assistive tech users.
- I also think you are misusing the section element. This doesn't particularly matter as sections only have meaning when they are labelled. But as a general rule think of a section as a significant chunk of content that always has a heading, usually a h2). It should not be used as a generic wrapper for an image just to make a layout work. That's what a div is for.
- Try to make sure all content is contained within landmarks. That means the attribution should be in a footer.
- If links ever open in a new tab, make sure they include some visually-hidden text (eg in a span) that communicates that behaviour eg "(opens in a new tab)"
- Don't have empty divs in the html for no reason. I see one at the end of the nav for example.
Marked as helpful
1 - ashensavi• 30
@ashensavi
Submitted
What are you most proud of, and what would you do differently next time?
I'm so happy than proud because I completed this almost 100% accurate.
With these 3 simple projects, I learned a lot. Thank you Frontend Mentor!
What challenges did you encounter, and how did you overcome them?
-
When I applied display flex on avatar img and h4 tag, it wrongly placed in the div. So then I changed the flex direction, and it worked well.
-
When customizing the buttons, I didn't know the width of the buttons can be changed. So, after figuring that out, I resized the buttons correctly.
What specific areas of your project would you like help with?
It would be great if someone could review my code and give me some feedback and suggestions like what I am doing wrong or how to keep the code clean.
I’m afraid you need to rewrite the html in this.
- all content should be contained within landmarks. Every page should at least have a main.
- the html in this is an img, heading, two paragraphs and a list of links. Headings must only be used appropriately. This only has one heading. But even if the design had more headings they would need to be in order. You can’t jump heading levels.
- the img alt is for a description of the image. Read the post in the resources channel on discord about how to write good alt text.
- it is invalid to have anchors and buttons inside each other. They are different elements for totally different purposes. It's very important to use each of them appropriately.
- these links must not open in a new window. If they did, it would be an accessibility requirement to include that in the accessible name. Eg have visually-hidden text that says "(opens in new window)"
- the list of links must be in a list.
- it's better for performance to link fonts in the html head instead of css imports.
There are also some significant issues in the styles
- 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.
- never limit the height of elements that contain text. This component does not need a height. Instead, let the browser do it's job and decide what height is needed based on the content inside. nothing in this challenge should have a height except the image.
- the component must not have a width. Instead give it a max width in rem so that it can shrink narrower if needed (eg on smaller screens) and so the layout scales properly even for those users who change their text size.
- there is no benefit to these flex columns in the component of you're not using the gap property. Block elements woult stack vertically by default.
- line height must never be 0
- font size must never ever be in px. Use rem. I've written a detailed post about this on FEDmentor.dev if you want to understand more.
- the links can be display block and optionally width 100%. They must not have an explicit width in px.
Overall I recommend you try to really simplify the styles in this.
Marked as helpful
1 -
- Ashraful Mijan• 40
@Ashraful-Mijan
Submitted
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 - Fastcheettahh• 20
@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
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:
- 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.
- 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.
- 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.
- 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:
- 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.
- 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.
- 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.
- 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
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?
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.
- All content should be contained within landmarks. This needs a main to wrap the component and a footer for the attribution.
- 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.
- 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.
- The img does not need wrapping in a div. As a general rule try to keep the html as simple as possible.
- 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.
- 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).
- Make sure you update the link to you in the attribution. Perhaps to your frontend mentor profile page or to your github page.
- 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.
- 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.
- 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.
- 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.
- Remove all other widths in this. They are unnecessary, cause bugs and make the solution less robust.
- 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.
- 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.)
- 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.
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• 60
@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?
Try to get the colors and spacings much closer to the design if you can.
0 - Kezia Baidoo• 10
@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.
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?
-
The challenges I encountered were: aligning the table cells in the nutrition section properly and indenting the Preparation time code.
-
I initially struggled with CSS styling to achieve the desired layout.
-
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?
-
How effective are my media queries in ensuring a responsive design across various devices?
-
Are there any specific improvements or adjustments you would recommend for my media queries to enhance the responsiveness of my project?
-
Can you provide feedback on the readability and organization of my media queries? Are there any best practices I should consider implementing?
-
I'm unsure about the readability of my CSS code. Can someone provide suggestions on how to organize it better?
-
I'm not sure if my design is visually appealing. Can someone give me feedback on the colour scheme and layout?
-
Does my project meet all the requirements stated in the README.md?
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• 20
@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.
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 - nyarkoohene• 10
@nyarkoohene
Submitted
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• 20
@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.
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 - PCarsten Körner• 150
@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.
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...
- 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.
- 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).
- 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.
- 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.
- All of the css you have on the container class can go on the body instead.
- 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 - Pjasoneczek• 250
@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.
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 - Eric Aguayo• 725
@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.
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:
- 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.
- Remove the divs wrapping each anchor. The list of links should be in an actual list instead.
- Read the post in the resources channel on discord about how to write good alt text on images.
- 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.
- What you've marked up as small is not Smallprint. That should just be a paragraph.
- 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)".
- It is better for performance to link fonts in the html head instead of css imports.
- 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).
- ⚠️ Never set font size in px. This is a serious accessibility failure.
- The component must not have a width. It is overflowing my screen because of this. Instead, use max-width in rem only.
- 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.
- 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.
- Text align inherits so can be set at component level instead of repeating the property on different child elements.
- 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.
- The whole card should have padding.
- The links should have at padding on all sides.
- 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.
- 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.
- 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?
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.
- 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.
- 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.
- 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.
- Similarly, the cart icon should not have any value in the alt attribute at all as it is purely decorative.
- The strike through text must be done with
sordeltags. - 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 fonts and colors on the body not on the html. Try to avoid styling on html at all unless absolutely necessary.
- 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. - 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.
- 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.
- 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.
- 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.
- The button must not have a height either. (Same principle as no 11 above). Use padding.
- Check the font weights and line heights. In places your solution does not match the design closely enough.
Marked as helpful
0 - Camagu Ncoso• 20
@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
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 - all content should be contained within landmarks. This should be within a
- 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
Hi, I hope you find this feedback helpful. I'll just list it out so hopefully it's easier to follow:
- 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.
- 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.
- 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)
- 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.
- "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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- there is no need for a content div at all in this challenge, and it definitely would not need an explicit width.
- 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.
- delete the media query and everything within it in the CSS. This challenge does not require a media query.
- 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• 30
@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.
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.
- The stylesheet link goes in the head not body.
- 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).
- 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). - 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.
- 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.
- 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.
- It is better for performance to link fonts in the html head instead of css imports.
- 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.
- Justify content center is missing from the body in css.
- 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.
- 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.
- ⚠️ Font size must never be in px
- 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.
- I think your heading text size is too large in comparison to the design. Try to adjust that.
Marked as helpful
0
