Skip to content
OverviewSolutions
17
Comments
10
João Víctor de Araujo Lima
@xuaun

All comments

  • DevDiiasTr•60
    @DevDiiasTrSubmitted 17 days ago
    What are you most proud of, and what would you do differently next time?

    O que mais me orgulho no desenvolvimento desse blog para o desafio é a organização do código e a aplicação eficiente dos fundamentos de HTML e CSS. Consegui criar um design responsivo e estruturado, garantindo uma boa experiência de leitura para os usuários. Além disso, foi uma ótima oportunidade para aprimorar minhas habilidades em estilização e boas práticas de desenvolvimento.

    What challenges did you encounter, and how did you overcome them?

    enfrentei dificuldades na escolha de uma tipografia e esquema de cores que garantissem boa legibilidade e uma estética agradável. Resolvi isso experimentando diferentes combinações e testando o contraste para garantir uma boa experiência de leitura.

    What specific areas of your project would you like help with?

    mbora tenha estruturado bem o layout com HTML e CSS, gostaria de dicas sobre como aprimorar a estética e tornar a navegação ainda mais intuitiva.

    visual studio code,html5,sass,git e github

    #sass/scss
    1
    P
    João Víctor de Araujo Lima•350
    @xuaunPosted 17 days ago

    Opa, DevDiiasTr,

    Parabéns pelo projeto, você está indo muito bem!

    Espero que meus comentários consigam te ajudar nessa jornada :)

    • Achei que seu projeto ficou muito parecido com o original, a única coisa que eu sugeriria observar é o background-color que está um pouco diferente.
    • Parabéns pelo uso do alt na tag <img>, mas uma sugestão é não usar - como separador, mas sim espaços, para que tenha uma melhor leitura por leitores de tela.
    • Gostei bastante de como você separou os seus arquivos .css. Eu não entendo ainda de .scss (então posso estar falando besteira), mas acho que você não precisa importar os outros arquivos de estilo no seu principal se eles todos estiverem sendo chamados na sua página .html (falo isso porque vi que você importou no seu arquivo .css).
    • Parabéns pela responsividade no seu projeto! Continue assim. Meu único comentário sobre isso é que pra mim, em telas de 320px, a página não ficou 100% dentro da tela, minha sugestão é levar em consideração esse tamanho também nos seus próximos projetos.
    • Sobre o que você pediu de ajuda aqui, uma coisa que me ajudou foi estudar metodologias de nomeação de classes, como a metodologia BEM. Sinto que isso me ajudou bastante a repensar como eu uso e nomeio minhas classes nos meus projetos.

    Mais uma vez, parabéns pelo projeto e continue assim, viu? :)

    Marked as helpful
    0
  • P
    João Víctor de Araujo Lima•350
    @xuaunPosted about 1 month ago

    Hey Tremy-t,

    I believe that your solution reflects the original design very well. Overall, it is a little smaller (from the screenshot), but the elements are present and in great proportions.

    Some comments that I have:

    • Your .button is missing the :hover state (and the cursor: pointer too)
    • I believe that your page is missing an h1, you can check this in the accessibility report that the frontend mentor itself generates, it is important to include these corrections in future codes
    • Your code is not very well indented, I know that in VS Code there is a shortcut (Shift + Alt + F) to indent the document (I don't know if this shortcut exists in other editors)
    • In your index.html I felt that you could have used more semantic tags to replace some <div>s, such as <main> or <section>

    Keep up the great work in your codes, and happy learning!

    1
  • P
    João Víctor de Araujo Lima•350
    @xuaunPosted about 1 month ago

    Hey Ruben,

    Congratulations on the project! I think it's very good overall. 👏

    I also thought it was cool how you handled the two different .hero for tablet/desktop. I used another strategy, using :before and :after in style.css, I don't know if it's a better strategy, but I thought I'd share it with you.

    I noticed some details that you might not have noticed:

    • I missed a margin-top or something like that at the beginning of your page
    • The v1.3 text on the buttons was a different color in the design
    • The footer on the desktop version was supposed to have flex-direction: row

    But those were just details, congratulations on the project again!

    0
  • P
    João Víctor de Araujo Lima•350
    @xuaunPosted about 1 month ago

    Hey @praises1,

    Congratulations on your work on this challenge! I hope you learned a lot from it. 🎉

    I'll add some comments here and I hope they help you in your next challenges. 😄

    Overall

    The main features that caught my attention that the solution is different from the original design are:

    • In style.css, on line 89, in .cards.gray you probably forgot to set the background-color to the correct color.
    • In style.css on line 45, in .container, or on line 137, with @media (min-width:1200px), I believe you should have vertically centered your display: grid too.

    Some details

    Some details I noticed were:

    • I have the impression that the width of your .cards are a little smaller than in the original design.
    • I believe that the border-radius of your .cards are also larger.
    • The img of the .cards are also larger, and two of them (Daniel and Patrick) should have borders of different colors.
    • I also had the impression that your bg-pattern-quotation.svg image is smaller than in the original design.

    Other comments

    • I believe that in your GitHub repository it would be cool if you stylized your README.md so that people know the project you developed and the challenges you encountered in it.

    I hope my comments here help you and that you evolve a lot in this front end trajectory.

    Marked as helpful
    0
  • P
    João Víctor de Araujo Lima•350
    @xuaunPosted about 1 month ago

    Hello Mateus,

    Congratulations on your work on this project! I believe you did very well. I hope my comments help you evolve in your future projects.

    Main difference

    The main point that caught my attention was the lack of padding or padding-top in your body.

    Code semantics

    I saw that you included all the texts in your code as h1-h5, I believe that this is not the best choice for the semantics of your code. One suggestion would be to leave your entire title as h1 (and not part h1 and part h2) and the titles of the cards as h2 and everything else as p. In the main title you could have used another semantic tag to differentiate the texts, such as <span>, <b> or <strong>.

    Other comments

    Other things I noticed were:

    • Shadow color slightly different from original design
    • Main title smaller than in original design
    • Some card size smaller than in original design
    • Spacing/margin between <header> text and cards smaller than in original design
    • Top collored border of cards larger and more curved than in original design.

    Keep it up and you will go far in your future projects!

    0
  • P
    João Víctor de Araujo Lima•350
    @xuaunPosted about 1 month ago

    I think your project is empty, because both in the solution preview here and in your github repository / live page, there was nothing to see in your HTML code. If you do this project in the future, or if there was a mistake in the link you sent here, I hope you can update it so we can see your work :)

    Marked as helpful
    0
  • Konrad•140
    @ExtendoGHSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Key Achievements:

    I am particularly proud of positioning the lists. In the project, there is an issue with the space between the number and the dot, which is quite tricky to handle in CSS. Thanks to AI and Google, I was able to solve this problem effectively.

    Another success is the responsiveness of the project. The page adjusts smoothly to different screen widths, which was a significant challenge for me.

    I am also proud of styling the table, as it was my first time working with such an element. With the help of AI and Google, I managed to achieve the desired result.

    Future Plans:

    Next time, I will know how to position the lists more quickly, which will save me time on similar projects.

    What challenges did you encounter, and how did you overcome them?

    Challenges I Encountered:

    The biggest challenge was positioning the lists, as there was a margin between the text and the numbering in the project. After several attempts and thorough research, I managed to resolve this issue.

    Another difficult task was creating and styling the table. It was my first time doing this, but again, with the help of AI and Google, I was able to overcome this challenge.

    What specific areas of your project would you like help with?

    Please Check:

    1. List Styling: Was it done correctly? Can it be done faster and more efficiently?
    2. Responsiveness: Is the page fully responsive?
    3. Overall Grammar, Readability, and Code Understanding: Is the code easy to understand and well-written?

    Recipe Page Using Flexbox

    1
    P
    João Víctor de Araujo Lima•350
    @xuaunPosted about 1 month ago

    Hey Konrad,

    Well done in this project! I'm happy to know that you found ways to solve the challenges you have encountered.

    Answering your questions:

    1. List Styling
    • It all seems right to me
    1. Responsiveness
    • Here too, all seems right
    1. Overall Grammar, Readability, and Code Understanding
    • I think you could have used other tags besides <div> to organize your code, for example <section>.

    Also, I think you forgot some <strong> in your table (all items in the second column).

    About your repository, I think it would be great if you had styled your README.md to help people understand your code and project. Maybe you could try styling it in future codes. 😄

    Marked as helpful
    1
  • P
    Isioma Pamela Tàlàbí•70
    @isioma-talabiSubmitted 2 months ago
    What specific areas of your project would you like help with?

    There seems to be a weird challenge with the avatar. In my solution, the avatar is centered. But in the comparison display, it seems to be aligned to the left instead. Please I would appreciate any help I can get.

    Social Links Profile with CSS

    1
    P
    João Víctor de Araujo Lima•350
    @xuaunPosted about 1 month ago

    For me, your avatar is centered correctly (both on the live page and in the solution screenshot).

    I would also try to increase the specificity in the CSS, for example:

    /* Your code */
