Desenvolvimento Front-End I
Fundamentos do desenvolvimento web com HTML, CSS, responsividade e JavaScript.
Sobre a apostila
A apostila Desenvolvimento Front-End I apresenta os fundamentos necessários para iniciar a criação de páginas e aplicações para a internet.
O conteúdo começa com uma introdução ao desenvolvimento web, explicando a estrutura das aplicações, a comunicação entre cliente e servidor e as diferenças entre front-end e back-end.
A apostila também apresenta o protocolo HTTP, seus principais conceitos, requisições, respostas, códigos de status, cabeçalhos, conteúdo e ferramentas de inspeção disponíveis nos navegadores.
Ao longo do material, o aluno conhecerá o HTML e aprenderá sobre elementos, atributos, identificadores, semântica, estrutura básica de documentos, hiperlinks, imagens, áudios, vídeos, iframes e formulários.
O conteúdo de CSS aborda as diferentes formas de inserir estilos em um projeto, seletores, combinadores, pseudoclasses, pseudoelementos e conceitos de responsividade.
A apostila também apresenta layouts flexíveis, media queries e Flexbox, mostrando como criar páginas adaptáveis a celulares, tablets e computadores.
No capítulo de JavaScript, o aluno conhecerá comentários, comandos de saída, tipos de dados, variáveis, atribuições, arrays, escopos, operadores, estruturas condicionais, tratamento de erros, laços de repetição, funções e manipulação do DOM.
O material utiliza exemplos, exercícios e orientações práticas para ajudar o aluno a construir sua primeira interface e compreender as principais tecnologias utilizadas no desenvolvimento front-end.
O que você vai aprender?
- Compreender os fundamentos do desenvolvimento web
- Conhecer a estrutura de aplicações web e a comunicação cliente-servidor
- Entender conceitos do protocolo HTTP, requisições, respostas e códigos de status
- Criar documentos HTML com estrutura semântica, links, mídias e formulários
- Aplicar estilos com CSS, seletores, pseudoclasses e pseudoelementos
- Desenvolver layouts responsivos com media queries e Flexbox
- Utilizar JavaScript para manipular dados, estruturas de controle, funções e DOM
TemasFront-EndHTMLCSSJavaScriptResponsividadeHTTPFlexboxDOM
Prévia da Apostila
Conheça algumas páginas da apostila Desenvolvimento Front-End I e veja como o conteúdo está organizado.
Nesta prévia, você poderá visualizar conteúdos relacionados ao desenvolvimento para internet, HTML, CSS, responsividade e JavaScript.
- Capa da apostila — Desenvolvimento Front-End I.
- Equipe responsável e dados de catalogação.
- Introdução aos conceitos de front-end.
- Estrutura das aplicações web.
- Comunicação entre cliente e servidor.
- Diferenças entre front-end e back-end.
- Protocolo HTTP.
- Requisições e respostas.
- Códigos de status, body e headers.
- DevTools e inspeção de rede.
- Introdução ao HTML.
- Elementos, tags e atributos.
- Estrutura básica de documentos HTML.
- Identificadores, classes e IDs.
- HTML semântico.
- Elementos block-level e inline.
- Div e span.
- Hiperlinks e caminhos de arquivos.
- Imagens, áudio, vídeo e iframe.
- Formulários.
- Introdução ao CSS.
- CSS incorporado, inline e externo.
- Seletores simples.
- Combinadores.
- Pseudoclasses e pseudoelementos.
- Responsividade.
- Layouts flexíveis.
- Media queries.
- Flexbox.
- Introdução ao JavaScript.
- Tipos de dados e variáveis.
- Arrays e escopos.
- Operadores relacionais e lógicos.
- Estruturas condicionais.
- Switch case.
- Try, catch e finally.
- Laços de repetição.
- Funções, parâmetros, argumentos e retorno.
- Document Object Model — DOM.
- Eventos com addEventListener.
Equipe Responsável
- CEO: Marcos Leopoldino
- Coordenação: Prof. Dr. Douglas Fabiano Lourenço
- Coordenação: Prof. Me. Fábio Lippi Silva
- Autoria: Renan Pedrosa
- Autoria: Matheus Costa Rossigalli
- Validação: Vitor 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
Sumário da Apostila
CAPÍTULO 1
- 1. A cidade digital — página 7
- 2. Desenvolvimento para internet — página 8
- 2.1. Estrutura de aplicações web — página 9
- 2.2. Cliente-servidor — página 9
- 2.3. Front-end e back-end — página 9
- 3. HTTP — página 11
- 3.1. O mensageiro da web — página 11
- 3.2. Requisições e respostas — página 11
- 3.3. Estado e segurança — página 12
- 3.4. DevTools — página 13
- 4. Exercícios — página 15
CAPÍTULO 2
- 5. Os tijolos da internet — página 17
- 6. HTML — página 17
- 6.1. Interpretação de caracteres — página 18
- 6.2. Elementos — página 19
- 6.3. Aninhamento de elementos — página 20
- 6.4. Estrutura básica de documentos HTML — página 20
- 6.5. Atributos — página 21
- 6.6. Identificadores — página 22
- 6.7. Semântica — página 23
- 6.8. Block-level e inline elements — página 24
- 6.9. Div e span — página 25
- 6.10. Hiperlinks — página 25
- 6.11. Formulários — página 29
- 7. Exercícios — página 30
CAPÍTULO 3
- 8. Estilizando sua página — página 32
- 8.1. Onde começar a pintar? — página 32
- 8.2. Seletores simples — página 34
- 8.3. Combinadores — página 34
- 8.4. Pseudoclasses — página 36
- 8.5. Pseudoelementos — página 37
- 9. Responsividade — página 38
- 9.1. Layout flexível — página 38
- 9.2. Media queries — página 39
- 9.3. Flexbox — página 40
- 10. Exercícios — página 43
CAPÍTULO 4
- 11. JavaScript — página 45
- 11.1. Inserindo JavaScript no seu projeto — página 45
- 11.2. Comentários — página 46
- 11.3. Comando de saída — página 47
- 11.4. Tipos de dados — página 47
- 11.5. Variáveis — página 48
- 11.6. Atribuição — página 49
- 11.7. Arrays — página 49
- 11.8. Declaração de bloco — página 50
- 11.9. Operadores relacionais — página 51
- 11.10. Operadores lógicos — página 51
- 11.11. Estrutura de condições — página 52
- 11.12. Switch case — página 52
- 11.13. Try, catch e finally — página 53
- 11.14. Laços de repetição — página 54
- 11.14.1. For — página 54
- 11.14.2. Foreach — página 54
- 11.14.3. While — página 55
- 11.14.4. Do-while — página 55
- 11.14.5. Break — página 55
- 11.14.6. Continue — página 56
- 11.15. Funções — página 56
- 11.15.1. Parâmetros — página 56
- 11.15.2. Argumentos — página 57
- 11.15.3. Return — página 57
- 11.16. DOM — página 58
- 12. Exercícios — página 60
- 13. Leituras adicionais — página 61
Dados de Catalogação
- Título da publicação: Desenvolvimento Front-End I
- Autores: Renan Pedrosa
- Autores: Matheus Costa Rossigalli
- 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-981558-3-4
- 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-181804
- Responsável pela ficha catalográfica: Eliane de Freitas Leite
- Bibliotecária: CRB 8/8415
Ficha Catalográfica
Pedrosa, Renan.
Desenvolvimento Front-End I [livro eletrônico] / Renan Pedrosa, Matheus Costa Rossigalli. — São Sebastião, SP: ii-Educação, 2023.
PDF.
ISBN 978-65-981558-3-4.
1. Aplicação de programa — Desenvolvimento.
2. Programação de computadores — Estudo e ensino.
I. Rossigalli, Matheus Costa.
II. Título.