Front-end para back-end developers
0 likes252 views
The document is a presentation by Elias Granja Jr. focused on front-end development for back-end developers, covering key concepts such as semantic HTML, CSS selectors, and object-oriented CSS. It emphasizes the importance of structure in HTML for accessibility and machine readability, while providing various coding examples. The text serves as a guide for transitioning from back-end to front-end development, highlighting best practices and tools like CSSlint.
![1 – ID(#header)
2 – Class(.promo)
3 – type(a)
4 - Adjacent Sibling(h2+p)
5 – Child (ul > li)
6 – Descendant(ul a)
7 – Attribute([type=”text])
8 – Pseudo-classes(a:hover)](https://image.slidesharecdn.com/frontend2backend-121206173206-phpapp02/85/Front-end-para-back-end-developers-23-320.jpg)
Front-end para back-end developers
- 1. Front-end para desenvolvedores back-end
- 3. Assuntos HTML “semântico” Seletores CSS CSS Orientado a objetos CSS Lint
- 4. <table>
- 5. <pessoas> <pessoa> <nome>Elias</nome> </pessoa> </pessoas>
- 7. <div>
- 9. H1,H2,H3...
- 10. Acessibilidade
- 11. css?
- 14. #gbql,.gbeu#gbql,.gbeui#gb #gbql{background-position:-242px 0;height:37px;width:95px}.gbet#gbq1,.gbeti#gb #gbq1,.gbes#gbq1,.gbesi#gb #gbq1{margin- left:16px}.gbeu#gbq1,.gbeui#gb #gbq1{margin-left:16px}.gbemi#gb .gbqldr,.gbem#gbqlw .gbqldr{max- height:71px;max-width:160px}.gbem#gbu,.gbemi#gb #gbu{margin-right:12px}.gbet#gbu,.gbeti#gb #gbu,.gbeu#gbu,.gbeui#gb #gbu,.gbes#gbu,.gbesi#gb #gbu{margin-right:0px}.gbeu#gbu .gbt,.gbeui#gb #gbu .gbt,.gbet#gbu .gbt,.gbeti#gb #gbu .gbt,.gbes#gbu .gbt,.gbesi#gb #gbu .gbt{margin-left:6px}.gbeti#gb .gbqldr,.gbet#gbqlw .gbqldr,.gbesi#gb .gbqldr,.gbes#gbqlw .gbqldr{max-height:57px;max- width:144px}.gbeui#gb .gbqldr,.gbeu#gbqlw .gbqldr{max-height:57px;max- width:124px}.gbes#gbmail,.gbesi#gb #gbmail{top:24px}.gbemi#gb #gbpr,.gbem#gbpr{left:28px}.gbemi#gb .gbqpa,.gbem#gbpr .gbqpa,.gbesi#gb .gbqpa,.gbes#gbpr .gbqpa{width:95px}.gbesi#gb #gbpr,.gbes#gbpr{left:16px}.gbemi#gb #gbg3 .gbmab,.gbem#gbg3 .gbmab,.gbemi#gb #gbgs4 .gbmab,.gbem#gbg4 .gbmab{margin:40px 0 0}.gbemi#gb #gbg1 .gbmab,.gbem#gbg1 .gbmab{margin:41px 0 0}.gbemi#gb #gbg3 .gbmac,.gbem#gbg3 .gbmac,.gbemi#gb #gbgs4 .gbmac,.gbem#gbg4 .gbmac{margin:41px 0 0}.gbemi#gb #gbg1 .gbmac,.gbem#gbg1 .gbmac{margin:42px 0 0}.gbesi#gb #gbg3 .gbmab,.gbes#gbg3 .gbmab,.gbesi#gb #gbgs4 .gbmab,.gbes#gbg4 .gbmab{margin:32px 0 0}.gbesi#gb #gbg1 .gbmab,.gbes#gbg1 .gbmab{margin:33px 0 0}.gbesi#gb #gbg3 .gbmac,.gbes#gbg3 .gbmac,.gbesi#gb #gbgs4 .gbmac,.gbes#gbg4
- 16. Vou ter que aprender css :(
- 17. Seletores
- 18. #blue_link a{}
- 20. Class Vs ID
- 21. .blue_link {}
- 22. #blue_link {}
- 23. 1 – ID(#header) 2 – Class(.promo) 3 – type(a) 4 - Adjacent Sibling(h2+p) 5 – Child (ul > li) 6 – Descendant(ul a) 7 – Attribute([type=”text]) 8 – Pseudo-classes(a:hover)
- 24. OOCSS
- 26. .botao_vermelho{ display: inline-block; text-decoration:none; width:100px; height:40px; background: red; } .botao_azul{ display: inline-block; text-decoration:none; width:100px; height:40px; background: blue; }
- 28. <a href=”bla” class=”botao vermelho”> <a href=”bla” class=”botao azul”>
- 33. .floatLeft{ float:left; }
- 34. nomenclatura
- 35. CSS Lint'll hurt your feelings http://csslint.net
- 37. HTML NÃO É VISUAL HTML BEM ESTRUTURADO É MELHOR ENTENDIDO POR MÁQUINAS E ACESSÍVEL. NAVEGADORES LEEM DA DIREITA PARA A ESQUERDA O SELETOR CSS
- 38. Perguntas?