Fale com a gente no WhatsApp 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

  • Muito bom curso

  • Para quem faz a formação "Desenvolvedor Bootstrap" esse curso é a cereja do bolo!

  • Muito bom. Adorei

  • Ótimo Conteúdo.

  • Bom, já tinha um conhecimento em programação C#, resolvi fazer o básico só por fazer e me surpreendi, vi muitas coisas novas, entendi melhor vários conceitos, enfim, estou a caminho do intermediário e recomento é um ótimo curso.

    Depoimento - Roberto
    C# (C Sharp) Básico
    Roberto Itaquaquecetuba / SP
  • Ótimo curso! Realmente bastante esclarecedor e didático. O conteúdo é bem completo, abrangendo diversos assuntos de forma dinâmica e complementar, o que ajuda, e muito, no aprendizado e na visão de aplicabilidade. Além de todo o ambiente e dos recursos disponíveis tornarem o estudo mais amigável e menos cansativo.

    Depoimento - Dimitrius
    C# (C Sharp) Básico
    Dimitrius Três Corações / MG
  • Esse curso para mim foi um desafio que eu recebi na empresa que eu trabalho, me fizerem uma proposta para eu aprender e me certificar em C# .NET em 90 dias. Esse curso foi minha salvação! Agora vamos para o Intermediário e por fim o Avançado!!! Agradeço...

    Depoimento - David
    C# (C Sharp) Básico
    David Fortaleza / CE
  • Já fui e paguei caro por um curso de C# que não me instruiu em nada, pois não tinha o conhecimento básico. Aí arrisquei no TreinaWeb, pois sempre tive preconceito com cursos assim... a distancia. Sempre achei que presencial com uma pessoa ali do seu lado era a melhor forma... estava enganado... Ótimo curso, didática excelente. E vamos agora para o Intermediário. Vlw equipe do TreinaWeb

    Depoimento - Leonardo
    C# (C Sharp) Básico
    Leonardo Nilópolis / RJ
  • Curso Excelente, otimos professores, explicação muito boa...ja estou adquirindo o proximo curso c# avançado. Indico para qualquer um e garanto um dos melhores curso que ja fiz. Parabens a toda equipe.

    Depoimento - Fabrício
    C# (C Sharp) Básico
    Fabrício Cariacica / ES

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
R$ 99,00 ECONOMIZE R$ 600,00
12x R$ 49,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!