SlideShare a Scribd company logo
1 of 41
Download to read offline
André Felizardo
Carreira Front-End
Agregando valor através de Interfaces
23 de Setembro, 2017
Agenda
1. Introdução
2. O que é Front-end
3. Base Front-end
4. Tipos de Front-end
5. Principais tecnologias do momento
6. Por onde começar
7. Conclusão
Introdução
André Felizardo
Engenheiro Front-end | Huge
Rio
4 anos de experiência
Front-end, Agile, Treinamentos
/andreluis.felizardo
/in/andreluisfelizardo
andrefelizardo.com.br
Nós criamos experiências que transformam
marcas, desenvolvem negócios e
melhoram a vida das pessoas.
O que é Front-end
Back-end
Front-End
Base Front-end
Base Front-end
•HTML(5)+
•CSS(3)+
•Javascript
• Editor de Imagens(Photoshop, Gimp, Sketch)
HTML
• HyperText Markup Language
• <p></p>
• <a href=“www.google.com”>Google</a>
• Versão atual do HTML
HTML
CSS
• Cascading Style Sheets
• body { color: white; }
• Versão atual do CSS
HTML
HTML + CSS
Javascript
• Linguagem de programação interpretada
• Cresceu junto com o Chrome e os processadores
• Também é usada no Back-end (Node.js)
• Também é usada em ambientes desktop
(Electron)
• Versão atual do ECMAScript
HTML
Tipos de Frontend
Principais Tecnologias
do momento
#Hype
Bootstrap
• Framework Front-end
• Facilita criar sites responsivos sem escrever CSS
• Foi criado por desenvolvedores para agilizar a
criação de sistemas
Sass
• Pré-processador de CSS
• Facilita reutilização de código
• Focado na produtividade
• Bootstrap 4 o utiliza
Gulp
• Automatizador de tarefas Front-end
• Facilita um workflow profissional
• Fácil de usar. Eficiente. Qualidade. Fácil de
aprender
Angular(4.4.1)
• Framework Javascript
• Objetivo de facilitar a construção de aplicações
que podem ser reutilizadas para aplicativos
mobile, web e até desktop
• Talvez o mais famoso para quem não é Front-end
React.js
• Framework Javascript
• Desenvolvida por engenheiros do Facebook
• Desenvolvimento orientado a componente
• As grandes empresas estão usando
Vue.js
• Framework Javascript
• Também é orientado a componentes
• Grande diferencial é a simplicidade
Por onde começar?
Caminho das pedras
• Aprenda a base (HTML, CSS e JS)
• Aprenda versionamento Git/Github
• Saiba o básico dos editores de imagens
• Inglês
Técnica
Relacionamento
Ética
Perguntas?
/andreluis.felizardo /in/andreluisfelizardo andrefelizardo.com.br

More Related Content

Similar to Carreira Front-End - Tecnologias e Caminhos

Scrum in a nutshell - business perspective
Scrum in a nutshell - business perspectiveScrum in a nutshell - business perspective
Scrum in a nutshell - business perspectiveMarcos Alves
 
Utilizando metologias ágeis com VSTS: Scrum e XP, YES WE CAN! (ALM204)
Utilizando metologias ágeis com VSTS: Scrum e XP, YES WE CAN! (ALM204)Utilizando metologias ágeis com VSTS: Scrum e XP, YES WE CAN! (ALM204)
Utilizando metologias ágeis com VSTS: Scrum e XP, YES WE CAN! (ALM204)André Dias
 
Gerenciamento de Riscos em Projetos de TI - Sao Paulo
Gerenciamento de Riscos em Projetos de TI - Sao Paulo Gerenciamento de Riscos em Projetos de TI - Sao Paulo
Gerenciamento de Riscos em Projetos de TI - Sao Paulo Grupo Treinar
 
Palestra Do AS IS ao TO BE em 5 dias
Palestra Do AS IS ao TO BE em 5 diasPalestra Do AS IS ao TO BE em 5 dias
Palestra Do AS IS ao TO BE em 5 diasJonas Beto Rompkovski
 
SINFO24 GFI Bug's Live Jorge Goncalves
SINFO24 GFI Bug's Live Jorge GoncalvesSINFO24 GFI Bug's Live Jorge Goncalves
SINFO24 GFI Bug's Live Jorge Goncalvesxerere
 
Transformação ágil em uma grande empresa, um post-it por vez!
Transformação ágil em uma grande empresa, um post-it por vez! Transformação ágil em uma grande empresa, um post-it por vez!
Transformação ágil em uma grande empresa, um post-it por vez! Adriano Tavares
 
Cursos Agile Think - Feature Driven Development (FDD) - 4/4
Cursos Agile Think - Feature Driven Development (FDD) - 4/4Cursos Agile Think - Feature Driven Development (FDD) - 4/4
Cursos Agile Think - Feature Driven Development (FDD) - 4/4André Vidal
 
Cursos Agile Think - Feature Driven Development (FDD) - 4/4
Cursos Agile Think - Feature Driven Development (FDD) - 4/4Cursos Agile Think - Feature Driven Development (FDD) - 4/4
Cursos Agile Think - Feature Driven Development (FDD) - 4/4Agile Think® Share
 
Os desafios da Gestão em Projetos Digitais
Os desafios da Gestão em Projetos DigitaisOs desafios da Gestão em Projetos Digitais
Os desafios da Gestão em Projetos DigitaisLeandrinho Vieira
 
Parear é um pouco mais que sentar ao lado
Parear é um pouco mais que sentar ao ladoParear é um pouco mais que sentar ao lado
Parear é um pouco mais que sentar ao ladoMichel Cordeiro
 
Scrum - Desenvolvimento Ágil
Scrum - Desenvolvimento ÁgilScrum - Desenvolvimento Ágil
Scrum - Desenvolvimento ÁgilIsrael Santiago
 
