¡GoConqr estrena diseño! Cuéntanos qué te parece.

Regístrate gratis

Fichas

Sin título

Lucas Loureiro Portugués 53 fichas

Fichas del conjunto (53)

  1. 1O que vou precisar ter no meu PC?O que vou precisar ter no meu PC?
  2. 2Se você quer ser FullstackFront-end - HTML CSS JAVASCRIPT BOOTSTRAP REACT VUE ANGULAR
  3. 3Como a internet funciona?Internet é simplesmente um ato de computadores se comunicando
  4. 4O que é HTTP / HTTPS?Onde naquele servidor eu vou me conectar/n http- vai pra porta 80 /n https- vai pra porta 443 /n https criptografada/n protocolo que especifica que o usuário quer acessar a porta web/n
  5. 5Como funcionam os navegadores?O meu navegador que interpreta o código ,e exibe bonitinho, não o servidor. W3C padroniza o processo de interpretação(paras od navegadores)
  6. 6DNS e domíniosP do Servidor é associado ao Sistema de Nome de Domínios-DNS Esse sistema é responsável por converter o IP do servidor, local onde está hospedado os arquivos do site, para um nome de domínio. Dessa forma, todo site é acessado através do domínio (nome do site) e não através de números (IPs). Domínio é o endereço do seu site
  7. 7Como registrar um domínio?Domínio nacional .br Registro.br (site) Servidores DNS SERVIDOR 1, e servidor 2(se o 1 não aceitar) Contato técnico - sou eu Contato administrativo - patrão Contato de cobrança - quem paga NAMECHEAP Também tem troca de DNS Redirecionamento através do DNS para apontar para o mesmo domínio
  8. 8Entendendo hospedagens e servidoresHospedagem(mantém um site no ar) Tipos: Hospedagem compartilhada: um computador para vários clientes(menos seguro e imprevisível) Servidor dedicado: para mim mesmo. VPS: um servidor parrudão e clones do servidor dentro dele mesmo. (divisão bem maior, cada cliente com um computador) Cloud - similar ao VPS, porém bem mais flexível e potente. de acordo com a demanda. Pago por hora usada. Empresas: Hostgator NO email: Painel de controle Endereços DNS
  9. 9Chrome Tools: ElementsElements é o HTML- Styles é o CSS- Computed é o css específico(naquele momento) do elemento selecionado- Ctrl Shift C - selecionar elemento na tela para inspecionar- Botão direito nos elementos(excluir, editar)
  10. 10Chrome Tools: ConsoleConsole Executar código de Javascript- Tem como limpar- círculo com faixa no topo esquerdo- Engrenagem de baixo : selecionar oque eu quero que apareça- LogRequests: mostra só os erros.(esconde requisições)(tem outro local para ver)-? Preserve log - preservar meu histórico
  11. 11Chrome Tools: NetworkStatus: 200 quando deu certo/ Type: documento, script,css/ Initiator : quem iniciou / Size: tamanho/ Time: tempo para carregar/ XHR/ Requisições internas/ Headers : URL requisitado, método/ Response: reposta pura/ Preview : reposta mmontada/ Requests total/ Transferred: kbs bts usados/ Resources- quanto de recursos/ Finish- tempo de finalização/ DOMContentLoaded: Quanto pra montar a tela inteira depois de receber o conteúdo/ Load - tempo de carregamento de tudo ao todo/
  12. 12Chrome Tools: ResponsividadeToogle device tollbar- Ctrl Shift M Fit to window Rotate
  13. 13O que é HTML e pra quê serve?Navegador interpreta os códigos e mostra coisas visíveis HTML manda códigos para o navegador HTML(CÓDIGOS ESTRUTURAIS) CSS(ESTILOS)
  14. 14O que é tag?<> ABERTURA DE TAG - - FECHAMENTO DE TAG/ H1-H6 - CABEÇALHO/ P - PARÁGRAFO/ STRONG - NEGRITO/ U - UNDERLINE/ UNS ELEMENTOS FICAM ABAIXO DO OUTRO, OUTROS NÃO./ TAGS DENTRO DE OUTRA(S) PODEM/ TEM TAGS QUE ABREM E FECHAM NELAS MESMO. EX: HR = LINHA HORIZONTAL
  15. 15AtributosTag a-link Atributos somente na tag de abertura. href = 'pra onde vai' Tag img - imagem src = 'fonte da imagem(onde ele está)' width = 'largura' height = 'altura'
  16. 16A base geral do CSSNome do elemento{ } #id do elemento{ } .class do elemento{ } elemento, outro elemento{ } elemento outroelemento{}
  17. 17Cores no CSSCores- Nome- RGB- 255 HEX- 0-9 a-f
  18. 18Bordas no CSSsolid - dotted- dashed- border-radius- para fazer uma bola põe o border-radius a metade do quadrado
  19. 19Margins e Padding no CSSTodo elemento tem: selecionar elemento rolar pra baixo no styles para ver tabela Conteúdo- borda- padding(espaçamento interno)- margin(espaçamento externo) top right bottom left
  20. 20Width/height no CSSno styles para ver tabela Conteúdo- borda- padding(espaçamento interno)- margin(espaçamento externo) top right bottom left
    Margins e Padding no CSS
    width AUTO: quer dizer nada width px- width %- width vw- min-width- max-width
  21. 21Dicas sobre Width/HeightTamanho real =borda + elemento + padding *{ box sizing : content-box= vem por padrão. } box sizing :border-box = faz o tamanho real ser o tamanho do elemento mesmo.
  22. 22Links (1/2)Target='_blank' = abre o link em outra página title='tolltip' passar o mouse por cima
  23. 23Links (2/2)ID de parte específica no link para ir para ela própria na página- link:hover{ quando passar o mouse por cima}- link:visited{ já visitado}
  24. 24Formatação de textos no HTML= negrito = sem semântica de importância = negrito = com semântica de importância(uso frequente) = itálico = sem semântica de importância = itálico = com semântica de importância(uso frequente) = diminui a importância = risca o texto('deleta') = marca texto = diminui e sobe = diminui e desce
  25. 25Comentários no HTMLComentários
  26. 26Formatação de textos no CSS (1/2)p{ color: font-size: font-weight: font-family: text-align: } a{ text-decoration:none; overline,underline, line-through
  27. 27Formatação de textos no CSS (2/2)p{ text-transform: upppercase; lowercase. letter-spacing. word-spacing line-height text-shadow: item 1: o quanto pra direita vai a sombra , item 2 : o quanto pra baixo vai a sombra, item 3: esfumaçamento, item 4 : cor.
  28. 28Adicionando Fontes ExternasUsar o link do google fonts
  29. 29Listas no HTMLul, css='list-style-type:disc;square;circle;none' ol, type='1;A;a;I;i' ol, start='45', começar daí Nested list = uma lista dentro do meu item de uma lista
  30. 30Tabelas no HTML= table row = informa ao navegador = informa ao navegador = table data = table head
  31. 31Tabelas no CSStable{ width: border: } th, td { border: padding: text-align } thead{ background-color: } tbody{ background-color: } tr:hover{ color } tbody tr:hover{ background-color: } tbody td{ border-bottom: } :nth-child(even) par :nth-child(odd) ímpar
  32. 32FormuláriosGET mostra na url e POST é internamente
  33. 33InputINPUT - captar informações do usuário- type='text' campo de texto- type='password' campo de senha- type='checkbox marca e desmarca- 2x type='radio' name = 'mesmo nome'- type='submit' botão de envio do formulário- type='email' tem exigências de um email- outro item do input é o name, nomenclatura pra indentificar a informação- value='valor pré estabelecido'- value no submit é o nome do botão-
  34. 34Inputs no HTML5
  35. 35Selectclica e ele mostra as opções disponíveis. O select tem um name(indentificador.). dentro do select coloco a tag (Abre e fecha). Com value na option envia-se o value, sem o value envia-se o nome entre a tag option. selected= aparece pré selecionado.. Size= quantos itens podem ser selecionados. Multiple= múltipla escolha.
  36. 36Textareacss- width , height
  37. 37ButtonTexto do próprio botão serve como submit
  38. 38LabelAqui você digita O nome: Digite Digite
  39. 39Formatando formulários no CSS (1/2)label -padrão display inline.- mudar para block label{ display:block; margin-bottom: } input[type=text]{ padding: wiidth: }
  40. 40Formatando formulários no CSS (2/2)borda de foco = outline = posso removê-la zerando.- textarea{ height: resize:none; } button{ padding: font-size: border: background-color: } button:hover
  41. 41Tags Fieldset e LegendFieldset- conjunto de campo legend- abaixo do fieldset fieldset{ background-color: margin-bottom: border: } legend{ background-color: color: padding: }
  42. 42Validações Nativas 1required torna campo obrigatório minlength= tamanho mínimo do texto, número maxlength= tamanho máximo do texto, número
  43. 43Validações Nativas 2type='number' step= '2' dois em dois..., min='18' max= '120' type='date' min='põe a data' max='põe a data' pattern=' title=é a explicação do que é esse campo.
  44. 44Input type hiddentype ='hidden' name='' value='' hidden = indentifica o usuário internamente, informação que não convém o usuário interagir.
  45. 45Input type fileArquivo enviado pelo método post. type='file' accept='image/*' qualquer tipo de imagem type='file' accept='application/pdf' arquivo do tipo pdf Quando eu estou enviando um arquivo enctype='tipo de encriptação' = 'multipart/form-data' Converte arquivo em bytes
  46. 46HerançaPropriedades herdadas geralmente são referentes à texto
  47. 47EspecificidadeClass ganha da tag
  48. 48Unidades de medida absolutapx- pt- in(polegadas)- cm- mm Não interferência de nada ao redor
  49. 49Unidades de medida relativas (fonte) 1em= baseado no font-size do item pai. rem = baseado no root HTML rem padrão 16px
  50. 50Unidades de medida relativas (fonte) 2Porcentagem é geralmente para estruturas ch- somente para monospace
  51. 51Unidades de medida relativas (viewport)Porcentagem é referente ao espaço disponível daquele elemento vw e vh são disponíveis baseado na tela inteira, não importa onde o elemento esteja Bom para estruturar gerais vmin entre a largura e altura verefica qual é o menor e o utiliza
  52. 52O inheritinherit herde do seu pai
  53. 53Tipos de valores para coresrgb- hex - hsl currentColor= efeito herança

Información

Descripción
Fichas sobre Sin título, creado por Lucas Loureiro el 26/10/2022.
Creado por
Lucas Loureiro
Visitas
0
Valoración

Escríbenos

¿Sobre qué es tu mensaje?

¿Qué te parece el nuevo diseño?

¿Te gusta?