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
Resultater
Resultater
Track content
Related courses and projects
Attester
Funksjoner
Priser
Resultater
Resultater
Track content
Related courses and projects
Attester
Funksjoner
Priser
Hva du vil lære
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
Velkommen til HTML og webutvikling
Forståelse av HTML-tagger
Arbeide med HTML-attributter
Forståelse av parvise og enkeltstående tagger i HTML
Tekstmarkering
Organisere lister
Challenge: Create Your First Web Page Paragraph
Challenge: Build a Personal Introduction Web Page
Utfordring: Design en Nettside for Filmutstilling
Bruk av lenker
Legge til knapper
Challenge: Opprett lenker til populære nettsteder
Validering av HTML-koden din for beste praksis
Forståelse av HTML-dokumentstruktur
Rollen til dokumenthodet
Utfordring: Strukturer et HTML-dokument korrekt
Legge til bilder i HTML
Challenge: Arbeid med bilder
Arbeide med klikkbare bilder, bildetekster og optimalisering
Oppretting og strukturering av tabeller i HTML
Utfordring: Design et funksjonelt HTML-tabell
Introduksjon til HTML-skjemaer
Grunnleggende om opprettelse av skjemaer i HTML
Bruk av etiketter for bedre tilgjengelighet i skjemaer
Forbedring av Skjemaer med Input-attributter
Utforsking av Ulike Inputtyper i HTML
Utfordring: Lag et skjema med inndatafelt og etiketter
Arbeide med textarea-elementet for flertlinjet inndata
Bruk av select-elementet for nedtrekksmenyer
Bruk av datalist-elementet for forhåndsdefinerte inndataforslag
Gruppering av skjemaelementer for bedre struktur
Hva CSS er og hvorfor det er viktig
Koble CSS til HTML
Velge Elementer på en Enkel Måte
Stiler Tekst og Farger
Legge til hover-effekter
Utfordring: Style Ditt Første Nettsted
Tekstformatering for Bedre Lesbarhet
Arbeide med skrifttyper og skriftegenskaper
Legge til egendefinerte skrifttyper
Utfordring: Forbedre Utformingen av en Bloggartikkel
Forståelse av boksmodellen på en praktisk måte
Margin og Polstring Gjort Enkelt
Boksstørrelse og Breddekontroll
Display-egenskap: Block, Inline og Inline-block
Utfordring: Fiks et Ødelagt Oppsett
Hvorfor Flexbox Eksisterer
Kontrollere retning
Horisontal Justering av Innhold
Justering av elementer vertikalt
Arbeide med Flex-elementer
Utfordring: Lag et Butikkort-oppsett med Flexbox
Utfordring: Bygg et Vertikalt Bloggkort med Flexbox
Forståelse av Grid-beholdere og Elementer
Definere Rader og Kolonner
Rutenettgap og Justering
Bygge et Reelt Oppsett
Bruk av bakgrunnsfarger
Bruk av Bakgrunnsbilder
Arbeide med Bilder i CSS
Lage Effekter med Dekorative Pseudo-elementer
Legge til skygger for dybde
Utfordring: Lag en Moderne Kortkomponent
Første JavaScript-Konsollapplikasjon
Utfordring: Vise noe output
Utfordring: Skrive ut flere linjer
Arbeide med tall
Challenge: Arbeid med Tall
Utfordring: Beregning av Bilens Hastighet
Utfordring: Beregning av arealet til et trapes
Utskrift av Flere Verdier
Utfordring: Meningsfull Utskrift i Konsollen
Hvordan Bruke Kommentarer i JavaScript?
Utfordring: Legge til en kommentar
Flere Linjers Kommentarer
Utfordring: Kommentere ut kode
Hva er egentlig JavaScript?
Lagring av data
Utfordring: Deklarere en Variabel
Utfordring: Tilgang til Data fra en Variabel
Utfordring: Rette Variabelnavn
Utfordring: Tilordne en Variabel på Nytt
Konstanter
Challenge: Declaring & Using Constants
Utføre Aritmetiske Operasjoner på Variabler
Utfordring: Lage en Lønnskalkulator
Utfordring: Justere Lønn med en Bonus
Utforsking av Primitive Datatyper
Utfordring: Deklarere en boolsk verdi
Hvordan Ulike Datatyper Samhandler
Utfordring: Sammenkobling av Strenger
Utfordring: Opprette Brukerprofil og Aktivitetsdetaljer
Sammenligningsoperatorer
Utfordring: Sjekk av Aldersberettigelse
If-setningen
Utfordring: Værbasert Antrekksanbefaler
Utfordring: Partall eller Oddetall
Nøstede Betingede Setninger
Else-setningen
Utfordring: Temperaturrådgiver
The `else if`-setningen
Utfordring: Karakterkategorisering
`AND` Logisk Operator
Utfordring: Sjekke om et tall er partall og positivt
Eller-logisk operator
Utfordring: Tilgangskontrollsystem
Hva Er Funksjoner?
Utfordring: Enkel Funksjon
Utfordring: Beregne Hastigheten til en Bil
Omfang
Overføring av data til funksjoner
Utfordring: Fikse Hastighetsfunksjonen
Utfordring: Forbedre Karakterkategoriseringen
Utfordring: Definere en Sammensatt Funksjon
Returnere Data fra Funksjoner
Standardverdier
Utfordring: E-postautosvar med Standardparametere
Hva er Arrayer?
Utfordring: Definere et Array
Utfordring: Indeksering
Legge til verdier i et array
Utfordring: Legge til elementer i en array
Fjerning av elementer fra en tabell
Utfordring: Øvelse med `pop` og `shift`
Egenskapen `length`
Utfordring: Telle Elementer
Metoden `Includes`
Utfordring: Søk Etter Dyr i Dyrehagen
For-løkken
Utfordring: Skrive ut en Sekvens
`While`-løkka
Utfordring: Utskrift av Fibonacci-sekvensen
`Do-While`-løkka
Utfordring: Tilfeldig Multiplum av 7
Bruk av Løkker med Arrayer
Utfordring: Finne Gjennomsnittsprisen på Varer
Sammendrag
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
Forbedre dine tekniske ferdigheter!
med opptil 55% rabatt
Features:
*Tracks not included in Pro plan
500+ topprangerte kursBanebrytende AI Copilot
Personlige studieløp40+ praktiske prosjekter fra virkeligheten
Uten oppsigelse, før den valgte rabatterte planen utløper, godtar jeg at Codefinity automatisk belaster $104 hver 3. måned til jeg kansellerer. Les mer om oppsigelses- og refusjonspolicy på Abonnementsvilkår.
Recommended Courses and Projects
kurs
Ultimate HTML
Lær det grunnleggende i HTML (HyperText Markup Language), grunnlaget for webutvikling. Dette nybegynnervennlige kurset dekker tags, attributter, elementer og strukturering av nettsider. Få praktiske ferdigheter i å lage overskrifter, avsnitt, lister, bilder, lenker, skjemaer og tabeller. Utforsk beste praksis, optimalisering og webtilgjengelighet. Start din webutviklingsreise med HTML.
4 timer
42 kapitlerNybegynner
12 STUDERER NÅ
kurs
Introduksjon til JavaScript
Fordyp deg i verdens mest populære språk for front-end-utvikling – JavaScript. JavaScript er et språk som er innebygd i nesten alle nettlesere og kan brukes til et bredt spekter av oppgaver. Lær grunnleggende funksjonalitet og forbered deg på utfordringer og mer avanserte programmeringsteknikker.
7 timer 74 kapitlerNybegynner
14 STUDERER NÅ
kurs
CSS-Grunnleggende
Lær det grunnleggende i CSS, stilsett-språket som forvandler utseendet og følelsen på nettsider. Utforsk sentrale konsepter som tekststiler, farger, mellomrom, boksmodellen, Flexbox og dekorative effekter. Bygg ferdigheter for å lage visuelt engasjerende og velstrukturerte nettsider.
3 timer 28 kapitlerNybegynner
6 STUDERER NÅ
kurs
HTML-Grunnleggende
Behersk det grunnleggende i HTML for å bygge godt strukturerte og tilgjengelige nettinnhold. Lær hvordan du strukturerer dokumenter ved hjelp av tagger, elementer og attributter. Arbeid trygt med tekst, lister, bilder, lyd og video for å berike nettsider. Lag tabeller for organisert data og skjemaer for brukerinnsending og interaksjon. Oppdag semantisk HTML for å forbedre tilgjengelighet og bygg komplette, funksjonelle nettsidestrukturer fra bunnen av.
3 timer 35 kapitlerNybegynner
9 STUDERER NÅ
kurs
Javascript Datastrukturer
Lær å arbeide trygt med data i JavaScript ved å mestre objekter og arrayer. Forstå hvordan du oppretter, får tilgang til og administrerer egenskaper og metoder i objekter på en effektiv måte. Fordyp deg i avanserte teknikker for objektmanipulering, inkludert iterasjon, kloning og destrukturering for renere kode. Bygg et solid grunnlag i arbeid med arrayer og lær å administrere, iterere og endre elementer effektivt. Mestre avanserte array-metoder som map, filter, find og sort for å transformere og håndtere data effektivt i applikasjonene dine.
6 timer 44 kapitlerMiddelsnivå
1 STUDERER NÅ
kurs
CSS-layout, Effekter og Sass
Forbedre dine ferdigheter innen styling ved å mestre avanserte CSS-teknikker for moderne webdesign. Plasser og håndter elementer med presisjon ved hjelp av avanserte posisjoneringsstrategier. Lag jevne overganger og engasjerende animasjoner for å forbedre brukeropplevelsen. Transformer og manipuler elementer for dynamiske visuelle effekter. Bygg responsive design som tilpasser seg ulike enheter, og lær å effektivisere arbeidsflyten med CSS-preprosessorer som Sass.
6 timer 48 kapitlerMiddelsnivå
5 STUDERER NÅ
kurs
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 timer 46 kapitlerNybegynner
3 STUDERER NÅ
kurs
JavaScript Ninja
Velkommen til JavaScript Ninja-kurset! Dette engasjerende og interaktive kurset er designet for å introdusere deg til grunnleggende JavaScript-programmering gjennom et morsomt og lærerikt spill. Du vil veilede en ninja gjennom ulike utfordringer, bruke JavaScript for å kontrollere bevegelser og samhandle med objekter som sushi. Fra starten med det grunnleggende, vil du lære hvordan du navigerer på kartet, plukker opp og plasserer sushi, og gradvis går videre til mer komplekse programmeringskonsepter som funksjoner, løkker og betingede utsagn. Hvert kapittel tilbyr praktisk øvelse for å styrke læringen din, og kulminerer i spennende utfordringer som tester ferdighetene dine. Enten du er en nybegynner eller ønsker å skjerpe dine kodeferdigheter, gir dette kurset en omfattende og hyggelig læringsopplevelse. Bli med oss og bli en kode-ninja!
3 timer 28 kapitlerNybegynner
14 STUDERER NÅ
kurs
JavaScript-logikk og interaksjon
Behersk grunnleggende JavaScript-konsepter, inkludert klasser, DOM-manipulering, hendelseshåndtering og asynkron programmering. Lær å lage dynamiske og interaktive webapplikasjoner ved å håndtere brukerinteraksjoner, hente og vise data, samt effektivt håndtere asynkrone operasjoner. Gjennom en kombinasjon av teori, praktiske utfordringer og virkelige eksempler gir dette kurset deg de praktiske ferdighetene som kreves for moderne webutvikling.
8 timer 45 kapitlerAvansert
4 STUDERER NÅ
kurs
Introduksjon til blokkjede
Utforsk den revolusjonerende verdenen av blokkjede-teknologi og dens første og mest fremtredende anvendelse, Bitcoin. Fordyp deg i detaljene om hvordan blokkjeden fungerer, de tekniske grunnprinsippene bak Bitcoin, samt de bredere implikasjonene og fremtidige trendene innen dette dynamiske feltet. Få en helhetlig forståelse av teknologien som omformer industrier og utfordrer tradisjonelle oppfatninger av valuta og datasikkerhet.
1 time 16 kapitlerNybegynner
kurs
Nettverksgrunnleggende
Nettverksgrunnleggende er et omfattende kurs utviklet for nybegynnere og viderekomne som ønsker å bygge praktiske ferdigheter innen nettverk. Kurset dekker alt fra grunnleggende konsepter til avanserte anvendelser, og tar deg gjennom sentrale emner som nettverkstyper, IP-adressering, protokoller og nettverkssikkerhet. Etter endt kurs vil du ha nødvendige ferdigheter for å feilsøke, sikre og administrere nettverk effektivt, og legge et solid grunnlag for videre spesialisering innen nettverk.
2 timer 21 kapitlerNybegynner
3 STUDERER NÅ
kurs
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 timer 21 kapitlerNybegynner
2 STUDERER NÅ
Discover more Learning Tracks
spor
Essensielle Kontorferdigheter
3 Kurs
75 OppgaverNybegynner
4.5
(1052)
spor
Business AI Toolkit
3 Kurs42 OppgaverNybegynner
4.1
(126)
spor
DevOps Specialist
6 Kurs91 OppgaverNybegynner
4.0
(2)
spor
Supervised Learning Foundations
6 Kurs74 OppgaverNybegynner
4.3
(51)
spor
Python from Zero to Hero
7 Kurs
2 Prosjekter132 OppgaverNybegynner
4.6
(406)
spor
C Programming Fundamentals
7 Kurs70 OppgaverNybegynner
4.5
(24)
spor
Project Management Fundamentals
6 Kurs122 OppgaverNybegynner
4.8
(5)
spor
Data Analyst with Python
6 Kurs179 OppgaverNybegynner
4.5
(36)
spor
Java Foundations
7 Kurs235 OppgaverNybegynner
4.9
(45)
spor
Datavisualisering med Python
4 Kurs56 OppgaverMiddelsnivå
4.8
(5)
spor
Frontend Development with Angular
7 Kurs199 OppgaverNybegynner
5.0
(11)
spor
Maskinlæringsingeniør
6 Kurs144 OppgaverMiddelsnivå
4.7
(17)
Hvorfor folk velger 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
Interaktivt kodemiljø
Dykk inn i vårt interaktive miljø: skriv og kjør koden din med sanntids tilbakemelding og suksessmålinger—lær ved å gjøre på hvert trinn.
AI-drevet støtte
Bruk den innebygde AI-assistenten til å forklare feil, foreslå løsninger eller svare på spørsmål om koden din—slik at du forblir produktiv og aldri står fast.
Check your progress
Avslutt hver modul med en rask quiz som gir umiddelbar tilbakemelding, sporer fremgangen din og sikrer at du har mestret viktige konsepter.
Promote your expertise
Tjen ditt bransjeanerkjente sertifikat ved fullføring og del det på LinkedIn med ett klikk—la nettverket ditt se hva du kan gjøre.
Stolte på av ansatte i ledende selskaper
og studenter fra toppuniversiteter
Full tilgang til katalogen
Et abonnement gir tilgang til dette kurset og hele katalogen vår av prosjekter og ferdigheter.Features:
500+ topprangerte kursBanebrytende AI Copilot
Personlige studieløp40+ praktiske prosjekter fra virkeligheten
Uten oppsigelse, før den valgte rabatterte planen utløper, godtar jeg at Codefinity automatisk belaster $104 hver 3. måned til jeg kansellerer. Les mer om oppsigelses- og refusjonspolicy på Abonnementsvilkår.
Prøv Codefinity med tillit – 30-dagers pengene-tilbake-garanti inkludert
For å ønske deg velkommen til Codefinity, tilbyr vi opptil 64% rabatt på våre kurs. I tillegg har vi en 30-dagers pengene-tilbake-garanti, slik at du kan prøve oss uten risiko.Vi ser virkelig frem til å ønske deg velkommen til vår plattform og er forpliktet til å gjøre din læringsopplevelse enkel, interaktiv og morsom.
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
Få umiddelbar tilgang til 500+ kurs
Ubegrenset læring, umiddelbar tilgangFå full tilgang til alle kurs og spor, inkludert videoinnhold, quizer og dyptgående materialer—start læringen når som helst.
Bransjeanerkjente sertifikaterTjen sertifikater som bekrefter din ekspertise og styrker karrieren din innen teknologi, AI, data, markedsføring og mer.
KI-assistert læringFå personlige hint, sanntids tilbakemelding og AI-drevne forklaringer for å akselerere fremgangen din.
Stadig utvidelse: Nye kurs og karrieresporHold deg foran med stadig oppdaterte kurs, karriereveikart, utfordringer og praktiske prøver.
Bygg ferdigheter som betyr noeMestre etterspurte ferdigheter med kurs i AI, datavitenskap, programmering, markedsføring, automatisering, webutvikling og mer.
Interaktiv og sømløs læringEngasjer deg med praktiske prosjekter, virkelige øvelser og en intuitiv læringsopplevelse — ingen ekstra verktøy nødvendig.