h1 {
  font-family: "Inter-SemiBold";
  text-align: center;
  /* CODE */
}

    /* Using specificity */
.social-links-container h1 {
  font-family: "Inter-SemiBold";
  text-align: center;
  /* CODE */
}

    You can use a Specificity Calculator to help you understand how this work on CSS.

    About your repository on GitHub, I think it would be nice to have styled your README.md to help those who enter it to see your project and your solution.

    0
  • P
    João Víctor de Araujo Lima•350
    @xuaunPosted about 1 month ago

    I believe that from the screenshot, your solution achieved the final design. The only essential detail that was left out was the border of the card.

    In code development, I think it would be nice to have a README.md file in your repository to help people understand your code/project, and also have more meaningful names for your commits on github.

    In your .attribution div, I think you should add your name (or something like that) in place of "Your Name Here" on your index.html.

    0
  • Andrew Nascimento•10
    @AndrewmnascimentoSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I most proud of use flexbox correctly

    What challenges did you encounter, and how did you overcome them?

    the hardest challange is center this div, but in one study day about flexbox i do

    What specific areas of your project would you like help with?

    Center Div's

    Pagina Responsiva de Qr Code com Flexbox em Html e Css

    2
    P
    João Víctor de Araujo Lima•350
    @xuaunPosted about 2 months ago

    You probably had trouble centering the div because you didn't put a height: 100vh and the display:flex on your <body> (which is the parent element of your .Centro. A suggestion for centering would be to add the style to the body:

    body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
    0