# data[].attributes.body
- repl.it
- git

# data[].attributes.body
sentir qual é o tom e temperatura da turma - TESTAR JÁ NA PRIMEIRA AULA
-- repl.it (login com o mesmo email e senha)
-- github (login com o mesmo email e senha)
-- kahoot (QUIZZZZZ)

# data[].attributes.body
explicar os emails  - mudar o nome
(tirar ênfase dos padrinhos, comentar que quem tiver curiosidade pode consultar no pdf)

# data[].attributes.body
oportunidades no mundo de tech
-- carreiras possíveis
-- tamanho da oportunidade

# data[].attributes.body
repassar com eles a ementa

# data[].attributes.body
as diferenças de front e back

# data[].attributes.body
pensamento computacional
-- pensar se começamos por JS
-- começar com fluxograma

# data[].attributes.body
fazer as perguntas finais
1. de 0 a 10, quanto você acha que compreendeu do assunto x?
2. Explica com suas palavras o principal aprendizado sobre o assunto x?

# data[].attributes.body
- Paradigmas overview

- Orientado a eventos e POO como enfoque

- Tipagem forte e fraca

- Linguagens de alto e baixo nível - JavaScript

# data[].attributes.body
- O que são

- Para que servem

- Declarar

- Tipos de dados

- String

- Number

- Boolean

- Lista

- Objeto

- NaN

- null

# data[].attributes.body
- >

- <

- >=

- <=

- ==

- !=

- ===

- !==

- Operadores Booleanos

- And (&&)

- Or (||)

- Not (!)

# data[].attributes.body
if,, if else, elif

# data[].attributes.body
For e while

# data[].attributes.body
- Por que usar?

- Declarar

- Assinatura

- Parametro

- Argumento

- Execução

- Retorno

- Escopo

# data[].attributes.body
Tags semâticas - ref: https://medium.com/reprogramabr/semanticahtml5-5252b4937f0a

- Input  (type text, type password, type email, type number, placeholder)

- ?

# data[].attributes.attachment_link.readable_text
Saiba mais sobre a mais nova versão do HTML e suas novidades conceituais e semânticas.

HTML ( HyperText Markup Language) é um linguagem de marcação muito conhecida e utilizada na criação de páginas web. Ela renderiza informações nos navegadores de internet juntamente com o CSS, JavaScript e outras linguagens de desenvolvimento web, permitindo que nós tenhamos acesso a todo o conteúdo de um site.

O HTML é como o esqueleto que dará forma às páginas. É a estrutura mais básica. Ele setoriza as diversas partes da página de acordo com o seu conteúdo, ou seja, ajuda a endereçar cada um dos elementos que a constitui, como os textos, imagens, menu de navegação, links, dentre outros. Posteriormente ele irá auxiliar a aplicação de outras funcionalidades a um site.

Na versão 5 do HTML as principais modificações estão na estrutura semântica das várias seções da página. A estrutura de divs ainda é utilizada, mas nesta versão da linguagem existem novas tags semânticas para cada grande seção (as divs mães).

É através de cada elemento semântico do HTML5 que os mecanismos de busca do Google e outros sites de pesquisa identificam o conteúdo da página e o elencam como mais ou menos relevante para os seus usuários. É uma prática indispensável para o tão falado !

Outro grande ponto é que através dessa estrutura os sites se tornam acessíveis para deficientes visuais que utilizam um leitor de voz para ler o conteúdo.

Vamos tratar aqui de alguns destes elementos:

< nav >

O elemento <nav> representa um menu de navegação na sua página. Normalmente é o primeiro elemento da nossa página, mas independentemente da posição que você escolher para a sua navbar é boa prática envolver o agrupamento de links com esta tag.

Exemplo de código:

< header >

É utilizado para representar o cabeçalho da página, de um documento ou <section>. É comum utilizá-lo para incluir a logo da empresa ou entidade, título da página, slogan ou uma descrição sobre a página/negócio.

Exemplo de código:

< main >

Este elemento é utilizado para definir qual é a seção principal do seu site. Aquele conteúdo de maior relevância para o usuário. Ao contrário do elemento <section>, é boa prática utilizar este elemento somente uma vez dentro do código.

Apesar de parecer indispensável muitos desenvolvedores não utilizam o main, o que torna o uso dessa tag um critério seu 😉.

Exemplo de código:

<main>
 <section>
 <div>

 <h2>Título da seção principal da página</h2>
 <p>Lorem ipsum dolor,sit amet consectetur adipisicing elit
 Ipsa cumque rem repellendus error recusandae minus iste ut!
 Nulla adipisci, non placeat natus accusamus maiores.</p>

 </div>
 </section>
</main>

< section >

Este elemento demarca um segmento ou seção da página. Geralmente contém um título seguido do conteúdo relacionado a este tópico.

Por exemplo: um restaurante deve separar o seu site em diversas seções que tratarão de um aspecto diferente do seu negócio. A primeira seção abordará uma rápida apresentação do restaurante, a segunda seção terá o cardápio do dia, a terceira seção falará sobre contato, localização e horário de funcionamento.

