Frontend Mentor - Social Links Profile Solution

Este projeto é uma solução para o desafio de perfil com links sociais no Frontend Mentor. Os desafios do Frontend Mentor ajudam a melhorar as habilidades de codificação ao construir projetos realistas.

Sinta-se à vontade para visitar o meu perfil no Frontend Mentor - @deusdeteneto

Índice de conteúdos

• Visão geral
  • Screenshot
  • Links
• Meu processo
  • Construído com
  • O que eu aprendi
  • Desenvolvimento contínuo
  • Recursos úteis
• Autor
• Agradecimentos

Visão geral

Screenshot

Links

• URL da Solução: Adicionar URL da solução aqui
• URL do Site: Adicionar URL do site aqui

Meu processo

Construído com

O que eu aprendi

Durante o desenvolvimento deste projeto, aprendi a utilizar o Bootstrap para criar layouts responsivos e estilizados de forma eficiente. Também melhorei minha habilidade em trabalhar com componentes customizados e técnicas de centralização usando Flexbox.

Aqui está um exemplo de código que utilizei:

<main class="d-flex justify-content-center align-items-center vh-100">
  <section class="card align-items-center text-center rounded-3">
    <img
      src="assets/images/avatar-jessica.jpeg"
      class="card-img-top mt-4"
      alt="avatar"
    />
    <article class="card-body">
      <h1 class="card-title fs-6 fw-semibold">Jessica Randall</h1>
      <p class="card-text fw-semibold" id="address">London, United Kingdom</p>
      <p class="card-text" id="skills">
        "Front-end developer and avid reader."
      </p>
      <section class="d-flex flex-column gap-3 mx-3 mb-3">
        <a href="#" class="btn btn-secondary fw-semibold">GitHub</a>
        <a href="#" class="btn btn-secondary fw-semibold">Frontend Mentor</a>
        <a href="#" class="btn btn-secondary fw-semibold">LinkedIn</a>
        <a href="#" class="btn btn-secondary fw-semibold">Twitter</a>
        <a href="#" class="btn btn-secondary fw-semibold">Instagram</a>
      </section>
    </article>
  </section>
</main>

Desenvolvimento contínuo

Para projetos futuros, planejo explorar mais o uso de CSS Grid e continuar a aprimorar minha habilidade em criar layouts mais complexos com Flexbox e Bootstrap. Também gostaria de melhorar a acessibilidade e a semântica nos meus projetos.

Recursos úteis

• Documentação do Bootstrap - A documentação do Bootstrap foi fundamental para entender como utilizar componentes e utilitários de forma eficaz.
• CSS Tricks - A Complete Guide to Flexbox - Este guia foi uma referência constante para aplicar técnicas de Flexbox no projeto.

Autor

Você pode encontrar mais informações sobre mim clicando nas minhas redes abaixo.

Agradecimentos

Gostaria de agradecer à comunidade do Frontend Mentor por criar desafios interessantes que me ajudaram a melhorar minhas habilidades de front-end e por todo o suporte e feedback recebido.