@HagarRagab
@nvalline
Submitted
What are you most proud of, and what would you do differently next time?
This challenge was a good and simple project to build and reinforce my knowledge of CSS Grid.
What challenges did you encounter, and how did you overcome them?
This project didn't pose many challenges other than coming up with class names.
What specific areas of your project would you like help with?
I would appreciate any tips/suggestions to improving the quality of my code.
@HagarRagab
Posted
Great job, I checked your code and I do not have any comment. The final page looks exactly same as the original one. I like how you applied grid template areas. Your code is very clean and readable. I highly recommend you to check 7-1 architecture pattern for SASS projects it is for structuring your SASS code. Good luck :)
Marked as helpful
@mikewil245
Submitted
What challenges did you encounter, and how did you overcome them?
I encountered a few challenges while working with CSS Grid, especially when it came to the desktop view layout. At first, I struggled to understand how to achieve the desired layout, but learning about grid-template-areas helped me precisely place grid items where I wanted them. Initially, I thought I needed to apply max-width to the grid items for proper sizing. However, I realized that using grid-template-columns effectively handles the resizing of elements across different screen sizes without the need for max-width.
What specific areas of your project would you like help with?
Seems like compared to the design in desktop view the width of my elements seem shorter , can't seem to understand how that happened
@HagarRagab
Posted
Good job, I like how you arrange the sass code it's clean and easy to read for bigger projects you can follow the 7-1 architecture pattern in which you can arrange SASS code into 7 folders and one file. This link for a small project used this pattern https://github.com/KittyGiraudel/sass-boilerplate. Stay save and never give up :)
Marked as helpful
@dnomjr
Submitted
@HagarRagab
Posted
Great job, your code is clean and readable. The only comment I have is you used the same image in both desktop and mobile and you cropped the image on the mobile there is a solution for this you can use CSS rule > background-image: url() so you will be able to change the URL in the mobile by using media query. Stay save and never give up :)
Marked as helpful
@Moises2710
Submitted
What are you most proud of, and what would you do differently next time?
I proud of my improve about web design skills.
What challenges did you encounter, and how did you overcome them?
I didn't encounter this challenge.
What specific areas of your project would you like help with?
I would like to receive help in topics like responsive design.
@HagarRagab
Posted
Great job, your code is readable and clean. You can try to use @import in the CSS file to add google fonts links instead of using multiple link attributes in the HTML file. For example: @import url(....); And instead of using <div class="section">..</div> you can exploit semantic HTML elements and use <section></section> element.
@magedashraf73
Submitted
@HagarRagab
Posted
Does the solution include semantic HTML?
Marked as helpful
@AL-Shimaa-Jamal
Submitted
What are you most proud of, and what would you do differently next time?
It was a simple design
What challenges did you encounter, and how did you overcome them?
it was a simple project
What specific areas of your project would you like help with?
w3school , chatgpt , workflow
@HagarRagab
Posted
Does the solution include semantic HTML?
Marked as helpful
@TofeDev
Submitted
What are you most proud of, and what would you do differently next time?
I would change the order of what I do first in the css
What challenges did you encounter, and how did you overcome them?
How to center the div. Just has to watch a youtube tutorial from this year.
@HagarRagab
Posted
The design fairly looks exactly the same as the original design. One improvement could be made here it is recommended to make a separated CSS file instead of using style tag inside the HTML file.
