Baixar para ler offline
Carregado porMatheus Thomaz
Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}
1) O documento apresenta um cronograma de estudos em HTML e CSS para um desenvolvedor front-end. 2) Inclui explicações sobre as principais tags e atributos em HTML e CSS, além de tópicos como pré-processadores, semântica e HTML5. 3) Fornece detalhes sobre a estrutura e significado semântico de páginas web.
Mais conteúdo relacionado
Semelhante a Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}
Minicurso Iniciando no Mundo Front-End - Dia 02 - SASPI {5}
- 1. Matheus S. Thomaz Front-end Developer
- 2. CRONOGRAMA Matheus S.Thomaz Front-end Developer
- 3. Matheus S. Thomaz Front-end Developer /Cronograma HTML CSS
- 4. Matheus S. Thomaz Front-end Developer HTML
- 5. Matheus S. Thomaz Front-end Developer /HTML Hypertext Markup Language Linguagem base da web
- 6. Matheus S. Thomaz Front-end Developer /HTML 1. <!DOCTYPE html> 2. 3. <html lang="pt-br"> 4. <head> 5. <meta charset="utf-8"> 6. <title>Título da página</title> 7. </head> 8. <body> 9. // conteudo 10.</body> 11.</html>
- 7. Matheus S. Thomaz Front-end Developer /HTML 1. <!DOCTYPE html> Determina o tipo de documento.
- 8. Matheus S. Thomaz Front-end Developer /HTML 1. <html lang="pt-br"> 2. </html> Delimita o html.
- 9. Matheus S. Thomaz Front-end Developer /HTML 1. <head> 2. <meta charset="utf-8"> 3. <title>Título da página</title> 4. </head> Valores que o navegador usa para renderizar a página.
- 10. Matheus S. Thomaz Front-end Developer /HTML 1. <body> 2. // conteudo 3. </body> Onde todo conteúdo da tela deve estar.
- 11. Matheus S. Thomaz Front-end Developer HTML principais tags
- 12. Matheus S. Thomaz Front-end Developer /HTML principais tags <style></style> <link rel="stylesheet" href="">
- 13. Matheus S. Thomaz Front-end Developer /HTML principais tags <script></script> <script src=””></script>
- 14. Matheus S. Thomaz Front-end Developer /HTML principais tags <div>
- 15. Matheus S. Thomaz Front-end Developer /HTML principais tags <section>
- 16. Matheus S. Thomaz Front-end Developer /HTML principais tags <aside>
- 17. Matheus S. Thomaz Front-end Developer /HTML principais tags <article>
- 18. Matheus S. Thomaz Front-end Developer /HTML principais tags <header>
- 19. Matheus S. Thomaz Front-end Developer /HTML principais tags <footer>
- 20. Matheus S. Thomaz Front-end Developer /HTML principais tags <nav>
- 21. Matheus S. Thomaz Front-end Developer /HTML principais tags <p>
- 22. Matheus S. Thomaz Front-end Developer /HTML principais tags <a>
- 23. Matheus S. Thomaz Front-end Developer /HTML principais tags <ol>
- 24. Matheus S. Thomaz Front-end Developer /HTML principais tags <ul>
- 25. Matheus S. Thomaz Front-end Developer /HTML principais tags <img>
- 26. Matheus S. Thomaz Front-end Developer /HTML principais tags <video>
- 27. Matheus S. Thomaz Front-end Developer /HTML principais tags <audio>
- 28. Matheus S. Thomaz Front-end Developer CSS
- 29. Matheus S. Thomaz Front-end Developer /CSS Cascading Style Sheets Especifica como os documentos são apresentados ao usuário.
- 30. Matheus S. Thomaz Front-end Developer /CSS É uma linguagem simples e fácil. 15 atributos diariamente. Aprenda algo novo todos os dias.
- 31. Matheus S. Thomaz Front-end Developer CSS principais atributos
- 32. Matheus S. Thomaz Front-end Developer /CSS principais atributos { background: cor || url || repeat || posição } Especifica a cor || imagem || posição da imagem || repetição da imagem do plano de fundo do documento. cor: #111, rgb(255,255,255), rgba(255,255,255,0.5) url: url(../img/image.png) repeat: repeat-x, repeat-y, no-repeat posição: 10px -50px
- 33. Matheus S. Thomaz Front-end Developer /CSS principais atributos { border: largura || estilo || color } Define a largura || estilo || cor das bordas de um objeto. largura: 2px estilo: dotted, solid, dashed… color: #111, rgb(255,255,255), rgba(255,255,255,0.5)
- 34. Matheus S. Thomaz Front-end Developer /CSS principais atributos { color: color } Define a cor do texto do elemento. color: #111, rgb(255,255,255), rgba(255,255,255,0.5)
- 35. Matheus S. Thomaz Front-end Developer /CSS principais atributos { display: none } Determina se um elemento estará visível e reserva um espaço para o mesmo. display: none, block, inline, inline-block...
- 36. Matheus S. Thomaz Front-end Developer /CSS principais atributos { position: absolute} Determina como o elemento está posicionado na página. position: absolute, relative, static, fixed, inherit
- 37. Matheus S. Thomaz Front-end Developer CSS Pre-processadores
- 38. “With great powercomes great responsability” voltaire
- 39. Matheus S. Thomaz Front-end Developer /CSS pré-processadores É um programa que recebe um texto e efetua conversões léxicas nele.
- 40.
- 41. Conversões léxicas épraticamente o mesmo que pegar um texto em português, escrito de forma informal, (por exemplo, com gírias e sem uma pontuação correta) e transforma-lo em um texto escrito de forma formal.
- 42. Matheus S. Thomaz Front-end Developer /CSS pré-processadores Resumindo Pego isso: div { background: (@corLorem + #222) * 1.5; } E transformo nisso: div { background: #4d4d4d; }
- 43. Matheus S. Thomaz Front-end Developer /CSS pré-processadores Definindo: Uma linguagem que, após compilada, gera CSS.
- 44. Matheus S. Thomaz Front-end Developer /CSS pré-processadores CSS Desorganizado. Não tem padrão. Folhas se estilo muito extensas. Repetitivo. Uso de prefixos. Pré-processador Organização Imports Aninhamento (nested) Variáveis Funções Mixins
- 45. Matheus S. Thomaz Front-end Developer /CSS pré-processadores LESS SASS Stylus
- 46. SEMÂNTICA Matheus S.Thomaz Front-end Developer
- 47. Matheus S. Thomaz Front-end Developer /Semântica Semântica é o estudo das relações entre os signos e símbolos e o que eles representam.
- 48. Matheus S. Thomaz Front-end Developer /Semântica Um dos fundamentos do front-end.
- 49. Matheus S. Thomaz Front-end Developer /Semântica A maioria está relacionada a aspectos da natureza do conteúdo existente ou esperado.
- 50. Matheus S. Thomaz Front-end Developer /Semântica <h1>Titulo</h1> <a>link</a>
- 51. Matheus S. Thomaz Front-end Developer /Semântica <p>Titulo</p> <button>link</button>
- 52. Matheus S. Thomaz Front-end Developer /Semântica <p>Titulo</p> <p>Parágrafo</p> <button>link</button> <button>Botão</button>
- 53. Matheus S. Thomaz Front-end Developer /Semântica CSS Classes semânticas são menos importantes que HTML semânticoo.
- 54. Matheus S. Thomaz Front-end Developer /Semântica CSS Classes e ids devem ser usadas como âncoras para css e javascript.
- 55. Matheus S. Thomaz Front-end Developer /Semântica CSS Diferencie classes de estilo com classes de interação.
- 56. Matheus S. Thomaz Front-end Developer /Semântica CSS CSS .loremIpsum | .lorem-ipsum #loremIpsum | #lorem-ipsum JS .js-loremIpsum
- 57. Matheus S. Thomaz Front-end Developer /Semântica CSS Utilize nomes de classes e ids que comuniquem informações úteis a outros desenvolvedores.
- 58. Matheus S. Thomaz Front-end Developer /Semântica CSS .menuOpcoes .container
- 59. Matheus S. Thomaz Front-end Developer /Semântica CSS O estilo vai se repetir em vários elementos? Utilize classes para cada bloco de repetição.
- 60. Matheus S. Thomaz Front-end Developer /Semântica CSS .btn-cancelar { width: 10px; heigth: 15px; padding: 10px 5px; background: red; } .btn-aceitar { width: 10px; heigth: 15px; padding: 10px 5px; background: green; }
- 61. Matheus S. Thomaz Front-end Developer /Semântica CSS .btn-cancelar { width: 10px; heigth: 15px; padding: 10px 5px; background: red; } .btn-aceitar { width: 10px; heigth: 15px; padding: 10px 5px; background: green; }
- 62. Matheus S. Thomaz Front-end Developer /Semântica CSS .btn { width: 10px; heigth: 15px; padding: 10px 5px; } .btn-cancelar { background: red; } .btn-aceitar { background: green; } 1. <!DOCTYPE html> 2. 3. <a class=”btn btn-aceitar”> 4. Aceitar 5. </a> 6. <a class=”btn btn-cancelar”> 7. Cancelar 8. </a>
- 63. Matheus S. Thomaz Front-end Developer /Semântica CSS É útil estruturar a nomenclatura das classes.
- 64. Matheus S. Thomaz Front-end Developer /Semântica CSS component-name component-name--modifier-name component-name__sub-object component-name__sub-object--modifier-name
- 65. Matheus S. Thomaz Front-end Developer /Semântica CSS .btn { (componente) width: 10px; heigth: 15px; padding: 10px 5px; } .btn-cancelar { (modificador) background: red; } .btn-aceitar { (modificador) background: green; } .texto { (sub-objeto) color: red; }
- 66. Matheus S. Thomaz Front-end Developer /Semântica CSS .btn (componente) .btn--cancelar (modificador) .btn__texto (subcomponente) .btn__texto--cancelar (modificador do subcomponente)
- 67. Matheus S. Thomaz Front-end Developer /Semântica HTML5 Novas tags resulta em nova estrutura.
- 68. Matheus S. Thomaz Front-end Developer /Semântica HTML5 <div id=”header”> // header </div> <div id=”footer”> // footer </div>
- 69. Matheus S. Thomaz Front-end Developer /Semântica HTML5 <header id=”header”> // header </header> <footer id=”footer”> // footer </footer>
- 70. Matheus S. Thomaz Front-end Developer /Semântica HTML5 <div id=”content”> <div class=”noticia”> <h2>Titulo</h2> <p>Lorem ipsum</p> <span>10/03/2014</span> </div> </div>
- 71. Matheus S. Thomaz Front-end Developer /Semântica HTML5 <section id=”content”> <article class=”noticia”> <header> <h2>Titulo</h2> </header> <p>Lorem ipsum</p> <footer> <span>10/03/2014</span> </footer> </articlediv> </section>
- 72. Matheus S. Thomaz Front-end Developer /Semântica HTML5 <div id=”menu-lateral”> <ul> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> </ul> </div>
- 73. Matheus S. Thomaz Front-end Developer /Semântica HTML5 <aside id=”menu-lateral”> <nav> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> </nav> </aside>
- 74. Matheus S. Thomaz Front-end Developer /Semântica HTML5
- 75. Matheus S. Thomaz Front-end Developer