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 videos 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.

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

  • Estou muito satisfeito com o conteúdo oferecido no curso. Sempre com um material muito didático além, é claro, da grande capacitação e conhecimento demonstrado pelo instrutor, tornando o aprendizado muito satisfatório!

    Depoimento - Rodrigo
    Rede de Computadores - Protocolo TCP/IP
    Rodrigo Volta Redonda / RJ
  • Muito legal, simples e objetivo como foi apresentado desde a criação inicial e o passo a passo do programa. A cada linha de código, a cada nova experiência de entender como tudo funciona cada parte. Parabéns pessoal.

    Depoimento - David
    JavaScript - Jogo da Memória
    David Londrina / PR
  • Excelente curso onde se é lecionado por um professor com total domínio da linguagem e da lógica SQL, simplificando cada fórmula apresentada. Vocês sempre me impressionam e sigo completando mais um curso. Pronto para cursar o de DBA para MySQL!

    Depoimento - Bernardo
    MySQL - Desenvolvedor
    Bernardo Rio Das Ostras / RJ
  • Estou cursando faculdade de sistemas de informação e o curso de C# do TreinaWeb contribuiu muito para minha formação, aumentando ainda mais a minha paixão pela linguagem e por programação. Farei o curso avançado e tantos outros, pois a qualidade foi confirmada.

    Depoimento - Roberto
    C# (C Sharp) Intermediário
    Roberto Resende / RJ
  • Parabéns aos produtores do curso de Facebook Marketing. Estou lendo um livro sobre Facebook Marketing e o curso em vídeo da TreinaWeb agregou bastante informações com a dinâmica do vídeo e ilustrações das telas mostrando na também na prática como fazer. Bem explicado, e de forma simples. Consegui absorver muito bem todos os módulos do curso. Sem dúvidas, é um dos melhores cursos da TreinaWeb.

  • Linguagem amigável, aulas práticas. Próximo curso Python Banco de Dados, depois Python Collection, rumo DJANGO. Viciei (tenho app no celular, fico assistindo aula em todo lugar) na plataforma por isso, e 3 semanas consigo aprender muita coisa pois as aulas são práticas.

    Depoimento - Rodrigo
    Python - Orientação a objetos
    Rodrigo Campo Grande / MS
  • Mais um curso na TreinaWeb, mais uma confirmação de retorno garantido e satisfação no investimento que fiz ao comprar a assinatura anual. Que pena que descobri apenas este ano a TreinaWeb, se tivesse descoberto a mais tempo, teria economizado tempo e dinheiro em outros cursos de menor qualidade que fiz. Parabéns à toda equipe mais uma vez.

    Depoimento - Eduardo
    Java - Algoritmos - Parte 1
    Eduardo Manaus / AM
  • As informações são claras e isso permite ter uma ideia completa a respeito do assunto. O passo-a-passo de cada atividade é muito bem definido, e isso colabora para saber como aplicar o conhecimento na prática. Curso muito bom!

  • Gostei muito do curso, sem dúvidas aborda os principais conceitos de Marketing Digital, acredito que o tempo que dedicaram ao curso foi muito importante. Agradeço a oportunidade! Seria muito bom se disponibilizassem ao fim do curso uma pasta com os vídeos caso queiramos revisar o conteúdo.

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 ou R$ 900,00 à vista
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!