5 Projetos para praticar programação front-end (HTML, CSS e Javascript) |
|
5 projetos para clonar, digo, praticar suas habilidades com programação front-end. E no final ainda tem um projeto extra ;).
Uma das maneiras de ter projetos de frontend para mostrar é montar projetos "falsos", inclusive, essa foi uma das dicas desse outro vídeo meu aqui no canal: Como ter portfólio sem experiência - https://youtu.be/dBS_KMg-q2g Mas para ter um site ou uma página na web para mostrar para o seu recrutador você pode inventar um projeto próprio ou clonar um site de terceiro (de preferência algum que já seja bastante conhecido). Ao tentar reproduzir algo que já está estabelecido na internet você pula a etapa de criação (design, projeto de usabilidade, UX etc) e vai logo para o código. Entretanto, se quiser apenas se inspirar e não somente copiar algo já feito por outra empresa, pode dar uma olhada nesse meu outro vídeo: Como praticar HTML e CSS - https://youtu.be/Mzo-t6_em0g A ideia de produzir esse vídeo nasceu ao ler o seguinte artigo: https://dev.to/hyggedev/master-frontend-development-by-cloning-these-websites-1m08 Contudo, dos 17 projetos apresentados, eu selecionei 5 e coloquei-os numa ordem de prioridades e dei dicas de como atingir um resultado bastante satisfatório. Por exemplo, falei de como podemos animar algum elemento quando este estiver visível na tela do usuário: Animando elementos com scroll - https://youtu.be/Hgsygm-yMdc Outros links mencionados no vídeo: 1 - hulo: https://www.hulu.com/welcome 2 - airbnb: https://www.airbnb.pt/ 3 - spacex: https://www.spacex.com/ 4 - apple: https://www.apple.com/ 5 - nvidia: https://www.nvidia.com/en-us/ 6 - rakuten: https://rakuten.tv/pt Estudo da apple para tamanho mínimo de um elemento clicável em projetos responsivos: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/ Meu curso Web Design Fundamentos. Aprenda HTML CSS e Javascript https://serfrontend.com/cursos/web-fundamentos-html-css/index.html Aprenda a trabalhar com o Google DevTools: https://www.youtube.com/playlist?list=PL1dUY2RYa2RhuA2eT3BbBM7ujHo-WK0Jm Outros links que podem ser interessantes: Blog: https://serfrontend.com/blog/ Meus cursos: https://serfrontend.com/cursos/ Canais em redes sociais: Twitter: https://twitter.com/serfrontend Linkedin: https://www.linkedin.com/in/serfrontend Instagram: https://www.instagram.com/serfrontendcursos Facebook: https://www.facebook.com/serfrontend Instrutor: Daniel Tapias Morales Twitter: https://twitter.com/tapmorales Linkedin: https://www.linkedin.com/in/daniel-tapias-morales-87145621/ Medium: https://medium.com/@tapmorales Github: https://github.com/tapmorales 📺 Playlists: https://www.youtube.com/c/serfrontend/playlists |