Quer ter acesso a todos os cursos desse Guia?
Tecnologia HTML
HTML é uma linguagem de marcação utilizada para estruturar o conteúdo das páginas web, definindo elementos como parágrafos, títulos, imagens, etc.
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:
-
CursoCSS3 Display Flex: Como organizar cards e boxes automaticamente
-
ProjetoConteúdo adaptável com CSS Flex
-
ProjetoHTML e CSS: Tela de login com Flexbox e Media Queries
-
ProjetoCSS Flex: Crie um menu de tela inteira com HTML e CSS
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.
Black November
Desconto exclusivo para as primeiras 200 matrículas!
Pagamento anual
12x no cartão
De: R$ 69,00
Por: R$ 54,90
Total: R$ 658,80
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- 12 meses de acesso
Pagamento recorrente
Cobrado mensalmente no cartão
De: R$ 79,00
Por: R$ 54,90 /mês
Total: R$ 658,80
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- Fidelidade de 12 meses
- Não compromete o limite do seu cartão
<Perguntas frequentes>