/Stage02-Introducao-ao-HTML-e-CSS

Stage 02 - Introdução ao HTML e CSS

Primary LanguageHTML

Stage 02 - Introdução ao HTML e CSS

  • 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 e inline e acrescentamos mais dois novos elementos <span> e <strong>.

  • 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.

  • 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.

  • 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.

  • 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.

  • Posicionando elementos - 05:12

    • Nessa aula nós aprendemos sobre posicionamento de elementos na página utilizando a propriedade position do CSS.

  • Finalizando esta etapa - 01:56

    • Revisão de tudo que foi visto nesse módulo.

  • Utilizando o codepen para enviar desafios - 03:59