preloder

Exercício de HTML 5 – Página de produto.

Olá Pessoal.

A melhor maneira de aprender a criar páginas para WEB é praticando. Para facilitar o desenvolvimento desta atividade, primeiro vamos ter em mãos as anotações do caderno e o material do blog:

Material

Material extra

Caso queria consultar outras fontes o W3Schools é a minha fonte de consulta favorita, ele trás exemplos de todos os códigos. O material do W3Schools é em inglês, mas bem simples de compreender.

Exercício – Criar uma página de produto

Seguindo o exemplo usado em aula, vamos criar agora uma página para produto com o visual semelhante a este;

e-commerce_com_bootstrap

aba fotos:

Usando as classes img, img-responsive e img-thumbnail

e-commerce_com_bootstrap_02

aba comentários:

e-commerce_com_bootstrap_03

 

O que deve ser feito?

  1. Criar uma página semelhante a mostrada acima.
  2. Utilizar o Google WebFonts.
  3. Estilizar a página com BootStrap.
  4. Utilizar as classes de DIV container, row e col-md para criar o layout da página.
  5. Utilizar glapicon no botão de compra.
  6. Pesquisar na documentação do Bootstrap como utilizar o componente panel e implementar na sua página. Veja um exemplo aqui: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_panels_contextual&stacked=h
  7. Pesquisar na documentação do Bootstrap como utilizar o componente nav e implementar na sua página. Veja um exemplo aqui: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h OBS: Este componente necessita de JQuery. Acrescente no head do seu HTML o código a seguir;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  8. Incorporar um vídeo do Youtube na página. Veja a aula aqui.

Só isso!

Bons estudos.

Deixe seu comentário