Guia de Linguagem

Carreira Programador Front-end


Neste guia de estudos você encontra os conteúdos que precisará para se tornar um programador web fron-end. Confira a sequência de cursos e exemplos que te guiarão do básico ao avançado HTML, CSS e JavaScript.

Introdução

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:

Agora, crie sua primeira página HTML e a visualize no browser seguindo o curso abaixo:

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

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:

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”.

No curso 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 o curso 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:

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.

Single Page Applications

No cenário atual do desenvolvimento web está em alta um tipo de aplicação chamada SPA (Single Page Application). Como o nome sugere, são aplicações que, ao invés de ter várias páginas com diferentes URLs, concentra várias funcionalidades em uma única página. Um ótimo exemplo de SPA é o Gmail. Note que apenas a área que lista os e-mails é atualizada quando clicamos para ler uma mensagem. A Figura 1 ilustra esse comportamento.

Exemplo de SPA
Figura 1. Exemplo de SPA - Apenas o componente atualizado é recarregado

Sendo um programador front-end hoje em dia é possível que você se depare com a necessidade de criar esse tipo de aplicação. Para isso o mercado tem adotado frameworks JavaScript, dentre os quais o Angular se destaca como um dos mais utilizados. Se você ainda não conhece esse framework, assista o curso abaixo:

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

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).

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.

Ficou com alguma dúvida?