Pra que serve um agile coach
Pra que serve um agile coachPra que serve um agile coach
Pra que serve um agile coachThulio Ultramari
 
[Pedro frozi]design thinking ágeis
[Pedro frozi]design thinking  ágeis[Pedro frozi]design thinking  ágeis
[Pedro frozi]design thinking ágeisPedro Henrique Frozi
 
Previsibilidade em desenvolvimento de software
Previsibilidade em desenvolvimento de softwarePrevisibilidade em desenvolvimento de software
Previsibilidade em desenvolvimento de softwareDenis Ferrari
 
Design Sprint e Design Thinking na inovação para processos de negócio [Semana...
Design Sprint e Design Thinking na inovação para processos de negócio [Semana...Design Sprint e Design Thinking na inovação para processos de negócio [Semana...
Design Sprint e Design Thinking na inovação para processos de negócio [Semana...Kelly Sganderla
 
Dev ops integração contínua com jenkins
Dev ops integração contínua com jenkinsDev ops integração contínua com jenkins
Dev ops integração contínua com jenkinsMichel Cordeiro
 

Similar to Carreira Front-End - Tecnologias e Caminhos (20)

Scrum in a nutshell - business perspective
Scrum in a nutshell - business perspectiveScrum in a nutshell - business perspective
Scrum in a nutshell - business perspective
 
Utilizando metologias ágeis com VSTS: Scrum e XP, YES WE CAN! (ALM204)
Utilizando metologias ágeis com VSTS: Scrum e XP, YES WE CAN! (ALM204)Utilizando metologias ágeis com VSTS: Scrum e XP, YES WE CAN! (ALM204)
Utilizando metologias ágeis com VSTS: Scrum e XP, YES WE CAN! (ALM204)
 
Gerenciamento de Riscos em Projetos de TI - Sao Paulo
Gerenciamento de Riscos em Projetos de TI - Sao Paulo Gerenciamento de Riscos em Projetos de TI - Sao Paulo
Gerenciamento de Riscos em Projetos de TI - Sao Paulo
 
Palestra Do AS IS ao TO BE em 5 dias
Palestra Do AS IS ao TO BE em 5 diasPalestra Do AS IS ao TO BE em 5 dias
Palestra Do AS IS ao TO BE em 5 dias
 
Gestão de Projetos Ágeis
Gestão de Projetos ÁgeisGestão de Projetos Ágeis
Gestão de Projetos Ágeis
 
Meetup Design Thinking - POA | Práticas de design no ambiente digital: desaf...
Meetup Design Thinking - POA |  Práticas de design no ambiente digital: desaf...Meetup Design Thinking - POA |  Práticas de design no ambiente digital: desaf...
Meetup Design Thinking - POA | Práticas de design no ambiente digital: desaf...
 
SINFO24 GFI Bug's Live Jorge Goncalves
SINFO24 GFI Bug's Live Jorge GoncalvesSINFO24 GFI Bug's Live Jorge Goncalves
SINFO24 GFI Bug's Live Jorge Goncalves
 
Responsive design
Responsive designResponsive design
Responsive design
 
Transformação ágil em uma grande empresa, um post-it por vez!
Transformação ágil em uma grande empresa, um post-it por vez! Transformação ágil em uma grande empresa, um post-it por vez!
Transformação ágil em uma grande empresa, um post-it por vez!
 
Cursos Agile Think - Feature Driven Development (FDD) - 4/4
Cursos Agile Think - Feature Driven Development (FDD) - 4/4Cursos Agile Think - Feature Driven Development (FDD) - 4/4
Cursos Agile Think - Feature Driven Development (FDD) - 4/4
 
Cursos Agile Think - Feature Driven Development (FDD) - 4/4
Cursos Agile Think - Feature Driven Development (FDD) - 4/4Cursos Agile Think - Feature Driven Development (FDD) - 4/4
Cursos Agile Think - Feature Driven Development (FDD) - 4/4
 
Os desafios da Gestão em Projetos Digitais
Os desafios da Gestão em Projetos DigitaisOs desafios da Gestão em Projetos Digitais
Os desafios da Gestão em Projetos Digitais
 
"Agile Think" - Design Sprint
"Agile Think" - Design Sprint"Agile Think" - Design Sprint
"Agile Think" - Design Sprint
 
Parear é um pouco mais que sentar ao lado
Parear é um pouco mais que sentar ao ladoParear é um pouco mais que sentar ao lado
Parear é um pouco mais que sentar ao lado
 
Scrum - Desenvolvimento Ágil
Scrum - Desenvolvimento ÁgilScrum - Desenvolvimento Ágil
Scrum - Desenvolvimento Ágil
 
Pra que serve um agile coach
Pra que serve um agile coachPra que serve um agile coach
Pra que serve um agile coach
 
[Pedro frozi]design thinking ágeis
[Pedro frozi]design thinking  ágeis[Pedro frozi]design thinking  ágeis
[Pedro frozi]design thinking ágeis
 
Previsibilidade em desenvolvimento de software
Previsibilidade em desenvolvimento de softwarePrevisibilidade em desenvolvimento de software
Previsibilidade em desenvolvimento de software
 
Design Sprint e Design Thinking na inovação para processos de negócio [Semana...
Design Sprint e Design Thinking na inovação para processos de negócio [Semana...Design Sprint e Design Thinking na inovação para processos de negócio [Semana...
Design Sprint e Design Thinking na inovação para processos de negócio [Semana...
 
Dev ops integração contínua com jenkins
Dev ops integração contínua com jenkinsDev ops integração contínua com jenkins
Dev ops integração contínua com jenkins
 

Carreira Front-End - Tecnologias e Caminhos