Série da semana: Receitas caseiras para teste unitário

Veja mais

Quer ter acesso a todos os cursos desse Guia?

Programador Front-end

Foi o tempo onde ter conhecimentos em Front-end era opcional. Agora saber HTML e JavaScript virou requisito obrigatório na maioria das vagas para programadores. Com esse Guia de Carreira você sai do básico e avança no Front-end web!

Introdução ao desenvolvimento Front-end

A programação de aplicações web normalmente é dividida em duas partes:

Back-end (ou server-side): programação realizada no lado servidor das aplicações, em que usamos linguagens como Java, C# e PHP e bancos de dados.

Front-end (ou client-side): aqui ficam as tecnologias que são usadas no “lado cliente”, ou seja, aquelas que formam as páginas que são visualizadas no browser pelo usuário. Nessa parte as tecnologias base são o HTML, o CSS e o JavaScript, que também podem ser usados na forma de bibliotecas e frameworks.

Neste Guia de Carreira você encontrará uma sequência de conteúdos que irão direcionar seus estudos a fim de se tornar um programador front-end. E para lhe ajudar nesse início fizemos um DevCast tratando das primeiras dúvidas mais comuns que surgem nesse momento:

E caso você já tenha experiência com programação para ambientes desktop, provavelmente pode se questionar sobre quando criar esse tipo de aplicação e quando optar pela web. Nesse contexto o DevCast a seguir lhe ajudará a esclarecer essas questões:

Tendo decidido se tornar um programador web front-end, não deixe de ver o DevCast a seguir, em que apresentamos algumas ferramentas úteis nessa área:

HTML

A HTML é uma linguagem de marcação utilizada para estruturar todo o conteúdo das páginas web, definindo elementos como parágrafos, títulos, imagens, etc. Sendo assim, essa linguagem é utilizada na construção de qualquer página web e, portanto, deve ser conhecida por todo programador que trabalha com esse tipo de aplicação.

Se você está dando os primeiros passos nessa área, confira os links abaixo:

Neste ponto você já compreende qual a função do HTML dentro da programação web. Veja então o curso a seguir para explorar essa linguagem em maiores detalhes.

Com o curso a seguir aprenderemos a criar nosso primeiro formulário usando apenas a linguagem:

Agora, que tal praticar o que aprendemos construindo uma nova página HTML ? Confira no curso abaixo:

Nos conteúdos anteriores você conheceu diversas tags da linguagem HTML e como utilizá-las para compor suas páginas. Agora é necessário estar ciente de como empregar certas tags de maneira mais eficiente, otimizando seus sites para buscadores e mecanismos de leitura de tela. A essa forma “correta” de escrever o código dado o nome de HTML Semântico e você pode aprender mais sobre o assunto nos links abaixo, em que você verá uma introdução ao assunto, seguido de um exemplo prático de uso:

Confira mais conteúdo sobre essa linguagem no Guia de Consulta de HTML .

CSS

CSS é uma linguagem declarativa usada para editar o aspecto visual dos elementos presentes em uma página web. Enquanto o HTML tem o objetivo de estruturar o conteúdo da página, o CSS é adicionado para dar o visual adequado a ela.

Agora que você já sabe o que é o CSS e a que ele se destina, que tal criar sua primeira página com formatação visual?

Em seguida sugerimos o curso abaixo, que lhe apresentará de forma mais detalhada os recursos do CSS, como seus vários seletores e propriedades:

As necessidades das aplicações mudam com o tempo, fazendo com que as tecnologias utilizadas em sua construção precisem se adaptar a novos cenários de utilização. Assim também é com o CSS, que está em constante evolução, trazendo facilidades que auxiliam na construção de interfaces de usuário. Assista aqui um bate papo sobre a necessidade de estarmos em constante sintonia com essas novidades, a fim de desempenharmos com mais eficiência nossas tarefas diárias.

Para aprimorar seus conhecimentos nessa linguagem, veja no curso a seguir como utilizar as chamadas pseudo classes do CSS:

Veja também o Guia de Consulta de CSS para mais conteúdos sobre as folhas de estilo.

JavaScript

O JavaScript é uma linguagem de programação amplamente utilizada no front-end para diferentes finalidades. Desde validação de campos à criação de menus, é possível fazer muita coisa usando essa linguagem que adiciona algum dinamismo às páginas que apenas com HTML e CSS são consideradas “estáticas”. Para entender como ela funciona e como mudou ao longo dos anos, assista o vídeo a seguir:

Nos cursos a seguir você aprenderá a usar o JavaScript, desde os recursos iniciais da linguagem até a manipulação de elementos da tela:

Quer mais conteúdo sobre JavaScript? Acesse o Guia de Consulta dessa linguagem.

jQuery

A jQuery é uma biblioteca JavaScript que tem por lema “escrever menos e fazer mais”, ou seja, ela permite fazer com menos linhas de código o que seria bem mais complexo com JavaScript “puro”. Entre seus principais recursos está a manipulação do DOM (Document Object Model), que é simplificado por suas funções e seletores.

Conheça mais sobre o que é a jQuery no curso abaixo:

Agora sugerimos os cursos abaixo para que você possa aprender a usar a jQuery em seus projetos:

Em seguida, assista os cursos a seguir afim de se aperfeiçoar em determinadas funcionalidades da biblioteca, vendo na prática como aplicá-las:

Acesse também o Guia de Consulta de jQuery para ver mais conteúdo sobre a biblioteca.

APIs do HTML5

Além das novas tags o HTML5 trouxe um conjunto de APIs que podem ser acessadas via JavaScript para implementar funcionalidades comuns em aplicações web. Uma das principais é o Web Storage, mecanismo que permite armazenar dados localmente no browser e que você pode ver na prática nos links abaixo:

