Nesse curso, você irá usar o Pinegrow Web Editor na prática. Durante as aulas, você desenvolverá um site One Page do zero.
Teremos como instrutor o desenvolvedor Rodrigo “Milano” que mostrará como é simples montar o HTML e o CSS no Pinegrow, editando tudo ao vivo, sem necessidade de ir e voltar pro navegador.
Ele demonstrará como trabalhar com “Páginas Mestre”, Componentes do Bootstrap e outras funcionalidades, usando Projetos. Também falará sobre a criação de temas WordPress completos e do zero, totalmente funcionais.
Note Baixe os arquivos das imagens do Carousel neste link. Baixe as imagens do restante do layout aqui.
Note Os vídeos foram gravados com o Pinegrow 2.9. Ele evolui muito, mas os painéis, comandos de aceleração de desenvolvimento e o código HTML e CSS permanecem atuais.
Apresentando a interface
Neste vídeo você entenderá a interface do Pinegrow e aprenderá as funções de cada área do programa.
Apresentando o Layout
Nesta aula apresentamos o layout que você criará ao longo desta série de vídeos. Trata-se de um layout estilo “one page” ou seja, de página única, com links na navbar para cada seção.
Iniciando o Projeto
Nesta aula você aprenderá a criar o setup do projeto, com os arquivos do Bootstrap, CSS, Javascript e HTML.
Navbar
Nesta aula começamos a montar o layout. Você irá aprender a criar uma navbar “fixed-top”.
Carrossel
Nesta Aula você criará um carousel, ou slider.
Seção About
Nesta aula você vai criar a primeira seção, “About”. Você verá o uso da tag HEADER do HTML5 e mais algumas classes do Bootstrap, como a classe “.lead”. Também vai inserir 3 colunas, já aprendendo a usar as classes de “.col-*”, e o “offset”.
Classes, Colunas e Imagens – Parte 1
Esta aula está divida em 2 partes. Vamos nos aprofundar um pouco mais no painel CSS, trabalhando com Media Queries para ajustar os diferentes tamanhos da imagem usada na segunda área.
Classes, Colunas e Imagens – Parte 2
Nesta segunda parte você verá a aplicação de regras mais avançadas de CSS.
Componente Tabs
Nesta aula você criará Tabs (Abas). Trata-se de um componente Javascript do Bootstrap que será inserido facilmente através do Pinegrow.
Formulário de Contato e Mapa Responsivo
Nesta aula você construirá um formulário e aprenderá a incorporar um mapa do Google, deixando-o responsivo com as classes do Bootstrap. Como bônus, aprenderá um truque que evita que o mapa dê zoom, quando estiver rolando a página e este passar pela seta do mouse.
Contato e Rodapé
Nesta aula você finalizará o CSS do formulário de contato e criará o rodapé, onde vamos inserir ícones usando a biblioteca Font Awesome.
Google Fonts, CSS, Margins e Paddings
Nesta aula você aprenderá a inserir uma fonte do Google e aplicar no CSS. Também ajustará o tamanho da tipografia, bem como algumas propriedades de Margin e Padding.
Componentes Tab e Gradientes
Nesta aula você aprenderá a customizar o componente ABAS (tabs) do Bootstrap. Ainda aprenderá um truque para deixar um texto com uma cor gradiente. Finalizando irá colocar todos os links na barra de navegação, para as seções do site.
[Aula Bônus]: SEO Básico
Nesta aula bônus, você irá aprender como pode fazer o básico de SEO usando o Pinegrow. Verá algumas tags semânticas de HTML5, bem como as meta tags e atributos de imagens e links.