100 days of code frontend
1.0.0
Nota: Este recurso é antigo! Arquivarei esse repositório até o final de julho de 2021, pois sinto que muitas das recomendações aqui estão desatualizadas para aprender o desenvolvimento da Web front-end em 2021.
Apoie este repositório, dando -lhe uma estrela ️ na parte superior da página e siga -me para obter mais recursos!
Deseja saber mais sobre o desenvolvimento do front -end? Considerar:
Este é um currículo um tanto opinativo para aprender o desenvolvimento do front-end durante o código #100DaySofCode. Como abrange uma ampla gama de tópicos de desenvolvimento front-end, pode ser considerado mais um curso de estilo de "pesquisa" do que um mergulho profundo em qualquer área. Idealmente, seu argumento de concluir este currículo será alguma familiaridade com cada tópico e a capacidade de mergulhar facilmente mais profundamente em qualquer área no futuro, quando necessário.
Este currículo foi influenciado significativamente pelo roteiro moderno de desenvolvedor de front -end de Kamran Ahmed. Por favor, verifique-é excelente.
Nota : Eu sei que o desenvolvimento do front-end significa muitas coisas diferentes para muitas pessoas! Se você é um desenvolvedor de front-end e acha que este guia pode ser aprimorado, entre em contato com o levantando um problema conforme descrito na seção contribuinte. Obrigado!
Graças a alguns colaboradores incríveis, este currículo foi traduzido para os seguintes idiomas!
O princípio subjacente deste repositório é o tempo de caixa. Se você passou algum tempo no passado tentando aprender o desenvolvimento da Web ou uma habilidade semelhante, provavelmente já experimentou uma toca de coelho em qualquer tópico em particular. Esse repositório visa atribuir um certo número de dias a cada tecnologia e incentiva você a se mudar para o próximo quando esse número de dias terminar.
Prevê -se que todos estejam em um nível diferente de proficiência ao iniciar esse desafio, e tudo bem. Os desenvolvedores iniciantes e de front-end especializados podem se beneficiar da prática em cada uma dessas áreas.
As atividades recomendadas do dia-a-dia são as seguintes:
Abaixo, você pode encontrar um pouco de informação sobre cada tópico no currículo, bem como algumas idéias/orientações sobre o que fazer para cada um. Para inspirar os projetos ao lado deste currículo, consulte a seção de idéias do projeto.
Como parte do princípio da caixa de tempo, tudo bem se você não passar por todos os itens nas seções "áreas e idéias de aprendizado". Em vez disso, você deve se concentrar em aproveitar ao máximo o número de dias atribuídos a cada área e depois seguir em frente.
O Hypertext Markup Language (HTML) é o idioma de marcação padrão para criar páginas da Web e aplicativos da Web. Com folhas de estilo em cascata (CSS) e JavaScript, ele forma uma tríade de cornerstone Technologies para a World Wide Web. Os navegadores da Web recebem documentos HTML de um servidor da Web ou de armazenamento local e renderizam os documentos em páginas da Web multimídia. O HTML descreve a estrutura de uma página da web semanticamente e originalmente pistas incluídas para a aparência do documento. (Fonte: Wikipedia)
O HTML é realmente a base do desenvolvimento da Web. Mesmo nas estruturas baseadas em JavaScript, você acaba escrevendo HTML de uma forma ou de outra.
As folhas de estilo em cascata (CSS) são uma linguagem de chapas de estilo usada para descrever a apresentação de um documento escrito em um idioma de marcação como o HTML. O CSS é uma tecnologia de pedra angular da World Wide Web, ao lado de HTML e JavaScript. O CSS foi projetado para permitir a separação de apresentação e conteúdo, incluindo layout, cores e fontes. Essa separação pode melhorar a acessibilidade do conteúdo, fornecer mais flexibilidade e controle na especificação das características de apresentação, permitir que várias páginas da Web compartilhem a formatação especificando o CSS relevante em um arquivo .CSS separado e reduza a complexidade e a repetição no conteúdo estrutural. (Fonte: Wikipedia)
CSS é outro componente essencial do desenvolvimento da Web. Embora seja usado principalmente para estilizar e posicionar elementos HTML, tornou -se cada vez mais capaz de tarefas mais dinâmicas (por exemplo, animações) que antes seriam tratadas pelo JavaScript.
<style><link>O JavaScript, geralmente abreviado como JS, é uma linguagem de programação interpretada de alto nível que está em conformidade com a especificação do ECMAScript. É uma linguagem que também é caracterizada como dinâmica, fracamente digitada, baseada em protótipo e multi-paradigma. Ao lado de HTML e CSS, o JavaScript é uma das três tecnologias principais da World Wide Web. O JavaScript permite páginas da Web interativas e, portanto, é uma parte essencial dos aplicativos da Web. A grande maioria dos sites o usa e todos os principais navegadores da Web possuem um mecanismo JavaScript dedicado para executá -lo. (Fonte: Wikipedia)
O JavaScript tornou-se cada vez mais importante no mundo do front-end. Embora tenha sido usado principalmente para tornar as páginas dinâmicas, agora é a base de muitas estruturas de front-end. Essas estruturas lidam com muitas das tarefas que foram tratadas anteriormente pelo back-end (por exemplo, roteando e exibindo vistas diferentes).
<script> Tag e colocaçãoO JQuery é uma biblioteca JavaScript rápida, pequena e rica em recursos. Isso faz com que coisas como Traversal e manipulação de documentos HTML, manuseio de eventos, animação e Ajax muito mais simples com uma API fácil de usar que funciona em uma infinidade de navegadores. Com uma combinação de versatilidade e extensibilidade, o jQuery mudou a maneira como milhões de pessoas escrevem JavaScript. (Fonte: jQuery.com)
Depois de passar algum tempo com JavaScript simples (também chamado de "baunilha"), você pode achar algumas tarefas um pouco pesadas, especialmente aquelas relacionadas ao acesso e manipulação de elementos HTML. Por um bom tempo, o JQuery foi a biblioteca preferida para tornar esses tipos de tarefas mais fáceis e consistentes em diferentes navegadores. Atualmente, o jQuery não é necessariamente aprendizado "obrigatório" por causa de avanços no JavaScript de baunilha, CSS e estruturas JavaScript mais recentes (veremos as estruturas mais tarde). Ainda assim, seria benéfico demorar um pouco para aprender um pouco de jQuery e aplicá -lo a um pequeno projeto.
A Recorde Web Design (RWD) é uma abordagem do web design que faz com que as páginas da web renderizem bem uma variedade de dispositivos e tamanhos de janela ou tela. Trabalhos recentes também consideram a proximidade do espectador como parte do contexto de visualização como uma extensão da RWD. Conteúdo, design e desempenho são necessários em todos os dispositivos para garantir usabilidade e satisfação. Um site projetado com RWD adapta o layout ao ambiente de visualização usando fluido, grades baseadas em proporção, imagens flexíveis e consultas de mídia CSS3, uma extensão da regra @media. (Fonte: Wikipedia)
O Web Design responsivo tem tudo a objetivo de fazer com que os aplicativos da Web pareçam e funcionarem corretamente em todos os tipos de dispositivo. Um exemplo rápido e sujo seria que um site pareça e funcionasse corretamente, tanto em um navegador da Web de desktop quanto em um navegador de telefone celular. Um entendimento do design responsivo é crucial para qualquer desenvolvedor de front-end!
A acessibilidade da Web é a prática inclusiva de garantir que não haja barreiras que evitem interação ou acesso a sites na World Wide Web por pessoas com deficiência. Quando os sites são projetados, desenvolvidos e editados corretamente, geralmente todos os usuários têm acesso igual à informação e funcionalidade. (Fonte: Wikipedia)
A acessibilidade, frequentemente escrita como A11y, é um dos tópicos mais importantes no desenvolvimento da Web front-end, mas parece muitas vezes uma pouca atenção. A criação de aplicativos da Web acessível não é apenas eticamente sólida, mas também faz muito sentido nos negócios, considerando o público adicional que poderá visualizar seus aplicativos quando estiverem acessíveis.
O Git é um sistema de controle de versão distribuído de código aberto e de código aberto projetado para lidar com tudo, desde projetos pequenos a muito grandes, com velocidade e eficiência. (Fonte: git-scm.com)
O controle de versão/código é uma parte essencial do kit de ferramentas de qualquer desenvolvedor da Web. Existem vários sistemas de controle de versão diferentes, mas o GIT é de longe o mais prevalente no momento. Você pode (e deve!) Use -o para rastrear seus projetos à medida que aprender!
O Node.js é um ambiente de tempo de execução JavaScript de código aberto e de plataforma cruzada que executa o código JavaScript fora de um navegador. O JavaScript é usado principalmente para scripts do lado do cliente, no qual os scripts escritos em JavaScript são incorporados no HTML de uma página da web e executam o lado do cliente por um mecanismo JavaScript no navegador da web do usuário. O Node.js permite que os desenvolvedores usem o JavaScript para escrever ferramentas de linha de comando e para scripts do lado do servidor-executando scripts do lado do servidor para produzir conteúdo dinâmico da página da web antes que a página seja enviada ao navegador da web do usuário. Consequentemente, o Node.js representa um paradigma "JavaScript em todos os lugares", unificando o desenvolvimento de aplicativos da Web em torno de uma única linguagem de programação, em vez de idiomas diferentes para scripts do lado do servidor e do cliente. (Fonte: Wikipedia)
Embora o Node.js seja tipicamente conhecido como uma solução de back-end, ela é usada com bastante frequência para suportar o desenvolvimento do front-end. Faz isso de várias maneiras, incluindo coisas como ferramentas de construção, teste e linha (tudo a ser coberto em breve!). O Node Package Manager (NPM) é outro ótimo recurso do nó e pode ser usado para gerenciar dependências do seu projeto (ou seja, bibliotecas de código em que seu projeto pode confiar - o jQuery é um exemplo!).
SASS é uma extensão do CSS que adiciona energia e elegância ao idioma básico. Ele permite que você use variáveis, regras aninhadas, mixins, importações embutidas e muito mais, tudo com uma sintaxe totalmente compatível com CSS. O SASS ajuda a manter grandes folhas de estilo bem organizadas e a obter pequenas folhas de estilo em funcionamento rapidamente, principalmente com a ajuda da biblioteca do Compass Style. (Fonte: sass-lang.com)
O SASS permite que você escreva CSS de uma maneira mais programática. Se você fez alguns CSs, deve ter notado que acaba repetindo muitas informações-por exemplo, especificando o mesmo código de cores. No SASS, você pode usar coisas como variáveis, loops e nidificação para reduzir a redundância e aumentar a legibilidade. Depois de escrever seu código no SASS, você pode compilá -lo com rapidez e facilidade com CSS regular.
* Algumas alternativas: fundação, Bulma, materialize
O Bootstrap é uma estrutura front-end gratuita e de código aberto para o desenvolvimento de sites e aplicativos da Web. Ele contém modelos de design baseados em HTML e CSS para tipografia, formulários, botões, navegação e outros componentes de interface, além de extensões opcionais de JavaScript. (Fonte: Wikipedia)
Existem muitas opções para estabelecer, modelar e tornar o seu aplicativo da web dinâmico, mas você descobrirá que começar com uma estrutura ajuda você a conseguir uma vantagem. O Bootstrap é uma dessas estruturas, mas está definitivamente longe de ser a única opção! Eu recomendo me familiarizar com uma estrutura como essa, mas é muito mais importante entender os fundamentos HTML, CSS e JavaScript do que para ser pego em qualquer estrutura.
A metodologia de bloco, elemento e modificador (comumente referido como BEM) é uma convenção de nomeação popular para classes em HTML e CSS. Desenvolvido pela equipe da Yandex, seu objetivo é ajudar os desenvolvedores a entender melhor a relação entre o HTML e o CSS em um determinado projeto. (Fonte: css tricks.com)
É importante conhecer sistemas de nomeação e organização como o BEM e por que eles são usados. Faça algumas pesquisas aqui, mas em um nível iniciante, eu não recomendaria dedicar muito tempo ao assunto.
Gulp é um kit de ferramentas para automatizar tarefas dolorosas ou demoradas no seu fluxo de trabalho de desenvolvimento, para que você possa parar de mexer e construir algo. (Fonte: Gulpjs.com)
No desenvolvimento moderno do front-end, você geralmente se vê precisando automatizar tarefas como agrupamento, mover arquivos e injetar referências em arquivos HTML. Gulp é uma ferramenta que pode ajudá -lo a fazer essas coisas!
buildNa sua essência, o WebPack é um Módulo estático para aplicativos JavaScript modernos. Quando o WebPack processa seu aplicativo, ele cria um gráfico de dependência internamente que mapeia cada módulo que seu projeto precisa e gera um ou mais pacotes. (Fonte: webpack.js.org)
Imagine que você tem um grande projeto de desenvolvimento da Web com vários desenvolvedores diferentes trabalhando em várias tarefas diferentes. Em vez de todos trabalharem nos mesmos arquivos, você pode modularizá -los o máximo possível. O Webpack ajuda a ativar isso, deixando sua equipe trabalhar modularmente e, em seguida, chegar a hora de criar o aplicativo, o WebPack reunirá tudo: html, css/sass, javasscript, imagens etc. Webpack não é o único pacote de módulo, mas parece ser o lixo no momento.
O Eslint é um utilitário de linha JavaScript de código aberto criado originalmente por Nicholas C. Zakas em junho de 2013. O LINHENTO DE CÓDIGO É UM TIPO DE ANÁLISE ESTÁTICA que é freqüentemente usado para encontrar padrões ou código problemáticos que não aderem a certas diretrizes de estilo. Existem linters de código para a maioria das linguagens de programação, e os compiladores às vezes incorporam o linha no processo de compilação. (Fonte: Eslint.org)
O linhagem é uma ferramenta fantástica para qualidade, legibilidade e consistência do código. O uso de um linhador ajudará você a capturar a sintaxe e a formatação de erros antes de irem para a produção. Você pode executar linters manualmente ou incluí -los no seu processo de construção/implantação.
* Algumas alternativas: Vue, Angular, Ember
O React (também conhecido como React.js ou ReactJS) é uma biblioteca JavaScript para criar interfaces de usuário. É mantido pelo Facebook e uma comunidade de desenvolvedores e empresas individuais. O REACT pode ser usado como base no desenvolvimento de aplicativos de página única ou móvel. As aplicações complexas de reação geralmente exigem o uso de bibliotecas adicionais para gerenciamento, roteamento e interação de estado com uma API. (Fonte: Wikipedia)
As estruturas JavaScript de front-end estão na vanguarda do desenvolvimento moderno do front-end. Um dos dois pontos importantes aqui é que o React, apesar de ser incrivelmente popular, é apenas uma biblioteca para a construção de interfaces de usuário, enquanto as estruturas como Vue e Angular têm como objetivo ser mais completas. Por exemplo, se você criar um aplicativo no React que precisa ser direcionado para diferentes visualizações, precisará trazer algo como react-router .
create-react-app é uma ferramenta conveniente para novos projetos de reação.O Redux é um contêiner de estado previsível para aplicativos JavaScript. Ajuda a escrever aplicativos que se comportam de forma consistente, executados em diferentes ambientes (cliente, servidor e nativo) e são fáceis de testar. Além disso, fornece uma ótima experiência de desenvolvedor, como a edição de código ao vivo combinada com um depurador de viagem no tempo. (Fonte: Redux.js.org)
À medida que você constrói aplicativos de front-end maior e maior, você começa a perceber que é difícil manter o estado do aplicativo: coisas como o usuário estiver conectado, quem é o usuário e geralmente o que está acontecendo no aplicativo. O Redux é uma ótima biblioteca que ajuda a manter uma única fonte de estado no qual seu aplicativo pode basear sua lógica.
O JEST é uma deliciosa estrutura de teste JavaScript, com foco na simplicidade. Funciona com projetos usando: Babel, Typescript, Node, React, Angular, Vue e muito mais! (Fonte: jestjs.io)
É muito importante configurar testes automatizados para seus projetos de front-end. A configuração de testes automatizados permitirá que você faça alterações futuras com confiança-se você fizer alterações e seus testes ainda passarem, você ficará bastante confortável em não quebrar nenhuma funcionalidade existente. Existem muitas estruturas de teste para listar; Jest é simplesmente uma das minhas favoritas.
create-react-app , o JEST já está configurado.* Alternativa: fluxo
O TypeScript é uma linguagem de programação de código aberto desenvolvido e mantido pela Microsoft. É um supereset sintático rigoroso do JavaScript e adiciona digitação estática opcional ao idioma. O TypeScript foi projetado para o desenvolvimento de grandes aplicações e transcompilos para JavaScript. Como o TypeScript é um superconjunto do JavaScript, os programas JavaScript existentes também são programas de texto digital válidos. O TypeScript pode ser usado para desenvolver aplicativos JavaScript para a execução do lado do cliente e do lado do servidor (Node.js). (Fonte: Wikipedia)
JavaScript é dinamicamente tipado. No entanto, é uma crença comum de que a digitação estática (ou seja, especificando tipos de variáveis, classes, interfaces antes do tempo) é mais clara e reduz a probabilidade de defeitos/bugs. Independentemente de como você se sente sobre o assunto, é importante ter pelo menos uma ideia de uma versão estaticamente tipada do JavaScript como o TypeScript. Observe que o TypeScript se compila com JavaScript para que possa ser interpretado pelos navegadores (ou seja, os navegadores não interpretam nativamente o TypeScript).
Next.js é uma estrutura minimalista para aplicativos react renderizados pelo servidor. (Fonte: Next.js - Render Rendering renderizador do servidor bem feito)
Agora estamos ficando avançados! Até agora você já criou um aplicativo React (ou Vue ou Angular) que faz bastante trabalho no navegador. Por vários motivos (por exemplo, SEO, preocupações com o desempenho do cliente), você pode realmente desejar que seu aplicativo front-end seja renderizado no servidor e não no cliente. É aí que entra uma estrutura como Next.js.
Esta lista deve oferecer uma ampla exposição ao ecossistema de front-end, mas é simplesmente impossível de acertar em todos os tópicos, sem mencionar as inúmeras ferramentas em cada área! Se você acha que perdi algo muito importante, consulte a seção contribuinte para ver como você pode ajudar a melhorar este guia.
À medida que você avança no #100DaysOfCode, você deseja um ou vários projetos aos quais pode aplicar seu novo conhecimento. Nesta seção, tento fornecer algumas idéias de projeto que você pode usar. Como alternativa, você é incentivado a apresentar suas próprias idéias de projeto, pois essas idéias podem interessá -lo e motivá -lo mais.
Geralmente, achei os seguintes recursos inestimáveis para aprender o desenvolvimento de software:
Se você quiser minha opinião sobre qualquer coisa, fique à vontade para me conectar comigo no Twitter e farei o possível para tentar oferecer alguma assistência. Se você acha que há um problema no currículo ou tem uma recomendação, consulte a seção contribuinte abaixo.
Se você aprecia o trabalho realizado aqui, pode contribuir significativamente, espalhando a palavra sobre esse repositório, incluindo coisas como:
Este é um trabalho em andamento e eu aprecio muito qualquer ajuda para manter essa base de conhecimento!
Ao contribuir para este repositório, primeiro discuta a alteração que você deseja fazer via problema antes de fazer uma alteração. Caso contrário, será muito difícil entender sua proposta e poderá resultar em você dar muito trabalho a uma mudança que não será mesclada.
Observe que todos os envolvidos neste projeto estão tentando aprender ou tentar ajudar-por favor, seja legal!
