Vinicius Henrique

@viniciusshenri96

All comments

Sumaj Coronel• 90
@sumajestad44
Submitted over 1 year ago
nft de willyrex
nft-preview-card-component
2
Vinicius Henrique• 590
@viniciusshenri96
Posted over 1 year 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
Andressa Viana• 80
@andressavianab
Submitted over 1 year ago
Responsive product-preview-card
1
Vinicius Henrique• 590
@viniciusshenri96
Posted over 1 year 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
@shinaeli
Submitted over 1 year 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
@viniciusshenri96
Posted over 1 year 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
Cameron Chandler• 850
@webstormcam
Submitted over 1 year ago
Modern_Art_Gallery
1
Vinicius Henrique• 590
@viniciusshenri96
Posted over 1 year 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

TATHIANY CRISTINA KANASHIRO MARQUESANI• 50

@tathykanashiro

Submitted almost 2 years ago

A little difficulty centering the avatar and the author's name. I don't know how to make ' :hover ' the image correctly.

Corrections are always welcome!

Thanks!

HTML and Css only

#accessibility

Vinicius Henrique• 590

@viniciusshenri96

Posted almost 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

P
Marco Tullio• 90
@MarcoFranca
Submitted almost 2 years ago
responsive two-page website designed to reinforce my knowledge of HTML CSS and practice building a location map in JavaScript using leaflet
Responsive landing page using css flex grid
1
Vinicius Henrique• 590
@viniciusshenri96
Posted almost 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

João Marcos Teixeira Ribeiro• 230

@JimaLoko

Submitted almost 2 years ago

Do you think the structure and design are good? What would you improve about my code?

All feedbacks and suggestions are welcome !!

Order summary component

Vinicius Henrique• 590

@viniciusshenri96

Posted almost 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

P
Marco Tullio• 90
@MarcoFranca
Submitted almost 2 years ago
I found it very challenging and learned a lot about flexbox and positions I will be happy to receive feedback
Responsive landing page using flex-box
1
Vinicius Henrique• 590
@viniciusshenri96
Posted almost 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

Caio Henrique Barbosa Garcia• 10

@CaioHenrique04

Submitted almost 2 years ago

Desenvolvi esse primeiro desafio para entender como funciona a plataforma Front End Mentor.

HTML, CSS, Flexbox, Semantic HTML

Vinicius Henrique• 590

@viniciusshenri96

Posted almost 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>

Celina• 20
@Celinaaaaaa
Submitted almost 2 years ago
A better way to change the Mobile sizes to Desktop sizes?
Social proof section in Html & CSS
#bem
1
Vinicius Henrique• 590
@viniciusshenri96
Posted almost 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
@naathcs
Submitted about 2 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
@viniciusshenri96
Posted about 2 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
Leonam Monteiro• 10
@lpdm1
Submitted over 2 years ago
First ever challenge. I'm studying Front-End for about 3 weeks now. Any suggestions?
qr-code-component
4
Vinicius Henrique• 590
@viniciusshenri96
Posted over 2 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
Thiago Jyum• 50
@ThiagoJyum5
Submitted over 2 years ago
Css; flex-box
1
Vinicius Henrique• 590
@viniciusshenri96
Posted over 2 years ago
@ThiagoJyum5 Parabens por terminar o desafio, só algumas dicas, sempre use o atributo alt=" " dentro da tag <img> ---> <img class="imagem" src="https://user-images.githubusercontent.com/84734202/152064435-25ef0d7d-70af-4883-8901-f82e5aec1a4c.png alt=" " para textos alternativos, nem sempre precisa ter um valor, mas o atributo dentro da tag é obrigatório, por questões de acessibilidade.

O atributo lang ajuda a definir o idioma padrão do texto da página, então utilize o atributo lang com o valor en, ao invés de pt-br, já que o conteúdo do HTML no frontend mentor é em inglês. <html lang="en">
Marked as helpful
0
Anosha Ahmed• 9,340
@anoshaahmed
Submitted over 2 years ago
Would appreciate any advice on where and how to get better. Thank you x
Rotating QR Card Component
#accessibility#bem
21
Vinicius Henrique• 590
@viniciusshenri96
Posted over 2 years ago
great job, the rotation was very good.👏
1
Joao Antonio Mendonca• 70
@mendoncajoao
Submitted over 2 years ago
Any feedback on the code will be welcomed!
Profile card component
1
Vinicius Henrique• 590
@viniciusshenri96
Posted over 2 years ago
@mendoncajoao ficou muito bom seu projeto, só algumas dicas se vc me permite, não sei se foi escolha sua usar css interno, mas isso deixa o documento HTML maior e pode deixar o carregamento da página mais lento, além de ser uma má prática, aconselho usar css externo, utilizando <link rel="stylesheet" href="nomedoarquivo.css">> para vincular a folha de estilo. E busque deixar seus projetos responsivo usando media queries, você pode ver minha solução neste link Profile card component

