-
Navegador e editor de código - 01:33
- Nessa primeira aula instalamos os programas necessários para começar a programar.
-
Introdução ao HTML - 11:12
- Nessa aula demos introdução ao HTML (Hyper Text Markup Language), aprendemos sobre a estrutura inicial do HTML e suas tags.
-
Introdução ao CSS - 10:45
- Nessa aula demos introdução ao CSS (Cascading Style Sheets), o CSS é tudo que vai dar estilos ao nosso site. Vimos sobre propriedades, seletores e suas especificidades.
-
O que iremos desenvolver e o que é o Figma - 04:33
- Nessa aula apresentamos a ferramenta Figma e o projeto que iremos desenvolver durante o Stage 02.
-
Iniciando o projeto 01 - 06:40
- Nessa aula codificamos a estrutura inicial do nosso projeto, passando por todos os elementos do HTML (head, meta, body).
-
Estruturando o projeto 01 - 12:17
- Nessa aula começamos a exportar as imagens do Figma e estruturar o nosso projeto.
- Aprendemos as sobre os elementos
<div>
,<img>
,<h1>
,<a>
e<p>
. - Além de novas propriedades como src, href e id .
-
Apresentação e posição dos elementos na tela - 07:58
- Nessa aula organizamos a posição dos nossos elementos respeitando a ordem do HTML e aprendemos sobre
block
einline
e acrescentamos mais dois novos elementos<span>
e<strong>
.
- Nessa aula organizamos a posição dos nossos elementos respeitando a ordem do HTML e aprendemos sobre
-
Aplicando fontes customizadas e iniciando o CSS - 06:51
- Nessa aula aplicamos fontes customizadas e demos inicio a estilização do nosso projeto 01.
- Open Sans - Google Fonts
-
Trabalhando com cores e fontes - 07:21
- Nessa aula começamos a dar cores ao textos do nosso projeto de acordo com o layout do Figma. Também aprendemos algumas propriedades do CSS:
color
,font-size
,line-height
,font-weight
.
- Nessa aula começamos a dar cores ao textos do nosso projeto de acordo com o layout do Figma. Também aprendemos algumas propriedades do CSS:
-
Alinhando textos e elementos - 03:36
- Nessa aula começamos organizando nosso código CSS e depois alinhamos os textos e elementos da página utilizando as propriedades do CSS:
text-align
.
- Nessa aula começamos organizando nosso código CSS e depois alinhamos os textos e elementos da página utilizando as propriedades do CSS:
-
Mais ajustes de textos - 04:48
- Nessa aula fizemos alguns ajustes nos textos do nosso projeto e aprendemos como quebrar linhas e uma maneira de utilizar espaços.
-
Trabalhando com espaçamentos - 09:53
- Nessa aula aprendemos sobre as propriedades
margin
do CSS, aplicamos o shorthand em um trecho de código e ajustamos os espaçamentos do nosso projeto.
- Nessa aula aprendemos sobre as propriedades
-
Bordas e classificações de elementos - 05:59
- Nessa aula aprendemos como adicionar uma linha em nossa página com a propriedade
border
do CSS.
- Nessa aula aprendemos como adicionar uma linha em nossa página com a propriedade
-
Posicionando elementos - 05:12
- Nessa aula nós aprendemos sobre posicionamento de elementos na página utilizando a propriedade
position
do CSS.
- Nessa aula nós aprendemos sobre posicionamento de elementos na página utilizando a propriedade
-
Finalizando esta etapa - 01:56
- Revisão de tudo que foi visto nesse módulo.
-
Utilizando o codepen para enviar desafios - 03:59
- Resultado final Móveis customizados