Svelte Tutorial: App Calculadora para Freelancer | HTML TailwindCSS Figma Javascript Vite Git Github

Описание к видео Svelte Tutorial: App Calculadora para Freelancer | HTML TailwindCSS Figma Javascript Vite Git Github

Código do Projeto finalizado:
https://github.com/maykbrito/jobscalc...

Projeto Finalizado:
https://maykbrito.github.io/jobscalc-...

- [00:27](   • Svelte Tutorial: App Calculadora para...  ) 🖥️ Utilização de Svelte e Tailwind CSS para modernizar o frontend do projeto.
- [02:23](   • Svelte Tutorial: App Calculadora para...  ) 🛠️ Tecnologias principais incluem Svelte e Vite JS para desenvolvimento.
- [03:47](   • Svelte Tutorial: App Calculadora para...  ) 📦 Explicação sobre Vite como empacotador para o projeto.
- [07:20](   • Svelte Tutorial: App Calculadora para...  ) 🚀 Iniciando a estruturação do projeto com componentes no Svelte.
- [14:20](   • Svelte Tutorial: App Calculadora para...  ) 📱 Implementando design responsivo com Tailwind CSS em um projeto Svelte.
- [19:10](   • Svelte Tutorial: App Calculadora para...  ) ♿️ Garantindo acessibilidade com classes SR-only no Svelte para leitores de tela.
- [24:13](   • Svelte Tutorial: App Calculadora para...  ) 🖥️ Ajuste de layout utilizando Flexbox para alinhar elementos lado a lado com espaçamento e ajuste de tamanho.
- [26:13](   • Svelte Tutorial: App Calculadora para...  ) 📝 Estruturação de componentes reutilizáveis com Svelte para modularizar o código.
- [30:47](   • Svelte Tutorial: App Calculadora para...  ) 🗑️ Implementação de lógica para manipulação de dados e interação com os elementos da interface.
- [32:13](   • Svelte Tutorial: App Calculadora para...  ) 📐 Definição de layouts responsivos usando Grid em Svelte para ajustar a exibição de conteúdo.
- [35:01](   • Svelte Tutorial: App Calculadora para...  ) 🖼️ Estilização detalhada de elementos como cards, aplicando bordas arredondadas e cores de fundo.
- [38:32](   • Svelte Tutorial: App Calculadora para...  ) 🎨 Estilização avançada com Svelte usando classes dinâmicas e propriedades de estilo.
- [50:38](   • Svelte Tutorial: App Calculadora para...  ) 🛠️ Ao criar aplicações single page, é essencial utilizar rotas para evitar a perda de estado ao atualizar a página.
- [55:29](   • Svelte Tutorial: App Calculadora para...  ) 💡 Implementando lógica de cálculo para valores dinâmicos como o "valor da hora".
- [01:00:06](   • Svelte Tutorial: App Calculadora para...  ) 🖥️ Ajustando a interface com flexbox e estilos CSS para garantir um layout responsivo.
- [01:04:15](   • Svelte Tutorial: App Calculadora para...  ) 🎨 O estilo de texto foi ajustado para "text Extra large" e "text Grey 600", garantindo legibilidade.
- [01:14:36](   • Svelte Tutorial: App Calculadora para...  ) 🖼️ O processo de desenvolvimento inclui a correção de erros no código para permitir formatação adequada.
- [01:29:08](   • Svelte Tutorial: App Calculadora para...  ) 📊 A seção de planejamento do projeto inclui dados essenciais para cálculos futuros.
- [01:33:20](   • Svelte Tutorial: App Calculadora para...  ) 📁 A criação do arquivo `project.js` permite definir a estrutura de dados para cada projeto na aplicação.
- [01:38:02](   • Svelte Tutorial: App Calculadora para...  ) 📅 O método `getRemainingDays` retorna o número de dias restantes para completar um projeto.
- [02:08:35](   • Svelte Tutorial: App Calculadora para...  ) 🛠️ Depuração de erros com transformação de strings em números para garantir precisão nos cálculos.
- [02:12:09](   • Svelte Tutorial: App Calculadora para...  ) 📅 Finalização dos cálculos para exibir horas livres diárias, considerando horas totais do projeto.


Aprenda passo a passo como desenvolver aplicações web modernas utilizando Svelte e Tailwind CSS. Este tutorial abrangente ensina desde a configuração inicial até a criação de layouts responsivos e otimização de performance, ideal para desenvolvedores que buscam dominar tecnologias frontend eficientes e inovadoras.

Комментарии

Информация по комментариям в разработке