Como se tornar um front end MVP (minimum viable professional) ( trocadilho ), um guia para os iniciantes nessa linda arte de transformar layouts em interfaces usáveis.

A ideia é criar um post simples e explicativo, sem muitos termos técnicos e palavras difíceis, para você que não esta no ramo não se confunda, então, sem mais delongas vamos la!

Definição: "Desenvolvedor front end, também conhecido como desenvolvedor client-side é o profissional que usa HTML, CSS e JavaScript para desenvolver sites e aplicações web, de modo que o usuário possa ver e interagir com eles diretamente."

Comece do inicio

A base de um front end é o HTML, CSS, JavaScript é essa trindade que faz as coisas funcionarem na web e é por aqui que vamos começar!

- HTML (HyperText Markup Language)

Sem o HTML a web não existiria, é o HTML que defini a estrutura de um site, então, aprenda HTML, suas tags, semântica e organização.

• HTML5 Tutorial

• w3schools html5

• Codecademy

- CSS (Cascading Style Sheets)

CSS é o que da estilo ao site como cor, fonte, formato, espaçamento e diagramação, o CSS em si não demora muito para aprender, mas demora para se aperfeiçoar, existem metodologias que ajudam nisso como o BEM, OOCSS, SMACSS.

• w3schools CSS

• Aprenda CSS

• Codecademy

- JavaScript

JavaScript é o requisito principal para se tornar um bom front end, e a cada dia se torna mais necessário entender bem essa linguagem. Mas no básico você vai usar o javascript para instalar plug-ins (ferramentas) como slides por exemplo.

• Codecademy

• Javascript ninja

Editor de código

É aqui que vamos passar a maior parte do nosso trabalho, olhando o editor de código, escolher o editor que vai usar é algo bem importante pois ele vai agilizar o seu trabalho, e muito, com autocomplete (auto completar quando estiver escrevendo algo no seu código), highlight (dividindo seu código por cor) e etc... Não existe um melhor ou pior, existe aquele que melhor te atende! Segue alguns editores mais famosos.

• Sublime text

• Aprenda a usar o Sublime text

• Atom

• Aprenda a usar o Atom

• Bracket

Ferramentas

O front end, principalmente, esta cercado de infinitas ferramentas e frameworks, vá se acostumando com isso :p mas vamos ver algumas dessas ferramentas que são o básico para se começar!

- Browser Dev Tools

Peça importante no trabalho de um front end, essa ferramenta te possibilita ver e modificar o código carregado pela página, ver se a página esta gerando algum erro e até mesmo ver o tempo de carregamento de cada arquivo do site, não é de mais?! :D

• Chrome Dev Tools

• Aprenda Chrome dev tools

• Firebug

- Terminal

Se você realmente quer ser um front end vai ter que mexer nessa telinha preta (ou de qualquer outra cor caso você tenha mudado) que muitos tem medo, hoje o terminal se tornou ferramenta de extrema importancia no dia a dia do front end, seja para controle de versão, rodar ferramentas de build, compilar pre processadores etc...

• Comandos básicos do terminal

- Controle de Versão

Fazer vários backups para não perder o código atualizado nunca mais! Controle de versão facilita e muito essa tarefa de versionar seu projeto, se for trabalhar em equipe essa ferramenta é obrigatória! Os mais conhecidos são.

• SVN

• Git

• Git e Github para iniciantes

Conclusão

Neste post descrevi o básico do básico do front end, hoje nossa área é muito ampla, possibilitando trabalhar de diversas formas, com diversas tecnologias, mas não fique desanimado, mãos a obra e nunca deixe de estudar, se tiver oportunidade de ir a eventos VÁ! Caso tenha dúvidas ou problemas pode recorrer a Comunidade, que é a base do aprendizado e da troca de conhecimento na nossa área. Caso queira corrigir, adicionar ou tocar em algum ponto sobre o post, pode comentar aqui em baixo :D