Home » Cursos - Front-end » Bootstrap – Boas Práticas no Front-End
Bootstrap Boas Práticas no Front-End
(Reprodução/Google imagens)

Bootstrap – Boas Práticas no Front-End

Bootstrap  Boas Práticas no Front End

Descrição: Faça um site completo utilizando o framework Bootstrap 3. Bootstrap – Boas Práticas no Front End
Mantenha seu código limpo e bem feito seguindo as boas práticas do desenvolvimento HTML5.
Produza um código HTML semântico e de qualidade para que leitores de tela e robos de busca consigam ler bem o seu site.
Usa o método de desenvolvimento front-end mobile first para que suas aplicações sejam sempre responsivas, simples e funcionais independente do dispositivo.
Aprenda a usar os thumbnails, panels, jumbotron, carosel e navbar do bootstrap.
Veja como é feita uma página single page application.
Utilize a documentação do bootstrap de maneira eficaz e eficiente.

Bootstrap

(Reprodução/ Imgsafe)

 

Conteúdo Detalhado

Introdução

  • Reconhecendo padrões em um layout
  • Apresentando o Bootstrap
  • Criando a página HTML
  • Primeira imagem com classes bootstrap

 

Começando a implementar o site seguindo o layout

  • Container para alinhar e definir o tamanho do corpo do site
  • Collapse para esconder texto grande e só aparecer quando usuário clica
  • Componente panel para estilizar a parte de sobre nós do site

 

Mostrando os projetos da Empresa

  • Entendendo a documentação do bootstrap
  • Tag semântica figure do HTML 5 para melhorar o nosso HTML
  • Componente Jumbotron do bootstrap para destacar uma parte do nosso site

 

Mostrando os depoimentos dos clientes com o carousel

  • Componente JS Carousel do bootstrap para mostrar os depoimentos dos clientes e alternar entre eles
  • Deixando o Carousel mais semântico com a tag figure e figcaption
  • Incluindo mais itens no Carousel

 

Criando o formulário de contato colocando o vídeo institucional da empresa

  • Como o bootstrap lida com iframe
  • Formulários com o estilo do bootstrap
  • Os diversos tipos de botões do bootstrap
Bootstrap (Alura)

(Reprodução / Google Imagens)

Mostrando o endereço no rodapé

  • Escrevendo o endereço físico e virtual da empresa
  • Semântica nos br’s

 

Navegando entre as seções com a navbar

  • Criando um menu de navegação do site com navbar
  • Esconder o menu de navegação para mobile e só aparecer quando clicamos
  • Utilizar o famoso ícone ‘hamburguer’ dos mobiles para aparecer o menu de navegação

 

Chamada em destaque no cabeçalho

  • Colocando uma imagem chamativa no fundo do cabeçalho
  • Criando uma chamada promocional com fundo transparente
  • Boas práticas e propriedades de posicionamento no CSS
  • Escrever código com JQuery para dar efeitos a componentes Bootstrap

Deixando o site responsivo em telas maiores

  • Sistema de Grid do Bootstrap para definir quanto itens por linha aparecem em cada dispositivo
  • Tamanhos de dispositivos diferentes que o bootstrap aborda
  • Media queries para escrevermos nosso código de site responsivo

Caso queira comprar o curso segue o link: Alura

 

Deixe uma resposta

%d blogueiros gostam disto: