JosephSamuel-1• 60
@JosephSamuel-1
Submitted
P
Daniel Clement
@DanielClement37
All comments
- PDaniel Clement• 80
@DanielClement37
Posted
There are a few things missing in this solution.
- There is pink background to the prep area of the code
- missing
<hr />tag in between the ingredients and instructions - a bunch of the text does not match the style in the design either with incorrect font weights or wrong colors and the fonts are all the default fonts instead of the ones in the style guide.
4)Lastly the nutrition table is being hacked together with divs , h5s, spans, and hrs and can be more easily made using the HTML
<table></table>tags with atext-align:left;0 - chloeandrie• 80
@chloeandrie
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of completing another Frontend Mentor challenge! Looking forward to increasing the difficulty of challenges as I gain experience.
What challenges did you encounter, and how did you overcome them?
I had difficulty with the sizing and spacing of elements. I did not access the Figma files, so I had to estimate. I wasn't sure what the hover and focus states were meant to look like for the interactive elements, so I made up my own.
What specific areas of your project would you like help with?
I'm continuing to work on accessibility and correct semantics. What would you change or do differently?
PDaniel Clement• 80@DanielClement37
Posted
It seems great and 1 to 1 other than the container not being centered vertically. Another thing I would change is that i would add class names to all the html tags that are being styled so that in the case of another h1 or h2 needing to be styled you can use it's class name with
.insert-class-name-here {}or there are also IDs you can give to elements where you can style them with#insert-ID-name-here {}. these will help with specificity of elements as pages get more complex.Marked as helpful
0 - Giacomo Scampini• 120
@scamgi
Submitted
What are you most proud of, and what would you do differently next time?
I learnt how to use flexbox grid in different ways.
What challenges did you encounter, and how did you overcome them?
Removing the underline of the link was very difficult honestly ahahah
What specific areas of your project would you like help with?
Code readability (css), and conventions about css
PDaniel Clement• 80@DanielClement37
Posted
On the html side of things you could have been more descriptive with which html tags you used and named some of the classes better to be more descriptive. For example the article image is wrapped by a div named
<div class="img">. That can get confusing when on the css side of things if you type.img{ /*css here */}vs justimg{ /*css here */}and be effecting entirely different elements. For a naming suggestion instead of the<div class="img">I used this<figure class="blog-art"> <img src="./assets/images/illustration-article.svg" alt="blog-art" /> </figure>Over all though your solution visually is very close to the design and the only critique for that I would say is that it is slightly bigger.
0 @Rod-RodriguezF-28
Submitted
What are you most proud of, and what would you do differently next time?
estoy orgulloso de mi primer proyecto
What challenges did you encounter, and how did you overcome them?
no sabia muy bien darle el formato a la imagen y lo supere investigando en internet
What specific areas of your project would you like help with?
en la estructura html
PDaniel Clement• 80@DanielClement37
Posted
the component is a bit bigger and if the img is sized a bit bigger it will shrink down the padding around it.
Marked as helpful
0
