Workshop CSS Grid Layout

Data: 05 de Agosto de 2017 (Sábado)

Horário: 9h às 18h

Carga horária: 8 horas

Local: CT da Novatec em SP

Valores do investimento:

Primeiro lote: R$ 300,00 (até 20/07)

Segundo lote: R$ 350,00

O pagamento pode ser parcelado em até 12x, mas a quantidade de parcelas permitidas é definida pela bandeira do seu cartão

Instrutor: Maurício Samy Silva, autor da Novatec com 15 livros publicados

 

Workshop CSS Grid Layout – 1ª Turma

grid

 

Sobre o curso

O objetivo desse Workshop é fornecer ao aluno uma visão geral das técnicas, princípios, conceitos básicos e fundamentos das Especificações do W3C “CSS Grid Layout Module Level 1” e seu emprego na criação de layouts, capacitando-o a empregar suas funcionalidades para desenvolver layout e componentes do layout.

O Workshop será desenvolvido em forma de palestra e estudo dirigido, e abordará teoria e prática. Cada aluno receberá material didático impresso, que servirá como guia de consulta para a solução dos exercícios propostos. Para a parte prática, haverá um diretório de pastas a ser gravado no computador de cada aluno no início do Workshop, contendo arquivos de códigos, imagens, scripts e solução dos exercícios propostos durante a aula.

A quem se destina esse workshop?

  • Estudantes das áreas de Web Design e de desenvolvimento web
  • Desenvolvedores de nível intermediário
  • Designers web de nível intermediário

Pré-requisitos

  • Conhecimento da HTML e das CSS em criação de layouts com uso de floats e posicionamento CSS
  • Versão mais recente do navegador Chrome (ou Firefox ou Safari) Editor de textos (NotePad++, Sublime Text, Dreamweaver, gEdit, VIM ou outros de sua preferência)

Importante: O aluno deverá trazer seu próprio notebook e carregador.

Conteúdo do workshop

1. Layout CSS ontem

  • Tabelas
  • Floats e posicionamento
  • Floats
  • Posicionamento
  • Inline-block
  • Frameworks

2. Layout CSS hoje

  • Flexbox
  • Grid Layout

3. Grid Layout

  • Introdução
  • Suporte nos navegadores
  • Conceitos e terminologia
    1. grid container
    2. grid item
    3. grid line
    4. grid track
    5. grid cell
    6. grid area

4. Propriedades CSS…

4.1 …para o Grid Container

  1. display
  2. grid-template-columns
  3. grid-template-rows
  4. grid-template-areas
  5. grid-template
  6. grid-auto-columns
  7. grid-auto-rows
  8. grid-auto-flow
  9. grid
  10. grid-column-gap
  11. grid-row-gap
  12. grid-gap
  13. justify-items
  14. align-items
  15. justify-content
  16. align-content

4.2 …para os Grid Items

  1. grid-column-start
  2. grid-column-end
  3. grid-row-start
  4. grid-row-end
  5. grid-column
  6. grid-row
  7. grid-area
  8. justify-self
  9. align-self

5. Prática

  • Aplicação dos conceitos de Grid Layout na criação de layouts

Benefícios

  • Coffee breaks
  • Internet wireless
  • Material didático (impresso e interface interativa)
  • Arquivos de códigos, imagens, scripts e solução dos exercícios
  • Certificado impresso

Instrutor

mauricio-maujorMaurício Samy Silva
É graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME). Exerceu o magistério paralelamente à Engenharia e foi, ao longo de 25 anos, professor de Geometria Descritiva e Matemática. Sua experiência com desenvolvimento de sites iniciou-se em 1999, com o FrontPage. Maujor, como é conhecido o autor, mantém o site http://maujor.com destinado à divulgação dos Padrões Web e suas tecnologias de desenvolvimento. Maujor é autor dos seguintes livros: Construindo sites com CSS e (X)HTML; Criando sites com HTML; AJAX com jQuery; JavaScript; CSS3; jQuery Mobile; jQuery; jQuery UI; Web Design Responsivo; HTML5; Fundamentos da SVG, Fundamentos de Sass e Compass, Fundamentos de HTML5 e CSS3, Bootstrap 3.3.3, e Foundation for Sites, todos publicados pela Novatec Editora.

CompartilheShare on TumblrShare on LinkedInTweet about this on TwitterPin on PinterestShare on Google+Share on FacebookEmail this to someone