Apostila digital iiSoul

Desenvolvimento Front-End II — Intermediário

1ª edição • 2023 • PDF (livro eletrônico) • ISBN 978-65-982211-1-9

A apostila Desenvolvimento Front-End II — Intermediário aprofunda os conhecimentos de desenvolvimento web e apresenta técnicas voltadas à criação de interfaces modernas, responsivas e interativas.

O que você vai aprender?

  • Aplicar propriedades avançadas de CSS em interfaces web
  • Compreender Box Model, posicionamento, Flexbox e responsividade
  • Utilizar pseudoclasses, pseudoelementos, transições e animações
  • Criar interatividade com JavaScript e manipulação do DOM
  • Trabalhar com eventos, formulários, rolagem suave e efeito parallax
  • Utilizar Bootstrap para criar layouts e componentes responsivos
  • Compreender a organização de projetos front-end com Webpack
  • Conhecer módulos, loaders, plugins, Babel, testes e linters
Apostila digital iiSoul

Prévia da Apostila

Conheça algumas páginas da apostila Desenvolvimento Front-End II — Intermediário e veja como o conteúdo está organizado.

Nesta prévia, você poderá visualizar conteúdos relacionados a CSS avançado, JavaScript, Bootstrap e Webpack.

  • Capa da apostila — Desenvolvimento Front-End II — Intermediário.
  • Equipe responsável e dados de catalogação.
  • Propriedades avançadas do CSS.
  • Color, font-size e background.
  • Estilização de textos.
  • Margens e preenchimentos.
  • Incorporação de fontes externas.
  • Box Model.
  • Posicionamento e flutuação.
  • Flexbox.
  • Estilização de links e listas.
  • Pseudoclasses e pseudoelementos.
  • Transições e animações.
  • Media queries.
  • Interatividade com JavaScript.
  • Eventos do usuário.
  • Manipulação do DOM.
  • setTimeout e setInterval.
  • Animações com requestAnimationFrame.
  • Manipulação de classes e estilos dinâmicos.
  • Criação de elementos HTML com JavaScript.
  • Interação com formulários.
  • Eventos de teclado e mouse.
  • Rolagem suave e efeito parallax.
  • Instalação e configuração do Bootstrap.
  • Sistema de grade responsiva.
  • Componentes predefinidos.
  • Botões, alertas e barras de navegação.
  • Modais.
  • Carrosséis e abas.
  • Formulários com Bootstrap.
  • Boas práticas com Bootstrap.
  • Introdução ao Webpack.
  • Módulos e dependências.
  • Configuração de entradas e saídas.
  • Loaders e plugins.
  • Servidor de desenvolvimento.
  • Scripts de compilação.
  • Compactação de arquivos e cache.
  • Integração com React, Vue.js e Angular.
  • Uso do Babel.
  • Testes e linters.
  • Criação de um projeto com Webpack.
Apostila digital iiSoul

Equipe Responsável

  • CEO: Marcos Leopoldino
  • Coordenação e Organização: Prof. Dr. Douglas Fabiano Lourenço
  • Coordenação e Organização: Prof. Me. Fábio Lippi Silva
  • Autoria: Renan dos Santos Pedrosa
  • Validação: Vitor Santos Peres
  • Design Instrucional e Ilustração: Habacuque Siqueira de Oliveira
  • Diagramação: HABAH Studios
  • Revisão Textual: Camila Puertas Santos
  • Revisão Textual: Sandra da Silva Mitherhofer
Apostila digital iiSoul

Sumário da Apostila

CAPÍTULO 1

  • 1. Introdução — página 7
  • 2. Propriedades dentro do CSS — página 7
  • 3. Como utilizar color, font-size e background — página 8
  • 4. Estilização de texto: deixando seu texto elegante — página 9
  • 5. Propriedades de preenchimento e espaçamento — página 10
  • 6. Incorporação de fontes de texto externas — página 10
  • 7. Box Model e layout: a estrutura de elementos HTML — página 11
  • 7.1. Box Model — página 11
  • 7.2. Posicionamento e flutuação — página 12
  • 8. Flexibilidade no design web — página 13
  • 9. Estilização de links e listas — página 14
  • 10. Mudança de cores de links — página 14
  • 11. Remoção de estilos padrão de listas — página 14
  • 12. Adição de estilos a elementos de lista usando list-style — página 14
  • 13. Pseudoclasses e pseudoelementos — página 16
  • 14. Transições e animações — página 17
  • 14.1. Utilização de propriedades de transição — página 17
  • 14.2. Adição de animações complexas — página 17
  • 15. Media queries para criação de layouts responsivos — página 18
  • 16. Conclusão — página 21
  • 17. Exercícios — página 22

