Introdução do Curso

Para quem é este curso?

Este curso é projetado para aspirantes a desenvolvedores web iniciantes e desenvolvedores experientes que procuram construir sites de alto desempenho. Ao longo deste e dos seguintes cursos, você irá:

• Conhecer as diferenças entre as páginas AMP e os sites tradicionais.

• Criar incrementalmente um projeto de exemplo usando componentes AMP reais e boas práticas.

• Aprender estratégias para construir sites modernos.

Pré-requisitos

Para obter o máximo desses cursos, você deve ter um conhecimento básico de HTML e CSS. É suficiente ser capaz de reconhecer o código HTML e CSS, e ser capaz de fazer pequenos acréscimos e alterações conforme as instruções dos exercícios. Entenda que ensinar esses conceitos está além do escopo deste curso. Se necessário, você pode encontrar um reforço sobre HTML aqui e sobre CSS aqui.

Siga o código do curso com Glitch

Para completar os exemplos de código incluídos nestes cursos, estaremos usando Glitch. Glitch é um editor de código online que permite criar e visualizar sites sem a necessidade de instalar nada no seu computador. Também permite que você crie um servidor, tudo dentro da interface do Glitch.

O ambiente do editor de código Glitch se parece com este:

A caixa vermelha acima indica o editor online onde você digitará HTML e CSS. A caixa verde indica o botão que o levará para a versão online da página que você está criando. A caixa amarela é o botão que permite criar uma cópia deste projeto e editá-lo. A caixa azul indica os arquivos que você tem disponíveis. Na pasta de assets, você pode encontrar suas imagens.

Ao longo desses cursos, você precisará de várias imagens para completar os exercícios. Todas as imagens de que você precisa para concluir esses cursos estão contidas em nossos projetos Glitch. Para visualizar as imagens em seu projeto, clique na entrada de ativos na lista de arquivos no lado esquerdo do editor de Glitch. Para obter o link de qualquer imagem, selecione a imagem na lista de ativos no lado direito. Clique no botão “copiar” ao lado do URL no pop-up que aparece. Você pode usar esse link em qualquer lugar em que uma imagem seja necessária.

Neste curso, começaremos com uma página HTML básica. Criamos um projeto vazio no Glitch contendo algumas imagens, o código do servidor que você precisará mais tarde e um arquivo index.html com um título e uma única imagem.

Abra esse projeto para começar. Clique no botão “Remix to edit” no lado superior direito para criar um novo projeto que você pode editar. Você pode continuar a usar este editor para este e futuros cursos. Cada curso futuro também lhe dará a oportunidade de começar com uma versão de referência da solução até aquele ponto.

Você não precisa usar o Glitch para concluir esses treinamentos. No entanto, parte do código necessário para completar os exercícios está contido apenas nos exemplos de Glitch. Se desejar usar outro editor, ainda pode ser necessário usar os exemplos de Glitch para encontrar este código.

Configurando o AMP Validator

Para detectar erros em nossas páginas AMP, temos uma ferramenta valiosa ao nosso alcance: o validador de AMP. Escrever páginas AMP válidas é a chave para acessar todos os benefícios do framework. O validador de AMP pode ser acessado de duas maneiras: por meio de uma extensão do Chrome ou adicionando um parâmetro ao nosso URL para que nossa página AMP use o validador integrado. Para os fins deste curso, sugerimos que você use a extensão do Chrome, pois é mais fácil de usar e acessar enquanto você constrói seu site.

• Para instalar a extensão do Chrome, visite o link aqui.

• Para usar o validador de AMP integrado, adicione #development=1 no final do URL da página AMP e abra o console do desenvolvedor em seu navegador para ver os resultados. Você não precisa adicionar esse parâmetro se estiver usando a extensão do Chrome.

O que vamos construir

Ao longo de nossos três cursos, você construirá um site para a Loja de Bicicletas de Queijo do Chico. O Chico desenvolveu uma bicicleta revolucionária feita inteiramente de queijo. A demanda por bicicletas novas é tão alta que o Chico precisa criar um site o mais rápido possível. Quando terminarmos esses cursos, o site do Chico se parecerá com este:

Você pode clicar neste link para ver uma prévia on-line. Dê uma olhada no site. Temos vídeos, formulário de inscrição, carrossel de imagens e maneiras de compartilhar nosso site nas redes sociais. Abra o menu de navegação clicando no ícone formado por três linhas (também chamado de “ícone do menu de hambúrguer”) no canto superior esquerdo. Assim que o menu se expandir, clique no link “Nossos Produtos” para navegar até uma lista de produtos. Tente classificar a lista de produtos por preço e filtrar a lista de produtos por categoria de produto.

Escolhemos o site do Chico como nosso modelo porque oferece uma coleção de recursos que comumente vemos em sites populares hoje. Foi construído inteiramente em AMP. Ao longo dessas lições, você construirá este site do zero.