├── .DS_Store ├── aula-1 ├── .DS_Store └── index.html ├── aula-2 ├── .DS_Store ├── img │ ├── .DS_Store │ ├── issa.png │ └── viola.jpeg └── index.html ├── aula-4 ├── .DS_Store ├── img │ ├── issa.png │ └── viola.jpeg ├── style.css ├── listas.html ├── tabelas.html └── index.html ├── aula-5 ├── .DS_Store ├── img │ ├── macapa.png │ ├── maceio.png │ ├── manaus.png │ ├── salvador.png │ ├── saoPaulo.png │ └── rioBrnaco.png ├── pratica.css └── pratica.html ├── aula-7 └── .DS_Store ├── aula-8 └── .DS_Store ├── aula-3 Prática ├── .DS_Store ├── img │ ├── issa.png │ └── viola.jpeg ├── listas.html ├── tabelas.html └── index.html ├── aula-6 Prática ├── .DS_Store ├── valerie.webp ├── style.css └── card.html ├── aula-9 ProjetoFinal └── .DS_Store ├── Ciclo formativo Módulo II - CSS.pdf ├── Ciclo formativo Módulo II - HTML.pdf └── README.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/.DS_Store -------------------------------------------------------------------------------- /aula-1/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-1/.DS_Store -------------------------------------------------------------------------------- /aula-2/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-2/.DS_Store -------------------------------------------------------------------------------- /aula-4/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-4/.DS_Store -------------------------------------------------------------------------------- /aula-5/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-5/.DS_Store -------------------------------------------------------------------------------- /aula-7/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-7/.DS_Store -------------------------------------------------------------------------------- /aula-8/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-8/.DS_Store -------------------------------------------------------------------------------- /aula-2/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-2/img/.DS_Store -------------------------------------------------------------------------------- /aula-2/img/issa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-2/img/issa.png -------------------------------------------------------------------------------- /aula-4/img/issa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-4/img/issa.png -------------------------------------------------------------------------------- /aula-2/img/viola.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-2/img/viola.jpeg -------------------------------------------------------------------------------- /aula-4/img/viola.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-4/img/viola.jpeg -------------------------------------------------------------------------------- /aula-5/img/macapa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-5/img/macapa.png -------------------------------------------------------------------------------- /aula-5/img/maceio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-5/img/maceio.png -------------------------------------------------------------------------------- /aula-5/img/manaus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-5/img/manaus.png -------------------------------------------------------------------------------- /aula-5/img/salvador.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-5/img/salvador.png -------------------------------------------------------------------------------- /aula-5/img/saoPaulo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-5/img/saoPaulo.png -------------------------------------------------------------------------------- /aula-3 Prática/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-3 Prática/.DS_Store -------------------------------------------------------------------------------- /aula-5/img/rioBrnaco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-5/img/rioBrnaco.png -------------------------------------------------------------------------------- /aula-6 Prática/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-6 Prática/.DS_Store -------------------------------------------------------------------------------- /aula-3 Prática/img/issa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-3 Prática/img/issa.png -------------------------------------------------------------------------------- /aula-6 Prática/valerie.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-6 Prática/valerie.webp -------------------------------------------------------------------------------- /aula-3 Prática/img/viola.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-3 Prática/img/viola.jpeg -------------------------------------------------------------------------------- /aula-9 ProjetoFinal/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/aula-9 ProjetoFinal/.DS_Store -------------------------------------------------------------------------------- /Ciclo formativo Módulo II - CSS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/Ciclo formativo Módulo II - CSS.pdf -------------------------------------------------------------------------------- /Ciclo formativo Módulo II - HTML.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asilvaolabi/CFB-II-MODULO-I-HTML-CSS/HEAD/Ciclo formativo Módulo II - HTML.pdf -------------------------------------------------------------------------------- /aula-4/style.css: -------------------------------------------------------------------------------- 1 | .primeirasListas{ 2 | color:darkgreen; 3 | } 4 | 5 | .segundasListas { 6 | color:darkslateblue; 7 | } 8 | 9 | #titulo{ 10 | color:rgb(216,191,216); 11 | } 12 | 13 | .paragrafo{ 14 | font-size: 17px; 15 | font-family: monospace; 16 | line-height: 1; 17 | border: 15px solid red; 18 | /* border-width: 15px; 19 | border: solid; 20 | border-color: red; */ 21 | } -------------------------------------------------------------------------------- /aula-5/pratica.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: Verdana, Geneva, Tahoma, sans-serif 3 | } 4 | 5 | body { 6 | border: 1px solid black; 7 | } 8 | 9 | .card{ 10 | /* largura */ 11 | width: 425px; 12 | /* altura */ 13 | height: 212px; 14 | border: 1px solid black; 15 | margin: 10px 0 10px 11px; 16 | padding: 10px; 17 | } 18 | 19 | .card-titulo{ 20 | font-size: medium; 21 | margin: 0 0 10px 0; 22 | display: inline; 23 | } 24 | 25 | .card-imagem{ 26 | width: 30%; 27 | display: inline; 28 | float: left; 29 | margin-top: 50px; 30 | } 31 | 32 | .card-text{ 33 | display: inline; 34 | width: 65%; 35 | float: right; 36 | font-size: small; 37 | line-height: 15pt; 38 | margin-top: 30px; 39 | } 40 | -------------------------------------------------------------------------------- /aula-6 Prática/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | outline: 0; 5 | } 6 | 7 | body { 8 | font-family: 'Roboto'; 9 | } 10 | 11 | .container { 12 | margin-right: auto; 13 | margin-left: auto; 14 | max-width: 960px; 15 | padding-left: 10px; 16 | padding-right: 10px; 17 | width: 100%; 18 | background-color: #f2f1f1; 19 | margin-top: 10px; 20 | border-radius: 5px; 21 | padding: 16px; 22 | } 23 | 24 | .avatar{ 25 | width: 180px; 26 | height: 180px; 27 | border-radius: 200px; 28 | } 29 | 30 | .container-sobre { 31 | display: flex; 32 | } 33 | 34 | .sobre{ 35 | display: flex; 36 | flex-direction: column; 37 | justify-content: center; 38 | margin-left: 32px 39 | } 40 | 41 | .nome{ 42 | 43 | } 44 | 45 | .container-descricao{ 46 | 47 | } 48 | 49 | .descricao{ 50 | 51 | } 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /aula-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Primeiro site 7 | 8 | 9 | 10 | 11 |

