Desenvolvimento Web 1

• Sobre a disciplina
• Unidade 1 - Introdução a Web e Tópicos de Design
• Unidade 2 – Construção do Design de Páginas Web com Figma
• Unidade 3 - Introdução ao HTML e GitHub
• Unidade 4 - Sintaxe do HTML
• Unidade 5 - Layouts HTML e Introdução ao CSS
• Unidade 6 - Definição de Páginas Web com CSS
• Unidade 7 - Responsividade de Páginas Web com CSS
• Unidade 8 - Frameworks CSS

Sobre a disciplina

Nesta disciplina, iniciaremos nossa jornada no mundo do desenvolvimento web. Conheceremos o ambiente da Internet, veremos noções de design e aplicaremos esses conceitos na prática utilizando HTML e CSS.

Unidade 1 – Introdução a Web e Tópicos de Design

Nesta unidade, vamos fazer uma introdução às tecnologias Web e descrever os principais conceitos aplicados ao Design de Interface de Usuário.

Conteúdo:

• Introdução à Internet e World Wide Web (WWW)
  • O Ambiente Web: Histórico da Internet e Web
  • Conceitos Básicos da Arquitetura Cliente-Servidor
  • Serviços da Internet
• Design de Interface de Usuário
  • Princípios de IHC
  • Princípios de Diagramação
  • Princípios e elementos da UX
  • Requisitos de usabilidade

Unidade 2 – Construção do Design de Páginas Web com Figma

Nesta unidade, vamos finalizar os conceitos de design e aprender a construir o layout de uma página web com o Figma.

Conteúdo:

• Design de Interface de Usuário
  • Acessibilidade na Web
  • Padrões de interação e navegação na Web
  • Layout e composição
  • Avaliação de usabilidade
• Construção de Layout com Figma
  • Página Inicial
  • Página Interna
  • Formulários

Unidade 3 - Introdução ao HTML e GitHub

Nesta unidade, vamos fazer uma introdução a páginas web estáticas e principais linguagens: HTML, CSS e Javascript. Aprenderemos a sintaxe básica do HTML e seus principais elementos. Também faremos uma breve introdução a sistemas de controle de versões e como armazenar e publicar nossas páginas web estáticas no Github.

Conteúdo:

• Introdução ao HTML
  • Sintaxe básica do HTML
  • Elementos de Texto, Imagens e Links
  • Prática das tags em ferramenta online de edição
  • Tags semânticas
  • Instalação de uma ambiente de Desenvolvimento Local
• Uso do Github
  • Criar repositório
  • Enviar os arquivos
  • Ligar Github pages

Unidade 4 – Sintaxe do HTML

Nesta unidade, vamos continuar o estudo da linguagem HTML, discutindo as melhores práticas e a criação de formulários e tabelas.

Conteúdo:

• Sintaxe da Linguagem HTML:
  • Boas práticas
  • Formulários
  • Tabelas

Unidade 5 – Layouts HTML e Introdução ao CSS

Nesta unidade vamos aprender a construção de layouts HTML com Iframe e fazer uma introdução à sintaxe básica do CSS e seus principais elementos.

Conteúdo:

• Boas práticas de construção de layout com HTML
• Introdução ao CSS
  • Sintaxe básica
  • Incorporação ao HTML (inline, interno, externo)
  • Cores e Background
  • Tipografia
  • Borda
  • Margem
  • Padding

Unidade 6 – Definição do Design de Páginas Web com CSS

Nesta unidade vamos continuar aprendendo as tags de estilo do CSS.

Conteúdo:

• Posicionamento
• Flex
• Grid

Unidade 7 – Responsividade de Páginas Web com CSS

Na unidade 5, você aprendeu o básico sobre CSS, que possibilitou a descrição do visual do seu site. Na unidade 6, você aprendeu a posicionar os elementos lado a lado, ocupando mais espaço, ideal para telas maiores, como a de um computador. Nesta unidade, aprenderemos técnicas para tornar o visual do seu site responsivo, ou seja, que ele seja fácil de ler e usar em qualquer tamanho de tela.

Conteúdo:

• Desenvolvimento de projeto com responsividade
• Media Queries

Unidade 8 – Frameworks CSS

Durante essa jornada você aprendeu como a Internet funciona, viu noções de design e criou suas primeiras páginas web estáticas, usando HTML e CSS.

Nesta unidade, vamos conhecer alguns frameworks CSS, criados para agilizar e padronizar o desenvolvimento web. Discutiremos as vantagens e desvantagens de frameworks como Bootstrap, Tailwind e Open Props.