I'm proud of advancing my web programming studies and putting my knowledge into practice in a real project.
What challenges did you encounter, and how did you overcome them?At the moment I have not encountered any difficulties
What specific areas of your project would you like help with?At the moment there is no table for the next project
O projeto ficou legal mas ainda há coisas para melhorar.
Dicas HTML
• Seu projeto deve conter uma tag <h1> por questão de acessibilidade. Você não pode criar um site e não fazer uso de pelo menos uma tag <h1>. Outra regra da hierarquia dos títulos é que você não pode pular... você não pode usar h2 sem ter usado h1, você não pode usar h3 sem ter usado h2... assim por diante.
Dicas CSS
• Você não usou as cores fornecidas do Frontend Mentor. A cor do título não é para ser um preto escuro desse jeito. Não é recomendado que, mesmo se for um projeto pessoal, utilizar um preto tão escuro, um preto 100%. Utilize a cor que o Frontend usou no Design original, é um azul escuro ou não deixe tão preto assim.
• No paragrafo, a cor está muito clara, o contraste está muito baixo. Para você ter ideia... mesmo que tu aumentasse o tamanho do texto, deixasse em negrito e tudo, ainda estaria muito abaixo do recomendado de nível de contraste. Tem que procurar deixar mais escuro. Você pode testar o contraste aqui https://webaim.org/resources/contrastchecker/
• Não sei se foi proposital mas... você adicionou uma margem no body, que criou uma borda branca ao redor de todo o site, além disso, criou uma barra lateral. Eu recomendaria que tirasse essa margem. Não sei qual foi a sua ideia, me explique ai, sei lá
I managed to do it in a short time,
What challenges did you encounter, and how did you overcome them?I had a little trouble centering the buttons at first.
What specific areas of your project would you like help with?nothing, I think it's almost perfect
É... de fato... o projeto ficou quase perfeito, mas há algumas mudanças que podem ser feitas. Não sei se você fala português mas por ser Olinda - PE, acho que seja brasileiro mesmo.
Algumas dicas HTML
• Primeira coisa é respeitar a hierarquia de títulos. Todo site deve conter um <h1> ( até aqui tudo bem ), além disso... você não pode pular e usar um <h3> direto, não pode. Para usar um h3, você deveria ter utilizado pelo menos um <h2> anteriormente, e assim por diante. É h1, h2, h3, h4, h5, h6, na ordem, sem pular.
• Você pode usar a tag <main> ao invés da div com a classe "card".
• Não é recomendado utilizar a tag <button> para os botões que te levem para sites externos pois para criar um botão que leve para links externos como GitHub, Instagram, LinkedIn, etc., a melhor abordagem em HTML é usar a tag <a> estilizada como um botão. Essa abordagem é recomendada porque a tag <a> é semanticamente correta para links. Em resumo... tem que fazer uso dessa tag e estilizar ela com CSS como se fosse uma <button>
Me orgulho da Paciência...
What challenges did you encounter, and how did you overcome them?Algumas partes quando precisei posicionar os containers, mas acabei conseguindo chegar onde gostaria...
Algumas diquinhas...
<section> para englobar seu h1 e o parágrafo, acho que seria mais semântico utilizar uma <header>Foco, dedicação e sempre praticando. Usaria mais ferramentas.
What challenges did you encounter, and how did you overcome them?Encontrei algumas estilizações que não conhecia ainda, acabei procurando de várias maneiras para chegar ao resultado final.
What specific areas of your project would you like help with?Não entendi a parte das box-shadows que o layout contém, acabei não colocando nada relacionado a isso, ou talvez não sejam sombras ao redor do container.
alt das imagens pois a própria tag já convém essa informação, já passaria para alguém com deficiência.<div class="decoracao">, é melhor utilizar a tag semântica <hr>```. Hr significa Horizontal Rule, onde o propósito dela é ser uma linha.Espero ter ajudado!
Eu não entendi direito o bug, mas na imagem do card quando coloquei border-radius com padding a imagem o border-radius não funcionou não sei o motivo. Então para resolver isso eu coloquei margin de 2rem e só assim o border-radius funcionou, não sei se é o correto pois seria preenchimento interno, ou seja, o correto era para ser padding!
É porque é uma tag de imagem. Não é uma div, é uma imagem. Você não deve esperar conseguir botar padding numa imagem porque tipo... geralmente ela tem um tamanho definido e quando você aplica padding você teoricamente obriga ela a mudar o tamanho definido dela... tipo... pode causar bug. Seria melhor só diminuir o tamanho da imagem e posicionar. Mas dá para fazer o que você queria de outra forma
Eu coloquei a imagem dentro de uma tag <section class="image-section"> que representa a seção de imagem do card. Dentro da tag eu apliquei os seguintes estilos:
.image-section {
display: flex;
justify-content: center;
padding-top: 2rem;
padding-bottom: 2rem;
}
Há maneiras diferentes de fazer mas é assim que eu faria. Você ainda pode adicionar padding-right e padding-left mas vai reduzir o tamanho da imagem sem causar bug. Porque você não está obrigando diretamente a imagem a mudar de tamanho, só está dizendo quanto de espaço ela pode ocupar
Essa explicação do possível bug é só usando minha lógica, não sei como as coisas funcionam por debaixo dos panos de verdade. Geralmente quando algo assim acontece comigo, eu só tento de outros jeitos mesmo.
I achieved this result using Tailwind for the first time, I also got the exact length x width for the container.
What challenges did you encounter, and how did you overcome them?I spent 4 hours trying to deploy my project to Vercel only to find out I had --watch in the package.json
I also spent roughly 45 mins reading through TailwindCSS docs and at the same time working on the project, it was challenging at first but I got everything in a short time!
What specific areas of your project would you like help with?I somehow forgot how to center the container and have margin at the top like in the design, I tried everything.
The margins and paddings, like for example, I don't know how to put space between the markers and text in TailwindCSS. You guys are going to notice the vast difference between my solution and the desired design.
In addition, making the Nutrition table, I used gaps to align the items but I feel like that was a horrible practice.
You did it great! I'll try to answer your questions.
<body> tag has the same height as all of your content. You can fix this with min-h-screen or something like that.<li class="pl-10">To complete the challenge.
What challenges did you encounter, and how did you overcome them?Align qr-code.
Use Flexbox.
What specific areas of your project would you like help with?About the use of tag section. Is It the best tag to this case, or I should use div?
The id card is a good name or should be more specific? Like qr-code-card
Yo! So... I'll try to answer your questions
<section> is wrong. When our project needs a <section>, we expect more than one. For example... image section, text section, etc... You should at least wrap your <div class="attribution"> with a <section>. By doing so, I think your project will still be wrong because your card should be your <main> tag and you should use <footer> instead of <div class="attribution">. Header and footer should not be included inside the <main> tag. Summing up, remove the <section> tag and your <footer> should be outside the <main> tagEm ter conseguido colocar os dados dinamicamente utilizando o arquivo .json
What challenges did you encounter, and how did you overcome them?Em colocar as cores dos títulos e das caixas dentro de summary de maneira dinâmica, mas coloquei o código das cores dentro do próprio arquivo json
What specific areas of your project would you like help with?Qualquer ajuda é bem vinda :D
Projeto ta top, vou só dar algumas dicas e explicações sobre alguma coisas.
Dicas HTML.
<div> com a classe "info", é mais semântico utilizar <section><button type="button">. É uma boa prática e evita que o padrão possa ser do tipo "submit" que é botão para envio de formulário.Diquinha CSS
aligning the contents so perfect after learning about flexbox
What challenges did you encounter, and how did you overcome them?at first i can't center divs but after researching on Google i got some idea but still can't fix it and i check the width of body tag because i set it as flex and found out the width was follow the contents inside so i set it as 100vh and fixed everything
What specific areas of your project would you like help with?nothing
If you are struggling with flexbox, I suggest you learn from Flexbox Froggy
You can still improve your code a little bit.
<main> instead of a <div> with the class "card". This way your HTML is more semantic and acessible.<p> with the class "header", you should use <h1>. Every site must contain a <h1>. This way you are going to improve your SEO, Accessibility, Semantics... H1 tags are used to indicate the primary topic of your webpage to visitors and search engines.This time I was able to write and README file for the project, which I have never done before.
What challenges did you encounter, and how did you overcome them?It was very simple.
What specific areas of your project would you like help with?Any advise on how to improve it it's appreciated.
The project is almost perfect... but I have some suggestions
<main> instead of a <div> with the class "card". This way your HTML is more semantic and acessible..
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Algumas dicas HTML.
<section> com a classe "content" a tag <main> se enquadra melhor e fica mais acessível.<div> uma com a classe "content-img" e a outra "context-text", agora sim você pode usar <section> que combina mais e evita o uso excessivo das div<h1> então você não deve usar <h2>. É necessário que todo site contenha pelo menos uma tag h1, seja ela visível ou não. Não use h2 enquanto não usar h1, não use h3 enquanto não usar h2, etc...<button type="button">Dica CSS
.context-text button:hover {
transform: scale(1.05);
}
.context-text button {
...
transition-duration: 0.2s;
}
Nada a declarar
What challenges did you encounter, and how did you overcome them?Nada a declarar
What specific areas of your project would you like help with?Nada a declarar
Nada a declarar... brincadeira!
Dicas HTML
justify-content: center; ao invés de um margin auto na main.<article> pois o conteúdo dentro dele não é independente, não funciona fora do contexto do site. É melhor usar <section><h1> ao invés de <p> para o texto "Improve your front-end skills (...)". Todo site deve conter um h1 por questão de acessibilidade. Não importa se o h1 fique invisível ou não, tem que ter.Dica CSS
font-size ao invés de usar px. Essa medida é mais flexível, adaptável, se molda com base nas preferências do usuário e etc... Você pode entender mais sobre aqui https://gabcarvalhogama.com.br/css/qual-unidade-de-font-size-usar-px-rem-em-vw/