Cursos de HTML e CSS
51 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: Fundamentos](http://www.devmedia.com.br/arquivos/cursos/HTML_fundamentos/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/css_flexbox_2447/thumb.png)
CSS: Flexbox
Neste curso ensinaremos uma técnica super importante do CSS conhecida como Flexbox, essencial para criar layouts...
![CSS: Position relative e absolute](http://www.devmedia.com.br/arquivos/cursos/css_posicionamento_eric/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/CSS_positionfix/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/css_pseudos/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/css_modf_elements/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/css_background/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/html_forms/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/css_seletores/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/CSS_propriedades/thumb.png)
CSS: Propriedades
Nesse curso veremos as propriedades no CSS e como elas mudam a aparência dos elementos nas páginas web. Vamos abordar...
![CSS: Introdução](http://www.devmedia.com.br/arquivos/cursos/css_intro_2426/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/prog_Frontend/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/Listas_HTML/thumb.png)
HTML: Listas
As listas nos permitem criar subdivisões de textos para uma melhor abordagem sobre um assunto. Existem três tipos...
![HTML: MetaTags](http://www.devmedia.com.br/arquivos/cursos/HTML_Metatags/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/HTML_table/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/HTML_tags/thumb.png)
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](http://www.devmedia.com.br/arquivos/cursos/curso_css_posicionamento_float_2364.png)
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](http://www.devmedia.com.br/arquivos/cursos/curso_css_posicionamento_2363.png)
CSS: Posicionamento - Position
Aprenda nesse curso como utilizar a propriedade position do CSS e quatro dentre os diferentes modelos de posicionamento...
![CSS: Posicionamento](http://www.devmedia.com.br/arquivos/cursos/curso_css_posicionamento_2362.png)
CSS: Posicionamento
Aprenda neste curso quais são os fundamentos para posicionar elementos em uma página.
![CSS: Exibindo e ocultando caixas](http://www.devmedia.com.br/arquivos/cursos/curso_css_exibindo_ocultando_caixas_2361.png)
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](http://www.devmedia.com.br/arquivos/cursos/curso_css_border_margin_padding_2360.png)
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](http://www.devmedia.com.br/arquivos/cursos/curso_css_control_box_2359.png)
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?](http://arquivo.devmedia.com.br/cursos/imagem/curso_o-que-e-html_1966.jpg)
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](http://arquivo.devmedia.com.br/cursos/imagem/curso_introducao-ao-html_2162.png)
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](http://www.devmedia.com.br/arquivos/cursos/curso_crie-formularios-com-html_52195.png)
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](http://arquivo.devmedia.com.br/cursos/imagem/curso_html-na-pratica-criando-mais-uma-pagina-web_1968.png)
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](http://arquivo.devmedia.com.br/cursos/imagem/curso_html5-data-attributes-como-criar-atributos-customizados-no-html_2007.jpg)
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...
![HTML5 Web Storage: Armazenando dados no browser](http://arquivo.devmedia.com.br/cursos/imagem/curso_primeiros-passos-com-web-storage_1921.jpg)
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...
![JavaScript: Gerando uma ação durante inatividade do usuário](http://arquivo.devmedia.com.br/cursos/imagem/curso_page-visibility-api-como-verificar-inatividade-no-browser_1947.jpg)
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...
![Curso de HTML5](http://www.devmedia.com.br/cursos/_new/img/tema/front-end.jpg)
Curso de HTML5
Neste curso de HTML 5 veremos o que desenvolvimento da linguagem HTML (HyperText Markup Language) ficou parada na...
![O que é CSS?](http://arquivo.devmedia.com.br/cursos/imagem/curso_o-que-e-css_1970.jpg)
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](http://arquivo.devmedia.com.br/cursos/imagem/curso_como-criar-sua-primeira-pagina-com-css_1981.png)
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](http://www.devmedia.com.br/arquivos/cursos/curso_introducao-ao-css-na-pratica_2213.png)
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](http://arquivo.devmedia.com.br/noticias/exemplos/exemplo_css-flex-box-responsivo_38209.png)
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](http://arquivo.devmedia.com.br/cursos/imagem/curso_1454.jpg)
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](http://arquivo.devmedia.com.br/cursos/imagem/curso_css-flex_1908.jpg)
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](http://arquivo.devmedia.com.br/cursos/imagem/curso_1455.jpg)
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](http://arquivo.devmedia.com.br/cursos/imagem/curso_landing-page-como-criar-um-layout-com-html-css-e-javascript_1960.jpg)
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?](http://arquivo.devmedia.com.br/cursos/imagem/curso_o-que-e-less_2148.png)
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?](http://arquivo.devmedia.com.br/cursos/imagem/curso_o-que-e-materialize_1953.jpg)
O que é Materialize?
Neste curso apresentaremos os conceitos introdutórios do Materialize, um framework para desenvolvimento web front-end,...
![O que é Grunt?](http://arquivo.devmedia.com.br/cursos/imagem/curso_o-que-e-grunt_2100.png)
O que é Grunt?
Neste curso apresentaremos os conceitos introdutórios do Grunt, suas características e funcionamento. Veremos também um...
![O que é Bootstrap?](http://arquivo.devmedia.com.br/cursos/imagem/curso_o-que-e-bootstrap_1961.jpg)
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](http://arquivo.devmedia.com.br/cursos/imagem/curso_1486.jpg)
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](http://arquivo.devmedia.com.br//cursos/imagem/curso_1484.jpg)
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](http://arquivo.devmedia.com.br/cursos/imagem/curso_bootstrap-criando-um-formulario-com-tabs-tooltip-e-popover_1949.jpg)
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](http://arquivo.devmedia.com.br/cursos/imagem/curso_407.jpg)
Bootstrap: Trabalhando com Design Responsivo
Este curso tem como objetivo apresentar o framework Bootstrap 3. Para isso, inicialmente vamos entender o que é essa...