What are you most proud of, and what would you do differently next time?
This is my first project where I used Block Element Modifier (BEM) convention and Mobile-first workflow. In my opinion, the project was too small for experience the benefits of BEM but it was a good opportunity to get familiar with the concept.
What challenges did you encounter, and how did you overcome them?
In desktop view at the bottom of the image I could see 4pixels of the background. After some research I managed to resolve it by setting the display to block. Moreover, previously I followed desktop-workflow and now it was more difficult to do the other way around, especially the alignment of the screen sizes.
I noticed that you named main landmark as a product actually it is not correct because product card is a small part of it. this main landmark might have multiple of them so the correct way to use article or just a div therefore it should be h2 not h1 more details you can find here
Vertical alignment doesn't work on mobile version because you have forgotten to provide the min-height: 100svh for the body.
What are you most proud of, and what would you do differently next time?
Proud to complete the project and that i was able to do it easier than i thought. It really was a fun and satisfying project, and I loved the use of tables for the nutrition chart!
What challenges did you encounter, and how did you overcome them?
Remember to use tables, they really are a headache
Hello, Adrian, By looking at your solution I noticed some issues:
Use semantic html instead of div and span because they have a special meaning in html structure or you need to assign it manually for each div element the role for example:
I noticed that you used article landmark to wrap as a container. However, it is not appropriate one because it is a main content of the page . In every website one main landmark must exist. I also noticed you used span to make some words to look bold but instead I recommend to use strong element to make words bold it is semantically correct way. at the end you used footer but forgot to change closing tag to it it is still div element. It is important for screen readers.
In terms of css, I have noticed you tried to use relative unit like rem it is a good practice for accesibility but you need to be consistent. Avoid using absolute units for example pixels. In some places you used them change pixels to rems. Also don't forget to remove the last border-bottom of table header and body.
What are you most proud of, and what would you do differently next time?
I am proud that i made many mistakes so i could learn from them Thanks to frontendmentor team ! next time i will respect the accesibility and i will use proper font size and width for the design.
What challenges did you encounter, and how did you overcome them?
I was confusing between what technics should I use to get a responsive design, and also what type of units should I use for font size and width etc...
But thanks to the team members of frontendmentor I could get a useful feedback which helped alot on my research to fix all the mistakes.
What specific areas of your project would you like help with?
The areas i need help with HTML/CSS structures, using proper CSS units in the right place, get good score in the lighthouse, responsive designs.
I think All I need is tones of practice on different type of projects.
Greetings Mohammed. Good job on completing the challenge!
I have some suggestions for you to improve your solution.
You don't have to wrap your image with div to center it because you already did it with "main-container".
for qoutes there is a special tag like "blockquote" use it instead of paragraph. This helps screen readers to recognize "Front-end Developer and avid reader." this sentence is actually a quote not a paragraph.
in main-content you used to center vertically by using flexbox property "align-items: center" but to center horizontally you choose to use "margin: 0 auto" instead of it you could use "justify-content: center" By looking at your solution I find out the difference between them. If you use margin it automatically assigns margin to the main-content however if you use justify content it does not so I think the best way to center horizontally is justify-content for your solution.
-From the responsive point of you, avoid using fixed units like px instead use rem. I noticed that you used them but try to be consistent because if you don't in small sceen sizes you notice unreadable content.
I think for font-sizes clamp is not necessary just rem is enough.
Good job on compliting this challenge!
I have some suggestions about your code that might interest you:
Try to use html 5 semantic landmarks like "main" "section" "article" "footer" instead of div or give the div the role like "main" or "banner" navigation and so on. It is important for screen readers.
Try to use relative units instead of absolute for instance rem for fonts and em for padding and margin. It is important because if you change font size of your browser settings it is difficult to read. The text and other things must be responsive for all screen sizes.
Use css custom property. it is important for maintainability for example, if you want to modify something you change the property value in one thing as a result you change it everywhere it needs to be. You save your time if you use it.
I think the solustion that you are seeking is line-height. If you apply it, the paragraph of your body should look similar to design.
I have some suggestions for you to improve your solution:
Use figma file if it is possible because it gives you more details about the design. If you use figma file that's provided on this challenge you will see that the paragraph with the class of mainText on the line 19 is actually is the heading.
Take a look on the accessibility best practises.Try to use html semantic tags instead of div because it gives more meaning for your project. Keep away from absolute units like pixel instead use relative units. You have forgotten to add alt text for your image. here you can read more about it
According to the responsivenes of the page. There is no need to use media-query here. Let browser to decide. Also when you used width property with the value of vw like this width: 19vw in class of card to limit the size of the component is bad idea because it is hard to read content inside when the size of the screen gets smaller. Instead I suggest to use max-width property with the relative unit like rem or em.
In the class of card it is not necessary to use flexbox because h1 and p tags are block level element which starts in new line automatically.
I suggest also css custom properties which gives you more flexibility for your code. It allows you quikly make changes without efforts.
