[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"roadmap-learn-svelte-and-sveltekit-from-scratch-es":3},{"data":4,"meta":3577},[5],{"id":6,"documentId":7,"title":8,"slug":9,"excerpt":10,"level":11,"durationEstimate":12,"body":13,"createdAt":3377,"updatedAt":3377,"publishedAt":3378,"coverImage":3379,"author":3426,"relatedStacks":3434},25,"rks2hctrttoqfu7yg9n6407y","Learn Svelte and SvelteKit from Scratch","learn-svelte-and-sveltekit-from-scratch","A complete beginner-friendly roadmap to learn Svelte and SvelteKit from scratch, covering components, reactivity, routing, layouts, data loading, form actions, endpoints, state management, SEO, and deployment.","beginner","4 to 6 weeks",[14,20,24,28,32,36,40,44,48,52,56,59,63,67,71,75,79,83,87,91,95,99,102,106,110,113,117,121,124,128,132,135,139,142,146,150,153,157,161,165,169,172,176,180,183,187,191,195,198,202,206,209,213,217,221,225,229,233,237,240,244,248,252,256,260,264,267,271,275,279,283,287,291,295,298,302,306,310,314,318,322,325,329,332,336,340,343,347,351,354,358,362,366,370,374,378,382,385,388,392,396,400,403,407,411,415,419,423,427,430,434,438,442,446,450,454,457,461,465,468,471,475,479,482,486,490,494,498,502,506,510,514,518,522,526,530,533,537,540,544,548,552,556,560,564,567,571,575,579,582,585,589,592,596,599,602,606,610,613,617,620,623,627,630,633,637,640,643,647,650,653,657,660,663,667,670,674,677,680,684,687,690,694,698,702,706,710,713,716,720,723,726,730,733,736,740,744,748,752,756,759,762,766,769,772,776,779,782,786,790,793,796,800,803,807,811,815,819,823,827,830,834,837,841,845,849,853,857,861,865,869,872,875,879,882,886,890,894,897,901,904,907,911,914,917,921,925,928,931,934,938,942,946,950,954,958,961,965,969,972,976,980,984,988,992,996,1000,1003,1007,1010,1014,1018,1022,1026,1030,1034,1038,1042,1046,1050,1054,1057,1060,1063,1067,1071,1075,1079,1082,1086,1089,1093,1096,1100,1104,1107,1111,1115,1118,1122,1126,1129,1133,1137,1141,1145,1149,1153,1157,1161,1164,1168,1172,1175,1179,1183,1187,1191,1195,1199,1202,1206,1210,1214,1218,1222,1225,1229,1233,1237,1241,1244,1247,1250,1253,1257,1260,1263,1267,1270,1274,1278,1282,1286,1290,1293,1296,1300,1304,1308,1312,1315,1319,1322,1326,1330,1334,1337,1341,1345,1348,1351,1355,1359,1363,1367,1371,1375,1378,1382,1386,1389,1393,1397,1401,1405,1408,1411,1415,1418,1422,1426,1430,1434,1437,1441,1445,1449,1453,1457,1461,1464,1468,1472,1476,1480,1484,1488,1491,1494,1498,1501,1505,1509,1513,1517,1521,1524,1528,1532,1535,1539,1543,1547,1551,1555,1559,1562,1565,1568,1572,1575,1579,1583,1587,1591,1595,1598,1601,1604,1608,1612,1616,1620,1624,1627,1631,1635,1638,1641,1645,1649,1653,1657,1661,1665,1668,1672,1676,1680,1684,1688,1692,1695,1699,1702,1706,1710,1714,1717,1720,1724,1728,1731,1735,1739,1742,1745,1749,1753,1757,1761,1765,1768,1772,1776,1780,1784,1788,1792,1796,1799,1803,1806,1810,1814,1818,1822,1826,1829,1833,1836,1840,1843,1846,1850,1853,1856,1860,1864,1868,1871,1874,1878,1881,1884,1888,1891,1894,1897,1900,1903,1907,1911,1914,1918,1922,1926,1930,1934,1938,1941,1944,1948,1952,1956,1960,1964,1967,1971,1975,1979,1983,1987,1990,1994,1998,2001,2004,2008,2012,2016,2020,2024,2027,2030,2033,2037,2041,2045,2049,2053,2057,2061,2064,2067,2070,2074,2077,2081,2085,2089,2093,2097,2100,2104,2108,2111,2114,2118,2122,2126,2130,2134,2138,2141,2145,2149,2153,2157,2161,2164,2168,2171,2175,2179,2183,2186,2190,2194,2197,2201,2204,2207,2210,2214,2218,2222,2226,2229,2233,2236,2240,2244,2248,2251,2254,2257,2261,2265,2269,2273,2277,2280,2283,2287,2290,2294,2297,2301,2305,2308,2311,2315,2319,2323,2327,2331,2334,2338,2341,2345,2349,2352,2355,2358,2362,2366,2370,2374,2378,2381,2385,2389,2392,2396,2400,2403,2407,2410,2414,2418,2422,2425,2429,2433,2437,2441,2444,2447,2451,2454,2457,2461,2464,2468,2472,2476,2480,2484,2487,2491,2494,2497,2501,2505,2509,2512,2516,2519,2523,2527,2531,2535,2538,2542,2546,2550,2554,2557,2561,2564,2568,2572,2575,2579,2583,2586,2590,2594,2597,2601,2605,2608,2612,2616,2619,2623,2627,2630,2634,2638,2641,2645,2649,2652,2656,2660,2664,2667,2671,2675,2679,2683,2687,2691,2695,2698,2702,2706,2709,2713,2717,2721,2725,2729,2732,2736,2739,2742,2746,2749,2753,2756,2759,2762,2765,2768,2772,2775,2778,2782,2785,2789,2793,2797,2801,2804,2807,2811,2815,2819,2823,2826,2830,2833,2837,2841,2844,2848,2852,2855,2858,2862,2866,2870,2873,2877,2880,2884,2888,2892,2896,2899,2902,2906,2910,2913,2917,2921,2925,2928,2932,2936,2939,2943,2947,2951,2955,2959,2963,2967,2971,2975,2979,2983,2987,2991,2995,2999,3003,3006,3010,3014,3017,3021,3025,3028,3032,3036,3040,3044,3047,3051,3054,3058,3061,3065,3069,3072,3076,3080,3084,3088,3092,3096,3100,3104,3108,3112,3116,3120,3124,3128,3132,3136,3139,3143,3147,3150,3154,3158,3161,3165,3169,3172,3176,3180,3183,3187,3191,3194,3198,3202,3205,3209,3213,3216,3220,3224,3227,3231,3235,3238,3242,3246,3249,3253,3257,3260,3264,3268,3271,3275,3279,3282,3286,3290,3294,3298,3302,3306,3310,3314,3318,3322,3325,3329,3333,3337,3341,3345,3349,3353,3357,3361,3365,3369,3373],{"type":15,"children":16},"paragraph",[17],{"text":18,"type":19},"# Full Svelte + SvelteKit Roadmap for Beginners","text",{"type":15,"children":21},[22],{"text":23,"type":19},"## What the beginner should build by the end",{"type":15,"children":25},[26],{"text":27,"type":19},"A beginner should finish this roadmap able to build and deploy a real app such as:",{"type":15,"children":29},[30],{"text":31,"type":19},"* a blog",{"type":15,"children":33},[34],{"text":35,"type":19},"* a movie search app",{"type":15,"children":37},[38],{"text":39,"type":19},"* a notes app",{"type":15,"children":41},[42],{"text":43,"type":19},"* a documentation site",{"type":15,"children":45},[46],{"text":47,"type":19},"* a small dashboard",{"type":15,"children":49},[50],{"text":51,"type":19},"",{"type":15,"children":53},[54],{"text":55,"type":19},"That project should include:",{"type":15,"children":57},[58],{"text":51,"type":19},{"type":15,"children":60},[61],{"text":62,"type":19},"* reusable Svelte components",{"type":15,"children":64},[65],{"text":66,"type":19},"* routing with SvelteKit",{"type":15,"children":68},[69],{"text":70,"type":19},"* layouts",{"type":15,"children":72},[73],{"text":74,"type":19},"* dynamic routes",{"type":15,"children":76},[77],{"text":78,"type":19},"* data loading",{"type":15,"children":80},[81],{"text":82,"type":19},"* forms",{"type":15,"children":84},[85],{"text":86,"type":19},"* custom endpoints",{"type":15,"children":88},[89],{"text":90,"type":19},"* basic state management",{"type":15,"children":92},[93],{"text":94,"type":19},"* SEO basics",{"type":15,"children":96},[97],{"text":98,"type":19},"* deployment",{"type":15,"children":100},[101],{"text":51,"type":19},{"type":15,"children":103},[104],{"text":105,"type":19},"That is the real finish line. Not “I watched the tutorial.”",{"type":15,"children":107},[108],{"text":109,"type":19},"A real app. With real structure. Online.",{"type":15,"children":111},[112],{"text":51,"type":19},{"type":15,"children":114},[115],{"text":116,"type":19},"# 1) Understand the difference between Svelte and SvelteKit",{"type":15,"children":118},[119],{"text":120,"type":19},"This is the first thing beginners mess up.",{"type":15,"children":122},[123],{"text":51,"type":19},{"type":15,"children":125},[126],{"text":127,"type":19},"* **Svelte** is the UI framework for building components.",{"type":15,"children":129},[130],{"text":131,"type":19},"* **SvelteKit** is the application framework built around Svelte.",{"type":15,"children":133},[134],{"text":51,"type":19},{"type":15,"children":136},[137],{"text":138,"type":19},"SvelteKit handles the app-level concerns: routing, loading data, form actions, rendering behavior, page options, state guidance, and deployment adapters. The docs also explain that pages are created by adding files under `src/routes`. ([Svelte][1])",{"type":15,"children":140},[141],{"text":51,"type":19},{"type":15,"children":143},[144],{"text":145,"type":19},"## What a beginner should understand here",{"type":15,"children":147},[148],{"text":149,"type":19},"A beginner should know this before writing much code:",{"type":15,"children":151},[152],{"text":51,"type":19},{"type":15,"children":154},[155],{"text":156,"type":19},"* Svelte components are not the whole app",{"type":15,"children":158},[159],{"text":160,"type":19},"* SvelteKit is not optional fluff for serious projects",{"type":15,"children":162},[163],{"text":164,"type":19},"* file-based routing is core to how SvelteKit works",{"type":15,"children":166},[167],{"text":168,"type":19},"* rendering and deployment depend partly on adapter and page options",{"type":15,"children":170},[171],{"text":51,"type":19},{"type":15,"children":173},[174],{"text":175,"type":19},"## Beginner mistake to avoid",{"type":15,"children":177},[178],{"text":179,"type":19},"Do not start by memorizing random syntax without understanding what lives where.",{"type":15,"children":181},[182],{"text":51,"type":19},{"type":15,"children":184},[185],{"text":186,"type":19},"**Good mental model:**",{"type":15,"children":188},[189],{"text":190,"type":19},"* Svelte = building blocks",{"type":15,"children":192},[193],{"text":194,"type":19},"* SvelteKit = the house",{"type":15,"children":196},[197],{"text":51,"type":19},{"type":15,"children":199},[200],{"text":201,"type":19},"# 2) Install your first SvelteKit project",{"type":15,"children":203},[204],{"text":205,"type":19},"The current Svelte docs recommend creating a project with:",{"type":15,"children":207},[208],{"text":51,"type":19},{"type":15,"children":210},[211],{"text":212,"type":19},"```bash",{"type":15,"children":214},[215],{"text":216,"type":19},"npx sv create myapp",{"type":15,"children":218},[219],{"text":220,"type":19},"cd myapp",{"type":15,"children":222},[223],{"text":224,"type":19},"npm install",{"type":15,"children":226},[227],{"text":228,"type":19},"npm run dev",{"type":15,"children":230},[231],{"text":232,"type":19},"```",{"type":15,"children":234},[235],{"text":236,"type":19},"That is the official starting flow for a new project. ([Svelte][1])",{"type":15,"children":238},[239],{"text":51,"type":19},{"type":15,"children":241},[242],{"text":243,"type":19},"## What the beginner should learn here",{"type":15,"children":245},[246],{"text":247,"type":19},"* how to create a project",{"type":15,"children":249},[250],{"text":251,"type":19},"* how to run the dev server",{"type":15,"children":253},[254],{"text":255,"type":19},"* where the app lives",{"type":15,"children":257},[258],{"text":259,"type":19},"* what the default files look like",{"type":15,"children":261},[262],{"text":263,"type":19},"* how to edit and see live changes",{"type":15,"children":265},[266],{"text":51,"type":19},{"type":15,"children":268},[269],{"text":270,"type":19},"## Important beginner details people skip",{"type":15,"children":272},[273],{"text":274,"type":19},"A beginner should immediately get comfortable with:",{"type":15,"children":276},[277],{"text":278,"type":19},"* opening the project in a code editor",{"type":15,"children":280},[281],{"text":282,"type":19},"* reading the folder structure slowly",{"type":15,"children":284},[285],{"text":286,"type":19},"* running the app more than once",{"type":15,"children":288},[289],{"text":290,"type":19},"* breaking something tiny and fixing it",{"type":15,"children":292},[293],{"text":294,"type":19},"* understanding that `npm run dev` is the development server, not production",{"type":15,"children":296},[297],{"text":51,"type":19},{"type":15,"children":299},[300],{"text":301,"type":19},"## First exercise",{"type":15,"children":303},[304],{"text":305,"type":19},"Change the homepage so it includes:",{"type":15,"children":307},[308],{"text":309,"type":19},"* a title",{"type":15,"children":311},[312],{"text":313,"type":19},"* a short description",{"type":15,"children":315},[316],{"text":317,"type":19},"* a button",{"type":15,"children":319},[320],{"text":321,"type":19},"* a counter",{"type":15,"children":323},[324],{"text":51,"type":19},{"type":15,"children":326},[327],{"text":328,"type":19},"That sounds basic because it is basic. And basic is exactly where beginners should start.",{"type":15,"children":330},[331],{"text":51,"type":19},{"type":15,"children":333},[334],{"text":335,"type":19},"# 3) Learn the project structure before writing too much code",{"type":15,"children":337},[338],{"text":339,"type":19},"The SvelteKit docs have a dedicated project structure section, and beginners should read it early instead of treating the folders like sacred mystery boxes. ([Svelte][2])",{"type":15,"children":341},[342],{"text":51,"type":19},{"type":15,"children":344},[345],{"text":346,"type":19},"## Important folders",{"type":15,"children":348},[349],{"text":350,"type":19},"A beginner should understand these first:",{"type":15,"children":352},[353],{"text":212,"type":19},{"type":15,"children":355},[356],{"text":357,"type":19},"src/",{"type":15,"children":359},[360],{"text":361,"type":19},"├─ lib/",{"type":15,"children":363},[364],{"text":365,"type":19},"├─ routes/",{"type":15,"children":367},[368],{"text":369,"type":19},"├─ app.html",{"type":15,"children":371},[372],{"text":373,"type":19},"static/",{"type":15,"children":375},[376],{"text":377,"type":19},"svelte.config.js",{"type":15,"children":379},[380],{"text":381,"type":19},"package.json",{"type":15,"children":383},[384],{"text":232,"type":19},{"type":15,"children":386},[387],{"text":51,"type":19},{"type":15,"children":389},[390],{"text":391,"type":19},"## What each part means",{"type":15,"children":393},[394],{"text":395,"type":19},"### `src/routes`",{"type":15,"children":397},[398],{"text":399,"type":19},"This is where pages and route files live. SvelteKit’s router is filesystem-based, so route structure comes from directories and special files. ([Svelte][3])",{"type":15,"children":401},[402],{"text":51,"type":19},{"type":15,"children":404},[405],{"text":406,"type":19},"### `src/lib`",{"type":15,"children":408},[409],{"text":410,"type":19},"Reusable code usually goes here:",{"type":15,"children":412},[413],{"text":414,"type":19},"* components",{"type":15,"children":416},[417],{"text":418,"type":19},"* utilities",{"type":15,"children":420},[421],{"text":422,"type":19},"* stores",{"type":15,"children":424},[425],{"text":426,"type":19},"* helper functions",{"type":15,"children":428},[429],{"text":51,"type":19},{"type":15,"children":431},[432],{"text":433,"type":19},"### `static`",{"type":15,"children":435},[436],{"text":437,"type":19},"Files that should be served directly, such as:",{"type":15,"children":439},[440],{"text":441,"type":19},"* images",{"type":15,"children":443},[444],{"text":445,"type":19},"* icons",{"type":15,"children":447},[448],{"text":449,"type":19},"* robots.txt",{"type":15,"children":451},[452],{"text":453,"type":19},"* manifest files",{"type":15,"children":455},[456],{"text":51,"type":19},{"type":15,"children":458},[459],{"text":460,"type":19},"### `app.html`",{"type":15,"children":462},[463],{"text":464,"type":19},"The HTML shell for the app.",{"type":15,"children":466},[467],{"text":51,"type":19},{"type":15,"children":469},[470],{"text":175,"type":19},{"type":15,"children":472},[473],{"text":474,"type":19},"Do not dump every component into `routes`.",{"type":15,"children":476},[477],{"text":478,"type":19},"That becomes a junk drawer very fast.",{"type":15,"children":480},[481],{"text":51,"type":19},{"type":15,"children":483},[484],{"text":485,"type":19},"# 4) Learn basic Svelte before trying to master SvelteKit",{"type":15,"children":487},[488],{"text":489,"type":19},"A beginner should learn Svelte fundamentals first:",{"type":15,"children":491},[492],{"text":493,"type":19},"* component files",{"type":15,"children":495},[496],{"text":497,"type":19},"* script block",{"type":15,"children":499},[500],{"text":501,"type":19},"* markup",{"type":15,"children":503},[504],{"text":505,"type":19},"* styling",{"type":15,"children":507},[508],{"text":509,"type":19},"* reactivity",{"type":15,"children":511},[512],{"text":513,"type":19},"* props",{"type":15,"children":515},[516],{"text":517,"type":19},"* events",{"type":15,"children":519},[520],{"text":521,"type":19},"* conditional rendering",{"type":15,"children":523},[524],{"text":525,"type":19},"* list rendering",{"type":15,"children":527},[528],{"text":529,"type":19},"* bindings",{"type":15,"children":531},[532],{"text":51,"type":19},{"type":15,"children":534},[535],{"text":536,"type":19},"The current Svelte docs cover modern reactivity with runes such as `$state`, `$derived`, and `$effect`, and the props docs explain passing component inputs with `$props`. The binding docs also explain upward flow with `bind:` when needed. ([Svelte][4])",{"type":15,"children":538},[539],{"text":51,"type":19},{"type":15,"children":541},[542],{"text":543,"type":19},"## First things to learn",{"type":15,"children":545},[546],{"text":547,"type":19},"### Reactive state",{"type":15,"children":549},[550],{"text":551,"type":19},"```svelte",{"type":15,"children":553},[554],{"text":555,"type":19},"\u003Cscript>",{"type":15,"children":557},[558],{"text":559,"type":19},"\tlet count = $state(0);",{"type":15,"children":561},[562],{"text":563,"type":19},"\u003C/script>",{"type":15,"children":565},[566],{"text":51,"type":19},{"type":15,"children":568},[569],{"text":570,"type":19},"\u003Cbutton onclick={() => count++}>",{"type":15,"children":572},[573],{"text":574,"type":19},"\tclicks: {count}",{"type":15,"children":576},[577],{"text":578,"type":19},"\u003C/button>",{"type":15,"children":580},[581],{"text":232,"type":19},{"type":15,"children":583},[584],{"text":51,"type":19},{"type":15,"children":586},[587],{"text":588,"type":19},"Svelte’s docs describe `$state` as the rune for reactive state. ([Svelte][4])",{"type":15,"children":590},[591],{"text":51,"type":19},{"type":15,"children":593},[594],{"text":595,"type":19},"### Derived values",{"type":15,"children":597},[598],{"text":551,"type":19},{"type":15,"children":600},[601],{"text":555,"type":19},{"type":15,"children":603},[604],{"text":605,"type":19},"\tlet price = $state(100);",{"type":15,"children":607},[608],{"text":609,"type":19},"\tlet tax = $state(0.18);",{"type":15,"children":611},[612],{"text":51,"type":19},{"type":15,"children":614},[615],{"text":616,"type":19},"\tlet total = $derived(price + price * tax);",{"type":15,"children":618},[619],{"text":563,"type":19},{"type":15,"children":621},[622],{"text":51,"type":19},{"type":15,"children":624},[625],{"text":626,"type":19},"\u003Cp>Total: {total}\u003C/p>",{"type":15,"children":628},[629],{"text":232,"type":19},{"type":15,"children":631},[632],{"text":51,"type":19},{"type":15,"children":634},[635],{"text":636,"type":19},"### Props",{"type":15,"children":638},[639],{"text":551,"type":19},{"type":15,"children":641},[642],{"text":555,"type":19},{"type":15,"children":644},[645],{"text":646,"type":19},"\tlet { title = 'Default title' } = $props();",{"type":15,"children":648},[649],{"text":563,"type":19},{"type":15,"children":651},[652],{"text":51,"type":19},{"type":15,"children":654},[655],{"text":656,"type":19},"\u003Ch2>{title}\u003C/h2>",{"type":15,"children":658},[659],{"text":232,"type":19},{"type":15,"children":661},[662],{"text":51,"type":19},{"type":15,"children":664},[665],{"text":666,"type":19},"Svelte’s props docs explain that component inputs are props and are passed like attributes. ([Svelte][5])",{"type":15,"children":668},[669],{"text":51,"type":19},{"type":15,"children":671},[672],{"text":673,"type":19},"### Conditional rendering",{"type":15,"children":675},[676],{"text":551,"type":19},{"type":15,"children":678},[679],{"text":555,"type":19},{"type":15,"children":681},[682],{"text":683,"type":19},"\tlet loggedIn = $state(false);",{"type":15,"children":685},[686],{"text":563,"type":19},{"type":15,"children":688},[689],{"text":51,"type":19},{"type":15,"children":691},[692],{"text":693,"type":19},"{#if loggedIn}",{"type":15,"children":695},[696],{"text":697,"type":19},"\t\u003Cp>Welcome back\u003C/p>",{"type":15,"children":699},[700],{"text":701,"type":19},"{:else}",{"type":15,"children":703},[704],{"text":705,"type":19},"\t\u003Cp>Please sign in\u003C/p>",{"type":15,"children":707},[708],{"text":709,"type":19},"{/if}",{"type":15,"children":711},[712],{"text":232,"type":19},{"type":15,"children":714},[715],{"text":51,"type":19},{"type":15,"children":717},[718],{"text":719,"type":19},"### Each blocks",{"type":15,"children":721},[722],{"text":551,"type":19},{"type":15,"children":724},[725],{"text":555,"type":19},{"type":15,"children":727},[728],{"text":729,"type":19},"\tlet items = $state(['Svelte', 'SvelteKit', 'Vercel']);",{"type":15,"children":731},[732],{"text":563,"type":19},{"type":15,"children":734},[735],{"text":51,"type":19},{"type":15,"children":737},[738],{"text":739,"type":19},"\u003Cul>",{"type":15,"children":741},[742],{"text":743,"type":19},"\t{#each items as item}",{"type":15,"children":745},[746],{"text":747,"type":19},"\t\t\u003Cli>{item}\u003C/li>",{"type":15,"children":749},[750],{"text":751,"type":19},"\t{/each}",{"type":15,"children":753},[754],{"text":755,"type":19},"\u003C/ul>",{"type":15,"children":757},[758],{"text":232,"type":19},{"type":15,"children":760},[761],{"text":51,"type":19},{"type":15,"children":763},[764],{"text":765,"type":19},"### Two-way binding",{"type":15,"children":767},[768],{"text":551,"type":19},{"type":15,"children":770},[771],{"text":555,"type":19},{"type":15,"children":773},[774],{"text":775,"type":19},"\tlet name = $state('');",{"type":15,"children":777},[778],{"text":563,"type":19},{"type":15,"children":780},[781],{"text":51,"type":19},{"type":15,"children":783},[784],{"text":785,"type":19},"\u003Cinput bind:value={name} placeholder=\"Your name\" />",{"type":15,"children":787},[788],{"text":789,"type":19},"\u003Cp>Hello {name}\u003C/p>",{"type":15,"children":791},[792],{"text":232,"type":19},{"type":15,"children":794},[795],{"text":51,"type":19},{"type":15,"children":797},[798],{"text":799,"type":19},"The `bind:` docs explain that binding allows component or element state to flow back outward when appropriate. ([Svelte][6])",{"type":15,"children":801},[802],{"text":51,"type":19},{"type":15,"children":804},[805],{"text":806,"type":19},"## Beginner details that matter",{"type":15,"children":808},[809],{"text":810,"type":19},"A beginner should also learn:",{"type":15,"children":812},[813],{"text":814,"type":19},"* when a normal variable is enough",{"type":15,"children":816},[817],{"text":818,"type":19},"* when reactivity is actually needed",{"type":15,"children":820},[821],{"text":822,"type":19},"* not every value must be reactive",{"type":15,"children":824},[825],{"text":826,"type":19},"* overusing reactive state makes code worse, not better",{"type":15,"children":828},[829],{"text":51,"type":19},{"type":15,"children":831},[832],{"text":833,"type":19},"The Svelte best-practices docs explicitly say to use `$state` only for values that should actually trigger reactive updates. ([Svelte][7])",{"type":15,"children":835},[836],{"text":51,"type":19},{"type":15,"children":838},[839],{"text":840,"type":19},"# 5) Build tiny Svelte-only components first",{"type":15,"children":842},[843],{"text":844,"type":19},"Before app architecture, learn composition.",{"type":15,"children":846},[847],{"text":848,"type":19},"## Components a beginner should build",{"type":15,"children":850},[851],{"text":852,"type":19},"* `Button.svelte`",{"type":15,"children":854},[855],{"text":856,"type":19},"* `Card.svelte`",{"type":15,"children":858},[859],{"text":860,"type":19},"* `Badge.svelte`",{"type":15,"children":862},[863],{"text":864,"type":19},"* `SectionTitle.svelte`",{"type":15,"children":866},[867],{"text":868,"type":19},"* `SearchInput.svelte`",{"type":15,"children":870},[871],{"text":51,"type":19},{"type":15,"children":873},[874],{"text":243,"type":19},{"type":15,"children":876},[877],{"text":878,"type":19},"* component reuse",{"type":15,"children":880},[881],{"text":513,"type":19},{"type":15,"children":883},[884],{"text":885,"type":19},"* parent-child composition",{"type":15,"children":887},[888],{"text":889,"type":19},"* keeping components focused",{"type":15,"children":891},[892],{"text":893,"type":19},"* simple styling strategies",{"type":15,"children":895},[896],{"text":51,"type":19},{"type":15,"children":898},[899],{"text":900,"type":19},"## Example button component",{"type":15,"children":902},[903],{"text":551,"type":19},{"type":15,"children":905},[906],{"text":555,"type":19},{"type":15,"children":908},[909],{"text":910,"type":19},"\tlet { label = 'Click me', onclick } = $props();",{"type":15,"children":912},[913],{"text":563,"type":19},{"type":15,"children":915},[916],{"text":51,"type":19},{"type":15,"children":918},[919],{"text":920,"type":19},"\u003Cbutton onclick={onclick}>",{"type":15,"children":922},[923],{"text":924,"type":19},"\t{label}",{"type":15,"children":926},[927],{"text":578,"type":19},{"type":15,"children":929},[930],{"text":232,"type":19},{"type":15,"children":932},[933],{"text":51,"type":19},{"type":15,"children":935},[936],{"text":937,"type":19},"## Important beginner lesson",{"type":15,"children":939},[940],{"text":941,"type":19},"Do not make “smart mega-components” too early.",{"type":15,"children":943},[944],{"text":945,"type":19},"A beginner should learn this discipline:",{"type":15,"children":947},[948],{"text":949,"type":19},"* one component = one clear job",{"type":15,"children":951},[952],{"text":953,"type":19},"* UI pieces should stay small",{"type":15,"children":955},[956],{"text":957,"type":19},"* split code before it becomes painful, not after",{"type":15,"children":959},[960],{"text":51,"type":19},{"type":15,"children":962},[963],{"text":964,"type":19},"# 6) Learn SvelteKit routing properly",{"type":15,"children":966},[967],{"text":968,"type":19},"SvelteKit’s router is filesystem-based. Routes are defined by directories and special files like `+page.svelte`, `+layout.svelte`, `+error.svelte`, `+page.js`, `+page.server.js`, and `+server.js`. ([Svelte][3])",{"type":15,"children":970},[971],{"text":51,"type":19},{"type":15,"children":973},[974],{"text":975,"type":19},"## Files a beginner must know",{"type":15,"children":977},[978],{"text":979,"type":19},"* `+page.svelte`",{"type":15,"children":981},[982],{"text":983,"type":19},"* `+layout.svelte`",{"type":15,"children":985},[986],{"text":987,"type":19},"* `+error.svelte`",{"type":15,"children":989},[990],{"text":991,"type":19},"* `+page.js`",{"type":15,"children":993},[994],{"text":995,"type":19},"* `+page.server.js`",{"type":15,"children":997},[998],{"text":999,"type":19},"* `+server.js`",{"type":15,"children":1001},[1002],{"text":51,"type":19},{"type":15,"children":1004},[1005],{"text":1006,"type":19},"## Example route structure",{"type":15,"children":1008},[1009],{"text":212,"type":19},{"type":15,"children":1011},[1012],{"text":1013,"type":19},"src/routes/",{"type":15,"children":1015},[1016],{"text":1017,"type":19},"├─ +page.svelte",{"type":15,"children":1019},[1020],{"text":1021,"type":19},"├─ about/",{"type":15,"children":1023},[1024],{"text":1025,"type":19},"│  └─ +page.svelte",{"type":15,"children":1027},[1028],{"text":1029,"type":19},"├─ blog/",{"type":15,"children":1031},[1032],{"text":1033,"type":19},"│  ├─ +page.svelte",{"type":15,"children":1035},[1036],{"text":1037,"type":19},"│  └─ [slug]/",{"type":15,"children":1039},[1040],{"text":1041,"type":19},"│     └─ +page.svelte",{"type":15,"children":1043},[1044],{"text":1045,"type":19},"└─ dashboard/",{"type":15,"children":1047},[1048],{"text":1049,"type":19},"   ├─ +layout.svelte",{"type":15,"children":1051},[1052],{"text":1053,"type":19},"   └─ +page.svelte",{"type":15,"children":1055},[1056],{"text":232,"type":19},{"type":15,"children":1058},[1059],{"text":51,"type":19},{"type":15,"children":1061},[1062],{"text":243,"type":19},{"type":15,"children":1064},[1065],{"text":1066,"type":19},"### Static routes",{"type":15,"children":1068},[1069],{"text":1070,"type":19},"Example:",{"type":15,"children":1072},[1073],{"text":1074,"type":19},"* `/about`",{"type":15,"children":1076},[1077],{"text":1078,"type":19},"* `/contact`",{"type":15,"children":1080},[1081],{"text":51,"type":19},{"type":15,"children":1083},[1084],{"text":1085,"type":19},"### Dynamic routes",{"type":15,"children":1087},[1088],{"text":1070,"type":19},{"type":15,"children":1090},[1091],{"text":1092,"type":19},"* `/blog/[slug]`",{"type":15,"children":1094},[1095],{"text":51,"type":19},{"type":15,"children":1097},[1098],{"text":1099,"type":19},"### Layouts",{"type":15,"children":1101},[1102],{"text":1103,"type":19},"Shared wrappers for route sections.",{"type":15,"children":1105},[1106],{"text":51,"type":19},{"type":15,"children":1108},[1109],{"text":1110,"type":19},"### Error pages",{"type":15,"children":1112},[1113],{"text":1114,"type":19},"Custom error UI when something fails.",{"type":15,"children":1116},[1117],{"text":51,"type":19},{"type":15,"children":1119},[1120],{"text":1121,"type":19},"## Beginner detail people skip",{"type":15,"children":1123},[1124],{"text":1125,"type":19},"A beginner should understand that **layouts are not just visual wrappers**. They can define shared structure and shared data flow patterns across route groups.",{"type":15,"children":1127},[1128],{"text":51,"type":19},{"type":15,"children":1130},[1131],{"text":1132,"type":19},"## Practice project",{"type":15,"children":1134},[1135],{"text":1136,"type":19},"Create:",{"type":15,"children":1138},[1139],{"text":1140,"type":19},"* home page",{"type":15,"children":1142},[1143],{"text":1144,"type":19},"* about page",{"type":15,"children":1146},[1147],{"text":1148,"type":19},"* blog list page",{"type":15,"children":1150},[1151],{"text":1152,"type":19},"* blog detail page",{"type":15,"children":1154},[1155],{"text":1156,"type":19},"* dashboard page",{"type":15,"children":1158},[1159],{"text":1160,"type":19},"That alone teaches a lot.",{"type":15,"children":1162},[1163],{"text":51,"type":19},{"type":15,"children":1165},[1166],{"text":1167,"type":19},"# 7) Learn loading data the right way",{"type":15,"children":1169},[1170],{"text":1171,"type":19},"SvelteKit has a dedicated loading-data model through `load` functions. These can live in `+page.js`, `+page.server.js`, `+layout.js`, and `+layout.server.js`. ([Svelte][3])",{"type":15,"children":1173},[1174],{"text":51,"type":19},{"type":15,"children":1176},[1177],{"text":1178,"type":19},"## What a beginner should learn",{"type":15,"children":1180},[1181],{"text":1182,"type":19},"* what `load` is",{"type":15,"children":1184},[1185],{"text":1186,"type":19},"* when to use `+page.js`",{"type":15,"children":1188},[1189],{"text":1190,"type":19},"* when to use `+page.server.js`",{"type":15,"children":1192},[1193],{"text":1194,"type":19},"* how data gets passed into the page",{"type":15,"children":1196},[1197],{"text":1198,"type":19},"* why server-only logic matters",{"type":15,"children":1200},[1201],{"text":51,"type":19},{"type":15,"children":1203},[1204],{"text":1205,"type":19},"## Example with `+page.js`",{"type":15,"children":1207},[1208],{"text":1209,"type":19},"```js",{"type":15,"children":1211},[1212],{"text":1213,"type":19},"export async function load({ fetch }) {",{"type":15,"children":1215},[1216],{"text":1217,"type":19},"\tconst res = await fetch('/api/posts');",{"type":15,"children":1219},[1220],{"text":1221,"type":19},"\tconst posts = await res.json();",{"type":15,"children":1223},[1224],{"text":51,"type":19},{"type":15,"children":1226},[1227],{"text":1228,"type":19},"\treturn {",{"type":15,"children":1230},[1231],{"text":1232,"type":19},"\t\tposts",{"type":15,"children":1234},[1235],{"text":1236,"type":19},"\t};",{"type":15,"children":1238},[1239],{"text":1240,"type":19},"}",{"type":15,"children":1242},[1243],{"text":232,"type":19},{"type":15,"children":1245},[1246],{"text":51,"type":19},{"type":15,"children":1248},[1249],{"text":551,"type":19},{"type":15,"children":1251},[1252],{"text":555,"type":19},{"type":15,"children":1254},[1255],{"text":1256,"type":19},"\tlet { data } = $props();",{"type":15,"children":1258},[1259],{"text":563,"type":19},{"type":15,"children":1261},[1262],{"text":51,"type":19},{"type":15,"children":1264},[1265],{"text":1266,"type":19},"\u003Ch1>Blog\u003C/h1>",{"type":15,"children":1268},[1269],{"text":51,"type":19},{"type":15,"children":1271},[1272],{"text":1273,"type":19},"{#each data.posts as post}",{"type":15,"children":1275},[1276],{"text":1277,"type":19},"\t\u003Carticle>",{"type":15,"children":1279},[1280],{"text":1281,"type":19},"\t\t\u003Ch2>{post.title}\u003C/h2>",{"type":15,"children":1283},[1284],{"text":1285,"type":19},"\t\u003C/article>",{"type":15,"children":1287},[1288],{"text":1289,"type":19},"{/each}",{"type":15,"children":1291},[1292],{"text":232,"type":19},{"type":15,"children":1294},[1295],{"text":51,"type":19},{"type":15,"children":1297},[1298],{"text":1299,"type":19},"## Important beginner detail",{"type":15,"children":1301},[1302],{"text":1303,"type":19},"A beginner should learn this distinction early:",{"type":15,"children":1305},[1306],{"text":1307,"type":19},"* `+page.js` can run in places where client-side navigation matters",{"type":15,"children":1309},[1310],{"text":1311,"type":19},"* `+page.server.js` is for server-only loading logic",{"type":15,"children":1313},[1314],{"text":51,"type":19},{"type":15,"children":1316},[1317],{"text":1318,"type":19},"Even before mastering the full nuance, they should know not to casually leak server-only work into the client path.",{"type":15,"children":1320},[1321],{"text":51,"type":19},{"type":15,"children":1323},[1324],{"text":1325,"type":19},"## Common mistake",{"type":15,"children":1327},[1328],{"text":1329,"type":19},"Do not fetch everything directly inside components just because it “works.”",{"type":15,"children":1331},[1332],{"text":1333,"type":19},"Learn the app-level data flow first.",{"type":15,"children":1335},[1336],{"text":51,"type":19},{"type":15,"children":1338},[1339],{"text":1340,"type":19},"# 8) Learn forms and form actions",{"type":15,"children":1342},[1343],{"text":1344,"type":19},"SvelteKit has first-class **form actions**. This is one of its nicest ideas and beginners should learn it early because it teaches clean server interaction through forms. ([Svelte][8])",{"type":15,"children":1346},[1347],{"text":51,"type":19},{"type":15,"children":1349},[1350],{"text":1178,"type":19},{"type":15,"children":1352},[1353],{"text":1354,"type":19},"* native HTML forms still matter",{"type":15,"children":1356},[1357],{"text":1358,"type":19},"* `method=\"POST\"`",{"type":15,"children":1360},[1361],{"text":1362,"type":19},"* actions in `+page.server.js`",{"type":15,"children":1364},[1365],{"text":1366,"type":19},"* validation basics",{"type":15,"children":1368},[1369],{"text":1370,"type":19},"* returning errors or success states",{"type":15,"children":1372},[1373],{"text":1374,"type":19},"* progressive enhancement later",{"type":15,"children":1376},[1377],{"text":51,"type":19},{"type":15,"children":1379},[1380],{"text":1381,"type":19},"## Example",{"type":15,"children":1383},[1384],{"text":1385,"type":19},"### `+page.svelte`",{"type":15,"children":1387},[1388],{"text":551,"type":19},{"type":15,"children":1390},[1391],{"text":1392,"type":19},"\u003Cform method=\"POST\">",{"type":15,"children":1394},[1395],{"text":1396,"type":19},"\t\u003Cinput name=\"name\" placeholder=\"Your name\" />",{"type":15,"children":1398},[1399],{"text":1400,"type":19},"\t\u003Cbutton type=\"submit\">Submit\u003C/button>",{"type":15,"children":1402},[1403],{"text":1404,"type":19},"\u003C/form>",{"type":15,"children":1406},[1407],{"text":232,"type":19},{"type":15,"children":1409},[1410],{"text":51,"type":19},{"type":15,"children":1412},[1413],{"text":1414,"type":19},"### `+page.server.js`",{"type":15,"children":1416},[1417],{"text":1209,"type":19},{"type":15,"children":1419},[1420],{"text":1421,"type":19},"export const actions = {",{"type":15,"children":1423},[1424],{"text":1425,"type":19},"\tdefault: async ({ request }) => {",{"type":15,"children":1427},[1428],{"text":1429,"type":19},"\t\tconst formData = await request.formData();",{"type":15,"children":1431},[1432],{"text":1433,"type":19},"\t\tconst name = formData.get('name');",{"type":15,"children":1435},[1436],{"text":51,"type":19},{"type":15,"children":1438},[1439],{"text":1440,"type":19},"\t\tif (!name) {",{"type":15,"children":1442},[1443],{"text":1444,"type":19},"\t\t\treturn {",{"type":15,"children":1446},[1447],{"text":1448,"type":19},"\t\t\t\tsuccess: false,",{"type":15,"children":1450},[1451],{"text":1452,"type":19},"\t\t\t\tmessage: 'Name is required'",{"type":15,"children":1454},[1455],{"text":1456,"type":19},"\t\t\t};",{"type":15,"children":1458},[1459],{"text":1460,"type":19},"\t\t}",{"type":15,"children":1462},[1463],{"text":51,"type":19},{"type":15,"children":1465},[1466],{"text":1467,"type":19},"\t\treturn {",{"type":15,"children":1469},[1470],{"text":1471,"type":19},"\t\t\tsuccess: true,",{"type":15,"children":1473},[1474],{"text":1475,"type":19},"\t\t\tmessage: `Welcome, ${name}`",{"type":15,"children":1477},[1478],{"text":1479,"type":19},"\t\t};",{"type":15,"children":1481},[1482],{"text":1483,"type":19},"\t}",{"type":15,"children":1485},[1486],{"text":1487,"type":19},"};",{"type":15,"children":1489},[1490],{"text":232,"type":19},{"type":15,"children":1492},[1493],{"text":51,"type":19},{"type":15,"children":1495},[1496],{"text":1497,"type":19},"## Important beginner details",{"type":15,"children":1499},[1500],{"text":810,"type":19},{"type":15,"children":1502},[1503],{"text":1504,"type":19},"* server validation is still necessary",{"type":15,"children":1506},[1507],{"text":1508,"type":19},"* input names matter",{"type":15,"children":1510},[1511],{"text":1512,"type":19},"* forms are not outdated",{"type":15,"children":1514},[1515],{"text":1516,"type":19},"* not every submit needs a separate frontend fetch call",{"type":15,"children":1518},[1519],{"text":1520,"type":19},"This is one of those places where old-school web fundamentals age like gold.",{"type":15,"children":1522},[1523],{"text":51,"type":19},{"type":15,"children":1525},[1526],{"text":1527,"type":19},"# 9) Learn endpoints with `+server.js`",{"type":15,"children":1529},[1530],{"text":1531,"type":19},"SvelteKit supports request handlers in `+server.js`, which lets you build internal API routes. The routing docs include `+server` as part of the core route system. ([Svelte][3])",{"type":15,"children":1533},[1534],{"text":51,"type":19},{"type":15,"children":1536},[1537],{"text":1538,"type":19},"## What the beginner should learn",{"type":15,"children":1540},[1541],{"text":1542,"type":19},"* `GET`",{"type":15,"children":1544},[1545],{"text":1546,"type":19},"* `POST`",{"type":15,"children":1548},[1549],{"text":1550,"type":19},"* returning JSON",{"type":15,"children":1552},[1553],{"text":1554,"type":19},"* internal API structure",{"type":15,"children":1556},[1557],{"text":1558,"type":19},"* when an endpoint helps",{"type":15,"children":1560},[1561],{"text":51,"type":19},{"type":15,"children":1563},[1564],{"text":1381,"type":19},{"type":15,"children":1566},[1567],{"text":1209,"type":19},{"type":15,"children":1569},[1570],{"text":1571,"type":19},"import { json } from '@sveltejs/kit';",{"type":15,"children":1573},[1574],{"text":51,"type":19},{"type":15,"children":1576},[1577],{"text":1578,"type":19},"export function GET() {",{"type":15,"children":1580},[1581],{"text":1582,"type":19},"\treturn json([",{"type":15,"children":1584},[1585],{"text":1586,"type":19},"\t\t{ id: 1, title: 'Learn Svelte' },",{"type":15,"children":1588},[1589],{"text":1590,"type":19},"\t\t{ id: 2, title: 'Learn SvelteKit' }",{"type":15,"children":1592},[1593],{"text":1594,"type":19},"\t]);",{"type":15,"children":1596},[1597],{"text":1240,"type":19},{"type":15,"children":1599},[1600],{"text":232,"type":19},{"type":15,"children":1602},[1603],{"text":51,"type":19},{"type":15,"children":1605},[1606],{"text":1607,"type":19},"## Why this matters for a beginner",{"type":15,"children":1609},[1610],{"text":1611,"type":19},"It teaches:",{"type":15,"children":1613},[1614],{"text":1615,"type":19},"* request/response thinking",{"type":15,"children":1617},[1618],{"text":1619,"type":19},"* clean separation between page UI and backend logic",{"type":15,"children":1621},[1622],{"text":1623,"type":19},"* how frontend and server code can live in the same app without becoming a swamp",{"type":15,"children":1625},[1626],{"text":51,"type":19},{"type":15,"children":1628},[1629],{"text":1630,"type":19},"# 10) Learn layouts, shared UI, and route groups",{"type":15,"children":1632},[1633],{"text":1634,"type":19},"Beginners often underestimate layouts. Big mistake.",{"type":15,"children":1636},[1637],{"text":51,"type":19},{"type":15,"children":1639},[1640],{"text":1538,"type":19},{"type":15,"children":1642},[1643],{"text":1644,"type":19},"* root layout",{"type":15,"children":1646},[1647],{"text":1648,"type":19},"* nested layout",{"type":15,"children":1650},[1651],{"text":1652,"type":19},"* shared navigation",{"type":15,"children":1654},[1655],{"text":1656,"type":19},"* sidebar layouts",{"type":15,"children":1658},[1659],{"text":1660,"type":19},"* dashboard sections",{"type":15,"children":1662},[1663],{"text":1664,"type":19},"* route grouping concepts",{"type":15,"children":1666},[1667],{"text":51,"type":19},{"type":15,"children":1669},[1670],{"text":1671,"type":19},"## Example use cases",{"type":15,"children":1673},[1674],{"text":1675,"type":19},"### Root layout",{"type":15,"children":1677},[1678],{"text":1679,"type":19},"Use for:",{"type":15,"children":1681},[1682],{"text":1683,"type":19},"* navbar",{"type":15,"children":1685},[1686],{"text":1687,"type":19},"* footer",{"type":15,"children":1689},[1690],{"text":1691,"type":19},"* theme wrapper",{"type":15,"children":1693},[1694],{"text":51,"type":19},{"type":15,"children":1696},[1697],{"text":1698,"type":19},"### Dashboard layout",{"type":15,"children":1700},[1701],{"text":1679,"type":19},{"type":15,"children":1703},[1704],{"text":1705,"type":19},"* sidebar",{"type":15,"children":1707},[1708],{"text":1709,"type":19},"* user nav",{"type":15,"children":1711},[1712],{"text":1713,"type":19},"* private app shell",{"type":15,"children":1715},[1716],{"text":51,"type":19},{"type":15,"children":1718},[1719],{"text":937,"type":19},{"type":15,"children":1721},[1722],{"text":1723,"type":19},"A beginner should think in **shared shells**, not repeated markup.",{"type":15,"children":1725},[1726],{"text":1727,"type":19},"If the same navbar is copied into three pages, that is not clever. That is a cry for help.",{"type":15,"children":1729},[1730],{"text":51,"type":19},{"type":15,"children":1732},[1733],{"text":1734,"type":19},"# 11) Learn state management carefully",{"type":15,"children":1736},[1737],{"text":1738,"type":19},"SvelteKit has a state-management guide specifically because mixed server/client apps have common traps. The docs warn about shared state on the server, side-effects in `load`, storing state in the URL when appropriate, and using snapshots for ephemeral state. ([Svelte][9])",{"type":15,"children":1740},[1741],{"text":51,"type":19},{"type":15,"children":1743},[1744],{"text":1538,"type":19},{"type":15,"children":1746},[1747],{"text":1748,"type":19},"* local component state first",{"type":15,"children":1750},[1751],{"text":1752,"type":19},"* shared stores later",{"type":15,"children":1754},[1755],{"text":1756,"type":19},"* context when necessary",{"type":15,"children":1758},[1759],{"text":1760,"type":19},"* URL state for filters or search",{"type":15,"children":1762},[1763],{"text":1764,"type":19},"* avoid shared mutable server state",{"type":15,"children":1766},[1767],{"text":51,"type":19},{"type":15,"children":1769},[1770],{"text":1771,"type":19},"## Important beginner rule",{"type":15,"children":1773},[1774],{"text":1775,"type":19},"Use the simplest state solution that works:",{"type":15,"children":1777},[1778],{"text":1779,"type":19},"1. local state",{"type":15,"children":1781},[1782],{"text":1783,"type":19},"2. parent-child props",{"type":15,"children":1785},[1786],{"text":1787,"type":19},"3. shared store",{"type":15,"children":1789},[1790],{"text":1791,"type":19},"4. URL state",{"type":15,"children":1793},[1794],{"text":1795,"type":19},"5. context",{"type":15,"children":1797},[1798],{"text":51,"type":19},{"type":15,"children":1800},[1801],{"text":1802,"type":19},"Not the other way around.",{"type":15,"children":1804},[1805],{"text":51,"type":19},{"type":15,"children":1807},[1808],{"text":1809,"type":19},"## What beginners should absolutely avoid",{"type":15,"children":1811},[1812],{"text":1813,"type":19},"* global store for everything",{"type":15,"children":1815},[1816],{"text":1817,"type":19},"* shared mutable server variables",{"type":15,"children":1819},[1820],{"text":1821,"type":19},"* side-effects inside `load`",{"type":15,"children":1823},[1824],{"text":1825,"type":19},"* confusing UI state with business data",{"type":15,"children":1827},[1828],{"text":51,"type":19},{"type":15,"children":1830},[1831],{"text":1832,"type":19},"The state-management docs explicitly call out shared server state as a gotcha. ([Svelte][9])",{"type":15,"children":1834},[1835],{"text":51,"type":19},{"type":15,"children":1837},[1838],{"text":1839,"type":19},"## Example of local state",{"type":15,"children":1841},[1842],{"text":551,"type":19},{"type":15,"children":1844},[1845],{"text":555,"type":19},{"type":15,"children":1847},[1848],{"text":1849,"type":19},"\tlet query = $state('');",{"type":15,"children":1851},[1852],{"text":729,"type":19},{"type":15,"children":1854},[1855],{"text":51,"type":19},{"type":15,"children":1857},[1858],{"text":1859,"type":19},"\tlet filtered = $derived(",{"type":15,"children":1861},[1862],{"text":1863,"type":19},"\t\titems.filter((item) => item.toLowerCase().includes(query.toLowerCase()))",{"type":15,"children":1865},[1866],{"text":1867,"type":19},"\t);",{"type":15,"children":1869},[1870],{"text":563,"type":19},{"type":15,"children":1872},[1873],{"text":51,"type":19},{"type":15,"children":1875},[1876],{"text":1877,"type":19},"\u003Cinput bind:value={query} placeholder=\"Search...\" />",{"type":15,"children":1879},[1880],{"text":51,"type":19},{"type":15,"children":1882},[1883],{"text":739,"type":19},{"type":15,"children":1885},[1886],{"text":1887,"type":19},"\t{#each filtered as item}",{"type":15,"children":1889},[1890],{"text":747,"type":19},{"type":15,"children":1892},[1893],{"text":751,"type":19},{"type":15,"children":1895},[1896],{"text":755,"type":19},{"type":15,"children":1898},[1899],{"text":232,"type":19},{"type":15,"children":1901},[1902],{"text":51,"type":19},{"type":15,"children":1904},[1905],{"text":1906,"type":19},"# 12) Learn page options and rendering modes",{"type":15,"children":1908},[1909],{"text":1910,"type":19},"SvelteKit has page options and project types so you can control rendering and deployment behavior. The docs also explain that project structure and routing stay the same regardless of project type, while rendering/deployment behavior comes from the adapter and configuration. ([Svelte][10])",{"type":15,"children":1912},[1913],{"text":51,"type":19},{"type":15,"children":1915},[1916],{"text":1917,"type":19},"## What a beginner should learn conceptually",{"type":15,"children":1919},[1920],{"text":1921,"type":19},"* SSR",{"type":15,"children":1923},[1924],{"text":1925,"type":19},"* CSR",{"type":15,"children":1927},[1928],{"text":1929,"type":19},"* prerender",{"type":15,"children":1931},[1932],{"text":1933,"type":19},"* static generation",{"type":15,"children":1935},[1936],{"text":1937,"type":19},"* SPA fallback concepts",{"type":15,"children":1939},[1940],{"text":51,"type":19},{"type":15,"children":1942},[1943],{"text":937,"type":19},{"type":15,"children":1945},[1946],{"text":1947,"type":19},"Do not choose rendering mode because it sounds cool.",{"type":15,"children":1949},[1950],{"text":1951,"type":19},"Choose based on needs:",{"type":15,"children":1953},[1954],{"text":1955,"type":19},"* blog or docs site → prerender/static can be great",{"type":15,"children":1957},[1958],{"text":1959,"type":19},"* app with dynamic user data → SSR often makes sense",{"type":15,"children":1961},[1962],{"text":1963,"type":19},"* some hybrid cases → mix carefully",{"type":15,"children":1965},[1966],{"text":51,"type":19},{"type":15,"children":1968},[1969],{"text":1970,"type":19},"## Why this matters",{"type":15,"children":1972},[1973],{"text":1974,"type":19},"Beginners who ignore rendering modes often end up confused about:",{"type":15,"children":1976},[1977],{"text":1978,"type":19},"* why some data runs on server",{"type":15,"children":1980},[1981],{"text":1982,"type":19},"* why some pages can be prebuilt",{"type":15,"children":1984},[1985],{"text":1986,"type":19},"* why deployment behaves differently",{"type":15,"children":1988},[1989],{"text":51,"type":19},{"type":15,"children":1991},[1992],{"text":1993,"type":19},"# 13) Learn SEO basics in SvelteKit",{"type":15,"children":1995},[1996],{"text":1997,"type":19},"SvelteKit has an SEO section in the docs, and beginners building public pages should learn the minimum. ([Svelte][11])",{"type":15,"children":1999},[2000],{"text":51,"type":19},{"type":15,"children":2002},[2003],{"text":1538,"type":19},{"type":15,"children":2005},[2006],{"text":2007,"type":19},"* page titles",{"type":15,"children":2009},[2010],{"text":2011,"type":19},"* meta descriptions",{"type":15,"children":2013},[2014],{"text":2015,"type":19},"* canonical basics",{"type":15,"children":2017},[2018],{"text":2019,"type":19},"* open graph basics",{"type":15,"children":2021},[2022],{"text":2023,"type":19},"* why SSR/prerender helps discoverability",{"type":15,"children":2025},[2026],{"text":51,"type":19},{"type":15,"children":2028},[2029],{"text":1381,"type":19},{"type":15,"children":2031},[2032],{"text":551,"type":19},{"type":15,"children":2034},[2035],{"text":2036,"type":19},"\u003Csvelte:head>",{"type":15,"children":2038},[2039],{"text":2040,"type":19},"\t\u003Ctitle>Learn SvelteKit\u003C/title>",{"type":15,"children":2042},[2043],{"text":2044,"type":19},"\t\u003Cmeta",{"type":15,"children":2046},[2047],{"text":2048,"type":19},"\t\tname=\"description\"",{"type":15,"children":2050},[2051],{"text":2052,"type":19},"\t\tcontent=\"A beginner-friendly guide to learning SvelteKit step by step\"",{"type":15,"children":2054},[2055],{"text":2056,"type":19},"\t/>",{"type":15,"children":2058},[2059],{"text":2060,"type":19},"\u003C/svelte:head>",{"type":15,"children":2062},[2063],{"text":232,"type":19},{"type":15,"children":2065},[2066],{"text":51,"type":19},{"type":15,"children":2068},[2069],{"text":1299,"type":19},{"type":15,"children":2071},[2072],{"text":2073,"type":19},"SEO is not just “for bloggers.”",{"type":15,"children":2075},[2076],{"text":51,"type":19},{"type":15,"children":2078},[2079],{"text":2080,"type":19},"It matters for:",{"type":15,"children":2082},[2083],{"text":2084,"type":19},"* portfolio pages",{"type":15,"children":2086},[2087],{"text":2088,"type":19},"* landing pages",{"type":15,"children":2090},[2091],{"text":2092,"type":19},"* documentation",{"type":15,"children":2094},[2095],{"text":2096,"type":19},"* public product sites",{"type":15,"children":2098},[2099],{"text":51,"type":19},{"type":15,"children":2101},[2102],{"text":2103,"type":19},"# 14) Learn basic styling and UI organization",{"type":15,"children":2105},[2106],{"text":2107,"type":19},"A beginner should not ignore styling just because they are focused on logic.",{"type":15,"children":2109},[2110],{"text":51,"type":19},{"type":15,"children":2112},[2113],{"text":1538,"type":19},{"type":15,"children":2115},[2116],{"text":2117,"type":19},"* local component styles",{"type":15,"children":2119},[2120],{"text":2121,"type":19},"* global styles",{"type":15,"children":2123},[2124],{"text":2125,"type":19},"* layout spacing",{"type":15,"children":2127},[2128],{"text":2129,"type":19},"* typography basics",{"type":15,"children":2131},[2132],{"text":2133,"type":19},"* responsive thinking",{"type":15,"children":2135},[2136],{"text":2137,"type":19},"* consistent naming",{"type":15,"children":2139},[2140],{"text":51,"type":19},{"type":15,"children":2142},[2143],{"text":2144,"type":19},"## Practical beginner advice",{"type":15,"children":2146},[2147],{"text":2148,"type":19},"A beginner should decide early whether to use:",{"type":15,"children":2150},[2151],{"text":2152,"type":19},"* plain CSS",{"type":15,"children":2154},[2155],{"text":2156,"type":19},"* CSS modules approach",{"type":15,"children":2158},[2159],{"text":2160,"type":19},"* utility-first styling later",{"type":15,"children":2162},[2163],{"text":51,"type":19},{"type":15,"children":2165},[2166],{"text":2167,"type":19},"But do not overcomplicate it on day one.",{"type":15,"children":2169},[2170],{"text":51,"type":19},{"type":15,"children":2172},[2173],{"text":2174,"type":19},"## Good rule",{"type":15,"children":2176},[2177],{"text":2178,"type":19},"First learn to build a clean app.",{"type":15,"children":2180},[2181],{"text":2182,"type":19},"Then obsess over design systems.",{"type":15,"children":2184},[2185],{"text":51,"type":19},{"type":15,"children":2187},[2188],{"text":2189,"type":19},"# 15) Learn file organization for real projects",{"type":15,"children":2191},[2192],{"text":2193,"type":19},"A beginner should not stay in a flat messy structure forever.",{"type":15,"children":2195},[2196],{"text":51,"type":19},{"type":15,"children":2198},[2199],{"text":2200,"type":19},"## Good starting structure",{"type":15,"children":2202},[2203],{"text":212,"type":19},{"type":15,"children":2205},[2206],{"text":357,"type":19},{"type":15,"children":2208},[2209],{"text":361,"type":19},{"type":15,"children":2211},[2212],{"text":2213,"type":19},"│  ├─ components/",{"type":15,"children":2215},[2216],{"text":2217,"type":19},"│  ├─ stores/",{"type":15,"children":2219},[2220],{"text":2221,"type":19},"│  ├─ utils/",{"type":15,"children":2223},[2224],{"text":2225,"type":19},"│  └─ server/",{"type":15,"children":2227},[2228],{"text":365,"type":19},{"type":15,"children":2230},[2231],{"text":2232,"type":19},"│  ├─ +layout.svelte",{"type":15,"children":2234},[2235],{"text":1033,"type":19},{"type":15,"children":2237},[2238],{"text":2239,"type":19},"│  ├─ blog/",{"type":15,"children":2241},[2242],{"text":2243,"type":19},"│  ├─ api/",{"type":15,"children":2245},[2246],{"text":2247,"type":19},"│  └─ dashboard/",{"type":15,"children":2249},[2250],{"text":232,"type":19},{"type":15,"children":2252},[2253],{"text":51,"type":19},{"type":15,"children":2255},[2256],{"text":243,"type":19},{"type":15,"children":2258},[2259],{"text":2260,"type":19},"* `components` for reusable UI",{"type":15,"children":2262},[2263],{"text":2264,"type":19},"* `utils` for helpers",{"type":15,"children":2266},[2267],{"text":2268,"type":19},"* `stores` for shared client state",{"type":15,"children":2270},[2271],{"text":2272,"type":19},"* `server` for server-specific helpers",{"type":15,"children":2274},[2275],{"text":2276,"type":19},"* route files stay route-focused",{"type":15,"children":2278},[2279],{"text":51,"type":19},{"type":15,"children":2281},[2282],{"text":1299,"type":19},{"type":15,"children":2284},[2285],{"text":2286,"type":19},"Do not shove all logic into `+page.svelte`.",{"type":15,"children":2288},[2289],{"text":51,"type":19},{"type":15,"children":2291},[2292],{"text":2293,"type":19},"That file should not become your emotional support dumpster.",{"type":15,"children":2295},[2296],{"text":51,"type":19},{"type":15,"children":2298},[2299],{"text":2300,"type":19},"# 16) Learn adapters and deployment",{"type":15,"children":2302},[2303],{"text":2304,"type":19},"Adapters are how SvelteKit targets different deployment environments. The docs explain that `adapter-static` prerenders the site into static files, and the docs index also includes adapters and zero-config deployments as core deployment topics. ([Svelte][2])",{"type":15,"children":2306},[2307],{"text":51,"type":19},{"type":15,"children":2309},[2310],{"text":1178,"type":19},{"type":15,"children":2312},[2313],{"text":2314,"type":19},"* what an adapter is",{"type":15,"children":2316},[2317],{"text":2318,"type":19},"* static vs server deployment",{"type":15,"children":2320},[2321],{"text":2322,"type":19},"* build step",{"type":15,"children":2324},[2325],{"text":2326,"type":19},"* preview step",{"type":15,"children":2328},[2329],{"text":2330,"type":19},"* choose deployment target intentionally",{"type":15,"children":2332},[2333],{"text":51,"type":19},{"type":15,"children":2335},[2336],{"text":2337,"type":19},"## Important commands",{"type":15,"children":2339},[2340],{"text":212,"type":19},{"type":15,"children":2342},[2343],{"text":2344,"type":19},"npm run build",{"type":15,"children":2346},[2347],{"text":2348,"type":19},"npm run preview",{"type":15,"children":2350},[2351],{"text":232,"type":19},{"type":15,"children":2353},[2354],{"text":51,"type":19},{"type":15,"children":2356},[2357],{"text":937,"type":19},{"type":15,"children":2359},[2360],{"text":2361,"type":19},"A beginner should always:",{"type":15,"children":2363},[2364],{"text":2365,"type":19},"* run the build locally",{"type":15,"children":2367},[2368],{"text":2369,"type":19},"* preview the production build",{"type":15,"children":2371},[2372],{"text":2373,"type":19},"* confirm routes and assets work",{"type":15,"children":2375},[2376],{"text":2377,"type":19},"* avoid deploying blind",{"type":15,"children":2379},[2380],{"text":51,"type":19},{"type":15,"children":2382},[2383],{"text":2384,"type":19},"## Static site case",{"type":15,"children":2386},[2387],{"text":2388,"type":19},"If building:",{"type":15,"children":2390},[2391],{"text":31,"type":19},{"type":15,"children":2393},[2394],{"text":2395,"type":19},"* docs",{"type":15,"children":2397},[2398],{"text":2399,"type":19},"* a content site",{"type":15,"children":2401},[2402],{"text":51,"type":19},{"type":15,"children":2404},[2405],{"text":2406,"type":19},"then static generation can be an excellent beginner-friendly path. The adapter-static docs describe using it to prerender the site as static files. ([Svelte][12])",{"type":15,"children":2408},[2409],{"text":51,"type":19},{"type":15,"children":2411},[2412],{"text":2413,"type":19},"# 17) Good beginner projects for SvelteKit",{"type":15,"children":2415},[2416],{"text":2417,"type":19},"A beginner should not start with a huge SaaS clone.",{"type":15,"children":2419},[2420],{"text":2421,"type":19},"Start with something small but real.",{"type":15,"children":2423},[2424],{"text":51,"type":19},{"type":15,"children":2426},[2427],{"text":2428,"type":19},"## Best first projects",{"type":15,"children":2430},[2431],{"text":2432,"type":19},"### 1. Blog",{"type":15,"children":2434},[2435],{"text":2436,"type":19},"Teaches:",{"type":15,"children":2438},[2439],{"text":2440,"type":19},"* pages",{"type":15,"children":2442},[2443],{"text":74,"type":19},{"type":15,"children":2445},[2446],{"text":70,"type":19},{"type":15,"children":2448},[2449],{"text":2450,"type":19},"* SEO",{"type":15,"children":2452},[2453],{"text":78,"type":19},{"type":15,"children":2455},[2456],{"text":51,"type":19},{"type":15,"children":2458},[2459],{"text":2460,"type":19},"### 2. Movie search app",{"type":15,"children":2462},[2463],{"text":2436,"type":19},{"type":15,"children":2465},[2466],{"text":2467,"type":19},"* API calls",{"type":15,"children":2469},[2470],{"text":2471,"type":19},"* search",{"type":15,"children":2473},[2474],{"text":2475,"type":19},"* filtering",{"type":15,"children":2477},[2478],{"text":2479,"type":19},"* loading states",{"type":15,"children":2481},[2482],{"text":2483,"type":19},"* endpoints",{"type":15,"children":2485},[2486],{"text":51,"type":19},{"type":15,"children":2488},[2489],{"text":2490,"type":19},"### 3. Notes app",{"type":15,"children":2492},[2493],{"text":2436,"type":19},{"type":15,"children":2495},[2496],{"text":82,"type":19},{"type":15,"children":2498},[2499],{"text":2500,"type":19},"* state",{"type":15,"children":2502},[2503],{"text":2504,"type":19},"* CRUD thinking",{"type":15,"children":2506},[2507],{"text":2508,"type":19},"* layout organization",{"type":15,"children":2510},[2511],{"text":51,"type":19},{"type":15,"children":2513},[2514],{"text":2515,"type":19},"### 4. Small dashboard",{"type":15,"children":2517},[2518],{"text":2436,"type":19},{"type":15,"children":2520},[2521],{"text":2522,"type":19},"* nested layouts",{"type":15,"children":2524},[2525],{"text":2526,"type":19},"* shared UI",{"type":15,"children":2528},[2529],{"text":2530,"type":19},"* route organization",{"type":15,"children":2532},[2533],{"text":2534,"type":19},"* internal endpoints",{"type":15,"children":2536},[2537],{"text":51,"type":19},{"type":15,"children":2539},[2540],{"text":2541,"type":19},"## My honest recommendation",{"type":15,"children":2543},[2544],{"text":2545,"type":19},"For a real beginner:",{"type":15,"children":2547},[2548],{"text":2549,"type":19},"* **blog** if they want web fundamentals",{"type":15,"children":2551},[2552],{"text":2553,"type":19},"* **movie app** if they want interactivity and API practice",{"type":15,"children":2555},[2556],{"text":51,"type":19},{"type":15,"children":2558},[2559],{"text":2560,"type":19},"Both teach a lot without becoming a monster.",{"type":15,"children":2562},[2563],{"text":51,"type":19},{"type":15,"children":2565},[2566],{"text":2567,"type":19},"# 18) Beginner mistakes to avoid",{"type":15,"children":2569},[2570],{"text":2571,"type":19},"These matter more than people admit.",{"type":15,"children":2573},[2574],{"text":51,"type":19},{"type":15,"children":2576},[2577],{"text":2578,"type":19},"## Mistake 1",{"type":15,"children":2580},[2581],{"text":2582,"type":19},"Learning Svelte syntax without learning project structure.",{"type":15,"children":2584},[2585],{"text":51,"type":19},{"type":15,"children":2587},[2588],{"text":2589,"type":19},"## Mistake 2",{"type":15,"children":2591},[2592],{"text":2593,"type":19},"Using global state too early.",{"type":15,"children":2595},[2596],{"text":51,"type":19},{"type":15,"children":2598},[2599],{"text":2600,"type":19},"## Mistake 3",{"type":15,"children":2602},[2603],{"text":2604,"type":19},"Putting all fetching directly in components.",{"type":15,"children":2606},[2607],{"text":51,"type":19},{"type":15,"children":2609},[2610],{"text":2611,"type":19},"## Mistake 4",{"type":15,"children":2613},[2614],{"text":2615,"type":19},"Skipping forms because `fetch` feels cooler.",{"type":15,"children":2617},[2618],{"text":51,"type":19},{"type":15,"children":2620},[2621],{"text":2622,"type":19},"## Mistake 5",{"type":15,"children":2624},[2625],{"text":2626,"type":19},"Ignoring layouts and repeating UI.",{"type":15,"children":2628},[2629],{"text":51,"type":19},{"type":15,"children":2631},[2632],{"text":2633,"type":19},"## Mistake 6",{"type":15,"children":2635},[2636],{"text":2637,"type":19},"Not understanding server vs client thinking.",{"type":15,"children":2639},[2640],{"text":51,"type":19},{"type":15,"children":2642},[2643],{"text":2644,"type":19},"## Mistake 7",{"type":15,"children":2646},[2647],{"text":2648,"type":19},"Deploying without building locally first.",{"type":15,"children":2650},[2651],{"text":51,"type":19},{"type":15,"children":2653},[2654],{"text":2655,"type":19},"## Mistake 8",{"type":15,"children":2657},[2658],{"text":2659,"type":19},"Trying auth, database, animations, and design system all in week one.",{"type":15,"children":2661},[2662],{"text":2663,"type":19},"That last one is how beginners accidentally turn learning into self-sabotage.",{"type":15,"children":2665},[2666],{"text":51,"type":19},{"type":15,"children":2668},[2669],{"text":2670,"type":19},"# 19) Recommended weekly learning plan",{"type":15,"children":2672},[2673],{"text":2674,"type":19},"## Week 1",{"type":15,"children":2676},[2677],{"text":2678,"type":19},"Learn:",{"type":15,"children":2680},[2681],{"text":2682,"type":19},"* project setup",{"type":15,"children":2684},[2685],{"text":2686,"type":19},"* file structure",{"type":15,"children":2688},[2689],{"text":2690,"type":19},"* basic Svelte syntax",{"type":15,"children":2692},[2693],{"text":2694,"type":19},"* reactive state",{"type":15,"children":2696},[2697],{"text":529,"type":19},{"type":15,"children":2699},[2700],{"text":2701,"type":19},"* conditionals",{"type":15,"children":2703},[2704],{"text":2705,"type":19},"* loops",{"type":15,"children":2707},[2708],{"text":51,"type":19},{"type":15,"children":2710},[2711],{"text":2712,"type":19},"Build:",{"type":15,"children":2714},[2715],{"text":2716,"type":19},"* counter",{"type":15,"children":2718},[2719],{"text":2720,"type":19},"* profile card",{"type":15,"children":2722},[2723],{"text":2724,"type":19},"* search input",{"type":15,"children":2726},[2727],{"text":2728,"type":19},"* small reusable button/card components",{"type":15,"children":2730},[2731],{"text":51,"type":19},{"type":15,"children":2733},[2734],{"text":2735,"type":19},"## Week 2",{"type":15,"children":2737},[2738],{"text":2678,"type":19},{"type":15,"children":2740},[2741],{"text":513,"type":19},{"type":15,"children":2743},[2744],{"text":2745,"type":19},"* composition",{"type":15,"children":2747},[2748],{"text":70,"type":19},{"type":15,"children":2750},[2751],{"text":2752,"type":19},"* routing",{"type":15,"children":2754},[2755],{"text":74,"type":19},{"type":15,"children":2757},[2758],{"text":51,"type":19},{"type":15,"children":2760},[2761],{"text":2712,"type":19},{"type":15,"children":2763},[2764],{"text":1140,"type":19},{"type":15,"children":2766},[2767],{"text":1144,"type":19},{"type":15,"children":2769},[2770],{"text":2771,"type":19},"* blog page",{"type":15,"children":2773},[2774],{"text":1152,"type":19},{"type":15,"children":2776},[2777],{"text":51,"type":19},{"type":15,"children":2779},[2780],{"text":2781,"type":19},"## Week 3",{"type":15,"children":2783},[2784],{"text":2678,"type":19},{"type":15,"children":2786},[2787],{"text":2788,"type":19},"* `load`",{"type":15,"children":2790},[2791],{"text":2792,"type":19},"* server vs page loading",{"type":15,"children":2794},[2795],{"text":2796,"type":19},"* endpoints with `+server.js`",{"type":15,"children":2798},[2799],{"text":2800,"type":19},"* forms and actions",{"type":15,"children":2802},[2803],{"text":51,"type":19},{"type":15,"children":2805},[2806],{"text":2712,"type":19},{"type":15,"children":2808},[2809],{"text":2810,"type":19},"* posts list from endpoint",{"type":15,"children":2812},[2813],{"text":2814,"type":19},"* single post page",{"type":15,"children":2816},[2817],{"text":2818,"type":19},"* contact form",{"type":15,"children":2820},[2821],{"text":2822,"type":19},"* newsletter form",{"type":15,"children":2824},[2825],{"text":51,"type":19},{"type":15,"children":2827},[2828],{"text":2829,"type":19},"## Week 4",{"type":15,"children":2831},[2832],{"text":2678,"type":19},{"type":15,"children":2834},[2835],{"text":2836,"type":19},"* state management",{"type":15,"children":2838},[2839],{"text":2840,"type":19},"* URL-based filters",{"type":15,"children":2842},[2843],{"text":2450,"type":19},{"type":15,"children":2845},[2846],{"text":2847,"type":19},"* better project organization",{"type":15,"children":2849},[2850],{"text":2851,"type":19},"* basic responsive styling",{"type":15,"children":2853},[2854],{"text":51,"type":19},{"type":15,"children":2856},[2857],{"text":2712,"type":19},{"type":15,"children":2859},[2860],{"text":2861,"type":19},"* search page",{"type":15,"children":2863},[2864],{"text":2865,"type":19},"* filterable list",{"type":15,"children":2867},[2868],{"text":2869,"type":19},"* proper layout shell",{"type":15,"children":2871},[2872],{"text":51,"type":19},{"type":15,"children":2874},[2875],{"text":2876,"type":19},"## Week 5",{"type":15,"children":2878},[2879],{"text":2678,"type":19},{"type":15,"children":2881},[2882],{"text":2883,"type":19},"* adapters",{"type":15,"children":2885},[2886],{"text":2887,"type":19},"* build and preview",{"type":15,"children":2889},[2890],{"text":2891,"type":19},"* deployment setup",{"type":15,"children":2893},[2894],{"text":2895,"type":19},"* production checks",{"type":15,"children":2897},[2898],{"text":51,"type":19},{"type":15,"children":2900},[2901],{"text":2712,"type":19},{"type":15,"children":2903},[2904],{"text":2905,"type":19},"* final polished project",{"type":15,"children":2907},[2908],{"text":2909,"type":19},"* deploy it",{"type":15,"children":2911},[2912],{"text":51,"type":19},{"type":15,"children":2914},[2915],{"text":2916,"type":19},"A fast beginner could do this in **4 to 6 weeks**.",{"type":15,"children":2918},[2919],{"text":2920,"type":19},"A more careful beginner might take **6 to 8 weeks**.",{"type":15,"children":2922},[2923],{"text":2924,"type":19},"Both are valid.",{"type":15,"children":2926},[2927],{"text":51,"type":19},{"type":15,"children":2929},[2930],{"text":2931,"type":19},"# 20) Final learning order",{"type":15,"children":2933},[2934],{"text":2935,"type":19},"This is the order I would recommend without hesitation:",{"type":15,"children":2937},[2938],{"text":51,"type":19},{"type":15,"children":2940},[2941],{"text":2942,"type":19},"1. Understand Svelte vs SvelteKit",{"type":15,"children":2944},[2945],{"text":2946,"type":19},"2. Create a project",{"type":15,"children":2948},[2949],{"text":2950,"type":19},"3. Learn basic Svelte syntax",{"type":15,"children":2952},[2953],{"text":2954,"type":19},"4. Learn reactive state, props, and bindings",{"type":15,"children":2956},[2957],{"text":2958,"type":19},"5. Build tiny reusable components",{"type":15,"children":2960},[2961],{"text":2962,"type":19},"6. Learn routing",{"type":15,"children":2964},[2965],{"text":2966,"type":19},"7. Learn layouts",{"type":15,"children":2968},[2969],{"text":2970,"type":19},"8. Learn data loading",{"type":15,"children":2972},[2973],{"text":2974,"type":19},"9. Learn form actions",{"type":15,"children":2976},[2977],{"text":2978,"type":19},"10. Learn endpoints",{"type":15,"children":2980},[2981],{"text":2982,"type":19},"11. Learn state management",{"type":15,"children":2984},[2985],{"text":2986,"type":19},"12. Learn page options and rendering modes",{"type":15,"children":2988},[2989],{"text":2990,"type":19},"13. Learn SEO",{"type":15,"children":2992},[2993],{"text":2994,"type":19},"14. Organize files properly",{"type":15,"children":2996},[2997],{"text":2998,"type":19},"15. Build one real app",{"type":15,"children":3000},[3001],{"text":3002,"type":19},"16. Build and deploy it",{"type":15,"children":3004},[3005],{"text":51,"type":19},{"type":15,"children":3007},[3008],{"text":3009,"type":19},"That order has bones.",{"type":15,"children":3011},[3012],{"text":3013,"type":19},"It will carry weight.",{"type":15,"children":3015},[3016],{"text":51,"type":19},{"type":15,"children":3018},[3019],{"text":3020,"type":19},"# 21) Final advice for a beginner",{"type":15,"children":3022},[3023],{"text":3024,"type":19},"A beginner should not try to become “advanced” immediately.",{"type":15,"children":3026},[3027],{"text":51,"type":19},{"type":15,"children":3029},[3030],{"text":3031,"type":19},"The right first goal is:",{"type":15,"children":3033},[3034],{"text":3035,"type":19},"* understand the pieces",{"type":15,"children":3037},[3038],{"text":3039,"type":19},"* build a small app",{"type":15,"children":3041},[3042],{"text":3043,"type":19},"* finish it",{"type":15,"children":3045},[3046],{"text":2909,"type":19},{"type":15,"children":3048},[3049],{"text":3050,"type":19},"* then level up",{"type":15,"children":3052},[3053],{"text":51,"type":19},{"type":15,"children":3055},[3056],{"text":3057,"type":19},"That old path still works because it is honest.",{"type":15,"children":3059},[3060],{"text":51,"type":19},{"type":15,"children":3062},[3063],{"text":3064,"type":19},"Learn the craft in order.",{"type":15,"children":3066},[3067],{"text":3068,"type":19},"Do not chase shiny complexity before you can walk.",{"type":15,"children":3070},[3071],{"text":51,"type":19},{"type":15,"children":3073},[3074],{"text":3075,"type":19},"# Official links",{"type":15,"children":3077},[3078],{"text":3079,"type":19},"* Svelte getting started: ([Svelte][1])",{"type":15,"children":3081},[3082],{"text":3083,"type":19},"* SvelteKit project structure: ([Svelte][2])",{"type":15,"children":3085},[3086],{"text":3087,"type":19},"* SvelteKit routing: ([Svelte][3])",{"type":15,"children":3089},[3090],{"text":3091,"type":19},"* SvelteKit form actions: ([Svelte][8])",{"type":15,"children":3093},[3094],{"text":3095,"type":19},"* SvelteKit state management: ([Svelte][9])",{"type":15,"children":3097},[3098],{"text":3099,"type":19},"* SvelteKit page options: ([Svelte][13])",{"type":15,"children":3101},[3102],{"text":3103,"type":19},"* SvelteKit SEO: ([Svelte][11])",{"type":15,"children":3105},[3106],{"text":3107,"type":19},"* SvelteKit adapter-static: ([Svelte][12])",{"type":15,"children":3109},[3110],{"text":3111,"type":19},"* Svelte `$state`: ([Svelte][4])",{"type":15,"children":3113},[3114],{"text":3115,"type":19},"* Svelte `$props`: ([Svelte][5])",{"type":15,"children":3117},[3118],{"text":3119,"type":19},"* Svelte `bind:`: ([Svelte][6])",{"type":15,"children":3121},[3122],{"text":3123,"type":19},"* Svelte best practices: ([Svelte][7])\n",{"type":15,"children":3125},[3126],{"text":3127,"type":19},"## FAQ",{"type":15,"children":3129},[3130],{"text":3131,"type":19},"### Is Svelte good for beginners?",{"type":15,"children":3133},[3134],{"text":3135,"type":19},"Yes. Svelte is often beginner-friendly because its component syntax feels close to HTML, CSS, and JavaScript, so it usually feels less heavy at the start than some other frontend frameworks.",{"type":15,"children":3137},[3138],{"text":51,"type":19},{"type":15,"children":3140},[3141],{"text":3142,"type":19},"### Should I learn Svelte before SvelteKit?",{"type":15,"children":3144},[3145],{"text":3146,"type":19},"Yes. A beginner should learn basic Svelte first, especially components, props, reactivity, events, bindings, and conditional rendering. After that, SvelteKit makes much more sense.",{"type":15,"children":3148},[3149],{"text":51,"type":19},{"type":15,"children":3151},[3152],{"text":3153,"type":19},"### What is the difference between Svelte and SvelteKit?",{"type":15,"children":3155},[3156],{"text":3157,"type":19},"Svelte is the UI framework for building components. SvelteKit is the full application framework that adds routing, layouts, data loading, forms, endpoints, rendering strategies, and deployment support.",{"type":15,"children":3159},[3160],{"text":51,"type":19},{"type":15,"children":3162},[3163],{"text":3164,"type":19},"### Is SvelteKit only for large projects?",{"type":15,"children":3166},[3167],{"text":3168,"type":19},"No. SvelteKit works well for small and medium projects too. It can be used for blogs, portfolio sites, dashboards, apps, and more. It is not just for giant enterprise monsters.",{"type":15,"children":3170},[3171],{"text":51,"type":19},{"type":15,"children":3173},[3174],{"text":3175,"type":19},"### Do I need to know JavaScript before learning Svelte?",{"type":15,"children":3177},[3178],{"text":3179,"type":19},"Yes. At least the basics. A beginner should know variables, functions, arrays, objects, conditionals, loops, DOM basics, and async fundamentals before going deep into Svelte or SvelteKit.",{"type":15,"children":3181},[3182],{"text":51,"type":19},{"type":15,"children":3184},[3185],{"text":3186,"type":19},"### Should I learn stores at the beginning?",{"type":15,"children":3188},[3189],{"text":3190,"type":19},"No. A beginner should start with local component state first. Stores should come later, once the need for shared state becomes clear.",{"type":15,"children":3192},[3193],{"text":51,"type":19},{"type":15,"children":3195},[3196],{"text":3197,"type":19},"### Do I need SvelteKit if I only want to build pages?",{"type":15,"children":3199},[3200],{"text":3201,"type":19},"Usually yes, especially if you want routing, layouts, SEO-friendly pages, data loading, or deployment structure. Svelte alone is great for components, but SvelteKit is usually the better path for full apps and real websites.",{"type":15,"children":3203},[3204],{"text":51,"type":19},{"type":15,"children":3206},[3207],{"text":3208,"type":19},"### Is SvelteKit good for blogs and content sites?",{"type":15,"children":3210},[3211],{"text":3212,"type":19},"Yes. It is a strong fit for blogs, documentation sites, landing pages, and other content-driven websites because it supports structured routing, layouts, and rendering options.",{"type":15,"children":3214},[3215],{"text":51,"type":19},{"type":15,"children":3217},[3218],{"text":3219,"type":19},"### When should I learn form actions?",{"type":15,"children":3221},[3222],{"text":3223,"type":19},"After learning routing and basic page structure. Form actions make more sense once a beginner understands how pages and server-side logic connect.",{"type":15,"children":3225},[3226],{"text":51,"type":19},{"type":15,"children":3228},[3229],{"text":3230,"type":19},"### Should I learn endpoints in SvelteKit as a beginner?",{"type":15,"children":3232},[3233],{"text":3234,"type":19},"Yes, but after learning the basics. A beginner should first understand pages, routing, and loading. Then endpoints become much easier to understand.",{"type":15,"children":3236},[3237],{"text":51,"type":19},{"type":15,"children":3239},[3240],{"text":3241,"type":19},"### Is SvelteKit good for deployment?",{"type":15,"children":3243},[3244],{"text":3245,"type":19},"Yes. It is designed to support different deployment targets through adapters, which is one of the reasons it feels so production-ready.",{"type":15,"children":3247},[3248],{"text":51,"type":19},{"type":15,"children":3250},[3251],{"text":3252,"type":19},"### What should I build first with SvelteKit?",{"type":15,"children":3254},[3255],{"text":3256,"type":19},"A blog, movie search app, or small dashboard. Those are clean beginner projects that teach routing, layouts, data loading, forms, and reusable components without turning into a circus.",{"type":15,"children":3258},[3259],{"text":51,"type":19},{"type":15,"children":3261},[3262],{"text":3263,"type":19},"### How long does it take to learn Svelte and SvelteKit?",{"type":15,"children":3265},[3266],{"text":3267,"type":19},"A realistic beginner timeline is around **4 to 6 weeks** with steady practice. A more relaxed pace can take **6 to 8 weeks**, especially if the beginner builds a full project carefully.",{"type":15,"children":3269},[3270],{"text":51,"type":19},{"type":15,"children":3272},[3273],{"text":3274,"type":19},"### Should I learn SvelteKit before React or Vue?",{"type":15,"children":3276},[3277],{"text":3278,"type":19},"That depends on your goal, but yes, SvelteKit is absolutely a valid first modern framework path. It teaches strong fundamentals without drowning the beginner in too much ceremony.",{"type":15,"children":3280},[3281],{"text":51,"type":19},{"type":15,"children":3283},[3284],{"text":3285,"type":19},"### What should I learn after this roadmap?",{"type":15,"children":3287},[3288],{"text":3289,"type":19},"After this roadmap, the next strong steps are:",{"type":15,"children":3291},[3292],{"text":3293,"type":19},"* authentication",{"type":15,"children":3295},[3296],{"text":3297,"type":19},"* databases",{"type":15,"children":3299},[3300],{"text":3301,"type":19},"* Prisma or Drizzle",{"type":15,"children":3303},[3304],{"text":3305,"type":19},"* testing",{"type":15,"children":3307},[3308],{"text":3309,"type":19},"* animations",{"type":15,"children":3311},[3312],{"text":3313,"type":19},"* advanced state patterns",{"type":15,"children":3315},[3316],{"text":3317,"type":19},"* deployment strategies",{"type":15,"children":3319},[3320],{"text":3321,"type":19},"* a component library approach",{"type":15,"children":3323},[3324],{"text":51,"type":19},{"type":15,"children":3326},[3327],{"text":3328,"type":19},"[1]: https://svelte.dev/docs/kit/creating-a-project \"Creating a project • SvelteKit Docs\"",{"type":15,"children":3330},[3331],{"text":3332,"type":19},"[2]: https://svelte.dev/docs/kit/project-structure \"Project structure • SvelteKit Docs\"",{"type":15,"children":3334},[3335],{"text":3336,"type":19},"[3]: https://svelte.dev/docs/kit/routing \"Routing • SvelteKit Docs\"",{"type":15,"children":3338},[3339],{"text":3340,"type":19},"[4]: https://svelte.dev/docs/svelte/%24state \"$state • Svelte Docs\"",{"type":15,"children":3342},[3343],{"text":3344,"type":19},"[5]: https://svelte.dev/docs/svelte/%24props \"$props • Svelte Docs\"",{"type":15,"children":3346},[3347],{"text":3348,"type":19},"[6]: https://svelte.dev/docs/svelte/bind \"bind: • Svelte Docs\"",{"type":15,"children":3350},[3351],{"text":3352,"type":19},"[7]: https://svelte.dev/docs/svelte/best-practices \"Best practices • Svelte Docs\"",{"type":15,"children":3354},[3355],{"text":3356,"type":19},"[8]: https://svelte.dev/docs/kit/form-actions \"Form actions • SvelteKit Docs\"",{"type":15,"children":3358},[3359],{"text":3360,"type":19},"[9]: https://svelte.dev/docs/kit/state-management \"State management • SvelteKit Docs\"",{"type":15,"children":3362},[3363],{"text":3364,"type":19},"[10]: https://svelte.dev/docs/kit/project-types \"Project types • SvelteKit Docs\"",{"type":15,"children":3366},[3367],{"text":3368,"type":19},"[11]: https://svelte.dev/docs/kit/seo \"SEO • SvelteKit Docs\"",{"type":15,"children":3370},[3371],{"text":3372,"type":19},"[12]: https://svelte.dev/docs/kit/adapter-static \"Static site generation • SvelteKit Docs\"",{"type":15,"children":3374},[3375],{"text":3376,"type":19},"[13]: https://svelte.dev/docs/kit/page-options \"Page options • SvelteKit Docs\"","2026-03-14T18:31:28.265Z","2026-03-14T18:31:28.453Z",{"id":3380,"documentId":3381,"name":3382,"alternativeText":3383,"caption":3383,"focalPoint":3383,"width":3384,"height":3385,"formats":3386,"hash":3420,"ext":3388,"mime":3391,"size":3421,"url":3422,"previewUrl":3383,"provider":3423,"provider_metadata":3383,"createdAt":3424,"updatedAt":3424,"publishedAt":3425},14,"hygvek4xypwmw23vhljpmjfw","learn-svelte-from-scratch.png",null,1536,1024,{"large":3387,"small":3397,"medium":3405,"thumbnail":3412},{"ext":3388,"url":3389,"hash":3390,"mime":3391,"name":3392,"path":3383,"size":3393,"width":3394,"height":3395,"sizeInBytes":3396},".png","https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_learn_svelte_from_scratch_44c35a4f2d.png","large_learn_svelte_from_scratch_44c35a4f2d","image/png","large_learn-svelte-from-scratch.png",1196.88,1000,667,1196882,{"ext":3388,"url":3398,"hash":3399,"mime":3391,"name":3400,"path":3383,"size":3401,"width":3402,"height":3403,"sizeInBytes":3404},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_learn_svelte_from_scratch_44c35a4f2d.png","small_learn_svelte_from_scratch_44c35a4f2d","small_learn-svelte-from-scratch.png",329.35,500,333,329353,{"ext":3388,"url":3406,"hash":3407,"mime":3391,"name":3408,"path":3383,"size":3409,"width":3410,"height":3402,"sizeInBytes":3411},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_learn_svelte_from_scratch_44c35a4f2d.png","medium_learn_svelte_from_scratch_44c35a4f2d","medium_learn-svelte-from-scratch.png",699.4,750,699404,{"ext":3388,"url":3413,"hash":3414,"mime":3391,"name":3415,"path":3383,"size":3416,"width":3417,"height":3418,"sizeInBytes":3419},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_learn_svelte_from_scratch_44c35a4f2d.png","thumbnail_learn_svelte_from_scratch_44c35a4f2d","thumbnail_learn-svelte-from-scratch.png",80.96,234,156,80961,"learn_svelte_from_scratch_44c35a4f2d",666.46,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/learn_svelte_from_scratch_44c35a4f2d.png","strapi-provider-upload-strapi-cloud","2026-03-14T18:31:08.121Z","2026-03-14T18:31:08.122Z",{"id":3427,"documentId":3428,"name":3429,"slug":3430,"bio":3431,"createdAt":3432,"updatedAt":3432,"publishedAt":3433},1,"v47xc4w0scmvr4q884stes9o","Jose Henriquez","author","Desarrollador de software y estudiante de Ingeniería en Sistemas, apasionado por la tecnología, la creación de soluciones digitales y la construcción de proyectos con impacto real. Se caracteriza por ser una persona autodidacta, creativa y enfocada en convertir ideas en resultados concretos.","2026-03-08T18:07:58.711Z","2026-03-08T18:07:58.660Z",[3435,3482,3533],{"id":3436,"documentId":3437,"title":3438,"slug":3439,"excerpt":3440,"difficulty":11,"estimatedCost":3441,"seoTitle":3442,"seoDescription":3443,"createdAt":3444,"updatedAt":3445,"publishedAt":3446,"maturity":3447,"coverImage":3448},9,"yxti6jbq6ufd0biu3fx6ffpw","Astro with Content Collections  + Tailwind 4 + shadcn","astro-tailwind-css-v4-shadcn-ui-content-collections","A modern portfolio stack for developers, designers, and creators who want a fast personal website, polished project showcases, reusable UI components, and structured content without relying on a full CMS.","Astro free, Tailwind CSS free, shadcn/ui free, Content Collections built into Astro workflows, hosting low depending on provider.","Astro + Tailwind CSS v4 + shadcn/ui + Content Collections Stack Guide for Modern Portfolios","Learn when to use Astro with Tailwind CSS v4, shadcn/ui, and Content Collections for personal portfolios, developer websites, project showcases, and technical blogs.","2026-03-10T02:11:55.871Z","2026-03-10T02:31:48.345Z","2026-03-10T02:31:48.749Z","stable",{"id":3449,"documentId":3450,"name":3451,"alternativeText":3383,"caption":3383,"focalPoint":3383,"width":3384,"height":3385,"formats":3452,"hash":3477,"ext":3388,"mime":3391,"size":3478,"url":3479,"previewUrl":3383,"provider":3423,"provider_metadata":3383,"createdAt":3480,"updatedAt":3480,"publishedAt":3481},5,"mekbtcfjrui3pj6ixju8k812","astro-content-collection-portfolio-development.png",{"large":3453,"small":3459,"medium":3465,"thumbnail":3471},{"ext":3388,"url":3454,"hash":3455,"mime":3391,"name":3456,"path":3383,"size":3457,"width":3394,"height":3395,"sizeInBytes":3458},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_astro_content_collection_portfolio_development_e57d75f3ad.png","large_astro_content_collection_portfolio_development_e57d75f3ad","large_astro-content-collection-portfolio-development.png",435.15,435147,{"ext":3388,"url":3460,"hash":3461,"mime":3391,"name":3462,"path":3383,"size":3463,"width":3402,"height":3403,"sizeInBytes":3464},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_astro_content_collection_portfolio_development_e57d75f3ad.png","small_astro_content_collection_portfolio_development_e57d75f3ad","small_astro-content-collection-portfolio-development.png",111.67,111674,{"ext":3388,"url":3466,"hash":3467,"mime":3391,"name":3468,"path":3383,"size":3469,"width":3410,"height":3402,"sizeInBytes":3470},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_astro_content_collection_portfolio_development_e57d75f3ad.png","medium_astro_content_collection_portfolio_development_e57d75f3ad","medium_astro-content-collection-portfolio-development.png",241.38,241381,{"ext":3388,"url":3472,"hash":3473,"mime":3391,"name":3474,"path":3383,"size":3475,"width":3417,"height":3418,"sizeInBytes":3476},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_astro_content_collection_portfolio_development_e57d75f3ad.png","thumbnail_astro_content_collection_portfolio_development_e57d75f3ad","thumbnail_astro-content-collection-portfolio-development.png",30.25,30250,"astro_content_collection_portfolio_development_e57d75f3ad",239.93,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/astro_content_collection_portfolio_development_e57d75f3ad.png","2026-03-10T02:29:59.242Z","2026-03-10T02:29:59.247Z",{"id":3483,"documentId":3484,"title":3485,"slug":3486,"excerpt":3487,"difficulty":11,"estimatedCost":3488,"seoTitle":3489,"seoDescription":3490,"createdAt":3491,"updatedAt":3491,"publishedAt":3492,"maturity":3447,"coverImage":3493},11,"mtna95wmkqzsahxvrwl7rc1r","Astro + Tailwind CSS for Modern Landing Pages","astro-tailwind-css-for-modern-landing-pages","A beginner-friendly stack for building fast, modern, and visually polished landing pages with strong performance and clean frontend architecture.","Astro: Free, Tailwind CSS: Free, Hosting: Low or free to start, depending on provider  Optional extras: domain, analytics, forms, email services","Astro + Tailwind CSS Stack Guide for Modern Landing Pages","Learn when to use Astro with Tailwind CSS for landing pages, product websites, startup pages, personal brands, and modern marketing sites.","2026-03-10T03:06:06.022Z","2026-03-10T03:06:06.300Z",{"id":3494,"documentId":3495,"name":3496,"alternativeText":3383,"caption":3383,"focalPoint":3383,"width":3497,"height":3498,"formats":3499,"hash":3529,"ext":3388,"mime":3391,"size":3530,"url":3531,"previewUrl":3383,"provider":3423,"provider_metadata":3383,"createdAt":3532,"updatedAt":3532,"publishedAt":3532},6,"ap2d2wcmasourkoh3f5l0wyi","cover-astro-tailwind-css-modern-landing-pages.png",1857,949,{"large":3500,"small":3507,"medium":3514,"thumbnail":3521},{"ext":3388,"url":3501,"hash":3502,"mime":3391,"name":3503,"path":3383,"size":3504,"width":3394,"height":3505,"sizeInBytes":3506},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","large_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","large_cover-astro-tailwind-css-modern-landing-pages.png",578.15,511,578145,{"ext":3388,"url":3508,"hash":3509,"mime":3391,"name":3510,"path":3383,"size":3511,"width":3402,"height":3512,"sizeInBytes":3513},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","small_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","small_cover-astro-tailwind-css-modern-landing-pages.png",134.93,256,134925,{"ext":3388,"url":3515,"hash":3516,"mime":3391,"name":3517,"path":3383,"size":3518,"width":3410,"height":3519,"sizeInBytes":3520},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","medium_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","medium_cover-astro-tailwind-css-modern-landing-pages.png",304.81,383,304810,{"ext":3388,"url":3522,"hash":3523,"mime":3391,"name":3524,"path":3383,"size":3525,"width":3526,"height":3527,"sizeInBytes":3528},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","thumbnail_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","thumbnail_cover-astro-tailwind-css-modern-landing-pages.png",43.63,245,125,43634,"cover_astro_tailwind_css_modern_landing_pages_23162e0a23",336.08,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","2026-03-10T03:05:54.962Z",{"id":3380,"documentId":3534,"title":3535,"slug":3536,"excerpt":3537,"difficulty":11,"estimatedCost":3538,"seoTitle":3539,"seoDescription":3540,"createdAt":3541,"updatedAt":3542,"publishedAt":3543,"maturity":3447,"coverImage":3544},"gkvptj1l6vok4xuii8vkj6qe","SvelteKit + Tailwind CSS for Modern Landing Pages","sveltekit-tailwind-css-for-modern-landing-pages","A flexible landing page stack for developers and startups who want modern design, strong performance, and room to grow into a more interactive web experience.","SvelteKit: Free, Tailwind CSS: Free, Hosting: Low or free to start, depending on provider, Optional extras: domain, analytics, forms, email services","SvelteKit + Tailwind CSS Stack Guide for Modern Landing Pages","Learn when to use SvelteKit with Tailwind CSS for landing pages, startup websites, marketing pages, and modern public-facing web experiences.","2026-03-10T03:32:55.146Z","2026-03-10T15:16:43.064Z","2026-03-10T15:16:43.505Z",{"id":3545,"documentId":3546,"name":3547,"alternativeText":3383,"caption":3383,"focalPoint":3383,"width":3384,"height":3385,"formats":3548,"hash":3573,"ext":3388,"mime":3391,"size":3574,"url":3575,"previewUrl":3383,"provider":3423,"provider_metadata":3383,"createdAt":3576,"updatedAt":3576,"publishedAt":3576},7,"dilgak8bwsjs0yty173tnbg9","svelkit-tailwindcss-landing-page.png",{"large":3549,"small":3555,"medium":3561,"thumbnail":3567},{"ext":3388,"url":3550,"hash":3551,"mime":3391,"name":3552,"path":3383,"size":3553,"width":3394,"height":3395,"sizeInBytes":3554},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_svelkit_tailwindcss_landing_page_232000d71f.png","large_svelkit_tailwindcss_landing_page_232000d71f","large_svelkit-tailwindcss-landing-page.png",932.81,932811,{"ext":3388,"url":3556,"hash":3557,"mime":3391,"name":3558,"path":3383,"size":3559,"width":3402,"height":3403,"sizeInBytes":3560},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_svelkit_tailwindcss_landing_page_232000d71f.png","small_svelkit_tailwindcss_landing_page_232000d71f","small_svelkit-tailwindcss-landing-page.png",262.08,262076,{"ext":3388,"url":3562,"hash":3563,"mime":3391,"name":3564,"path":3383,"size":3565,"width":3410,"height":3402,"sizeInBytes":3566},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_svelkit_tailwindcss_landing_page_232000d71f.png","medium_svelkit_tailwindcss_landing_page_232000d71f","medium_svelkit-tailwindcss-landing-page.png",546.98,546980,{"ext":3388,"url":3568,"hash":3569,"mime":3391,"name":3570,"path":3383,"size":3571,"width":3417,"height":3418,"sizeInBytes":3572},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_svelkit_tailwindcss_landing_page_232000d71f.png","thumbnail_svelkit_tailwindcss_landing_page_232000d71f","thumbnail_svelkit-tailwindcss-landing-page.png",68.48,68477,"svelkit_tailwindcss_landing_page_232000d71f",540.74,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/svelkit_tailwindcss_landing_page_232000d71f.png","2026-03-10T03:33:11.808Z",{"pagination":3578},{"page":3427,"pageSize":6,"pageCount":3427,"total":3427}]