Skip to content
OverviewSolutions
2
Comments
2
P
merwhite11
@merwhite11

All comments

  • Anthony Chaiditya•70
    @AnthonyChaidityaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I think I am most proud of the speed with which I was able to do this - however, I would have liked to make the code responsive, and I feel like I am still not optimizing the way I structure my html and css, so if I were to go back, I would actually approach the challenge more slowly to optimize for cleaner code.

    What challenges did you encounter, and how did you overcome them?

    I had issues with selecting and sizing - and I feel like it has to do with how I am structuring my html and connecting it with my css. There were times where I would want to adjust the styling of the avatar and name but when I would add styling, the size of the picture would change and I am not sure why. In addition, the pictures are not loading on the live site.

    What specific areas of your project would you like help with?

    I would like help with understanding the best way to structure HTML in the project, and the approach to styling with css.

    Blog preview card

    3
    merwhite11•20
    @merwhite11Posted 6 months ago

    Nice work Anthony !

    Images I think the reason the images aren't loading has do with a pathway error. Try it with a period before the pathway to the file: ./assets/images/illustration-article.svg

    Selecting HTML els for CSS styling What could help out here is using more class names so you can create more specific elements and apply custom stylings: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class

    Sizing You can use flex box on the entire body to center the card on the page. That way you can avoid hard-coding in the margin-left.

    You can create containers around elements with a fixed height, then you can let the nested element scale within those dimensions.

    I've recently been working with BEM to help make css more readable: https://getbem.com/

    Next step would be to try SCSS so you can nest stylings, also helps with readability: https://sass-lang.com/

    Have fun with the next challenge 😊

    0
  • aryakrishnaksh2021•50
    @aryakrishnaksh2021Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am able to design a responsive component. Since i used to design web pages using CSS libraries, I forgot most of the CSS properties but i could recall it.

    Next time i wish to use CSS without any other resources

    What challenges did you encounter, and how did you overcome them?

    i didn't faced any challenges.

    What specific areas of your project would you like help with?
    • Responsive design

    QR code component challenge

    2
    merwhite11•20
    @merwhite11Posted 6 months ago

    Great work @aryakrishnaksh2021 !

    I'm impressed you were able to get the font sizes and line breaks to match the model!

    One thing I would recommend is using flex on the card itself (you wouldn't need the row div in this case). That way you won't have to hard code in the widths of the card. The width will be determined by the fixed width of the qr-code image + margins + padding. It will fill the entire screen for small screens.

    Another tool I'm learning and trying to work with now is BEM and nesting with scss to make styling more readable. Maybe something to try for the next project ! -- https://getbem.com/introduction/ https://medium.com/swlh/sass-bem-nesting-variables-970403f42dd6

    0