Quer ter acesso a todos os cursos desse Guia?

Front-end Web na prática

Nesse Guia de Front-end você encontrará conteúdos que apresentam, na prática, linguagens, frameworks e técnicas de desenvolvimento front-end web.

Cenários Introdutórios

Nesse Guia de Front-end separamos para você um conjunto de vídeos, artigos e exemplos que demonstram o uso de tecnologias front-end na prática, bem como discussões sobre temas recorrentes nessa área que podem lhe ajudar a se tornar um programador ainda mais completo.

Aqui separamos alguns conteúdos básicos, mas bem aplicados, que lhe permitirão praticar o uso das linguagens que compõem a base da programação front-end web: HTML, CSS e JavaScript.

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.

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!

Responsivo

Responsividade é um conceito fundamental na programação web atual. Em resumo, ele garante que aplicações possam ser acessadas adequadamente em dispositivos com diferentes tamanhos de tela. Nos links abaixo você encontrará demonstrações de técnicas que visam alcançar esse importante requisito.

Flexbox

Flexbox é um recurso do CSS3 que permite organizar elementos dentro de um container de forma eficiente, mesmo que suas dimensões variem, como na Figura 1.

Exemplo de flexbox
Figura 1. Exemplo de flexbox

Atualmente o Flexbox é extremamente importante para implementar a responsividade em páginas web. Veja a seguir algumas possibilidades de uso desse recurso:

Soluções front-end

Nesta seção você encontrará conteúdos que demonstram como utilizar recursos que aprimoram a usabilidade, a experiência do usuário em uma aplicação. Um desses recursos é a Page Visibility API. Com ela podemos detectar situações como um longo período sem a interação do usuário e gerar uma notificação para chamar a atenção dele ou mesmo interromper um streaming de vídeo, poupando processamento do servidor. Para aprender sobre essa API, acesse:

Por falar em notificações, uma biblioteca JavaScript que tem sido muito empregada é a Toastr. Ela simplifica e ao mesmo tempo oferece opções para exibição de mensagens customizadas conforme a necessidade da aplicação. Um dos diferenciais em relação ao conhecido alert, por exemplo, é que não necessitamos da interação do usuário para fechar a notificação, característica que pode prejudicar experiência do usuário. A notificação será exibida e, após alguns instantes, removida. Para que você conheça essa biblioteca, preparamos o seguinte conteúdo:

Além dessas opções, temos muitas outras que possibilitam tornar a experiência do usuário ainda mais agradável. Até pouco tempo muitas dessas soluções eram vistas como "perfumaria". Hoje sabemos que elas podem ser um dos diferenciais para cativar e fidelizar um cliente/usuário. Para aprender mais sobre o assunto, acesse o conteúdo abaixo:

Data Attributes

Os Data Attributes são aqueles que definem atributos customizados nas tags, de forma semelhante aos atributos padrão, como value, id e name. No entanto, esses atributos customizados devem seguir o padrão de nomenclatura com prefixo “data-”. No curso abaixo você confere mais detalhes e a implementação dos mesmos:

Web Storage

Cada vez mais precisamos de velocidade e agilidade em nossas aplicações web, não é mesmo? Uma das funcionalidades do HTML 5 é o Web Storage, que nos permite armazenar dados no lado cliente (navegador), tornando assim mais ágil o processamento de informações na web. Veja abaixo um material exclusivo de como você poderá implementar esse recurso em suas aplicações:

Performance na web

Cada vez mais a performance tem se mostrado um fator de extrema importância para a experiência do usuário. As aplicações que desenvolvemos precisam ser otimizadas para funcionar com o melhor desempenho possível, tanto em desktops quanto em dispositivos móveis. Aqui compartilhamos com você um pouco da nossa experiência com esse assunto, bem como algumas dicas que lhe ajudarão a obter a melhor performance dos seus sites:

Lazy Load

