Skip to content
OverviewSolutions
14
Comments
20
Vinicius Henrique
@viniciusshenri96

All comments

  • Vinicius Henrique•590
    @viniciusshenri96Posted almost 2 years ago

    Hello how are you? Congratulations on finishing the challenge, it looks like you were unable to center the element when hovering over it, I managed to solve it like this:

    the parent element .nft-image-container you put position: relative, and set the value of top to 0 in the element .nft-image-container .icon-view.

    .nft-image-container {
  cursor: pointer;
  position: relative; // setting the parent element with position: relative
}

.nft-image-container .icon-view {
  margin-top: 20px;
  border-radius: 1em;
  max-width: 260px;
  max-height: 420px;
  top: 0; // before with a value of 15%
}

    Remembering that you had already defined the .icon-view element as position: absolute, in this part of your code:

    .icon-view {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 7rem;
  opacity: 0;
  background-color: hsla(178, 100%, 50%, 0.49);
  transition: opacity 0.4s ease-in-out;
}

    I advise you to come back later on that same code to refactor it, after you have learned more and practiced a lot doing other projects. I'll be waiting to see your next challenge.

    Marked as helpful
    2
  • Vinicius Henrique•590
    @viniciusshenri96Posted almost 2 years ago

    Olá Andressa, Parabéns por finalizar o projeto 😄 algumas dicas para você:

    HTML:

    Quando for ícones apenas decorativos pode deixar o alt vazio, e coloca aria-hidden="true", Isso pode melhorar a experiência dos usuários de tecnologia assistiva ao ocultar: conteúdo puramente decorativo, como ícones ou imagens, é bom para acessibilidade: Leia mais aqui

    <button class="right-button">
    <img src="./images/icon-cart.svg" alt="" aria-hidden="true">
    Add to Cart
</button>

    E quando for definir um valor no alt como nesta imagem você pode ser mais especifica em relação a imagem, por exemplo: "Imagem com um frasco de perfume e algumas folhas" Texto alt bem escrito e descritivo melhora a experiência do usuário.

    <div class="left">
      <img class="left-img" src="./images/image-product-desktop.jpg" alt="Imagem com um frasco de perfume e algumas folhas">
</div>

    CSS:

    Não precisa definir o <p> como inline, você ja tinha definido o elemento pai que é o .price como display: flex e ele ja deixa o elemento inline, deixando um elemento do lado do outro, sempre tente deixar seu CSS limpo eliminando códigos desnecessários, com o tempo você vai aprendendo a refatorar.

    .prices {
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}


    // aqui você pode apagar
.prices p {
    display: inline;
}

    Continue praticando!!

    Marked as helpful
    1
  • Oluwasina Omotosho•350
    @shinaeliSubmitted almost 2 years ago

    The divider svg element extends over the width of its parent container when media query is applied. So, I hid the svg element and its parent container called ".divider".

    Advice Generator App

    1
    Vinicius Henrique•590
    @viniciusshenri96Posted almost 2 years ago

    Your project turned out great, delete all console.log() from then(), so your code will be cleaner, good job with the error message!

    buttonEl.addEventListener('click', function() {
    fetch('https://api.adviceslip.com/advice')
.then(response => response.json())
.then(data => {
    const {id, advice} = data.slip;
    headerEl.textContent = `Advice #${id}`;
    quoteEl.textContent = `"${advice}"`;
})
.catch(error => {
    console.log(error);
    quoteEl.textContent = "Sorry. Couldn't get an advice at the moment."
});
});

    when you learn async/await, redo this challenge, and you'll see how much easier it gets.

    0
  • Vinicius Henrique•590
    @viniciusshenri96Posted over 2 years ago

    Congratulations on the Cameron project 🚀, your responsive was very well done, In your @media queries don't use px, use rem or em units, it is more consistent across browsers, but prefer to use the em unit.

    @media screen and (min-width:48em){}
