♫musicjinni

5 Projetos para praticar programação front-end (HTML, CSS e Javascript)

video thumbnail
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

5 Projetos para praticar programação front-end (HTML, CSS e Javascript)

Por que minha imagem não aparece (HTML e CSS)

Disclaimer DMCA