NextJS, TailwindCSS e Typescript: #44 - Configurando o click nas marcações de capítulos
Ya has superado la mitad. Estás muy cerca de completar el curso.
Sobre esta lección
Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Neste vídeo, vamos explorar a criação de uma plataforma de cursos utilizando as APIs do YouTube. Começamos revisando o que será feito na aula, passando por ajustes no código e avançando para configurações específicas no React, como a implementação do set progress no vídeo player com o uso de ref. Também abordamos a configuração do matcher de tempo nos detalhes da aula, garantindo uma experiência de navegação mais fluida e precisa para o usuário. A seguir, mergulhamos em recursos avançados, como o uso do forwardRef com o hook useImperativeHandle, e a configuração de eventos, como o timeClick, para controlar o progresso do player. Demonstramos como conectar essa funcionalidade ao set progress, além de implementar o scroll into view com Next.js. Links mencionados no vídeo: 📖 Repositório do projeto - https://github.com/lvsouza/youtube-nextjs-course-platform/tree/41c37e8d237cce92ea618c3bbd1bd54d37793751 🅵 Protótipo - https://www.figma.com/community/file/1349332873161679016/plataforma-de-cursos 🗨️ Discord - https://discord.gg/ZC7JrPZn7P Outros cursos no canal: 🔔 NextJS, TailwindCSS e Typescript - https://youtu.be/bP47qRVRqQs 🎩 Figma para DEVs - https://youtu.be/4rSPV1NbM10 ☪️ Curso de estilização no React - https://youtu.be/oUbPkR799fc ⭐️ Curso de React com typescript - https://youtu.be/1bEbBkWc4-I 👑 React, Material UI 5 e Typescript - https://youtu.be/wLH1Vv86I44 🏆 Curso de API Rest, Node e Typescript - https://youtu.be/SVepTuBK4V0 Livros recomendados: 📘 Código limpo - https://amzn.to/43Xiick 📘 Arquitetura limpa - https://amzn.to/3ZMCStr 📘 Migrando sistemas monolíticos - https://amzn.to/45ByPDZ 📘 The Micro SaaS Handbook - https://amzn.to/4jCan93 Conteúdo: 0:00 | Introdução 0:59 | O que faremos nessa aula 5:50 | Entendendo as alterações necessárias no código 6:40 | Configurando o set progress no react video player com ref do react 13:10 | Configurando o matcher do time nos detalhes da aula 26:20 | Configurando o forwardRef do componente de video player com o useImperativeHandle 36:40 | Configurando evento de timeClick nos detalhes da aula para alterar o progresso do player 45:00 | Conectando o time click com o set progress do video player 47:15 | Configurando o scroll in to view com nextjs 49:35 | Commit dos ajustes 50:25 | Finalização e agradecimentos CODARSE - Criando a tela de player de curso #DesenvolvimentoWeb #ReactJS #CursoGratuito #Frontend #Programação #JavaScript #ComponentesReact #InterWave #PlayerDeVideo #DesenvolvimentoDeSoftware #API #YouTubeAPI #ExperiênciaDoUsuário #InterfacesInterativas #ReactTutorial #Programador #DicasDeProgramação #Coding #WebDevelopment #ReactComponents #DynamicImport #SSR #Hydration #WebDesign #DesenvolvimentoFrontend #AprendaReact #Tecnologia #DesenvolvimentoDeApps #JavaScriptParaIniciantes #ProgramaçãoWeb
Sobre este curso
Este curso gratuito é um guia completo para desenvolvedores que desejam construir uma plataforma de cursos online moderna e integrada com a API do YouTube. Utilizando um stack de tecnologia de ponta, incluindo NextJS, TailwindCSS, e TypeScript, você aprenderá a criar uma aplicação web rica em funcionalidades, como Server-Side Rendering (SSR), Static Site Generation (SSG), e integrar com APIs RESTful. O que você vai aprender: NextJS: Dominar conceitos avançados como SSR e SSG para otimizar a performance e a SEO da sua plataforma. TailwindCSS: Utilizar este framework CSS para um design responsivo e altamente personalizável. TypeScript: Aplicar TypeScript no projeto para melhorar a escalabilidade e a manutenção do código. Integração com API do YouTube: Aprender a manipular a API do YouTube para incorporar vídeos e controlar funcionalidades do player diretamente na sua plataforma. Controle de Cache do NextJS: Implementar estratégias eficientes de cache para melhorar a performance da aplicação. Localstorage: Usar o localstorage para salvar progressos e aulas concluídas, melhorando a experiência do usuário. UX/UI: Projetar uma interface intuitiva que facilite a interação do usuário com a plataforma, aderindo às melhores práticas de design e usabilidade. HTML Semântico: Reforçar a importância do HTML semântico para acessibilidade e SEO. Deploy com Vercel: Executar o deploy da aplicação em um domínio personalizado utilizando a Vercel, explorando todas as funcionalidades desta poderosa plataforma de hospedagem. Para quem é este curso: Ideal para desenvolvedores web iniciantes, intermediários a avançados que querem aprimorar suas habilidades em desenvolvimento front-end utilizando tecnologias modernas e reais demandadas pelo mercado. Também é perfeito para aqueles que desejam aprender a integrar APIs externas em suas aplicações de forma eficaz. Pré-requisitos: Conhecimento básico de React Familiaridade com JavaScript e CSS Noções básicas de APIs Inicie agora mesmo e transforme sua carreira desenvolvendo aplicações web completas e altamente eficientes com as melhores tecnologias do mercado! #CODARSE
Lo que aprenderás en este curso:
- Estructurar páginas web semánticas con HTML5
- Aplicar estilos profesionales con CSS3 y diseño responsive
- Crear layouts modernos con Flexbox y CSS Grid
- Implementar animaciones y transiciones CSS