Para que fique mais claro observe o esquema de blocos abaixo:

Exemplo da disposição de elementos semânticos HTML visualmente.

É principalmente dentro deste elemento que setorizamos o conteúdo do site para que fique organizado e objetivo. Assim o usuário conseguirá compreender e encontrar facilmente onde cada tipo de informação está sendo apresentada a ele.

Exemplo de código:

<section>
 <div>
 <h2>Título da seção principal da página</h2>
 <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit
 Ipsa cumque rem repellendus error recusandae minus iste ut!
 Nulla adipisci, non placeat natus accusamus maiores.</p>
 </div>
</section>

< article >

Este elemento pode ser utilizado quando queremos incluir um conteúdo que independe de outras seções do HTML ou outro tipo de elemento mãe. É comumente utilizado para posts de blogs ou fóruns, um artigo de jornal, comentários de clientes e usuários.

É boa prática atribuir um título para cada <article> no seu código.

Exemplo de código:

<article>
 <h2>Título deste Artigo</h2>
 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 Ipsa cumque rem repellendus error recusandae minus iste ut!
 Nulla adipisci, non placeat natus accusamus maiores.</p>
</article>

< figure >

Elemento utilizado para envolver a inserção de figuras/imagens e seus atributos. Trás a possibilidade de atribuição de descrição da figura através da <figcaption>, envolvendo tudo isto em um elemento específico.

Exemplo de código:

Não esqueça do alt! - atributo da tag <img>

Este elemento é importantíssimo para promover a acessibilidade do seu conteúdo. O alt contém uma descrição da imagem que você está subindo para sua página e será esta descrição que o deficiente visual escutará quando o leitor de voz passar por este trecho de código.

Portanto, seja específico: descrever a cena representada na imagem, as cores, expressões faciais ou qualquer outro detalhe pode ajudar.

Exemplo de código:

< aside >

Este elemento é utilizado quando buscamos enfatizar um trecho de um conteúdo/artigo na página. Ou até mesmo para dispor um conteúdo à parte do restante da página, como uma sidebar.

É utilizado principalmente quando queremos chamar atenção para uma informação adicional ou enfatizar um trecho de texto que, sendo semanticamente 'codada' dentro de <aside> será posicionado separadamente do conteúdo principal.

Exemplo de código:

< footer >

O último elemento que gostaria de apresentar hoje é o <footer>, nosso querido rodapé de página. Geralmente é onde colocamos informações de direitos autorais, links para documentos, informações do autor, etc.

Exemplos de códigos:

O HTML5 é a evolução mais recente do padrão que define HTML e sua nova versão apresenta novos elementos, atributos e comportamentos ainda mais semânticos. Se você quer construir estruturas que são essenciais para o SEO da sua página, o HTML5 tem muito a acrescentar.

Existem outros elementos semânticos no HTML5 então não deixe de pesquisar e aplicar no seu código! Para mais informações sugiro estas duas fontes que também consultei para escrever este artigo. DevMedia e Mozilla Developer.

Dúvidas, críticas e sugestões? É só entrar em contato comigo!

Um abraço e até a próxima!

# data[].attributes.attachment_link.description
HTML ( HyperText Markup Language) é um linguagem de marcação muito conhecida e utilizada na criação de páginas web. Ela renderiza informações nos navegadores de internet juntamente com o CSS, JavaScript e outras linguagens de desenvolvimento web, permitindo que nós tenhamos acesso a todo o conteúdo de um site.

# data[].attributes.body
Seletores

- Tags

- Id

- Classe

- Composto

- Filtro de seleção
- :hover

- Placeholder

- focus

- Box model

- Unidades de medida (Px,  %, Vw / vh , Pt,  Em, Rem)

- Formatação

- Color ( Nome , Rgb ,  Hexadecimal,  rgba )

- Background-color

- Font-size

- font-weight

- Font-family

- Width

- Height

- Border

- Border-radius

- Background-image

# data[].attributes.body
Responsividade - Importância

Exemplos de sites - Mobile first

Media query

- Flexbox

- Falar que é um grid unidimensional - Flexbox froggy

- Justify-content

- Align-items

- Flex-direction

- Align-self

- Grid

- Grid garden

- Grid-area

- Grid-template-area

- Grid-template-rows

- Grid-template-columns

- grid-gap

- Usar o . para espaço vazio

# data[].attributes.body
Tag script

- defer

- Revisão de entrada e saída no browser

- Prompt

- Confirm

- Alert

- console.log

querySelector

- querySelectorAll

- InnerHTML

- Manipulção de classe

- Add

- Remove

- Toggle

- Toggle (force)

- Manipulação de estilo

- Eventos

- O que são

- Exemplos

- Onclick

- Onmouseenter

- Onmouseleave

- setTimeout()

- setInterval()

- clearInterval()

# data[].attributes.body
git e Github

- Versionamento

- O que é um repositório?

- O que é e pra que serve o github?

- Comandos Git

- Git init

- Git config

- Git status

- Git add

- Git diff

- Git commit -m “”

- Git log

- Git remote add origin

- Git push <link> master

- Git push -u origin master

- Git clone