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 - Aprenda o que é o HTML e o CSS
- Entenda a estrutura básica de um arquivo HTML
- Utilize o navegador para inspecionar elementos
- Aprenda a definir estilos para elementos usando o CSS
- Desenvolva um página Web
-
Curso HTML5 e CSS3 parte 2: Posicionamento, listas e navegação
Curso | 08h - Aprenda a estrutura da página HTML
- Navegue entre páginas web
- Conheça reset.css e o posicionamento pelo CSS
- Entenda a diferença entre inline e block
- Lide com bordas e pseudo-classes CSS
-
Artigo O que é front-end e back-end? | Alura Cursos Online
-
Curso HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas
Curso | 08h - Crie formulários complexos
- Trabalhe com campos para celulares
- Apresente informações em tabelas
- Use estilos para formulários, campos e tabelas
- Entenda a hierarquia no CSS
- Trabalhe com transformações e transições
-
Curso HTML5 e CSS3 parte 4: Avançando no CSS
Curso | 08h - Importe conteúdo externo na sua página HTML, como fontes, vídeos e mapas
- Conheça pseudo-classes e pseudo-elementos
- Use seletores de CSS avançados
- Saiba como lidar com opacidade e sombra
- Entenda sobre o Viewport e design responsivo
-
Artigo Ancorando elementos com HTML5 | Alura Cursos Online
Faça esse curso e:
Mais detalhesdo curso HTML5 e CSS3 parte 1: A primeira página da Web
Faça esse curso e:
Mais detalhesdo curso HTML5 e CSS3 parte 2: Posicionamento, listas e navegação
Faça esse curso e:
Mais detalhesdo curso HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas
Faça esse curso e:
Mais detalhesdo curso HTML5 e CSS3 parte 4: Avançando no CSS
-
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
-
Curso Acessibilidade web: introdução a designs inclusivos
Curso | 06h - Entenda porque pensar em acessibilidade;
- Perceba algumas particularidades de PCDs;
- Melhore a usabilidade do seu projeto antes de por a mão no código;
- Deixe sua interface inclusiva para todos, PCDs ou não;
- Projete uma interface acessível de verdade;
- Aprenda a projetar layouts para autistas, disléxicos, Surdos, etc.
-
Curso Acessibilidade web parte 1: tornando seu front-end inclusivo
Curso | 06h - Melhore seu site para usuários de leitor de tela;
- Entenda como uma pessoa cega usa a internet;
- Aprenda a testar seu site usando o NVDA;
- Perceba como detalhes no código podem impactar as pessoas;
- Faça técnicas front-end que podem ajudar seus usuários;
- Deixe seu projeto ainda mais inclusivo.
-
Curso Acessibilidade web parte 2: Componentes acessíveis com um pouco de JavaScript
Curso | 04h - Melhore ainda mais seu site para usuários de leitor de tela;
- Descubra como deixar uma _modal_ acessível;
- Veja alguns cuidados em seu carrossel;
- Perceba como detalhes em formulários podem impactar as pessoas;
- Faça códigos JavaScript para ajudar na acessibilidade.
Faça esse curso e:
Mais detalhesdo curso Acessibilidade web: introdução a designs inclusivos
Faça esse curso e:
Mais detalhesdo curso Acessibilidade web parte 1: tornando seu front-end inclusivo
Faça esse curso e:
Mais detalhesdo curso Acessibilidade web parte 2: Componentes acessíveis com um pouco de JavaScript
-
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.
-
Curso JavaScript: Programando na linguagem da web
Curso | 20h - Entenda mais como funciona esta popular linguagem do mercado
- Aprenda a manipular os elementos de sua página
- Trabalhe bem com eventos do navegador
- Entenda como utilizar e validar formulários
- Conheça boas práticas de organização de código Javascript
- Busque dados em outro servidor com AJAX
-
Artigo Do zero para programador front-end | Alura Cursos Online
Faça esse curso e:
Mais detalhesdo curso JavaScript: Programando na linguagem da web
-
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 - Descubra o poder do pré processador mais utilizado no mundo
- Use variáveis em seu código CSS
- CSS de fácil manutenção e com super poderes
- Aprenda a extender seu CSS e evitar repetições
-
Artigo 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 - Aprenda a famosa especificação flexible box para posicionar seus elementos na página
- Entenda as diversas propriedades do flexbox e como usá-las
- Entenda como as propriedades do flexbox substituem float, inline e inline-block
- Elabore um site responsivo com flexbox
-
Artigo Guia de Unidades no CSS | Alura Cursos Online
-
Curso CSS Grid: Simplificando layouts
Curso | 08h - Simplifique a criação de layouts complexos.
- Posicione elementos com mais facilidade.
- Utilize grid para calcular e alinhar elementos.
- Crie templates com mais eficiência e simplicidade.
- Diga para os elementos onde eles devem se posicionar.
- Diga para os elementos onde eles devem começar e terminar.
-
Artigo Como lidar com os limites de resolução em sites responsivos? | Alura Cursos Online
Faça esse curso e:
Faça esse curso e:
Faça esse curso e:
-
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.
-
Curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk
Curso | 10h - Conheça a diferença de sites mobiles e design responsivos
- Aprenda Técnicas de design fluído
- Conheça a tag viewport
- Faça debug remotos
- Conheças boas práticas de usabilidade mobile
-
Curso Bootstrap 4: Criando uma landing page responsiva
Curso | 08h - Mantenha seu código limpo e bem feito seguindo as boas práticas do desenvolvimento HTML5, agilizando seu desenvolvimento.
- Utilize os componentes prontos de navbar, carrossel, cards e modais para criar sites responsivos automaticamente.
- Use o método de desenvolvimento front-end para que suas aplicações sejam sempre responsivas, simples e funcionais independente do dispositivo.
- Produza um código HTML e CSS semântico e de qualidade para que leitores de tela e robôs de busca consigam ler bem o seu site.
- Padronize os componentes de seu site ou aplicação web.
-
Artigo Como lidar com os limites de resolução em sites responsivos? | Alura Cursos Online
Faça esse curso e:
Mais detalhesdo curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk
Faça esse curso e:
Mais detalhesdo curso Bootstrap 4: Criando uma landing page responsiva
-
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.
-
Artigo Organizando o CSS no seu projeto | Alura Cursos Online
-
Artigo Nomes de classes no CSS | Alura Cursos Online
-
Artigo CSS mágico que não existe | Alura Cursos Online
-
Curso Arquitetura CSS: Descomplicando os problemas
Curso | 08h - Simplifique a organização de seus arquivos CSS.
- Crie arquiteturas CSS simples e robusta.
- Aprenda boas práticas e metodologias sobre CSS.
- Deixe o seu site responsivo.
Faça esse curso e:
Mais detalhesdo curso Arquitetura CSS: Descomplicando os problemas
-
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.
-
Artigo 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
-
Artigo CSS: animações com Transition e Animation | Alura Cursos Online
-
Curso HTTP: Entendendo a web por baixo dos panos
Curso | 14h - Torne-se um programador web completo
- Entenda os detalhes do protocolo HTTP
- Saiba quando usar GET e POST
- Estude sobre segurança na web e o HTTPS
- A web stateful e a web stateless
- Conheça as melhorias do HTTP/2
-
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 - Otimize a performance de carregamento das suas páginas
- Entenda os gargalos de performance e como resolvê-los
- Veja técnicas para diminuir o tráfego de suas páginas
- Faça sites com menos requests
- Automatize suas otimizações com gulp
- Analise suas páginas com as ferramentas do mercado
- Converta mais usuários com sites mais rápidos
-
Curso Performance Web II: Critical Path, HTTP/2 e Resource Hints
Curso | 20h - Otimize o Critical Path da página para ultra performance
- Aprenda a fazer carregamento assíncrono e lazy load
- Conheça a nova versão do HTTP/2 e como as práticas de front-end são afetadas
- Use Resource Hints para antecipar otimizações para os usuários
- Analise a performance com WebPageTeste e PageSpeed Insights
- Otimize um projeto prático do início ao fim!
-
Artigo Quais impactos de performance ao usar serviços externos de fontes? | Alura Cursos Online
Faça esse curso e:
Mais detalhesdo curso HTTP: Entendendo a web por baixo dos panos
Faça esse curso e:
Mais detalhesdo curso Performance Web I: otimizando o front-end
Faça esse curso e:
Mais detalhesdo curso Performance Web II: Critical Path, HTTP/2 e Resource Hints
-
Front-end
Além dessa, a categoria Front-end conta com cursos de HTML, CSS, React, Angular, JavaScript, jQuery,e mais...