12 | Lorem ipsum dolor sit amet, 13 | consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 14 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 15 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 16 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 17 |

18 | 19 |

Introdução ao Front-end

20 |

Introdução ao Front-end

21 |

Introdução ao Front-end

22 |

Introdução ao Front-end

23 |
Introdução ao Front-end
24 |
Introdução ao Front-end
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /aula-6 Prática/card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Card 7 | 8 | 9 | 10 |
11 |
12 |
13 | Imgagem da Valerie Thomas 15 |
16 |
17 |

Sobre

18 |

Valerie Thomas

19 |
20 |
21 | 22 |
23 |
24 |

25 | Thomas se interessou por ciências quando criança, depois de observar seu pai mexendo na televisão e vendo as partes mecânicas dentro da TV. Aos oito anos, ela leu o primeiro livro sobre eletrônica dos meninos , o que despertou seu interesse 26 | em uma carreira científica. Seu pai não a ajudaria com os projetos do livro, apesar de seu próprio interesse por eletrônica. Na escola só para meninas que frequentou, ela não foi incentivada a buscar cursos de ciências e matemática, embora 27 | tenha conseguido fazer um curso de física. 28 |

29 |
30 |
31 | 32 |
33 | 34 | -------------------------------------------------------------------------------- /aula-5/pratica.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercício CSS 7 | 8 | 9 | 10 |

Estados e algumas capitais

11 |
12 |

Rio Branco

13 | 14 |

15 | Rio Branco é a capital do estado do Acre (AC).
Área territorial: 8.835km²
População: 350mil habitantes. 16 |
Curiosidade: de “Capital da Natureza”, em razão dos seus atributos naturais. 17 |

18 |
19 | 20 |
21 |

São Paulo

