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
Udtalelser
Funktioner
Priser
Resultater
Resultater
Track content
Related courses and projects
Udtalelser
Funktioner
Priser
Hvad 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 webudvikling
Forståelse af HTML-tags
Arbejde med HTML-attributter
Forståelse af parrede og enkeltstående tags i HTML
Tekstmarkering
Organisering af Lister
Challenge: Create Your First Web Page Paragraph
Challenge: Build a Personal Introduction Web Page
Udfordring: Design en Filmfremvisnings-webside
Brug af links
Tilføjelse af Knapper
Challenge: Opret Links til Populære Hjemmesider
Validering af din HTML-kode for bedste praksis
Forståelse af HTML-dokumentstruktur
Dokumenthovedets Rolle
Udfordring: Strukturer et HTML-dokument korrekt
Tilføjelse af billeder i HTML
Udfordring: Arbejde med Billeder
Arbejde med klikbare billeder, billedtekster og optimering
Oprettelse og strukturering af tabeller i HTML
Challenge: Design af en funktionel HTML-tabel
Introduktion til HTML-formularer
Grundlæggende Principper for Oprettelse af Formularer i HTML
Brug af labels for bedre tilgængelighed i formularer
Forbedring af formularer med inputattributter
Undersøgelse af Forskellige Inputtyper i HTML
Udfordring: Opret formular med inputfelter og etiketter
Arbejde med textarea-elementet til flerlinjet input
Brug af select-elementet til rullemenuer
Brug af datalist-elementet til foruddefinerede inputforslag
Gruppering af formelementer for bedre struktur
Hvad CSS Er, og Hvorfor Det Er Vigtigt
Forbinde CSS med HTML
Udvælgelse af Elementer på en Enkel Måde
Formatering af Tekst og Farver
Tilføjelse af Hover-effekter
Udfordring: Style Din Første Webside
Tekstformatering for Bedre Læsbarhed
Arbejde med Skrifttyper og Skrifttypeegenskaber
Tilføjelse af Brugerdefinerede Skrifttyper
Udfordring: Forbedr Et Blogartikeldesign
Forståelse af Box-Modellen på en Praktisk Måde
Margin og Polstring Gjort Enkelt
Boksstørrelse og Breddekontrol
Display-Egenskab: Block, Inline og Inline-Block
Udfordring: Ret et Ødelagt Layout
Hvorfor Flexbox Findes
Styring af Retning
Horisontal Justering af Indhold
Justering af Elementer Lodret
Arbejde med Flex-elementer
Udfordring: Opret et Butikskort-Layout med Flexbox
Udfordring: Opbyg et Vertikalt Blogkort med Flexbox
Forståelse af Grid-Containere og Elementer
Definering af Rækker og Kolonner
Gittermellemrum og Justering
Opbygning af et Layout til Virkelige Scenarier
Brug af baggrundsfarver
Anvendelse af Baggrundsbilleder
Arbejde med Billeder i CSS
Skabe Effekter med Dekorative Pseudo-Elementer
Tilføjelse af Skygger for Dybde
Udfordring: Opret en Moderne Kortkomponent
Første JavaScript-konsolapplikation
Challenge: Visning af Output
Udfordring: Udskrivning af Flere Linjer
Arbejde med Tal
Challenge: Arbejde med Tal
Challenge: Beregning af en Bils Hastighed
Challenge: Beregning af Arealet af en Trapez
Output af Flere Værdier
Challenge: Consoling Meaningful Output
Hvordan Man Bruger Kommentarer i JavaScript
Udfordring: Tilføjelse af en Kommentar
Flerlinjede Kommentarer
Udfordring: Kommentering af kode
Hvad er JavaScript Egentlig?
Lagring af Data
Udfordring: Deklarering af en Variabel
Udfordring: Adgang til Data fra en Variabel
Udfordring: Rettelse af Variabelnavne
Udfordring: Tildeling af en Variabel på Ny
Konstanter
Challenge: Deklarering og Brug af Konstanter
Udførelse af Aritmetik på Variabler
Udfordring: Opbygning af en Lønberegner
Udfordring: Justering af Løn med en Bonus
Undersøgelse af Primitive Datatyper
Udfordring: Deklarering af en Boolesk Værdi
Hvordan Forskellige Datatyper Interagerer
Udfordring: Sammenkædning af Strenge
Udfordring: Oprettelse af Brugerprofil og Aktivitetsdetaljer
Sammenligningsoperatorer
Udfordring: Kontrol af Aldersberettigelse
If-Sætningen
Udfordring: Vejrbetinget Påklædningsanbefaler
Udfordring: Lige eller Ulige
Indlejrede Betingede Udsagn
Else-sætningen
Udfordring: Temperaturrådgiver
The `else if`-sætning
Udfordring: Karakterkategorisering
`Og` Logisk Operator
Udfordring: Kontrol af om et tal er lige og positivt
ELLER Logisk Operator
Udfordring: Adgangskontrolsystem
Hvad Er Funktioner?
Udfordring: Simpel Funktion
Udfordring: Beregning af en Bils Hastighed
Scopes
Videregivelse af Data til Funktioner
Udfordring: Rettelse af Speed-funktionen
Udfordring: Forbedring af Karakterkategoriseringen
Udfordring: Definition af en Sammensat Funktion
Returnering af Data fra Funktioner
Standardværdier
Udfordring: E-mailautosvar med Standardparametre
Hvad Er Arrays?
Udfordring: Definition af et Array
Udfordring: Indeksering
Tilføjelse af Værdier til et Array
Udfordring: Tilføjelse af Elementer til et Array
Fjernelse af Elementer fra et Array
Udfordring: Øvelse med `pop` og `shift`
Egenskaben Length
Udfordring: Optælling af Elementer
Metoden `Includes`
Udfordring: Søgning Efter Dyr i Zoologisk Have
The `for`-løkke
Udfordring: Udskrivning af en Sekvens
The `while`-løkke
Udfordring: Udskrivning af Fibonacci-sekvens
`Do-While`-løkke
Udfordring: Tilfældigt Multiplum af 7
Brug af Løkker med Arrays
Udfordring: Finde den gennemsnitlige pris på varer
Opsummering
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
Boost dine Tech Færdigheder!
med op til 55% rabat
Features:
*Tracks not included in Pro plan
500+ Topbedømte kurserBanebrydende AI Copilot
Personlige studieveje40+ praktiske virkelige projekter
Uden afbestilling, før den valgte rabatplan udløber, accepterer jeg, at Codefinity automatisk opkræver $104 hver 3. måned indtil jeg annullerer. Læs mere om afbestillings- og refunderingspolitikken på Abonnementsvilkår.
Recommended Courses and Projects
kursus
Ultimativ HTML
Lær det grundlæggende i HTML (HyperText Markup Language), fundamentet for webudvikling. Dette begynder-venlige kursus dækker tags, attributter, elementer og strukturering af websider. Få praktiske færdigheder i at skabe overskrifter, afsnit, lister, billeder, links, formularer og tabeller. Udforsk bedste praksis, optimering og webtilgængelighed. Start din webudviklingsrejse med HTML.
4 timer
42 kapitlerBegynder
12 STUDERER NU
kursus
Introduktion til JavaScript
Dyk ned i verdenen af det mest populære sprog til front-end udvikling – JavaScript. JavaScript er et sprog, der er indbygget i næsten alle browsere og kan bruges til en bred vifte af opgaver. Lær den grundlæggende funktionalitet og forbered dig på udfordringer og mere avancerede programmeringsteknikker.
7 timer 74 kapitlerBegynder
14 STUDERER NU
kursus
CSS-Grundlæggende
Behersk det grundlæggende i CSS, sproget til styling, der forvandler udseendet og oplevelsen af websider. Udforsk kernekoncepter såsom tekststilarter, farver, afstand, box-modellen, Flexbox og dekorative effekter. Opbyg færdigheder til at skabe visuelt engagerende og velstrukturerede websider.
3 timer 28 kapitlerBegynder
6 STUDERER NU
kursus
HTML-Grundlæggende
Behersk det grundlæggende i HTML for at opbygge velstruktureret og tilgængeligt webindhold. Lær at strukturere dokumenter ved hjælp af tags, elementer og attributter. Arbejd sikkert med tekst, lister, billeder, lyd og video for at berige websider. Opret tabeller for organiserede data og formularer til brugerinput og interaktion. Opdag semantisk HTML for at forbedre tilgængelighed og opbygge komplette, funktionelle webstedsstrukturer fra bunden.
3 timer 35 kapitlerBegynder
9 STUDERER NU
kursus
Javascript Datastrukturer
Lær at arbejde sikkert med data i JavaScript ved at mestre objekter og arrays. Forstå hvordan man opretter, tilgår og håndterer objekt-egenskaber og metoder effektivt. Dyk ned i avancerede teknikker til objektmanipulation, herunder iteration, kloning og destrukturering for mere overskuelig kode. Opbyg et solidt fundament i arbejdet med arrays og lær at håndtere, iterere og ændre array-elementer effektivt. Behersk avancerede array-metoder som map, filter, find og sort for at transformere og håndtere data effektivt i dine applikationer.
6 timer 44 kapitlerMellemniveau
1 STUDERER NU
kursus
CSS-layout, effekter og Sass
Forbedr dine stylingfærdigheder ved at mestre avancerede CSS-teknikker til moderne webdesign. Positionér og administrér elementer med præcision ved hjælp af avancerede positioneringsstrategier. Skab glidende overgange og engagerende animationer for at forbedre brugeroplevelsen. Transformér og manipuler elementer for dynamiske visuelle effekter. Byg responsive designs, der tilpasser sig på tværs af enheder, og lær at effektivisere din arbejdsgang med CSS preprocessorer som Sass.
6 timer 48 kapitlerMellemniveau
5 STUDERER NU
kursus
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 kapitlerBegynder
3 STUDERER NU
kursus
JavaScript Ninja
Velkommen til JavaScript Ninja-kurset! Dette engagerende og interaktive kursus er designet til at introducere dig til grundlæggende JavaScript-programmering gennem et sjovt og lærerigt spil. Du vil guide en ninja gennem forskellige udfordringer ved at bruge JavaScript til at kontrollere bevægelser og interagere med objekter som sushi. Startende med det grundlæggende, vil du lære at navigere på kortet, samle og placere sushi og gradvist udvikle dig til mere komplekse programmeringskoncepter som funktioner, loops og betingede udsagn. Hvert kapitel tilbyder praktisk øvelse for at styrke din læring, kulminerende i spændende udfordringer, der tester dine færdigheder. Uanset om du er en komplet nybegynder eller ønsker at skærpe dine kodningsevner, giver dette kursus en omfattende og fornøjelig læringsoplevelse. Deltag og bliv en kodningsninja!
3 timer 28 kapitlerBegynder
14 STUDERER NU
kursus
Javascript Logik og Interaktion
Behersk væsentlige JavaScript-koncepter, herunder klasser, DOM-manipulation, eventhåndtering og asynkron programmering. Lær at skabe dynamiske og interaktive webapplikationer ved at håndtere brugerinteraktioner, hente og vise data samt håndtere asynkrone operationer effektivt. Gennem en kombination af teori, praktiske udfordringer og virkelighedsnære eksempler giver dette kursus dig de praktiske færdigheder, der er nødvendige for moderne webudvikling.
8 timer 45 kapitlerAvanceret
4 STUDERER NU
kursus
Introduktion til Blockchain
Udforsk den revolutionerende verden inden for blockchain-teknologi og dens første og mest fremtrædende anvendelse, Bitcoin. Gå i dybden med detaljerne om, hvordan blockchain fungerer, de tekniske fundamenter for Bitcoin samt de bredere implikationer og fremtidige tendenser inden for dette dynamiske område. Opnå en alsidig forståelse af teknologien, der omformer industrier og udfordrer traditionelle opfattelser af valuta og datasikkerhed.
1 time 16 kapitlerBegynder
kursus
Netværksgrundlæggende
Netværksgrundlæggende er et omfattende kursus designet til begyndere og let øvede, der ønsker at opbygge praktiske færdigheder inden for netværk. Kurset dækker alt fra grundlæggende begreber til avancerede anvendelser og gennemgår centrale emner såsom netværkstyper, IP-adressering, protokoller og netværkssikkerhed. Ved kursets afslutning vil du være udstyret med essentielle færdigheder til at fejlfinde, sikre og administrere netværk effektivt, hvilket giver et solidt fundament for videre specialisering inden for netværk.
2 timer 21 kapitlerBegynder
3 STUDERER NU
kursus
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 kapitlerBegynder
2 STUDERER NU
Discover more Learning Tracks
spor
Essentielle Kontorfærdigheder
3 Kurser
75 OpgaverBegynder
4.5
(1052)
spor
Business AI Toolkit
3 Kurser42 OpgaverBegynder
4.1
(126)
spor
DevOps Specialist
6 Kurser91 OpgaverBegynder
4.0
(2)
spor
Supervised Learning Foundations
6 Kurser74 OpgaverBegynder
4.3
(51)
spor
Python from Zero to Hero
7 Kurser
2 Projekter132 OpgaverBegynder
4.6
(406)
spor
C Programming Fundamentals
7 Kurser70 OpgaverBegynder
4.5
(24)
spor
Project Management Fundamentals
6 Kurser122 OpgaverBegynder
4.8
(5)
spor
Data Analyst with Python
6 Kurser179 OpgaverBegynder
4.5
(36)
spor
Java Foundations
7 Kurser235 OpgaverBegynder
4.9
(45)
spor
Datavisualisering med Python
4 Kurser56 OpgaverMellemniveau
4.8
(5)
spor
Frontend Development with Angular
7 Kurser199 OpgaverBegynder
5.0
(11)
spor
Maskinlæringsingeniør
6 Kurser144 OpgaverMellemniveau
4.7
(17)
Hvorfor Folk Vælger 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 kodningsmiljø
Dyk ned i vores interaktive miljø: skriv og kør din kode med feedback i realtid og succesmålinger—lær ved at gøre på hvert trin.
AI-drevet support
Udnyt den indbyggede AI-assistent til at forklare fejl, foreslå rettelser eller besvare spørgsmål om din kode—så du forbliver produktiv og aldrig går i stå.
Check your progress
Afslut hvert modul med en hurtig quiz, der giver øjeblikkelig feedback, sporer din fremgang og sikrer, at du har mestret nøglekoncepter.
Promote your expertise
Tjen dit brancheanerkendte certifikat ved afslutning og del det på LinkedIn med ét klik—lad dit netværk se, hvad du kan.
Betroet af Medarbejdere fra Ledende Virksomheder
og Studerende fra Topuniversiteter
Fuld adgang til kataloget
Et abonnement åbner dette kursus og hele vores katalog af projekter og færdigheder.Features:
500+ Topbedømte kurserBanebrydende AI Copilot
Personlige studieveje40+ praktiske virkelige projekter
Uden afbestilling, før den valgte rabatplan udløber, accepterer jeg, at Codefinity automatisk opkræver $104 hver 3. måned indtil jeg annullerer. Læs mere om afbestillings- og refunderingspolitikken på Abonnementsvilkår.
Prøv Codefinity med tillid – 30-dages pengene-tilbage-garanti inkluderet
For at byde dig velkommen til Codefinity, tilbyder vi op til 64% rabat på vores kurser. Plus, vi har en 30-dages pengene-tilbage-garanti, så du kan prøve os uden risiko.Vi ser virkelig frem til at byde dig velkommen til vores platform og er engagerede i at gøre din læringsoplevelse nem, interaktiv og sjov.
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å øjeblikkelig adgang til 500+ kurser
Ubegrænset Læring, Øjeblikkelig AdgangFå fuld adgang til alle kurser og spor, inklusive videoindhold, quizzer og dybdegående materialer—start læring når som helst.
Brancheanerkendte CertifikaterTjen certifikater, der validerer din ekspertise og styrker din karriere inden for tech, AI, data, marketing og mere.
KI-assisteret læringFå personlige hints, feedback i realtid og AI-drevne forklaringer for at fremskynde din fremgang.
Konstant Udvidelse: Nye Kurser & KarriereforløbHold dig foran med konstant opdaterede kurser, karriereplaner, udfordringer og praktiske prøver.
Opbyg Færdigheder Der TællerMestre efterspurgte færdigheder med kurser i AI, datavidenskab, programmering, marketing, automatisering, webudvikling og mere.
Interaktiv & Problemfri LæringEngager dig med praktiske projekter, virkelige øvelser og en intuitiv læringsoplevelse — ingen ekstra værktøjer nødvendige.
