Roadmap HTML e CSS

Confira neste roteiro o que você precisa estudar para aprender HTML e CSS. Nesta página você vai encontrar cursos, livros e canais que vão ser úteis para o seu aprendizado

Nos tempos atuais, a carreira de FrontEnd costuma ser a porta de entrada para os programadores que querem entrar na área de TI.

Independente de quais as tecnologias que você deseje trabalhar, um sólido conhecimento de HTML e CSS é necessário.

O HTML não é algo novo, surgiu em 1991. HTML é a sigla para HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto. Ele é o componente base para a criação de sites e sistemas para a web. Ele permite criar páginas e definir qual a estrutura e o conteúdo de cada uma delas.

A medida que iam surgindo os primeiro sites, foi crescendo a necessidade de aplicar uma melhor formatação para o seu conteúdo. Para resolver isso, surgiu o CSS

CSS significa Cascading Sheet Styles, ele surgiu em 1996. A função do CSS é trabalhar sobre o HTML, trabalhando na parte estética da página, formatando e posicionando elementos. Se você deseja que sua página possa ser acessada por qualquer tipo de dispositivo você precisa dominar o CSS.

A seguir, um roteiro de conteúdos que podem ajudar nos seus estudos de HTML e CSS. Clique em cada tópico para obter mais informações

HTML

Entender como funciona a estrutura de uma página Web é o primeiro desafio que deve ser vencido. A seguir uma lista de tópicos que você deve conhecer para dominar o HTML.

Estrutura da linguagem

O que é o HTML
O que são tags?
Atributos de uma tag
Estrutura do documento
 
 
 
 

Estrutura do documento

HTML
Head
!DocType
Body
Meta
Header
Title
Footer

Categorias de Tags

Forms
Tables
Inline
Block
List
 
 
 

Tags Inline

Img
Br
Progress
Video
A
Iframe
Canvas
Audio

Block Tags

P
H1... H6
Blockquote
Div
Footer
Hr
 
 

Formulários

Form
Button
Textarea
Input
Label
Select
 
 

Tabelas

Table
Tfoot
Thead
Tr
Td
Th
 
 

Listas

Ol
Ul
Li
 
 
 
 
 

Eventos

Eventos de Teclado
Eventos de Mouse
Eventos de Formulário
Eventos de Página
 
 
 
 

Gráficos

Canvas
SVG
 
 
 
 
 
 

Media

Media
Video
Audio
Plug-ins
 
 
 
 

APIs

Geolocation
Drag/Drop
Web Storage
Web Workers
SSE
 
 
 

CSS

Depois de dominado o HTML, chegou a hora de ir mais longe e aprender a formatar suas páginas. Estude os tópicos a seguir e descubra todo o poder do CSS!

Básico

O que é o CSS?
Estrutura
CSS inline
Style blocks
Stylesheets externas
 
 
 
 
 

Como o CSS trabalha?

DOM
CSSOM
Render Tree
 
 
 
 
 
 
 

Seletores

Universal
Elemento
ID
Class
Atributo
 
 
 
 
 

Outros Seletores

Compostos
Múltiplos
Descendentes
Filhos
Irmãos
Pseudo classes
Pseudo elementos
 
 
 

Conceitos Básicos

Box Model
Block/Inline
Unidades
Cores
Variaveis
 
 
 
 
 

Estilização Básica

Box Shadows
Backgrounds
Gradientes
Bordas
Opacidade
 
 
 
 
 

Estilizando Texto

Fontes
Truncando texto
Text-align
 
 
 
 
 
 
 

Layout e Posicionamento

Padding e Margin
Z-index
Float
Clear
Height/Widht
Left, right, top, bottom
Position
Display
Max-width/Min-width
Max-height/Min-height

Imagens

Posicionamento
Transparência
Bordas
Arredondamento
Responsividade
Background
 
 
 
 

Transformação

Perspective
Rotation
Translation
Scaling
Skewing
 
 
 
 
 

Animação

Transitions
Animations
Keyframes
Waypoints
 
 
 
 
 
 

FlexBox

Conceitos
Direção
Eixo
Alinhamento
Espaçamento
 
 
 
 
 

Design Responsivo

Media Queries
Breakpoints
Design Responsivo
Design Adaptativo
 
 
 
 
 
 

Grid

Conceitos
Container
Item
Lines
Tracks
Areas
justify-items
justify-self
align-self
 

Pré processadores

Sass
Less
Stylus
POSTCSS
 
 
 
 
 
 

Frameworks CSS

Bootstrap
Materialize CSS
Foundation
Tailwind
Chakra UI
Material UI
Radix UI
 
 
 

Arquitetura CSS

BEM
OOCSS
SMACSS
SUITCSS
Atomic
 
 
 
 
 

CSS com JS

Styled Components
Radium
Emotion
 
 
 
 
 
 
 

JavaScript

Depois de dominar o HTML e o CSS, o JavaScript é o próximo passo na sua carreira de desenvolvedor Frontend. Não deixe de conferir este roteiro de estudos sobre JavaScript!

Roadmap Javascript