Em uma página web moderna pode conter diversas imagens e muitas vezes essas nem chegam a ser vistas pelo usuário, pois o mesmo pode clicar em um link e já navegar para outro conteúdo, não é verdade? No desenvolvimento de uma aplicação web, por exemplo, acabamos carregando todas as imagens mesmo sem necessidade, o que atrapalha e muito o tempo de carregamento e aumenta o consumo de banda desnecessariamente. Existe uma técnica chamada Lazy Load que resolve exatamente esse problema, ou seja, as imagens são carregadas apenas quando aparecem na área visível do navegador. Veja como implementar essa importante técnica nos conteúdos abaixo:

Validação de dados

Um assunto recorrente também entre programadores front-end é a validação de dados. Afinal, devo me preocupar com isso ou essa deve ser uma preocupação exclusiva da equipe responsável pelo back-end da aplicação? Confira abaixo alguns DevCasts em que tratamos desse assunto:

Dicas rápidas

Que tal algumas dicas rápidas para lhe ajudar no seu dia a dia como desenvolvedor? Abaixo separamos alguns conteúdos que certamente lhe serão bastante úteis:

Conteúdo extra

Por fim, temos aqui alguns tópicos adicionais para que você possa ir além da programação front-end web, sem deixar de utilizar as mesmas tecnologias.

Artigos práticos de front-end web

Até aqui você viu vários cursos, devcasts e exemplos que abordam cenários práticos de desenvolvimento front-end web. Nesta seção separamos também alguns artigos bacanas para que você possa complementar seus estudos:

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.

Veja esse ebook
Crie sua conta grátis e baixe o e-book
Dê um upgrade no início da sua jornada.

Perguntas frequentes

