Formação HTML e CSS
Crie páginas incríveis com as tecnologias da Web
Assista o vídeo
veja nossa apresentação da Formação e uma Alura Live sobre a Carreira em Front-end
Criando Layouts modernos para Web
A Web é a plataforma de programação mais importante do mundo. Suas tecnologias principais, o HTML, o CSS fundamentais para a criação de qualquer site. Quem domina essas tecnologias, suas boas práticas e seus recursos mais avançados, tem espaço no mercado de programação para front-end e pode participar da criação de plataforma incríveis.
Praticamente todo produto digital precisa de um Front-end Web, por isso é um mercado imenso no Brasil e no mundo. Mas se engana quem acha que aprender um pouco de HTML e CSS é suficiente. O bom profissional dessa área tem que lidar com desafios enormes, saber as boas práticas de código, como lidar com múltiplos navegadores e saber escrever sites resilientes. Precisa estar antenado nas novidades do CSS, desenvolver pensando em mobile e responsivo assim como conhecer sobre acessibilidade e HTML semântico.
A Formação HTML e CSS da Alura foi pensada para você começar do zero e se tornar um profissional de ponta. É um guia de estudos com um passo a passo pensado com carinho pela equipe da Alura.
Por que estudar esta formação?
-
Guia de aprendizado
Conteúdos pensados para facilitar seu estudo
-
Do básico ao avançado
Formação completa para o mercado
-
Você dentro do mercado
Do zero ao sonhado emprego em sua área de interesse
Comece essa formação agora mesmo e capacite-se para seu próximo projeto!
Conheça os planosCom quem você irá aprender
-
Douglas Quintanilha Barbosa Ferreira
-
Fábio Pimentel
-
Juliana Amoasei
-
Matheus Castiglioni
-
Natan Souza
-
Pedro Marins
-
Sérgio Lopes
-
Yuri Padilha
Passo a passo
1 HTML & CSS
A base de todo desenvolvimento Web é um bom HTML. Mais que aprender tags, é saber a importância de um código semântico e bem estruturado. Em cima disso, aplicamos o layout CSS que também é muito mais que apenas colocar uma cores e firulas por aí. É muito fácil escrever códigos HTML e CSS ruins. E é muito fácil não dar a atenção devida a esses fundamentos da Web. Mas não é o que recomendamos. Bons estudos!
-
Curso HTML5 e CSS3 parte 1: A primeira página da Web
Curso | 08h | Básico -
Curso HTML5 e CSS3 parte 2: Posicionamento, listas e navegação
Curso | 08h | Básico -
Post O que é front-end e back-end? | Alura Cursos Online
-
Curso HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas
Curso | 08h | Básico -
Curso HTML5 e CSS3 parte 4: Avançando no CSS
Curso | 08h | Básico -
Post Ancorando elementos com HTML5 | Alura Cursos Online
-
2 Sites feitos para todos
Ao criarmos um produto queremos que ele atinja o maior número de pessoas possível. Assim temos uma maior chance desse produto ser um sucesso. Para isso, não podemos deixar de fora pessoas com algum tipo de limitação ou dificuldade.
Desde o início do nosso projeto devemos pensar sobre questões de acessibilidade e por isso é importante que você estude as boas práticas constantemente
3 Javascript e sites dinâmicos
Atualmente é muito difícil achar sites 100% estáticos, por isso que desenvolvedores front-end precisam conhecer a linguagem mais utilizada na web e no mundo, o JavaScript.
4 Interfaces avançadas com CSS
A Web de antigamente parava em algumas poucas propriedades do CSS. Mas não mais. O mundo evoluiu, novas exigências surgiram, e a Web cresceu junto. Agora você vai mergulhar em técnicas e tecnologias mais recentes e profundas, que vão te trazer um outro olhar ao desenvolvimento front-end.
Desde pré-processamento de CSS com SASS até o uso de ferramentas de debug, passando por layouts avançados com flexbox. E, o mais importante, como lidar com o mundo multidispositivo que temos hoje com a criação de sites responsivos e mobile-first.
-
Curso Sass e Compass: Descomplicando o CSS
Curso | 08h | Básico -
Post 10 mixins em Sass que você deveria usar em seus projetos - Blog da Caelum: desenvolvimento, web, mobile, UX e Scrum
-
Curso Flexbox: Posicione elementos na tela
Curso | 09h | Intermediário -
Post Guia de Unidades no CSS | Alura Cursos Online
-
Curso CSS Grid: Simplificando layouts
Curso | 08h | Intermediário -
Post Como lidar com os limites de resolução em sites responsivos? | Alura Cursos Online
-
5 Layouts Responsivos
A grande diversidade de tamanhos, formatos e resoluções de telas atualmente torna impossível criarmos um site que não seja responsivo. Cada vez mais os usuários querem uma experiência ótima independente se estão trabalhando no computador, celular ou tablet e isso torna impressindivel sabermos como criar sites que se adaptam à tela que estamos usando.
6 Arquitetura CSS
Se não tomarmos cuidado, em projetos grandes, é muito comum não sabermos mais onde as coisas se encontram além de vermos uma mistura de padrões de nomes das classes e IDs dos nossos objetos.
Pensando nisso foram criados alguns padrões que se seguidos desde o inicio do projeto facilitam a vida de quem estiver desenvolvendo um projeto maior.
7 Otimizações e Performance
Com a quantidade de dispositivos que acessam nossos sites todos os dias, e a quantidade cada vez maior de animações, efeitos e interações sendo colocadas no front-end é essencial que você entenda como a web funciona e como podemos utilizar melhor os recursos para tornar nossos sites cada vez mais rápidos.
-
Post Formulário com form validation do HTML5 | Alura Cursos Online
-
Podcast HTTP/2: magia com o novo protocolo - Hipsters #13 - Hipsters Ponto TechHipsters Ponto Tech
-
Post CSS: animações com Transition e Animation | Alura Cursos Online
-
Curso HTTP: Entendendo a web por baixo dos panos
Curso | 14h | Básico -
Podcast Como deixar meu site mais rápido? Performance Web - Hipsters Ponto TechHipsters Ponto Tech
-
Curso Performance Web I: otimizando o front-end
Curso | 20h | Intermediário -
Curso Performance Web II: Critical Path, HTTP/2 e Resource Hints
Curso | 20h | Intermediário -
Post Quais impactos de performance ao usar serviços externos de fontes? | Alura Cursos Online
-
Front-end
Além dessa, a categoria Front-end conta com cursos de HTML, CSS, React, Angular, JavaScript, jQuery,e mais...
