Série da semana: Angular, API RESTful e Banco de Dados

Veja mais

Quer ter acesso a todos os cursos desse Guia?

HTML e CSS para Programadores

Foi o tempo onde ter conhecimentos em Front-end era opcional. Agora saber HTML e CSS virou requisito obrigatório na maioria das vagas para programadores. Com esse Guia de Carreira você aprenderá do básico ao avançado nessas tecnologias!

Introdução

Neste Guia de Carreira você encontrará uma sequência de conteúdos que te direcionarão seus estudos no aprendizado do HTML e CSS. E para lhe ajudar preparamos um DevCast tratando das primeiras dúvidas mais comuns de quem está começando nessas tecnologias:

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?

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.

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.

Praticando

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:

Próximos passos

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:

Juntamente com o HTML/CSS, o JavaScript compõe as tecnologias base para a criação de aplicações para a web. No guia abaixo cobrimos essa tecnologia, que recomendamos como próximo passo na sua formação como programador.

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

Suporte ao aluno - Deixe a sua dúvida.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo minimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.