Skip to content
OverviewSolutions
2
Comments
2

willprince

@willprince40 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Blog card

    willprince•40
    Submitted 7 months ago
    1. Did I import the font correctly in html head?
    2. Did I refer the font correctly inside style.css?
    3. Was I right to use 4 different class name with preset-1 to 4 for each different typography?
    4. Did my typography class use the correct responsive fonction? I used clamp and vw.
    2 comments

  • QrCode Card

    willprince•40
    Submitted 7 months ago

    Sementic and style.css design system best practice. I want to know what is the best pratice.

    2 comments

Latest comments

  • AndersonF•190
    @AndersonF-DevSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Cada vez mais estou aprendendo com estes projetos tenho que melhorar nos nomes das class e reduzir o código do CSS.

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

    Um dos maiores desafios e escrever nomes de class que sejam bons e tentar reduzir. Au máximo a quantidade de código escrito. Continuo tentando melhorar muito neste ponto.

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

    Como escrever nomes de class que fazem sentidos e reduzir Au máximo o código do CSS

    Solução desafio blog preview card com HTML e CSS

    1
    willprince•40
    @willprincePosted 7 months ago

    Great job! You nailed it!

    I see 3 points of improvment.

    1. Fonts were giving available locally so you did not have to import via url. So if google font goes down, your font will still work.
    2. You do not need to set image width for the card image simply make it fit. img{ width: 100%; height: 100%; object-fit: cover; }
    3. Your typography is not responsive, since its the same on desktop and mobile. For font size you can use clamp(min, variableSize, max) to let the size adjust its self to the screen width.

    Good job!

    Marked as helpful
    0
  • willprince•40
    @willprincePosted 7 months ago

    You code looks great but its not pixel perfect. Install figma and use the provided design. The figma file contains the desyn system, so now you can use varialbes inside you style.css. For exemple you border radius is incorect and also your paddings.

    Great work and good luck!

    0