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
test code
test code
1 time
4 kapitlerBegynder
kursus
Test explain sentence
hover on sentence and explain it
1 time 3 kapitlerMellemniveau
99 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
kursus
Test UI Features
Let's test
8 timer 87 kapitlerBegynder
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
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
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
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
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
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
kursus
Tailwind CSS til Webudvikling
Lær at style websites effektivt ved hjælp af Tailwind CSS, et utility-first framework til hurtig UI-udvikling. Opdag, hvordan du opsætter Tailwind og anvender utility-klasser til farver, typografi, kanter og skygger. Byg og style essentielle komponenter som knapper, kort og formularer. Behersk layoutteknikker ved brug af spacing, flexbox og grid utilities. Skab responsive designs og tilpas Tailwind, så det matcher dine projektbehov.
4 timer 28 kapitlerMellemniveau
kursus
Introduction to CSS Part I
CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language like HTML. CSS is a fundamental building block of the modern web and controls the styling and layout of websites and web applications.
2 timer 19 kapitlerBegynder
Discover more Learning Tracks
spor
TEST TRACK 12
1 Kursus
1 Projekt
0 TaskBegynder
4.0
(21590)
spor
Full Stack Webudvikling
7 Kurser386 OpgaverBegynder
4.5
(54)
spor
Bliv En React-Udvikler
4 Kurser52 OpgaverMellemniveau
4.5
(10)
spor
Mestring af Datavisualisering
5 Kurser146 OpgaverMellemniveau
4.1
(13)
spor
SQL fra Begynder til Ekspert
7 Kurser247 OpgaverBegynder
4.6
(116)
spor
C++ Grundlæggende
6 Kurser123 OpgaverBegynder
3.8
(32)
spor
Python fra Nul til Helt
6 Kurser217 OpgaverBegynder
4.6
(350)
spor
Maskinlæring Mestring
7 Kurser182 OpgaverMellemniveau
4.5
(6)
spor
Python Ud Over Mellemniveau
2 Kurser1 Projekt62 OpgaverBegynder
4.5
(4)
spor
Spiludvikling med Unity
4 Kurser213 OpgaverBegynder
4.4
(9)
spor
Become a Django Developer
5 Kurser178 OpgaverAvanceret
4.5
(33)
spor
Flask for Dummies
5 Kurser153 OpgaverMellemniveau
4.5
(37)
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.