22 | 23 |

São Paulo capital do estado de São Paulo
24 | Área territorial: 1.521 km²
População: 12 milhões de habitantes
25 | Curiosidade: maior cidade do país é considerada uma metrópole mundial brasileira. 26 |

27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ciclo Formativo PretaLab | Módulo I - HTML e CSS 🚀 2 | 3 | ![image](https://media.giphy.com/media/968taxwNaAXqZASdcn/giphy.gif) 4 | 5 | ## `Sobre o módulo` 6 | Nossas aulas serão divididas por pastas, ao final de cada aula, eu atualizarei o meu reposítório, para vocês conseguirem acompanhar(mas não é só para copiar hein, é só para se basear). 7 | 8 | Ao final de cada aula, atualize seu repositório. 9 | 10 | O nosso projeto final será um portfólio feito em HTML, CSS e hospedado no netlify. 11 | 12 | Para o módulo I usaremos as seguintes tecnologias: 13 | ✓ Visual Studio Code como ambiente de desenvolvimento. 14 | ✓ Github como ferramenta de versionamento. 15 | ✓ Netlify para realizarmos o Deploy da nossa aplicação. 16 | 17 |
18 | 19 | ## `Planejamento` 20 | 21 | ✓ 23/08 Introdução ao módulo | HTML5 - Introdução: paragrafos, títulos, quebra de linha, 22 | formatação de texto. 23 | 24 | ✓ 25/08 | HTML5 - Aprofundamento: links, listas, tabelas, imagens, acessibilidade, semântica,entidades, forms, inputs, 25 | botões. Inspecionado o html 26 | 27 | ✓ 27/08 - Aula prática / Monitoria 28 | 29 | ✓ 30/08 | CSS3 - Sintaxe básica, formas de estilização, arquivo externo, cores, alinhamento, fontes, identificadores e classes. 30 | 31 | ✓ 01/09 | CSS3 - Espaçamento, bordas a elementos, inspecionando o css (box model do navegador), css reset, precedência, a propriedades (display, float, clear, clear fix), posicionamento. 32 | 33 | ✓ 03/09 - Aula prática / Monitoria 34 | 35 | ✓ 06/09 | Projeto Final 36 | 37 | ✓ 08/09 | Projeto Final 38 | 39 | ✓ 10/09 | Aula prática - Deploy do projeto final 40 | 41 |
42 | 43 | ## `Protótipo do projeto final` 44 | 45 | - [link do protótipo do projeto final](https://www.figma.com/file/dykEV9jRKyK7K83CQ74zfP/Portfolio-Ciclo-Formativo-II---M%C3%B3dulo-I?node-id=0%3A1) 46 | 47 | --- 48 |
49 | _Vai incrível caminharmos juntas! Qualquer dúvida ou sugestão, fala comigo!!!_ 50 |
51 | 52 | ### Vamos nos conectar! 53 | 54 | - [instagram](https://www.instagram.com/mandysporai) 55 | - [linkedin](https://www.linkedin.com/in/amanda-silva-dev/) 56 | - [github](https://github.com/mandypry) 57 | - [github-pretalab](https://github.com/asilvaolabi) 58 | 59 |
60 | Feito com muito 🤎 por Amanda Silva -------------------------------------------------------------------------------- /aula-4/listas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Listas 6 | 7 | 8 | 9 | 10 |

Exercícios de listas

11 | 12 |

Listas Ordenadas

13 | 14 |

Iniciando pelo número 1

15 | 16 |
    17 |
  1. Encontrar um trabalho
    2. 18 |
  2. Fazer muito dinheiro
    3. 19 |
  3. Mudar para outra cidade
    4. 20 |
21 | 22 | 23 |

Exemplo de Lista Ordenada iniciando de onde eu quiser

24 |
    25 |
  1. Encontrar um trabalho
    2. 26 |
  2. Fazer muito dinheiro
    3. 27 |
  3. Mudar para outra cidade
    4. 28 |
29 | 30 |

Listas Aninhadas

31 | 32 |
    33 |
  1. primeiro item
    2. 34 |
  2. segundo item 35 |
      36 |
    1. segundo item primeiro subitem
      2. 37 |
    2. segundo item segundo subitem
      3. 38 |
    39 |
    3. 40 |
  3. terceiro item
    4. 41 |
42 | 43 |

Lista ordenada alfabéticamente

44 | 45 |
    46 |
  1. Nome
    2. 47 |
  2. Telefone
    3. 48 |
  3. Endereço
    4. 49 |
  4. País
    5. 50 |
51 | 52 |

Exemplo de Lista Desordenada

53 | 54 |

Lista ordenada sem tipo

55 | 61 | 62 |

Lista ordenada Quadradinhos

63 | 69 | 70 |

Lista ordenada circulo vazado

71 | 77 | 78 | -------------------------------------------------------------------------------- /aula-3 Prática/listas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Listas 6 | 7 | 8 | 9 | 10 |

Exercícios de listas

11 | 12 |

Listas Ordenadas

13 | 14 |

Iniciando pelo número 1

15 | 16 |
    17 |
  1. Encontrar um trabalho
    2. 18 |
  2. Fazer muito dinheiro
    3. 19 |
  3. Mudar para outra cidade
    4. 20 |
21 | 22 | 23 |

Exemplo de Lista Ordenada iniciando de onde eu quiser

24 |
    25 |
  1. Encontrar um trabalho
    2. 26 |
  2. Fazer muito dinheiro
    3. 27 |
  3. Mudar para outra cidade
    4. 28 |
29 | 30 |

Listas Aninhadas

31 | 32 |
    33 |
  1. primeiro item
    2. 34 |
  2. segundo item 35 |
      36 |
    1. segundo item primeiro subitem
      2. 37 |
    2. segundo item segundo subitem
      3. 38 |
    39 |
    3. 40 |
  3. terceiro item
    4. 41 |
42 | 43 |

Lista ordenada alfabéticamente

44 | 45 |
    46 |
  1. Nome
    2. 47 |
  2. Telefone
    3. 48 |
  3. Endereço
    4. 49 |
  4. País
    5. 50 |
51 | 52 |

Exemplo de Lista Desordenada

53 | 54 |

Lista ordenada sem tipo

55 | 61 | 62 |

Lista ordenada Quadradinhos

63 | 69 | 70 |

Lista ordenada circulo vazado

71 | 77 | 78 | -------------------------------------------------------------------------------- /aula-4/tabelas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tabelas em HTML 6 | 7 | 8 | 9 | 10 |

Exemplo de Tabela

11 |
12 | 13 | 14 | 15 | 16 |

Estrutura de Tabela

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
NomeIdadeProfissão
Amanda34Deva
Ted22Estudante
Ralf26Designer
44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
Idade:22
Idade:34
57 | 58 |

Tags de Estrutura de Tabela

59 |

60 | 61 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
titulo 1titulo 2titulo 3
Body1 linha1Body2 linha1Body3 linha1
Body1 linha2Body2 linha2Body3 linha2
Foot 1Foot 2Foot 3


92 | 93 | 94 |

Criando células vazias

95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 |
 Valor
Item 1R$10,00
Item 2R$20,00
109 | 110 |

Mesclando células (colspan)


111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 |
NomeTelefones
Ted8888-88889999-9999
Junior1111-11112222-2222

130 | 131 |

Mesclando células (rowspan)


132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 |
Primeiro Nome:Ted
Telefone:8888-8888
9999-9999

146 | 147 | -------------------------------------------------------------------------------- /aula-3 Prática/tabelas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tabelas em HTML 6 | 7 | 8 | 9 | 10 |

Exemplo de Tabela

11 |
12 | 13 | 14 | 15 | 16 |

Estrutura de Tabela

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
NomeIdadeProfissão
Amanda34Deva
Ted22Estudante
Ralf26Designer
44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
Idade:22
Idade:34
57 | 58 |

Tags de Estrutura de Tabela

59 |

60 | 61 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
titulo 1titulo 2titulo 3
Body1 linha1Body2 linha1Body3 linha1
Body1 linha2Body2 linha2Body3 linha2
Foot 1Foot 2Foot 3


92 | 93 | 94 |

Criando células vazias

95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 |
 Valor
Item 1R$10,00
Item 2R$20,00
109 | 110 |

Mesclando células (colspan)


111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 |
NomeTelefones
Ted8888-88889999-9999
Junior1111-11112222-2222

130 | 131 |

Mesclando células (rowspan)


132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 |
Primeiro Nome:Ted
Telefone:8888-8888
9999-9999

146 | 147 | -------------------------------------------------------------------------------- /aula-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Primeiro site 7 | 8 | 9 | 10 |

11 | Lorem ipsum dolor sit amet, 12 | consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 13 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 14 | 15 |



16 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 17 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 18 |

19 | 20 |

Introdução ao Front-end

21 |

Introdução ao Front-end

22 |

Introdução ao Front-end

23 |

Introdução ao Front-end

24 |
Introdução ao Front-end
25 |
Introdução ao Front-end
26 | 27 |

28 | 29 | Minha frase em negrito! 30 |
31 | Minha frase em italico! 32 |
33 | Minha frase forte! 34 |
35 | Minha frase pequena! 36 |
37 | Minha frase sublinhada
38 | Minha frase tachada
39 | Minha frase normal! 40 |

41 | 42 | 43 |

Lista

44 |

Lista ordenada

45 |
    46 |
  1. Comprar pão
    2. 47 |
  2. fazer o café
    3. 48 |
  3. Me alimentar
    4. 49 |
50 | 51 |

Lista ordenada pelo número que eu quiser

52 |
    53 |
  1. Estudar
    2. 54 |
  2. Montar um portfolio
    3. 55 |
  3. Arrumar um emprego!!!
    4. 56 |
57 | 58 |

Lista em ordem alfabética

59 |
    60 |
  1. Estudar
    2. 61 |
  2. Montar um portfolio
    3. 62 |
  3. Arrumar um emprego!!!
    4. 63 |
64 | 65 |

Lista em ordem de algarismo romano

66 |
    67 |
  1. Estudar
    2. 68 |
  2. Montar um portfolio
    3. 69 |
  3. Arrumar um emprego!!!
    4. 70 |
71 | 72 |

Lista desordenada

73 | 78 | 79 |

Lista desordenada quadradinhos

80 | 85 | 86 |

Lista desordenada circulo vazado

87 | 92 | 93 |

Tabelas

94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 |
titulo 1titulo 2titulo 3
Body1 coluna1Body2 coluna2Body1 coluna3
Body1 coluna1Body2 coluna2Body1 coluna3
Body1 coluna1Body2 coluna2Body1 coluna3
124 | 125 |

Inserindo imagens

126 |

Viola

127 | 128 |

Issa

129 | 130 |

131 | 132 |

Links

133 | G1 notícias 134 | 135 |

Formulários

136 | 137 |
138 |
139 | 140 |

141 | 142 |
143 | 144 |

145 | 146 |
147 | 148 |

149 | 150 |
151 | 152 | 153 |

154 | 155 | 156 |
157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /aula-3 Prática/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Primeiro site 7 | 8 | 9 | 10 | 11 | 12 |

São Sebastião caçarola

13 |

14 | Lorem ipsum dolor sit amet, 15 | consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 16 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 17 | 18 |



19 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 20 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 21 |

22 | 23 |

Introdução ao Front-end

24 |

Introdução ao Front-end

25 |

Introdução ao Front-end

26 |

Introdução ao Front-end

27 |
Introdução ao Front-end
28 |
Introdução ao Front-end
29 | 30 |

31 | 32 | Minha frase em negrito! 33 |
34 | Minha frase em italico! 35 |
36 | Minha frase forte! 37 |
38 | Minha frase pequena! 39 |
40 | Minha frase sublinhada
41 | Minha frase tachada
42 | Minha frase normal! 43 |

44 | 45 | 46 |

Lista

47 |

Lista ordenada

48 |
    49 |
  1. Comprar pão
    2. 50 |
  2. fazer o café
    3. 51 |
  3. Me alimentar
    4. 52 |
53 | 54 |

Lista ordenada pelo número que eu quiser

55 |
    56 |
  1. Estudar
    2. 57 |
  2. Montar um portfolio
    3. 58 |
  3. Arrumar um emprego!!!
    4. 59 |
60 | 61 |

Lista em ordem alfabética

62 |
    63 |
  1. Estudar
    2. 64 |
  2. Montar um portfolio
    3. 65 |
  3. Arrumar um emprego!!!
    4. 66 |
67 | 68 |

Lista em ordem de algarismo romano

69 |
    70 |
  1. Estudar
    2. 71 |
  2. Montar um portfolio
    3. 72 |
  3. Arrumar um emprego!!!
    4. 73 |
74 | 75 |

Lista desordenada

76 | 81 | 82 |

Lista desordenada quadradinhos

83 | 88 | 89 |

Lista desordenada circulo vazado

90 | 95 | 96 |

Tabelas

97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 |
titulo 1titulo 2titulo 3
Body1 coluna1Body2 coluna2Body1 coluna3
Body1 coluna1Body2 coluna2Body1 coluna3
Body1 coluna1Body2 coluna2Body1 coluna3
127 | 128 |

Inserindo imagens

129 |

Viola

130 | 131 |

Issa

132 | 133 |

134 | 135 |

Links

136 | G1 notícias 137 | 138 |

Formulários

139 | 140 |
141 |
142 | 143 |

144 | 145 |
146 | 147 |

148 | 149 |
150 | 151 |

152 | 153 |
154 | 155 | 156 |

157 | 158 | 159 |
160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /aula-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Primeiro site 7 | 8 | 9 | 17 | 18 | 19 | 20 | 21 |

São Sebastião caçarola

22 |

23 | Lorem ipsum dolor sit amet, 24 | consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 25 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 26 | 27 |

28 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 29 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 30 |

31 | 32 |

Introdução ao Front-end

33 |

Introdução ao Front-end

34 |

Introdução ao Front-end

35 |

Introdução ao Front-end

36 |
Introdução ao Front-end
37 |
Introdução ao Front-end
38 | 39 |

40 | 41 | Minha frase em negrito! 42 |
43 | Minha frase em italico! 44 |
45 | Minha frase forte! 46 |
47 | Minha frase pequena! 48 |
49 | Minha frase sublinhada
50 | Minha frase tachada
51 | Minha frase normal! 52 |

53 | 54 | 55 |

Lista

56 |

Lista ordenada

57 |
    58 |
  1. Comprar pão
    2. 59 |
  2. fazer o café
    3. 60 |
  3. Me alimentar
    4. 61 |
62 | 63 |

Lista ordenada pelo número que eu quiser

64 |
    65 |
  1. Estudar
    2. 66 |
  2. Montar um portfolio
    3. 67 |
  3. Arrumar um emprego!!!
    4. 68 |
69 | 70 |

Lista em ordem alfabética

71 |
    72 |
  1. Estudar
    2. 73 |
  2. Montar um portfolio
    3. 74 |
  3. Arrumar um emprego!!!
    4. 75 |
76 | 77 |

Lista em ordem de algarismo romano

78 |
    79 |
  1. Estudar
    2. 80 |
  2. Montar um portfolio
    3. 81 |
  3. Arrumar um emprego!!!
    4. 82 |
83 | 84 |

Lista desordenada

85 | 90 | 91 |

Lista desordenada quadradinhos

92 | 97 | 98 |

Lista desordenada circulo vazado

99 | 104 | 105 |

Tabelas

106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 |
titulo 1titulo 2titulo 3
Body1 coluna1AmandaBody1 coluna3
Body1 coluna1Body2 coluna2Body1 coluna3
Body1 coluna1Body2 coluna2Amanda
136 | 137 |

Inserindo imagens

138 |

Viola

139 | 140 |

Issa

141 | 142 |

143 | 144 |

Links

145 | G1 notícias 146 | 147 |

Formulários

148 | 149 |
150 |
151 | 152 |

153 | 154 |
155 | 156 |

157 | 158 |
159 | 160 |

161 | 162 |
163 | 164 | 165 |

166 | 167 | 168 |
169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | --------------------------------------------------------------------------------