Alura - Solução do Projeto Mobile First AluraBooks

Codificação de um projeto disponibilizado durante o curso de Front-end da Alura.

Indíce

Visão Geral

Desafio | Screenshot | Links

Meu Processo

Construído com | O que eu aprendi | Recursos úteis

Considerações Finais

Autor | Agradecimentos

Visão Geral

Desafio

O desafio foi construir este projeto criando um menu hamburguer com HTML e CSS, integrar um carrossel com SwiperJS e fazê-lo parecer o mais próximo possível do design. Os usuários devem ser capazes de:

• Vizualizar o layout ideal tanto para dispositivos mobiles quanto para desktops;
• Vizualizar os estados de foco para elementos interativos.

Screenshot

Links

• URL da solução: Index
• URL do site: Site

Meu processo

Construído com

• HTML5 com tags semânticas;
• Propriedades personalizadas de CSS;
• Integração do carrossel com SwiperJS;
• Flexbox;
• Mobile-first.

O que eu aprendi

• Fazer um menu hamburguer através do HTML e CSS;
• Linkar fontes externas;
• Integrar um carrossel com SwiperJS;
• Utilizar variáveis no CSS;
• Trabalhar com o flexbox;
• Desenvolver uma página responsiva, começando pelo mobile-first.

<div class="container">
  <input type="checkbox" name="menu" id="menu" class="container__botao">
  <label for="menu" class="container__rotulo">
      <span class="cabecalho__menu-hamburguer container__imagem"></span>
  </label>
  <ul class="lista-menu">
      <li class="lista-menu__titulo">Categorias</li>
      <li class="lista-menu__item">
          <a href="#" class="lista-menu__link">Programação</a>
      </li>
      ...   
   </ul>
</div>     

:root {
    --cor-de-fundo: #EBECEE;
    }
    
body {
    background: var(--cor-de-fundo);
}

<script>
        const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
        });
    </script>

Recursos úteis

• Guia Completo do Flexbox - Este é um artigo incrível que me ajudou a entender melhor de como funciona o Flexbox e quais são suas propriedades.
• SwiperJS - Esta é uma biblioteca que faz parte do Framework7 e me ajudou a importar o carrossel do site.

Considerações Finais

Autor

• Website - Beatriz Slan | Alura
• Linkedin - in/beatriz-slan

Agradecimentos

Gostaria de agradecer a toda equipe envolvida da Instituição Alura, pela excelente didática, plataforma de ensino e por disponibilizar projetos reais e profissionais que me ajudam muito a praticar e aprimorar todo meu conhecimento deste mundo incrível do Front-end.