Tatiane fornece dicas para melhorar o desenvolvimento front-end, incluindo aprender HTML, CSS, JavaScript, frameworks como AngularJS, testes, versionamento com GIT e inglês. Ela lista vários recursos como tags HTML5, seletores CSS, Flexbox, Grids e executores de tarefas, fornecendo links para aprender mais sobre cada tópico.

1. TATIANE AGUIRRES NOGUEIRA
@tatianeaguirres
PRÁTICAS PARA
MELHORAR O SEU
DESENVOLVIMENTO
FRONT-END

2. TATIANE AGUIRRES NOGUEIRA
Desenvolvedora Front-End na Object Edge Brasil
aguirres.tati@gmail.com
linkedin.com/in/tatianeaguirres
tatianeaguirres.blogspot.com.br
github.com/tatianeaguirres
@tatianeaguirres

3. Requisitos de mercado para Front-End

4. Vamos falar de...
• HTML
• CSS
• Pré-processadores CSS
• Design responsivo
• JavaScript
• Frameworks JS
• Testes no Front-End
• Executores de tarefas
• Versionamento de código - GIT
• Inglês
• Dicas finais

5. O que eu preciso saber sobre HTML?
HTML

6. Saiba diferenciar elementos, tags e atributos
HTML

7. Faça bom uso das tags HTML5
HTML
Formatação Forms/Inputs Iframes/Imagens Estilo/Semântica Programação
<abbr> <form> <iframe> <style> <script>
<address> <input> <img> <div> <noscript>
<b> <textarea> <map> <header> <embed>
<blockquote> <fieldset> <area> <main> <object>
<cite> <legend> <figcaption> <section> <param>
<code> <datalist> <figure> <article>
<small> <output> <picture> <details>

8. O que eu preciso saber sobre CSS?
CSS
seletor {
propriedade: valor;
}
body {
background-color: #FFF;
}

9. Use sempre boas práticas
CSS
.tittle {
color: rgba(255, 0, 0, 1);
}
h1 {
color: red;
}
.music-section {
max-width: 200vw;
max-height: 200vh;
width: 100%;
}
div {
height: 600px;
}
p {
font-size: 12px;
}
.text-content {
font-size: 2em;
font-size: 2rem;
}
Utilize rgba ao invés
do nome da cor
Utilize vw, vh e % ao
invés de px
Utilize em e rem ao
invés de px

10. Saiba como usar Seletores CSS corretamente
CSS
Seletor Exemplo Descrição
.class .titulo Seleciona todos os elementos com class=”titulo”
#id #nome Seleciona o elemento com id=”nome”
elemento>elemento div > p Seleciona todos os elementos <p> onde o pai é um elemento <div>
elemento[atributo=valor] h1[class=”titulo”] Seleciona o elemento <h1> onde class=”titulo”
:first-child div p:first-child Seleciona o primeiro elemento <p> dentro de uma <div>
:nth-child(n) div p:nth-child(2) Seleciona o segundo elemento <p> dentro de uma <div>

11. Pré-processadores CSS
CSS
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
#header {
color: #6c94be;
}
Exemplo em Less:
Texto compilado para CSS:

12. Layout responsivo com FLEX BOX
CSS
Aprenda brincando com o flexbox help: https://flexbox.help

13. Layout responsivo com GRIDS
CSS

14. Um estilo para cada dispositivo com MEDIA QUERIES
CSS

15. O que eu preciso saber sobre JavaScript?
JavaScript
Objeto Propriedades
pessoa.nome = Harley
pessoa.sobrenome = Quinn
pessoa.idade = 25
pessoa.telefone = 98765432
Métodos
pessoa.falar()
pessoa.andar()
pessoa.mascarChiclete()
pessoa.cantar()

16. Saiba escrever algoritmos em JavaScript
JavaScript
Aprenda JavaScript no site W3Schools:
https://www.w3schools.com/js/default.asp
Exercite o seu conhecimento em algoritmos:
http://www.thatjsdude.com/interview/js1.html

17. Principais Frameworks JavaScript
JavaScript

18. Testes no Front-End
Testes Funcionais / de Aceitação
Selenium Casper JS

19. Testes no Front-End
Visual Regression Testing

20. Testes no Front-End
Visual Regression Testing

21. Executores de tarefas
JavaScript Task Runners

22. Versionamento de Código
2017 Version Control Software

23. Inglês
Dicas uteis para aprender inglês
• Organize-se e faça um plano de estudos
• Estude diariamente
• Exponha-se ao idioma (filmes, séries, livros e músicas em inglês)
• Utilize apps para complementar seus estudos

24. Dicas finais - Links para aprender
• Tags HTML5: https://www.w3schools.com/TAgs/ref_byfunc.asp
• Seletores CSS: https://eliasnogueira.github.io/css-dinner/
• Flex Box Help: http://flexbox.help/
• Grids: https://www.w3schools.com/css/css_rwd_grid.asp
• Media Queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
• JavaScript: https://www.w3schools.com/js/default.asp
• Principais algoritmos: http://www.thatjsdude.com/interview/js1.html
• AngularJS: https://loiane.training/course/angular-2/
• Selenium Webdriver: http://eliasnogueira.com/arquivos_blog/selenium/desafio/
• Testes no Front-end: http://www.creativebloq.com/how-to/an-introduction-to-frontend-testing
• GitHub: https://guides.github.com/
• 80 dicas para aprender inglês sozinho: https://www.inglesnapontadalingua.com.br/2016/02/101-
dicas-para-aprender-ingles-sozinho.html
• Metodologias ágeis: http://www.annelisegripp.com.br/category/processos-e-metodologias/

25. Obrigada!
@tatianeaguirres