@media screen and (min-width:64em){}
...

    Keep up your great work 🎉.

    Marked as helpful
    1
  • Vinicius Henrique•590
    @viniciusshenri96Posted over 2 years ago

    @tathykanashiro Olá, parabéns por concluir o desafio, tenho algumas dicas pra você, que podem te ajudar:

    HTML:

    • Use tags mais semânticas para marcar seu conteúdo como <main><header><nav><section><article><footer> leia mais sobre cada um aqui neste site MDN e coloque seu conteúdo principal do HTML dentro da tag <main>, isso evita problemas de ACCESSIBILITY ISSUES aqui no frontend Mentor.
    <main>
    <section class="container">
        <div class="card">
            <img class="cube__image" src="./images/image-equilibrium.jpg" alt="Cube image">
            <div class="text">
              <h1>Equilibrium #3429</h1>

              <p>Our Equilibrium collection promotes balance and calm.</p>
            
              <ul class="span">
                  <li class="eth"><img src="./images/icon-ethereum.svg" alt="">0.041 ETH</li>
                  <li class="days"><img src="./images/icon-clock.svg" alt="">3 days left</li>
              </ul>
              <hr>
              <div class="avatar">
                  <img src="./images/image-avatar.png" alt="Avatar">
                  <p>Creation of <span>Jules Wyvern</span></p>
              </div>
            </div>
        </div>
    </section >
</main>

  <footer class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener">Frontend Mentor</a>. 
        Coded by <a href="#">Tathiany Kanashiro</a>.
  </footer>
    • Jamais deixe a tag <img> sem o atributo alt, mesmo que o valor dele seja vazio alt="".
      <ul class="span">
        <li class="eth"><img src="./images/icon-ethereum.svg" alt="">0.041 ETH</li>
        <li class="days"><img src="./images/icon-clock.svg" alt="">3 days left</li>
   </ul>
    • No footer tem um link com o atributo target="_blank", quando você cria um link para uma página externa, você pode ter problemas de desempenho e segurança, então adicionar o atributo rel="noopener" evita esse problema. leia esse artigo se você tiver mais interesse: Artigo
      <footer class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener">Frontend Mentor</a>. 
        Coded by <a href="#">Tathiany Kanashiro</a>.
  </footer>

    CSS:

    • Tem essas duas formas que eu sei, que talvez te ajude no efeito :hover:

    1º Forma: Com uma div vazia no HTML e usando grid-area

      HTML:
  <div class="cube__image-view">
        <img class="cube__image" src="./images/image-equilibrium.jpg" alt="Cube image">
        <div class="hover"></div> // Criei uma div vazia no HTML
   </div>

   CSS:
.cube__image-view {
  display: grid;
  border-radius: 10px;
  overflow: hidden;
}

.cube__image,
.hover {
  grid-area: 1 / -1;  // elementos na mesma linha, mesma coluna.
}

.hover {
  background: url(../images/icon-view.svg) no-repeat center center, rgba(0, 255, 247, 0.5); // utilizei **center center** para centralizar o ícone
  opacity: 0; // para deixar o elemento transparente na tela
  cursor: pointer;
  z-index: 2;
}

.hover:hover {
  opacity: 1; // mostrando o elemento na tela
}

    2° Forma: Com pseudo-element e sem uma div vazia no HTML.

    .cube__image-view {
  position: relative;
}

