Tive problemas com as imagens da página principal (main). Não consegui deixá-las do jeito que queria. Além disso, na nav, não consegui colocar a borda abaixo do link. Seria necessário fazer isso com ::after? Qualquer feedback é bem-vindo. Ainda preciso fazer alguns ajustes.
Olá Antonio, parabéns pela conclusão de mais um projeto aqui do FEM, ele ficou ótimo.
Sobre suas dúvidas, vou começar pela parte do Link, você pode sim chegar ao resultado utilizando ::after ou ::before, ou até mesmo criando uma <div>. Aqui vou mostrar com o ::after.
.nav-list { height: 100%; /* Fiz isso para que o li ficasse grande e ficasse fácil de posicionar o traço */ display: flex; align-items: center; } .nav-list ul { height: 100%; /* restante das props */ } .nav-list ul li { display: flex; align-items: center; position: relative; } li::after { content: ''; /* Cria o after */ display: block; /* Define como um bloco */ position: absolute; /* Se posiciona relativamente ao li */ background: linear-gradient(45deg, lime, cyan); /*! Essas cores estão erradas */ height: 6px; width: 100%; bottom: 0; /* Joga o traço para a parte debaixo do li */ opacity: 0; /* Invisível */ transition: 0.3s ease-in-out; /*<- Cosmético - Não necessário*/ } li:hover::after { opacity: 1; /* Visível ao passar o mouse na li */ }
Isso já fará com que apareça.
Agora sobre a imagem eu não sei qual problema você teve, foi sobre o tamanho da imagem? Caso tenha sido você pode apenas aumentar o max-width que isso já fará ela ficar igual a do design fornecido.
E é isso! Novamente parabéns, caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.
Olá novamente Rafaela, parabéns pela conclusão de mais um projeto, ele ficou muito bom.
Como o outro comentário mencionou, o botão está descentralizado, isso está ocorrendo em telas abaixo de 768px de largura, para evitar isso você pode considerar adicionar ao seu .sumario um display: flex, ficando assim:
.sumario { display: flex; align-items: center; flex-direction: column; /* Restante das Props */ }
Após isso você pode tirar o margin-left do button e do h3. Só lembre-se de adicionar esse margin-left ao h3 novamente só que em telas acima de 768px.
E notei algumas coisas no seu CSS, como especificidade não necessária como .summary h3 {}, como você tem apenas uma tag <h3> você poderia colocar apenas h3 {} no seu CSS.
Ainda sobre esse trecho que mencionei, há uma redundância, você tem um .summary h3 {} e um h3 {} e ambos afetam o mesmo elemento, isso pode dificultar na manutenibilidade do projeto.
Também tome cuidado com classes que você não utiliza, uma delas é esse .summary, ela seria a classe .sumario.
E uma dica sobre esse trecho:
/* responsive.css */ . result { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; }
Ele não está errado, mas tem uma outra forma que talvez possa ser interessante para você, que é utilizar assim:
border-radius: 0 0 30px 30px; /* Primeiro valor: Topo-Esquerdo */ /* Segundo valor: Topo-Direito */ /* Terceiro valor: Base-Direita */ /* Quarto valor: Base-Esquerda */
O resultado é o mesmo. Isso também pode ser utilizado para margin e padding. Só que nesse caso de margin e padding o primeiro valor é topo, o segundo é direita, o terceiro é base, e o quarto é esquerda.
Sobre o HTML ele está muito bem-feito e semântico, parabéns. Só há um pequeno detalhe, no <button> não existe type="text", o correto seria type="button" ou type="submit".
E é isso! Novamente parabéns pela conclusão do projeto, caso tenha ficado qualquer dúvida por favor comente abaixo que tentarei ajudar da melhor forma possível.
I think what I was most proud of was that I had no issues with responsiveness. Plus, I had used the form components correctly.
What challenges did you encounter, and how did you overcome them?My only challenge was centering the container in the middle of the screen :)
What specific areas of your project would you like help with?Maybe how to center this container in the middle and any other feedback will also be of great help
Olá Evellyn, parabéns pela conclusão de mais um projeto aqui do FEM, ele está bem-feito.
Sobre sua dúvida, tem diversas formas de fazer centralização, a melhor geralmente é utilizando flex ou grid, mostrarei dois exemplos aqui:
A fim de Contexto, esse será o HTML:
<main class="pai"> <section class="filho"></section> </main>
Exemplo com Flexbox:
.pai { display: flex; /* Determina o elemento como Flex */ justify-content: center; /* Centraliza horizontalmente */ align-items: center; /* Centraliza verticalmente */ width: 320px; height: 320px; background-color: #333; } .filho { width: 120px; height: 120px; background-color: #a9a9a9; }
Exemplo com Grid:
.pai { display: grid; /* Determina o elemento como Grid */ place-items: center; /* Posiciona o filho ao centro */ width: 320px; height: 320px; background-color: #333; } .filho { width: 120px; height: 120px; background-color: #a9a9a9; }
Para verificar isso você pode utilizar o site CodePen.
Eu particularmente utilizo o #root como o fundo da página, assim os elementos ficam centralizados no #root. Algo assim:
#root { min-height: 100dvh; width: 100%; display: flex; justify-content: center; align-items: center; }
E uma dica quanto ao seu projeto na parte de JS, ele não está fazendo validação de forma correta, isso está ocorrendo porque você não está utilizando o hook useState para armazenar o valor de texto e fazer a validação. E fica uma diga, você consegue validar todos os campos utilizando RegExp (Expressões Regulares).
E sobre o HTML, ele está com muitas redundâncias e muito pouco semântico, como o React é um CSR (Client Side Render) a parte de SEO acaba sendo afetada, mas manter um HTML semântico ainda sim é importante para manutenibilidade, escalabilidade e acessibilidade do projeto.
E é isso, caso tenha ficado qualquer dúvida por favor comente abaixo que tentarei ajudar da melhor forma possível.
I'm proud of having managed to use some CSS properties well that I didn't know much about before. I think I would change the way I place each component on the screen so that I don't have to work so much with responsiveness.
What challenges did you encounter, and how did you overcome them?My main challenge was to make it responsive for different types of screens (mobile, tablet, desktop). Basically, when I adjusted one element, another one would move out of place and that was really annoying. With patience, I managed to make it as responsive as possible for each screen.
What specific areas of your project would you like help with?I would really like tips on flex-box and how to use each unit (px, rem, %, vh, vw) more correctly, depending on the type of element. I would also like to know how other people organize their HTML base and compare it with mine.
Olá mais uma vez Evellyn, e mais uma vez parabéns pelo projeto.
Sobre suas dúvidas vou começar pelas unidades de medida.
px essa é uma unidade absoluta, ela sempre tem o mesmo valor de sempre, 100px é 100px sempre, independente do navegador e/ou tamanho de fonte escolhido.rem essa é uma unidade relativa, ela tem o valor baseado no tamanho de fonte do seu projeto, vamos supor que no seu html {} você passe um font-size: 24px;, nesse caso 1rem equivale a 24px. Por padrão o 1rem vale 16px ou o tamanho de fonte definido no seu navegador, na parte de configurações. Tanto que na maioria dos caos que for utilizar tamanho de fonte, é recomendado utilizar rem, porque ele se adapta e é responsivo.% essa é uma unidade relativa, ela se baseia no tamanho do elemento pai, ou seja, suponhamos que temos uma <main> com uma <aritcle> dentro, a <main> tem 600px de largura, e <article> tem 50% de largura, ou seja, article tem 300px de largura porque é o 50% do elemento pai, se fosse 20% por exemplo, daí seira 120px.vh e vh ambas são relativas e são baseadas na viewport do seu navegador, o vw é para a largura e o vh é para a altura, o que grosso modo significa a parte onde fica sua página, por exemplo, essa barra de cima que dá pra inserir URL ela não é parte da Viewport, agora onde está aparecendo esse site é.Sobre flex bom, ele é utilizado sempre para fazer alinhamento unidirecional, ou seja, da esquerda pra direita, de cima pra baixo e vice-versa. É bastante utilizado para centralização e alinhamento, mas ele pode acabar deixando o HTML verboso caso você tente utilizá-lo para alinhamento bidirecional. Para alinhamento bidirecional o ideal seria o grid. Bom eu criei esse exemplo aqui no CodePen do qual você pode dar uma olhada nos casos em que cada um cabe melhor: Flex e Grid - Codepen.
Sobre acessibilidade, quando você for criar links utilize sempre a tag <a> (com exceção do NextJS). Na sua ul dentro de cada li poderia ser colocado um a dessa forma:
<li> <a href="#">Nome</a> </li>
E sempre utilize o "#" para que não seja enviado a outro link e mantenha na página atual, e também note que tags <a> sempre devem ter um href.
E sobre semântica, há apenas um trecho que vejo possibilidade de melhoria, que seria:
div.nav-list poderia ser alterada para uma nav e manter essa ul devido a esses links serem para navegação interna da página. Agora para casos de navegações externas utilizamos apenas o ul sem o nav.Sobre estrutura, a div.container que contêm a imagem, ela está sendo redundante, você pode remover ela que não causará nenhum problema no layout.
E agora sobre o CSS, uma dica é de sempre utilizar no seu body a propriedade: min-height: 100vh;, isso garante que o tamanho mínimo da tela sempre será de no mínimo 100% do tamanho da viewport.
E na imagem, remover o width: 1200px fará com que ela não fique cortada.
E é isso! Novamente parabéns pela conclusão do projeto, ele ficou muito bem-feito, caso tenha ficado qualquer dúvida, já sabe, só perguntar abaixo que tentarei ajudar da melhor forma possível.
I am proud to have completed this project. It was my first form with validation and use of aria attributes. Next time, I want to be more organized in the process so as not to waste much time after organizing.
What challenges did you encounter, and how did you overcome them?Since I had never made a complete validation form, I had problems dealing with this function. But I researched a lot and got a satisfactory result. And about accessibility, I had to study a little, and I could apply in various areas of my code that knowledge.
What specific areas of your project would you like help with?I would like the opinion of others about the organization of the code, the methods I used in JS and what could improve.
Olá Beatriz, parabéns pela conclusão do desafio, ele ficou muito próximo do design proposto.
Tenho algumas dicas a dar quanto ao seu projeto. Começando pelo JS, ele está bem-feito, mas há um erro na validação de nomes. Nomes nunca podem ter números, para isso você pode usar um RegExp (como você fez com o email) para verificar se tem algum número. Exemplo:
const nameRegex = /\d/; // o "\d" serve para verificar se tem dígito numérico. nameRegex.test("Bernardo") //Retorna false nameRegex.test("Bernardo123") //Retorna true
Já o keyboard-navigation parece não estar funcionando corretamente, digo isso pois apenas consigo mover utilizando as setas na parte de Query Type. O resto eu tenho que utilizar o tab ainda.
Sobre o HTML, a div#container está redundante, você poderia utilizar a própria main para fazer o papel do "container", ficando algo assim:
<main id="container"> <h1></h1> <form></form> </main>
Outro trecho redundante é a <div> dentro do <footer>, ela pode ser removida que não irá afetar a ordem da sua <footer>.
Já a mensagem de sucesso está empurrando o formulário pra baixo, isso não está errado, mas pode causar uma estranheza. Utilizar o position: absolute; evitaria que isso acontecesse, e talvez utilizar um timeout possa se interessante pra fazer o card de sucesso sumir, mas claro, isso é totalmente opcional.
Sobre a parte de acessibilidade e semântica, seu projeto está muito acessível, ele está impecável nesse quesito, parabéns! E sobre semântica, ele está equilibrado, tem alguns trechos que poderiam ficar ainda mais semânticos, como é o caso das várias div dentro do formulário, poderiam ser alteradas para <fieldset>, assim como você fez com a parte dos radio.
E uma pequena dica sobre o CSS, na parte de nome por exemplo, você teve que utilizar duas <div> para posicionar os elementos daquela forma, mas uma outra forma que poderia funcionar também é utilizando grid. Algo mais ou menos como esse trecho:
<div> <label for="name">Nome</label> <label for="password">Senha</label> <input type="text" id="name"> <input type="password" id="password"></input> </div>
div { display: grid; grid-template-columns: 0.5fr 0.5fr; grid-template-rows: 0.5fr 0.5fr; gap: 0.5rem; }
Mas o que você fez não está errado, é apenas uma outra forma que pode ajudar a deixar o HTML um pouco mais "limpo".
E é isso! Caso tenha ficado qualquer dúvida quanto ao que foi dito, por favor comente abaixo que tentarei ajudar da melhor forma possível.
Olá Guilherme, parabéns pela conclusão do desafio, ele está muito bem-feito.
Uma dica quanto ao HTML, quando se tem imagens que não tem importância ou são apenas ícones, não passamos um alt descritivo, nós o passamos vazio, dessa forma: alt="".
E uma observação, os headings estão na cor preta, não sei se isso foi proposital ou não, já que até cheguei a ver que no seu último projeto antes desse, também tinha um heading na cor preta. Bom isso não é um problema, mas no caso desse projeto pode causar uma estranheza de design, já que todos os textos são brancos com exceção do título.
Sobre acessibilidade sobre contraste dessa cor de título, note que a cor preta no segundo card não desempenha tão bem no WCAG 2.1, e no terceiro card nem sequer cumpre os requisitos mínimos.
Obs.: Isso também ocorre no seu outro projeto, na parte de título (seu nome) e na descrição.
Uma recomendação sobre SEO é sempre de utilizar a tag <h1> na página, nesse caso você pode colocar o <h1> fora dos cards e adicionar esse estilo ao seu título:
h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
Isso irá deixá-lo invisível, não irá interferir no layout e vai permitir que leitores de tela consigam ler esse <h1>.
E é isso! Novamente parabéns pela conclusão do desafio, continue praticando e se aprimorando, e caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.
Olá David, parabéns pela conclusão do desafio e por ter optado por fazer de uma forma tão única e própria.
Tenho algumas dicas a dar quanto ao seu projeto, começando pelo HTML, ele tem uma boa estrutura, mas talvez fosse mais interessante colocar a imagem e a parte textual tudo dentro de apenas um elemento, pois todos possuem uma certa relação entre si. Ficando algo assim:
<article> <figure> Aqui viria a parte esquerda do card </figure> <section> Aqui viria a parte direita do card </section> </article>
Mas claro, isto é opcional.
Agora na parte semântica, seu projeto está muito pouco semântico, e manter uma boa semântica é importante para SEO e também acessibilidade da página. Algumas tags que poderiam ficar mais semânticas:
div com img poderiam ser <figure> devido a serem figuras autocontidas, que tem sentido por si proprias.div.container poderia ser alterada para uma <article> devido a ser autoexplicativa, isso é, fazer sentido por conta própria.Agora sobre as tags de headings (h1, h2, h3, h4, h5), essas tags servem para a criação de título, subtítulo, subsubtítulo e por aí vai. Então por exemplo, sua h5.card não é um tipo de título, mas sim uma descrição, um parágrafo, então a tag que melhor cabe aqui é a tag p, o mesmo vale para h2.num e h5.riscado.
Note também que todas as páginas devem conter no mínimo e máximo apenas um <h1>.
E tem um erro no seu HTML, que causa quebra de estrutura do DOM, que seria esse trecho:
<h3 class="perf"> perfume </h1>
Para evitar isso basta seguir a simetria, abriu com <h3>, fechou com </h3>.
Outra coisa que notei é a importação de fontes duplicadas:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
Você pode remover uma delas que não causará nenhum problema.
Sobre acessibilidade no HTML, as tags <img/> todas possuem um alt="", esse tipo de alt só é utilizado para ícones e imagens sem importância. No caso desse projeto, a imagem do perfume é importante, então o mais recomendado é utilizar um mais descritivo, exemplo: alt="A box of Macaque Perfum with leafs in the background".
Edit: Uma pequena observação, o ícone está fora do <button>, mas faz mais sentido colocá-lo dentro, já que ele faz parte da estrutura interna do botão. Assim:
<button type="submit"> <i class="bi bi-cart"></i> Adicionar produto </button>
Daí você pode remover a position do ícone, e colocar esse trecho apenas:
.bi.bi-cart { font-size: 24px; margin-right: 1rem; }
E agora uma dica mais HTML-CSS, quando for nomear as classes, evite nomes genéricos, por exemplo sua classe .ok, esse é um nome genérico. Isso pode acabar prejudicando na manutenibilidade do seu HTML, já que pra identificar o que é a classe .ok eu teria que procurar no CSS e/ou inspecionar no site em si. Uma sugestão de nome poderia ser: img-desktop e img-mobile, que assim fica mais descritivo.
Sobre o CSS, no seu body a fim de centralizar o card, você pode substituir o padding-top por height: 100vh; dessa forma o body terá o mesmo tamanho da sua viewport.
Se fizer isso, então o seu <h5 class="riscado">$200</h5> irá ficar desalinhado, devido a você ter utilizado position para posicionar ele. Daí você pode ajustar alterando o valor de top.
Mas a minha recomendação é, ambos os preços, o normal e o riscado devem estar como um elemento só, dessa forma por exemplo:
<p>$149.99 <span>$200</span> </p>
E é isso! Novamente parabéns pela conclusão do projeto, e caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.
Olá Rafaela, parabéns pela conclusão do projeto, ele ficou muito bem-feito e próximo ao design proposto.
Tenho algumas dicas a dar quanto ao seu HTML e CSS. Começando pelo HTML, notei que você utilizou algumas tags semânticas, mas tem alguns trechos que poderiam ficar mais semânticos ainda. Alguns desses trechos:
header poderia ser alterado para uma <main> pois é o conteúdo principal da página, e note que em vários casos, sempre após a tag <body> virá uma tag <main>.div.card-daniel e as outras div's que são cada card, poderiam todas serem alteradas para uma <article> pois são conteúdos autoexplicativos, ou seja, conseguimos entender eles sem levar em conta o restante do contexto da página.div.header todas poderiam ser alteradas para uma <header> pois são o conteúdo inicial e de apresentação do card.h3 note que sempre deve seguir uma hierarquia de Headings, sempre começamos pelo <h1>, depois <h2>, depois <h3> e assim por diante. No seu caso, você pulou do <h1> pro <h3>, o mais correto é que os <h3> fossem <h2>. Mas note que se você fizer a alteração abaixo, então esses h3 podem continuar, exceto no primeiro card.h1 todas as páginas devem conter apenas um <h1>, sem ter repetidos, pois <h1> simboliza o título principal da página, então nesse caso específico, o primeiro poderia ter um <h1> e o restante ser <h2>. Note que isso é uma especificação de SEO, no HTML claramente pode ser utilizado vários <h1>, mas não é recomendado.Uma dica sobre HTML-CSS, você deu para cada card uma classe única, exemplo: card-daniel, card-jonathan e por aí vai. Tanto que no CSS você teve que colocar o nome de todos para estilizar, exemplo:
.card-daniel, .card-jonathan ... {}
Isso pode acabar deixando seu CSS verboso e menos legível, para evitar isso você pode criar uma classe .card que conterá toda estilização comum. Daí no seu HTML ficaria:
<div class="card card-daniel"></div> <div class="card card-jonathan"></div>
E aí no seu CSS, bastaria utilizar um:
.card {}
que assim você reaproveitaria os estilos repetidos.
Ainda sobre o CSS, evite ao máximo utilizar o !important, pois ele pode dificultar a manutenção do código.
E também quando for trabalhar com a parte responsiva, opte por fazer em Mobile-First, porque esse fluxo é mais intuitivo, você começa fazendo o site para celular, e depois você vai criando o responsivo para telas maiores. Exemplo:
main { /* Estilizações */ } @media (min-width: 768px) { main { /* Estilizações */ } } @media (min-width: 1440px) { main { /* Estilizações */ } }
Nesse exemplo, seria algo como: "Estilize dessa forma, mas a partir de 768px aplique essa outra forma, e a partir de 1440px aplique essa outra forma", isso deixa mais intuitivo.
E é isso! Novamente parabéns pela conclusão do projeto, caso tenha ficado qualquer dúvida quanto ao que foi dito, por favor comente abaixo que tentarei ajudar da melhor forma possível.
Consegui pesquisar e concluir esse projeto, sendo o primeiro projeto front-end (HTML, CSS) que concluo.
What challenges did you encounter, and how did you overcome them?Saber o que e quando usar, dentre as ferramentas das linguagens.
Olá Ryan, parabéns pela conclusão do projeto, ele ficou muito bom.
Sobre o CSS no seu projeto há um detalhe na parte de responsividade, começa a haver uma quebra do layout a partir da largura de 375px, sendo que é importante que o seu site seja responsivo até no mínimo 320px. Para evitar isso você pode utilizar a função clamp() no seu card, dessa forma:
width: clamp(320px, 90%, 400px);
Isso define a largura mínima para 320px, a largura base para 90% do elemento pai e largura máxima para 400px.
Também recomendo remover o width: 50vh;. Pois isso significa que a largura do card é de 50% da altura da viewport, ou seja, ele se baseia no tamanho vertical para definir um tamanho horizontal, e isso pode causar alguns problemas, pois se a viewport não tiver muita altura, o card vai ficar desajustado.
Agora sobre o HTML, tem alguns trechos que poderiam ficar mais semânticos, assim trazendo mais acessibilidade e SEO para a página. Trechos que poderiam ficar mais semânticos e porque:
div.conteiner poderia ser alterada para uma <article> pois é autoexplicativa, ou seja, faz sentido por si só. Tanto que já vai uma dica, geralmente quando se tem um card e ele possui um título e uma descrição, ele será uma <article>.div.profile poderia ser alterada para uma <section> pois está servindo para agrupar conteúdo tematicamente semelhante que nesse caso seria sobre você.h2.nome poderia ser alterada para uma <h1> pois sempre devemos ter pelo menos uma <h1> antes de termos um <h2>, <h3> e por aí vai.p.localizacao poderia ser alterada para uma <address> devido a ser relacionado a um endereço.E uma pequena observação, quando clica no Portfólio, ele direciona para o seu Github, o que pode soar confuso, talvez o mais interessante seja nomear como "Github" ao invés de "Portifólio".
E é isso! Novamente parabéns pela conclusão do desafio, ele ficou muito bom, e parabéns por ter feito ele de uma forma única, se baseando em um card para você. E caso tenha ficado qualquer dúvida por favor comente abaixo que tentarei ajudar da melhor forma possível.
I'm proud that I managed to integrate this with a test database using JSON Server. I think I could have used Context API or explored more hooks like useLocation
What challenges did you encounter, and how did you overcome them?I think my main challenge was knowing how I would organize the project, how I would create it, what would be a component or not, if there would be routes? Maybe. React really opens up a million possibilities and I intend to continue exploring and improving myself in this framework. I tried to do it in the way that I felt most confident, but now that the project is finished, I see other better ways to do it.
What specific areas of your project would you like help with?I think that in terms of code organization, some parts are quite messy. I also welcome some tips on responsiveness with CSS and how I can make my commits in the most professional way possible.
Olá Evellyn, parabéns pela conclusão do projeto. Eu o baixei e vi que ele está muitíssimo bem-feito.
Vou iniciar respondendo sobre a parte de dúvidas, começando pela parte de commits profissionais. Bom a melhor forma de fazer um commit é deixar claro o que aquele commit altera e sempre na forma infinitiva, por exemplo, você criou um novo componente, então faria sentido um commit assim: create new component. Além do mais existe uma convenção de commits que seria essa: Conventional Commits. Essa forma trabalha com uma padronização de commit, alguns exemplos:
feat(frontend): create a card componentrefactor(backend): optimize X functionchore: update tailwind configSobre o CSS, falarei sobre ele no final.
Sobre estar uma bagunça, eu não acho que tenha ficado uma bagunça estrutural, mas ele possui alguns trechos que podem trazer problemas de legibilidade e manutenção. Por exemplo, tem funções que você utiliza snake_case ou PascalCase ao invés de camelCase, o que gera uma inconsistência e foge da convenção do JS. Outro problema seria uma pequena inconsistência no idioma como quantidade e itens-to-car(em inglês é items) enquanto outras classes estão em inglês. E um último problema seria erros gramaticais, como car ao invés de cart, hiden que aliás, note que já tem uma classe hidden, tanto que você teve que criar duas classes, sendo que poderia utilizar uma.
Agora sobre algumas outras partes que você comentou. Você citou que poderia usar o hook useLocation, mas sinceramente não vejo onde ele poderia ser aplicado na aplicação, tanto que ele é do React-Router, e não há roteamento nesse desafio. Já sobre a Context API, sim, era possível utilizar ele.
Você também citou que teve dúvidas se seria necessário rotas e o que seria componente. Bom, sobre componentes é realmente bem difícil identificar o que pode ser um componente independente ou não, mas geralmente cada elemento visual em uma tela pode ser um componente. Sobre as rotas, não, esse projeto não abre margem para trabalhar com rotas.
Uma observação, sua estrutura do projeto está algo assim:
├──products ├──package.json ├──package-lock.json └──README
Acredito que isso tenha sido uma distração, pois a pasta products é sua pasta principal, é nela onde está a aplicação, tanto que esse package.json externo está fazendo a instalação do fontawesome, mas tudo isso poderia ser feito dentro da pasta products. Tanto que isso evitaria a necessidade de utilizar o npm install duas vezes, e ajudaria na organização de pastas.
Outra dica, dentro da sua products você também poderia instalar o json-server com o npm i json-server, assim colocando-o como dependência do projeto, aí quando fosse feito o npm i para criar o node_modules isso já instalaria o json-server permitindo que quem clonar o projeto tenha acesso a ela sem ter que instalar globalmente. Tanto que acredito que você não a instalou no projeto porque você já a tem instalada globalmente.
Já sobre isso de utilizar json-server para fazer um mock de Backend, eu achei criativo, superinteressante e uma ideia inovadora dentro do contexto desse desafio. Então, parabéns!
Mas note que isso trouxe um problema, sua aplicação tem um loading infinito pois faz uma busca no localhost:3000/producs acontece que, quando você faz o deploy, essa rota não existe. Para evitar isso você pode não utilizar o json-server ou utilizar alguma tech para criar o Backend, como o NestJS por exemplo, e hospedar ele em alguma plataforma como Railway, Render, entre outras. Mas note que o NestJS é bem robusto o que pode ser um "overkill" para esse desafio.
Outra forma de você poder utilizar esse Backend e sem precisar usar outras techs seria utilizar o NextJS, pois ele já tem uma API embutida, daí você cria sua API ali dentro do Next e publica na Vercel, que aí ela já sobe sua API automaticamente. Mas note que pra isso terá que ter um conhecimento básico de HTTP e NodeJS.
Edit: NextJS utiliza React, então se você já está confortável e sabe usar React, não vai ser tão difícil usar NextJS. E uma curiosidade, ele já tem um roteador embutido, então não é necessário um react-router.
Agora sobre sua dúvida quanto ao CSS, ele está em grande parte bom, só que há problema de responsividade em telas menores que 425px. Isso ocorre devido a classe .itens-to-car ter um width: 400px, isso força o elemento a ter 400px de largura, que por sua vez faz com que o div.car não consiga diminuir, pois é valor auto. Então esse width pode ser removido em telas abaixo de 425px, e adicionar em telas acima de 425px.
E é isso! Novamente parabéns, achei superinteressante isso de utilizar um mock de backend. Caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.
Gostaria dos feedback de vocês me orientando em que eu poderia está melhorando para poder ter um código mais limpo.
Olá Israel, parabéns pela conclusão desse desafio, ele ficou muito bom.
Uma observação, você passou a URL errada para a parte de Repositoy URL, a correta seria: https://github.com/israelsobral/links-sociais. Que dessa forma até apareceria o seu repositório aqui no FEM, facilitando na busca, e também ao clicar em View Code.
Sobre o que você citou, de deixar o código mais limpo, não vi muitas áreas que estavam verbosas ou com algum exagero. O único trecho que eu poderia sugerir um aprimoramento seria no CSS, que seria relacionado a evitar o uso de especificidade caso não seja necessário. Alguns desses casos:
p#descricao poderia ser só um #descricao, sem a necessidade desse p pois descricao é apenas utilizado em uma parte, sem ter repetiçõs, o que faz a especificade não necessária.input.quadrado poderia ser só um .quadrado, por mais que ele seja reutilizado, toda reutilização dele é da mesma estilização, o que faz com que não seja necessário esse input antes.Agora algumas dicas quanto ao HTML. Sobre semântica, há algumas partes que poderiam ficar semânticas, como:
section poderia ser alterada para uma <article> pois é um conteúdo autoexplicativo, ou seja, faz sentido por si próprio.p.destaque poderia ser alterada para uma <address> pois se trata de uma localidade.div>a>input cada uma dessas, que nesse caso seriam os botões de link, poderiam ser substituídos pela tag <a> sozinha, sem nenhum outro HTML dentro dela.<ul>, que assim fica mais semântico ainda, um exemplo:<ul> <li> <a href="URL-para-meu-gh">Guthub</a> </li> <li> <a href="URL-para-meu-fem">Frontend Mentor</a> </li> </ul>
Essa alteração que eu mencionei dos links também tem um motivo de acessibilidade e otimização de estrutura.
Sobre a estrutura, essas <div> são redundantes, elas não estão sendo de fato necessárias, você conseguiria atingir o mesmo resultado apenas estilizando as tags <a>.
Sobre a acessibilidade, não é recomendado colocar botões dentro de uma <a>, pois botões como <button> são utilizados para indicar uma interatividade no site, como por exemplo, mudar o tema da página, criar uma tarefa, abrir/fechar um modal, e por aí vai, já as tags <a> servem para indicar um hiperlink, e não uma interatividade.
Ainda sobre acessibilidade, quando for utilizar um botão, recomendo o <button> ao invés de <input type="button"> pois ele tem mais vantagens como acessibilidade e flexibilidade de conteúdo (como colocar ícones ao invés de texto).
E é isso! Novamente parabéns, caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.
I am very proud of this project because I am able to make better projects as the months go by.
What challenges did you encounter, and how did you overcome them?I faced the challenge with responsive styles. The size of texts, images and containers. But I managed to overcome them, I think.
What specific areas of your project would you like help with?I welcome any feedback that would help me improve it.
Olá Tatyane, mais uma vez parabéns pela conclusão de mais um desafio aqui do FEM. Ele ficou muito bem-feito e bastante próximo ao design proposto.
Seu projeto está muito bem-feito na parte do HTML, está com uma boa estrutura e uma boa semântica, só que há algumas partes que podem ser aprimoradas. Algumas delas:
main.article-container e main.article-content, você possui duas tags <main>, mas essa tag serve para indicar o conteúdo principal do documento (a página), então não faz sentido ter duas <main>. Geralmente quando estamos utilizando container e wrappers, nós os colocamos como <div>, pois não devem ter valor semântico.picture todas poderiam ser alteradas para uma <figure> devido a você não estar utilizando a picture para criar responsividade na imagem. Abordo isso mais à frente.section.article-avatar poderia ser alterada para uma <footer> devido a ser o fim do card, mas também devido a conter metainformações sobre esse card, que no caso seria a autora.article.id poderia ser alterado para uma <div> pois não tem valor semântico, e não é <article> porque não é um conteúdo exatamente independente, pois é apenas um bloco com nome e data. Mas sinceramente acho que dependendo de um contexto faria sentido ser <article> como de reutilizar esse trecho em algum lugar.h2 dentro de section.share-modal poderia ser alterado para uma <p>, pois não é um subtítulo e não está no fluxo principal onde está o h1, e também por estar em um modal.div.icons poderia ser alterado para uma <ul> com cada imagem estando dentro de uma <a> que por sua vez cada uma estaria dentro de uma <li> própria. Pois esses elementos representam uma lista de links para redes sociais. Note que ao fazer isso, também utilize aria-label já que o link não terá texto descritivo, ou seja, algo como:<a aria-label="Link para o Facebook"> <img/> </a>
Sobre a picture que eu havia mencionado, você utilizou a tag <picture>, mas não teve motivo para utilizá-la, apenas a utilizamos quando queremos que uma imagem tenha várias versões responsivas, exemplo:
<picture class="article-image"> <source media="(min-width:1440px)" srcset="./src/images/drawers-desktop.jpg"> <source media="(min-width:768px)" srcset="./src/images/drawers-tablet.jpg"> <img src="./src/images/drawers-mobile.jpg" alt="Image of drawers" /> </picture>
Agora sobre o SCSS, não acho que tem muito o que eu possa dizer, ele já está muito bom, a única sugestão que eu daria é a de separar as variáveis. Para isso você pode criar um outro arquivo SCSS como _var.scss (o _ serve para não criar um CSS próprio para esse scss), e dentro dele colocar as variáveis, daí basta usar um @use './var.scss';, para poder utilizar suas variáveis em outros lugares.
E é isso! Novamente parabéns, caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.
I am proud of to be able to use my knowledge in a simple way. Nothing better than a review of concepts to improve what I have alwayes practiced.
What challenges did you encounter, and how did you overcome them?I don't have any challenges. The code is simples and I didn't have any dificulties during its production.
What specific areas of your project would you like help with?I need help with HTML due to some properties it has, but I didn't use them fully for fear of making mistakes.
Olá novamente Eduardo, parabéns pela conclusão do desafio, ele está semelhante ao design proposto e muito bem-feito!
Sobre sua dúvida, quais propriedades seriam essas que você mencionou? Se quiser comentar abaixo, que tento sanar suas dúvidas.
Bom agora algumas dicas quanto ao seu HTML, vou começar pela semântica, depois acessibilidade. Sobre a semântica, seu projeto está pouco semântico, tags que poderiam ficar mais semânticas e o porquê:
div.container poderia ser trocado para uma main, porque é aqui onde está seu conteúdo principal, e não sei se já havia dito isso alguma vez antes em outros projetos, mas na maioria dos casos, após a <body> vem uma <main>. Tanto que isso tira a necessidade de chamar de .container, tendo algo só como <main> e usando o seletor main.div.card poderia ser trocado para uma article, porque é um conteúdo autoexplicativo, você consegue entendê-lo sem levar em conta o contexto do restante da página. E também, muitas das vezes um card será uma <article>, principalmente se ele tiver título e descrição.div.text poderia ser trocado para uma section, porque está contendo elementos tematicamente relacionados entre si, que no caso seria o título e a descrição. Mas já aviso que essa div é redundante, você conseguiria atingir o mesmo resultado sem ela. Que seria utilizando margin.Sobre acessibilidade, tem dois pontos apenas a serem citados, que são eles:
alt da imagem está vazio, apenas utilizamos alt="" quando a imagem não tem importância, mas essa imagem em específico tem uma importância, já que ela serve como um redirecionador. Tanto que ela poderia estar dentro de uma tag <a>, mas claro isso é opcional.<h2> você sempre deve seguir uma hierarquia de headings, sempre começar do h1 e ir descendo. Ou seja, o mais correto é utilizar um <h1> ao invés de <h2>.Já sobre o CSS ele está muito bem-feito, não tem nenhum erro. Mas tenho uma pequena sugestão, você não precisava dessa especificidade como .text h2 por exemplo, pois você só tem um h2, o mesmo vale pra .text p e .card img.
E a outra sugestão seria a de utilizar rem ao invés de px, para padding, margin e font-size que dessa forma traz mais acessibilidade, já que rem se baseia no tamanho de fonte escolhido pelo usuário no navegador dele, assim a fonte se adapta ao tamanho ideal para aquele usuário.
E é isso! Caso tenha ficado qualquer dúvida, já sabe, só comentar abaixo que tentarei ajudar da melhor forma possível.
It was my first advanced challenge and I'm happy that I was able to meet all the requirements.
What challenges did you encounter, and how did you overcome them?It had been a while since I worked with React Hooks, so handling state control and theme switching was a bit challenging.
What specific areas of your project would you like help with?I'm not sure if I structured the components or managed the application state very well. I also tried to make it accessible, but I still don't really know how to properly test that.
Olá Alan, parabéns pela conclusão do projeto, ele está muito bom e se assemelhando muito ao design original.
Sobre suas dúvidas quanto a acessibilidade, você pode testar tanto apertando as teclas Tab e Shift+Tab para testar a acessibilidade usando apenas o teclado.
Também para melhorar ainda mais o teste você pode baixar o NVDA, você o encontra aqui: NVDA. Ele é um leitor de tela para deficientes visuais, então você consegue entender como uma pessoa com deficiência visual visualizaria sua página.
Não sei se em outros navegadores tem isso, mas no Edge você consegue simular como ficaria visão embaçada e também como ficaria visão com daltonismo. O que ajuda a ver se está tudo em um tamanho adequado e em uma cor adequada.
Agora sobre sua outra dúvida quanto a estruturação dos componentes, a primeira vista parece sim estar bem estruturado. Nunca utilizei o Astro pra valer então não sei se ele tem algo específico quanto a isso, mas se for seguir a ideia do React, então sim, está. A única sugestão que tenho a isso seria de tentar componentizar mais a página do [id].astro, como essas li que são relacionadas ao dados.
Uma pequena observação, quando utiliza o filtro por continente e depois pesquisa, o filtro não volta ser "filter by region", o que pode causar uma confusão, como por exemplo, eu deixo o filtro em "Americas" e na pesquisa escrevo "Japão" teoricamente não deveria aparecer nada. Você pode utilizar uma Context API para facilitar o gerenciamento entre esses 2, ou seja, quando pesquisar o filtro volta a ser nenhum.
Uma sugestão, utilize algum formatador de texto, pois tem algumas classes que elas estão muito grandes, e acaba dificultando a leitura, mas claro isso é 100% opcional. O mesmo vale para a tabulação, acredito que você utilizou tabulação de 4 espaços, talvez fosse mais interessante utilizar 2 espaços, mas novamente, é 100% opcional, opte por aquela que você tem facilidade de legibilidade.
E uma outra pequena observação a respeito da estilização, talvez fosse interessante fazer com que os dois dropdowns fossem semelhantes no quesito de estilo, pois o dropdown de região é bem diferente do dropdown do theme. Mas note que pra fazer isso, como você irá remover o select, você terá que utilizar alguns aria e role.
E é isso, seu projeto já está muito bom, achei interessante essa forma que você utilizou para a criação do Theme, onde utiliza um dropdown, bem criativo. Caso tenha ficado qualquer dúvida, só comentar abaixo que tentarei ajudar da melhor forma possível.
qualquer feedback é bem-vindo.
Olá Antonio, parabéns pela conclusão do projeto, ele ficou muito bom.
Observei que tem algumas partes que não estão responsivas, por exemplo, em tela de 320px o card quebra, fica aparecendo uma parte em branco na lateral direita, o que mostra que tem elementos quebrando o layout do card. Para evitar isso você pode adicionar no seu .option-email input e .info-modal esses trechos de CSS:
.option-email input { /* Outras props */ width: 100%; } .info-modal { /* Outras props */ width: 100%; max-width: 351px; }
Ainda sobre responsividade, a partir de 400px de largura sua tela quebra novamente, o card fica cortado. Minha sugestão é de mudar a @media tanto da picture quanto no seu arquivo modal.css, para 768px. Caso faça isso você irá notar que a imagem está crescendo muito, e para evitar isso você pode adicionar esse trecho a ela:
.img img { /* Outras props */ max-height: 320px; object-fit: cover; }
E pra finalizar sobre a parte de responsividade, acima da tela de 1440px a imagem fica pequena e depois começa a crescer, para evitar isso você pode adicionar ao seu body e ajustar sua .newsletter-modal com esses trechos:
body { /* Outras props */ display: flex; align-items: center; justify-content: center; min-height: 100vh; } .newsletter-modal { /* Mantenha todas props mas remova apenas: */ /* position, top, left, transform */ }
Agora sobre semântica do HTML, seu projeto possui alguns trechos semânticos, mas que podem ser aprimorados, por exemplo:
section.newsletter-modal seria uma article ao invés de uma section, isso devido a ser autoexplicativa e independente, ou seja, você consegue entender todo o conteúdo sem depender mais nenhum contexto da página. Mas note que nesse caso também poderia ser uma main já que geralmente após a <body> vem a main, que indica que é o conteúdo principal da página.div.info-modal já seria uma section devido a conter elementos que são relacionados entre si e seguindo uma mesma temática, que nesse caso seria o que o site oferece.div.option-email poderia ser alterada para uma form devido a representar um formulário, mas note que se fizer isso você terá que no seu JS utilizar um event.preventDefault() e também um .addEventListener("submit", ()=>{}) para poder trabalhar com ele. Note que essa alteração é apenas uma sugestão de melhoria de semântica, mas não está errado utilizar a div;div.img poderia ser alterada para uma figure devido a conter uma figura da página que é autocontida, ou seja, se você remover ela não irá mudar o significado de onde ela está inserida.Vi que você colocou que usou #pure-css mas acredito que houve uma confusão. O pure-css é uma biblioteca de módulos CSS, você pode encontrar ela aqui: Pure-CSS. Acredito que que você tenha pensado que pure-css seria algo como "usei apenas CSS", o que não é. Tanto que aqui no FEM não é possível colocar tags de html,css e js, pois já é inferido que você teve que utilizar eles em alguma instância para a criação do projeto.
E é isso! Caso tenha ficado qualquer dúvida quanto ao que foi dito, por favor comente abaixo que tentarei ajudar da melhor forma possível.
Colocar as grades em ordem e fazer o responsivo
What challenges did you encounter, and how did you overcome them?Deixar na ordem e o responsive
Fiz varias tentativas, até achar que a melhor foi usando o flex-wrap
What specific areas of your project would you like help with?Na parte do css gostaria de um feedback sobre a organização
Olá Andreia, parabéns pela conclusão de mais um desafio aqui do FEM.
Sobre sua dúvida, acerca da organização do CSS, ela não está ruim, está até que organizado também. A única coisa que eu teria a pontuar sobre isso seria o excesso de especificidade, como elementos assim: .container .quadro1. Isso não é necessário, pois você não utiliza essa classe .quadro1 em outro lugar que não seja o .container, então para simplificar pode utilizar só .quadro1, o mesmo vale para as outras .container .quadro*.
Uma observação, seu reset não está sendo aplicado, porque você passou o diretório errado, você passou: reset.css, mas o certo seria ./src/css/reset.css, tendo em vista que o reset.css está na pasta css que por sua vez está na pasta src. Note que ao corrigir isso você irá quebrar a estilização da aplicação, pois você a fez sem utilizar o box-sizing: border-box; então teria que adaptar pra ele agora.
Também observei que tem uma "aba" branca debaixo do conteúdo principal, isso está ocorrendo porque seu body não possui uma altura definida, para evitar isso você pode utilizar:
body { /*Todas propriedades que já tem*/ height: 100vh; } .container { /*Todas propriedades que já tem*/ height: 100%; }
Uma dica agora a respeito dos cards, você não precisa definir um tamanho neles como você fez, isso pode até trazer problemas com o grid-layout. Fiz um exemplo no CodePen mostrando que isso não é necessário, está aqui: CodePen - Grid. Note também que nesse exemplo eu utilizei grid-area para posicionar os elementos.
Sobre o grid-area no seu projeto, ele tem um pequeno problema, você o colocou pra se basear em nome das células do seu grid, mas seu grid não possui esses nomes. Para corrigir isso você pode utilizar o grid-area assim:
grid-area: 1 / 1 / 2 / 3;
Mas se realmente quiser utilizar o nome nas células, você terá que fazer isso:
.contianer { /* Toda propriedades que já tem*/ grid-template-columns: repeat(4, 0.25fr); grid-template-rows: repeat(2, 0.5fr); grid-template-areas: "quadro1 quadro1 quadro2 quadro5" "quadro3 quadro4 quadro4 quadro5"; }
E claro, ao fazer isso você terá que remover todos grid-column e grid-row dos quadros.
E é isso! novamente meus parabéns pela conclusão do projeto, continue praticando e se aprimorando, e caso tenha ficado qualquer dúvida quanto ao que foi dito, por favor comente abaixo que tentarei ajudar da melhor forma possível.
Melhorar as técnicas de responsividade de tela
What challenges did you encounter, and how did you overcome them?Consegui estudar a melhor forma de estruturar o css para ajustar a responsividade da tela
What specific areas of your project would you like help with?Estruturação e responsividade de tela
Olá Eduarda, parabéns pela conclusão do seu primeiro desafio aqui do FEM, o que já é um grande passo!
Sobre sua dúvida quanto a estruturação e responsividade, a estrutura do seu HTML está com algumas redundâncias, veja:
<div class="caixa"> <div class="logo"> <img class="caixa_img" src="./img/image-qr-code.png" alt="umb"> <div class="p"> <h1> Improve your front-end <br> skills by building projects</h1> </div> <div class="text"> <p> Scan the QR code to visit Frontend <br> Mentor and take your coding skills to <br> the next level</p> </div> </div> </div>
Perceba que a div.logo, div.p e div.text são todas redundantes, pra evitar isso você pode simplificar seu HTML, assim:
<div class="caixa"> <img class="caixa_img" src="./img/image-qr-code.png" alt="umb" /> <h1> Improve your front-end <br /> skills by building projects </h1> <p> Scan the QR code to visit Frontend <br /> Mentor and take your coding skills to <br /> the next level </p> </div>
Note que as classes e elementos div.logo div.p e div.text foram removidas, já que não estavam sendo utilizadas ou eram desnecessárias.
Agora sobre a responsividade, seu CSS chegou a 412 linhas, a maior parte foi devido a forma que você utilizou o @media, você fez uma @media para cada 100px de largura de tela, e isso funciona só que não é a melhor forma. Minha recomendação é que poderia ser removida todas @media, esse desafio em específico não é necessário utilizá-la.
Sobre essa parte do CSS, eu removi todas as @media e também a .logo img {}, pois como dito antes, eu removi a div.logo. Então apenas mudei a .caixa e img, ficou assim:
.caixa { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; padding: 16px; border-radius: 16px; width: 300px; } img { width: 100%; border-radius: 16px; }
Agora uma dica quanto a @media geralmente não é necessário utilizar uma condição mínima e máxima. Eu particularmente gosto de fazer utilizando Mobile-first (que apenas utiliza condição mínima) que é, começar por telas menores e depois criar @media para telas maiores, algo assim por exemplo:
.card { /*propriedades*/ } @media (min-width: 768px) { .card {} } @media (min-width: 1024px) { .card {} }
Nesse caso, quando a tela tiver mais de 768px ela irá ativar a primeira @media, caso ela tenha mais de 1024px ela irá ativar a segunda @media, isso deixa a estilização mais legível e simples.
Uma outra dica, sempre opte por utilizar HTML semântico, nesse desafio, só tem um trecho que pode ficar mais semântico que é a div.caixa, que poderia ser substituída por uma tag <main>. Ficando algo como <main class="caixa">.
E é isso! Novamente parabéns, continue praticando e se aprimorando, caso tenha ficado qualquer dúvida quanto ao que foi dito, por favor comente abaixo que tentarei ajudar da melhor forma possível!
I couldn't implement hover on the image.
Olá Wellington, parabéns pela conclusão do projeto, ele está bem-feito.
Sobre você não ter conseguido implementar aquele hover na imagem, você pode fazer da seguinte forma:
HTML
Coloque sua <img/> entre uma tag <figure> (pode ser <div> também), e dentro da <figure> adiciona uma <div> ela será aquela parte que aparece em cima da imagem quando é feito o hover. Assim:
<figure> <img src="images/image-equilibrium.jpg" alt="Equilibrium Image" id="mainimg"> <div class="overlay"></div> </figure>
CSS No final do seu arquivo CSS adicione esse trecho:
figure { position: relative; } .overlay { background: url(../images/icon-view.svg) no-repeat center hsl(180, 100%, 50%, 0.75); width: 100%; height: 100%; position: absolute; inset: 0; border-radius: 10px; opacity: 0; cursor: pointer; transition: 0.3s ease-in; } .overlay:hover { opacity: 1; }
Ainda sobre o CSS, em telas pequenas o card fica amassado, isso está ocorrendo porque você utilizou width: 30%;, ao invés disso poder ser mais interessante utilizar width: clamp(280px, 90%, 300px), isso irá definir a largura mínima para 280px, o tamanho base para 90% do elemento pai e 300px de largura máxima.
E agora uma dica, opte sempre por utilizar HTML semântico, que dessa forma você mantém uma boa legibilidade do seu HTML, acessibilidade nas páginas e garante um bom SEO. Algumas tags que poderiam ficar mais semânticas são:
div.container poderia ser substituída por uma <main> devido a ser onde está o conteúdo principal da sua página, e já fica uma dica extra, na maior parte das vezes, após uma tag <body> deverá vir uma tag <main>.div.card poderia ser substituída por uma <article> devido a ser um elemento autoexplicativo e independente, ou seja, o card faz sentido por si próprio.div.linha-info poderia ser substituída por uma <section> pois os elementos contidos nela são tematicamente semelhantes entre si, que no caso seriam dados a respeito daquele card.div#sectionavatar poderia ser substituída por uma <footer> devido a ser não só o rodapé do card mas também por conter metainformações sobre o card, que n ocaso é o nome do autor.E é isso! Novamente meus parabéns, caso tenha ficado qualquer dúvida quanto ao que foi dito, por favor comente abaixo que tentarei ajudar da melhor forma possível.