Sejamos honestos desde o início. Não importa quantos livros sobre programação lê, vídeos que vê, ou podcasts que ouve, se quiser tornar-se um melhor programador, tem de praticar continuamente.
No espaço de front-end, existem muitas estruturas: Reagir, Angular, Vue, só para citar alguns. Cada uma delas é espectacular e sem elas, o desenvolvimento de front-end não estaria no seu estado actual. Mas o que esses quadros, para além de todas as suas diferenças, têm em comum é que todos eles se baseiam no JavaScript. Sim, bom ol’ JS!
JavaScript é o que funciona hoje em dia na web, sem dúvida. E para cada desenvolvedor de front end, não importa se já experiente ou no início das suas carreiras, é obrigatório conhecer os fundamentos do JavaScript, HTML, e CSS.
Frameworks vêm e vão, mas o JavaScript vai ficar! Mas qual é a melhor maneira de praticar o JavaScript? A melhor resposta que lhe posso dar é construir projectos!
JavaScript Projects
JavaScript projects are guided tutorials or javascript project ideas that help you sharpenpen your skills by building real applications, websites, games, components, etc. Por vezes encontrará ideias de projectos que contêm apenas um título e algumas frases do que deve construir.
Exemplo: Construa um contador com JavaScript que conta as horas até ao final do ano.
Este formato é bom se já tiver alguma experiência e estiver apenas à procura de alguma entrada.
JavaScript Projects for Beginners
No entanto, se for novo no desenvolvimento web, é muitas vezes melhor se procurar exemplos de projectos JavaScript com código fonte ou projectos JavaScript específicos para principiantes. Estes contêm frequentemente uma aplicação demo em execução, um repositório GitHub com o código fonte, e um guia passo-a-passo sobre como construir o projecto.
JavaScript Practice Projects
Então, para que possa ganhar prática, enumerei nove fantásticas ideias de projectos javascript que pode fazer para refrescar as suas capacidades, aprender coisas novas sobre JS, e manter-se relevante no futuro. Todas elas são baseadas em puro JavaScript, algum HTML, e algum CSS. Pode adicioná-las ao seu portfólio, mostrá-las a recrutadores ou potenciais empregadores, ou mantê-las no seu GitHub como referências para trabalhos futuros. Para ser claro: Isto não se destina a ensinar-lhe tudo sobre JavaScript. Existem cursos perfeitos para si cobrindo JS de A-Z. Isto é para construir coisas. Sujar as suas mãos. Trabalhar na sua memória muscular.
Visão geral de projectos JavaScript
- Projecto JavaScript de uma aplicação de meditação
- Build an Issue Tracker JavaScript Project
li>Projecto JavaScript de um teclado virtualli>Projecto JavaScript de um carrinho de compras eCommerce>li>Projecto JavaScript de uma aplicação meteorológica
Build a PIN Pad JavaScript ProjectBuild a Landing Page JavaScript ProjectBuild a Rock Paper Scissors Game JavaScript ProjectBuild a Tic Tac Toe Game JavaScript ProjectBonus: Construir Projectos 9 em 1 Mini JavaScriptli>Bónus: Ideias de Projectos Iniciantes em JavaScriptli>Bónus: Ideias de Projectos Intermediários em JavaScriptli>Bónus: Ideias de Projectos Avançados em JavaScript
p> Para lhe dar um avanço, classifiquei esses projectos tutoriais para si. Mas essa é apenas a minha opinião, por isso recomendo vivamente que os experimente por si próprio, porque sabe como aprender melhor e a que nível se encontra actualmente.
Build a Meditation App
What you will build
You are going to build an application that provides ambient sound for meditation. Os utilizadores podem escolher entre diferentes temporizadores e sons.
P>Classificação
Este tutorial faz uso do Vanilla JavaScript, precisamente o que pretendemos. A voz do instrutor, assim como as suas instruções, são claras e boas de compreender. Além disso, aprenderá a manipular som e vídeo com o JS. Este é um divertido projecto javascript que eu realmente aprecio.
5/5 Estrelas
Build a Virtual Keyboard
O que irá construir
Vai construir um teclado virtual do zero com Vanilla JS, HTML, e CSS que pode ser utilizado no navegador e que será reactivo e pronto a tocar!
P>Classificação
Gosto da originalidade deste projecto, é uma grande ideia de projecto javascript. Nunca tinha criado um teclado virtual antes, pelo que fazer isto apenas com JavaScript, HTML, e CSS foi realmente uma grande experiência para mim. A voz do instrutor é clara e ele explica muito bem as coisas.
5/5 Estrelas
Build an eCommerce Shopping Cart
What you will build
You are going to build a shopping cart that can be used on online shops and eCommerce sites with Vanilla JS, HTML, and CSS. O instrutor faz uso do Contentful, que é um CMS sem cabeça para armazenar informações sobre o produto. Aprender a lidar com o Contentful ou um CMS sem cabeça, em geral, não é o foco principal desta peça, mas é um óptimo serviço, por isso não se arrependerá de o ver em acção.
P>Classificação
A gravação deste tutorial é realmente longa. Por um lado, isso é impressionante mas, por outro lado, também um pouco trabalhoso. A voz do instrutor é clara e boa de compreender. Por vezes é um pouco difícil de o seguir, mas isso é provavelmente devido à complexidade deste projecto. Portanto, este é antes um projecto intermédio js.
4/5 Estrelas
Build a Weather App
O que irá construir
Este projecto irá ensinar-lhe como construir uma aplicação meteorológica com Vanilla JS, HTML, e CSS. O instrutor utiliza o Dark Sky API para obter informações meteorológicas, o que é uma grande oportunidade para aprender como interagir com APIs, outra grande coisa que pode fazer com javascript.
P> Classificação
Esta pode ser uma boa opção para o seu portfólio. Se já fez o projecto 1., já conhece o instrutor, e posso dizer-lhe que ele volta a fornecer alta qualidade. Parece que ele realmente sabe ensinar de uma forma compreensível e divertida.
5/5 Estrelas
Build an Issue Tracker
O que vai construir
Neste tutorial, vai construir um rastreador de problemas que pode ser usado em qualquer website para criar problemas (por exemplo com produtos de software) com Vanilla JS, HTML, e CSS. Isto também pode ser uma boa adição ao seu portfólio e um excelente projecto javascript para principiantes!
P>Rating
O instrutor tem um conceito claro do que quer construir consigo. A sua voz é clara e boa de compreender, e este projecto é um projecto javascript para principiantes.
4/5 Estrelas
Build a PIN Pad
Neste projecto javascript, vai construir um PIN Pad que corre no browser e tem a funcionalidade de verificar os códigos PIN para a sua correcção. O instrutor utiliza apenas Vanilla JS, HTML, e CSS para este tutorial. Esta é realmente uma ideia fantástica de projecto javascript para principiantes, por isso quer definitivamente verificá-la!
P>Classificação
Eu considero um projecto tutorial muito criativo para lhe mostrar do que o Vanilla JavaScript é capaz. O instrutor faz um bom trabalho de explicar tudo claramente e de uma forma fácil de seguir. Este é um projecto javascript fixe e eu diverti-me muito a fazê-lo.
4/5 Estrelas
Build a Landing Page
O que vai construir
Brad vai mostrar-lhe como construir uma página de aterragem interactiva que mostra o tempo e o nome do utilizador. A aplicação utiliza armazenamento local para armazenar o nome, por isso é bom para si observar isto.
Avaliação
Brad é bem conhecido pelos seus tutoriais completos e notáveis. Este é bastante curto e eu diria simplista mas utiliza apenas JavaScript, HTML, e CSS e por isso é um excelente projecto de prática de javascript para principiantes.
4/5 Estrelas
Build a Rock Paper Scissors Game
O que vai construir
Jogos de construção podem ser uma forma divertida de aprender coisas novas. O JavaScript oferece grandes possibilidades para criar jogos baseados em browser. Neste projecto tutorial, vai fazer o clássico jogo da tesoura de papel de rocha com JavaScript.
Classificação
Like no Projecto 1., o instrutor faz um bom trabalho com este tutorial. Ele é divertido e pode-se segui-lo bem. E novamente, este projecto é baseado no Vanilla JavaScript e num bom projecto javascript para principiantes!
p>4/5 Estrelas
Build a Tic Tac Toe Game
O que vai construir
Neste projecto, vai construir um jogo de tic tac toe, que é um exercício divertido, mas também complexo, porque utiliza IA básica e algoritmos. Mas para além disso, tudo é feito apenas com Vanilla JS, HTML, e CSS.
P>P>P> Este projecto tem um bom tamanho, uma estrutura clara, e é divertido de construir. A voz do instrutor é clara e é fácil de o seguir. As explicações são realmente boas, e deve sentir-se bastante bem no final.
5/5 Estrelas
Bónus: Construir Mini Projectos 9 em 1
O que vai construir
Este é um pequeno bónus que lhe queria apresentar: uma única gravação que contém nove pequenos projectos independentes em javascript para praticar as suas capacidades de JavaScript, HTML, e CSS. Talvez possa usar alguns desses trechos para o seu próprio site?
P>P>P>P>Gosto da ideia de ter vários pequenos trechos numa só gravação. A voz do instrutor poderia ser mais clara, e por vezes é um pouco difícil de o seguir.
3/5 Estrelas
Mais Ideias de Projectos JavaScript
Estes são sem dúvida alguns grandes projectos a seguir. Se quiser criar algo por si próprio sem seguir um tutorial passo a passo, tenho mais algumas ideias para projectos javascript que pode construir:
JavaScript Beginner Projects
-
Aplicação de banco de dados com JavaScript
Task: Criar uma aplicação simples que utilize o IndexedDB dos browsers modernos para armazenar dados. - p>JSON to CSV Converter com JavaScript
Task: Construir uma aplicação simples onde os utilizadores podem colar uma string JSON ou carregar um ficheiro JSON. A aplicação deve converter a entrada em CSV e mostrá-la ao utilizador. -
Countdown Timer com JavaScript
Task: Construir uma funcionalidade simples onde os utilizadores podem introduzir um número de segundos e a funcionalidade inicia uma contagem decrescente. -
Aplicação Quiz com JavaScript
Task: Construir uma aplicação simples de quiz onde os utilizadores podem marcar caixas para as soluções certas. - p>Aplicação de stopwatch com JavaScript
Task: Construir uma função de cronómetro simples onde os utilizadores podem iniciar e parar um temporizador. -
Aplicação de notas com JavaScript
Task: Criar uma aplicação onde os utilizadores podem tomar e gerir notas. -
Dollars to Cents Converter com JavaScript
Task: Os utilizadores devem ser capazes de introduzir um número de dólares e a aplicação apresenta-os com o valor em cêntimos. -
Pomodoro Relógio com JavaScript
Task: Construir uma aplicação onde os utilizadores podem criar temporizadores de trabalho (25min), temporizadores de intervalo (5min), e funcionalidades para iniciar/parar/resetar estes temporizadores. -
Aplicação de receita com JavaScript
Task: Criar uma aplicação onde os utilizadores podem encontrar receitas para diferentes categorias. Bónus: Integrar uma receita API. -
Gerador de Ipsum de Lorem com JavaScript
Task: Criar uma aplicação ou componente que gere texto Lorem Ipsum de acordo com o comprimento que o utilizador desejar.
JavaScript Intermediate Projects
- p>Currency Converter with JavaScript
Task: Construir uma aplicação para converter uma moeda em outra. -
Aplicação de desenho com JavaScript
Task: Os utilizadores devem ser capazes de desenhar formulários e pinturas simples na janela do seu navegador. - p>Aplicação Emoji com JavaScript
Task: Construir uma aplicação onde os utilizadores podem procurar emojis e copiá-los para a prancheta. - p>Gerador de meme com JavaScript
Task: Construir uma aplicação onde os utilizadores podem carregar imagens, adicionar-lhes texto, e guardar & descarregá-las. - p>Gerador de palavras-passe com JavaScript
Task: Os utilizadores devem ser capazes de criar palavras-passe aleatórias com diferentes conjuntos de regras como comprimento, dificuldade, caracteres, etc. -
Image Scanner com JavaScript
Task: Construir uma aplicação que leia e visualize metadados de imagens carregadas. -
Aplicação de fazer com JavaScript
Task: Criar uma aplicação para gerir to-dos. -
Aplicação de votação com JavaScript
Task: Criar uma aplicação onde os utilizadores podem criar sondagens para outros votarem em. - p>Aplicação com JavaScript
Task: Construir uma aplicação onde os utilizadores podem criar flashcards para que outros possam aprender coisas novas. - p>Aplicação de pesquisa de livros com JavaScript
Task: Criar uma aplicação onde os utilizadores podem procurar livros com diferentes critérios como o autor, ano, conteúdo, recomendações, etc. Bónus: Integrar um livro API.
JavaScript Advanced Projects
- p>Aplicação de filme com JavaScript
Task: Os utilizadores devem ser capazes de pesquisar filmes, ver classificações, encontrar actores, obter recomendações. Bónus: Integrar um filme API. -
Aplicação de pesquisa com JavaScript
Tarefa: Os utilizadores devem ser capazes de criar inquéritos para outros que os possam levar. -
Chat App com JavaScript
Task: Os utilizadores devem ser capazes de conversar uns com os outros em tempo real. -
Instagrama Clone com JavaScript
Task: Os utilizadores devem ser capazes de experimentar características semelhantes às que o Instagram possui. Por exemplo, carregamento de imagens, marcação, gostos, etc. -
Twitter Clone com JavaScript
Task: Os utilizadores devem ser capazes de experimentar características semelhantes às que o Twitter tem. Por exemplo, carregamento de imagens, etiquetar, gostar, etc. -
Clone de Interesse com JavaScript
Task: Os utilizadores devem ser capazes de experimentar características semelhantes às que o Pinterest tem. Por exemplo, carregamento de imagens, colecções, gostos, etc. -
Aplicação de Negociação de Stocks com JavaScript
Task: Os utilizadores devem ser capazes de ver gráficos e comprar stocks (pode ser simulado, claro). Bónus: Integrar um API. -
Aplicação Analítica com JavaScript
Task: Criar uma aplicação para acompanhar o comportamento do utilizador num website, tais como visitas, taxa de salto, etc. -
Aplicação de vídeo com JavaScript
Task: Criar uma aplicação onde os utilizadores podem carregar e ver vídeos. -
Aplicação de partilha de ficheiros com JavaScript
Task: O utilizador deve ser capaz de carregar ficheiros com ou sem registo.
Uma boa ideia seria que o documentasse ao construir um projecto e o partilhasse com a comunidade!
P>P>Ponto, por agora é tudo. E tenho a certeza de que não pode esperar para começar com esses grandes tutoriais. Mas deixem-me dizer-vos mais uma coisa. Ver os vídeos e a codificação é uma boa maneira de aprender as coisas e de praticar. No entanto, irá obter o máximo deles se adicionar os seus próprios sabores aos projectos – melhorá-los, mudá-los, combiná-los, melhorá-los. Ou ainda melhor: Faça o seu próprio projecto e documente a realização. Vai aprender muito e outros ficarão gratos por isso!
Se gostar do que escrevo e quiser apoiar-me a mim e ao meu trabalho, por favor siga-me no Twitter para aprender mais sobre programação, fazer, escrever & careers🥰