Skip to content

marcobrunodev/curso-frontend-com-boas-praticas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published