@ava-xmasSubmitted 3 months ago
Latest comments
- @dave-tegPosted 3 months ago
Good job finishing the challenge. But there are some issues with the solution.
- the solution lacks responsiveness a bit. a horizontal scroll bar appears that could be handled applying max-width in the container where the grid is applied.
- also it would be better to use grid-template-areas, it would be more organized and simpler.
Marked as helpful0 - @latifa-wakiliSubmitted 3 months ago@dave-tegPosted 3 months ago
Hi there good job finishing the challenge. Here are some suggestions about your solution.
-
the fonts aren't the same as the design. In the style guide there is a link to google fonts where the font is get the embedded code and paste it in your css.
-
instead of doing it like this
<div class="header"> <p class="title"> Reliable, efficient delivery</p> <h2 class="h1">Powered by Technology</h2>you can do it like this
<header> <h1> Reliable, efficient delivery <br> <span> Powered by Technology </span> </header>first of all the main headline should be a h1 tag so you should it instead of p or h2. And then you can make the span bold.
- for the main grid layout instead of using margins to place the cards in the right position. you should use either flex or grid on a wrapper or container that encloses all the cards.
- try to use variables for colors, font weights and the like cause it will make your code more organized.
- I would suggest a video about this challenge by kevin powell.
- for the future I would suggest to use the style guide as a basis for your work and try to mimic the design as much as possible.
0 -
- @njmoon21Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm not very proud of how much I was able to achieve by myself. I ended up having to reach out to other outside resources/walkthroughs and follow them.
What I have realized (despite the article section before this challenge), was that I DEFINITELY should've constructed the page from mobile-view first.
At the very least, I am proud of how much more eligible or clean my HTML and CSS has looked compared to my first few Frontend Mentor projects.
What challenges did you encounter, and how did you overcome them?The deeper I got into working on this challenge, the more I realized how much property types I didn't know about when looking at other resources.
My very first attempt was creating it based off of desktop-view, and it was very awkward for me trying to switch the layout between the two. I wasn't able to figure out how to change the layouts with the @media under my own knowledge.
So how did I "overcome" these challenges? Most of what I got out of this challenge was learning from the video. I learned about the element, srcsets, grid displays, the importance of the rem unit, and many more properties that I'm not used to.
What specific areas of your project would you like help with?I'm very bummed that I wasn't able to complete this on my own, however I felt like I have learned a lot from the resources I used. I would like some more advice on how or when to determine the mobile/desktop formatting (which one to do first over the other).
Resources -
Kevin Powell's Video: https://www.youtube.com/watch?v=B2WL6KkqhLQ
Josh Comeau's CSS Reset: https://www.joshwcomeau.com/css/custom-css-reset/
@dave-tegPosted 3 months agoThe solution looks pretty close to the design. I like that your code is structured and organized. You used BEM model that is also good. I like the use of custom properties to change values it keeps it structured. Also, I liked that you linked the resources you used. Will check them out.
1 - @rc-0105Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Im proud on making the html using semantic html, also aplying the same styles from other of my codes.
What challenges did you encounter, and how did you overcome them?I find a problem centering the main container but i realized that i could look back to my other codes and copy the body to see if that works. That solve the problem.
What specific areas of your project would you like help with?I think that the css could be better done, hope you can help
@dave-tegPosted 3 months agoHi there. Good job on finishing the challenge. Here are some suggestions about your solution.
- try to follow the design more carefully. Your solution doesn't include mobile design on the design file. And also some fonts and spacing doesn't really match the design.
- on the implementation of the nutrition part you used a table, while that is also applicable, I suggest using grid to make it more responsive for different viewports. You can separate the two items in each row by giving them class names like 'label' and 'value' and then make the row a grid like this.
.row { display: grid; grid-template-columns: repeat(2, 1fr); }Hope this helps. Keep on coding!
Marked as helpful0 - @DotyAmoebaSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of the CSS code as it was the hardest part I've overcome
What challenges did you encounter, and how did you overcome them?The main difficulty is adaptation
What specific areas of your project would you like help with?I want to hear your opinion about my css code
@dave-tegPosted 3 months agoHi there. Good job finishing the challenge. But I think the solution is a bit different from the design. I think the margin-top from the attribution class is pushing the card up which cause distortion from the design. But the rest seems good.
1 - @KseniiaMasnaSubmitted 3 months ago@dave-tegPosted 3 months ago
The solution was pretty close to the design. I like that you used semantic elements on the HTML structure. The code is readable and structured. Overall good job!
0
