dreecarvalho / curso-frontend-com-boas-praticas

Básico HTML, CSS e JavaScript

Pré-requisitos

• Ter um navegador instalado
• VSCode, Atom, Sublime ou qualuqer outro editor de texto instalado

Criar components

O que aprendemos

• Browser, só existe o Firefox

  • Developer Tools

• HTML

  • Semântica
  • Tags do HTML5

• CSS

  • seletores por tag
  • Seletores por id
  • Seletores por class
  • pseudo-class
  • pseudo-element
  • valor de especificidade
  • muitas propriedades
  • variaveis (custom properties)
  • animation
  • trasition

• JavaScript

  • JSON
  • Formas de criar variaveis
  • funções
  • funções anonimas
  • Arrow function
  • callback
  • Array
  • String
  • for
  • forEach
  • map
  • filter
  • reducer
  • como não usar switch
  • this

JavaScript DOM

- Eventos
    - onclick
    - addEventListener('click', ...)
- NodeList
- bubbling javascript
- métodos do DOM
    - classList.add()
    - classList.remove()
    - classList.toggle()
    - getAttribute()
    - setAttribute()

O que é feito

• Texto grande caixa pequena
• Botão
• Header fixo
• Botão fixo
• Modal / Alert Box
• Carousel
• Tagging
• Máscara de formatação

A cada componente que for finalizado, será proposto um desafio.

Projeto

O que é feito

• Portifolio
• HTTP
• Git e GitHub tudo por command line
• AJAX (XHR e Fetch porque usar um ou outro)
  • HTTP request e response
  • Headers HTTP
  • Methods HTTP
  • Fields HTTP
• SVG
• Pipe line build (gulp)
• Deploy
• npm
• Node pra front end
• SAAS
• Bootstrap
• ES6 e ES7
• DOM o BOM
• Pare chutar e aprenda como funciona as propriedade de alinhamento do CSS
  • Grid Layout
  • Flexbox
  • display: block;
  • display: inline;
  • display: inline-block;
  • position: relative;
  • position: absolute;
  • position: fixed;
  • float: left || right
• Debuging VSCode
• Responsivo
  • media query
  • unidade de medidas relativas
    • em
    • %
    • ch
    • vh
    • vw
    • rem

Deploy

- VIM
- Heroku
- Digital Ocean
- Linux
- npm script ou gulp

Desafios

• 3 projetos (github)

FAQ

• Onde ficará o código do curso?
  • Está no GitHub => https://github.com/CollabCodeTech/curso-basico-html-css-js
• Que horas começa e que horas termina?
  • Depende do meu filho, mas ele dorme entre 20:00 e 21:00 e o começo da live será dentro deste horário. Vai termianar entre 00:00 e 01:00.