Já a Page Visibility API nos permite verificar qual aba está ativa no browser e qual perdeu o foco do usuário. No curso abaixo você verá como usar essa API para notificar o usuário quando ele estiver ausente por um determinado período tempo:

Praticando

Nada melhor para fixar o conhecimento do que praticar, certo? Nesta seção separamos alguns conteúdos para que você possa aplicar na prática o que aprendeu até aqui. Para começar, veja como criar alguns layouts/estruturas de páginas:

Quando podemos considerar uma página HTML pronta? No DevCast abaixo sugerimos uma série de pontos que não podem faltar nesta checklist e que, se corrigidos a tempo, podem evitar de pequenos problemas a verdadeiras catástrofes em sua página web. Confira!

Os links abaixo demonstram como usar o recurso de flexbox do CSS3 para criar layouts flexíveis, adaptáveis a diferentes dimensões de telas e conteúdo:

Veja também como criar animações usando o CSS3:

Já os conteúdos a seguir trazem técnicas que podem ser aplicadas às suas páginas para aprimorar seu funcionamento e experiência do usuário:

Bootstrap

O Bootstrap é um framework para desenvolvimento web front-end (HTML, CSS e JavaScript) que adiciona às páginas recursos de responsividade, diversos componentes de interface e estilos leves e modernos. Atualmente é um dos frameworks mais usados no mercado, por isso é importante conhecê-lo.

Se esse é seu primeiro contato com o Bootstrap, assista o curso a seguir:

Em seguida, no curso abaixo você verá uma abordagem completa sobre o framework, apresentando seus componentes e um projeto prático para fixar o conhecimento adquirido:

Agora que você conhece o Bootstrap e sabe utilizar seus recursos, sugerimos os cursos e exemplos a seguir como complemento da sua linha de aprendizado:

Para mais conteúdo sobre esse framework acesse o Guia de Consulta de Bootstrap.

Angular

Uma aplicação web pode ser vista como um diálogo entre cliente e servidor, no qual o cliente solicita ao servidor a informação a ser apresentada. Ao longo dos anos, esse cenário foi posto em prática de muitas formas, dentre elas, com a separação dessas duas partes em sistemas isolados, trocando informações através de arquivos XML ou, como é mais comum atualmente, JSON.

Foi em meio a essa mudança de paradigma que surgiu o Angular, um framework para a criação de aplicações cliente, codificadas com HTML e JavaScript, ou uma outra linguagem que gere JavaScript. No DevCast abaixo conversamos sobre o momento que estamos vivendo na produção de código Front-End e qual o papel do Angular nesse contexto:

Agora, antes de continuar é importante conhecer alguns conceitos iniciais com os quais você verá o que podemos fazer com o Angular:

Agora que você já sabe o que é o Angular e o que é possível fazer com ele, veja como criar sua primeira aplicação usando esse framework:

Você provavelmente já usou uma SPA (Single Page Application), como o Facebook, Gmail e muitas outras. Como o nome sugere, são aplicações que, ao invés de ter várias páginas com diferentes URLs, concentram várias funcionalidades em uma única página. Uma vez que o Angular é um dos frameworks mais utilizados para esse tipo de aplicação, no DevCast abaixo explicamos esse conceito:

Angular é um dos principais frameworks para a programação de aplicações cliente, destacando-se principalmente pela facilidade com a qual conseguimos, a partir dele, enviar e receber dados de web services, através da troca de arquivos json. Além disso, com o Angular podemos facilmente manipular o HTML da página, utilizando para isso uma API baseada em JavaScript e de alto nível. No curso abaixo apresentamos em detalhes essa tecnologia, tomando como cenário a criação de um Dashboard, que apresenta dados resumidos em painéis independentes.

No Guia de Consulta de MEAN Stack você encontra outros conteúdos sobre o Angular, bem como sobre o AngularJS (versão anterior do framework).

React

O React foi desenvolvido no Facebook para atender as demandas da aplicação web dessa rede social, cuja interface é complexa e composta por várias partes que atuam em conjunto ou isoladamente. Usando o conceito de componentes o React propõe a divisão das interfaces em partes menores e desenvolvidas separadamente, o que as torna mais fáceis de manter e reutilizar. Conheça mais sobre essa biblioteca nos cursos abaixo:

Front-end na prática

Você já tem conhecimento de HTML, CSS, JavaScript e deseja praticar os conceitos aprendidos? Então acesse o guia abaixo, no qual separamos os principais conteúdos práticos sobre desenvolvimento front-end:

Mais sobre Front-End

Além dos cursos, exemplos e DevCasts contidos nesse guia a DevMedia publica com frequência novos conteúdos sobre front-end, os quais você pode conferir nos Guias de Consulta abaixo:

Além disso, você pode conferir todo o conteúdo de Front-end clicando aqui.

Suporte ao aluno - Deixe a sua dúvida.
Achou 12 meses muito tempo?

Programação muda todo dia e cada novidade nos obriga a rever tudo que já sabíamos. Só um estudo contínuo nos leva ao sucesso.

Apenas 3,5% dos nossos assinantes querem cancelar antes dos 12 meses

O que nossos clientes dizem:

"Excelente trabalho. É assim que a gente vê que o investimento vale a pena. Parabéns!"

- Danniery Alves -
O que nossos clientes dizem:

"Prá lá de bom... Está ótimo: com clareza, didática, conhecimento de causa e uma boa dose de humor. "Persistência" é o segredo."

- Paulo Costa -
O que nossos clientes dizem:

"DevMedia ensina mais do que qualquer faculdade!!!"

- Mauricio Hartmann -