CAPÍTULO 2

  • 18. Introdução — página 25
  • 19. Interatividade e dinamismo com JavaScript — página 25
  • 20. Interações do lado do cliente e do lado do servidor — página 25
  • 21. Escutando as ações do usuário — página 26
  • 22. Controle de elementos do DOM — página 28
  • 23. Uso de setTimeout e setInterval — página 29
  • 24. Animações simples usando atualização gradual de propriedades — página 30
  • 25. Animações suaves com requestAnimationFrame — página 31
  • 26. Manipulação de classes e estilos dinâmicos — página 32
  • 27. Criando elementos HTML usando JavaScript — página 33
  • 28. Interação com formulários — página 33
  • 29. Manipulação de eventos de teclado e mouse — página 34
  • 30. Efeitos de scroll e parallax — página 35
  • 31. Conclusão — página 37
  • 32. Exercícios — página 39

CAPÍTULO 3

  • 33. Introdução — página 42
  • 34. Instalação e configuração do Bootstrap — página 43
  • 35. Estrutura e componentes do Bootstrap — página 44
  • 36. Componentes predefinidos — página 45
  • 37. Layout em grade — página 48
  • 38. Componentes de carrossel e abas para exibir conteúdos — página 49
  • 39. Implementação de formulários com Bootstrap — página 52
  • 40. Melhores práticas com Bootstrap — página 54
  • 41. Conclusão — página 54
  • 42. Exercícios — página 56

CAPÍTULO 4

  • 43. Introdução — página 58
  • 44. O básico do Webpack — página 59
  • 45. Módulos — página 60
  • 46. Configuração de entradas e saídas — página 60
  • 47. Loaders — página 61
  • 48. Instalação e configuração em um projeto — página 62
  • 49. Estrutura de diretórios e arquivos necessários — página 63
  • 50. Uso de um arquivo de configuração — página 64
  • 51. Gestão de dependências e módulos — página 64
  • 52. Configuração de loaders — página 65
  • 53. Uso de plugins para aprimorar o processo de compilação — página 65
  • 54. Configuração de um servidor de desenvolvimento — página 66
  • 55. Scripts para compilação e empacotamento do código — página 66
  • 56. Compactação de arquivos e técnicas de cache — página 67
  • 57. Integração do Webpack com frameworks populares — página 68
  • 58. Uso de ferramentas complementares, como Babel — página 69
  • 59. Implementação de ferramentas de testes e linters — página 69
  • 60. Criação de um projeto com Webpack — página 70
  • 61. Conclusão — página 74
  • 62. Exercícios — página 75
Apostila digital iiSoul

Dados de Catalogação

  • Título da publicação: Desenvolvimento Front-End II — Intermediário
  • Autor: Renan dos Santos Pedrosa
  • Edição: 1ª Edição
  • Formato: Livro eletrônico — PDF
  • Local de publicação: São Sebastião – SP
  • Editora / Instituição: ii-Educação
  • Ano de publicação: 2023
  • ISBN: 978-65-982211-1-9
  • Classificação: Aplicação de programa — Desenvolvimento
  • Classificação: Programação de computadores — Estudo e ensino
  • Índice para catálogo sistemático: Programação de computadores — 005.1
  • Classificação Decimal de Dewey: CDD 005.1
  • Número do registro catalográfico: 23-185003
  • Responsável pela ficha catalográfica: Eliane de Freitas Leite
  • Bibliotecária: CRB 8/8415

Ficha Catalográfica

Pedrosa, Renan dos Santos.

Desenvolvimento Front-End II [livro eletrônico] / Renan dos Santos Pedrosa. — São Sebastião, SP: ii-Educação, 2023.

PDF.

ISBN 978-65-982211-1-9.

1. Aplicação de programa — Desenvolvimento.

2. Programação de computadores — Estudo e ensino.

I. Título.

Front-End CSS Avançado JavaScript Bootstrap Webpack Responsividade DOM Interatividade