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
Risultati
Risultati
Track content
Related courses and projects
Testimonianze
Caratteristiche
Prezzi
Risultati
Risultati
Track content
Related courses and projects
Testimonianze
Caratteristiche
Prezzi
Cosa imparerai
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
Benvenuto in HTML e nello sviluppo web
Comprensione dei tag HTML
Lavorare con gli attributi HTML
Comprensione dei tag doppi e singoli in HTML
Formattazione del testo
Organizzazione delle liste
Sfida: Crea il Paragrafo della Tua Prima Pagina Web
Sfida: Crea una Pagina Web di Presentazione Personale
Sfida: Progettare una Pagina Web di Presentazione di Film
Utilizzo dei link
Aggiunta di pulsanti
Sfida: Crea collegamenti a siti web popolari
Convalida del codice HTML secondo le best practice
Comprensione della struttura del documento HTML
Il Ruolo dell'Intestazione del Documento
Sfida: Struttura correttamente un documento HTML
Aggiunta di immagini in HTML
Sfida: Lavorare con le Immagini
Lavorare con immagini cliccabili, didascalie e ottimizzazione
Creazione e Strutturazione di Tabelle in HTML
Sfida: Progettare una tabella HTML funzionale
Introduzione ai moduli HTML
Fondamenti della creazione di moduli in HTML
Utilizzo delle etichette per una migliore accessibilità dei moduli
Migliorare i moduli con attributi di input
Esplorazione dei diversi tipi di input in HTML
Sfida: Crea un modulo con input ed etichette
Utilizzo dell'elemento textarea per l'inserimento di testo su più linee
Utilizzo dell'elemento select per i menu a discesa
Utilizzo dell'elemento Datalist per suggerimenti di input predefiniti
Raggruppamento degli elementi del modulo per una migliore struttura
Che Cos'è il CSS e Perché È Importante
Collegare CSS a HTML
Selezione Semplice degli Elementi
Formattazione del Testo e dei Colori
Aggiunta di Effetti Hover
Sfida: Stila la Tua Prima Pagina Web
Formattazione del Testo per una Migliore Leggibilità
Lavorare con i Font e le Proprietà dei Font
Aggiunta di Font Personalizzati
Sfida: Migliorare il Design di un Articolo del Blog
Comprendere il Box Model in Modo Pratico
Margine e Padding Semplificati
Dimensionamento del Box e Controllo della Larghezza
Proprietà Display: Block, Inline e Inline-Block
Sfida: Correggere un Layout Errato
Perché Esiste Flexbox
Controllo della Direzione
Giustificazione Orizzontale del Contenuto
Allineamento Verticale degli Elementi
Lavorare con gli Elementi Flex
Sfida: Crea un Layout di Scheda Negozio Utilizzando Flexbox
Sfida: Crea una Scheda Blog Verticale con Flexbox
Comprensione dei Contenitori e degli Elementi Grid
Definizione di Righe e Colonne
Spaziatura e Allineamento della Griglia
Creazione di un Layout Reale
Utilizzo dei Colori di Sfondo
Applicazione di Immagini di Sfondo
Lavorare con le Immagini in CSS
Creazione di Effetti con Pseudo-Elementi Decorativi
Aggiunta di Ombre per Profondità
Sfida: Crea un Componente Card Moderno
Prima Applicazione Console JavaScript
Sfida: Mostrare un Output
Sfida: Output di Più Righe
Gestione dei Numeri
Sfida: Lavorare con i Numeri
Sfida: Calcolare la Velocità di un'Auto
Sfida: Calcolare l'Area di un Trapezio
Output di Valori Multipli
Sfida: Visualizzare Output Significativi nella Console
Come Utilizzare i Commenti in JavaScript?
Sfida: Aggiunta di un Commento
Commenti su Più Linee
Sfida: Commentare il Codice
Che Cos'è JavaScript?
Memorizzazione Dei Dati
Sfida: Dichiarare una Variabile
Sfida: Accesso ai Dati da una Variabile
Sfida: Correzione dei Nomi delle Variabili
Sfida: Riassegnazione di una Variabile
Costanti
Sfida: Dichiarare e Utilizzare le Costanti
Esecuzione di Operazioni Aritmetiche sulle Variabili
Sfida: Creazione di un Calcolatore di Stipendio
Sfida: Adeguamento dello Stipendio con un Bonus
Esplorazione dei tipi di dati primitivi
Sfida: Dichiarare un Valore Booleano
Come Interagiscono i Diversi Tipi di Dati
Sfida: Concatenazione di Stringhe
Sfida: Creazione del Profilo Utente e Dettagli delle Attività
Operatori di Confronto
Sfida: Verifica dell'Idoneità all'Età
L'Istruzione `if`
Sfida: Consigliere di Abbigliamento Basato sul Meteo
Sfida: Pari o Dispari
Istruzioni Condizionali Annidate
La Clausola `else`
Sfida: Consulente della Temperatura
La clausola `else if`
Sfida: Categorizzatore di Voti
Operatore Logico `AND`
Sfida: Verifica Se un Numero È Pari e Positivo
Operatore Logico OR
Sfida: Accesso al Sistema di Controllo
Cosa Sono le Funzioni?
Sfida: Funzione Semplice
Sfida: Calcolare la Velocità di un'Auto
Ambiti
Passaggio di dati alle funzioni
Sfida: Correzione della Funzione di Velocità
Sfida: Migliorare il Categorizzatore di Voti
Sfida: Definire una Funzione Composta
Restituzione dei Dati dalle Funzioni
Valori Predefiniti
Sfida: Risposta Automatica alle Email con Parametri Predefiniti
Cosa Sono Gli Array?
Sfida: Definire un Array
Sfida: Indicizzazione
Aggiunta di Valori a un Array
Sfida: Aggiunta di Elementi a un Array
Rimozione di Elementi da un Array
Sfida: Esercitazione su `pop` e `shift`
La Proprietà `length`
Sfida: Conteggio degli Elementi
Il Metodo `includes`
Sfida: Ricerca di Animali nello Zoo
Il Ciclo `for`
Sfida: Stampa di una Sequenza
Il Ciclo `while`
Sfida: Stampa della Sequenza di Fibonacci
Il ciclo `do-while`
Sfida: Multiplo Casuale di 7
Utilizzo dei Cicli con gli Array
Sfida: Calcolare il Prezzo Medio degli Articoli
Riassunto
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
Migliora le tue Competenze Tecnologiche!
con fino al 55% di sconto
Features:
*Tracks not included in Pro plan
500+ corsi Top-RatedCopilota AI all'avanguardia
Percorsi di studio personalizzati40+ progetti pratici reali
Senza cancellazione, prima della scadenza del piano scontato selezionato, accetto che Codefinity addebiti automaticamente $104 ogni 3 mesi fino a quando non annulli. Scopri di più sulla politica di cancellazione e rimborso in Termini di abbonamento.
Recommended Courses and Projects
corso
HTML Definitivo
Impara le basi dell'HTML (HyperText Markup Language), la base dello sviluppo web. Questo corso adatto ai principianti copre tag, attributi, elementi e strutturazione delle pagine web. Acquisisci competenze pratiche nella creazione di intestazioni, paragrafi, elenchi, immagini, link, moduli e tabelle. Esplora le migliori pratiche, l'ottimizzazione e l'accessibilità web. Inizia il tuo percorso di sviluppo web con HTML.
4 ore
42 capitoliPrincipiante
12 STUDIANDO ORA
corso
Introduzione a JavaScript
Immergiti nel mondo del linguaggio più popolare per lo sviluppo front-end: JavaScript. JavaScript è un linguaggio integrato in quasi tutti i browser e può essere utilizzato per una vasta gamma di attività. Acquisisci le funzionalità di base e preparati alle sfide e alle tecniche di programmazione più avanzate.
7 ore 74 capitoliPrincipiante
14 STUDIANDO ORA
corso
Fondamenti di CSS
Apprendi le nozioni fondamentali di CSS, il linguaggio di stile che trasforma l'aspetto delle pagine web. Esplora concetti chiave come stili del testo, colori, spaziatura, box model, Flexbox ed effetti decorativi. Sviluppa le competenze necessarie per creare pagine web visivamente accattivanti e ben strutturate.
3 ore 28 capitoliPrincipiante
6 STUDIANDO ORA
corso
Fondamenti di HTML
Apprendi le nozioni fondamentali di HTML per creare contenuti web ben strutturati e accessibili. Impara a strutturare i documenti utilizzando tag, elementi e attributi. Lavora con sicurezza con testo, elenchi, immagini, audio e video per arricchire le pagine web. Crea tabelle per organizzare i dati e moduli per l'inserimento e l'interazione degli utenti. Scopri l'HTML semantico per migliorare l'accessibilità e costruire strutture di siti web complete e funzionali dalle basi.
3 ore 35 capitoliPrincipiante
9 STUDIANDO ORA
corso
Strutture Dati JavaScript
Impara a lavorare con sicurezza con i dati in JavaScript padroneggiando oggetti e array. Comprendi come creare, accedere e gestire efficacemente proprietà e metodi degli oggetti. Approfondisci tecniche avanzate di manipolazione degli oggetti, inclusa l'iterazione, la clonazione e la destrutturazione per un codice più pulito. Costruisci una solida base nel lavoro con gli array e apprendi come gestire, iterare e modificare gli elementi degli array in modo efficiente. Padroneggia metodi avanzati degli array come map, filter, find e sort per trasformare e gestire i dati efficacemente nelle tue applicazioni.
6 ore 44 capitoliIntermedio
1 STUDIANDO ORA
corso
Layout CSS, Effetti e Sass
Migliora le tue competenze di styling padroneggiando tecniche CSS avanzate per il web design moderno. Posiziona e gestisci gli elementi con precisione utilizzando strategie di posizionamento avanzate. Crea transizioni fluide e animazioni coinvolgenti per migliorare l'esperienza utente. Trasforma e manipola gli elementi per effetti visivi dinamici. Realizza design responsivi che si adattano a diversi dispositivi e ottimizza il flusso di lavoro con preprocessori CSS come Sass.
6 ore 48 capitoliIntermedio
5 STUDIANDO ORA
corso
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 ore 46 capitoliPrincipiante
3 STUDIANDO ORA
corso
Ninja di JavaScript
Benvenuto al Corso Ninja di JavaScript! Questo corso coinvolgente e interattivo è progettato per introdurti ai fondamenti della programmazione JavaScript attraverso un gioco divertente ed educativo. Guiderai un ninja attraverso varie sfide, utilizzando JavaScript per controllare i movimenti e interagire con oggetti come il sushi. Partendo dalle basi, imparerai a navigare nella mappa, raccogliere e posizionare il sushi, e progredire gradualmente verso concetti di programmazione più complessi come funzioni, cicli e istruzioni condizionali. Ogni capitolo offre pratica pratica per rafforzare il tuo apprendimento, culminando in sfide entusiasmanti che mettono alla prova le tue abilità. Che tu sia un principiante assoluto o desideri affinare le tue capacità di codifica, questo corso offre un'esperienza di apprendimento completa e piacevole. Unisciti a noi e diventa un ninja della codifica!
3 ore 28 capitoliPrincipiante
14 STUDIANDO ORA
corso
Logica e Interazione in JavaScript
Apprendi i concetti fondamentali di JavaScript, inclusi classi, manipolazione del DOM, gestione degli eventi e programmazione asincrona. Impara a creare applicazioni web dinamiche e interattive gestendo le interazioni utente, recuperando e visualizzando dati e gestendo operazioni asincrone in modo efficiente. Attraverso una combinazione di teoria, esercizi pratici e esempi reali, questo corso fornisce le competenze pratiche necessarie per lo sviluppo web moderno.
8 ore 45 capitoliAvanzato
4 STUDIANDO ORA
corso
Introduzione alla Blockchain
Esplora il mondo rivoluzionario della tecnologia blockchain e la sua prima e più importante applicazione, Bitcoin. Approfondisci le complessità del funzionamento della blockchain, le basi tecniche di Bitcoin e le implicazioni più ampie e le tendenze future in questo settore dinamico. Ottieni una comprensione completa della tecnologia che sta trasformando le industrie e mettendo in discussione le nozioni tradizionali di valuta e sicurezza dei dati.
1 ora 16 capitoliPrincipiante
corso
Fondamenti di Networking
Fondamenti di Networking è un corso completo pensato per principianti e utenti intermedi che desiderano acquisire competenze pratiche nel networking. Coprendo tutto, dai concetti di base alle applicazioni avanzate, il corso affronta argomenti chiave come tipi di rete, indirizzamento IP, protocolli e sicurezza di rete. Al termine del corso, sarai in possesso delle competenze essenziali per risolvere problemi, mettere in sicurezza e gestire reti in modo efficace, creando una solida base per ulteriori specializzazioni nel networking.
2 ore 21 capitoliPrincipiante
3 STUDIANDO ORA
corso
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 ore 21 capitoliPrincipiante
2 STUDIANDO ORA
Discover more Learning Tracks
traccia
Competenze Essenziali per l'Ufficio
3 Corsi
75 CompitiPrincipiante
4.5
(1052)
traccia
Business AI Toolkit
3 Corsi42 CompitiPrincipiante
4.1
(126)
traccia
DevOps Specialist
6 Corsi91 CompitiPrincipiante
4.0
(2)
traccia
Supervised Learning Foundations
6 Corsi74 CompitiPrincipiante
4.3
(51)
traccia
Python from Zero to Hero
7 Corsi
2 Progetti132 CompitiPrincipiante
4.6
(406)
traccia
C Programming Fundamentals
7 Corsi70 CompitiPrincipiante
4.5
(24)
traccia
Project Management Fundamentals
6 Corsi122 CompitiPrincipiante
4.8
(5)
traccia
Data Analyst with Python
6 Corsi179 CompitiPrincipiante
4.5
(36)
traccia
Fondamenti di Java
7 Corsi235 CompitiPrincipiante
4.9
(45)
traccia
Visualizzazione dei Dati con Python
4 Corsi56 CompitiIntermedio
4.8
(5)
traccia
Frontend Development with Angular
7 Corsi199 CompitiPrincipiante
5.0
(11)
traccia
Ingegnere Machine Learning
6 Corsi144 CompitiIntermedio
4.7
(17)
Perché le Persone Scelgono 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 di codifica interattivo
Entra nel nostro ambiente interattivo: scrivi ed esegui il tuo codice con feedback in tempo reale e metriche di successo—impara facendo ad ogni passo.
Supporto potenziato dall'AI
Sfrutta l'assistente AI integrato per spiegare errori, suggerire correzioni o rispondere a qualsiasi domanda sul tuo codice—così rimani produttivo e non ti blocchi mai.
Check your progress
Concludi ogni modulo con un quiz rapido che fornisce feedback immediato, traccia i tuoi progressi e assicura che tu abbia padroneggiato i concetti chiave.
Promote your expertise
Ottieni il tuo certificato riconosciuto dall'industria al completamento e condividilo su LinkedIn con un clic—fai vedere alla tua rete cosa sai fare.
Fidato dai Dipendenti delle Aziende Leader
e Studenti delle Università di Eccellenza
Accesso completo al catalogo
Un abbonamento ti consente di accedere a questo corso e all'intero catalogo di progetti e competenze.Features:
500+ corsi Top-RatedCopilota AI all'avanguardia
Percorsi di studio personalizzati40+ progetti pratici reali
Senza cancellazione, prima della scadenza del piano scontato selezionato, accetto che Codefinity addebiti automaticamente $104 ogni 3 mesi fino a quando non annulli. Scopri di più sulla politica di cancellazione e rimborso in Termini di abbonamento.
Prova Codefinity con fiducia – garanzia di rimborso di 30 giorni inclusa
Per darti il benvenuto su Codefinity, offriamo fino a 64% di sconto sui nostri corsi. Inoltre, abbiamo una garanzia di rimborso di 30 giorni, così puoi provarci senza rischi.Non vediamo l'ora di darti il benvenuto sulla nostra piattaforma e ci impegniamo a rendere la tua esperienza di apprendimento facile, interattiva e divertente.
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
Accedi istantaneamente a 500+ corsi
Apprendimento Illimitato, Accesso ImmediatoOttieni pieno accesso a tutti i corsi e percorsi, inclusi contenuti video, quiz e materiali approfonditi—inizia a imparare in qualsiasi momento.
Certificati Riconosciuti dall'IndustriaOttieni certificati che convalidano la tua esperienza e potenziano la tua carriera in tecnologia, AI, dati, marketing e oltre.
Apprendimento assistito da IAOttieni suggerimenti personalizzati, feedback in tempo reale e spiegazioni potenziate dall'AI per accelerare i tuoi progressi.
In Costante Espansione: Nuovi Corsi e Percorsi di CarrieraRimani avanti con corsi costantemente aggiornati, roadmaps di carriera, sfide e test pratici.
Costruisci Competenze Che ContanoPadroneggia competenze richieste con corsi in AI, data science, programmazione, marketing, automazione, sviluppo web e altro.
Apprendimento Interattivo e Senza Soluzione di ContinuitàCoinvolgiti con progetti pratici, esercizi reali e un'esperienza di apprendimento intuitiva — senza bisogno di strumenti extra.
