├── LICENSE ├── README.md └── images ├── frontend.jpg ├── guia.png └── intro.jpg /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Arthur Coutinho 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Guia do Desenvolvedor Front-end 4 | 5 |

Guia do Desenvolvedor Front-end

6 |

7 | 8 | ## :dart: O guia para alavancar a sua carreira 9 | 10 | Abaixo você encontrará conteúdos para te guiar e ajudar a se torna um desenvolvedor front-end, caso você já atue como front-end confere o repositório para descobrir novas ferramentas para o seu dia-a-dia, os caminhos que você pode tomar e as tecnologias para incorporar na sua stack para se tornar um profissional atualizado e diferenciado em front-end, faça bom uso do guia e bons estudos! 11 | 12 | Segue nas redes sociais para acompanhar mais conteúdo:
13 | [](https://github.com/arthurspk) 14 | [](https://www.facebook.com/seixasqlc/) 15 | [](https://www.linkedin.com/in/arthurspk/) 16 | [](https://twitter.com/manotoquinho) 17 | [![Discord Badge](https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/NbMQUPjHz7) 18 | [](https://www.instagram.com/guiadevbrasil/) 19 | [![Youtube Badge](https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UCzmXzz_VR0Li8-YOvWN_t3g) 20 |
21 | 22 | ## 💌 Doações 23 | 24 | > Olá! Se você está lendo isso, é porque provavelmente já conhece o meu repositório no GitHub, que oferece conteúdo gratuito para ajudar desenvolvedores a aprimorarem suas habilidades. E se você está aqui, talvez esteja considerando contribuir com uma doação para apoiar a continuação do projeto. 25 | 26 | - [Clique aqui para realizar realizar uma doação! 💓](https://beacons.ai/doacoesguiadev) 27 | 28 | > Se você quiser contribuir, existem várias opções disponíveis, incluindo PayPal, PagSeguro, Mercado Pago, Buy Me A Coffe, Pic Pay e Pix. Qualquer doação, por menor que seja, é extremamente bem-vinda e será usada com responsabilidade e transparência. Obrigado por considerar apoiar meu projeto! Juntos, podemos continuar a compartilhar conhecimento e ajudar a criar uma comunidade de desenvolvedores mais forte e colaborativa. 29 | 30 | ## :closed_book: E-Book 31 | 32 | > Este repositório é um projeto gratuito para a comunidade de desenvolvedores. Você pode me ajudar comprando o e-book "e-Front" se estiver interessado em aprender ou melhorar suas habilidades de desenvolvimento front-end. O e-book é completo e cobre tecnologias essenciais como HTML, CSS, JavaScript, React, TypeScript e mais. O valor é simbólico e sua compra me ajuda a produzir e fornecer mais conteúdo gratuito para a comunidade. Adquira agora e comece sua jornada no desenvolvimento front-end. 33 | 34 | - eFront - Estudando Desenvolvimento Front-end do Zero. [Clique aqui para comprar](https://hotm.art/cSMObU) 35 | 36 | ## 📛 Direitos autorais 37 | 38 | > Esse projeto tomou como referência para ser feito os roadmaps feito pelo projeto [roadmap.sh](https://roadmap.sh/roadmaps) você pode conferir todo o projeto original feito pelos autores principais pelos links abaixo, desde já agradecendo a todos eles por fornecer esse conteúdo que serviu de extrema importância e de base para a criação deste repositório. 39 | 40 | - [Roadmap.sh](https://roadmap.sh/roadmaps) - Site do roadmap.sh onde você encontrará diversos roadmaps em inglês. 41 | - [Repositório Oficial do Projeto](https://github.com/kamranahmedse/developer-roadmap/blob/master/license) - Repositório oficial do projeto em inglês. 42 | 43 | ## :warning: Nossa proposta 44 | 45 | > A proposta deste guia é dar uma ideia sobre o atual panorama e guiá-lo se você estiver confuso sobre qual o próximo aprendizado, não influenciar você a seguir os 'hypes' e 'trendys' do momento. Acreditamos que com um maior conhecimento das diferentes estruturas e soluções disponíveis poderá escolher a ferramenta que melhor se aplica às suas demandas. E lembre-se, 'hypes' e 'trendys' nem sempre são as melhores opções. 46 | 47 | ## :beginner: Para quem está começando agora 48 | 49 | > Não se assuste com a quantidade de conteúdo apresentados neste guia. Mesmo o foco sendo para profissionais já consolidados que desejam se manter atualizados, acredito que quem está começando pode usá-lo não como um objetivo, mas como um apoio para os estudos. Neste momento, dê enfoque no que te dá produtividade e o restante marque como Ver depois. Ao passo que seu conhecimento se torna mais amplo, a tendência é este guia fazer mais sentido e fácil de ser assimilado. Bons estudos e entre em contato sempre que quiser! :punch: 50 | 51 | ## 🚨 Colabore 52 | 53 | - Abra Pull Requests com atualizações 54 | - Discuta ideias em Issues 55 | - Compartilhe o repositório com a sua comunidade 56 | - Mande feedbacks no [LinkedIn](https://www.linkedin.com/in/arthurspk/) 57 | 58 | ## 🌍 Tradução 59 | > Se você deseja acompanhar esse repositório em outro idioma que não seja o Português Brasileiro, você pode optar pelas escolhas de idiomas abaixo, você também pode colaborar com a tradução para outros idiomas e a correções de possíveis erros ortográficos, a comunidade agradece. 60 | 61 | Guia Extenso de ProgramaçãoEnglish — [Click Here](https://github.com/arthurspk/guiadevbrasil)
62 | Guia Extenso de ProgramaçãoSpanish — [Click Here](https://github.com/arthurspk/guiadevbrasil)
63 | Guia Extenso de ProgramaçãoChinese — [Click Here](https://github.com/arthurspk/guiadevbrasil)
64 | Guia Extenso de ProgramaçãoHindi — [Click Here](https://github.com/arthurspk/guiadevbrasil)
65 | Guia Extenso de ProgramaçãoArabic — [Click Here](https://github.com/arthurspk/guiadevbrasil)
66 | Guia Extenso de ProgramaçãoFrench — [Click Here](https://github.com/arthurspk/guiadevbrasil)
67 | Guia Extenso de ProgramaçãoItalian — [Click Here](https://github.com/arthurspk/guiadevbrasil)
68 | Guia Extenso de ProgramaçãoKorean — [Click Here](https://github.com/arthurspk/guiadevbrasil)
69 | Guia Extenso de ProgramaçãoRussian — [Click Here](https://github.com/arthurspk/guiadevbrasil)
70 | Guia Extenso de ProgramaçãoGerman — [Click Here](https://github.com/arthurspk/guiadevbrasil)
71 | Guia Extenso de ProgramaçãoJapanese — [Click Here](https://github.com/arthurspk/guiadevbrasil)
72 | 73 | ## 🗺️ Frontend Roadmap 74 | 75 | ![Frontend Roadmap](./images/frontend.jpg) 76 | 77 | ## ◾ HTTP 78 | 79 | > O Hypertext Transfer Protocol, sigla HTTP é um protocolo de comunicação utilizado para sistemas de informação de hipermídia, distribuídos e colaborativos. Ele é a base para a comunicação de dados da World Wide Web. 80 | 81 | - [MDN - HTTP](https://developer.mozilla.org/pt-BR/docs/Web/HTTP) - O MDN Web Docs é o website oficial de Mozilla para desenvolvimento de padrões web 82 | 83 | ## ◾ HTML 84 | 85 | > HTML (Linguagem de Marcação de HiperTexto) é o bloco de construção mais básico da web. Define o significado e a estrutura do conteúdo da web. Outras tecnologias além do HTML geralmente são usadas para descrever a aparência/apresentação (CSS) ou a funcionalidade/comportamento (JavaScript) de uma página da web, sendo assim HTML é uma linguagem essência para você que quer se tornar desenvolvedor front-end. 86 | 87 | - [MDN - HTML](https://developer.mozilla.org/pt-BR/docs/Web/HTML) - O MDN Web Docs é o website oficial de Mozilla para desenvolvimento de padrões web 88 | - [Cursos de HTML](https://github.com/arthurspk/guiadevbrasil#-cursos-de-html-e-css) - Cursos de HTML do repositório geral do Guia Dev Brasil 89 | 90 | ## ◾ CSS 91 | 92 | > CSS (Cascading Style Sheets) é um mecanismo para adicionar estilo a um documento web. O código CSS pode ser aplicado diretamente nas tags ou ficar contido dentro das tags