Skip to content
OverviewSolutions
4
Comments
8
Irwing
@Irwing-Dev

All comments

  • Irwing•200
    @Irwing-DevPosted 9 months ago

    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!!👋👋

    0
  • Irwing•200
    @Irwing-DevPosted 9 months ago

    Hi Pulfer! 👋

    Your solution is good!

    However, there's one thing I'd recommend you add:

    • The site has a horizontal and vertical scroll bar. You can improve this, you just need to add a height value to your container class:
    .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!!👋👋

    0
  • RodrigoOliveira•190
    @Rodrigo-Oliveira-de-MattosSubmitted 9 months ago

    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

    Gráfico de barras interativo - Com JSON

    1
    Irwing•200
    @Irwing-DevPosted 9 months ago

    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:

    • A tag main está com uma escala muito alta na resolução de desktop, não dá para ver direito a seção onde está a logo e o saldo, parece que está cortado. O site também está com uma barra de rolagem, sendo que o card não contém tanta informação assim, recomendo que você altere a propriedade css do main de:
    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
    1
  • Irwing•200
    @Irwing-DevPosted 9 months ago

    Hi AmirHosein! 👋

    I liked your solution!!

    There's one thing I recommend you improve:

    • In mobile resolution, the footer appears on the middle of the container, which bad for viewing, you can change the body attributes to:
    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 👋👋

    0
  • Irwing•200
    @Irwing-DevPosted 9 months ago

    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
    0
  • Irwing•200
    @Irwing-DevPosted 9 months ago

    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
    0
  • Anne Mariah Eyidi Priso•10
    @nanyalamaisonSubmitted 9 months ago

    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)

    QR code HTML CSS Flexbox

    1
    Irwing•200
    @Irwing-DevPosted 9 months ago

    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
    0
  • Irwing•200
    @Irwing-DevPosted 9 months ago

    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
    1