@Deo-Thecoder
Submitted
All feedback is welcome, thank you in advance
@Irwing-Dev
@Deo-Thecoder
Submitted
All feedback is welcome, thank you in advance
@Irwing-Dev
Posted
Hi Deomar! 👋
As you use github pages, your index.html doesn't appear on the front page. github also uses files with a MARKDONW (.md) extension to show elements on the site (that's why we can use html tags inside it), because github recognizes it like this, we don't see the QR Code component on the front page, but rather what is written in README.md, so that we can see the QR Code component we have to travel to "https://deo-thecoder.github.io/DeosSimpleCoding/qr-code-component-main/QR-index.html".
I don't know if this was your intention from the beginning or not, if it was, I apologize, but I recommend that you make it more explicit so that others can know about it and not get lost. If this was not your intention, I recommend that you place all the files from the "qr-code-component-main" folder in the parent folder, where README.md is located, so that github will recognize index.html first and the image files will continue to render properly without path problems.
An additional task you could do would be to place the README.md files in a separate folder, so that we also avoid other unnecessary problems.
Now, about your QR Code component, it's amazing! Good job! But I recommend you take a look at what I said above.
I hope this has helped, I wish a good luck in your studies and bye bye!!👋👋
@justPulfer
Submitted
Feedback would be appreciated.
@Irwing-Dev
Posted
Hi Pulfer! 👋
Your solution is good!
However, there's one thing I'd recommend you add:
.container {
// Your CSS
height: 95%;
}
This makes the scroll bar disappear and the card retains its great appearance on the site
I hope this helped.
Other than that, good job, I wish good luck in your studies and bye bye!!👋👋
@Rodrigo-Oliveira-de-Mattos
Submitted
Primeiro projeto que eu consigo usar JSON por conta própria. Estava tendo alguma dificuldade em usar arquivos JSON, então escolhi esse projeto na intenção de melhorar nesse quesito, e funcionou bem, por ser um projeto simples
@Irwing-Dev
Posted
Olá Rodrigo! 👋
Gostei da sua solução usando HTML e JavaScript puros para criar esse gráfico de barras interativo. Normalmente utilizamos bibliotecas para fazer essa responsividade.
Tem apenas um ponto que eu recomendo que você melhore:
main {
// Seu CSS
scale: 1.5;
}
Para:
main {
// Seu CSS
scale: 1.2;
}
Essa escala permite que o main fique em um bom tamanho, cobrindo todo corpo do site, mas sem deixar a barra de rolagem e o aspecto de que tem algo faltando. 😉
Espero que isso tenha lhe ajudado, desejo-lhe boa sorte nos seus estudos, até mais! 👋👋
Marked as helpful
@plutuxx
Submitted
Feel free for any feedback 😊
@Irwing-Dev
Posted
Hi AmirHosein! 👋
I liked your solution!!
There's one thing I recommend you improve:
body {
//Your CSS
flex-direction: column;
justify-content: space-evenly;
}
.attribution {
//Your CSS
position: relative;
margin-bottom: 0px;
}
And it would be nice if you added a function to the button in the result-container section to return to the cotainer section - this is a suggestion 😉.
I hope it helps! Other than that, great job! I wish you good luck in your studies and see you later 👋👋
What opinions do you have about my design? Does it make sense to you how I executed the form validation?
thanks coworkers!
@Irwing-Dev
Posted
Hi Sergio!
Overall, its design is good, but there are a few things you can improve.
The footer - I understand that you wanted to pin the footer, but when we scroll up and down, the blank letters and the red letters get in the way of reading, especially in the mobile version, I recommend removing the position fixed.
Image resizing – At desktop resolution, the image doesn't go all the way to the end, I recommend that you either make the image bigger or smaller the card. In tablet resolution the image is at the top, but in a smaller size, it does not give a cool look to the user, you can increase the height (of the image) or put it at the top (equal to the resolution of the cell phone). To give you an idea of the tablet's resolution, it's between 648px and 1024px.
Finally, about the validation of your form, it's good, I didn't find any problems, in case you want to know more about forms validations, see this api: email-verification-validation-api from Absctract API. You can get other APIs for form validation in Free for Devs - Forms
I hope I've helped you, good luck in your studys, bye bye👋👋
Marked as helpful
@arun99998888
Submitted
@Irwing-Dev
Posted
Hi Arun!
Your QR Code image doesn't show up, I recommend you delete the "qr-code-component-main(1)" folder and change the import to:
<img src="C:\Users\_ARUN_OP_\Downloads\qr-code-component-main\images\image-qr-code.JPG" alt="new image description" />
Or delete the "qr-code-component-main(1)" and "qr-code-component-main" folder and move the images to the same folder where the file is index.html - Recommended
I hope this helped, if you have any questions, ask me👋👋
Marked as helpful
What i found the most difficult as a beginner is the positionning of elements on the body and the card container. I fear that my code is not that good and that readable. what are some best practices when building any website? (where do i start, how do i organize my code)
@Irwing-Dev
Posted
Hi Anne! 👋
Answering your question, I recommend you to check out these articles to learn tehory:
SEO Best Practices: 10 Ways to Boost Organic Rankings & Traffic
Writing Clean Code: Best Practices and Principles
But, you're on the right track, your element classes are easy to understand and your comments are in harmony with your code, any programmer who looks at it will be able to understand it easily, although, I would be careful about always putting comments at every step. As you're just starting out, putting these comments in is good for you, so much so that I'd even recommend it, but you also need to prioritize the clarity of the code itself, so to know how to do this you need to ask yourself: "What is this line doing? Would any programmer be able to understand this without me having to give them any additional information?" and get the answer from the code itself. This practice is related to the principles of clean code, there are many articles on this, I recommend that you research the subject.
I hope I've helped you and I wish you good luck with your studies, see you later!👋👋
Marked as helpful
pt-br:
Eu não consegui fazer uma animação fluída para o conteudo aparecer e desaparescer, alguem tem alguma sugestão?
en:
I couldn't create a fluid animation for the content to appear and disappear, does anyone have any suggestions?
@Irwing-Dev
Posted
Você pode adicionar uma estilização no elemento "c-faq__response" chamada transition.
Vá para o seu main.css e adicione:
.c-faq__response {
// Suas estilizações
transition: all 0.7s;
}
Isso já serve para dar uma animação mais suave ao abrir/fechar os FAQs. você também pode alterar o valor do transition para ficar mais lento ou mais rápido, vai testando e decide qual acha melhor. 👍
PS.: O card não está muito agradável em uma primeira vista, recomendo colocar um box-shadow para dar um aspecto flutuante, tipo assim:
.c-faq__card {
// Suas estilizações
box-shadow: 0px 30px 34px rgba(0, 0, 0, 0.116);
}
Espero que isso tenha o ajudado, boa sorte e bons estudos.✨👋
Marked as helpful