Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
3

Renan Guilherme

@codebyneanderBrazil30 points

Brasileiro, jovem, estudante de programação & Futuro Desenvolvedor Full-Stack. Vamos nos conectar? 🔗linkedin.com/renan-guilherme/

Latest solutions

  • Desafio #3 | Página com Hover e Focus | Social links Profile


    Renan Guilherme•30
    Submitted 18 days ago

    Em nenhuma, no momento.


    1 comment
  • Página Estática | Blog Preview Card | flexível utilizando CSS Flexbox


    Renan Guilherme•30
    Submitted 18 days ago

    Nesse projeto específico, em nenhuma.


    1 comment
  • Página Estática flexível utilizando CSS Flexbox


    Renan Guilherme•30
    Submitted 19 days ago

    Em nenhuma, está tudo bem por enquanto!


    1 comment

Latest comments

  • aldebaran•30
    @ald3b4ran
    Submitted 18 days ago
    What are you most proud of, and what would you do differently next time?

    a lot of research

    Social Links

    1
    Renan Guilherme•30
    @codebyneander
    Posted 18 days ago

    A solução apresentada por esse usuário, com todo respeito, falha justamente naquilo que o desafio da Frontend Mentor mais valoriza — atenção aos detalhes, acessibilidade e design responsivo e polido. Aqui vai um feedback técnico e direto, com sugestões para qualquer iniciante que queira realmente evoluir:


    🧊 Feedback direto: Um banho de realidade

    ❌ Problemas observados:

    1. Design desalinhado com a proposta do desafio

      • O layout parece não seguir o design original disponibilizado. As proporções da imagem, espaçamentos e botões estão visualmente desbalanceados e grosseiros.
      • Há excesso de margem preta em torno do componente, como se o conteúdo tivesse sido largado no meio da tela sem intenção visual.
    2. Experiência do usuário (UX) ruim

      • Os botões são visualmente pesados, sem contraste definido, e aparentam não ter feedbacks de interação bem definidos (hover, focus).
      • A ausência de espaçamento entre os botões passa sensação de amadorismo. Layout visualmente sufocado.
    3. Acessibilidade comprometida

      • Falta de contraste adequado (fundo preto + botões escuros).
      • Possivelmente sem foco visível nos elementos interativos (não dá para ver, mas suspeito).
    4. Responsividade possivelmente ausente

    • Não há indício de um trabalho bem-feito para mobile-first ou adaptabilidade de tela.

    ✅ Como corrigir e evoluir de verdade:

    1. Siga o design original com precisão.

      Abra o arquivo no Figma (ou o PNG) e observe: tamanhos, cores, espaçamentos e comportamentos de hover. Isso vai treinar seu olhar de desenvolvedor.

    2. Pense como um usuário. Você clicaria nesses botões e se sentiria satisfeito? Se não, é hora de rever a forma como entrega componentes interativos. Use transições suaves e cores bem definidas para indicar interação.

    3. Aplique boas práticas de CSS.

      • Use padding, gap, border-radius e hover:transition de forma inteligente.
      • Não exagere no "margin: auto" centralizando tudo sem critério. Centralizar exige harmonia visual, não só CSS.
    4. Não entregue "qualquer coisa".

      Frontend é sobre detalhes. Um projeto simples como esse precisa ser perfeito. É um cartão de visita do seu capricho. Se você faz um projeto com 7 botões e 1 avatar e mesmo assim ignora qualidade visual e acessibilidade, o que fará em projetos maiores?


    🔁 Conclusão:

    Não é sobre te desmotivar. É sobre te dizer a verdade: o mercado não aceita desleixo, nem projetos jogados de qualquer jeito. Você precisa desenvolver seu olhar crítico. Refazer esse projeto com atenção ao detalhe vai te ensinar mais do que assistir 10 tutoriais seguidos.


  • Bruno091py•50
    @Bruno091py
    Submitted 18 days ago

    HTML e CSS flex-box, mas não é responsivo.

    1
    Renan Guilherme•30
    @codebyneander
    Posted 18 days ago

    Olá! Algumas sugestões de como melhorar o seu projeto, segue abaixo:

    1 - O tamanho do CARD está incorreto! O comprimento correto seria:

    Width: 384px, e height: 522px.

    2 - O tamanho da BORDER do CARD também está incorreta. Ela tem o tamanho correto de 1px, ok? Segue abaixo:

    border: 1px solid #111;

    3 - Você errou o padding da main, o correto seria 24px.

    4 - Você não centralizou o card no meio da página. Use:

    display: flex; justify-content: center; align-items: center; height: 100vh; no BODY

    Foram diversos erros, mas esses são os mais importantes. Lembre-se de sempre corrigir os problemas que aparecem no relatório da plataforma, ok?

  • Curtley•80
    @curtleyAk
    Submitted 19 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I could complete it with my current knowledge. Layouts are quite tricky, and I need more practice.

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

    I tried using grid before, but I was overcomplicating it a bit. Then I used floats, but the concepts of floats are still a bit tricky to understand, but I will get there with more practice.

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

    Mostly, the CSS layouts as a whole, some tips and tricks would do me well to understand them better.

    QR component center using flexbos

    2
    Renan Guilherme•30
    @codebyneander
    Posted 19 days ago

    Não aplicou semântica corretamente.

    1 - Utilize tags como <main> para colocar o conteúdo principal dentro, para alertar os navegadores.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub