Skip to content
OverviewSolutions
8
Comments
8
P
Carlos Samuel
@Crtykwod

All comments

  • Carlos Samuel•100
    @CrtykwodPosted 2 months ago

    Opa meu mano Paulo, já se passaram 17 dias, mas nunca é tarde, né?

    Primeiro ponto, as cores não coincidem. As cores do "Purple 500" e o "Purple 100" do style-guide.md não são as mesmas do .purple-500 ou .purple-100 do tailwind, crie classes personalizadas para essas cores, para se manter fidedigno ao design original.

    NÃO use height: 100vh; (h-screen) para o body em hipótese alguma!!! Isso vai impedir o seu site de ter scroll já que a altura dele sempre será do tamanho da viewport, então em telas com zoom ou tamanhos de fonte maiores, o conteúdo simplesmente será perdido. Ao invés disso, use min-height: 100vh (min-h-screen), o que significa algo como: "use pelo menos a tela toda, mas se precisar, pode ter mais."

    Não use medidas fixas como no main: w-[1000px] -- Aliás, acabei de ver, aquilo não é uma <section>, é o seu <main>, o seu conteúdo principal, apenas as divs dentro dele que são <section>s -- Voltando, você pode checar depois no seu output.css, as classes pré-feitas usam rem como medida ao invés de px, isso porque px é um medida imutável, enquanto rem varia de acordo com o tamanho da fonte, é uma questão de acessibilidade, você pode ver nesse vídeo aqui: https://www.youtube.com/watch?v=UXu450EK4_w,

    se preferir em inglês: https://www.youtube.com/watch?v=okw-whFWGEo

    De mais grave é isso, ainda tem muita coisa para falar, mas é muito complicado analisar um código com tailwind, então se você quiser, eu posso dar fork no seu repositório e vou fazendo mudanças e fazendo um comentário nelas.

    Espero que isso te ajude de alguma forma e eu te desejo todo o sucesso do mundo nessa jornada pelo frontend, Paulo!

    0
  • Carlos Samuel•100
    @CrtykwodPosted 2 months ago

    Hello, @JuanTwoFour, u made a really nice design, I have just a few little things to say:

    • If you want to use utility classes like .violet for background: var(--violet);, I recommend tailwindcss, it will make you life easier definitely. And if you used it, mark it when uploading the challenge.
    • The quote background image isn't appearing in the first testimonial because you didn't give it a top value.

    I think that's all, your code is really well structured. Well Done! ^-^

    1
  • Carlos Samuel•100
    @CrtykwodPosted 3 months ago

    WOW! Great job!!!! It's really well done!

    I would only give the cards a max-width when they're in mobile view, because it's get to much large on widths above 800px.

    0
  • David França•70
    @david-francaSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Im learn houw to use responsive images.

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

    Make page responsive with two images in one card.

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

    Im fine

    Product Preview Card with responsive image

    1
    Carlos Samuel•100
    @CrtykwodPosted 3 months ago

    Olá, meu mano David, tudo bem? Olha, eu não sou lá aquele desenvolvedores front-end, mas há alguns pontos que pessoas mais experientes já corrigiram em meus códigos e espero que lhe venha a calhar.

    • "Perfume" não é um <h4>, lembre-se sempre de respeitar a hierarquia de título, você não pode inseri-lo sem antes ter um <h3> presente no documento e nem o <h3> antes de ter um <h2>. Existem exceções, mas por via de regra, siga a ordem.
    • Sua media query está com a width muito grande, fazendo o card flex ficar muito grande e pouco prático em telas de tablets, que são menores que 1200px, por exemplo. Prefira usar uma largura mais próxima do tamanho disposto nas instruções do desafio, eu costumo usar 1px a mais que os 375px, dando exatamente 23.5rem, o que torna o design mais responsivo e acessível.
    • O <footer> está sobrepondo seu .card, não use position: absolute;, ao invés disso, prefira algo como:
    body {
 display: grid;
 grid-template-rows: 1fr 2em;
}

    Assim, seu footer terá um espaço de 2em no final da página, não interferindo nos outros elementos.

    No mais, foi isso que percebi, espero te ajudar de alguma forma e pode ter certeza que o código está muito bem estruturado em sua maioria. Parabéns!!

    0
  • Carlos Samuel•100
    @CrtykwodPosted 3 months ago

    Hiii! You made a great job completing this challenge, and I hope you can make useful observations in your project!

    • The aside tag is not correct in this context. It must be used to define content that is indirectly related to the main content. Preparation time is directly related to the recipe.

    • font-size should always be in rem to garant accessibility. People who need to use bigger font-sizes will see no difference in you website because the font size used is fixed to a unique value.

    0
  • Md Mustakin Mahi•10
    @Mahi-54Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?
    1. I have implemented a HTML,CSS project after long time
    2. I have regained some basics of HTML,CSS
    What challenges did you encounter, and how did you overcome them?
    1. I forgot some tags

    Social Profile Links using HTML,CSS

    1
    Carlos Samuel•100
    @CrtykwodPosted 3 months ago

    Hello!! I'm not an expert, but I hope I can help you fix some errors:

    Firstly, the button should only turn green when the mouse hovers over it

    HTML:

    • You need to include an alt="" in the <img>. This is fundamental for accessibility.
    • Instead of using <div>s, you should use semantic tags like <main>, <section>, <header>...

    CSS:

    • Use <link> in <head> instead of @import to get the font, this will give a slight performance boost.
    • Do not use height: 100vh on the body, prefer min-height: 100vh. It will sound like "Use height of at least 100vh", which ensures more compatibility.
    • It seems that you chose to use your own colors and spacing measurements, think that this challenge is a job that you will do for a company. If they provide specific colors and spacing, you should use them.

    That's what I noticed, I hope it helps in some way! <3

    0
  • Carlos Samuel•100
    @CrtykwodPosted 3 months ago

    You should consider putting your <div class="atribution"> as a <footer> instead of <div> to make it more semantic.

    Put the transition in the .title class, not in the .tile:hover pseudoclass. Doing that you also have a smooth transition when the mouse stops hovering the title.

    0
  • Carlos Samuel•100
    @CrtykwodPosted 3 months ago

    You uploaded the wrong solution to this challenge, didn't you?

    0