- Público alvo: alunos da disciplina de Web Design do curso de TADS (Tecnólogo em Análise e Desenvolvimento de Sistemas) no CNAT-IFRN (Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Norte - Campus Natal-Central)
- Professor: L A Minora
- aulas:
- 14H30-16h00 segunda lab. 08 / terça lab. 07
- 16H30-18h00 segunda lab. 06 / terça lab. 06
| # | Data | Nota de aula |
|---|---|---|
| 1o bimestre | ||
| 01 | 09/09/25 | seminário de integração |
| 02 | 13/09/25 | sábado |
| 03 | 15/09/25 | Danielle |
| 04 | 16/09/25 | Danielle |
| 05 | 22/09/25 | Danielle |
| 06 | 23/09/25 | Danielle |
| 07 | 29/09/25 | Danielle |
| 08 | 30/09/25 | Danielle |
| 09 | 06/10/25 | Danielle |
| 10 | 07/10/25 | Danielle |
| 11 | 13/10/25 | Ferramentas básicas |
| 12 | 14/10/25 | HTML - Introdução notas de aula |
| 13 | 20/10/25 | HTML - Introdução atividade 1-1 Luto |
| 14 | 21/10/25 | CSS - Introdução notas de aula |
| -- | 27/10/25 | feriado |
| 15 | 28/10/25 | CSS - Introdução atividade 1-2 |
| 16 | 03/11/25 | HTML listas, links e âncoras, imagens e tabelas |
| 17 | 04/11/25 | CSS: box model, margin, padding, border |
| 18 | 08/11/25 | sábado Atividades tabelas 03 (1-3) e cards 04 (1-4) |
| 19 | 10/11/25 | Atividade 1-5 |
| 20 | 11/11/25 | Atividade 1-6 data para entrega das atividades avaliativas 14/11 tarefa para segunda-feira, ver notas sobre CSS3 cores, tipografia e plano de fundo (background) |
| 2o bimestre | ||
| 01 | 17/11/25 | Atividade 2-01 |
| 02 | 18/11/25 | Atividade 2-01 entrega até dia 24/11 tarefa para segunda-feira, ver notas sobre flexbox |
| 03 | 24/11/25 | Atividade 2-02 flexbox prática de presença - flexbox froggy |
| 04 | 25/11/25 | Atividade 2-02 flexbox entrega até dia 01/12 |
| 05 | 01/12/25 | Grid layout notas de aula prática de presença - css grid garden atividade 2-03 |
| 06 | 02/12/25 | transformar protótipo em html+css atividade 2-03 com grid layout e flex box |
| 07 | 08/12/25 | jogos internos |
| 08 | 09/12/25 | jogos internos |
| 09 | 15/12/25 | transformar protótipo em html+css atividade 2-04 |
| 10 | 16/12/25 | transformar protótipo em html+css atividade 2-04 |
| 11 | 22/12/25 | transformar protótipo em html+css atividade 2-05 |
| 12 | 23/12/25 | transformar protótipo em html+css atividade 2-05 |
| -- | 24/12/25 18/01/26 |
recesso |
| 13 | 19/01/26 | javascript introdução, estruturas condicionais e laços, funções e escopo, e array |
| 14 | 20/01/26 | manipulando dom com js |
| 15 | 26/01/26 | manipulando dom com js Manipulação do DOM com JavaScript Tornando Páginas Web Interativas com Eventos |
| 16 | 27/01/26 | 21ª wtads / winfo |
| 17 | 02/02/26 | consumindo api indexedDb Atividade desenvolvimento de aplicatio web |
| 18 | 03/02/26 | desenvolvimento de aplicatio web |
| 19 | 09/02/26 | desenvolvimento de aplicatio web |
| 20 | 10/02/26 | apresentação dos aplicativos |
| Reposição e prova final | ||
| 01 | 13/02/26 | Prova prática |
- playlist do youtube
- usadas na disicplina
- Outras úteis
Objetivo: Apresentar os fundamentos do HTML e a estrutura básica de uma página web.
- O que é HTML e sua importância no desenvolvimento web
- Estrutura básica:
<!DOCTYPE>,<html>,<head>,<body> - Tags principais:
<title>,<meta>,<h1>-<h6>,<p>,<div>,<span> - Atributos HTML
- Prática: Criar primeira página HTML
Objetivo: Trabalhar com elementos de conteúdo e navegação.
- Listas ordenadas (
<ol>) e não ordenadas (<ul>) - Links e âncoras (
<a>, atributoshrefetarget) - Imagens (
<img>, atributossrc,alt,width,height) - Caminhos relativos e absolutos
- Prática: Criar página com menu de navegação e galeria de imagens
Objetivo: Estruturar dados e criar formulários interativos.
- Estrutura de tabelas:
<table>,<tr>,<td>,<th>,<thead>,<tbody> - Formulários:
<form>,<input>,<textarea>,<select>,<button> - Tipos de input: text, email, password, number, date
- Labels e acessibilidade em formulários
- Prática: Criar formulário de cadastro
Objetivo: Utilizar HTML5 semântico para melhor estruturação e acessibilidade.
- Elementos semânticos:
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer> - Elementos de mídia:
<video>,<audio> - Elementos adicionais:
<figure>,<figcaption>,<time> - Boas práticas de acessibilidade (ARIA, atributos semânticos)
- Prática: Reestruturar página usando HTML5 semântico
Objetivo: Introduzir CSS e seus conceitos fundamentais.
- O que é CSS e como funciona
- Formas de aplicar CSS: inline, interno e externo
- Seletores básicos: elemento, classe, ID, universal
- Propriedades CSS básicas: color, font-size, text-align
- Cascata, especificidade e herança
- Prática: Estilizar página HTML criada anteriormente
Objetivo: Compreender o modelo de caixa do CSS.
- Box model: content, padding, border, margin
- Propriedades de dimensão: width, height, box-sizing
- Propriedades de borda: border-width, border-style, border-color
- Propriedades de espaçamento: margin e padding (individual e shorthand)
- Display: block, inline, inline-block
- Prática: Criar cards e layouts utilizando box model
Objetivo: Trabalhar com elementos visuais e design.
- Sistemas de cores: nome, hexadecimal, RGB, RGBA, HSL
- Propriedades de tipografia: font-family, font-size, font-weight, line-height
- Google Fonts e fontes customizadas
- Backgrounds: background-color, background-image, background-size, background-position
- Gradientes CSS
- Prática: Criar tema visual para o site
Objetivo: Criar layouts flexíveis e responsivos com Flexbox.
- Conceito de Flexbox e quando usar
- Container flex: display: flex, flex-direction, justify-content, align-items
- Items flex: flex-grow, flex-shrink, flex-basis, flex
- Alinhamento e distribuição de espaço
- Casos de uso práticos: navbar, cards, footer
- Prática: Criar layout responsivo com Flexbox
Objetivo: Dominar Grid Layout e técnicas de responsividade.
- Conceito de CSS Grid e quando usar
- Grid container: display: grid, grid-template-columns, grid-template-rows, gap
- Grid items: grid-column, grid-row, grid-area
- Media queries para design responsivo
- Mobile-first vs Desktop-first
- Prática: Criar layout complexo com Grid e media queries
Objetivo: Adicionar interatividade visual com animações CSS.
- Transições CSS: transition-property, transition-duration, transition-timing-function
- Transformações 2D: translate, rotate, scale, skew
- Pseudo-classes: :hover, :focus, :active
- Animações CSS: @keyframes, animation
- Prática: Animar elementos da interface
Objetivo: Introduzir a programação com JavaScript.
- O que é JavaScript e onde é usado
- Variáveis: var, let, const
- Tipos de dados: string, number, boolean, null, undefined, object, array
- Operadores: aritméticos, relacionais, lógicos
- Template literals e concatenação
- Console.log para debugging
- Prática: Exercícios básicos de programação
Objetivo: Controlar o fluxo de execução do código.
- Estruturas condicionais: if, else if, else
- Operador ternário
- Switch case
- Loops: for, while, do-while
- Break e continue
- Prática: Criar validações e loops para processar dados
Aula 13 - JavaScript: funções e escopo
Objetivo: Organizar código com funções.
- Declaração de funções
- Parâmetros e argumentos
- Return
- Arrow functions
- Escopo: global, local, block scope
- Funções callback
- Prática: Criar funções reutilizáveis
Aula 14 - JavaScript: manipulação do DOM
Objetivo: Interagir com elementos HTML usando JavaScript.
- O que é o DOM (Document Object Model)
- Selecionando elementos: getElementById, querySelector, querySelectorAll
- Manipulando conteúdo: innerHTML, textContent, value
- Manipulando atributos: getAttribute, setAttribute, classList
- Criando e removendo elementos: createElement, appendChild, removeChild
- Prática: Criar lista de tarefas dinâmica
Aula 15 - JavaScript: eventos e interatividade
Objetivo: Tornar páginas web interativas com eventos.
- O que são eventos
- Event listeners: addEventListener
- Tipos de eventos: click, submit, keypress, mouseover, change
- Objeto event e event.target
- preventDefault e stopPropagation
- Validação de formulários com JavaScript
- Prática: Criar formulário interativo com validação
Aula 16 - JavaScript: consumindo API
Objetivo: armazenamento de dados externo ao navegador.
Objetivo: armazenamento de dados interno ao navegador.