Thanks to a course I'm taking, I'm able to develop projects with tools other than HTML, CSS, and JavaScript. In this challenge, I used React, TypeScript, and Sass.
What challenges did you encounter, and how did you overcome them?Develop dark and light modes for the landing page.
What specific areas of your project would you like help with?None.
Olá Tatyane, parabéns pela conclusão de mais um projeto aqui do FEM.
Uma pequena dica relacionada ao Sass. Ao invés de utilizá-lo de forma separada em cada pasta, você pode considerar criar uma pasta chamada scss ou sass, dentro da src, e nessa pasta criar um scss principal, no qual irá importar através do @use ou @foward todos os outros sass, nessa estrutura por exemplo:
// src/scss/global.scss
@use "components/ThemeSwitcher";
@use "components/Header";
Nesse exemplo, o global iria importar o ThemeSwitcher, o Header, e os outros scss abstratos. Mas note que isso é só uma questão de facilitar a manutenção e a organização. A forma que você fez não está errada. Caso essa opção não pareça boa, você pode optar por fazer algo semelhante do que você fez, que é utilizar os módulos, que dessa forma você acaba criando estilos mais isolados, o que impede com que sejam sobrescritos.
Agora sobre o Typescript, na parte de alterar o tema da página, duas sugestões/dicas. A primeira é sobre a forma que você utilizou a asserção de tipos, o as, ao invés de escrever da forma que você fez, você poderia considerar utilizar um type, como por exemplo: type DarkModeType = "light" | "dark", isso porque isso permitiria que você reutilizasse o tipo, assim podendo coloca-lo na declaração do State, e também na constante savedTheme, e também facilitando na manutenção, já que só precisaria fazer alterações dentro do tipo.
Já a outra dica, é que ao invés de utilizar string para definir o tema, você pode utilizar também booleanos, já que geralmente o tema tem valor binário, mas isso é mais uma questão de gosto e simplificação, pois facilitam muito na condição lógica.
E é isso. Fazia tempo que você não postava aqui, e agora que você postou deu pra ver que você progrediu bastante nesse último tempo, parabéns! Continue praticando e se aprimorando. Caso tenha ficado qualquer dúvida, já sabe, só comentar.
I’m most proud of how I managed to achieve a visually appealing and responsive layout that stays true to the original design specifications from the challenge. The project’s mobile and desktop views are well-optimized, and I enjoyed working with a mobile-first approach, which improved the layout transitions significantly. Next time, I’d focus more on optimizing the CSS further—potentially by leveraging CSS variables and mixins even more for reusable styles across breakpoints and elements, which would keep the codebase cleaner.
What challenges did you encounter, and how did you overcome them?One of the main challenges was handling the image swapping between mobile and desktop views. Ensuring that the correct image displays at the right breakpoint took some trial and error with CSS media queries, but I eventually achieved it by setting up distinct classes for the images and adjusting visibility based on screen width. Another challenge was designing the hover and focus states to feel intuitive and consistent across devices. Careful planning with CSS transitions helped create smooth interactive effects that look consistent.
What specific areas of your project would you like help with?What could I improve in my project and tips.
Olá Bruna, parabéns pela conclusão do projeto, ele ficou muito bem-feito, parabéns.
Uma dica sobre o HTML, ao invés de utilizar duas <img/>, considere utilizar uma <picture>, que dessa forma você consegue trabalhar melhor essa parte de alteração de imagens. Segue um link sobre: W3School - Picture.
Sobre a semântica do HTML, você utilizou uma <header> para a imagem, mas <header> serve para algo introdutório, a imagem por si só não é introdutória, o mais correto seria utilizar uma <figure>. E um pequeno erro, é a parte de p.card-name, o mais correto é que aqui fosse uma <h2>, pois esse PERFUME seria uma categoria.
E também a segunda secção do Card, no caso a secção onde estão as informações, ela não é <div>, mas sim um <article>, isso devido ao conteúdo dela ser independente e autocontido.
Edit: Não havia notado no momento, mas nesse trecho: <img src="images/icon-cart.svg" alt="Icon Cart" aria-hidden="true"> o alt deveria ser assim alt="", isso porque não damos alt para ícones e nem para imagens de fundo.
E é isso, parabéns pela conclusão do projeto, ele ficou realmente muito bom, continue praticando e se aprimorando. Caso tenha ficado qualquer dúvida quanto ao que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.
Olá Ana, parabéns pela conclusão do desafio, seu resultado está bem semelhante ao design proposto.
Notei que você não fez a parte de efeitos, por exemplo, quando se passa o mouse pelo card a sombra dele aumenta, e quando se passa o mouse pelo título, ele muda de cor e fica amarelo.
Uma dica sobre a responsividade, ao invés de fazer a responsividade dessa forma que você fez, que foi delimitando um tamanho mínimo e máximo, faça ela seguindo à ideia de mobile-first, pois isso facilita muito. No mobile-first você começa fazendo o design de celular, e depois vai adaptando para telas maiores, e para isso basta ir utilizando o @media (min-width: valor). Exemplo:
.container: {
width: 300px;
height: 428px;
}
@media (min-width: 768px){
.container: {
width: 360px;
}
}
Nesse exemplo, o valor do container só mudaria quando a tela chegasse à um tamanho específico, que nesse caso é 768px de largura.
Ainda falando sobre responsividade, nesse desafio não era necessário o uso da @media, ao invés de utilizar uma media query você poderia utilizar um clamp(min, base, max), exemplo: width: clamp(300px, 90%, 360px), que dessa forma você conseguiria controlar o tamanho do container sem grandes problemas. Obs.: Todos esses valores que passei são hipotéticos.
Agora sobre o HTML, eu notei que você utilizou uma <svg> inteira dentro do seu HTML, isso não era necessário, geralmente utilizamos dessa forma quando queremos editar o <svg>, agora quando queremos apenas que a imagem seja exibida, que é o caso desse projeto, nós podemos utilizar uma <img src="./assets/images/illustration-article.svg" alt="" />.
Ainda sobre o HTML, ele está com alguns pequenos problemas de estrutura. Sobre a estrutura, você utilizou várias vezes uma <div> para cobrir um texto, isso não era necessário, você poderia ter colocado apenas a tag de texto, sem a <div> cobrindo-a, e caso você quisesse que essa tag de texto tivesse um comportamento semelhante ao de uma <div> bastaria colocar um display: block no CSS.
Agora uma pequena coisa relacionada a semântica e acessibilidade, é a respeito desse trecho:
<a href="">
<p>Learning</p>
</a>
Não é necessário passar um tag <p> dentro de uma tag <a>, o mais correto seria:
<a href="">
Learning
</a>
Note que tem casos em que você precisa passar algumas coisas dentro da tag <a> como ícones, imagens ou algo do tipo, e para isso ficaria algo assim:
<a href="">
<i class="icone"></i>
Learning
</a>
Agora sobre a semântica, ela está bem-feita, mas só tem um pequeno erro que seria esse trecho: div.footer-article, ao invés de utilizar uma <div> o mais correto seria utilizar uma <footer>.
E é isso, novamente parabéns pela conclusão do projeto, continue praticando e se aprimorando. Caso tenha surgido qualquer dúvida quanto ao que foi dito, por favor, comente abaixo que tentarei ajudar da melhor forma possível.
Olá Luana, parabéns pela conclusão do seu Desafio, ele ficou muito bem feito.
Ele tem um pequeno erro de cálculo acredito eu, pois no Design quando inserimos a conta de 142.55, com 15% de gorjeta e para 5 pessoas, o resultado total tem que dar $32.79, mas no seu está dando $29.37.
Para corrigir, na sua função result(), você pode colocar esse trecho dentro dela, substituindo todo o restante:
// Pega o Valor da porcentagem já em Number
const porcentagem =
+document.querySelector(".selecionado")?.textContent.slice(0, -1) ||
+customPercentage.value;
// Calcula a gorjeta do preço da conta
const tipCalc = () => {
return (bill.value * porcentagem) / 100;
};
// Calcula o preço total por pessoa + gorjeta
const totalCalc = () => {
const gorjetaTotal = tipCalc();
const valorTotalComGorjeta = +bill.value + gorjetaTotal;
return valorTotalComGorjeta / qtdPessoas.value;
};
// Calcula o preço total da gorjeta e divide pela quantidade de pessoas
const gorjetaPorPessoa = (tipCalc() / qtdPessoas.value).toFixed(2);
const totalPorPessoa = totalCalc().toFixed(2);
tip.textContent = `$ ${gorjetaPorPessoa}`;
total.textContent = `$ ${totalPorPessoa}`;
Explicação breve, no Output você primeiro calcula o valor da porcentagem da gorjeta sobre a conta, exemplo:
conta = 100
gorjeta de 50%
resultado 100 * 50 / 100 = 50 que é a gorjeta
Depois você divide a gorjeta por pessoa, exemplo:
pessoas = 2
total gorjeta = 50
resultado 50 / 2 = 25 que é a gorjeta p/pessoa
Daí para descobrir o total, você faz conta (100) mais gorjeta (50), e baseado no resultado você o divide por pessoa (2), logo dando 75 no total.
Espero que não tenha ficado confuso minha explicação ou código, mas bom, é isso, parabéns pela conclusão do desafio, caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.
I want learn how to use CSS grid
Olá Vinicius, parabéns pela conclusão do desafio.
Notei que você não utilizou @media, o que é importante para fazer o design da versão para Desktop, você acabou criando a versão só para Mobile. Você pode utilizar o @media dessa forma por exemplo:
body: {
background-color: #d44;
}
@media (min-width: 768px){
body: {
background-color: #4d4
}
}
Nesse exemplo que forneci, quando você estiver em telas menores de 768px a cor do body será vermelha, e quando for 768 ou maior, a cor do body será verde, mas claro, você usaria isso com a estilização que você fez.
Sobre sua dúvida quanto ao Grid, recomendo que busque por alguns vídeos no youtube ou tutoriais na internet para pegar o jeito. Deixarei aqui alguns links que podem-lhe ser úteis.
Acredito que esses conteúdos que lhe enviei vão ser o suficiente para você iniciar com o Grid Layout nos seus projetos.
Caso tenha ficado qualquer dúvida quanto ao que foi dito, por favor, comente abaixo que tentarei ajudar da melhor forma possível.
Estou orgulhosa do meu código por ser responsivo e visualmente atraente. Os efeitos de hover melhoram a interação, e a estrutura é clara, facilitando a manutenção. Também me preocupei com a acessibilidade usando atributos alt nas imagens.
What challenges did you encounter, and how did you overcome them?Um dos principais desafios que enfrentei foi aplicar o filtro na imagem ao passar o mouse.
What specific areas of your project would you like help with?Gostaria de ajuda com o efeito na imagem no hover. Quero garantir que o filtro seja aplicado corretamente e que a imagem no meio apareça ao mesmo tempo que o filtro. Estou buscando uma maneira de sincronizar esses efeitos para que, ao passar o mouse, tanto o filtro quanto a imagem de overlay apareçam de forma fluida e harmoniosa. Qual seria a melhor abordagem para conseguir isso?
Olá Letícia, parabéns pela conclusão do projeto, ele ficou muito bem-feito e está extremamente próximo do design proposto, parabéns.
Sobre sua dúvida sobre como fazer o filtro (overlay) aparecer junto com o ícone, você pode fazer isso utilizando position, como é necessário mudar muito do CSS e HTML, eu irei abrir um Issues no seu Github desse projeto e lá mostrarei o código com comentários explicando. Você pode acessa-lo aqui: Github Issues.
Outra coisa que notei, é que no seu projeto, você utilizou CSS Internal, que é quando se utiliza CSS dentro do HTML, isso não está errado, mas é uma má prática, e eu percebi que você já tinha criado um style.css, o mais recomendado é que todas as estilizações fossem colocadas dentro desse arquivo.
Sobre seu HTML, ele está bem estruturado, mas está pouco semântico, e manter uma boa semântica é importante para melhorar a acessibilidade da página. Alguns trechos que podem ser alterados para ficarem mais semântico:
section.main_container pode ser alterado para <main>, pois é aqui onde está o seu conteúdo principal, e também porque sempre depois da tag <body> é comum utilizar a tag <main>.section.text_box pode ser alterado para <article>, pois o conteúdo aqui presente é autoexplicativo.section.creator_box pode ser alterado para <footer>, pois utilizamos o footer sempre ao fim de um determinado conteúdo.Ainda sobre acessibilidade, as tags alt possuem um leve erro, imagens de ícones não recebem textos descritivos, por exemplo, na sua imagem do ícone de olho, do ícone do ethereum e do relógio, você poderia utilizar um alt vazio, dessa forma: alt="".
E é isso, novamente parabéns pela conclusão do projeto, ele ficou muito bom mesmo, continue praticando e se aprimorando, caso tenha ficado qualquer dúvida sobre o que eu disse, por favor, comente aqui ou no Issues que eu abri no seu Github, que tentarei ajudar da melhor forma possível.
Initially, I tried to make the JavaScript code change the style.display of the thank you card from 'none' to 'block', but this interfered with the layout and the behavior of the flexbox.
When you hide the card with display: none, the element is completely removed from the page flow, which can sometimes break the layout when re-displayed with display: block.
Instead of using display: none and display: block, it is safer to use visibility and opacity to prevent the layout from breaking when the content is hidden and displayed.
I also had to adjust the position of the cards. I created a card-container div to wrap both cards and used position: relative. In the cards, I used position: absolute so that they occupy the exact same space within this container.
Olá Jade, parabéns pela conclusão do projeto, ele ficou muito bem-feito e se assemelha muito ao design proposto.
Sobre a dificuldade que você teve, eu tentei repetir ela e funcionou perfeitamente para mim, veja, eu alterei esses trechos no seu CSS:
.card-2 {
display: none;
}
.card-2.visible {
display: flex;
}
e no JS eu alterei esse trecho (Linha 31 e 32):
ratingCard.style.display = "none";
thankYouCard.classList.add("visible");
E também funcionou sem problema algum aparente. O que faz crer que talvez tenha tido problema no Layout devido ao uso de position.
Sobre você ter utilizado a position, isso não era necessário. Você poderia remover a div.card-container e deixar com que os elementos fiquem diretamente como filhos da <body>, daí basta remover a position dos cards, e assim os elementos estarão centralizados.
E uma coisa que eu notei, é que seu CSS está um pouco confuso, pois você acabou repetindo classes de forma desnecessária. Como por exemplo na linha 56 - 59 e 137 - 140, uma forma de corrigir isso seria agrupando ambos, que assim facilita na legibilidade do projeto.
Outra coisa que notei, foi o aninhamento no CSS, isso também não é necessário, por exemplo, ao invés de .card-2.visible daria para usar .visible. Isso vale também para trechos como esse: .card__buttons button.selected onde o .card__buttons poderia ser removido.
Agora uma dica quanto ao seu HTML, ele está bem estruturado, mas está muito pouco semântico, algumas tags poderiam ser alteradas para tags mais semânticas como por exemplo:
div.card__buttons poderia ser uma <section> pois ela está fazendo o papel de agrupar elementos relacionados entre si.div.card e div.card-2 poderiam ambas serem alteradas para <article> pois ambas são elementos autoexplicativos.div.card-container poderia ser alterada para <main> pois sempre após o <body> utilizamos <main> e também devido a esse trecho conter a parte principal da página.E é isso, novamente parabéns, continue praticando e se aprimorando, e caso tenha ficado qualquer dúvida quanto ao que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.
This is the second version of this project. I'm proud to be able to make a more organized, better and lighter project after receiving constructive criticism from the members here at Frontend Mentor. Next time I would better adjust the size of the solution with the proposed design.
What challenges did you encounter, and how did you overcome them?I found a great challenge to create overlapping elements and adjust them accordingly, it is still not fixed in my mind the best solution to do this. I had to watch other professionals in the field doing, researching, and testing the solutions that would work well for me. It was a lot of trial and error!
What specific areas of your project would you like help with?As it is the second version of this project, I already consider it closed, because I want to move on to the next work. I would like help with the issue of overlapping elements in the next solution, I still have difficulties.
Olá Felipe, parabéns pela conclusão do projeto.
Você citou ali que teve dificuldades em trabalhar com a sobreposição, mas nesse desafio, não era necessário utilizar posição, tanto que acredito que o problema esteja relacionado a parte branca do card, o fundo dele, correto? Bom, o problema que você está tendo é devido a estrutura do seu HTML estar levemente errada. O mais correto era você ter criado o card, e ter colocado os elementos como a imagem, os textos dentro dele, ou seja, você poderia utilizar sua div.container como o fundo do card.
Eu fiz algumas alterações no seu projeto, como foram pequenas, eu posso passá-las aqui, mas se desejar, eu posso refazer seu projeto, fazer as correções, comentá-las e enviar no Github.
As alterações que fiz foram as seguintes:
.container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
width: auto;
border-radius: 12px;
padding: 0.75rem;
gap: 1rem 0;
}
img {
width: 200px;
}
Também deletei o div.rectangle-qrc e div.qr-code, pois não eram mais necessários.
E é isso, novamente parabéns pela conclusão, continue praticando e se aprimorando, eu não dei algumas outras dicas pois quis focar na parte mais central do projeto, mas no próximo projeto que você fizer, tentarei ajudar com a parte de semântica HTML e acessibilidade. Caso tenha ficado qualquer dúvida, por favor, comente abaixo que tentarei ajudar da melhor forma possível.
Olá Erika, parabéns pela conclusão do projeto, ele ficou muito bom e quase semelhante ao design proposto.
Tenho algumas pequenas sugestões quanto ao seu HTML. Ele está bem estruturado, mas está com alguns pequenos erros de semântica, por exemplo.
<article> aqui o mais correto seria utilizar uma <figure>, pois é uma imagem autocontida, ou seja, é autoexplicativa sem depender do contexto da página.<nav> aqui o mais correto seria utilizar uma <ul> com <li>, isso porque a <nav> é utilizada para navegação interna dentro da página e/ou site, como por exemplo em um cabeçalho que tem alguns links que ao ser clicado leva para uma secção da página atual ou abre e vai para outra rota mas ainda dentro do mesmo site.Agora uma outra pequena coisa que notei foi que em telas de 320px, o card acaba ocupando todo o eixo horizontal da tela, isso não está errado, mas pode causar uma estranheza, para evitar de utilizar uma @media, você pode alterar o valor de largura do card, assim removendo o valor absoluto de 332px e colocando um limite, como por exemplo clamp(300px, 90%, 332px), que assim deixaria um espaçamento entre as bordas da tela e o card.
Obs.: Esses valores que passei no clamp() são hipotéticos, você pode experimentar outros valores. Pode ver mais sobre o clamp aqui MDN - CSS Clamp.
E novamente parabéns, continue praticando e se aprimorando, e caso tenha ficado qualquer dúvida quanto ao que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.
Me orgulho de completar a tarefa, tornando a minha solução o mais parecido possível. Para os próximos desafios, diferente desse, pensaria mais na estrutura html.
What challenges did you encounter, and how did you overcome them?Desafios : saber o que fazer primeiro, qual a melhor estrutura HTML e qual a melhor abordagem CSS. Superei : Fazendo pesquisas e estudando sobre CSS
What specific areas of your project would you like help with?CSS
Olá Emileny, parabéns pela conclusão do projeto, ele ficou muito bem feito e quase próximo do design proposto.
A imagem não está sendo carregada, pois você utilizou o path errado, o certo seria utilizar dessa forma
"./assets/images/illustration-article.svg"
Com esse ponto no início do caminho. O mesmo vale para a imagem de avatar que aparece na parte inferior do card.
Sobre seu CSS, ele está muito bem-feito, mas tenho algumas sugestões que podem te ajudar um pouco mais. Você tem alguns seletores que estão aninhados, como por exemplo:
.card .card-image{
/*Propriedades*/
}
Você não precisa fazer dessa forma, você pode pular o .card, e isso vale para outros seletores, como .card .card-detalhes, .card .author e .card .author .image-author.
Ainda sobre o CSS, notei que você não fez alguns efeitos de Hover que tem, como o do título mudar de cor, e da sombra do card aumentar de tamanho, para fazer isso você pode utilizar o pseudo-classe :hover, exemplo:
.card .card-detalhes h2:hover{
color: var(--clr-yellow);
}
Obs.: Esse trecho está abaixo do .card .card-detalhes h2.
Edit: Havia esquecido de dizer que você pode encontrar sobre a pseudo-classe :hover aqui W3School - Pseudo-class Hover.
Agora algumas dicas quanto ao seu HTML, a estrutura não está ruim, mas está um pouco redundante, por exemplo, essa div.container não era necessária, você poderia ter começado diretamente já pelo div.card. Também tem alguns problemas relacionados a semântica do seu HTML, e manter o HTML semântico é importante para questões de SEO e acessibilidade, vou mostrar algumas tags que podem ser alteradas para ficarem mais semânticas, veja:
div.card poderia ser alterado para uma tag <main>, pois dessa forma você estaria dizendo que é ali onde está o conteúdo principal da página, e também geralmente após uma tag <body> deve vir uma <main>.div.card-image poderia ser alterado para uma tag <figure>, pois é ali onde está contido a figura principal da página.div.card-detalhes poderia ser alterado tanto para <section> quanto para <article>, porque o conteúdo presente nessa parte é autoexplicativo e é correlacionado entre si.div.author poderia ser alterado para <footer>, pois representa rodapé do card, mas também o fim do conteúdo presente no card.Você pode ver mais sobre tags semânticas aqui W3School - HTML Semantic.
Também notei que você utilizou as tags de heading de forma não hierarquica, que no caso foi: h5, h2, h3, o mais correto é seguir uma hierarquia, começando sempre pelo h1 e ir descendo de heading em heading. Você pode ver mais sobre isso aqui W3School - Heading Tag.
E é isso, parabéns novamente, continue praticando e se aprimorando, e caso tenha ficado qualquer dúvida quanto ao que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.
🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊
🛠️ Built with:
That's my first advanced level project. I'm happy that I could finish, even though I wasn't able to get the filter to work 100% as it should. It's working, but it has some bugs I can't seem to fix right now. Despite that, it's working very well and I could practice a lot of Angular concepts while doing it.
Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟
If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome 😊
Olá Daniel, parabéns pela solução, ela está muito bem-feita.
Notei algumas coisas no seu projeto que gostaria de pontuar. Vou começar pela parte de estilização.
Quando se pesquisa apenas um país, por exemplo "Antarctica" e muda para o "Dark mode", acaba ficando uma parte branca na parte inferior da tela, isso está acontecendo devido a sua <div> filha do <app-root> não ter o mínimo de tamanho para min-height: 100vh. Me refiro a esse elemento: Elemento - Linha 27
E uma outra coisa que notei é na parte lógica, se você tentar acessar a "Antarctica" você verá que não irá aparecer nada e resultará num erro no console. Acredito que isso está ocorrendo, pois, a Antártida não retorna alguns dados, então tem que ser feito um tratamento de dados para que não dê esse erro.
E quanto ao comentário acima, realmente o Search não está funcionando de maneira correta, parece que ele não é acionado quando removemos alguma letra, por exemplo, digite "brazil" e depois apague até que fique só "bra", o certo era aparecer Brazil e Gibraltar, mas está aparecendo somente o Brazil.
E é isso, parabéns seu projeto ficou muito bom.
Olá Jade, parabéns pela conclusão do projeto, ele ficou muito bem-feito e se assemelha muito ao design proposto.
Notei que tem um pequeno problema de responsividade no seu projeto, tanto que ele fica em formato vertical até no máximo telas de 375px, mas em telas de 376px pra cima ele fica na horizontal, o que causa uma estranheza e fica um pouco "quebrado", para corrigir isso, você pode alterar na sua MediaQuery o valor de 375px para 768px.
Outra coisa que notei, foi que você utilizou position na sua <img/>, mas isso não era necessário, você poderia colocar apenas um width: 100%, que já seria o suficiente para deixar a imagem na forma correta e utilizar display: flex no div.container, que dessa forma você conseguiria ter um controle mais simples de alinhamento vertical e horizontal.
Agora sobre o HTML, a estrutura está correta, mas ele está muito pouco semântico, e manter um HTML semântico é importante tanto para SEO quanto para Acessibilidade. Vou mostrar alguns elementos do seu HTML que poderiam ser alterados para ficar mais semântico.
<div class="container"> poderia ser alterado para <main>, sempre depois do <body> o mais correto é vir uma tag <main> e também pelo fato de que nela está contida todo o conteúdo principal da sua página.<div class="container__image"> poderia ser alterado para uma <figure> pois essa é a imagem principal da sua página.<div class="container__card"> poderia ser alterado para <article> pois o conteúdo presente nessa secção é autoexplicativo e independe do resto da página.E é isso, novamente parabéns pela conclusão do projeto, caso tenha ficado qualquer dúvida ao que mencionei, por favor, comente abaixo que tentarei ajudar da melhor forma possível.