Fale com a gente no WhatsApp Fale com a gente no WhatsApp

Bootstrap - Implementando layout de e-commerce Projeto Prático Bootstrap - Implementando layout de e-commerce

Aprenda, do zero, como criar o layout completo de uma aplicação e-commerce real, utilizando o Bootstrap

Curso com 09h04 de vídeos Categoria Desenvolvimento Front-end

Sobre o projeto

Nesse projeto prático você aprenderá, do zero, a criar o layout completo de uma aplicação E-commerce real, utilizando o Bootstrap como ferramenta principal de criação de componentes e estilização. Você também irá aprender a fazer alterações personalizadas do Bootstrap e importação de estilo apenas do que é necessário. Além disso, veremos, como podemos usar o php para nos ajudar a componentizar elementos do nosso projeto e também iremos trabalhar com Sass em todo nosso projeto.

Nesse projeto prático você aprenderá, do zero, a criar o layout completo de uma aplicação E-commerce real, utilizando o Bootstrap como ferramenta principal de criação de componentes e estilização. Você também irá aprender a fazer alterações personalizadas do Bootstrap e importação de estilo apenas do que é necessário. Além disso, veremos, como podemos usar o php para nos ajudar a componentizar elementos do nosso projeto e também iremos trabalhar com Sass em todo nosso projeto.

O que irá aprender?

Nesse projeto veremos na prática como criar um layout do zero com várias páginas e trabalharemos com os seguintes conceitos do Bootstrap:

  • Instalação do Bootstrap via Npm;
  • Manipulação de variáveis nativas do Bootstrap;
  • Componentização com php;
  • Uso do grid system para estruturação do layout;
  • Uso dos componentes carousel, collapse, breadcrumb entre outros;
  • Criação de componentes próprios.

Para quem?

Esse projeto prático é voltado a desenvolvedores que já possuem um conhecimento básico de Bootstrap, HTML e CSS e queiram praticar os conhecimentos com um projeto real.

Metodologia

  • Videoaulas
  • Texto e imagens
  • Início Imediato

Ambiente do curso

  • Bootstrap
  • CSS

Sobre o professor

Amauri Blanco Corrêa

Amauri Blanco Corrêa

Estudante de Análise e Desenvolvimento de Sistemas, apaixonado por tecnologia. Atualmente focado na área de front-end e iniciando uma grande e brilhante caminhada tanto profissionalmente quanto pessoalmente nesse universo que é a programação.

Quais os pré-requisitos para esse curso?

Conteúdo programático

  1. Iniciando ambiente do projeto

    Nessa aula vamos instalar todas as dependências necessárias para podermos dar início ao projeto e vamos conhecer qual será o projeto que vamos desenvolver.

    6 aulas
    • Apresentação do projeto prático
    • Apresentação do projet
    • Design System
    • O código-fonte deste projeto está no GitHub!
    • Iniciando a estrutura do projeto
    • Montando a estrutura do Header
  2. Criando header

    Nessa aula, iremos iniciar de fato o projeto criando o primeiro componente, o Header.

    4 aulas
    • Criando Header
    • Adicionando o menu de navegação
    • Estilizando menu de navegação
    • Finalizando o Header
  3. Iniciando o footer

    Nesta aula criaremos o nosso componente Footer, deixaremos todos os elementos fidelizados com projeto e o deixaremos responsivo

    2 aulas
    • Montando o Footer
    • Finalizando Footer
  4. Criando a Home

    Nesta aula vamos criar de ponta a ponta a primeira página, a Home

    10 aulas
    • Iniciando com a Home
    • Estilizando componente de Carousel
    • Finalizando componente
    • Adaptando Carousel para mobile
    • Criando estrutura dos Cards
    • Finalizando Card
    • Montando section de bg:image
    • Criando compomente de Categoria
    • Duplicando section
    • Últimos detalhes da Home
  5. Criando a página Loja

    Nesta aula iremos criar a próxima página, utilizando vários componentes Bootstrap.

    6 aulas
    • Iniciando a página Loja
    • Criando os primeiros componentes da Loja
    • Deixando o componente responsivo
    • Montando estrutura dos Cards
    • Montando estrutura da página
    • Finalizando a página Loja
  6. Iniciando página de produto

    Nessa aula vamos criar a página de detalhes de produto, uma página que aprenderemos a adaptar um componente Bootstrap de uma forma diferente do convencional, o carousel.

    5 aulas
    • Iniciando a página do Produto
    • Criando Carousel da página de Produtos
    • Finalizando e adaptando para mobile
    • Montando a descrição do Produto
    • Finalizando a página de Produto
  7. Criando a página de Carrinho

    Na página de Carrinho iremos trabalhar com a tabela para conseguimos dar o aspecto de produto antes da compra.

    5 aulas
    • Iniciando a página de Carrinho
    • Criando a tabela
    • Adicionando botões de cupom
    • Finalizando a página no desktop
    • Adaptando a página para mobile
  8. Criando página de produto recebido

    Nessa última aula, vamos criar a página de agradecimento de compra, também vamos ajustar todos os detalhes da nossa página e deixar todos os links corretos

    5 aulas
    • Iniciando a página de Recebimento
    • Adicionando o conteúdo da página
    • Finalizando a página
    • Adaptando a página para mobile
    • Ajeitando os últimos detalhes
Download da ementa

Utilizada e amada por milhares! Veja mais opiniões reais

Plano de acesso total!

Tenha um ano de acesso completo a todos os cursos da plataforma, incluindo novos lançamentos, mentoria de carreira e suporte direto com os professores!

Um ano de acesso completo

Contrate agora e tenha acesso ilimitado a todo o nosso portfólio. Isso inclui:

  • 1 ano de acesso a todos os cursos
  • Cursos novos toda semana
  • Suporte direto com professores
  • Aplicativos para Android e iOS
  • Plano de carreira personalizado
  • Certificados digitais inclusos
  • Suporte com SLA de 4 horas úteis
  • Acesso offline através dos apps
Por apenas
12x R$ 75,00 sem juros, no cartão de crédito
Matricule-se agora
Garantia incondicional de satisfação
Garantia incondicional de satisfação

Confiamos tanto nos resultados dos nossos cursos, que criamos uma garantia incondicional de satisfação para você, que são 7 dias de teste!