{"componentChunkName":"component---src-templates-blog-post-js","path":"/desenvolvedor-frontend-o-que-voce-precisa-saber-para-comecar/","result":{"data":{"markdownRemark":{"fields":{"slug":"/desenvolvedor-frontend-o-que-voce-precisa-saber-para-comecar/"},"frontmatter":{"titulo":"Desenvolvedor front-end: O que você precisa saber para começar?","data":"24/11/2020","tag":"Programação","image":{"childImageSharp":{"fluid":{"src":"/static/9b46c6625aedc1e4222d2531929ec429/db955/roadmap_big.png","base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAC4jAAAuIwF4pT92AAADY0lEQVQozz1TXUyTVxg+WArMuUWnWRfHdrdlmRdemMxdTBOTkTG3DJlzkxiHYFSWLUynbuLMAi6uKZTSfhTEtlpxKqAiFFrpH9A/S9cW+/U3G06ECgi0IhnXe5+dcrGLJ++bc87787znfZhUcFO+4CGpxk05/3+bO+Mo4FijdtM6rYeGUtO0kl1EzH6PsvNPKbO4iOVshuLTc1RlFqmQx7FcUJHgwRrBi3yNGxJuJdzm/CLBjbWtHjDlKBqcUSD7FNG7PZS09CMS/APPkyKl/H50+ROoMsfxms4PlserM6ULG1UWkqpHqUjloEKtj/IEL7FmV+6ONuiDNJFIElaeU5dWg7p9ZRS+cpEmHVZYAnH6QdlBb+z/jgobbhEr1vvp674Qas7WU2+/BUKrEnaLDRbxb+hHIii/OowDv13CP0vPkJlJw+vzYfeWtzCkVmAsOYnPK4+CbSwGK62GpK4T7E1jiH429qFs3yFqPFeH2tNnsWPLu/jig/egPV6DW7o2VJaX4aorhF3Vtfjo4904o9CgR5zCkdpTYNtKIVE6IDEmIG3jlFmOctMIKvcfoNfXv4R33i/BnvJyqA2dvMMwzvfYcFJ7DS18hqeHEvjeFML5h8DxHg9eqOAJdRHItMOQNZlW/4Hltfpok2IApTVnSPZjG2z2AdjSK7gizuGOLwbT/SiONTTj7a3bINu6Ha9WnMDL9d14UWkDbwaseYwnN+DQ9curPlvXfp8uhR/h24EwlQz+idD8Mvb2jsMxnoRtLIJv5ALaBTVKKmsg7zBi+90UfvJNYrMhAEVwGjJDEK6AHQ3mETCBUy7Wj5Flagn65AJdFJ/gk/44fvE/hkachTzwGEe7R1FtfgArp5+5rEVrKgNvegkf3hERmFvGp6Y4dLE5dMfTeKWDJ5Tp/OSdXUZHbJbUkRnsvC3CmJyHefIZTBwXwjP4zDEDl9WAoOsanAv/op0XlofSGF9cQX1gCqZHWewxp8BaXGCbeYeHrUlUDEbpMB/67/EnqLoXw5cmEXv7Irjg+wudiQWcuN2LX29ocdD6ENWWKOq9E9hxM4hzngl8NSCCyW0o4EJgXBGUr3ZB0jLKl9iJfNUwWJODq4OjyY4ClRNSDqawY23jIFgjX5Fm5ypy7ySqEXBBgMtuVV3/AekBiUMajf+8AAAAAElFTkSuQmCC","aspectRatio":1.6423357664233578,"srcSet":"/static/9b46c6625aedc1e4222d2531929ec429/7e7e9/roadmap_big.png 225w,\n/static/9b46c6625aedc1e4222d2531929ec429/62b1f/roadmap_big.png 450w,\n/static/9b46c6625aedc1e4222d2531929ec429/db955/roadmap_big.png 900w,\n/static/9b46c6625aedc1e4222d2531929ec429/82360/roadmap_big.png 1350w,\n/static/9b46c6625aedc1e4222d2531929ec429/dd299/roadmap_big.png 1643w","sizes":"(max-width: 900px) 100vw, 900px"}}}},"html":"<p>Você e um iniciante na área de front-end? Nesse post eu vou te explicar todas as etapas de um desenvolvimento front-end!</p>\n<p>Seguindo um <a href=\"https://roadmap.sh/frontend\">roadmap front-end developer</a></p>\n<h3>O que e front-end?</h3>\n<p>Front-end e a parte visual de um site ou sistema, e a onde a gente consegue interagir com o usuário.</p>\n<p>Geralmente, um desenvolvedor front-end ele e responsável por codificar uma nova interface, utilizando linguagens como: HTML, CSS e Javascript.</p>\n<p>Mas nos dias de hoje um desenvolvedor front-end não estão mais limitados só na <strong>web</strong>, eles podem também trabalhar na parte de navegação de um site, nos layouts e até na aparência de diferente nos dispositivos moveis (responsividade).</p>\n<p>Mas agora vamos ao que interessa!</p>\n<p><img src=\"https://media.giphy.com/media/l0Exk8EUzSLsrErEQ/giphy.gif\" alt=\"https://media.giphy.com/media/l0Exk8EUzSLsrErEQ/giphy.gif\"></p>\n<p>Abaixo está uma imagem que demostra as possibilidades que você pode seguir. Essa imagem foi feito por <a href=\"https://twitter.com/kamranahmedse\">Kamran Ahmed</a>. Depois de ler esse post não se esqueça de dar uma estrela no repositório para apoiar trabalho dele!</p>\n<p>Dica da lores: Essa imagem vai te dar muitos insights, sobre qual área e a melhor para você! Não leve <strong>como verdade absoluta</strong>, absorva aquilo que você <strong>mais se identifica</strong> pois você compreendera uma ferramenta mais adequada para alguns casos do que a outra. Então Leia esse mapa e comece a codar e boa sorte!</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 283.75%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAA5CAYAAAA2uwvlAAAACXBIWXMAAAsSAAALEgHS3X78AAAMjElEQVRYw5VYa6wcZRkeIsIPFTHVCBItGBpjDASjCUKJwRSCkqJiWxADApIoBlAqKVYo1lJ6v9BCKYVWSmvRUoS2UNqe+/bc95w9u+fsnr1fZu+zO7uzl9mdve95fGa2V/3lJN9+szPfvPNenvd532+ErJRHXEwhkYwjkUggHk8gnU6jVCqhUqng3NGe68xznJNcGxJ9iEZDiERCiMZEhCMBaJoGQZZl/glDDIUQDouQpCQfSEKlwHK5DK1cQrFYRFEtGcIoGoMDSaxe6cOrG4PYuTmEzWtFbNvg6whUcjmkZQVSSoaUzvBBjYIqyPG6LiydkRGJRpHNZiiwo2YmU4d9RoXbWYbLWYJjJgenI4dGowGhmtegZsKoFKPQCjGUciKqWg7tdst4uNzAJYemytDyATQqEQ4RTTVJP1y4L0gOF+zd6zE9sAmWng3wDq+HFDqDWhPIJkxISGuhZNdRczt4CRHXCUycfBHmU+swfmo1PAN7oaaqHf/S0YLs88J5Zheco3tgH3oTgYk3kIqMo1QDCvmjiMWfQzS+gj6dRIOaxP19cI/sgINrZ4dfgzjxPsrZswLpEkEJhxG2HYZoP4IA59jsP6FIzkvNbF44bzU0tOs5VMsZNKsK2o0CWq3W2bsUmBZnMNO7DpPdG2A+vR6zA2shhS0oVDRquByy/CyD9QzU4guoNmqIefvgG90Ca992uIdfhWjbTxQoBq5adQpMzngwdXI9pvo2UeAGTPe9TIFW5MtpYuwaQulajq8QnwugqAqSARMFbcJkz1Y4Brcgaj2CmH0QyeldyBOLNDkE99hBhAyT34dnYj+UlB9FTSJw58HjmQeX64tIJq6nQBlJfw+CY6/ANbQFvrH1SFoPI2z+FG7TH6AkJmmy2w973w7MDL4GS99OzA5ugxSZglIGM2UY2cIQytoQqtUxAx0x3wjX7IHXfAiu0X0ITp6khmMIja5GLmmlQJcH092b4KQ/7KbtcAysQ0KcglpNQysNI5WdQDY3wVScRL1mJujdUNU+5PP9yCk99F8/CrkjyMvjaNSqEFJuH2y9O2Ef3k0tdxOPm5GKBlDSDjK3r6LZ8+nLr0MUL4ecuZ55/iTHZyCG5/H6N+jb+SgUrkKleqwD7EJkGoHBvxp+8Qy+jNDwX1CW7ZBjPUytH8AX+DGFLaZGE5DzeZqfR7WWQlo8CCn5EwpewtxfRAuGOgLLORci1j30w7uITO9H1LYbpYwb9XoY6dQmwmYVFGUNajUbqvUoCmUXH2vCL5pgmVqN8fGNsFrXMNfdHYGaRiLIk02KKlUvIF9QoVVKxs18/u+ktdvg8y9GKHgHvN6FSKVvQrn0JkLRDMxmJwU6OXv40mJHYIZsYrfb4fEGyCqkLilF4fnzmVFkVjXPJkKpVGFuZ6HkimSnFM0V+UyEfBilwDytqkOoE/3pSJr4stBvE4xYkj5q8WELtTmGuHScGg13NM7JCEwdhGf8LfgsBwmbPXCP7yWE9kKcPoS8IkEwcjVdQ9S8DxHLdoY/AGYQfbKLxLAE4eiD5L9VHW3pEi8FBMZfR8Cyn8DehZmBrXAN7sSM6TXkMkkIzWYWpYIZ6fARptUxFPMzaLVTaLcUBoF+LRd4XqM5/F+VaJqfL/ByDnD2ISNHkck6ORyETglCLHoYtuml9OHfCOAfksa/TPxdS/x9lVpew+heRX/9mgJuIlnMRyy2gD5bgELxW1x7HUnjbYi+x+F33UULmHpB1pLubhMmJkaJt6sRCAjw+wX4fJ0RDgsIhhZSkGAM/X802hmJpAA5vQ2Tph4Mnd6HbDoKQc3XCcw8a4jG6A4QKqeZWsOcu3ntU84m1hY3s6QbseS/GJjj1PYUtT/Je0cJMR/iCSfEiJkaF8g2yQ8Riz7Etz+MUtnJizEu/pDEECNcWozwJzT1ON3xEQolldH38P7HHJ/yOpk9FyMj3QCH/UrjmhAJ2jAx+TZRvxfJVIAgP0CNHzGSX6tkuOi3EKNPMwBPkBimicF9hNOjLLe/p7krUcwmMMWIDw9v49oYhETwMBy2xXDP/hyF7DDqlRpvHKWAQ3TBKOqkf72+zM2dZ3lSP0ezzqLEudGkL7sIrw/4/BkIHvdHmO5ZwzKwFtlIEFoxwCg/xfEkfXgIDWaJWr1QU5oaOwdxGyKJXzEJTqFaaCDsehpe6y8gup5nUOQEcqkxFGQzKqXwJcVJ10pV30ciRUpL7yL/bSZHkv+KGWSYVSpJpMxiFfQ+B6ftQQQDFJjwkqXd34TNfgvh8X0+kLxEaLl8iBF+llF8jm54Emr+A2TlJIvVKaTEUfo6xlbmdhLHPPijd0LwO3dj1rwYlsElCDoe5VsL5MMCEvEHEAwuZS15hGWAHcJF3UFBSVPgSUjBYWZZhkEkj4Z+R0vWENieLhact2EbeAsR1uWiXEZVaaCijRAqgywBJhTUMNNulFDSa8sAqpUA6zOLvrcbfss78E4cQD4T6dCXz+uGaaAL/f2nMWEegZrVLjE5y2KVyErE6c+YRcto+k8hJ3eDaQ7f5AEMH3sBI8dWsWycJVhFySIQDDDdfHwoZnRQrVaFBSlHyldQriiER+clZDoUSaSVapx566cQC0TPvxEPvke/DqJMnhSajU409dFunyXV4jH65T74A48SPkuIy1fQ1puneAauyUWYsNwAt/s6Espb9PPT8Pu+h6D/ZrhmNkBwW3bTjN8w5E8w4beyhnSTQVaQlp5FKMxGKbac+fs8WWcXXzINi+UWUv6XyPJXMOW2Izj1EbwjGxAY2wLH9BEI06bH4HR/FtO2K/i2+1kWn0C+KLDRvMxgl6QkIKdeDlW7ErHEUXgCD1PYj6jhbXTTQYiOXiMwIeu78M32QrCaHseU7Wq+9Wp4PQ+wGD2DoEiain6BdCYYI5G8jGD+HFJSP1tnmcJ8FBbhyyXD916/n+Z7aQFLQEQcJMcdI46OMitsBOgorKwbztmPMTt7ktp8wvljTNOcuJSGrNSYknrfXTF6cEWps1rCGGWtRsaOZeg3Fqp0laivc1GNFAYujPO/k8NjDI2LtYqMTMHBrsKNRt2LWr1K33ZT+AGU1EPQFBJsItFDDe7G5ORCthZr+VAnJeTMyzRpMQO1jL68DxJ5L8foS8l7maIPUYFlUPjCKesb6Op+HH29yyEGbBDC4ZMY6P8OurpuwKxjBRcWqL5CDTPcHchG8dexmS/GIWX9JNgghz6nWLjKyKRTYLFj8MzISAxKMmpjCVyDsVMrjIT3B3rp9JtJmLfC6VxArbeR+8CALEcgdA+DtJRouJt992bkCt2Ix37JnQEbLvs7GBn6MwTRb4Pp2Hr0HHkJHmsXzRmgsG/DZPou5/nE2mYD8O2WBq2ql1WV59wQsXUrKDHE2dFKso+QmcSMlQQbF6cx0b2RQl/ilqGfW64+5vSN6O29CUNDXyMsNp3PoBbdq120b5HCXjj6t5Ltu+Bh9+A274Kgb7niEQk+t4fZkWSt4K4g3E/NegmlXiLAY6RltRJGimUhV/iErJMlN243WD3q3ow6twlVtnk1DiERmmIROsgs6OVepGx0YblcjXPdgJFaLBvaKPlh+u8RMvdKwkYH9P2YmbkRbv9jqDfqJJQcmnXu9YL2HbAO3QGfYxW3DZ1dZ7td5QLuR9r6qPH6HHLlllGQ9A6rUkkzCXwsu1EKm+O241U4nJ8n8yzVBZ6A+cRaeCc/QLk2x+1Eg358ihosgtd3B6O5A0wKJDOzTK37ERYfpKZL6JpFiKX7jE1RNHQIljN3w2X9E/kwPo6E8x+QwyY2SXPUaI4wkVGpxZAvRdFqpo3SqZWPI5V6ilT2RxQpqNWscE0Jap07A/8opk5thGN8PwTdxJYOC55otTY1JLUnV7KvuZOBuZea3kO2EWF39OD48Rdx4sRquF2DZ8tiG3ovGvcPwN6zEi7z653+0OgRa5362yHaPIdsjKauIQ+XO4yu00NsrEZYCsLnN4v6oSoik6IX6Ri7rzZBNjfXoJ9q1LRu7NhrNb2nqdH5DRalFkeVpFE6O1Rj56735npK/vchNBplptcy8tldNO9WRu895m+L5246P0QsBkkQUaPexONxYjTMoInEYeb8N4k5mj7HDbs+C/pPu52lnxiIqm6ejsESBekfKCLG0IWJFKKfS5JkfOzQv0voml9suqFh55wkqZWIqbJxrhLc5zTSH9QFnPuvf9DQiVX/JnFBw4sE6nmaSulRXUgzb6cpa43cnZtrQffvxUPfaDdJPfrQz88J+h8N2+0Kao0iF6rG+f9zXCxMP/4DHp+wNxw4CX4AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"frontend\"\n        title=\"frontend\"\n        data-src=\"/static/f52ec18bc3f4e3983021a4aede7c20ef/d9199/frontend.png\"\n        data-srcset=\"/static/f52ec18bc3f4e3983021a4aede7c20ef/8ff5a/frontend.png 240w,\n/static/f52ec18bc3f4e3983021a4aede7c20ef/e85cb/frontend.png 480w,\n/static/f52ec18bc3f4e3983021a4aede7c20ef/d9199/frontend.png 960w,\n/static/f52ec18bc3f4e3983021a4aede7c20ef/d56b5/frontend.png 1215w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Bastante coisa né? Mas fica calmo que conforme você vai estudando tudo vai se encaixando.</p>\n<p><img src=\"https://media.giphy.com/media/oDK8A6xUNjD2M/giphy.gif\" alt=\"https://media.giphy.com/media/oDK8A6xUNjD2M/giphy.gif\"></p>\n<h3>Internet e como funciona?</h3>\n<p>Hoje e muito importante conhecer o básico de internet e entender como ela funciona por baixo dos panos.</p>\n<blockquote>\n<p>A Internet é uma rede global de computadores conectados uns aos outros que se comunicam por meio de um conjunto padronizado de protocolos.</p>\n</blockquote>\n<p>E necessário você entender sobre:</p>\n<ul>\n<li>Protocolos HTTP.</li>\n<li>Domínios.</li>\n<li>Navegadores, como funciona e a diferença de cada.</li>\n<li>Hospedagem.</li>\n<li>DNS.</li>\n</ul>\n<h3>Básico: HTML, CSS e JS</h3>\n<p>Geralmente grande parte dos desenvolvedores front-end usam essas 3 linguagens, para codificar sites, estilos, estrutura de um site:</p>\n<ul>\n<li>HTML (base de tudo)</li>\n<li>CSS (estilo)</li>\n<li>Javascirpt (Para interação)</li>\n</ul>\n<h3>Habilidade de desenvolvimento geral</h3>\n<p>Agora vou listar algumas habilidades que você vai precisar na sua carreira front-end!</p>\n<ul>\n<li>Aprenda os comandos básicos do <a href=\"https://github.com/\">GitHub</a>, compartilhe seus códigos com a comunidade.</li>\n<li>Aprenda sobre os protocolos HTTP e Fundamentos básicos de API REST (GET, POST, PUT, DELETE...)</li>\n<li>Aprenda usar o Google, StackOverflow.</li>\n<li>Utilize bom terminal (bash, zsh)</li>\n<li>Estude sobre estrutura de dados</li>\n<li>Estude padrões de projeto</li>\n</ul>\n<h3>Estilo: Pré-processador e arquitetura CSS</h3>\n<p>Um pré-processador CSS é um programa que permite gerar CSS a partir da sintaxe exclusiva do próprio pré-processador. Pré-processadores podem tornar o código CSS mais organizado, sendo eles:</p>\n<ul>\n<li><a href=\"https://sass-lang.com/\">Sass</a></li>\n<li><a href=\"https://postcss.org/\">PostCSS</a></li>\n<li><a href=\"http://lesscss.org/\">Less</a></li>\n<li><a href=\"https://stylus-lang.com/\">Stylus</a></li>\n</ul>\n<h3>Familiarize-se com as ferramentas</h3>\n<p>Para se tornar um bom desenvolvedor front-end, você deve se dedicar <strong>como em qualquer área da sua vida,</strong> devera se dedicar a ferramentas de depuração, testes de unidade, testar aprender uma tecnologia de front-end como React, Vue, Angular, etc.</p>\n<p>Todos os navegadores vêm com ferramentas para dar apoio ao desenvolvedor. E essas ferramentas permite que você teste e ajuste suas páginas no proprio navegador, de maneira específicas para como o navegador está interpretando seu código.</p>\n<p>Algumas ferramentas úteis:</p>\n<ul>\n<li><a href=\"https://www.npmjs.com/\">npm</a></li>\n<li><a href=\"https://classic.yarnpkg.com/en/\">yarn</a></li>\n</ul>\n<p>Alguns executores de tarefas que indico:</p>\n<ul>\n<li><a href=\"https://docs.npmjs.com/cli/v6/using-npm/scripts\">script npm</a></li>\n<li><a href=\"https://webpack.js.org/\">webpack</a></li>\n</ul>\n<p>Linter e formatadores que indico:</p>\n<ul>\n<li><a href=\"https://prettier.io/\">prettier</a></li>\n<li><a href=\"https://eslint.org/\">eslint</a></li>\n</ul>\n<h3>Frameworks CSS</h3>\n<p>Um framework css abstrai o design da web comuns e torna o design mais fáceis para o desenvolvedor implementar.</p>\n<ul>\n<li><a href=\"https://getbootstrap.com/\">Bootstrap</a></li>\n<li><a href=\"https://materializecss.com/\">Materialize</a></li>\n<li><a href=\"https://bulma.io/\">Bulma</a></li>\n<li><a href=\"https://semantic-ui.com/\">Semantic-ui</a></li>\n</ul>\n<h3>Frameworks</h3>\n<p>São pacotes que contêm códigos pré-escritos, eles forcem estrutura e uma base para construir enquanto permite flexibilidade com o design final.</p>\n<p>Frameworks mais utilizados:</p>\n<ul>\n<li><a href=\"https://vuejs.org/\">Vue.js</a></li>\n<li><a href=\"https://pt-br.reactjs.org/\">React.js</a></li>\n<li><a href=\"https://angular.io/\">Angular</a></li>\n</ul>\n<p>Quer saber a fundo a diferença entre React ou vue? Clica aqui → <a href=\"https://lorenakauane.com.br/blog/pt/2020-09-08-react-ou-vue-qual-devo-escolher-para-meu-projeto/\">React ou Vue qual devo escolher para meu projeto?</a></p>\n<h3>Testando seu aplicativo</h3>\n<p>O objetivo do testes no front-end é testar as funcionalidades gerais para garantir que a camada de apresentação esteja livre de defeito com as atualizações sucessivas.</p>\n<ul>\n<li><a href=\"https://jestjs.io/\">Jest</a></li>\n<li><a href=\"https://enzymejs.github.io/enzyme/\">Enzima</a></li>\n<li><a href=\"http://sinonjs.org/\">Sinon</a></li>\n<li><a href=\"https://mochajs.org/\">Mocha</a></li>\n<li><a href=\"http://www.chaijs.com/\">Chai</a></li>\n<li><a href=\"https://github.com/avajs/ava\">AVA</a></li>\n<li><a href=\"https://github.com/substack/tape\">Fita</a></li>\n</ul>\n<p>Caso você tenha escolhido react para o seu projeto, aprenda a criar testes nesse post! De <a href=\"https://lorenakauane.com.br/blog/pt/2020-05-22-como-criar-testes-no-front-end-em-reactjs/\">como Criar testes no front-end com ReactJs.</a></p>\n<p><strong>Teste de ponta a ponta</strong></p>\n<p>No teste E2E, o desenvolvedor testa todo o aplicativo junto e testa-o como um usuário faria.</p>\n<p>Basicamente, aqui o <strong>desenvolvedor testa o fluxo de trabalho do aplicativo do início ao fim</strong>. O objetivo é replicar cenários reais de usuários para que o sistema possa ser validado quanto à integração e integridade dos dados.</p>\n<p>A seguir estão algumas ferramentas:</p>\n<ul>\n<li><a href=\"https://www.seleniumhq.org/\">Selenium</a></li>\n<li><a href=\"http://webdriver.io/\">Webdriver</a></li>\n<li><a href=\"https://cypress.io/\">Cypress</a></li>\n<li><a href=\"https://pptr.dev/\">Puppeteer</a></li>\n<li><a href=\"https://github.com/cucumber/cucumber-js\">Cucumber.js</a></li>\n<li><a href=\"http://nightwatchjs.org/\">Nightwatch.js</a></li>\n</ul>\n<p><strong>Teste de integração</strong></p>\n<p>Os testes de integração garantem que várias partes do aplicativo funcionem juntas. É um dos testes cruciais e mais importantes.</p>\n<ul>\n<li><a href=\"https://karma-runner.github.io/\">Karma</a></li>\n<li><a href=\"https://www.cypress.io/\">Cypress</a></li>\n<li><a href=\"http://nightwatchjs.org/\">Nightwatch</a></li>\n<li><a href=\"http://webdriver.io/\">WebDriver.io</a></li>\n</ul>\n<h3>Renderização do lado do servidor</h3>\n<p>A renderização do lado do servidor (SSR) é a capacidade de um aplicativo de contribuir exibindo a página da web no servidor em vez de renderizá-la no navegador.</p>\n<ul>\n<li><a href=\"https://nextjs.org/\">Next.js</a></li>\n<li><a href=\"https://github.com/jaredpalmer/after.js\">After.js</a></li>\n<li><a href=\"https://github.com/alidcastano/rogue.js\">Vampiro</a></li>\n</ul>\n<h3>Gerador de site estático</h3>\n<p>Um gerador de site estático é uma ferramenta de publicação, que é essencialmente um conjunto de ferramentas para construir sites estáticos com base em um conjunto de arquivos de entrada.</p>\n<ul>\n<li><a href=\"https://nextjs.org/\">Next.js</a></li>\n<li><a href=\"https://jamstack.org/generators/\">Jamstack</a></li>\n<li><a href=\"https://staticsitegenerators.net/\">geradores estáticos</a></li>\n<li><a href=\"https://nuxtjs.org/\">Nuxt.JS</a></li>\n<li><a href=\"https://gohugo.io/\">HUGO</a></li>\n<li><a href=\"https://www.gatsbyjs.com/\">Gatsby</a></li>\n</ul>\n<h3>Aplicativo móvel</h3>\n<p>Bem, aqui o front end interage diretamente com o usuário, incluindo elementos de design, como wireframes, maquetes, cache e sincronização de banco de dados. Ele oferece uma experiência de usuário tranquila em vários tamanhos e orientações de tela.</p>\n<ul>\n<li><a href=\"https://flutter.io/\">Flutter</a></li>\n<li><a href=\"https://facebook.github.io/react-native/\">React Native</a></li>\n<li><a href=\"https://nativescript.org/\">Nativescript</a></li>\n<li><a href=\"https://ionicframework.com/\">Ionic</a></li>\n</ul>\n<h3>Aplicativo Desktop</h3>\n<p>Mesmo que celulares e tablets tenham a vantagem de serem úteis, você simplesmente não pode ignorar os aplicativos para PC e desktop. Porque ainda existem muitos usuários que preferem o PC a melhor opção para explorar os aplicativos e sites</p>\n<ul>\n<li><a href=\"http://electron.atom.io/\">Electron</a></li>\n<li><a href=\"https://github.com/nwjs/nw.js\">NW.js</a></li>\n<li><a href=\"https://proton-native.js.org/#/\">Proton</a></li>\n<li><a href=\"https://neutralino.js.org/\">Neutralino.js</a></li>\n<li><a href=\"https://deskgap.com/\">DeskGap</a></li>\n</ul>\n<h3>Continue aprendendo</h3>\n<p>Então, depois de ler este guia, você pode dar o pontapé inicial em sua jornada como desenvolvedor front-end da web com certeza. Embora o <strong>aprendizado seja a única chave para o sucesso</strong>. Para isso, você tem que praticar e aprender de forma <strong>consistente</strong>. Boa sorte nos estudos!</p>\n<p><img src=\"https://media.giphy.com/media/qYyJ48I53CUEg/giphy.gif\" alt=\"https://media.giphy.com/media/qYyJ48I53CUEg/giphy.gif\"></p>\n<p>Me manda uma sugestão do que você gostaria de aprender no e-mail lorenakauanecontato@gmail.com 😉</p>\n<p>Até o próximo post!</p>\n<p><img src=\"https://media.giphy.com/media/IccrIoCPkphZiYeWVW/giphy.gif\" alt=\"https://media.giphy.com/media/IccrIoCPkphZiYeWVW/giphy.gif\"></p>","timeToRead":7}},"pageContext":{"slug":"/desenvolvedor-frontend-o-que-voce-precisa-saber-para-comecar/","previousPost":{"fields":{"slug":"/meu-ano-de-2020/"},"frontmatter":{"templateKey":"blog-post","data":"24 de Dezembro de 2020","tag":"Carreira","titulo":"Meu ano de 2020 | Retrospectiva","locale":"pt"},"timeToRead":5},"nextPost":{"fields":{"slug":"/como-criar-extensao-no-vscode/"},"frontmatter":{"templateKey":"blog-post","data":"16 de Outubro de 2020","tag":"Programação","titulo":"Como criar extensão no vscode","locale":"pt"},"timeToRead":6},"locale":"pt"}}}