Alura books

Detalhes do projeto

Módulo 1️⃣

• Aplicação do reset.css. e metodologia mobile-first

Módulo 2️⃣

• Baixar imagens no Figma;
• Construir um header;
• Transformar elementos em flex-containers e flex-items com FlexBox;
• Associar arquivos CSS através do @import;
• Desenvolver um menu hambúrguer interativo com HTML e CSS;
• Position relative e absolute;
• Importar e usar fontes do google fonts;
• Criar sections;
• Editar input e seu placeholder.

Módulo 3️⃣

• Aplicar plugins externos através de CDN;
• Utilizar o plugin SwiperJS;
• Conteúdo extra sobre FlexBox
• Reutilizar elementos e estilos;
• Criar listas;
• Editar input e seu placeholder.

• SwiperJs Link da API

  

  O que é o SwiperJs

  SwiperJs é uma biblioteca de código aberto para criar carrosséis (sliders) responsivos e otimizados para dispositivos móveis. Ele suporta gestos de toque, arrastar e clicar para navegar pelos slides.

  Com o SwiperJs, é possível personalizar a aparência do carrossel, como tamanho, espaçamento, estilo de navegação, número de slides visíveis, efeitos de transição e muito mais.

  A biblioteca é compatível com várias plataformas, incluindo desktops, smartphones e tablets, e possui recursos úteis, como suporte a preloading de imagens, autoplay (reprodução automática) e lazy loading (carregamento tardio) de imagens.

  O SwiperJs é fácil de usar e oferece uma API (Interface de Programação de Aplicativos) simples para interagir com a biblioteca. É uma escolha popular para desenvolvedores que desejam criar carrosséis de alta qualidade e personalizáveis para seus sites e aplicativos.

  Script usado

          <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
          <script>
              const swiper = new Swiper('.swiper', {
                  spaceBetween: 10,
                  slidesPerView: 3,
                  pagination: {
                      el: '.swiper-pagination',
                      type: 'bullets',
    },
                  autoplay: {
                  delay: 3000,
   },
              });
          </script>

  Conteúdo extra sobre Flexbox Link do conteúdo

  Resumo

  Flexbox é um módulo do CSS que permite criar layouts flexíveis e responsivos em páginas web. Ele oferece uma maneira fácil e eficiente de organizar e distribuir elementos em um contêiner.

  Com o Flexbox, é possível controlar a direção, o alinhamento, a ordem e o tamanho dos elementos dentro de um contêiner. Ele também fornece recursos para ajustar automaticamente o tamanho dos elementos em relação ao espaço disponível, o que é especialmente útil para layouts responsivos em dispositivos móveis.

  A principal vantagem do Flexbox é sua capacidade de lidar com layouts complexos com menos código CSS. Ele permite que os desenvolvedores criem layouts fluidos e responsivos sem a necessidade de recorrer a truques complexos de posicionamento.

  O Flexbox é amplamente suportado pelos navegadores modernos e oferece recursos avançados, como flex-wrap (quebra de linha), justify-content (justificação do conteúdo) e align-items (alinhamento dos itens). Ele é uma ferramenta poderosa para criar layouts dinâmicos e eficientes em CSS.