Giters

romsishiyama / teens4-S1-html-css

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Teens4-HTML-CSS-I

Turma teens Reprograma | Front-end | 2021 | Fundamentos de HTML e CSS I

Plano de aula para o dia 13 de novembro e 17 de novembro, sobre HTML e CSS básico. Este arquivo será alimentado conforme o andamento da semana (:

link para o arquivo dontpad;

CONTEÚDO AULA 13 DE NOVEMBRO, SÁBADO, 14H - 18H

  • [] Apresentações
  • [] Combinados
  • [] Apresentação PowerPoint parte1
    • [] Cliente e Servidor
    • [] O que é linguagem de marcação de hipertexto? <!DOCTYPE html>
    • [] Elementos HTML: tags (etiquetas) e atributos
    • [] Elementos <head> e <body>
  • [] Preparando estrutura de desenvolvimento juntas
    • [] Criando pastas e arquivos, baixando live-server
  • [] Mãos a obra, criando nosso primeiro html
    • [] Tags usadas no <head> e no <body>
    • [] Exemplo com imagens <img> e seus atributos src alt, títulos <h1> e parágrafos <p>
    • [] Tags semânticas, como e porque usá-las! (:
    • [] <header> <nav> <footer> <main> <section> <article> <ul> <ol> <li>
    • [] <a> - links em âncora, e seu atributo href
  • [] Intervalo - 15min
  • [] Retomando tags no powerpoint + tirar dúvidas
  • [] Introdução CSS
    • [] CSS - Folha de estilo em cascata
      • [] Diferentes formas de adicionar estilo à página
        • [] A tag e atributo <style>
        • [] Importar arquivo style.css através da tag <link>
    • [] - Estilizando o CSS juntas - propriedades básicas color bg-color font-size font-family
    • [] Seletores CSS - .class #id elemento atributo
    • [] Especificidade com seletores, propriedades CSS e efeito cascata
  • [] Powerpoint parte III retomando a tarde
    • [] Responder dúvidas
    • [] Apresentar exercícios da semana, para entregar na sexta (06/11)

CONTEÚDO AULA 17 DE NOVEMBRO, QUARTA, 14H - 18H

  • [] Dúvidas da semana
  • [] Usando o inspetor do navegador
  • [] Reset básico - mexendo nos estilos padrão de página
    • [] - elemento *
    • [] border-box vs content-box
  • [] Box-sizings (tamanho das caixas) e displays
    • [] Blocos <div> e elementos em linha <span>, <img>
    • [] Displays block, inline, inline-block
    • [] Mexendo em bordas, margens, preenchimentos e conteúdo
      • [] border margin padding width height
  • [] Display flex - o famoso Flexbox
    • [] Mães <div>as e filhas <div>inhas. Display na mãe, mexe as filhas.
    • [] Algumas propiedades e seus valores: justify-content align-items align-content flex-direction flex-wrap
  • [] Intervalo - 15min
  • [] Tempo para dúvidas responder mais dúvidas :)
  • [] Criando juntas
  • [] Mais algumas dicas importantes
    • [] Endentar o código :)
    • [] Importando fontes externas (ex.: Google Fonts)
    • [] Imagens de fundo background-image
    • [] Nomeando classes pra não se perder, introdução ao método BEM
  • [] Retirar dúvidas sobre exercícios e falar sobre materiais e jogos de CSS disponíveis :)

Links úteis para estudo :)

Sites úteis para buscar por imagens e layout

Vídeos para estudo

Jogos de CSS!! :)

About

Languages

Language:HTML 50.8%Language:CSS 49.2%