Skip to content
Submitted 18 days ago

First time trying Javascript.. GitHub didn't liked it. (Vercel WIN)

Professora Bianca•140
@ProfessoraBianca
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

It was very hard to deploy this challenge on GitHub Pages...

After getting help from Frontend Mentor users, I managed to make the CSS work, but the Javascript still doesn't..

Anyway, I think it was pretty close this time :)

-UPTADE

Uploaded the files to Vercel and.... IT WORK'S!!!

Community feedback

  • Bernardo Poggioni•6,450
    @R3ygoskiPosted 17 days ago

    Olá novamente Bianca, o projeto ficou muito bom, parabéns, ele está idêntico ao design proposto.

    Tenho algumas sugestões quanto ao HTML do seu projeto, começando pela estrutura, ele possui muitas <div> sendo que algumas não eram necessárias, por exemplo. No seu projeto você tem a div.date, div.title e div.text, e cada uma delas tem um elemento filho. Você poderia pegar esses elementos filhos, e passar tudo para uma <section>, ficando algo assim:

    <section class="section-text">
  <p class="dateText">...</p>
  <h1 class="titleText">...</h1>
  <p class="textT">...</p>
</section>

    Daí no seu CSS bastaria colocar as seguintes propriedades:

    .section-text {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

    Dessa forma o resultado ficará exatamente igual só que com uma estrutura mais enxuta.

    Outa <div> que acaba sendo redundante, seria a do div.learning, você não precisava daquela <div>, tanto que você pode removê-la e passar o <h3> pra fora dela, daí basta adicionar esse css ao h3 que ficará também semelhante:

    h3 {
  /*Restante das Props*/
  width: max-content;
  margin-top: 1.25rem;
}

    Agora sobre a semântica do HTML. A semântica é muito importante, pois ela ajuda a melhorar o SEO da página e também a sua acessibilidade, algumas tags que poderiam ser alteradas para ficarem mais semânticas são:

    • div.card que poderia ser alterada para uma <main> devido a ser o conteúdo principal da sua página, e também geralmente sempre utilizamos uma <main> após a <body>.
    • div.cardInside que poderia ser alterada para uma <figure> devido a imagem dentro dela ser uma imagem autocontida.
    • div.text que poderia ser alterada para uma <section> devido aos elementos serem relacionados entre si.
    • div.user que poderia ser alterada para uma <footer> devido a conter metainformações sobre o card, e também por ser o final do card.

    E sobre a acessibilidade, seu HTML possui alguns pequenos erros quanto a isso, como por exemplo as imagens não possuem um texto alt. Todas imagens devem conter textos alt descritivo, com exceção de ícones e imagens que não tem importância, mas nesse caso passamos o alt dessa forma: alt="".

    Além disso existe uma hierarquia dos Headings, que seriam as tags <h1>, <h2> e por aí vai. Não se deve utilizar a tag <h3> sem antes utilizar a tag <h2> e por sua vez não se deve usar <h2> sem antes utilizar <h1>. Pois isso pode deixar o site "bagunçado" para leitores de tela. E ainda sobre os Headings, todas páginas sempre devem conter um <h1>, não mais e nem menos.

    Agora sobre o CSS, eu notei que na sua @media você colocou vários !important após cada prop, isso devido a estilização não estar funcionando, mas isso estava acontecendo porque você declarou sua @media no topo do CSS, o mais comum é adicionar ela ao final do seu CSS, dessa forma não seria necessário utilizar o !important.

    Ainda sobre responsividade, esse projeto em si não precisava muito de responsividade, tanto que por exemplo, você pode remover sua @media e substituir a width do seu seletor .card por isso: width: clamp(310px, 90%, 384px);. Dessa forma você estará definindo um tamanho mínimo do card para 310px, tamanho base de 90% do tamanho do elemento pai (que seria a tela) e 384px de tamanho máximo.

    E é isso! Novamente parabéns pela conclusão do desafio, ele ficou muito próximo do design proposto, o que significa que você está no caminho certo! Caso tenha qualquer dúvida sobre o que foi dito, comente abaixo que tentarei ajudar da melhor forma possível. E se quiser continuar a conversa, fique à vontade para me chamar no LinkedIn também.

    Marked as helpful
    1
    Professora Bianca•140
    @ProfessoraBiancaPosted 16 days ago

    @R3ygoski Agora fez todo sentido do mundo minha estilização no @media não funcionar! hahahaah

    Muito obrigada pelas dicas, estou agora praticando com um 3º desafio e vou colocar em pratica!

    1
  • Sachira Dilshan•70
    @MLASS-DilshanPosted 18 days ago

    Well done! I would like to know that why did you use javascript for this?

    1
    Professora Bianca•140
    @ProfessoraBiancaPosted 17 days ago

    @MLASS-Dilshan I thought that in this project I would have the opportunity to try my first JavaScript code for the mouse hover event on the title. However, when I launched the site on GitHub Pages, my code wasn’t implemented. To solve this, I added the :hover in CSS, but I was very frustrated that GHPages didn’t accept my code... :(

    0
    Sachira Dilshan•70
    @MLASS-DilshanPosted 17 days ago

    @ProfessoraBianca Maybe you should try it on netlify. if its working on netlify then there is a problem in gh pages.

    Marked as helpful
    1
    Professora Bianca•140
    @ProfessoraBiancaPosted 17 days ago

    @MLASS-Dilshan I just got it working in Vercel!! Now I can see my beautiful (and kinda unnecessary) first Javascript code :D

    1
    Sachira Dilshan•70
    @MLASS-DilshanPosted 17 days ago

    @ProfessoraBianca Glad to hear it!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord