any and all feedback is welcome and appreciated. Thank you!
I am most proud of the positioning and the JavaScript elements that were implemented.
What challenges did you encounter, and how did you overcome them?positiong of the Image and the button position for the desktop view.
What specific areas of your project would you like help with?image Positioning withing the container
Really nice job completing the design. The layout is responsive and the 'share' button functionality is working properly.
Suggestions for future projects:
Really nice job with this challenge! Looks like you matching the design specs quite closely. A couple minor things I noticed, but some of these are more personal opinions/suggestions...
1.) Create custom variables not just for the color but typography too. For example, the <h1> element: --heading-line-height: 110%; --h1-font-size: 2.5rem; /40px/ --h1-font-weight: 900;
2.) Be intentful with how you name your element classes. I highly encourage you to dig into the BEM principle. It's a very common naming convention developers use for classes. For example, instead of naming your first image as '.main_img1' I did 'class="hero__img hero__img--mobile"'.
Hope this helps! And again, great job!
me encanto poder ocupar CSS grid, podriá cambiar la forma en que lo hago y encontrar mejores practicas.
What challenges did you encounter, and how did you overcome them?el desafio mas grande fue el acomodo de las tarjetas ya que no conozco casi CSS Grid, pero gracias a sus links de la pagina pude entenderlo mucho mejor.
What specific areas of your project would you like help with?Me encantría recibir feedback en como puedo mejor el acomodo de mis tarjetas con CSS Grid.
Overall your solution looks good and lines up well with the Design. A couple, minor suggestions:
Use Semantic HTML as much as possible. Instead of wrapping the header and description in a <div> element consider using the <header> element. I would also wrap the entire title in an <h1> and use the <span> for the bolded 'powered by technology' line.
Overall responsiveness is good! I noticed there was some misalignment in the heading when on a mobile breakpoint. Also, the final, desktop breakpoint doesn't occur until the full desktop breakpoint, which leads to a bit of an awkward layout between 400px and 1400px.
getting the right size
What challenges did you encounter, and how did you overcome them?getting the right size for the card
What specific areas of your project would you like help with?Any advice would do
Overall, really nice work. I like your use of media queries to incorporate responsiveness in your design. The use of CSS variables is a nice practice too.
Some minor suggestions to consider:
Hope these help! Again, nice job!
many. Especially the tables section. I even left this project unfinished because I couldn't match the boards to the original design. I did my best although I am not satisfied with the final result.
What specific areas of your project would you like help with?table section
Overall, you did an amazing job matching your final solution to the design specs. Could (minor) things I noticed:
For the <ul> element, you can adjust the size of the bullet point with the ::marker pseudo-class and 'font-size' property. So you can do something like li::marker { font-size: 12px; }
It doesn't appear your project is mobile responsive. You can read more into Media Queries or leverage a CSS Library (i.e., Bootstrap) to add this.
Nice job and good luck with your continued coding journey!
