└── readme.md /readme.md: -------------------------------------------------------------------------------- 1 | # O que aprender para trabalhar com desenvolvimento web? 2 | 3 | [Nesse vídeo](https://youtu.be/01bCZPpSQxY) iremos ver as 3 principais carreiras focadas no desenvolvimento web e quais são os principais caminhos para conseguir trabalhar com isso 4 | 5 | # Roadmaps 6 | 7 | ## Front-end 8 | 9 | É a área que trabalha especificamente com a construção das interfaces que serão usadas pelos usuários, ou seja, tudo aquilo que quando abrimos um site conseguimos enxergar! 10 | 11 | É muito focada no visual da página e na experiência de quem for utilizá-la 12 | 13 | **1. Conceitos básicos relacionados com a internet** 14 | 15 | HTTP, DNS, domínio e hospedagem 16 | 17 | Inclusive tenho um [vídeo](https://www.youtube.com/watch?v=7ZC3_QwKo5Q) explicando alguns desses conceitos 18 | 19 | **2. HTML - Linguagem de marcação** 20 | 21 | Principais tags, HTML semântico, fomulários, acessibilidade e validações 22 | 23 | Também tenho alguns vídeos explicando sobre ,[HTML](https://www.youtube.com/watch?v=3oSIqIqzN3M), [formulários](https://www.youtube.com/watch?v=wwqOJ2o84S4) e um [projeto prático com as principais tags](https://www.youtube.com/watch?v=llF6vD-RljE) 24 | 25 | **3. CSS - Linguagem de estilização** 26 | 27 | Principais propriedades e seus valores, posicionamento, reset CSS, display, box model, Grid, Flexbox, padrão BEM e responsividade 28 | 29 | Tenho um [vídeo](https://www.youtube.com/watch?v=LWU2OR19ZG4) explicando sobre como o CSS funciona e também ele está presente nos meus vídeos de projeto de [formulário](https://www.youtube.com/watch?v=wwqOJ2o84S4) e [landing page](https://www.youtube.com/watch?v=llF6vD-RljE) para vocês treinarem 30 | 31 | **4. Javascript - Linguagem de programação (é uma opção também começar por ele, ainda mais se não souber se quer seguir no front ou no back-end)** 32 | 33 | Lógica de programação, métodos de arrays, orientação a objetos, estrutura de dados, recursos do ES6, manipulação de DOM e fetch API 34 | 35 | **5. Pré processador CSS** 36 | 37 | SASS 38 | 39 | **6. Frameworks CSS** 40 | 41 | Bootstrap, Tailwind, Material UI, Chakra UI... 42 | 43 | **7. Sistema de controle de versões (pode ser necessário aprender antes ou depois mesmo)** 44 | 45 | Git e Github ou qualquer outro serviço de hospedagem 46 | 47 | Também tenho uma [série de vídeos](https://www.youtube.com/watch?v=UBAX-13g8OM&list=PLhkO7OMKgT_rqwGYldqcFxyN4yjFgmDh8) ensinando a utilizar essas tecnologias 48 | 49 | **8. Gerenciadores de pacote** 50 | 51 | NPM e Yarn 52 | 53 | **9. Frameworks Javascript** 54 | 55 | React, Vue ou Angular 56 | 57 | **10. CSS moderno** 58 | 59 | Styled Components e CSS Modules 60 | 61 | Depois disso tudo ainda tem muuuuita coisa relacionada com o front-end, outras tecnologias (inclusive o Typescript, que é uma versão com tipagem forte de JS) e com certeza você vai ao longo dessa jornada entender pra onde seguir e sempre se atualizando 62 | 63 | ## Back-end 64 | 65 | É a parte relacionada com o servidor, e não mais o cliente, ou seja, a pessoa que for utilizar a página web não enxerga exatamente o que o back-end está fazendo 66 | 67 | Ele é responsável por grande parte das regras de negócio e conexão com o banco de dados, onde serão guardadas as informações da plataforma 68 | 69 | **1. Conceitos básicos relacionados com a internet** 70 | 71 | Assim como já mencionado no front-end, é interessante esse conhecimento para poder entender o que será desenvolvido 72 | 73 | **2. Escolha uma linguagem de programação e aprenda** 74 | 75 | As principais linguagens usadas no começo, para quem não tem conhecimento nenhum são Javascript ou Python 76 | 77 | Outras linguagens também bastante usadas no back-end são: C#, java, ruby e php 78 | 79 | **3. Sistema de controle de versões** 80 | 81 | Como também já mencionado no roadmap de front-end, sendo as principais tecnologias git e github 82 | 83 | **4. Banco de dados** 84 | 85 | Aqui você deverá aprender a linguagem SQL e entender como utilizá-la na prática com algum banco de dados, como PostgreSQL, MySQL, MariaDB e muitos outros 86 | 87 | É necessário entender sobre relacionamento entre tabelas, chaves primárias, chaves estrangeiras, propriedades ACID, ORMs e todos os conceitos relacionados 88 | 89 | Além disso, também existem os banco de dados não relacionais, como MongoDB, Firebase e muitos outros 90 | 91 | **5. APIs - Application Programming Interface** 92 | 93 | REST, Json, autenticação (OAuth, token, cookies) e diversos outros conceitos relacionados 94 | 95 | **6. Testes** 96 | 97 | De integraçao, unitários e funcionais 98 | 99 | A partir daí, você segue aprendendo e se especializando cada vez mais com o que for preciso e necessário dentro da empresa que você for trabalhar 100 | 101 | 102 | ## Fullstack 103 | 104 | O caminho mais comum a se fazer é começar estudando o roadmap de front-end e depois partir para o roadmap de back-end, porém não é regra! 105 | 106 | Inclusive existe uma grande polêmica em relação a o que é ser fullstack, pois há quem julgue que seja necessário um mínimo de experiência apenas com front-end e depois apenas com back-end para poder juntar os dois e há quem acredite que seja possível já começar os estudos de programação misturando tudo. Isso vai de você e do que você for sentindo conforme for aprendendo a praticando 107 | 108 | Eu tenho um [vídeo](https://www.youtube.com/watch?v=Em0R3csNMVE) aqui no canal em que explico mais detalhadamente quais as diferenças entre front-end e back-end, então caso não tenha ficado claro de alguma forma, não deixe de conferir! 109 | 110 | ## Fontes 111 | 112 | https://kenzie.com.br/blog/desenvolvimento-web/ 113 | https://intelectua.com.br/blog/o-que-e-desenvolvimento-web 114 | https://harve.com.br/blog/desenvolvimento-web/o-que-faz-um-desenvolvedor-web-e-como-se-tornar-um-em-2022/ 115 | https://roadmap.sh/ 116 | --------------------------------------------------------------------------------