.cube__image-view:hover::after {
  content: "";
  display: block;
  width: 290px;
  height: 290px;
  background: url(../images/icon-view.svg) no-repeat center center,
    rgba(0, 255, 247, 0.5);
  position: absolute;
  top: 0;
  cursor: pointer;
  border-radius: 10px;
}

    Testei as duas formas no seu projeto e deu certo.

    Espero ter ajudado, continue praticando e evoluindo 🚀.

    Marked as helpful
    0
  • Vinicius Henrique•590
    @viniciusshenri96Posted over 2 years ago

    @MarcoFranca Eaí Marco, blz? Parabéns, por finalizar o desafio, este projeto foi um grande desafio pra mim e me deu algumas dores de cabeça no responsivo haha, tava lendo aqui seu código, e vou te dar algumas dicas que podem te ajudar a melhorar:

    • No seus @media queries não usar px, utilize unidades rem ou em, mas aconselho o em, ele é mais consistente entre os browsers.
    • Tente usar mais rem ao invés de px principalmente em tamanhos de fontes, é melhor para a acessibilidade.
    • Eu usaria o <a> , quando o botão é um link para um conteúdo da página ou conteúdo externo, <button> é melhor usar quando queremos enviar algumas informações para o servidor, exemplo algum formulário.
    • Use uma classe chamada container, para definir a largura máxima da página e centralizar, por exemplo max-width: 1190px, observa seu footer, ele parece ser maior na página, a largura tá maior do que a <section class="galery">, você definindo um container, garante que o seu layout vai ficar alinhado corretamente na página, você pode olhar minha solução e observar, exemplo:
    .container {
  max-width: 1110px; // define a largura máxima da página
  padding: 0 40px; // não deixa os elementos encostar na borda da página quando diminui a tela, aconselho você a testar comentando essa linha no código e diminuído a tela.
  margin: 0 auto; // centralizar todo o conteúdo
}

    Bom trabalho, continua praticando, não para não!

    Marked as helpful
    1
  • Vinicius Henrique•590
    @viniciusshenri96Posted over 2 years ago

    @JimaLoko Olá, parabéns por concluir o desafio, utiliza tags mais semânticas para marcar seu conteúdo no HTML como <main> <header> <nav> <section> <article> <aside> <footer>, você pode ler aqui o significado de cada uma delas: Semântica, exemplo no seu código:

    <main id="container">
    <section class="card">
      <div class="order-sumary">
        <img class="hero" src="assets/images/illustration-hero.svg" alt="">
        <h1>Order Summary</h1>
        <p>You can now listen to millions of songs, audiobooks, and podcasts on any 
          device anywhere you like!</p>
      </div>
      <div class="plan-container">
        <img src="assets/images/icon-music.svg" alt="">
        <div class="plan">
          <h2>Annual Plan</h2>
          <p>$59.99/year</p>
        </div>
        <a href="#">change</a>
      </div>
      <div class="btns">
        <a class="proceed-btn" href="">Proceed to Payment</a> <br>
        <a class="cancel-btn" href="">Cancel Order</a>
      </div>
    </section>
</main>
<footer class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
  Coded by <a href="#">Jimaloko</a>.
</footer>

    colocando seu conteúdo principal dentro do <main> vai evitar também problemas de ACCESSIBILITY ISSUES aqui no frontend Mentor.

    eu não usaria <h2> para marcar o Annual Plan, você pode usar uma tag mais genérica, tipo <p>, ou <span>. pq não tem uma descrição embaixo, ou seja um texto em relação ao titulo, e não é uma nova sessão.

      <div class="plan-container">
            <img src="assets/images/icon-music.svg" alt="">
            <div class="plan">
                <p>Annual Plan</p>
                <p>$59.99/year</p>
            </div>
            <a href="#">change</a>
    </div>

    Não usa id para selecionar seus elementos, tente sempre utilizar classe, pode dar problemas de especificidade no seu CSS e também evita problemas futuros.

    você pode ler mais sobre aqui: Especificidade

    Bom trabalho, continue praticando!

    Marked as helpful
    1
  • Vinicius Henrique•590
    @viniciusshenri96Posted over 2 years ago

    @MarcoFranca Parabéns por concluir o desafio, uma dica que posso te dar é sobre acessibilidade, quando você criou uma <div> vazia para a imagem:

    <div class="firstContainer--img"> </div>

    os leitores de tela não vão ver a imagem como um conteúdo no HTML, pq é uma div vazia, você pode resolver isso usando os atributos role(vai dizer que o elemento atua como uma imagem) e o aria-label(funciona como o alt), exemplo:

     <div 
  class="firstContainer--img" 
  role="img" 
  aria-label="Imagem com uma mulher segurando e assoprando uma caneca e algumas 
  informações como total de horas do curso sendo 1451 e o total de membros que é 29k"></div>

    O atributo role é um atributo criado para dar mais semântica aos elementos de documentos baseados em marcação, como o HTML, além de oferecer mais acessibilidade.

    Ótimo trabalho! 👍

    Marked as helpful
    0
  • Vinicius Henrique•590
    @viniciusshenri96Posted over 2 years ago

    @CaioHenrique04 Parabéns por concluir seu primeiro desafio, uma dica pra você é sempre colocar o seu conteúdo principal do HTML dentro da tag <main> para não dar problemas de ACCESSIBILITY ISSUES aqui no frontend Mentor.

    <main>
  <section>
    <div class="card">
      <img class="image-perfume" src="images/image-product-desktop.jpg" alt="Perfume">
      <div class="right">
        <p class="perfume">PERFUME</p>
        <h1>Gabrielle Essence Eau De Parfum</h1>
        <p class="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator
          for the House of
          CHANEL.</p>
        <div class="prices">
          <h2>$149.99</h2>
          <small><s>$169.99</s></small>
        </div>
        <div class="button">
          <img src="/images/icon-cart.svg" alt="Carrinho de Compras">
          <p>Add to Cart</p>
        </div>
      </div>
    </div>
  </section>
