Olá! Sou aluna full-Stack no SenacPE em parceira com porto digital M.I.N.A.S. Na minha migração de carreira, encontrei uma dificuldade muito grande em saber termos tec. Nossa classe tem um projeto integrador chamado "DichTec", que será um dicionário tec voltado à pessoas da área da tecnologia ou não. No momento, estou fazendo um pequeno resumo/rascunho para colaborar com o projeto e me aperfeiçoar em termos. Espero que também seja útil para vocês.
Front-End : Parte da programação que estuda o design de sites e plataformas; A parte mais "visível" dos códigos. Algumas linguagens usadas: HTML, CSS.
HTML : É uma linguagem usada para adicionar conteúdo e definir a estrutura de uma página web e é uma das principais linguagens utilizadas na criação de sites.
*ESTRUTURA HMTL* - Como montar um código html seguindo sua estrutura corretamente.
OBS: Para ficar mais fácil, pode-se adicionar um (!) exclamação e enter, irá aparecer toda a estrutura e info adicionais.
1. HEAD : Providencia informações gerais (metadados) sobre o documento, incluindo seu título e links para scripts e folhas de estilos.
2. BODY : Representa o conteúdo de um documento HTML. è permitido apenas um <body> por documento. Dentro do body, se encontra o HEADER, MAIN E FOOTER.
3. HEADER (body) : Representa o cabeçalho de uma página web.
4. MAIN (body) : Define o conteúdo principal dentro do <body> em seu documento ou aplicação
5. FOOTER (body) : Marca a área inferior, normalmente conhecida como rodapé, do conteúdo geral do documento ou do conteúdo de uma seção específica a qual ele está subordinado.
- Títulos < h1 > a < h6 > : Título que podem ser usados no código html. Geralmente, se utiliza apenas um h1, o restante pode-se repetir.
- Small : Texto pequeno, mas legível.
- Form < form > < /form > : Essa tag indica que está se iniciando/fechando um formulário.
- Input : É usado para criar controles interativos para formulários baseados na web para receber dados do usuário.
- Radio : É uma opção que pode ser marcada ou desmarcada, e possui como característica um pequeno círculo ao lado do texto
- Type : Especifica o tipo de conteúdo que essa tag link está importando, o valor do atributo como "text/html", "text/css" etc.
- Name : Dá um valor individual a cada um. Sem esses atributos o radio não funcionará adequadamente.
- Select : Representa um controle que apresenta um menu de opções.
- Option : É usado para criar um controle que representa um item dentro de um elemento no select.
- Textarea : Caixa de entrada para adicionar uma mensagem no site. Pode adicionar comando row.
- Row : Delimita o número de linhas dentro da textarea, influenciando seu tamanho.
- Placeholder : Dentro da textarea, ele tem a função de colocar uma pequena mensagem informativa da caixa.
- Parágrafo < p > < /p > : Indica que o texto iniciado dentro dessas tags é um parágrafo.
- Espaço < br > < /br > : Pula um pequeno espaço entre um código e outro.
- href : Acessa files da pasta ou fora dela através de ./ . Também se pode adicionar links através de copiar e colar a URL.
- img src : Acessa imagens ou gifs da pasta ou fora dela através de ./ . Após adicionar a imagem/ gif, é necessário colocar alt.
- alt : Descreve o conteúdo da img src ou source src para que o computador saiba do que se trata.
- width : Determina a largura da area do item em questão em pixels.
- height : Determina a altura da area do item em questão em pixels.
- source src : Acessa arquivo de áudio ou vídeo dentro da pasta ou fora dela através de ./ . Após colocar o áudio/vídeo, é necessário colocar type.
- video : Antes de colocar o source src para vídeo, se adiciona essa tag.
- audio controls : Insere controles no áudio, como pausa e velocidade.
- video controls : Insere controles no vídeo, como pausa e velocidade.
- mark : Representa um trecho de destaque em um texto.
- Negrito < b > e < /b > : Representa um techo em negrito de um texto.
CSS : É uma linguagem de estilo que é composta por classes, que permitem estilizar as páginas desenvolvidas com HTML.
| CLASS FONTS | FUNÇÃO |
|---|---|
| font | Altera propriedades da fonte |
| Font family | Família da fonte, se é cursiva ou fantasy etc |
| Font size | Tamanho da fonte |
| Font style | Altera estilo da fonte |
| Font Variant | Exibe o texto em pequena caixa-alta (versalete) ou fonte normal |
| Font Weight | Peso da fonte (negrito, itálico) |
| font size | Tamanho da fonte |
| CORES E FUNDOS | FUNÇÃO |
|---|---|
| Color | Altera propriedades da cor do texto |
| Background | Altera propriedades do fundo |
| Background color | Altera cor de fundo do site |
| Background Image | Altera cor do elemento |
| Background Repeat | Define se e como a imagem de fundo se repitirá |
| Background Attachment | Define se a imagem de fundo será fixa ou com rolagem |
| Background Position | Posição do fundo |
| TEXTOS | FUNÇÃO |
|---|---|
| Text Indent | Recuo à esquerda da primeira linha em um bloco de texto |
| Text Align | Alinhamento do texto (right, center, left, justify) |
| Text Decoration | Efeitos decorativos do texto, como sublinhado, piscando, etc |
| Letter Spacing | Espaçamento entre caracteres |
| Word Spacing | Espaçamento entre palavras |
| Text Transform | Letras em maiúsculas ou minúsculas (capitalize, uppercase, lowercase) |
| White Space | Definições sobre espaços em branco num determinado elemento |
| TABELAS | FUNÇÃO |
|---|---|
| Caption Side | Posição do título na tabela (top, bottom) |
| Table Layout | Define o algoritmo usado para a renderização da tabela (auto, fixed) |
| Border Collapse | O modelo de bordas a ser utilizado |
| Border Spacing | Distância entre as bordas |
| Empty Cells | Visibilidade das bordas de células sem conteúdo |
| ESPAÇAMENTO | FUNÇÃO |
|---|---|
| Padding Top | Distância utilizada para espaçamento em Superior |
| Padding Right | Distância utilizada para espaçamento em Direita |
| Padding Left | Distância utilizada para espaçamento em Esquerda |
| Padding Bottom | Distância utilizada para espaçamento em Inferior |
| Padding | Define de uma só vez a distância de espaçamento para todos os lados |
| TEXTOS | FUNÇÃO |
|---|---|
| Text Indent | Recuo à esquerda da primeira linha em um bloco de texto |
| Text Align | Alinhamento do texto (right, center, left, justify) |
| Text Decoration | Efeitos decorativos do texto, como sublinhado, piscando, etc |
| Letter Spacing | Espaçamento entre caracteres |
| Word Spacing | Espaçamento entre palavras |
| Text Transform | Letras em maiúsculas ou minúsculas (capitalize, uppercase, lowercase) |
| White Space | Definições sobre espaços em branco num determinado elemento |
Back-End : Parte da programação que estuda os códigos por trás do design. É mais ligado à parte "invisível" do banco de dados dos códigos. Algumas linguagens usadas: JavaScript, phyton, Java.
-
JavaScript : Linguagem de programação que permite adicionar itens e comandos por meio de códigos. Há alguns códigos fixos que utilizamos no JS:
*VARIÁVEIS* - Códigos obrigatórios do JavaScript para dar valor á alguma coisa. 1. CONST : Não flexível e mais indicada; não pode ser restituído novamente. 2. LET : Flexível e menos indicada; pode ser restituído novamente, mas não pode se alterar a variável. 3. VAR : Muito flexível e não indicada; pode ser restituído novamente, alterando a variável e seu valor. -
Array : Um array é um objeto usado na construção de listas no JS.
-
Alert : Cria uma página de alerta simples que imprimirá a mensagem escolhida.
-
If/Else ( Estrutura condicional ) : Permite executar alguns comandos se tiver uma ou mais condições. Também abreviada por "Function Arrow (=>)".
-
Full-Stack : Junção do Front-End com o Back-End. Geralmente, quem é Full-Stack Developer estuda os dois módulos, mas escolhe apenas um para se aprofundar por ter uma maior "afinidade".
- Criar uma pasta com seu nome em documentos.
- Abrir pasta no VScode e abrir terminal.
- No canto direito, setinha de +, clique em GIT BASH.
- Coloque git config --global user.name (seu nome de usuário aqui).
- Em seguida, git config --global user.email (seu email aqui).
- Digite git status para vericar se está logado corretamente.
- Abra o repositório que você deseja clonar.
- Clique no nome "<>Code".
- Copie o link que está abaixo.
- Abra na pasta onde você deseja clonar o repositório.
- Não precisa criar pasta, o repositório já criará sozinho.
- Clique com o botão direito do mouse no local desejado > mais opções > GitBash Here
- Digite o comando git clone.
- Ctrl V não funciona no git. Use Shift+Insert para colar o link do lado de git clone.
- Git status para verificar se foi clonado corretamente.
- Crie um repositório no Github. (Se for com READEME.md, ignore o tópico 5)
- Clique na pasta a qual você quer subir como repositório.
- Clique com o botão direito > mais opções > GitBash Here.
- Digite o comando git init > enter.
- Digite git add README.md > enter. (Opcional, não precisa colocar esse comando se você já criou o repositório com o README.md)
- Digite git commit -m " (seu commit aqui) " > enter.
- Digite git remote add origin (adicione o url do repositório criado no Github.) > enter.
- Digite git push -u origin master > enter.
- Git status para verificar se foi enviado corretamente.