Frontend Development with Svelte
Beginner
0.0
0 reviews
0 Learners
Explore how modern frontend development works using HTML, CSS, JavaScript, Svelte, and Tailwind CSS. Build structured webpages, create interactive UI …
188
Chapters
20
Learning hours
218
Assignments
AI Assistant
Shareable Certificate
Resultados
Resultados
Track content
Related courses and projects
Depoimentos
Recursos
Preços
Resultados
Resultados
Track content
Related courses and projects
Depoimentos
Recursos
Preços
O que você vai aprender
Structure webpages using semantic HTML
Create reusable Svelte components and reactive UI elements
Fetch and display external API data
Style interfaces with CSS and Tailwind CSS
Handle forms, events, and dynamic rendering
Build responsive layouts for different screen sizes
Build interactive frontend logic with JavaScript
Work with shared state using Svelte stores
Organize modern frontend projects and reusable UI patterns.
Learning track content
Bem-vindo ao HTML e ao Desenvolvimento Web
Compreendendo as Tags HTML
Trabalhando com Atributos HTML
Compreendendo Tags Pareadas e Únicas em HTML
Marcação de Texto
Organizando Listas
Desafio: Crie o Parágrafo da Sua Primeira Página Web
Desafio: Criar uma Página Web de Apresentação Pessoal
Desafio: Criar uma Página Web de Exibição de Filmes
Usando Links
Adicionando Botões
Desafio: Criar Links para Sites Populares
Validando Seu Código HTML para Melhores Práticas
Compreendendo a Estrutura do Documento HTML
O Papel do Cabeçalho do Documento
Desafio: Estruturar Corretamente um Documento HTML
Adicionando Imagens em HTML
Desafio: Trabalhar com Imagens
Trabalhando com Imagens Clicáveis, Legendas e Otimização
Criando e Estruturando Tabelas em HTML
Desafio: Criar uma Tabela HTML Funcional
Introdução aos Formulários HTML
Fundamentos da Criação de Formulários em HTML
Usando Rótulos para Melhor Acessibilidade em Formulários
Aperfeiçoando Formulários com Atributos de Entrada
Explorando Diferentes Tipos de Entrada em HTML
Desafio: Criar Formulário com Campos e Rótulos
Trabalhando com o Elemento Textarea para Entrada de Múltiplas Linhas
Usando o Elemento Select para Menus Suspensos
Usando o Elemento Datalist para Sugestões de Entrada Predefinidas
Agrupando Elementos de Formulário para Melhor Estrutura
O Que É CSS e Por Que É Importante
Conectando CSS ao HTML
Selecionando Elementos de Forma Simples
Estilizando Texto e Cores
Adicionando Efeitos de Hover
Desafio: Estilize Sua Primeira Página Web
Formatação de Texto para Melhor Legibilidade
Trabalhando com Fontes e Propriedades de Fonte
Adicionando Fontes Personalizadas
Desafio: Melhorar o Design de um Artigo de Blog
Compreendendo o Modelo de Caixa de Forma Prática
Margem e Preenchimento Descomplicados
Dimensionamento da Caixa e Controle de Largura
Propriedade Display: Block, Inline e Inline-Block
Desafio: Corrigir um Layout Quebrado
Por Que o Flexbox Existe
Controlando a Direção
Justificação de Conteúdo na Horizontal
Alinhando Itens Verticalmente
Trabalhando com Itens Flexíveis
Desafio: Criar um Layout de Cartão de Loja Usando Flexbox
Desafio: Construir um Cartão de Blog Vertical com Flexbox
Compreendendo Contêineres e Itens de Grid
Definindo Linhas e Colunas
Espaçamentos e Alinhamento de Grid
Construindo um Layout do Mundo Real
Usando Cores de Fundo
Aplicando Imagens de Fundo
Trabalhando com Imagens em CSS
Criando Efeitos com Pseudo-Elementos Decorativos
Adicionando Sombras para Profundidade
Desafio: Criar um Componente de Cartão Moderno
Primeira Aplicação JavaScript no Console
Desafio: Exibindo Algum Resultado
Desafio: Exibindo Múltiplas Linhas
Lidando com Números
Desafio: Trabalhando com Números
Desafio: Calculando a Velocidade de um Carro
Desafio: Calculando a Área de um Trapézio
Exibindo Múltiplos Valores
Desafio: Exibindo Saída Significativa no Console
Como Usar Comentários em JavaScript?
Desafio: Adicionando um Comentário
Comentários em Várias Linhas
Desafio: Comentando Código
O Que É JavaScript Afinal?
Armazenando Dados
Desafio: Declarando uma Variável
Desafio: Acessando Dados de uma Variável
Desafio: Corrigindo Nomes de Variáveis
Desafio: Reatribuição de uma Variável
Constantes
Desafio: Declarando e Utilizando Constantes
Realizando Operações Aritméticas em Variáveis
Desafio: Criando uma Calculadora de Salário
Desafio: Ajustando Salário com um Bônus
Explorando Tipos de Dados Primitivos
Desafio: Declarando um Valor Booleano
Como Diferentes Tipos de Dados Interagem
Desafio: Concatenando Strings
Desafio: Criando Perfil de Usuário e Detalhes de Atividade
Operadores de Comparação
Desafio: Verificando Elegibilidade por Idade
A Declaração `if`
Desafio: Recomendador de Roupas Baseado no Clima
Desafio: Par ou Ímpar
Declarações Condicionais Aninhadas
A Cláusula `else`
Desafio: Conselheiro de Temperatura
A Cláusula `else if`
Desafio: Categorizador de Notas
Operador Lógico `AND`
Desafio: Verificando se um Número é Par e Positivo
Operador Lógico OR
Desafio: Acessando o Sistema de Controle
O Que São Funções?
Desafio: Função Simples
Desafio: Calculando a Velocidade de um Carro
Escopos
Passando Dados para Funções
Desafio: Corrigindo a Função de Velocidade
Desafio: Aprimorando o Categorizador de Notas
Desafio: Definindo uma Função Composta
Retornando Dados de Funções
Valores Padrão
Desafio: Resposta Automática de E-mail com Parâmetros Padrão
O Que São Arrays?
Desafio: Definindo um Array
Desafio: Indexação
Adicionando Valores a um Array
Desafio: Adicionando Elementos a um Array
Removendo Elementos de um Array
Desafio: Praticando `pop` e `shift`
A Propriedade `length`
Desafio: Contando Elementos
O Método `includes`
Desafio: Buscando Animais no Zoológico
O Loop `for`
Desafio: Imprimindo uma Sequência
O Loop `while`
Desafio: Imprimindo a Sequência de Fibonacci
O Loop `do-while`
Desafio: Múltiplo Aleatório de 7
Usando Loops com Arrays
Desafio: Encontrando o Preço Médio dos Itens
Resumo
What Svelte Is and Why Developers Use It
How Svelte Differs from React and Vue
Setting Up a Svelte Project with Vite
Understanding the Svelte Project Structure
Understanding .svelte Files
Your First Svelte Component
Displaying Data with Curly Braces
Passing Data with Props
Default Prop Values
Scoped Component Styles
Creating Reusable Components
Reactive Variables
Reactive Statements
Two-Way Binding with bind:
Conditional Rendering with {#if}
Rendering Lists with {#each}
Handling Events
Understanding Stores
Writable Stores
Derived Stores
Store Subscriptions with $
Sharing State Across Components
Fetching Data from APIs
Loading and Error States
Search and Filtering
Working with Async Data
Svelte Transitions
Fade Fly and Slide Animations
Parent and Child Components
Slots and Component Composition
Working with Forms and Inputs
Form Validation
Submitting Form Data
Organizing a Svelte Application
Building Responsive Layouts
Building a Complete Frontend Application
What is Tailwind CSS?
Installing Tailwind in a Svelte Project
Styling Text Colors and Spacing
Building Layouts with Flexbox and Grid
Responsive Design with Tailwind
Hover Focus and Active States
Conditional Classes in Svelte
Building Reusable Buttons and Cards
Styling Forms and Inputs
Final Project Build a Settings Page UI
Impulsione suas Habilidades Tecnológicas!
com até 55% de desconto
Features:
*Tracks not included in Pro plan
500+ Cursos Bem AvaliadosCopiloto de IA de ponta
Trilhas de estudo personalizadas40+ Projetos práticos do mundo real
Sem cancelamento, antes do término do plano com desconto selecionado, aceito que a Codefinity cobrará automaticamente $104 a cada 3 meses até eu cancelar. Saiba mais sobre a política de cancelamento e reembolso em Termos de Assinatura.
Recommended Courses and Projects
curso
HTML Definitivo
Aprenda os conceitos essenciais de HTML (HyperText Markup Language), a base do desenvolvimento web. Este curso para iniciantes aborda tags, atributos, elementos e a estruturação de páginas web. Adquira habilidades práticas na criação de títulos, parágrafos, listas, imagens, links, formulários e tabelas. Explore boas práticas, otimização e acessibilidade na web. Inicie sua jornada no desenvolvimento web com HTML.
4 horas
42 capítulosIniciante
12 ESTUDANDO AGORA
curso
Introdução ao JavaScript
Mergulhe no universo da linguagem mais popular para desenvolvimento front-end – JavaScript. JavaScript é uma linguagem incorporada em praticamente todos os navegadores e pode ser utilizada para uma ampla variedade de tarefas. Aprenda as funcionalidades básicas e prepare-se para desafios e técnicas de programação mais avançadas.
7 horas 74 capítulosIniciante
14 ESTUDANDO AGORA
curso
Fundamentos de CSS
Domine os fundamentos do CSS, a linguagem de estilização que transforma a aparência e a experiência visual das páginas web. Explore conceitos essenciais como estilos de texto, cores, espaçamento, modelo de caixa, Flexbox e efeitos decorativos. Desenvolva habilidades para criar páginas web visualmente atraentes e bem estruturadas.
3 horas 28 capítulosIniciante
6 ESTUDANDO AGORA
curso
Fundamentos de HTML
Domine os fundamentos do HTML para criar conteúdos web bem estruturados e acessíveis. Aprenda a estruturar documentos utilizando tags, elementos e atributos. Trabalhe com confiança com textos, listas, imagens, áudio e vídeo para enriquecer páginas web. Crie tabelas para organizar dados e formulários para entrada e interação do usuário. Descubra o HTML semântico para aprimorar a acessibilidade e construa estruturas completas e funcionais de sites desde o início.
3 horas 35 capítulosIniciante
9 ESTUDANDO AGORA
curso
Estruturas de Dados em JavaScript
Aprenda a trabalhar com dados em JavaScript dominando objetos e arrays. Compreenda como criar, acessar e gerenciar propriedades e métodos de objetos de forma eficaz. Explore técnicas avançadas de manipulação de objetos, incluindo iteração, clonagem e desestruturação para um código mais limpo. Construa uma base sólida no trabalho com arrays e aprenda a gerenciar, iterar e modificar elementos de arrays de maneira eficiente. Domine métodos avançados de arrays como map, filter, find e sort para transformar e manipular dados de forma eficaz em suas aplicações.
6 horas 44 capítulosIntermediário
1 ESTUDANDO AGORA
curso
Layout CSS, Efeitos e Sass
Aprimore suas habilidades de estilização dominando técnicas avançadas de CSS para design web moderno. Posicione e gerencie elementos com precisão utilizando estratégias avançadas de posicionamento. Crie transições suaves e animações envolventes para aprimorar a experiência do usuário. Transforme e manipule elementos para efeitos visuais dinâmicos. Desenvolva designs responsivos que se adaptam a diferentes dispositivos e aprenda a otimizar seu fluxo de trabalho com pré-processadores CSS como o Sass.
6 horas 48 capítulosIntermediário
5 ESTUDANDO AGORA
curso
Introduction to Digital Marketing
This comprehensive marketing course offers an in-depth journey through the fundamentals and advanced strategies of digital marketing. Explore key areas like SEO, PPC, social media, and AI while learning how to craft strategies that deliver results. Each section includes practical examples and tools to solidify your understanding. The course concludes with a hands-on project, empowering you to create and present your own comprehensive marketing plan.
4 horas 46 capítulosIniciante
3 ESTUDANDO AGORA
curso
Ninja do JavaScript
Bem-vindo ao Curso Ninja de JavaScript! Este curso envolvente e interativo é projetado para introduzi-lo aos fundamentos da programação em JavaScript através de um jogo divertido e educativo. Você guiará um ninja por vários desafios, usando JavaScript para controlar movimentos e interagir com objetos como sushi. Começando com o básico, você aprenderá a navegar pelo mapa, pegar e colocar sushi, e gradualmente progredir para conceitos de programação mais complexos, como funções, loops e declarações condicionais. Cada capítulo oferece prática prática para reforçar seu aprendizado, culminando em desafios emocionantes que testam suas habilidades. Seja você um iniciante completo ou alguém que deseja aprimorar suas habilidades de codificação, este curso oferece uma experiência de aprendizado abrangente e agradável. Junte-se a nós e torne-se um ninja da codificação!
3 horas 28 capítulosIniciante
14 ESTUDANDO AGORA
curso
Lógica e Interação em JavaScript
Domine conceitos essenciais de JavaScript, incluindo classes, manipulação do DOM, tratamento de eventos e programação assíncrona. Aprenda a criar aplicações web dinâmicas e interativas gerenciando interações do usuário, buscando e exibindo dados, e lidando com operações assíncronas de forma eficiente. Por meio de uma combinação de teoria, desafios práticos e exemplos do mundo real, este curso oferece as habilidades práticas necessárias para o desenvolvimento web moderno.
8 horas 45 capítulosAvançado
4 ESTUDANDO AGORA
curso
Introdução ao Blockchain
Explore o mundo revolucionário da tecnologia blockchain e sua primeira e mais proeminente aplicação, o Bitcoin. Aprofunde-se nas complexidades de como o blockchain funciona, nos fundamentos técnicos do Bitcoin e nas implicações mais amplas e tendências futuras deste campo dinâmico. Adquira uma compreensão abrangente da tecnologia que está transformando indústrias e desafiando conceitos tradicionais de moeda e segurança de dados.
1 hora 16 capítulosIniciante
curso
Fundamentos de Redes
Fundamentos de Redes é um curso abrangente desenvolvido para iniciantes e aprendizes intermediários que desejam desenvolver habilidades práticas em redes. Abrangendo desde conceitos básicos até aplicações avançadas, o curso aborda tópicos essenciais como tipos de redes, endereçamento IP, protocolos e segurança de redes. Ao final deste curso, você estará apto a solucionar problemas, proteger e gerenciar redes de forma eficaz, estabelecendo uma base sólida para especialização futura em redes.
2 horas 21 capítulosIniciante
3 ESTUDANDO AGORA
curso
Introduction to QA
In this course, the user will get an introduction on how to perform manual testing on primarily web applications. The skills aquired in this course can be used in automation testing as well.
2 horas 21 capítulosIniciante
2 ESTUDANDO AGORA
Discover more Learning Tracks
trilha
Habilidades Essenciais de Escritório
3 Cursos
75 TarefasIniciante
4.5
(1052)
trilha
Business AI Toolkit
3 Cursos42 TarefasIniciante
4.1
(126)
trilha
DevOps Specialist
6 Cursos91 TarefasIniciante
4.0
(2)
trilha
Supervised Learning Foundations
6 Cursos74 TarefasIniciante
4.3
(51)
trilha
Python from Zero to Hero
7 Cursos
2 Projetos132 TarefasIniciante
4.6
(406)
trilha
C Programming Fundamentals
7 Cursos70 TarefasIniciante
4.5
(24)
trilha
Project Management Fundamentals
6 Cursos122 TarefasIniciante
4.8
(5)
trilha
Data Analyst with Python
6 Cursos179 TarefasIniciante
4.5
(36)
trilha
Fundamentos de Java
7 Cursos235 TarefasIniciante
4.9
(45)
trilha
Visualização de Dados com Python
4 Cursos56 TarefasIntermediário
4.8
(5)
trilha
Frontend Development with Angular
7 Cursos199 TarefasIniciante
5.0
(11)
trilha
Engenheiro de Machine Learning
6 Cursos144 TarefasIntermediário
4.7
(17)
Por que as Pessoas Escolhem Codefinity
Web Developer
Kwizera Mugisha
The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.
Senior Business Analyst
Sherry Barnes-Fox
My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.
Accounts Payable Specialist
Bill Wagner
I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.
IT Support Specialist
Daniel Chinea
I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.
Technology Project Manager
Steve Bruening
The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.
Project Manager
Stephanie Chan
As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.
Step-by-Step to Stellar Results
Ambiente de codificação interativo
Mergulhe em nosso ambiente interativo: escreva e execute seu código com feedback em tempo real e métricas de sucesso—aprenda fazendo a cada passo.
Suporte com IA
Aproveite o assistente de IA integrado para explicar erros, sugerir correções ou responder a qualquer pergunta sobre seu código—assim você permanece produtivo e nunca fica preso.
Check your progress
Conclua cada módulo com um questionário rápido que fornece feedback instantâneo, acompanha seu progresso e garante que você dominou os conceitos-chave.
Promote your expertise
Ganhe seu certificado reconhecido pela indústria ao concluir e compartilhe no LinkedIn com um clique—deixe sua rede ver o que você pode fazer.
Confiado por Funcionários de Empresas Líderes
e Estudantes de Universidades de Prestígio
Acesso completo ao catálogo
Uma assinatura abre este curso e todo o nosso catálogo de projetos e habilidades.Features:
500+ Cursos Bem AvaliadosCopiloto de IA de ponta
Trilhas de estudo personalizadas40+ Projetos práticos do mundo real
Sem cancelamento, antes do término do plano com desconto selecionado, aceito que a Codefinity cobrará automaticamente $104 a cada 3 meses até eu cancelar. Saiba mais sobre a política de cancelamento e reembolso em Termos de Assinatura.
Experimente Codefinity com confiança – garantia de devolução do dinheiro em 30 dias incluída
Para dar as boas-vindas ao Codefinity, estamos oferecendo até 64% de desconto em nossos cursos. Além disso, temos uma garantia de devolução do dinheiro em 30 dias, para que você possa nos experimentar sem riscos.Estamos ansiosos para recebê-lo em nossa plataforma e estamos comprometidos em tornar sua experiência de aprendizado fácil, interativa e divertida.
Ready to get started?
Pro
Best intro offer
Ultimate
A complete experience
to kickstart your career
to kickstart your career
500+ Top-Rated courses
Completion certificates
Early access to new courses
40+ hands-on Real-world projects
Personalized study tracks
Unlimited workspaces
Acesse instantaneamente 500+ cursos
Aprendizado Ilimitado, Acesso InstantâneoTenha acesso total a todos os cursos e trilhas, incluindo conteúdo em vídeo, questionários e materiais aprofundados—comece a aprender a qualquer momento.
Certificados Reconhecidos pela IndústriaGanhe certificados que validam sua expertise e impulsionam sua carreira em tecnologia, IA, dados, marketing e além.
Aprendizado assistido por IAReceba dicas personalizadas, feedback em tempo real e explicações com IA para acelerar seu progresso.
Constantemente Expansível: Novos Cursos e Trilhas de CarreiraMantenha-se à frente com cursos constantemente atualizados, roteiros de carreira, desafios e testes práticos.
Desenvolva Habilidades que ImportamDomine habilidades em demanda com cursos em IA, ciência de dados, programação, marketing, automação, desenvolvimento web e mais.
Aprendizado Interativo e Sem CosturaEngaje-se com projetos práticos, exercícios do mundo real e uma experiência de aprendizado intuitiva — sem necessidade de ferramentas extras.
