/Roadmap-Front-end

Montei aqui um roadmap para momentos em que nos sentirmos perdidos sobre "pra onde ir" na área de front

Primary LanguageHTML

Roadmap Front-end

Montei aqui um roadmap para momentos em que nos sentirmos perdidos sobre "pra onde ir" na área de front-end

  1. Internet - Conceitos Básicos

    Primeiro de tudo, é muito importante você entender os conceitos básicos da internet. Qual o funcionamento de sua estrutura

    • Como ela funciona?
    • O que é HTTP
    • O que são browsers e como funcionam
    • DNS e seu funcionamento
    • O que é domínio
    • O que é hospedagem

  2. Front Básico

    1. HTML

      Hypertext Markup Language - É ela que dá estrutura de toda página web (que poderá ser estilizada com CSS ou se tornar interativa vom JS)

      • Entendendo o básico da estrutura
      • Semântica
      • Form e validadores
      • Convensões e melhores práticas
      • Acessibilidade
      • SEO
      • HTML5 (sugiro que depois de entender a estrutura básica, você dê uma olhada em HTML5, desta forma você já estará mais atualizado e executará coisas com mais facilidade

    2. CSS

      Cascading Style Sheets - linguagem utilizada para estilizar seu front-end

      • Aprenda o básico
      • Coloque em prática seus layouts
        • Floats
        • Positions
        • Display
        • Box Model
        • CSS Grid
        • Flex Box
      • CSS3 (após entender o básico, já estude o CSS3 para estar atualizado e profissionalizar seus estilos de forma mais fácil)

    3. Javascript

      O JS é quem permite adicionar interatividade as suas páginas. Controles deslizantes, interação de clique, pop-ups, etc.

      • Sintaxe e estruturas básicas
      • Manipulando DOM
      • Integração de API (Fetch API / Ajax)
      • ES6+ e Javascript modular
      • Conceitos Javascript - Event bubbling, escopo, protótipo, shadow DOM, strict, hoisting

  3. GIT

    Controle de versionamento, repositório

    • Entenda os tipos existentes e qual você utilizará (aqui usaremos o github), crie sua conta!
    • Estrutura de funcionamento
      1. Repositórios
      2. Add
      3. Commit
      4. Pull/Push
      5. Criação de Pull Request - Verificação e Validação
    • Códigos git

  4. Gerenciadores de Pacotes

    Permitem que vocês gerencie as dependências (códigos externos escritos por você ou por outra pessoa), que seu projeto precisa para funcionar corretamente

    • NPM
    • Yarn

  5. CSS - Intermediário - Arquitetura e Pre-processadores

    Aprofundando os estudos em CSS, aqui veremos sobre arquiteturas que podem ser utilizadas e pré-processadores (afim de padronizar e agilizar o trabalho).

  6. Build tools

    • Bundler
    • Formatadores de Linters - ESLint

  7. Frameworks JS - VUE.JS ( o que será utilizado aqui)