├── classes.css ├── calendar.css ├── home.css ├── calendar.html ├── style.css ├── index.html ├── classes.html └── assets ├── exploring.svg └── firmware.svg /classes.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column-reverse; 4 | } -------------------------------------------------------------------------------- /calendar.css: -------------------------------------------------------------------------------- 1 | /* Regras de css que só se aplicarão para o calendário 2 | */ 3 | .calendar { 4 | background-color: lawngreen; 5 | display: inline-block; 6 | padding: 1rem; 7 | } 8 | 9 | 10 | -------------------------------------------------------------------------------- /home.css: -------------------------------------------------------------------------------- 1 | .container section:nth-child(odd) img{ 2 | float:left; 3 | margin-right: 1rem; 4 | margin-bottom: 1rem; 5 | } 6 | .container section:nth-child(even) img{ 7 | float:right; 8 | margin-left: 1rem; 9 | margin-bottom: 1rem; 10 | } -------------------------------------------------------------------------------- /calendar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calendário 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Coding Club! - Calendário

17 | 36 |
37 |
38 | 39 | 42 |
43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --medium-spring-green: rgba(113, 247, 159, 1); 3 | --medium-turquoise: rgba(61, 214, 208, 1); 4 | --keppel: rgba(21, 176, 151, 1); 5 | --orange-yellow: rgba(243, 182, 31, 1); 6 | --dark-lava: rgba(73, 57, 44, 1); 7 | 8 | --primary: var(--medium-spring-green); 9 | --secondary: var(--medium-turquoise); 10 | --tertiary: var(--keppel); 11 | --quaternary: var(--orange-yellow); 12 | --quinary: var(--dark-lava); 13 | } 14 | 15 | 16 | nav ul li { 17 | display: inline-block; 18 | } 19 | header { 20 | /* Cor do fundo do elemento */ 21 | background-color: var(--primary); 22 | /* Cor do texto do elemento */ 23 | color: var(--quinary); 24 | padding: 10px; 25 | } 26 | a, a:visited { 27 | color: var(--quinary); 28 | text-decoration: none; 29 | 30 | } 31 | a:hover { 32 | cursor: pointer; 33 | text-decoration: underline; 34 | } 35 | main a,main a:visited { 36 | color: var(--primary); 37 | } 38 | body { 39 | margin: 0; 40 | font-family: "Lucida Console", "Courier New", monospace; 41 | 42 | } 43 | a.current { 44 | font-weight: bold; 45 | color: var(--quaternary); 46 | } 47 | 48 | .wrapper { 49 | display: grid; 50 | grid-template-rows: auto 1fr auto; 51 | 52 | /* Just for parent demo size */ 53 | height: 100vh; 54 | } 55 | footer { 56 | background-color: var(--quinary); 57 | color: var(--quaternary); 58 | padding: 0.5rem; 59 | } 60 | main { 61 | background-color: var(--tertiary); 62 | color: var(--quinary); 63 | display: flex; 64 | justify-content: center; 65 | padding-top:1rem; 66 | padding-bottom: 1rem; 67 | } 68 | main section::after { 69 | content: ""; 70 | display: table; 71 | clear: both; 72 | } 73 | main > .container { 74 | max-width: 700px; 75 | background-color: inherit; 76 | } 77 | .title { 78 | font-size: 3rem; 79 | } 80 | dt{ 81 | font-weight: bold; 82 | margin-top:1rem; 83 | } 84 | dd { 85 | margin-left: 0; 86 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CodePen - CodingClub 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 |

Coding Club!

18 | 19 | 38 |
39 |
40 |
41 |
42 |
43 |

Aula atual

44 | tech image 45 |

HTML/CSS E layouts

46 |

Uma visão dos principais tipos de layout modernos: grid, flex

47 |

Apresentação de css vars, float e pseudoelemtnos.

48 | 49 |
50 |
51 |
52 |

Objetivo

53 | tech image 54 |

O curso seguirá uma abordagem pragmática, acessível e empoderadora.

55 |

Com feedbacks constantes e utilizando-se de ferramentas existentes.

56 |

O objetivo primário é ajudar alunos a terem as habilidades necessárias para se tornar desenvolvedores 57 | front-end. Eventualmente queremos dar as habilidades necessárias para se tornarem desenvolvedores fullstack. 58 |

59 |

O ensino tentará ser prático e focado em portfólio e aprendizado avançado com o intuíto de dar ao aluno a 60 | segurança necessária para conseguir um emprego desejado o mais cedo possível.

61 |
62 |
63 | 64 |
65 | 66 |
67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /classes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Aulas 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Coding Club! - Calendário

15 | 28 |
29 |
30 |
31 |
32 |

Aula 1 - Introdução a programação com blockly

33 |
34 |

35 | Utilizamos um 36 | editor 37 | feito em 38 | blockly para 39 | começarmos um jogo e aprendermos alguns conceitos de programação 40 |

41 |
42 |
43 |
44 |

Aula 2 - Revisão de programação

45 |
46 |

47 | Continuamos com a plataforma do 48 | editor e 49 | introduzimos o conceito de procedures 50 |

51 |

Pendência arrumar colisões

52 |
53 |
54 |
55 |

Aula 3 - Mercado e posições

56 |
57 |

Uma visão geral de pessoas , mercados e possíveis posições

58 | 72 |
73 |
74 |
75 |

Aula 4 - Introdução à html e CSS

76 |
77 |

78 | Uma visão introdutória de HTML e CSS utilizando-se do 79 | codepen. Realizamos uma 80 | exportação para o github pages 81 |

82 | 96 |
97 |
98 |
99 |

Aula 5 - desenvolvimento HTML e CSS no computador

100 |
101 |

Uma visão sobre layouts

102 |
103 |
104 |
105 |

Aula 6 - Novo formato, Github pages, Git, VsCode

106 |
107 | 121 |
122 |
123 |
124 |

Aula 7 - HTML, CSS, JS, DOM e Forms

125 |
126 | 134 |
135 |
136 |
137 |

138 | Aula 8 - Calculadora com HTML, CSS e JS. Experimentação e prática 139 |

140 |
141 | 155 |
156 |
157 |
158 |

159 | Aula 9 - Calculadora com HTML, CSS e JS. Experimentação CSS, Box 160 | model e Flex 161 |

162 |
163 | 183 |
184 |
185 |
186 |

Aula 11 - TDD com node.js

187 |
188 | 202 |
203 |
204 |
205 |

Aula 14 - Vercel, react e TS

206 |
207 | 221 |
222 |
223 |
224 |
225 | 226 |
227 | 228 | 229 | -------------------------------------------------------------------------------- /assets/exploring.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/firmware.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------