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
Tulokset
Tulokset
Track content
Related courses and projects
Asiakaskokemukset
Ominaisuudet
Hinnoittelu
Tulokset
Tulokset
Track content
Related courses and projects
Asiakaskokemukset
Ominaisuudet
Hinnoittelu
Mitä tulet oppimaan
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
Tervetuloa HTML:n ja Web-kehityksen Par iin
HTML-tunnisteiden Ymmärtäminen
Working with HTML-attribuutit
Parillisten ja yksittäisten tunnisteiden ymmärtäminen HTML:ssä
Tekstin Merkintä
Listojen Järjestäminen
Challenge: Luo Ensimmäinen Verkkosivusi Kappale
Challenge: Rakenna Henkilökohtainen Esittelysivu
Haaste: Suunnittele elokuvien esittelysivu
Linkkien Käyttäminen
Painikkeiden Lisääminen
Challenge: Luo linkkejä suosittuihin verkkosivustoihin
Validating Your HTML Code for Best Practices
Understanding HTML-Dokumentin Rakenne
Dokumentin Pään Rooli
Haaste: Rakenna HTML-dokumentti Oikein
Kuvien Lisääminen HTML:ssä
Haaste: Työskentely Kuvien Kanssa
Toimiminen Klikattavien Kuvien, Kuvatekstien ja Optimoinnin Kanssa
Taulukoiden luominen ja jäsentäminen HTML:ssä
Haaste: Suunnittele toimiva HTML-taulukko
Introduction to HTML Forms
Fundamentals of Form Creation in HTML:n perusteet
Etikettien käyttö lomakkeiden paremman saavutettavuuden takaamiseksi
Enhancing Forms With Input Attributes
Erilaisten Syötekenttätyyppien Tutkiminen HTML:ssä
Challenge: Luo lomake syötteillä ja nimikkeillä
Working with the Textarea Element for Multi-line Input
Select-elementin Käyttäminen Alasvetovalikoissa
Datalist-elementin Käyttäminen Ennalta Määritettyihin Syöte-Ehdotuksiin
Lomake-elementtien ryhmittely paremman rakenteen saavuttamiseksi
Mikä CSS on ja miksi se on tärkeää
CSS:n Liittäminen HTML:ään
Elementtien Valitseminen Yksinkertaisella Tavalla
Tekstin ja Värien Muotoilu
Hover-efektien Lisääminen
Haaste: Tyylittele Ensimmäinen Verkkosivusi
Tekstin Muotoilu Paremman Luettavuuden Saavuttamiseksi
Fonttien ja Fonttiominaisuuksien Käsittely
Mukautettujen Fonttien Lisääminen
Haaste: Paranna Blogiartikkelin Ulkoasua
Laatikkomallin Käytännön Ymmärtäminen
Marginaali ja Täyte Yksinkertaisesti
Laatikon Koon ja Leveyden Hallinta
Display-Ominaisuus: Block, Inline ja Inline-Block
Haaste: Korjaa Rikkinäinen Asettelu
Miksi Flexbox On Olemassa
Suunnan Hallinta
Sisällön Vaakasuuntainen Tasaus
Kohteiden Pystysuuntainen Tasaus
Työskentely Flex-elementtien Kanssa
Haaste: Luo Kauppakortin Asettelu Flexboxilla
Haaste: Rakenna Pystysuuntainen Blogikortti Flexboxilla
Ruudukon Säiliöiden ja Kohteiden Ymmärtäminen
Rivien ja Sarakkeiden Määrittely
Ruudukon Välit ja Kohdistus
Todellisen maailman asettelun rakentaminen
Taustavärien Käyttö
Taustakuvien Lisääminen
Kuvien Käsittely CSS:ssä
Tehosteiden Luominen Koristeellisilla Pseudoelementeillä
Varjojen Lisääminen Syvyyden Luomiseksi
Haaste: Luo Moderni Korttikomponentti
Ensimmäinen JavaScript-konsolisovellus
Haaste: Tulosteen Näyttäminen
Haaste: Useiden Rivien Tulostaminen
Lukujen Käsittely
Haaste: Työskentely Numeroiden Kanssa
Haaste: Auton Nopeuden Laskeminen
Challenge: Trapetsin Pinta-Alan Laskeminen
Useiden Arvojen Tulostaminen
Haaste: Merkityksellisen Tulosteen Konsolointi
Kuinka Käyttää Kommentteja JavaScriptissä?
Haaste: Kommentin Lisääminen
Moniriviset Kommentit
Haaste: Koodin kommentointi
Mikä JavaScript Oikeastaan On?
Tietojen Tallentaminen
Haaste: Muuttujan Määrittäminen
Haaste: Tietojen Hakeminen Muuttujasta
Haaste: Muuttujien Nimien Korjaaminen
Haaste: Muuttujan Uudelleenasettaminen
Vakioarvot
Haaste: Vakioiden Määrittely ja Käyttö
Aritmeettisten Laskutoimitusten Suorittaminen Muuttujilla
Haaste: Palkanlaskurin Tekeminen
Haaste: Palkan Säätäminen Bonuksella
Alkeellisten tietotyyppien tutkiminen
Haaste: Boolean-arvon Määrittäminen
Kuinka Eri Tietotyypit Ovat Vuorovaikutuksessa
Challenge: Merkkijonojen Yhdistäminen
Haaste: Käyttäjäprofiilin ja Aktiviteettitietojen Luominen
Vertailuoperaattorit
Haaste: Iän Kelpoisuuden Tarkistaminen
If-Lause
Haaste: Säähän Perustuva Asusuositin
Haaste: Parillinen vai Pariton
Sisäkkäiset Ehtolauseet
The `else` Clause
Haaste: Lämpötilaneuvoja
The `else if` -lause
Haaste: Arvosanaluokittelija
`Ja`-looginen operaattori
Haaste: Tarkista, Onko Luku Parillinen ja Positiivinen
OR-Looginen Operaattori
Haaste: Ohjausjärjestelmän Käyttö
Mitä Ovat Funktiot?
Haaste: Yksinkertainen Funktio
Haaste: Auton Nopeuden Laskeminen
Laajuudet
Datan Välittäminen Funktioihin
Haaste: Nopeusfunktion Korjaaminen
Haaste: Arvosanaluokittelijan Parantaminen
Haaste: Yhdistetyn Funktion Määrittely
Datan Palauttaminen Funktioista
Oletusarvot
Haaste: Sähköpostin Automaattivastaaja Oletusparametreilla
Mitä Taulukot Ovat?
Haaste: Taulukon Määrittely
Haaste: Indeksointi
Arvojen Lisääminen Taulukkoon
Haaste: Alkioiden Lisääminen Taulukkoon
Alkioiden Poistaminen Taulukosta
Haaste: `pop`- ja `shift`-metodien Harjoittelu
Length-ominaisuus
Haaste: Alkioiden Laskeminen
Includes-menetelmä
Haaste: Eläinten Etsiminen Eläintarhassa
`For`-silmukka
Haaste: Sekvenssin Tulostaminen
`While`-silmukka
Haaste: Fibonaccin Lukujonon Tulostaminen
Do-while-silmukka
Haaste: Satunnainen 7:n Monikerta
Silmukoiden Käyttäminen Taulukoiden Kanssa
Haaste: Tuotteiden Keskihinnan Löytäminen
Yhteenveto
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
Paranna teknisiä taitojasi!
jopa 55% alennuksella
Features:
*Tracks not included in Pro plan
500+ huippuarvosteltua kurssiaHuipputason AI-kopilotti
Henkilökohtaiset opintopolut40+ käytännön projekteja
Ilman peruutusta, ennen alennetun suunnitelman päättymistä, hyväksyn, että Codefinity veloittaa automaattisesti $104 joka 3. kuukausi kunnes peruutan. Lue lisää peruutus- ja palautuskäytännöistä osoitteessa Tilausehdot.
Recommended Courses and Projects
kurssi
HTML:n Perusteet
Opi HTML:n (HyperText Markup Language) perusteet, joka on verkkokehityksen perusta. Tämä aloittelijaystävällinen kurssi kattaa tunnisteet, attribuutit, elementit ja verkkosivujen rakenteen. Hanki käytännön taitoja otsikoiden, kappaleiden, listojen, kuvien, linkkien, lomakkeiden ja taulukoiden luomisessa. Tutustu parhaisiin käytäntöihin, optimointiin ja verkkosivustojen saavutettavuuteen. Aloita verkkokehityksen matkasi HTML:n avulla.
4 tuntia
42 luvutAloittelija
12 OPISKELEE NYT
kurssi
Johdanto JavaScriptiin
Sukella suosituimman front-end-kehityskielen, JavaScriptin, maailmaan. JavaScript on lähes jokaiseen selaimeen sisäänrakennettu kieli, jota voidaan käyttää monenlaisiin tehtäviin. Opiskele perustoiminnallisuudet ja valmistaudu haasteisiin sekä edistyneempiin ohjelmointitekniikoihin.
7 tuntia 74 luvutAloittelija
14 OPISKELEE NYT
kurssi
CSS:n Perusteet
Hallitse CSS:n perusteet, tyylikieli, joka muuttaa verkkosivujen ulkoasun ja tuntuman. Tutustu keskeisiin käsitteisiin, kuten tekstityyleihin, väreihin, välistyksiin, laatikkomalliin, Flexboxiin ja koristeellisiin tehosteisiin. Kehitä taidot luoda visuaalisesti houkuttelevia ja hyvin jäsenneltyjä verkkosivuja.
3 tuntia 28 luvutAloittelija
6 OPISKELEE NYT
kurssi
HTML:n Perusteet
Hallitse HTML:n perusteet rakentaaksesi hyvin jäsenneltyä ja saavutettavaa verkkosisältöä. Opi jäsentämään dokumentteja käyttämällä tageja, elementtejä ja attribuutteja. Käsittele sujuvasti tekstiä, listoja, kuvia, ääntä ja videota rikastuttaaksesi verkkosivuja. Luo taulukoita järjestetyn datan esittämiseen ja lomakkeita käyttäjän syötteiden ja vuorovaikutuksen mahdollistamiseen. Tutustu semanttiseen HTML:ään saavutettavuuden parantamiseksi ja rakenna kokonaisia, toiminnallisia verkkosivustorakenteita alusta alkaen.
3 tuntia 35 luvutAloittelija
9 OPISKELEE NYT
kurssi
Javascriptin tietorakenteet
Opi käsittelemään dataa JavaScriptissä hallitsemalla oliot ja taulukot. Ymmärrä, kuinka luoda, käyttää ja hallita olioiden ominaisuuksia ja metodeja tehokkaasti. Syvenny edistyneisiin olion käsittelytekniikoihin, kuten iteraatioon, kloonaukseen ja hajauttamiseen selkeämmän koodin saavuttamiseksi. Rakenna vahva perusta taulukoiden käsittelyyn ja opi hallitsemaan, iteroimaan ja muokkaamaan taulukon alkioita tehokkaasti. Hallitse edistyneet taulukkometodit, kuten map, filter, find ja sort, datan muuntamiseen ja käsittelyyn sovelluksissasi.
6 tuntia 44 luvutKeskitaso
1 OPISKELEE NYT
kurssi
CSS-asettelu, tehosteet ja Sass
Kehitä tyylittelytaitojasi hallitsemalla edistyneet CSS-tekniikat modernia web-suunnittelua varten. Sijoita ja hallitse elementtejä tarkasti käyttämällä kehittyneitä asemointistrategioita. Luo sulavia siirtymiä ja mukaansatempaavia animaatioita parantaaksesi käyttökokemusta. Muunna ja manipuloi elementtejä dynaamisten visuaalisten tehosteiden saavuttamiseksi. Rakenna responsiivisia suunnitelmia, jotka mukautuvat eri laitteille, ja tehosta työnkulkuasi CSS-esikäsittelijöillä, kuten Sassilla.
6 tuntia 48 luvutKeskitaso
5 OPISKELEE NYT
kurssi
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 tuntia 46 luvutAloittelija
3 OPISKELEE NYT
kurssi
JavaScript Ninja
Tervetuloa JavaScript Ninja -kurssille! Tämä mukaansatempaava ja vuorovaikutteinen kurssi on suunniteltu esittelemään sinulle JavaScript-ohjelmoinnin perusteet hauskan ja opettavaisen pelin kautta. Ohjaat ninjaa erilaisten haasteiden läpi, käyttäen JavaScriptiä liikkeiden hallintaan ja vuorovaikutukseen esineiden, kuten sushin, kanssa. Aloittaen perusteista, opit navigoimaan kartalla, poimimaan ja asettamaan sushia, ja etenet vähitellen monimutkaisempiin ohjelmointikäsitteisiin, kuten functions, loops ja conditional statements. Jokainen luku tarjoaa käytännön harjoituksia oppimisen vahvistamiseksi, huipentuen jännittäviin haasteisiin, jotka testaavat taitojasi. Olitpa sitten täysin aloittelija tai haluat hioa koodauskykyjäsi, tämä kurssi tarjoaa kattavan ja nautinnollisen oppimiskokemuksen. Liity mukaan ja tule koodausninjaksi!
3 tuntia 28 luvutAloittelija
14 OPISKELEE NYT
kurssi
Javascript-logiikka ja Vuorovaikutus
Hallitse keskeiset JavaScript-konseptit, kuten luokat, DOM-manipulointi, tapahtumien käsittely ja asynkroninen ohjelmointi. Opiskele dynaamisten ja interaktiivisten verkkosovellusten luomista hallitsemalla käyttäjän vuorovaikutuksia, tietojen hakua ja näyttämistä sekä asynkronisten toimintojen tehokasta käsittelyä. Kurssi yhdistää teoriaa, käytännön haasteita ja tosielämän esimerkkejä, tarjoten käytännön taidot moderniin web-kehitykseen.
8 tuntia 45 luvutEdistynyt
4 OPISKELEE NYT
kurssi
Johdatus Lohkoketjuun
Tutustu lohkoketjuteknologian mullistavaan maailmaan ja sen ensimmäiseen sekä merkittävimpään sovellukseen, Bitcoiniin. Syvenny lohkoketjun toiminnan yksityiskohtiin, Bitcoinin teknisiin perusteisiin sekä tämän dynaamisen alan laajempiin vaikutuksiin ja tulevaisuuden suuntauksiin. Saavuta kattava ymmärrys teknologiasta, joka muokkaa toimialoja ja haastaa perinteiset käsitykset valuutasta ja tietoturvasta.
1 tunti 16 luvutAloittelija
kurssi
Verkkotekniikan Perusteet
Verkkotekniikan perusteet on kattava kurssi, joka on suunniteltu aloittelijoille ja keskitason oppijoille, jotka haluavat kehittää käytännön taitoja verkkotekniikassa. Kurssi kattaa kaiken perustavanlaatuisista käsitteistä edistyneisiin sovelluksiin ja käsittelee keskeisiä aiheita, kuten verkkotyypit, IP-osoitteet, protokollat ja verkkoturvallisuus. Kurssin lopussa hallitset olennaiset taidot verkkojen vianmääritykseen, suojaamiseen ja hallintaan, mikä luo vankan pohjan jatkoerikoistumiselle verkkotekniikassa.
2 tuntia 21 luvutAloittelija
3 OPISKELEE NYT
kurssi
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 tuntia 21 luvutAloittelija
2 OPISKELEE NYT
Discover more Learning Tracks
polku
Olennaiset Toimistotaidot
3 Kurssit
75 TehtävätAloittelija
4.5
(1052)
polku
Business AI Toolkit
3 Kurssit42 TehtävätAloittelija
4.1
(126)
polku
DevOps Specialist
6 Kurssit91 TehtävätAloittelija
4.0
(2)
polku
Supervised Learning Foundations
6 Kurssit74 TehtävätAloittelija
4.3
(51)
polku
Python from Zero to Hero
7 Kurssit
2 Projektit132 TehtävätAloittelija
4.6
(406)
polku
C Programming Fundamentals
7 Kurssit70 TehtävätAloittelija
4.5
(24)
polku
Project Management Fundamentals
6 Kurssit122 TehtävätAloittelija
4.8
(5)
polku
Data Analyst with Python
6 Kurssit179 TehtävätAloittelija
4.5
(36)
polku
Java-perusteet
7 Kurssit235 TehtävätAloittelija
4.9
(45)
polku
Tietojen Visualisointi Pythonilla
4 Kurssit56 TehtävätKeskitaso
4.8
(5)
polku
Frontend Development with Angular
7 Kurssit199 TehtävätAloittelija
5.0
(11)
polku
Koneoppimisen Insinööri
6 Kurssit144 TehtävätKeskitaso
4.7
(17)
Miksi ihmiset valitsevat Codefinityn
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
Interaktiivinen koodausympäristö
Sukella interaktiiviseen ympäristöömme: kirjoita ja suorita koodisi reaaliaikaisella palautteella ja onnistumismittareilla—opit tekemällä joka vaiheessa.
AI-avusteinen tuki
Hyödynnä sisäänrakennettua AI-avustajaa selittämään virheitä, ehdottamaan korjauksia tai vastaamaan mihin tahansa kysymykseen koodistasi—pysy tuottavana äläkä jää jumiin.
Check your progress
Päätä jokainen moduuli nopealla testillä, joka antaa välitöntä palautetta, seuraa edistymistäsi ja varmistaa, että olet hallinnut keskeiset käsitteet.
Promote your expertise
Ansaitse teollisuuden tunnustama todistus valmistuessasi ja jaa se LinkedInissä yhdellä napsautuksella—anna verkostosi nähdä, mitä osaat.
Johtavien yritysten työntekijöiden luottama
ja huippuyliopistojen opiskelijoiden
Täysi pääsy katalogiin
Yksi tilaus avaa tämän kurssin ja koko projektien sekä taitojen katalogimme.Features:
500+ huippuarvosteltua kurssiaHuipputason AI-kopilotti
Henkilökohtaiset opintopolut40+ käytännön projekteja
Ilman peruutusta, ennen alennetun suunnitelman päättymistä, hyväksyn, että Codefinity veloittaa automaattisesti $104 joka 3. kuukausi kunnes peruutan. Lue lisää peruutus- ja palautuskäytännöistä osoitteessa Tilausehdot.
Kokeile Codefinityä luottavaisin mielin – 30 päivän rahat takaisin -takuu sisältyy
Tervetuloa Codefinityyn, tarjoamme jopa 64% alennusta kursseistamme. Lisäksi meillä on 30 päivän rahat takaisin -takuu, joten voit kokeilla meitä ilman riskiä.Odotamme innolla toivottaaksemme sinut tervetulleeksi alustallemme ja olemme sitoutuneet tekemään oppimiskokemuksestasi helpon, interaktiivisen ja hauskan.
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
Pääsy heti 500+ kurssiin
Rajoittamaton oppiminen, välitön pääsySaat täyden pääsyn kaikkiin kursseihin ja polkuihin, mukaan lukien videomateriaali, testit ja syvälliset materiaalit—aloita oppiminen milloin tahansa.
Teollisuuden tunnustamat todistuksetAnsaitse todistuksia, jotka vahvistavat asiantuntemuksesi ja edistävät uraasi teknologiassa, AI:ssa, datassa, markkinoinnissa ja muussa.
Tekoälyavusteinen oppiminenSaa henkilökohtaisia vihjeitä, reaaliaikaista palautetta ja AI-avusteisia selityksiä edistymisesi nopeuttamiseksi.
Jatkuvasti laajeneva: Uudet kurssit ja urapolutPysy edellä jatkuvasti päivittyvien kurssien, urakarttojen, haasteiden ja käytännön harjoitustestien avulla.
Rakenna tärkeitä taitojaHallitse kysyttyjä taitoja kursseilla AI:ssa, datatieteessä, ohjelmoinnissa, markkinoinnissa, automaatiossa, verkkokehityksessä ja muussa.
Interaktiivinen ja saumaton oppiminenOsallistu käytännön projekteihin, todellisiin harjoituksiin ja intuitiiviseen oppimiskokemukseen — ei tarvita lisätyökaluja.
