Skip to content
OverviewSolutions
3
Comments
4
Léo Ansélmo
@leonardoanselmo

All comments

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarSubmitted 12 months ago

    Hi there 👋, I’m Melvin, and this is my solution for this challenge. 🚀

    🎁 Features:

    • Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
    • Progressive Web App (PWA) support. 📱🌐
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. 💻
    • Resemblance with the original design. 🎨

    🛠️ Built With:

    • TailwindCSS. 🎨
    • npm - Prettier. 💻

    Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

    Thank you. 😊✌️

    Skilled e-learning landing page (Tailwind CSS)

    5
    Léo Ansélmo•50
    @leonardoanselmoPosted 9 months ago

    waw, great job mate

    0
  • CodeNinja585•80
    @CodeNinja585Submitted over 1 year ago

    It was a very exciting and challenging task, when I got stuck, I had to go back and review my code for any missing div tag and other lapses. I also found it difficult to deploy this sight it turns out I forgot to add my images file. 😂

    order-summary-component-main

    1
    Léo Ansélmo•50
    @leonardoanselmoPosted over 1 year ago
    • I looked at your HTML and CSS, I noticed that the <div> tag was missing, the others could be <div> without problem, it would look better maintenance. Take a look at this link.

    FEDMentor.dev

    • Put the CSS in a folder

    • Do not use the px for sources is advisable to use the REM, as good practice, in the link I sent you, have other articles that explains better.

    • Make your HTML first on paper, drawing it, so you already anticipate the code.

    • I would not use the position to fix the layout. It is simple and you can use GRID or FLEXBOX and it would flow better.

    • The CTA button when you pass the mouse loses the mouse pointer, test it before, so you would avoid another commit to GIT.

    • Leave the height as min-height: 100vh, so you can visualize on a single screen.

    • The responsive is broken to width: 375px

    Other than that it's great!

    0
  • Léo Ansélmo•50
    @leonardoanselmoPosted over 1 year ago

    Olha leva isso como sugestão apenas:

    1 - Deixa o card maior na próxima vez.

    2 - A cor do título não é totalmente preto. Lembre-se que uma boa prática na web é ter tonalidades de preto/cinza.

    3 - O espaço negativo (margin ou padding) no parágrafo deveriam ser maiores, dê descanso na leitura para os seus visitantes, ninguém que acessar um site e achar que é um livro.

    4 - O footer joga para o fundo da página ou retira. A visão tem que ser no principal que é o CARD. O meu mesmo ficou péssimo quando acesso mobile, vou consertar isso.

    5 - Usa apenas width, pois você já direcionou o flex para coluna.

    6 - Cria as cores como variáveis. Fica mais legível o código.

    7 - Se todos os elementos estão em uma direção, escolhe uma margem apenas, top pu bottom, pois mostra uma lógica no seu projeto e reflete no código que você pensou.

    8 - Caso queira diminuir o H1, usa outro H. Lembre-se que é um CARD e pode fazer parte de um site que já tenha o H1. Se você tivesse estilizado com classes, não teria esse problema.

    No mais ficou ótimo. Continua assim! Meus parábens.

    Marked as helpful
    0
  • Léo Ansélmo•50
    @leonardoanselmoPosted over 1 year ago

    I looked at your challenge and if you accept some suggestions, here goes:

    1 - Try to put the images, css, js (if any) in your folder next time. Code and structure are more readable.

    2 - The challenge is simple, but you need to think about how you will decide to solve it. Leave everything as FLEXBOX, as it is only one direction and one column.

    3 - Indent the CSS code.

    4 - The padding-top was out of proportion with the others.

    Anyway, you're on the right path.

    0