Curso de HTML e CSS – Criando um projeto portfólio

Comece a criar projetos para treinar essas importantes linguagens.

Dois termos obrigatórios para qualquer pessoa que pretende trabalhar com desenvolvimento web é HTML e CSS. O HTML é uma das linguagens mais utilizadas do mundo no desenvolvimento de sites. Mas, ao contrário do que muitos pensam, não se trata de uma linguagem de programação, e sim de marcação. Através das suas tags, é possível marcar os conteúdos que serão exibidos nas páginas da internet. Mas para estilizar as páginas deve-se utilizar o HTML acompanhado do CSS.

O CSS é a sigla para Cascading Style Sheets, ou seja, Folhas de Estilo em Cascatas. É uma maneira de dar estilo ao código criado por linguagens como HTML, XML ou XHTML, por exemplo. De forma prática, ela funciona como uma camada de personalização ao conteúdo visível.

Aprenda a criar um projeto de portfólio com HTM e CSS neste curso online e gratuito. Não deixe de conferir também o curso de HTML e CSS.

Sobre o curso

A ideia do curso é ensinar os estudantes a criar páginas com HTML e CSS na prática. Por isso, além de entender como as linguagens utilizadas, os alunos poderão ir acompanhando o passo a passo dos vídeos para criar projetos de portfólio. Junto, os estudantes também aprenderão a utilizar o VSCode, considerado como um dos ambientes de desenvolvimento mais utilizados nos dias de hoje para web.

Estrutura do curso

Projeto do curso de HTML e CSS feliz | Mod 00 – Aula 01

Pré-requisitos do curso de HTML e CSS feliz | Mod 00 – Aula 02

Onde tirar sua dúvidas do curso feliz de HTML e CSS | Mod 00 – Aula 03

Introdução ao VSCode | Mod 00 – Aula 04

Figma para devs | Mod00 – Aula 05

Revisão Módulo 00 | Mod00 – Aula 06

Desafios top-top-top | Mod00 – Aula 07

Criando pasta do projeto | Mod01 – Aula 01

Como alterar layout no figma | Mod01 – Aula 02

Introdução ao HTML | Mod01 – Aula 03

Como criar o cabeçalho (header) – Parte 1 | Mod01 – Aula 04

Devo ou não devo comentar o código? | Mod01 – Aula 05

Como estruturar o HTML | Mod01 – Aula 06

Atributo global no HTML | Mod01 – Aula 07

HTML feliz com Emmet | Mod01 – Aula 08

Introdução ao CSS | Mod01 – Aula 09

Como importar o CSS | Mod01 – Aula 10

Sistema de cores | Mod01 – Aula 11

Reset CSS | Mod01 – Aula 12

Exemplos de Reset CSS | Mód01 – Aula 13

CSS do menu de navegação | Mód01 – Aula 14

Qual a diferença entre Serif e Sans Serif? | Mód01 – Aula 15

Como estilizar um botão | Mód01 – Aula 16

O que é a propriedade display? | Mód01 – Aula 17

Como funciona o display: inline | Mód01 – Aula 18

Como funciona o display: block | Mód01 – Aula 19

Como funciona o display: inline-block | Mód01 – Aula 20

Qual a diferença entre padding e margin? | Mód01 – Aula 21

Forma específica e resumida | Mód01 – Aula 22

O px no CSS não é 1px da tela | Mód01 – Aula 23

Detalhe nos itens do menu | Mód01 – Aula 24

CSS do header – Parte 2 | Mód01 – Aula 25

Revisão Módulo 01 | Mod01 – Aula 26

Desafios top-top-top | Mód01 – Aula 27

Como mudar logo e cores do header | Mód02 – Aula 01

Efeito hover no button | Mód02 – Aula 02

O que é Git? | Mód02 – Aula 03

Como instalar o Git? | Mód02 – Aula 04

O que é repositório? | Mód02 – Aula 05

Como fazer commit com Git | Mód02 – Aula 06

Como editar mensagem do commit com Git | Mód02 – Aula 07

O que é GitHub? | Mód02 – Aula 08

Como criar repositório no GitHub? | Mód02 – Aula 09

Como enviar o código para o GitHub | Mód02 – Aula 10

Como clonar um repositório do GitHub | Mód02 – Aula 11

O que é o GitHub pages? | Mód02 – Aula 12

Como criar site no GitHub pages | Mód02 – Aula 13

Como colocar seu projeto no ar com o GitHub Pages | Mód02 – Aula 14

Revisão Módulo 02 | Mod02 – Aula 15

Desafios top-top-top | Mód02 – Aula 16

Como criar HTML do title | Mód03 – Aula 01

CSS do title – Parte I | Mód03 – Aula 02

Como inserir sombra no texto | Mód03 – Aula 03

Organizando o CSS do projeto | Mód03 – Aula 04

Passo a passo: commit do component title | Mód03 – Aula05

HTML do subtitle | Mód03 – Aula 06

CSS do subtitle | Mód03 – Aula 07

Commit do component subtitle | Mód03 – Aula 08

HTML do box e tag div | Mód03 – Aula 09

CSS do component BOX | Mód03 – Aula 10

Como reutilizar componentes | Mód03 – Aula 11

Commit do component box | Mód03 – Aula 12

Como isolar código do componente | Mód03 – Aula 13

Quando usar class e id | Mód03 – Aula 14

Quando usar seletor de tag | Mód03 – Aula 15

Quando usar seletor de id | Mód03 – Aula 16

Quando usar seletor de class | Mód03 – Aula 17

Commit do component button | Mód03 – Aula 18

Commit da refatoração | Mód03 – Aula 19

Como inserir imagem de fundo x Tag section | Mód03 – Aula 20

Diferença entre div e section | Mód03 – Aula 21

Estilizando o banner | Mód03 – Aula 22