Espero ter ajudado :)
Marked as helpful
1
Matheus Araujo• 30
@omatheusoliveira
Submitted over 2 years ago
Hi everyone, I accept tips on how to improve my code 😎😎🤞
3 columns card preview
1
Vinicius Henrique• 590
@viniciusshenri96
Posted over 2 years ago
@omatheusoliveira parabéns por concluir o desafio, só algumas dicas para não dá problema de acessibilidade, o atributo lang ajuda a definir o idioma padrão do texto da página leia esse artigo, então utilize o atributo lang com o valor en, ao invés de pt-br, já que o conteúdo do HTML no frontend mentor é em inglês. E use mais tags semânticas no seus projetos: <header> <nav> <main> <footer> isso cria pontos de referencia na página, dando mais acessibilidade leia esse artigo e utilize Media queries para deixá-lo responsivo.

espero ter ajudado :)
Marked as helpful
0
João Victor• 60
@joaovictorperes
Submitted over 2 years ago
Hello everyone! This is my second project on Frontend Mentor. I made this site with semantic tags and accessible mobile menu. I am not sure if it's completely accessible and if there is something that could be improved, so if you notice, please tell me! In the last project I got some great feeedback of the community, it was very helpful to search and learn new things. Another thing that I would like to know is the "mobile-first" developing process. I had some problems to develop the mobile layout because of the images and the menu with media queries, do you have some tips for that? Thanks a lot!!
Responsive landing page with accessible mobile menu
#accessibility#lighthouse
1
Vinicius Henrique• 590
@viniciusshenri96
Posted over 2 years ago
@joaovictorperes parabéns por terminar o desafio, ficou ótimo, fui aconselhado aqui na comunidade de usar mais a unidade rem no lugar de px, pra melhorar a acessibilidade, não só no font-size.
1
steezyza• 90
@steezyza
Submitted over 2 years ago
No questions. I just realised I need some practice with Flexbox and Grid.
Order Summer Component - HTML & CSS
3
Vinicius Henrique• 590
@viniciusshenri96
Posted over 2 years ago
Hello @steezyza 👋, always try to put some value in the alt attribute inside the <img> tag for accessibility reasons.

Example:

<div class="top-wrapper"> <img src="/images/illustration-hero.svg" alt="icon illustration hero"> </div>

and always try to make your HTML code as semantic as possible, independent of the project. great job, keep practising.
Marked as helpful
0
P
Remus D. Buhaianu• 3,145
@Miculino
Submitted over 2 years ago
Hey guys!

This is one of the craziest projects I've worked on! :) Nothing prepared me for what was about to unfold with this seemingly simple project :D

Initially, this was supposed to be a straightforward Newbie-level challenge from Frontend Mentor. As far as I can tell, this must've been the simplest and easiest design for a Frontend Mentor challenge. Including the project setup (files, folders, etc), finishing this project required less than 30 minutes.

From what started off as ~25 minutes project, it ended up into a min full-stack project that spanned across hours and used multiple technologies (some of which I was either completely unfamiliar with or was still learning)

There's still some tweaking I'd like to make to it, but for the time being, I think the project is good enough to be reviewed by you guys!

Here are the technologies / tools I've used for it:

Svelte

Typescript

SCSS

QR API

GSAP

VanillaTilt

Express

MongoDB

Mongoose

Puppeteer

Heroku

Vite

Special thanks to @ApplePieGiraffe, @darryncodes, and @skyv26 whose works have really inspired me to keep growing as a developer!

Thanks a lot for checking out my project and see you in the next challenge!
Fullstack QR Code Generator - Svelte-TS | Express | MongoDB | and more
#accessibility#express#svelte#typescript#mongodb
10
Vinicius Henrique• 590
@viniciusshenri96
Posted over 2 years ago
I'm a beginner and I found your customization fantastic, you gave me motivation to study even more, I hope to one day reach your level. Good work.
Marked as helpful
1
Jêfferson Maxwell Ataide de Almeida• 180
@MaxwellAt
Submitted over 2 years ago
##Portuguese Gostaria da opinião de todos. Seria muito bom contar com a crítica construtiva de todos que puderem me ajudar. Acredito que ainda há muito o que se melhorar no código e conto com a ajuda da comunidade! ##English I would like everyone's opinion. It would be great to have constructive criticism from everyone who can help me. I believe there is still a lot to improve in the code and I count on the help of the community!
Responsive Lading Page with css grid
#sass/scss
2
Vinicius Henrique• 590
@viniciusshenri96
Posted over 2 years ago
Muito bom mano, continue praticando!
Marked as helpful
0

Vinicius Henrique

All comments

nft-preview-card-component

Responsive product-preview-card

Advice Generator App

Modern_Art_Gallery

HTML and Css only

Responsive landing page using css flex grid

Order summary component

Responsive landing page using flex-box

HTML, CSS, Flexbox, Semantic HTML

Social proof section in Html & CSS

QR Code Component Hub

qr-code-component

Css; flex-box

Rotating QR Card Component

Profile card component

3 columns card preview

Responsive landing page with accessible mobile menu

Order Summer Component - HTML & CSS

Fullstack QR Code Generator - Svelte-TS | Express | MongoDB | and more

Responsive Lading Page with css grid