</main>

    e para preços você pode usar uma tag mais genérica como o <p>, usar <h2> não vai fazer muito sentido, já que é para títulos com algo relacionado, como uma descrição. exemplo:

    <h1>Elementos de cabeçalho</h1>
<h2>Sumário</h2>
<p>Algum texto aqui...</p>

<h2>Exemplos</h2>
<h3>Exemplo 1</h3>
<p>Algum texto aqui...</p>

<h3>Exemplo 2</h3>
<p>Algum texto aqui...</p>

<h2>Veja também</h2>
<p>Algum texto aqui...</p>
    0
  • Vinicius Henrique•590
    @viniciusshenri96Posted over 2 years ago

    Olá, Parabéns por finalizar o desafio, no seu index.html usa a tag semântica <main> para marcar todo o seu conteúdo principal, não usa o <section>, exemplo:

     <header>
      ....
 </header>

<main>
  <article>
       ....
  </article>

  <section>
       ....
  </section>
</main>

<footer></footer>

    vai deixar seu site mais organizado e semântico, também evita problemas de ACCESSIBILITY ISSUES aqui no frontend Mentor.

    e no seu responsivo vc pode usar mais @media aonde seu site começar a quebrar(usa o inspecionar elemento, para você ir testando, clica no ícone de um tablet, do lado de Elements), e vai estilizando dentro desses @media, para deixar o seu projeto adaptável para todos os tipos de telas. eu não finalizei esse projeto, mas vc pode ver meu código:

    Github

    Marked as helpful
    0
  • Nathalia Santos•30
    @naathcsSubmitted almost 3 years ago

    I would like some feedback regarding the approach on how to solve the challenge. It is my first time solving a challenge and I am a beginner at HTML/CSS.

    I used what I knew along with some new elements (new for me). Any feedback is welcome.

    I appreciate very much your time :)

    QR Code Component Hub

    1
    Vinicius Henrique•590
    @viniciusshenri96Posted almost 3 years ago

    @naathcs Olá, ótimo trabalho no seu primeiro desafio 👏 utilize mais tags semânticas, pra não dá problema de accessibility issues aqui no frontend mentor, principalmente o <main>

    <main>
 <div class="qr-code-box">
    <img src="images/image-qr-code.png" alt="qr-code-png" class="qr-code-img" />
    <h2 class="qr-h2">Improve your front-end skills by building projects</h2>
    <p class="qr-p">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
</main>
    Marked as helpful
    0
  • Vinicius Henrique•590
    @viniciusshenri96Posted almost 3 years ago

    @lpdm1 Olá, parabéns por finalizar o desafio, não sei se você está iniciando, mas evite pular níveis de título: sempre comece de <h1>, seguido de <h2> e assim por diante. Por exemplo você começou com <h3>Improve your front-end skills by building projects</h3> poderia ter usado h1. Leia esse artigo, pra você saber mais.

    Espero ter ajudado :)

    Marked as helpful
    1