Quem somos?
A DevMedia é uma escola de formação de programadores com mais de 20 anos de mercado. Já formamos mais de 100 mil programadores. A DevMedia ensina programação web, (desenvolvimento de site e aplicativos para celulares). A programação web é a área que mais contrata programadores em todo o mundo, sendo a maior porta de entrada para a área da tecnologia.
Por que a programação se tornou a profissão mais promissora da atualidade?
Nunca o mundo necessitou tanto de programadores como atualmente. Com a quarentena estabelecida pela Covid-19, lojas, restaurantes, escritórios e escolas, que tiveram suas atividades paralisadas, perceberam a urgente necessidade de adaptar seus negócios para o mundo digital. Em contrapartida as empresas de tecnologias, durante esse período, cresceram como nunca tanto em faturamento quanto em número de usuários. Com isso a necessidade de programadores cresceu muito. Empresas de grande e pequeno porte estão com vagas abertas e não conseguem contratar por falta de profissionais qualificados. No momento estima-se que o número de oportunidades no Brasil seja acima de 200 mil!
Como faço para começar a estudar?
Programação é um universo amplo, existem muitos caminhos e por isso é muito fácil se perder. Nosso conselho é: NÃO ESTUDE SOZINHO. Infelizmente 78% das pessoas que começam a estudar sozinhas desistem da profissão por não conseguirem aprender. Com uma boa orientação elas teriam conseguido! Se você tomou a decisão de entrar nesse mercado, faça um investimento no seu futuro e busque aprender com quem sabe. Isso vai triplicar suas chances de dominar a programação e conquistar uma vaga no mercado.
Em quanto tempo de estudo vou me tornar um programador?
O tempo depende, claro, da dedicação de cada estudante. A DevMedia ensina programação há 20 anos e com toda essa experiência montamos uma metodologia que tem como objetivo principal acelerar os seus estudos. Você terá um Plano de Estudo para te orientar em todos os passos do aprendizado. Desenvolverá diversos projetos reais para colocar em prática os conhecimentos e contará com o melhor suporte ao aluno da web. Todas as suas dúvidas serão respondidas de imediato. Seguindo nossa metodologia e se dedicando, entre 6 meses e um ano você já estará programando.
Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!
Ser programador é uma das maiores oportunidades que o Brasil oferece para quem não tem condições de fazer uma faculdade. Muitas empresas contratam sem fazer questão de diploma, o que importa para elas é que o candidato seja um bom técnico e consiga atender suas necessidades. Os salários iniciais para programadores são de R$2.500 mil, podendo chegar aos R$15 mil para aqueles que se dedicam. Com disciplina e um estudo correto, que não te faça perder tempo, é possível se tornar um programador em menos de um ano de estudo. Quando você já estiver empregado, aí sim você pode se aprimorar ainda mais fazendo uma faculdade na área.
O que eu irei aprender estudando pela DevMedia?
Nossas trilhas de estudo te permitem virar um programador Full Stack, que é aquele programador mais completo, ele domina o desenvolvimento Front-end, Back-end e Mobile. Você ficará apto para criar sistemas para computadores e aplicativos para celulares. Utilizamos como base a linguagem JavaScript que é a linguagem mais utilizada no mundo. Outra vantagem do JavaScript é a quantidade de oportunidades no mercado de trabalho. É sem dúvida a linguagem que mais possui vagas e a que mais dá oportunidade para os iniciantes.
Principais diferenciais da DevMedia
Suporte ao aluno - O aluno conta com a ajuda de professores para tirar dúvidas durante toda a jornada de ensino. As perguntas são respondidas em menos de uma hora por professores experientes e atuantes no mercado. Gamificação - A plataforma de ensino é divertida e motivante. É como se o aluno estivesse dentro de um game. Ele terá seu card pessoal, que poderá ser customizado utilizando as moedas que ele ganha quando acerta os exercícios. Ele poderá também trocar suas moedas por outros produtos dentro da plataforma. Além disso, seus acertos contam pontos no ranking mensal dos alunos. Tudo isso deixa os estudos mais leves e motivantes. Didática - A DevMedia já ensina programação há mais de 20 anos. Desenvolvemos ao longo desse tempo uma metodologia que ensina a programar de verdade, com menos aulas e mais prática, são dezenas de projetos e exercícios que desenvolvem a mente programadora no aluno. Projetos reais - Durante os estudos os alunos irão desenvolver dezenas de projetos em cada uma das carreira (front-end, back-end e mobile). Mas o principal é que os projetos da DevMedia não são “copia e cola” como se encontra por aí. Aqui o aluno vai desenvolver os projetos de forma autônoma, recebendo claro a nossa mentoria e suporte, mas o aluno terá condições para desenvolvê-los sozinho. Milhares de exercícios - Programação é prática, por isso a cada nova matéria o aluno passará por um bloco de exercícios para fixar o conteúdo e cada acerto será bonificado com pontos e moedas e valem uma posição no ranking dos alunos.
Qual o investimento financeiro que preciso fazer para me tornar um programador?
Na internet é possível encontrar cursos de todos os preços, desde 50,00 a R$15.000,00. Os cursos de 50,00 são cursos avulsos, que explicam apenas pedaços de uma determinada matéria. Para criar um conhecimento completo você precisaria comprar no mínimo de 15 a 20 cursos avulsos e correria o risco deles não se complementarem tão perfeitamente e seu conhecimento ficaria cheio de "buracos". Os cursos de R$15.000,00 não fazem nenhum sentido. Deixe para investir em cursos caros quando quiser se especializar. Por esse preço você pode inclusive estudar fora do pais. Na DevMedia, você terá um plano de estudo montado por quem já formou mais de 100 mil alunos, e já está nesse mercado há mais de 20 anos. Somos a única plataforma que oferece Suporte ao Aluno em tempo real e uma experiência de estudos gamificada para te manter motivado durante todo o período de estudo. E o melhor, nosso pagamento é recorrente, você não precisa usar o limite do seu cartão de crédito para investir no seu futuro. Aproveite para se matricular agora mesmo.

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar