Cursos de HTML e CSS
52 cursosConfira os cursos que a DevMedia preparou para você se tornar um programador web front-end completo. Aqui você aprende HTML, CSS, JavaScript, jQuery, Bootstrap, Angular e muito mais. Confira!

HTML: span, iframe e comentários
O curso tem como foco a tag span, a tag iframe e os comentários no HTML.

HTML: Fundamentos
O HTML é uma linguagem de marcação utilizada para a criação de páginas na web. Sua principal finalidade é estruturar o...

CSS: Flexbox
Neste curso ensinaremos uma técnica super importante do CSS conhecida como Flexbox, essencial para criar layouts...

CSS: Position relative e absolute
Neste curso você aprenderá a utilizar outros valores da propriedade position do CSS: relative e absolute. Com eles...

CSS: Position fixed
A propriedade position, encontrada no CSS, define o posicionamento de um elemento no documento (página web). A...

CSS: Pseudo-classes e Pseudo-elementos
Neste curso falaremos sobre a utilização de pseudo-classes e pseudo-elementos no CSS para uma estilização mais...

CSS: Modificando elementos HTML
A modificação de elementos HTML através do CSS é parte essencial da construção de páginas profissionais, pois através...

CSS: Background - Preenchendo o fundo de um elemento
Background, ou área de fundo é o espaço localizado atrás de um conteúdo. Esse espaço pode ser preenchido utilizando uma...

HTML: Criando formulários
Formulário no HTML é um recurso que permite ao usuário digitar informações diretamente em uma página. Um formulário...

CSS: Estilização através de seletores
Os seletores são padrões usados para identificar elementos em uma página. Com eles você pode definir estilos para...

CSS: Propriedades
Nesse curso veremos as propriedades no CSS e como elas mudam a aparência dos elementos nas páginas web. Vamos abordar...

Curso: CSS Introdução
CSS (Cascading Style Sheets) é uma linguagem de estilos que serve para manipular a parte visual das páginas web. Com...

Programador Front-end: Introdução
Este curso é o ponto inicial na sua carreira como programador front-end. Nele você vai aprender os conceitos básicos...

HTML: Listas
As listas nos permitem criar subdivisões de textos para uma melhor abordagem sobre um assunto. Existem três tipos...

HTML: MetaTags
As tags de cabeçalho são tags HTML que ficam localizadas na seção de cabeçalho de uma página e podem ser utilizadas...

HTML: Tabelas
Tabelas são comumente utilizadas em páginas HTML para organizar e exibir dados em linhas e colunas. Neste curso vamos...

HTML: Tags básicas
Para que o usuário entenda do que se trata uma página web é necessário que o conteúdo dela esteja organizado. Para isso...

CSS: Posicionamento - Float
Aprenda neste curso como criar colunas em uma página utilizando a propriedade float e os seus valores left e right.

CSS: Posicionamento - Position
Aprenda nesse curso como utilizar a propriedade position do CSS e quatro dentre os diferentes modelos de posicionamento...

CSS: Posicionamento
Aprenda neste curso quais são os fundamentos para posicionar elementos em uma página.

CSS: Exibindo e ocultando caixas
Aprenda nesse curso como utilizar a propriedade display e seus valores inline, block e none.

CSS: Bordas, margem e preenchimento
No Box Model as caixas que envolvem os elementos possuem conteúdo, preenchimento, borda e margem. Aprenda a controlar...

CSS: Controlando o tamanho das caixas
Anteriormente nesta matéria falamos sobre como os elementos em uma página web podem ser vistos como se estivessem...

O que é HTML?
Neste curso apresentaremos os conceitos introdutórios do HTML: seu funcionamento e uma apresentação da tecnologia....

Curso de HTML Básico
O HTML é uma linguagem de marcação utilizada para a criação de páginas na web. Sua principal finalidade é estruturar o...

Crie formulários com HTML5
Formulários são uma parte fundamental da web, pois são a forma mais básica de interação com o usuário. Isso porque...

HTML na prática: Criando mais uma página WEB
Neste curso aprenderemos a criar nossa primeira página web utilizando a linguagem HTML. Para isso, já empregaremos as...

HTML 5 Data Attributes: Armazenando informações em elementos HTML
Neste curso vamos aprender a utilizar os Data Attributes, um recurso do HTML 5 que permite definir atributos...

JavaScript: Gerando uma ação durante inatividade do usuário
Neste curso veremos como exibir notificações para o usuário após um tempo de inatividade na página usando a Page...

HTML5 Web Storage: Armazenando dados no browser
O uso de Web Storage é útil para o armazenamento local (no lado cliente da aplicação) de informações, fazendo que o...

Curso de HTML5
Neste curso de HTML 5 veremos o que desenvolvimento da linguagem HTML (HyperText Markup Language) ficou parada na...

O que é CSS?
Neste curso apresentaremos os conceitos introdutórios do CSS: como funciona e como ele pode ajudar no desenvolvimento e...

Como criar sua primeira página com CSS
Neste curso usaremos a linguagem CSS para customizar a aparência de uma página HTML. Para isso, usaremos um documento...

Introdução ao CSS na prática
CSS forma, juntamente com HTML e JavaScript, os fundamentos da programação web. Com ele descrevemos para o navegador...

Conteúdo adaptável com CSS Flex
Neste curso front-end veremos como criar uma página onde a altura dos boxes se ajusta, assim o layout da página não...

Curso de Pseudo classes do CSS
Nesse curso aprenderemos a aplicar estilo baseado no estado do elemento com as pseudo classes do CSS. Veremos como...

CSS3 Display Flex: Como organizar cards e boxes automaticamente
O Flexible Box Layout Model veio com o CSS3 para facilitar a criação de interfaces. Através do Flexbox o elemento filho...

Criando uma estrutura Front-end de navegação
Neste curso criamos uma estrutura de um layout onde abordamos três características: a responsividade sem a utilização...

Curso de Front-End: Aplicação Web com HTML, CSS e JavaScript
Neste curso veremos como criar uma estrutura de navegação front-end seguindo o modelo One Page (uma única página), e...

O que é LESS?
Neste curso apresentaremos os conceitos introdutórios do LESS, um pré-processador de CSS, suas características básicas...

O que é Materialize?
Neste curso apresentaremos os conceitos introdutórios do Materialize, um framework para desenvolvimento web front-end,...

O que é Grunt?
Neste curso apresentaremos os conceitos introdutórios do Grunt, suas características e funcionamento. Veremos também um...

O que é Bootstrap?
Neste curso apresentaremos os conceitos introdutórios do Bootstrap, um framework para desenvolvimento web front-end,...

Criando um form de login com Bootstrap
Neste curso veremos como criar um formulário de login utilizando HTML, CSS e o framework Bootstrap, que traz por padrão...

Como criar modais no Bootstrap
As janelas modais são componentes utilizados em aplicações web para exibir conteúdo ou solicitar o preenchimento de...

Bootstrap: Criando um formulário com Tabs, Tooltip e Popover
Neste curso desenvolveremos um formulário em abas com Bootstrap, usando Tabs, Tooltip e Popover. Por meio desses...

Bootstrap: Trabalhando com Design Responsivo
Este curso tem como objetivo apresentar o framework Bootstrap 3. Para isso, inicialmente vamos entender o que é essa...