Tan Nguyen• 200
@tannguyen2003
Submitted
oaved
@oaved
All comments
- oaved• 90
@oaved
Posted
Accurate design and nice feature with the slide on the share menu. I cant really find anything to comment on!
0 What are you most proud of, and what would you do differently next time?
I am most proud of utilizing media queries on CSS, and was satisfied with how similar it looked to the mobile design example.
What challenges did you encounter, and how did you overcome them?
The biggest challenge I had was making the page match that of the mobile page example. It looked fine to me on a desktop, but when I shrunk the browser to a phone's size, it looked off and incorrect. I fixed this problem by doing research and learning about media queries which was very cool and much needed.
What specific areas of your project would you like help with?
I felt like I had lots of unnecessary code, so maybe some advice on if I wrote some lines down that weren't needed, or if I could shorten my code. I also would like some criticism of how I did the semantics. I found it a bit difficult to implement semantics to a simple recipe page.
oaved• 90@oaved
Posted
I don't know if it will shorten your code but I find it useful to design text with utility classes. It makes the CSS code shorter and takes away the problem of coming up with a uniqr name for every bit of text. The downside is the HTML gets longer. But utility classes could be something you wanna check out.
I think your semantics is fine but I think your use of <article> is a bit off. I belive <article> is used when something can be taken out of the context of the webpage and still be understood. The best example is in fact an article of some sort. In this case I would use the <section> tags where you use <article>. You could also use the role-attribute in your table. Use role=table, role=row and role=cell on the table, row and cell divs.
Just some tips and tricks, the design looks good and that is the most important!
Marked as helpful
0- Eswararao777• 30
@Eswararao777
Submitted
oaved• 90@oaved
Posted
Your solution differs from the design a bit. Try using CSS custom properties and looking at the style guide. By using custom properties you can declare the colors, font-sizes, font-weights and more from the style guide and later on only using the custom properties. This ensures you get the right values in your CSS all the time, and makes your website more consistant and similar to the design.
In your HTML, try using more semantic tags instead of divs. By using semantic tags you increase your website accessablilty which is an important aspect.
1 What are you most proud of, and what would you do differently next time?
I am improving the use of variables and class management in order to give a more scalable structure to future projects.
What challenges did you encounter, and how did you overcome them?
I still find it difficult to focus on the small details, I need to see the design several times to have an idea of the things that will be necessary for the development.
What specific areas of your project would you like help with?
I would like to get help on code optimization and HTML and CCS best practices.
oaved• 90@oaved
Posted
I think you have good code hygiene in your HTML and CSS and I think the card looks nice. I'm not by any means a seasoned programmer but I some tips for you!
HTML: You could try to use more sematic tags instead of divs. Maybe try tags like figure, article and figcaption in this project. Also, think about how you use your h1-h6 tags. In a card component like this, which is one coherent component, all h-tags should come in order. The h-tags should also be picked based on their semantic meaning, not by their size. I kinda looks like you have choosen h-tags here based on their size. If you haven't, you can disregard this last tip.
CSS: Try using more general names for your custom properties. Using the property "yellow" can get confusing if this card later on updates to be blue. You could therefore try naming your custom properties like "--clr-primary" and "--clr-accent" or something along those line.
Overall great design!
0- 2VOLTAIC3• 60
@2VOLTAIC3
Submitted
oaved• 90@oaved
Posted
I think you did a great job. The HTML is semantic and simple to read. I dont see any aria-labels or what they are called. Maybe include some of those on your divs do make the website a little more accessible.
Im not that great at BEM so don't quote me on this, but is the main__card--container correct? I don't feel like it is a modifier which the -- indicated. Your design looks good though and that is what matters in the end. Great job!
Marked as helpful
1
