[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"roadmap-learn-javascript-from-scratch-to-vercel-deployment-es":3},{"data":4,"meta":3501},[5],{"id":6,"documentId":7,"title":8,"slug":9,"excerpt":10,"level":11,"durationEstimate":12,"body":13,"createdAt":3165,"updatedAt":3165,"publishedAt":3166,"coverImage":3167,"author":3213,"relatedStacks":3221},23,"ccwx4l820udcyrl1e42h7l3q","Learn JavaScript from Scratch to Vercel Deployment","learn-javascript-from-scratch-to-vercel-deployment","A complete beginner-friendly roadmap to learn JavaScript from zero, build real browser projects, work with APIs, organize code with modules, use Vite, and deploy a finished app on Vercel.","beginner","5 to 7 weeks",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,107,111,115,118,122,126,130,134,138,142,146,150,153,157,161,165,169,173,177,181,185,189,193,197,201,205,208,212,216,220,224,228,232,236,240,244,248,252,255,259,263,267,271,275,279,282,286,290,294,297,301,305,309,313,317,321,325,328,331,335,339,343,347,351,354,357,361,364,368,371,375,379,383,387,391,394,397,401,404,408,412,415,418,421,425,428,432,436,439,442,446,449,452,456,460,464,468,472,476,480,483,487,491,494,498,502,505,509,513,517,521,525,529,533,537,540,544,547,551,554,558,562,565,568,572,575,579,583,587,591,595,598,602,606,609,612,616,619,623,626,630,634,637,640,643,647,651,654,658,662,665,669,672,675,679,682,686,690,694,698,702,705,709,713,716,719,723,726,730,734,738,741,744,748,752,755,758,762,765,769,772,776,780,783,786,790,794,798,802,806,810,813,816,820,823,827,831,835,838,841,845,849,853,857,861,865,869,872,876,879,883,887,890,893,897,900,904,907,910,914,917,921,925,928,931,935,938,942,946,950,953,956,960,963,967,970,974,978,981,985,988,991,995,999,1003,1007,1011,1014,1017,1021,1024,1028,1032,1035,1038,1042,1046,1050,1054,1058,1062,1065,1069,1072,1076,1080,1083,1087,1091,1094,1098,1101,1105,1109,1113,1117,1120,1124,1127,1130,1133,1137,1140,1144,1147,1151,1155,1158,1162,1165,1168,1171,1174,1178,1182,1186,1190,1193,1196,1200,1203,1207,1211,1215,1218,1221,1225,1229,1233,1237,1241,1245,1249,1253,1257,1260,1264,1267,1271,1274,1278,1281,1284,1288,1291,1294,1298,1302,1305,1309,1312,1315,1319,1322,1325,1329,1333,1336,1339,1343,1347,1350,1353,1357,1360,1364,1368,1371,1375,1379,1382,1385,1389,1393,1396,1400,1403,1407,1411,1414,1417,1420,1424,1427,1430,1434,1437,1441,1444,1447,1450,1454,1457,1461,1465,1469,1472,1475,1479,1483,1487,1491,1495,1499,1503,1507,1510,1514,1517,1521,1525,1529,1532,1536,1540,1544,1547,1551,1555,1559,1563,1566,1569,1572,1576,1579,1582,1586,1589,1593,1596,1600,1604,1607,1610,1614,1618,1621,1625,1628,1632,1635,1638,1641,1644,1647,1651,1655,1659,1663,1667,1670,1673,1677,1680,1684,1688,1691,1695,1699,1703,1707,1711,1715,1719,1723,1727,1731,1735,1739,1743,1746,1750,1753,1757,1761,1764,1767,1771,1774,1777,1781,1784,1788,1792,1795,1798,1801,1804,1807,1810,1814,1818,1821,1825,1829,1833,1836,1839,1843,1847,1851,1855,1859,1863,1867,1870,1873,1876,1879,1882,1885,1888,1892,1895,1899,1903,1906,1909,1913,1917,1921,1925,1928,1932,1936,1940,1944,1948,1952,1956,1960,1964,1968,1972,1976,1980,1984,1988,1991,1994,1998,2001,2005,2009,2012,2016,2020,2023,2026,2030,2033,2037,2041,2044,2047,2051,2054,2057,2060,2064,2067,2070,2074,2078,2081,2085,2089,2093,2097,2101,2105,2109,2112,2115,2119,2122,2126,2129,2132,2135,2139,2142,2146,2150,2153,2156,2159,2162,2165,2168,2171,2174,2178,2181,2184,2188,2192,2195,2199,2202,2205,2208,2211,2214,2218,2221,2225,2229,2232,2235,2239,2243,2247,2251,2255,2259,2263,2266,2270,2273,2277,2281,2285,2289,2293,2297,2300,2303,2307,2311,2315,2319,2323,2327,2330,2333,2337,2340,2344,2348,2351,2355,2359,2363,2367,2371,2375,2379,2382,2386,2389,2393,2397,2401,2405,2408,2411,2415,2418,2421,2425,2429,2432,2435,2439,2443,2447,2451,2455,2459,2462,2465,2469,2472,2476,2480,2483,2487,2491,2495,2499,2503,2507,2511,2515,2518,2522,2525,2528,2531,2535,2538,2541,2545,2548,2552,2556,2559,2563,2567,2571,2575,2579,2583,2587,2591,2595,2598,2602,2606,2610,2614,2618,2621,2625,2629,2632,2635,2639,2642,2646,2650,2653,2657,2661,2665,2669,2673,2677,2681,2684,2688,2692,2696,2700,2704,2708,2712,2715,2719,2723,2727,2731,2735,2739,2743,2746,2750,2753,2757,2761,2764,2768,2771,2774,2777,2780,2784,2788,2791,2795,2798,2801,2804,2807,2810,2813,2817,2821,2824,2828,2831,2835,2839,2843,2847,2850,2853,2857,2861,2864,2868,2871,2875,2879,2883,2887,2890,2893,2897,2900,2904,2907,2911,2914,2918,2921,2924,2928,2931,2935,2938,2942,2946,2949,2952,2956,2959,2963,2966,2970,2974,2978,2982,2986,2990,2994,2998,3002,3006,3009,3013,3016,3020,3024,3027,3031,3035,3039,3043,3047,3051,3055,3059,3063,3066,3070,3074,3078,3081,3085,3089,3092,3096,3100,3103,3107,3111,3114,3118,3122,3125,3129,3133,3137,3141,3145,3149,3153,3157,3161],{"type":15,"children":16},"paragraph",[17],{"text":18,"type":19},"# Full JavaScript Roadmap for Beginners","text",{"type":15,"children":21},[22],{"text":23,"type":19},"## From Zero to Vercel Deployment",{"type":15,"children":25},[26],{"text":27,"type":19},"## What the beginner will build",{"type":15,"children":29},[30],{"text":31,"type":19},"By the end of this roadmap, the beginner should be able to build and deploy a small real project such as:",{"type":15,"children":33},[34],{"text":35,"type":19},"* a movie search app",{"type":15,"children":37},[38],{"text":39,"type":19},"* a country explorer app",{"type":15,"children":41},[42],{"text":43,"type":19},"* a weather dashboard",{"type":15,"children":45},[46],{"text":47,"type":19},"* a simple notes or task manager",{"type":15,"children":49},[50],{"text":51,"type":19},"",{"type":15,"children":53},[54],{"text":55,"type":19},"The project should include:",{"type":15,"children":57},[58],{"text":59,"type":19},"* HTML structure",{"type":15,"children":61},[62],{"text":63,"type":19},"* CSS styling",{"type":15,"children":65},[66],{"text":67,"type":19},"* JavaScript logic",{"type":15,"children":69},[70],{"text":71,"type":19},"* DOM manipulation",{"type":15,"children":73},[74],{"text":75,"type":19},"* form handling",{"type":15,"children":77},[78],{"text":79,"type":19},"* API requests with `fetch`",{"type":15,"children":81},[82],{"text":83,"type":19},"* loading and error states",{"type":15,"children":85},[86],{"text":87,"type":19},"* modular code",{"type":15,"children":89},[90],{"text":91,"type":19},"* Git and GitHub",{"type":15,"children":93},[94],{"text":95,"type":19},"* deployment with Vercel",{"type":15,"children":97},[98],{"text":99,"type":19},"That is the real line in the sand. Not “I watched ten tutorials.”",{"type":15,"children":101},[102],{"text":103,"type":19},"Actual code. Actual project. Actual deploy.",{"type":15,"children":105},[106],{"text":51,"type":19},{"type":15,"children":108},[109],{"text":110,"type":19},"# 1) Why Learn JavaScript First",{"type":15,"children":112},[113],{"text":114,"type":19},"JavaScript is the language that brings the browser to life. MDN’s JavaScript learning materials position it as a core web technology used to create dynamic and interactive experiences, while their beginner scripting path starts with exactly that foundation. ([MDN Web Docs][2])",{"type":15,"children":116},[117],{"text":51,"type":19},{"type":15,"children":119},[120],{"text":121,"type":19},"A beginner should learn JavaScript first because it teaches:",{"type":15,"children":123},[124],{"text":125,"type":19},"* programming logic",{"type":15,"children":127},[128],{"text":129,"type":19},"* interaction",{"type":15,"children":131},[132],{"text":133,"type":19},"* data handling",{"type":15,"children":135},[136],{"text":137,"type":19},"* browser behavior",{"type":15,"children":139},[140],{"text":141,"type":19},"* async thinking",{"type":15,"children":143},[144],{"text":145,"type":19},"* frontend fundamentals",{"type":15,"children":147},[148],{"text":149,"type":19},"If someone jumps into frameworks without learning JavaScript first, they are basically renting confidence they do not own.",{"type":15,"children":151},[152],{"text":51,"type":19},{"type":15,"children":154},[155],{"text":156,"type":19},"# 2) Learning Phases Overview",{"type":15,"children":158},[159],{"text":160,"type":19},"A beginner should learn JavaScript in this order:",{"type":15,"children":162},[163],{"text":164,"type":19},"1. Language fundamentals",{"type":15,"children":166},[167],{"text":168,"type":19},"2. Arrays and objects",{"type":15,"children":170},[171],{"text":172,"type":19},"3. DOM and events",{"type":15,"children":174},[175],{"text":176,"type":19},"4. Forms and validation",{"type":15,"children":178},[179],{"text":180,"type":19},"5. Modern JavaScript syntax",{"type":15,"children":182},[183],{"text":184,"type":19},"6. Async JavaScript and APIs",{"type":15,"children":186},[187],{"text":188,"type":19},"7. Project structure and modules",{"type":15,"children":190},[191],{"text":192,"type":19},"8. Git and GitHub",{"type":15,"children":194},[195],{"text":196,"type":19},"9. Vite",{"type":15,"children":198},[199],{"text":200,"type":19},"10. Deployment on Vercel",{"type":15,"children":202},[203],{"text":204,"type":19},"This order is sane because each phase builds on the previous one.",{"type":15,"children":206},[207],{"text":51,"type":19},{"type":15,"children":209},[210],{"text":211,"type":19},"# 3) Stage One — JavaScript Fundamentals",{"type":15,"children":213},[214],{"text":215,"type":19},"## What the beginner must learn",{"type":15,"children":217},[218],{"text":219,"type":19},"Start with the core language:",{"type":15,"children":221},[222],{"text":223,"type":19},"* variables",{"type":15,"children":225},[226],{"text":227,"type":19},"* primitive data types",{"type":15,"children":229},[230],{"text":231,"type":19},"* operators",{"type":15,"children":233},[234],{"text":235,"type":19},"* conditionals",{"type":15,"children":237},[238],{"text":239,"type":19},"* loops",{"type":15,"children":241},[242],{"text":243,"type":19},"* functions",{"type":15,"children":245},[246],{"text":247,"type":19},"* scope basics",{"type":15,"children":249},[250],{"text":251,"type":19},"* truthy and falsy values",{"type":15,"children":253},[254],{"text":51,"type":19},{"type":15,"children":256},[257],{"text":258,"type":19},"## Concepts to understand",{"type":15,"children":260},[261],{"text":262,"type":19},"### Variables",{"type":15,"children":264},[265],{"text":266,"type":19},"Learn `let` and `const` first.",{"type":15,"children":268},[269],{"text":270,"type":19},"```js",{"type":15,"children":272},[273],{"text":274,"type":19},"const appName = \"JavaScript Journey\";",{"type":15,"children":276},[277],{"text":278,"type":19},"let currentLesson = 1;",{"type":15,"children":280},[281],{"text":51,"type":19},{"type":15,"children":283},[284],{"text":285,"type":19},"console.log(appName);",{"type":15,"children":287},[288],{"text":289,"type":19},"console.log(currentLesson);",{"type":15,"children":291},[292],{"text":293,"type":19},"```",{"type":15,"children":295},[296],{"text":51,"type":19},{"type":15,"children":298},[299],{"text":300,"type":19},"### Data types",{"type":15,"children":302},[303],{"text":304,"type":19},"A beginner should understand:",{"type":15,"children":306},[307],{"text":308,"type":19},"* string",{"type":15,"children":310},[311],{"text":312,"type":19},"* number",{"type":15,"children":314},[315],{"text":316,"type":19},"* boolean",{"type":15,"children":318},[319],{"text":320,"type":19},"* null",{"type":15,"children":322},[323],{"text":324,"type":19},"* undefined",{"type":15,"children":326},[327],{"text":51,"type":19},{"type":15,"children":329},[330],{"text":270,"type":19},{"type":15,"children":332},[333],{"text":334,"type":19},"const username = \"Alex\";",{"type":15,"children":336},[337],{"text":338,"type":19},"const age = 20;",{"type":15,"children":340},[341],{"text":342,"type":19},"const isStudent = true;",{"type":15,"children":344},[345],{"text":346,"type":19},"const country = null;",{"type":15,"children":348},[349],{"text":350,"type":19},"let favoriteColor;",{"type":15,"children":352},[353],{"text":293,"type":19},{"type":15,"children":355},[356],{"text":51,"type":19},{"type":15,"children":358},[359],{"text":360,"type":19},"### Conditionals",{"type":15,"children":362},[363],{"text":270,"type":19},{"type":15,"children":365},[366],{"text":367,"type":19},"const age = 18;",{"type":15,"children":369},[370],{"text":51,"type":19},{"type":15,"children":372},[373],{"text":374,"type":19},"if (age >= 18) {",{"type":15,"children":376},[377],{"text":378,"type":19},"  console.log(\"You can enter\");",{"type":15,"children":380},[381],{"text":382,"type":19},"} else {",{"type":15,"children":384},[385],{"text":386,"type":19},"  console.log(\"Access denied\");",{"type":15,"children":388},[389],{"text":390,"type":19},"}",{"type":15,"children":392},[393],{"text":293,"type":19},{"type":15,"children":395},[396],{"text":51,"type":19},{"type":15,"children":398},[399],{"text":400,"type":19},"### Loops",{"type":15,"children":402},[403],{"text":270,"type":19},{"type":15,"children":405},[406],{"text":407,"type":19},"for (let i = 1; i \u003C= 5; i++) {",{"type":15,"children":409},[410],{"text":411,"type":19},"  console.log(`Number: ${i}`);",{"type":15,"children":413},[414],{"text":390,"type":19},{"type":15,"children":416},[417],{"text":293,"type":19},{"type":15,"children":419},[420],{"text":51,"type":19},{"type":15,"children":422},[423],{"text":424,"type":19},"### Functions",{"type":15,"children":426},[427],{"text":270,"type":19},{"type":15,"children":429},[430],{"text":431,"type":19},"function greet(name) {",{"type":15,"children":433},[434],{"text":435,"type":19},"  return `Hello, ${name}`;",{"type":15,"children":437},[438],{"text":390,"type":19},{"type":15,"children":440},[441],{"text":51,"type":19},{"type":15,"children":443},[444],{"text":445,"type":19},"console.log(greet(\"Maria\"));",{"type":15,"children":447},[448],{"text":293,"type":19},{"type":15,"children":450},[451],{"text":51,"type":19},{"type":15,"children":453},[454],{"text":455,"type":19},"## Practice exercises",{"type":15,"children":457},[458],{"text":459,"type":19},"A beginner should practice:",{"type":15,"children":461},[462],{"text":463,"type":19},"* check if a number is even or odd",{"type":15,"children":465},[466],{"text":467,"type":19},"* calculate a discount",{"type":15,"children":469},[470],{"text":471,"type":19},"* convert Celsius to Fahrenheit",{"type":15,"children":473},[474],{"text":475,"type":19},"* print numbers from 1 to 100",{"type":15,"children":477},[478],{"text":479,"type":19},"* write a function that returns the largest of two numbers",{"type":15,"children":481},[482],{"text":51,"type":19},{"type":15,"children":484},[485],{"text":486,"type":19},"## Milestone",{"type":15,"children":488},[489],{"text":490,"type":19},"By the end of this stage, the beginner should be able to read and write small logic-based programs without panic.",{"type":15,"children":492},[493],{"text":51,"type":19},{"type":15,"children":495},[496],{"text":497,"type":19},"# 4) Stage Two — Arrays and Objects",{"type":15,"children":499},[500],{"text":501,"type":19},"This is where JavaScript starts feeling useful.",{"type":15,"children":503},[504],{"text":215,"type":19},{"type":15,"children":506},[507],{"text":508,"type":19},"* arrays",{"type":15,"children":510},[511],{"text":512,"type":19},"* objects",{"type":15,"children":514},[515],{"text":516,"type":19},"* accessing values",{"type":15,"children":518},[519],{"text":520,"type":19},"* modifying values",{"type":15,"children":522},[523],{"text":524,"type":19},"* iteration",{"type":15,"children":526},[527],{"text":528,"type":19},"* array methods",{"type":15,"children":530},[531],{"text":532,"type":19},"* nested data",{"type":15,"children":534},[535],{"text":536,"type":19},"MDN’s JavaScript guide and beginner materials treat this as foundational because real applications are built around data structures, not random isolated variables. ([MDN Web Docs][2])",{"type":15,"children":538},[539],{"text":51,"type":19},{"type":15,"children":541},[542],{"text":543,"type":19},"## Arrays",{"type":15,"children":545},[546],{"text":270,"type":19},{"type":15,"children":548},[549],{"text":550,"type":19},"const fruits = [\"apple\", \"banana\", \"orange\"];",{"type":15,"children":552},[553],{"text":51,"type":19},{"type":15,"children":555},[556],{"text":557,"type":19},"console.log(fruits[0]);",{"type":15,"children":559},[560],{"text":561,"type":19},"console.log(fruits.length);",{"type":15,"children":563},[564],{"text":293,"type":19},{"type":15,"children":566},[567],{"text":51,"type":19},{"type":15,"children":569},[570],{"text":571,"type":19},"## Objects",{"type":15,"children":573},[574],{"text":270,"type":19},{"type":15,"children":576},[577],{"text":578,"type":19},"const user = {",{"type":15,"children":580},[581],{"text":582,"type":19},"  name: \"Alex\",",{"type":15,"children":584},[585],{"text":586,"type":19},"  age: 22,",{"type":15,"children":588},[589],{"text":590,"type":19},"  isAdmin: false",{"type":15,"children":592},[593],{"text":594,"type":19},"};",{"type":15,"children":596},[597],{"text":51,"type":19},{"type":15,"children":599},[600],{"text":601,"type":19},"console.log(user.name);",{"type":15,"children":603},[604],{"text":605,"type":19},"console.log(user.age);",{"type":15,"children":607},[608],{"text":293,"type":19},{"type":15,"children":610},[611],{"text":51,"type":19},{"type":15,"children":613},[614],{"text":615,"type":19},"## Loop through arrays",{"type":15,"children":617},[618],{"text":270,"type":19},{"type":15,"children":620},[621],{"text":622,"type":19},"const numbers = [10, 20, 30, 40];",{"type":15,"children":624},[625],{"text":51,"type":19},{"type":15,"children":627},[628],{"text":629,"type":19},"for (const number of numbers) {",{"type":15,"children":631},[632],{"text":633,"type":19},"  console.log(number);",{"type":15,"children":635},[636],{"text":390,"type":19},{"type":15,"children":638},[639],{"text":293,"type":19},{"type":15,"children":641},[642],{"text":51,"type":19},{"type":15,"children":644},[645],{"text":646,"type":19},"## Must-learn array methods",{"type":15,"children":648},[649],{"text":650,"type":19},"### map",{"type":15,"children":652},[653],{"text":270,"type":19},{"type":15,"children":655},[656],{"text":657,"type":19},"const prices = [10, 20, 30];",{"type":15,"children":659},[660],{"text":661,"type":19},"const doubled = prices.map((price) => price * 2);",{"type":15,"children":663},[664],{"text":51,"type":19},{"type":15,"children":666},[667],{"text":668,"type":19},"console.log(doubled);",{"type":15,"children":670},[671],{"text":293,"type":19},{"type":15,"children":673},[674],{"text":51,"type":19},{"type":15,"children":676},[677],{"text":678,"type":19},"### filter",{"type":15,"children":680},[681],{"text":270,"type":19},{"type":15,"children":683},[684],{"text":685,"type":19},"const products = [",{"type":15,"children":687},[688],{"text":689,"type":19},"  { name: \"Keyboard\", price: 50 },",{"type":15,"children":691},[692],{"text":693,"type":19},"  { name: \"Monitor\", price: 200 },",{"type":15,"children":695},[696],{"text":697,"type":19},"  { name: \"Mouse\", price: 25 }",{"type":15,"children":699},[700],{"text":701,"type":19},"];",{"type":15,"children":703},[704],{"text":51,"type":19},{"type":15,"children":706},[707],{"text":708,"type":19},"const cheapProducts = products.filter((product) => product.price \u003C 100);",{"type":15,"children":710},[711],{"text":712,"type":19},"console.log(cheapProducts);",{"type":15,"children":714},[715],{"text":293,"type":19},{"type":15,"children":717},[718],{"text":51,"type":19},{"type":15,"children":720},[721],{"text":722,"type":19},"### find",{"type":15,"children":724},[725],{"text":270,"type":19},{"type":15,"children":727},[728],{"text":729,"type":19},"const users = [",{"type":15,"children":731},[732],{"text":733,"type":19},"  { id: 1, name: \"Ana\" },",{"type":15,"children":735},[736],{"text":737,"type":19},"  { id: 2, name: \"Leo\" }",{"type":15,"children":739},[740],{"text":701,"type":19},{"type":15,"children":742},[743],{"text":51,"type":19},{"type":15,"children":745},[746],{"text":747,"type":19},"const user = users.find((item) => item.id === 2);",{"type":15,"children":749},[750],{"text":751,"type":19},"console.log(user);",{"type":15,"children":753},[754],{"text":293,"type":19},{"type":15,"children":756},[757],{"text":51,"type":19},{"type":15,"children":759},[760],{"text":761,"type":19},"### reduce",{"type":15,"children":763},[764],{"text":270,"type":19},{"type":15,"children":766},[767],{"text":768,"type":19},"const numbers = [1, 2, 3, 4];",{"type":15,"children":770},[771],{"text":51,"type":19},{"type":15,"children":773},[774],{"text":775,"type":19},"const total = numbers.reduce((sum, current) => sum + current, 0);",{"type":15,"children":777},[778],{"text":779,"type":19},"console.log(total);",{"type":15,"children":781},[782],{"text":293,"type":19},{"type":15,"children":784},[785],{"text":51,"type":19},{"type":15,"children":787},[788],{"text":789,"type":19},"## Beginner exercises",{"type":15,"children":791},[792],{"text":793,"type":19},"* filter a list of products by price",{"type":15,"children":795},[796],{"text":797,"type":19},"* find a user by id",{"type":15,"children":799},[800],{"text":801,"type":19},"* sum all numbers in an array",{"type":15,"children":803},[804],{"text":805,"type":19},"* transform names into uppercase",{"type":15,"children":807},[808],{"text":809,"type":19},"* count how many completed tasks exist",{"type":15,"children":811},[812],{"text":51,"type":19},{"type":15,"children":814},[815],{"text":486,"type":19},{"type":15,"children":817},[818],{"text":819,"type":19},"By the end of this stage, the beginner should understand how to manipulate collections of data cleanly.",{"type":15,"children":821},[822],{"text":51,"type":19},{"type":15,"children":824},[825],{"text":826,"type":19},"# 5) Stage Three — DOM Manipulation",{"type":15,"children":828},[829],{"text":830,"type":19},"This is where the browser stops being a painting and starts becoming a machine.",{"type":15,"children":832},[833],{"text":834,"type":19},"MDN’s web learning path treats scripting and DOM interaction as central to building real web interfaces. ([MDN Web Docs][3])",{"type":15,"children":836},[837],{"text":51,"type":19},{"type":15,"children":839},[840],{"text":215,"type":19},{"type":15,"children":842},[843],{"text":844,"type":19},"* what the DOM is",{"type":15,"children":846},[847],{"text":848,"type":19},"* selecting elements",{"type":15,"children":850},[851],{"text":852,"type":19},"* changing content",{"type":15,"children":854},[855],{"text":856,"type":19},"* changing classes",{"type":15,"children":858},[859],{"text":860,"type":19},"* creating elements",{"type":15,"children":862},[863],{"text":864,"type":19},"* removing elements",{"type":15,"children":866},[867],{"text":868,"type":19},"* listening to events",{"type":15,"children":870},[871],{"text":51,"type":19},{"type":15,"children":873},[874],{"text":875,"type":19},"## Select elements",{"type":15,"children":877},[878],{"text":270,"type":19},{"type":15,"children":880},[881],{"text":882,"type":19},"const title = document.querySelector(\"#title\");",{"type":15,"children":884},[885],{"text":886,"type":19},"const button = document.querySelector(\"#change-text-btn\");",{"type":15,"children":888},[889],{"text":293,"type":19},{"type":15,"children":891},[892],{"text":51,"type":19},{"type":15,"children":894},[895],{"text":896,"type":19},"## Change text",{"type":15,"children":898},[899],{"text":270,"type":19},{"type":15,"children":901},[902],{"text":903,"type":19},"title.textContent = \"JavaScript is working\";",{"type":15,"children":905},[906],{"text":293,"type":19},{"type":15,"children":908},[909],{"text":51,"type":19},{"type":15,"children":911},[912],{"text":913,"type":19},"## Change classes",{"type":15,"children":915},[916],{"text":270,"type":19},{"type":15,"children":918},[919],{"text":920,"type":19},"title.classList.add(\"active\");",{"type":15,"children":922},[923],{"text":924,"type":19},"title.classList.remove(\"hidden\");",{"type":15,"children":926},[927],{"text":293,"type":19},{"type":15,"children":929},[930],{"text":51,"type":19},{"type":15,"children":932},[933],{"text":934,"type":19},"## Event listeners",{"type":15,"children":936},[937],{"text":270,"type":19},{"type":15,"children":939},[940],{"text":941,"type":19},"button.addEventListener(\"click\", () => {",{"type":15,"children":943},[944],{"text":945,"type":19},"  title.textContent = \"You clicked the button\";",{"type":15,"children":947},[948],{"text":949,"type":19},"});",{"type":15,"children":951},[952],{"text":293,"type":19},{"type":15,"children":954},[955],{"text":51,"type":19},{"type":15,"children":957},[958],{"text":959,"type":19},"## Create elements dynamically",{"type":15,"children":961},[962],{"text":270,"type":19},{"type":15,"children":964},[965],{"text":966,"type":19},"const list = document.querySelector(\"#task-list\");",{"type":15,"children":968},[969],{"text":51,"type":19},{"type":15,"children":971},[972],{"text":973,"type":19},"const li = document.createElement(\"li\");",{"type":15,"children":975},[976],{"text":977,"type":19},"li.textContent = \"Learn DOM manipulation\";",{"type":15,"children":979},[980],{"text":51,"type":19},{"type":15,"children":982},[983],{"text":984,"type":19},"list.appendChild(li);",{"type":15,"children":986},[987],{"text":293,"type":19},{"type":15,"children":989},[990],{"text":51,"type":19},{"type":15,"children":992},[993],{"text":994,"type":19},"## Mini project idea",{"type":15,"children":996},[997],{"text":998,"type":19},"Build a simple task list:",{"type":15,"children":1000},[1001],{"text":1002,"type":19},"* add task",{"type":15,"children":1004},[1005],{"text":1006,"type":19},"* mark task complete",{"type":15,"children":1008},[1009],{"text":1010,"type":19},"* delete task",{"type":15,"children":1012},[1013],{"text":51,"type":19},{"type":15,"children":1015},[1016],{"text":486,"type":19},{"type":15,"children":1018},[1019],{"text":1020,"type":19},"By the end of this stage, the beginner should be able to connect logic to UI.",{"type":15,"children":1022},[1023],{"text":51,"type":19},{"type":15,"children":1025},[1026],{"text":1027,"type":19},"# 6) Stage Four — Forms and Validation",{"type":15,"children":1029},[1030],{"text":1031,"type":19},"A beginner must learn this early because forms are everywhere and broken forms are chaos with a submit button.",{"type":15,"children":1033},[1034],{"text":51,"type":19},{"type":15,"children":1036},[1037],{"text":215,"type":19},{"type":15,"children":1039},[1040],{"text":1041,"type":19},"* `submit` events",{"type":15,"children":1043},[1044],{"text":1045,"type":19},"* `event.preventDefault()`",{"type":15,"children":1047},[1048],{"text":1049,"type":19},"* reading input values",{"type":15,"children":1051},[1052],{"text":1053,"type":19},"* basic validation",{"type":15,"children":1055},[1056],{"text":1057,"type":19},"* showing errors in the UI",{"type":15,"children":1059},[1060],{"text":1061,"type":19},"* preventing empty or invalid input",{"type":15,"children":1063},[1064],{"text":51,"type":19},{"type":15,"children":1066},[1067],{"text":1068,"type":19},"## Basic form handling",{"type":15,"children":1070},[1071],{"text":270,"type":19},{"type":15,"children":1073},[1074],{"text":1075,"type":19},"const form = document.querySelector(\"#signup-form\");",{"type":15,"children":1077},[1078],{"text":1079,"type":19},"const emailInput = document.querySelector(\"#email\");",{"type":15,"children":1081},[1082],{"text":51,"type":19},{"type":15,"children":1084},[1085],{"text":1086,"type":19},"form.addEventListener(\"submit\", (event) => {",{"type":15,"children":1088},[1089],{"text":1090,"type":19},"  event.preventDefault();",{"type":15,"children":1092},[1093],{"text":51,"type":19},{"type":15,"children":1095},[1096],{"text":1097,"type":19},"  const email = emailInput.value.trim();",{"type":15,"children":1099},[1100],{"text":51,"type":19},{"type":15,"children":1102},[1103],{"text":1104,"type":19},"  if (!email) {",{"type":15,"children":1106},[1107],{"text":1108,"type":19},"    alert(\"Email is required\");",{"type":15,"children":1110},[1111],{"text":1112,"type":19},"    return;",{"type":15,"children":1114},[1115],{"text":1116,"type":19},"  }",{"type":15,"children":1118},[1119],{"text":51,"type":19},{"type":15,"children":1121},[1122],{"text":1123,"type":19},"  console.log(\"Form submitted:\", email);",{"type":15,"children":1125},[1126],{"text":949,"type":19},{"type":15,"children":1128},[1129],{"text":293,"type":19},{"type":15,"children":1131},[1132],{"text":51,"type":19},{"type":15,"children":1134},[1135],{"text":1136,"type":19},"## Show validation messages in the UI",{"type":15,"children":1138},[1139],{"text":270,"type":19},{"type":15,"children":1141},[1142],{"text":1143,"type":19},"const errorText = document.querySelector(\"#error-message\");",{"type":15,"children":1145},[1146],{"text":51,"type":19},{"type":15,"children":1148},[1149],{"text":1150,"type":19},"if (!email) {",{"type":15,"children":1152},[1153],{"text":1154,"type":19},"  errorText.textContent = \"Please enter your email\";",{"type":15,"children":1156},[1157],{"text":382,"type":19},{"type":15,"children":1159},[1160],{"text":1161,"type":19},"  errorText.textContent = \"\";",{"type":15,"children":1163},[1164],{"text":390,"type":19},{"type":15,"children":1166},[1167],{"text":293,"type":19},{"type":15,"children":1169},[1170],{"text":51,"type":19},{"type":15,"children":1172},[1173],{"text":789,"type":19},{"type":15,"children":1175},[1176],{"text":1177,"type":19},"* required name field",{"type":15,"children":1179},[1180],{"text":1181,"type":19},"* email must include `@`",{"type":15,"children":1183},[1184],{"text":1185,"type":19},"* password minimum 8 characters",{"type":15,"children":1187},[1188],{"text":1189,"type":19},"* confirm password must match",{"type":15,"children":1191},[1192],{"text":51,"type":19},{"type":15,"children":1194},[1195],{"text":486,"type":19},{"type":15,"children":1197},[1198],{"text":1199,"type":19},"By the end of this stage, the beginner should know how to build real interactive forms instead of decorative input boxes.",{"type":15,"children":1201},[1202],{"text":51,"type":19},{"type":15,"children":1204},[1205],{"text":1206,"type":19},"# 7) Stage Five — Modern JavaScript Syntax",{"type":15,"children":1208},[1209],{"text":1210,"type":19},"A beginner should not stay stuck in old JavaScript. That road smells like abandoned tutorials.",{"type":15,"children":1212},[1213],{"text":1214,"type":19},"MDN’s modules guide and general JavaScript docs cover modern syntax as a normal part of current JavaScript development. ([MDN Web Docs][4])",{"type":15,"children":1216},[1217],{"text":51,"type":19},{"type":15,"children":1219},[1220],{"text":215,"type":19},{"type":15,"children":1222},[1223],{"text":1224,"type":19},"* `const` and `let`",{"type":15,"children":1226},[1227],{"text":1228,"type":19},"* arrow functions",{"type":15,"children":1230},[1231],{"text":1232,"type":19},"* template literals",{"type":15,"children":1234},[1235],{"text":1236,"type":19},"* destructuring",{"type":15,"children":1238},[1239],{"text":1240,"type":19},"* spread operator",{"type":15,"children":1242},[1243],{"text":1244,"type":19},"* rest parameters",{"type":15,"children":1246},[1247],{"text":1248,"type":19},"* optional chaining",{"type":15,"children":1250},[1251],{"text":1252,"type":19},"* nullish coalescing",{"type":15,"children":1254},[1255],{"text":1256,"type":19},"* modules with `import` and `export`",{"type":15,"children":1258},[1259],{"text":51,"type":19},{"type":15,"children":1261},[1262],{"text":1263,"type":19},"## Arrow functions",{"type":15,"children":1265},[1266],{"text":270,"type":19},{"type":15,"children":1268},[1269],{"text":1270,"type":19},"const greet = (name) => `Hello, ${name}`;",{"type":15,"children":1272},[1273],{"text":51,"type":19},{"type":15,"children":1275},[1276],{"text":1277,"type":19},"console.log(greet(\"Sofia\"));",{"type":15,"children":1279},[1280],{"text":293,"type":19},{"type":15,"children":1282},[1283],{"text":51,"type":19},{"type":15,"children":1285},[1286],{"text":1287,"type":19},"## Template literals",{"type":15,"children":1289},[1290],{"text":51,"type":19},{"type":15,"children":1292},[1293],{"text":270,"type":19},{"type":15,"children":1295},[1296],{"text":1297,"type":19},"const product = \"Laptop\";",{"type":15,"children":1299},[1300],{"text":1301,"type":19},"const price = 999;",{"type":15,"children":1303},[1304],{"text":51,"type":19},{"type":15,"children":1306},[1307],{"text":1308,"type":19},"console.log(`${product} costs $${price}`);",{"type":15,"children":1310},[1311],{"text":293,"type":19},{"type":15,"children":1313},[1314],{"text":51,"type":19},{"type":15,"children":1316},[1317],{"text":1318,"type":19},"## Destructuring",{"type":15,"children":1320},[1321],{"text":270,"type":19},{"type":15,"children":1323},[1324],{"text":578,"type":19},{"type":15,"children":1326},[1327],{"text":1328,"type":19},"  name: \"Luis\",",{"type":15,"children":1330},[1331],{"text":1332,"type":19},"  age: 25",{"type":15,"children":1334},[1335],{"text":594,"type":19},{"type":15,"children":1337},[1338],{"text":51,"type":19},{"type":15,"children":1340},[1341],{"text":1342,"type":19},"const { name, age } = user;",{"type":15,"children":1344},[1345],{"text":1346,"type":19},"console.log(name, age);",{"type":15,"children":1348},[1349],{"text":293,"type":19},{"type":15,"children":1351},[1352],{"text":51,"type":19},{"type":15,"children":1354},[1355],{"text":1356,"type":19},"## Spread operator",{"type":15,"children":1358},[1359],{"text":270,"type":19},{"type":15,"children":1361},[1362],{"text":1363,"type":19},"const first = [1, 2];",{"type":15,"children":1365},[1366],{"text":1367,"type":19},"const second = [3, 4];",{"type":15,"children":1369},[1370],{"text":51,"type":19},{"type":15,"children":1372},[1373],{"text":1374,"type":19},"const combined = [...first, ...second];",{"type":15,"children":1376},[1377],{"text":1378,"type":19},"console.log(combined);",{"type":15,"children":1380},[1381],{"text":293,"type":19},{"type":15,"children":1383},[1384],{"text":51,"type":19},{"type":15,"children":1386},[1387],{"text":1388,"type":19},"## Modules",{"type":15,"children":1390},[1391],{"text":1392,"type":19},"MDN’s modules guide explains how JavaScript modules let you split code into reusable files with `export` and `import`. ([MDN Web Docs][4])",{"type":15,"children":1394},[1395],{"text":51,"type":19},{"type":15,"children":1397},[1398],{"text":1399,"type":19},"### `utils.js`",{"type":15,"children":1401},[1402],{"text":270,"type":19},{"type":15,"children":1404},[1405],{"text":1406,"type":19},"export function formatPrice(value) {",{"type":15,"children":1408},[1409],{"text":1410,"type":19},"  return `$${value.toFixed(2)}`;",{"type":15,"children":1412},[1413],{"text":390,"type":19},{"type":15,"children":1415},[1416],{"text":293,"type":19},{"type":15,"children":1418},[1419],{"text":51,"type":19},{"type":15,"children":1421},[1422],{"text":1423,"type":19},"### `main.js`",{"type":15,"children":1425},[1426],{"text":51,"type":19},{"type":15,"children":1428},[1429],{"text":270,"type":19},{"type":15,"children":1431},[1432],{"text":1433,"type":19},"import { formatPrice } from \"./utils.js\";",{"type":15,"children":1435},[1436],{"text":51,"type":19},{"type":15,"children":1438},[1439],{"text":1440,"type":19},"console.log(formatPrice(19.99));",{"type":15,"children":1442},[1443],{"text":293,"type":19},{"type":15,"children":1445},[1446],{"text":51,"type":19},{"type":15,"children":1448},[1449],{"text":486,"type":19},{"type":15,"children":1451},[1452],{"text":1453,"type":19},"By the end of this stage, the beginner should be able to read and write modern JavaScript without feeling lost.",{"type":15,"children":1455},[1456],{"text":51,"type":19},{"type":15,"children":1458},[1459],{"text":1460,"type":19},"# 8) Stage Six — Async JavaScript and APIs",{"type":15,"children":1462},[1463],{"text":1464,"type":19},"This is one of the biggest jumps.",{"type":15,"children":1466},[1467],{"text":1468,"type":19},"MDN describes the Fetch API as the modern interface for fetching network resources, and their Fetch guide explains that it is promise-based and intended for modern web development. ([MDN Web Docs][5])",{"type":15,"children":1470},[1471],{"text":51,"type":19},{"type":15,"children":1473},[1474],{"text":215,"type":19},{"type":15,"children":1476},[1477],{"text":1478,"type":19},"* synchronous vs asynchronous code",{"type":15,"children":1480},[1481],{"text":1482,"type":19},"* promises",{"type":15,"children":1484},[1485],{"text":1486,"type":19},"* `async/await`",{"type":15,"children":1488},[1489],{"text":1490,"type":19},"* `fetch`",{"type":15,"children":1492},[1493],{"text":1494,"type":19},"* `try/catch`",{"type":15,"children":1496},[1497],{"text":1498,"type":19},"* loading states",{"type":15,"children":1500},[1501],{"text":1502,"type":19},"* error handling",{"type":15,"children":1504},[1505],{"text":1506,"type":19},"* parsing JSON",{"type":15,"children":1508},[1509],{"text":51,"type":19},{"type":15,"children":1511},[1512],{"text":1513,"type":19},"## Simple fetch example",{"type":15,"children":1515},[1516],{"text":270,"type":19},{"type":15,"children":1518},[1519],{"text":1520,"type":19},"async function getUsers() {",{"type":15,"children":1522},[1523],{"text":1524,"type":19},"  try {",{"type":15,"children":1526},[1527],{"text":1528,"type":19},"    const response = await fetch(\"https://jsonplaceholder.typicode.com/users\");",{"type":15,"children":1530},[1531],{"text":51,"type":19},{"type":15,"children":1533},[1534],{"text":1535,"type":19},"    if (!response.ok) {",{"type":15,"children":1537},[1538],{"text":1539,"type":19},"      throw new Error(\"Failed to fetch users\");",{"type":15,"children":1541},[1542],{"text":1543,"type":19},"    }",{"type":15,"children":1545},[1546],{"text":51,"type":19},{"type":15,"children":1548},[1549],{"text":1550,"type":19},"    const users = await response.json();",{"type":15,"children":1552},[1553],{"text":1554,"type":19},"    console.log(users);",{"type":15,"children":1556},[1557],{"text":1558,"type":19},"  } catch (error) {",{"type":15,"children":1560},[1561],{"text":1562,"type":19},"    console.error(error);",{"type":15,"children":1564},[1565],{"text":1116,"type":19},{"type":15,"children":1567},[1568],{"text":390,"type":19},{"type":15,"children":1570},[1571],{"text":51,"type":19},{"type":15,"children":1573},[1574],{"text":1575,"type":19},"getUsers();",{"type":15,"children":1577},[1578],{"text":293,"type":19},{"type":15,"children":1580},[1581],{"text":51,"type":19},{"type":15,"children":1583},[1584],{"text":1585,"type":19},"## Loading state example",{"type":15,"children":1587},[1588],{"text":270,"type":19},{"type":15,"children":1590},[1591],{"text":1592,"type":19},"const result = document.querySelector(\"#result\");",{"type":15,"children":1594},[1595],{"text":51,"type":19},{"type":15,"children":1597},[1598],{"text":1599,"type":19},"async function loadData() {",{"type":15,"children":1601},[1602],{"text":1603,"type":19},"  result.textContent = \"Loading...\";",{"type":15,"children":1605},[1606],{"text":51,"type":19},{"type":15,"children":1608},[1609],{"text":1524,"type":19},{"type":15,"children":1611},[1612],{"text":1613,"type":19},"    const response = await fetch(\"https://jsonplaceholder.typicode.com/posts\");",{"type":15,"children":1615},[1616],{"text":1617,"type":19},"    const posts = await response.json();",{"type":15,"children":1619},[1620],{"text":51,"type":19},{"type":15,"children":1622},[1623],{"text":1624,"type":19},"    result.textContent = `Loaded ${posts.length} posts`;",{"type":15,"children":1626},[1627],{"text":1558,"type":19},{"type":15,"children":1629},[1630],{"text":1631,"type":19},"    result.textContent = \"Something went wrong\";",{"type":15,"children":1633},[1634],{"text":1116,"type":19},{"type":15,"children":1636},[1637],{"text":390,"type":19},{"type":15,"children":1639},[1640],{"text":293,"type":19},{"type":15,"children":1642},[1643],{"text":51,"type":19},{"type":15,"children":1645},[1646],{"text":789,"type":19},{"type":15,"children":1648},[1649],{"text":1650,"type":19},"* fetch users from a public API",{"type":15,"children":1652},[1653],{"text":1654,"type":19},"* render results in cards",{"type":15,"children":1656},[1657],{"text":1658,"type":19},"* show a loading message",{"type":15,"children":1660},[1661],{"text":1662,"type":19},"* show an error message if request fails",{"type":15,"children":1664},[1665],{"text":1666,"type":19},"* search by name or title",{"type":15,"children":1668},[1669],{"text":51,"type":19},{"type":15,"children":1671},[1672],{"text":486,"type":19},{"type":15,"children":1674},[1675],{"text":1676,"type":19},"By the end of this stage, the beginner should know how to bring external data into a web app.",{"type":15,"children":1678},[1679],{"text":51,"type":19},{"type":15,"children":1681},[1682],{"text":1683,"type":19},"# 9) Stage Seven — Build a Real Beginner Project",{"type":15,"children":1685},[1686],{"text":1687,"type":19},"Now the beginner should stop collecting isolated exercises like trophies and build something end-to-end.",{"type":15,"children":1689},[1690],{"text":51,"type":19},{"type":15,"children":1692},[1693],{"text":1694,"type":19},"## Recommended project",{"type":15,"children":1696},[1697],{"text":1698,"type":19},"### Movie Search App",{"type":15,"children":1700},[1701],{"text":1702,"type":19},"or",{"type":15,"children":1704},[1705],{"text":1706,"type":19},"### Country Explorer App",{"type":15,"children":1708},[1709],{"text":1710,"type":19},"## Features it should include",{"type":15,"children":1712},[1713],{"text":1714,"type":19},"* search input",{"type":15,"children":1716},[1717],{"text":1718,"type":19},"* submit button",{"type":15,"children":1720},[1721],{"text":1722,"type":19},"* API request",{"type":15,"children":1724},[1725],{"text":1726,"type":19},"* dynamic rendering",{"type":15,"children":1728},[1729],{"text":1730,"type":19},"* loading state",{"type":15,"children":1732},[1733],{"text":1734,"type":19},"* empty state",{"type":15,"children":1736},[1737],{"text":1738,"type":19},"* error state",{"type":15,"children":1740},[1741],{"text":1742,"type":19},"* basic responsive layout",{"type":15,"children":1744},[1745],{"text":51,"type":19},{"type":15,"children":1747},[1748],{"text":1749,"type":19},"## Example project flow",{"type":15,"children":1751},[1752],{"text":270,"type":19},{"type":15,"children":1754},[1755],{"text":1756,"type":19},"const form = document.querySelector(\"#search-form\");",{"type":15,"children":1758},[1759],{"text":1760,"type":19},"const input = document.querySelector(\"#search-input\");",{"type":15,"children":1762},[1763],{"text":1592,"type":19},{"type":15,"children":1765},[1766],{"text":51,"type":19},{"type":15,"children":1768},[1769],{"text":1770,"type":19},"form.addEventListener(\"submit\", async (event) => {",{"type":15,"children":1772},[1773],{"text":1090,"type":19},{"type":15,"children":1775},[1776],{"text":51,"type":19},{"type":15,"children":1778},[1779],{"text":1780,"type":19},"  const query = input.value.trim();",{"type":15,"children":1782},[1783],{"text":51,"type":19},{"type":15,"children":1785},[1786],{"text":1787,"type":19},"  if (!query) {",{"type":15,"children":1789},[1790],{"text":1791,"type":19},"    result.textContent = \"Please enter a search term\";",{"type":15,"children":1793},[1794],{"text":1112,"type":19},{"type":15,"children":1796},[1797],{"text":1116,"type":19},{"type":15,"children":1799},[1800],{"text":51,"type":19},{"type":15,"children":1802},[1803],{"text":1603,"type":19},{"type":15,"children":1805},[1806],{"text":51,"type":19},{"type":15,"children":1808},[1809],{"text":1524,"type":19},{"type":15,"children":1811},[1812],{"text":1813,"type":19},"    const response = await fetch(`https://www.omdbapi.com/?apikey=YOUR_KEY&s=${query}`);",{"type":15,"children":1815},[1816],{"text":1817,"type":19},"    const data = await response.json();",{"type":15,"children":1819},[1820],{"text":51,"type":19},{"type":15,"children":1822},[1823],{"text":1824,"type":19},"    if (!data.Search) {",{"type":15,"children":1826},[1827],{"text":1828,"type":19},"      result.textContent = \"No results found\";",{"type":15,"children":1830},[1831],{"text":1832,"type":19},"      return;",{"type":15,"children":1834},[1835],{"text":1543,"type":19},{"type":15,"children":1837},[1838],{"text":51,"type":19},{"type":15,"children":1840},[1841],{"text":1842,"type":19},"    result.innerHTML = data.Search.map((movie) => `",{"type":15,"children":1844},[1845],{"text":1846,"type":19},"      \u003Carticle>",{"type":15,"children":1848},[1849],{"text":1850,"type":19},"        \u003Ch2>${movie.Title}\u003C/h2>",{"type":15,"children":1852},[1853],{"text":1854,"type":19},"        \u003Cp>${movie.Year}\u003C/p>",{"type":15,"children":1856},[1857],{"text":1858,"type":19},"        \u003Cimg src=\"${movie.Poster}\" alt=\"${movie.Title}\" />",{"type":15,"children":1860},[1861],{"text":1862,"type":19},"      \u003C/article>",{"type":15,"children":1864},[1865],{"text":1866,"type":19},"    `).join(\"\");",{"type":15,"children":1868},[1869],{"text":1558,"type":19},{"type":15,"children":1871},[1872],{"text":1631,"type":19},{"type":15,"children":1874},[1875],{"text":1116,"type":19},{"type":15,"children":1877},[1878],{"text":949,"type":19},{"type":15,"children":1880},[1881],{"text":293,"type":19},{"type":15,"children":1883},[1884],{"text":51,"type":19},{"type":15,"children":1886},[1887],{"text":486,"type":19},{"type":15,"children":1889},[1890],{"text":1891,"type":19},"By the end of this stage, the beginner should have one real working app.",{"type":15,"children":1893},[1894],{"text":51,"type":19},{"type":15,"children":1896},[1897],{"text":1898,"type":19},"# 10) Stage Eight — Project Structure and Code Organization",{"type":15,"children":1900},[1901],{"text":1902,"type":19},"Once the beginner has built a working app, they need to clean it up.",{"type":15,"children":1904},[1905],{"text":51,"type":19},{"type":15,"children":1907},[1908],{"text":215,"type":19},{"type":15,"children":1910},[1911],{"text":1912,"type":19},"* separating files by responsibility",{"type":15,"children":1914},[1915],{"text":1916,"type":19},"* avoiding giant `main.js` files",{"type":15,"children":1918},[1919],{"text":1920,"type":19},"* creating utility modules",{"type":15,"children":1922},[1923],{"text":1924,"type":19},"* separating API logic from UI logic",{"type":15,"children":1926},[1927],{"text":51,"type":19},{"type":15,"children":1929},[1930],{"text":1931,"type":19},"## Example folder structure",{"type":15,"children":1933},[1934],{"text":1935,"type":19},"```bash",{"type":15,"children":1937},[1938],{"text":1939,"type":19},"javascript-roadmap-app/",{"type":15,"children":1941},[1942],{"text":1943,"type":19},"├─ index.html",{"type":15,"children":1945},[1946],{"text":1947,"type":19},"├─ styles/",{"type":15,"children":1949},[1950],{"text":1951,"type":19},"│  └─ main.css",{"type":15,"children":1953},[1954],{"text":1955,"type":19},"├─ js/",{"type":15,"children":1957},[1958],{"text":1959,"type":19},"│  ├─ main.js",{"type":15,"children":1961},[1962],{"text":1963,"type":19},"│  ├─ services/",{"type":15,"children":1965},[1966],{"text":1967,"type":19},"│  │  └─ api.js",{"type":15,"children":1969},[1970],{"text":1971,"type":19},"│  ├─ ui/",{"type":15,"children":1973},[1974],{"text":1975,"type":19},"│  │  └─ render.js",{"type":15,"children":1977},[1978],{"text":1979,"type":19},"│  └─ utils/",{"type":15,"children":1981},[1982],{"text":1983,"type":19},"│     └─ helpers.js",{"type":15,"children":1985},[1986],{"text":1987,"type":19},"└─ assets/",{"type":15,"children":1989},[1990],{"text":293,"type":19},{"type":15,"children":1992},[1993],{"text":51,"type":19},{"type":15,"children":1995},[1996],{"text":1997,"type":19},"## Example `services/api.js`",{"type":15,"children":1999},[2000],{"text":270,"type":19},{"type":15,"children":2002},[2003],{"text":2004,"type":19},"export async function searchMovies(query) {",{"type":15,"children":2006},[2007],{"text":2008,"type":19},"  const response = await fetch(`https://www.omdbapi.com/?apikey=YOUR_KEY&s=${query}`);",{"type":15,"children":2010},[2011],{"text":51,"type":19},{"type":15,"children":2013},[2014],{"text":2015,"type":19},"  if (!response.ok) {",{"type":15,"children":2017},[2018],{"text":2019,"type":19},"    throw new Error(\"Failed to fetch movies\");",{"type":15,"children":2021},[2022],{"text":1116,"type":19},{"type":15,"children":2024},[2025],{"text":51,"type":19},{"type":15,"children":2027},[2028],{"text":2029,"type":19},"  const data = await response.json();",{"type":15,"children":2031},[2032],{"text":51,"type":19},{"type":15,"children":2034},[2035],{"text":2036,"type":19},"  if (!data.Search) {",{"type":15,"children":2038},[2039],{"text":2040,"type":19},"    return [];",{"type":15,"children":2042},[2043],{"text":1116,"type":19},{"type":15,"children":2045},[2046],{"text":51,"type":19},{"type":15,"children":2048},[2049],{"text":2050,"type":19},"  return data.Search;",{"type":15,"children":2052},[2053],{"text":390,"type":19},{"type":15,"children":2055},[2056],{"text":293,"type":19},{"type":15,"children":2058},[2059],{"text":51,"type":19},{"type":15,"children":2061},[2062],{"text":2063,"type":19},"## Example `ui/render.js`",{"type":15,"children":2065},[2066],{"text":51,"type":19},{"type":15,"children":2068},[2069],{"text":270,"type":19},{"type":15,"children":2071},[2072],{"text":2073,"type":19},"export function renderMovies(movies) {",{"type":15,"children":2075},[2076],{"text":2077,"type":19},"  const result = document.querySelector(\"#result\");",{"type":15,"children":2079},[2080],{"text":51,"type":19},{"type":15,"children":2082},[2083],{"text":2084,"type":19},"  result.innerHTML = movies.map((movie) => `",{"type":15,"children":2086},[2087],{"text":2088,"type":19},"    \u003Carticle class=\"movie-card\">",{"type":15,"children":2090},[2091],{"text":2092,"type":19},"      \u003Ch2>${movie.Title}\u003C/h2>",{"type":15,"children":2094},[2095],{"text":2096,"type":19},"      \u003Cp>${movie.Year}\u003C/p>",{"type":15,"children":2098},[2099],{"text":2100,"type":19},"      \u003Cimg src=\"${movie.Poster}\" alt=\"${movie.Title}\" />",{"type":15,"children":2102},[2103],{"text":2104,"type":19},"    \u003C/article>",{"type":15,"children":2106},[2107],{"text":2108,"type":19},"  `).join(\"\");",{"type":15,"children":2110},[2111],{"text":390,"type":19},{"type":15,"children":2113},[2114],{"text":51,"type":19},{"type":15,"children":2116},[2117],{"text":2118,"type":19},"export function renderError(message) {",{"type":15,"children":2120},[2121],{"text":2077,"type":19},{"type":15,"children":2123},[2124],{"text":2125,"type":19},"  result.textContent = message;",{"type":15,"children":2127},[2128],{"text":390,"type":19},{"type":15,"children":2130},[2131],{"text":293,"type":19},{"type":15,"children":2133},[2134],{"text":51,"type":19},{"type":15,"children":2136},[2137],{"text":2138,"type":19},"## Example `main.js`",{"type":15,"children":2140},[2141],{"text":270,"type":19},{"type":15,"children":2143},[2144],{"text":2145,"type":19},"import { searchMovies } from \"./services/api.js\";",{"type":15,"children":2147},[2148],{"text":2149,"type":19},"import { renderMovies, renderError } from \"./ui/render.js\";",{"type":15,"children":2151},[2152],{"text":51,"type":19},{"type":15,"children":2154},[2155],{"text":1756,"type":19},{"type":15,"children":2157},[2158],{"text":1760,"type":19},{"type":15,"children":2160},[2161],{"text":51,"type":19},{"type":15,"children":2163},[2164],{"text":1770,"type":19},{"type":15,"children":2166},[2167],{"text":1090,"type":19},{"type":15,"children":2169},[2170],{"text":51,"type":19},{"type":15,"children":2172},[2173],{"text":1780,"type":19},{"type":15,"children":2175},[2176],{"text":2177,"type":19},"  if (!query) return;",{"type":15,"children":2179},[2180],{"text":51,"type":19},{"type":15,"children":2182},[2183],{"text":1524,"type":19},{"type":15,"children":2185},[2186],{"text":2187,"type":19},"    const movies = await searchMovies(query);",{"type":15,"children":2189},[2190],{"text":2191,"type":19},"    renderMovies(movies);",{"type":15,"children":2193},[2194],{"text":1558,"type":19},{"type":15,"children":2196},[2197],{"text":2198,"type":19},"    renderError(\"Something went wrong\");",{"type":15,"children":2200},[2201],{"text":1116,"type":19},{"type":15,"children":2203},[2204],{"text":949,"type":19},{"type":15,"children":2206},[2207],{"text":293,"type":19},{"type":15,"children":2209},[2210],{"text":51,"type":19},{"type":15,"children":2212},[2213],{"text":486,"type":19},{"type":15,"children":2215},[2216],{"text":2217,"type":19},"By the end of this stage, the beginner should understand basic code organization and modules.",{"type":15,"children":2219},[2220],{"text":51,"type":19},{"type":15,"children":2222},[2223],{"text":2224,"type":19},"# 11) Stage Nine — Git and GitHub",{"type":15,"children":2226},[2227],{"text":2228,"type":19},"A beginner should learn version control before deployment, not after breaking everything and crying into the terminal.",{"type":15,"children":2230},[2231],{"text":51,"type":19},{"type":15,"children":2233},[2234],{"text":215,"type":19},{"type":15,"children":2236},[2237],{"text":2238,"type":19},"* initialize a repo",{"type":15,"children":2240},[2241],{"text":2242,"type":19},"* stage files",{"type":15,"children":2244},[2245],{"text":2246,"type":19},"* commit changes",{"type":15,"children":2248},[2249],{"text":2250,"type":19},"* create a branch",{"type":15,"children":2252},[2253],{"text":2254,"type":19},"* push to GitHub",{"type":15,"children":2256},[2257],{"text":2258,"type":19},"* pull changes",{"type":15,"children":2260},[2261],{"text":2262,"type":19},"* understand `.gitignore`",{"type":15,"children":2264},[2265],{"text":51,"type":19},{"type":15,"children":2267},[2268],{"text":2269,"type":19},"## Core commands",{"type":15,"children":2271},[2272],{"text":1935,"type":19},{"type":15,"children":2274},[2275],{"text":2276,"type":19},"git init",{"type":15,"children":2278},[2279],{"text":2280,"type":19},"git add .",{"type":15,"children":2282},[2283],{"text":2284,"type":19},"git commit -m \"feat: initial project setup\"",{"type":15,"children":2286},[2287],{"text":2288,"type":19},"git branch -M main",{"type":15,"children":2290},[2291],{"text":2292,"type":19},"git remote add origin \u003Cyour-repo-url>",{"type":15,"children":2294},[2295],{"text":2296,"type":19},"git push -u origin main",{"type":15,"children":2298},[2299],{"text":293,"type":19},{"type":15,"children":2301},[2302],{"text":51,"type":19},{"type":15,"children":2304},[2305],{"text":2306,"type":19},"## Good beginner habit",{"type":15,"children":2308},[2309],{"text":2310,"type":19},"Commit by milestones:",{"type":15,"children":2312},[2313],{"text":2314,"type":19},"* `feat: add search form`",{"type":15,"children":2316},[2317],{"text":2318,"type":19},"* `feat: fetch movie data`",{"type":15,"children":2320},[2321],{"text":2322,"type":19},"* `style: improve layout`",{"type":15,"children":2324},[2325],{"text":2326,"type":19},"* `fix: handle empty results`",{"type":15,"children":2328},[2329],{"text":51,"type":19},{"type":15,"children":2331},[2332],{"text":486,"type":19},{"type":15,"children":2334},[2335],{"text":2336,"type":19},"By the end of this stage, the beginner should have their project safely stored in GitHub.",{"type":15,"children":2338},[2339],{"text":51,"type":19},{"type":15,"children":2341},[2342],{"text":2343,"type":19},"# 12) Stage Ten — Learn Vite",{"type":15,"children":2345},[2346],{"text":2347,"type":19},"Vite’s official docs describe it as a modern frontend tool and currently require Node.js `20.19+` or `22.12+`, with some templates requiring even newer versions. The docs also show `npm create vite@latest` as the standard way to scaffold a project. ([vitejs][1])",{"type":15,"children":2349},[2350],{"text":51,"type":19},{"type":15,"children":2352},[2353],{"text":2354,"type":19},"## Why a beginner should learn Vite",{"type":15,"children":2356},[2357],{"text":2358,"type":19},"Because it gives:",{"type":15,"children":2360},[2361],{"text":2362,"type":19},"* fast local development",{"type":15,"children":2364},[2365],{"text":2366,"type":19},"* clean project structure",{"type":15,"children":2368},[2369],{"text":2370,"type":19},"* modern module handling",{"type":15,"children":2372},[2373],{"text":2374,"type":19},"* production builds",{"type":15,"children":2376},[2377],{"text":2378,"type":19},"* a better experience than old-school manual setups",{"type":15,"children":2380},[2381],{"text":51,"type":19},{"type":15,"children":2383},[2384],{"text":2385,"type":19},"## Create a Vite project",{"type":15,"children":2387},[2388],{"text":1935,"type":19},{"type":15,"children":2390},[2391],{"text":2392,"type":19},"npm create vite@latest javascript-app",{"type":15,"children":2394},[2395],{"text":2396,"type":19},"cd javascript-app",{"type":15,"children":2398},[2399],{"text":2400,"type":19},"npm install",{"type":15,"children":2402},[2403],{"text":2404,"type":19},"npm run dev",{"type":15,"children":2406},[2407],{"text":293,"type":19},{"type":15,"children":2409},[2410],{"text":51,"type":19},{"type":15,"children":2412},[2413],{"text":2414,"type":19},"## Useful commands",{"type":15,"children":2416},[2417],{"text":1935,"type":19},{"type":15,"children":2419},[2420],{"text":2404,"type":19},{"type":15,"children":2422},[2423],{"text":2424,"type":19},"npm run build",{"type":15,"children":2426},[2427],{"text":2428,"type":19},"npm run preview",{"type":15,"children":2430},[2431],{"text":293,"type":19},{"type":15,"children":2433},[2434],{"text":51,"type":19},{"type":15,"children":2436},[2437],{"text":2438,"type":19},"## What the beginner should learn inside Vite",{"type":15,"children":2440},[2441],{"text":2442,"type":19},"* `src/`",{"type":15,"children":2444},[2445],{"text":2446,"type":19},"* `public/`",{"type":15,"children":2448},[2449],{"text":2450,"type":19},"* `main.js`",{"type":15,"children":2452},[2453],{"text":2454,"type":19},"* static assets",{"type":15,"children":2456},[2457],{"text":2458,"type":19},"* production build flow",{"type":15,"children":2460},[2461],{"text":51,"type":19},{"type":15,"children":2463},[2464],{"text":486,"type":19},{"type":15,"children":2466},[2467],{"text":2468,"type":19},"By the end of this stage, the beginner should be able to run and build a modern JavaScript app with Vite.",{"type":15,"children":2470},[2471],{"text":51,"type":19},{"type":15,"children":2473},[2474],{"text":2475,"type":19},"# 13) Stage Eleven — Prepare the App for Production",{"type":15,"children":2477},[2478],{"text":2479,"type":19},"Before deployment, the beginner should clean up the project.",{"type":15,"children":2481},[2482],{"text":51,"type":19},{"type":15,"children":2484},[2485],{"text":2486,"type":19},"## Checklist",{"type":15,"children":2488},[2489],{"text":2490,"type":19},"* remove dead code",{"type":15,"children":2492},[2493],{"text":2494,"type":19},"* fix console errors",{"type":15,"children":2496},[2497],{"text":2498,"type":19},"* check broken images or links",{"type":15,"children":2500},[2501],{"text":2502,"type":19},"* test empty state",{"type":15,"children":2504},[2505],{"text":2506,"type":19},"* test error state",{"type":15,"children":2508},[2509],{"text":2510,"type":19},"* test mobile layout",{"type":15,"children":2512},[2513],{"text":2514,"type":19},"* confirm the production build works",{"type":15,"children":2516},[2517],{"text":51,"type":19},{"type":15,"children":2519},[2520],{"text":2521,"type":19},"## Run a production build",{"type":15,"children":2523},[2524],{"text":1935,"type":19},{"type":15,"children":2526},[2527],{"text":2424,"type":19},{"type":15,"children":2529},[2530],{"text":293,"type":19},{"type":15,"children":2532},[2533],{"text":2534,"type":19},"If the build fails locally, deploying is just shipping your mistake faster.",{"type":15,"children":2536},[2537],{"text":51,"type":19},{"type":15,"children":2539},[2540],{"text":486,"type":19},{"type":15,"children":2542},[2543],{"text":2544,"type":19},"By the end of this stage, the app should be ready for public deployment.",{"type":15,"children":2546},[2547],{"text":51,"type":19},{"type":15,"children":2549},[2550],{"text":2551,"type":19},"# 14) Stage Twelve — Deploy on Vercel",{"type":15,"children":2553},[2554],{"text":2555,"type":19},"Vercel’s docs say deployments can be created through Git, the Vercel CLI, Deploy Hooks, or the REST API, and each successful deployment gets a unique URL. Their docs also state that Vercel automatically configures build settings for many frontend frameworks while still allowing manual build customization in project settings. For Vite specifically, Vercel has dedicated docs for deploying Vite projects. ([Vercel][6])",{"type":15,"children":2557},[2558],{"text":51,"type":19},{"type":15,"children":2560},[2561],{"text":2562,"type":19},"## Simplest beginner path",{"type":15,"children":2564},[2565],{"text":2566,"type":19},"### Option 1: Deploy with GitHub",{"type":15,"children":2568},[2569],{"text":2570,"type":19},"1. Push your project to GitHub",{"type":15,"children":2572},[2573],{"text":2574,"type":19},"2. Sign in to Vercel",{"type":15,"children":2576},[2577],{"text":2578,"type":19},"3. Import the GitHub repository",{"type":15,"children":2580},[2581],{"text":2582,"type":19},"4. Let Vercel detect the project",{"type":15,"children":2584},[2585],{"text":2586,"type":19},"5. Review build settings",{"type":15,"children":2588},[2589],{"text":2590,"type":19},"6. Click deploy",{"type":15,"children":2592},[2593],{"text":2594,"type":19},"7. Get your public URL",{"type":15,"children":2596},[2597],{"text":51,"type":19},{"type":15,"children":2599},[2600],{"text":2601,"type":19},"## What to check",{"type":15,"children":2603},[2604],{"text":2605,"type":19},"* build command",{"type":15,"children":2607},[2608],{"text":2609,"type":19},"* output directory",{"type":15,"children":2611},[2612],{"text":2613,"type":19},"* environment variables if you use any API keys",{"type":15,"children":2615},[2616],{"text":2617,"type":19},"* framework preset if shown",{"type":15,"children":2619},[2620],{"text":51,"type":19},{"type":15,"children":2622},[2623],{"text":2624,"type":19},"## Optional path: Vercel CLI",{"type":15,"children":2626},[2627],{"text":2628,"type":19},"If the beginner wants to learn terminal-based deployment later, Vercel docs also support CLI deployments. ([Vercel][6])",{"type":15,"children":2630},[2631],{"text":51,"type":19},{"type":15,"children":2633},[2634],{"text":486,"type":19},{"type":15,"children":2636},[2637],{"text":2638,"type":19},"By the end of this stage, the beginner should have a public working app online.",{"type":15,"children":2640},[2641],{"text":51,"type":19},{"type":15,"children":2643},[2644],{"text":2645,"type":19},"# 15) Stage Thirteen — What the Beginner Should Learn Next",{"type":15,"children":2647},[2648],{"text":2649,"type":19},"Once the beginner finishes this roadmap, the next step depends on their direction.",{"type":15,"children":2651},[2652],{"text":51,"type":19},{"type":15,"children":2654},[2655],{"text":2656,"type":19},"## Frontend route",{"type":15,"children":2658},[2659],{"text":2660,"type":19},"* accessibility basics",{"type":15,"children":2662},[2663],{"text":2664,"type":19},"* responsive layouts",{"type":15,"children":2666},[2667],{"text":2668,"type":19},"* localStorage",{"type":15,"children":2670},[2671],{"text":2672,"type":19},"* debouncing",{"type":15,"children":2674},[2675],{"text":2676,"type":19},"* browser APIs",{"type":15,"children":2678},[2679],{"text":2680,"type":19},"* React, Vue, or Svelte",{"type":15,"children":2682},[2683],{"text":51,"type":19},{"type":15,"children":2685},[2686],{"text":2687,"type":19},"## JavaScript deeper route",{"type":15,"children":2689},[2690],{"text":2691,"type":19},"* closures",{"type":15,"children":2693},[2694],{"text":2695,"type":19},"* prototypes",{"type":15,"children":2697},[2698],{"text":2699,"type":19},"* event loop",{"type":15,"children":2701},[2702],{"text":2703,"type":19},"* classes",{"type":15,"children":2705},[2706],{"text":2707,"type":19},"* modules in depth",{"type":15,"children":2709},[2710],{"text":2711,"type":19},"* error boundaries and debugging habits",{"type":15,"children":2713},[2714],{"text":51,"type":19},{"type":15,"children":2716},[2717],{"text":2718,"type":19},"## Full-stack route",{"type":15,"children":2720},[2721],{"text":2722,"type":19},"* Node.js",{"type":15,"children":2724},[2725],{"text":2726,"type":19},"* Express",{"type":15,"children":2728},[2729],{"text":2730,"type":19},"* REST APIs",{"type":15,"children":2732},[2733],{"text":2734,"type":19},"* databases",{"type":15,"children":2736},[2737],{"text":2738,"type":19},"* authentication",{"type":15,"children":2740},[2741],{"text":2742,"type":19},"* deployment for backend services",{"type":15,"children":2744},[2745],{"text":51,"type":19},{"type":15,"children":2747},[2748],{"text":2749,"type":19},"# 16) Recommended Weekly Plan",{"type":15,"children":2751},[2752],{"text":51,"type":19},{"type":15,"children":2754},[2755],{"text":2756,"type":19},"## Week 1",{"type":15,"children":2758},[2759],{"text":2760,"type":19},"Learn:",{"type":15,"children":2762},[2763],{"text":223,"type":19},{"type":15,"children":2765},[2766],{"text":2767,"type":19},"* types",{"type":15,"children":2769},[2770],{"text":235,"type":19},{"type":15,"children":2772},[2773],{"text":239,"type":19},{"type":15,"children":2775},[2776],{"text":243,"type":19},{"type":15,"children":2778},[2779],{"text":51,"type":19},{"type":15,"children":2781},[2782],{"text":2783,"type":19},"Build:",{"type":15,"children":2785},[2786],{"text":2787,"type":19},"* small logic exercises",{"type":15,"children":2789},[2790],{"text":51,"type":19},{"type":15,"children":2792},[2793],{"text":2794,"type":19},"## Week 2",{"type":15,"children":2796},[2797],{"text":2760,"type":19},{"type":15,"children":2799},[2800],{"text":508,"type":19},{"type":15,"children":2802},[2803],{"text":512,"type":19},{"type":15,"children":2805},[2806],{"text":528,"type":19},{"type":15,"children":2808},[2809],{"text":51,"type":19},{"type":15,"children":2811},[2812],{"text":2783,"type":19},{"type":15,"children":2814},[2815],{"text":2816,"type":19},"* product filter",{"type":15,"children":2818},[2819],{"text":2820,"type":19},"* task list data practice",{"type":15,"children":2822},[2823],{"text":51,"type":19},{"type":15,"children":2825},[2826],{"text":2827,"type":19},"## Week 3",{"type":15,"children":2829},[2830],{"text":2760,"type":19},{"type":15,"children":2832},[2833],{"text":2834,"type":19},"* DOM",{"type":15,"children":2836},[2837],{"text":2838,"type":19},"* events",{"type":15,"children":2840},[2841],{"text":2842,"type":19},"* forms",{"type":15,"children":2844},[2845],{"text":2846,"type":19},"* validation",{"type":15,"children":2848},[2849],{"text":51,"type":19},{"type":15,"children":2851},[2852],{"text":2783,"type":19},{"type":15,"children":2854},[2855],{"text":2856,"type":19},"* to-do app",{"type":15,"children":2858},[2859],{"text":2860,"type":19},"* simple signup form",{"type":15,"children":2862},[2863],{"text":51,"type":19},{"type":15,"children":2865},[2866],{"text":2867,"type":19},"## Week 4",{"type":15,"children":2869},[2870],{"text":2760,"type":19},{"type":15,"children":2872},[2873],{"text":2874,"type":19},"* modern syntax",{"type":15,"children":2876},[2877],{"text":2878,"type":19},"* modules",{"type":15,"children":2880},[2881],{"text":2882,"type":19},"* async/await",{"type":15,"children":2884},[2885],{"text":2886,"type":19},"* fetch",{"type":15,"children":2888},[2889],{"text":51,"type":19},{"type":15,"children":2891},[2892],{"text":2783,"type":19},{"type":15,"children":2894},[2895],{"text":2896,"type":19},"* API data viewer",{"type":15,"children":2898},[2899],{"text":51,"type":19},{"type":15,"children":2901},[2902],{"text":2903,"type":19},"## Week 5",{"type":15,"children":2905},[2906],{"text":2760,"type":19},{"type":15,"children":2908},[2909],{"text":2910,"type":19},"* project structure",{"type":15,"children":2912},[2913],{"text":91,"type":19},{"type":15,"children":2915},[2916],{"text":2917,"type":19},"* Vite",{"type":15,"children":2919},[2920],{"text":51,"type":19},{"type":15,"children":2922},[2923],{"text":2783,"type":19},{"type":15,"children":2925},[2926],{"text":2927,"type":19},"* real small app with modules",{"type":15,"children":2929},[2930],{"text":51,"type":19},{"type":15,"children":2932},[2933],{"text":2934,"type":19},"## Week 6",{"type":15,"children":2936},[2937],{"text":2760,"type":19},{"type":15,"children":2939},[2940],{"text":2941,"type":19},"* production checks",{"type":15,"children":2943},[2944],{"text":2945,"type":19},"* Vercel deployment",{"type":15,"children":2947},[2948],{"text":51,"type":19},{"type":15,"children":2950},[2951],{"text":2783,"type":19},{"type":15,"children":2953},[2954],{"text":2955,"type":19},"* final deployed project",{"type":15,"children":2957},[2958],{"text":51,"type":19},{"type":15,"children":2960},[2961],{"text":2962,"type":19},"A motivated beginner can do it faster. A careful beginner can take longer. Better slow and real than fast and fake.",{"type":15,"children":2964},[2965],{"text":51,"type":19},{"type":15,"children":2967},[2968],{"text":2969,"type":19},"# 17) Final Advice for a Beginner",{"type":15,"children":2971},[2972],{"text":2973,"type":19},"A beginner should not try to learn everything at once.",{"type":15,"children":2975},[2976],{"text":2977,"type":19},"The right flow is:",{"type":15,"children":2979},[2980],{"text":2981,"type":19},"1. learn the language",{"type":15,"children":2983},[2984],{"text":2985,"type":19},"2. learn the browser",{"type":15,"children":2987},[2988],{"text":2989,"type":19},"3. learn data",{"type":15,"children":2991},[2992],{"text":2993,"type":19},"4. learn async work",{"type":15,"children":2995},[2996],{"text":2997,"type":19},"5. build one project",{"type":15,"children":2999},[3000],{"text":3001,"type":19},"6. organize the code",{"type":15,"children":3003},[3004],{"text":3005,"type":19},"7. deploy it",{"type":15,"children":3007},[3008],{"text":51,"type":19},{"type":15,"children":3010},[3011],{"text":3012,"type":19},"That is how skill grows with roots.",{"type":15,"children":3014},[3015],{"text":51,"type":19},{"type":15,"children":3017},[3018],{"text":3019,"type":19},"Frameworks come after that.",{"type":15,"children":3021},[3022],{"text":3023,"type":19},"Not before.",{"type":15,"children":3025},[3026],{"text":51,"type":19},{"type":15,"children":3028},[3029],{"text":3030,"type":19},"* MDN JavaScript Guide: ([MDN Web Docs][2])",{"type":15,"children":3032},[3033],{"text":3034,"type":19},"* MDN JavaScript Modules Guide: ([MDN Web Docs][4])",{"type":15,"children":3036},[3037],{"text":3038,"type":19},"* MDN Fetch API: ([MDN Web Docs][5])",{"type":15,"children":3040},[3041],{"text":3042,"type":19},"* MDN Using Fetch: ([MDN Web Docs][7])",{"type":15,"children":3044},[3045],{"text":3046,"type":19},"* Vite Getting Started: ([vitejs][1])",{"type":15,"children":3048},[3049],{"text":3050,"type":19},"* Vite Config Guide: ([vitejs][8])",{"type":15,"children":3052},[3053],{"text":3054,"type":19},"* Vercel Deployments: ([Vercel][6])",{"type":15,"children":3056},[3057],{"text":3058,"type":19},"* Vercel Getting Started: ([Vercel][9])",{"type":15,"children":3060},[3061],{"text":3062,"type":19},"* Vercel Vite Docs: ([Vercel][10])",{"type":15,"children":3064},[3065],{"text":51,"type":19},{"type":15,"children":3067},[3068],{"text":3069,"type":19},"## FAQ",{"type":15,"children":3071},[3072],{"text":3073,"type":19},"**Is JavaScript enough to build and deploy a real project as a beginner?**",{"type":15,"children":3075},[3076],{"text":3077,"type":19},"Yes. A beginner can absolutely build and deploy a real frontend project using JavaScript, the DOM, `fetch`, GitHub, Vite, and Vercel. Vite and Vercel both document beginner-friendly paths for modern frontend setup and deployment. ([vitejs][1])",{"type":15,"children":3079},[3080],{"text":51,"type":19},{"type":15,"children":3082},[3083],{"text":3084,"type":19},"**Should a beginner learn JavaScript before React or Vue?**",{"type":15,"children":3086},[3087],{"text":3088,"type":19},"Yes. Learning JavaScript first makes frameworks much easier because the beginner already understands variables, arrays, objects, functions, modules, and async behavior.",{"type":15,"children":3090},[3091],{"text":51,"type":19},{"type":15,"children":3093},[3094],{"text":3095,"type":19},"**Why learn `fetch` early?**",{"type":15,"children":3097},[3098],{"text":3099,"type":19},"Because modern apps constantly consume APIs, and MDN documents Fetch as the modern promise-based interface for network requests. ([MDN Web Docs][5])",{"type":15,"children":3101},[3102],{"text":51,"type":19},{"type":15,"children":3104},[3105],{"text":3106,"type":19},"**Is Vite a good choice for beginners?**",{"type":15,"children":3108},[3109],{"text":3110,"type":19},"Yes. Vite’s docs present it as a modern frontend tool with fast setup and production builds, which makes it a strong beginner choice for plain JavaScript projects. ([vitejs][1])",{"type":15,"children":3112},[3113],{"text":51,"type":19},{"type":15,"children":3115},[3116],{"text":3117,"type":19},"**Is Vercel good for deploying beginner frontend apps?**",{"type":15,"children":3119},[3120],{"text":3121,"type":19},"Yes. Vercel supports Git-based deployment, generates unique deployment URLs, and provides framework-aware build handling for frontend apps, including Vite projects. ([Vercel][6])",{"type":15,"children":3123},[3124],{"text":51,"type":19},{"type":15,"children":3126},[3127],{"text":3128,"type":19},"[1]: https://vite.dev/guide \"Getting Started\"",{"type":15,"children":3130},[3131],{"text":3132,"type":19},"[2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide \"JavaScript Guide - MDN Web Docs - Mozilla\"",{"type":15,"children":3134},[3135],{"text":3136,"type":19},"[3]: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core \"Core learning modules - Learn web development - MDN\"",{"type":15,"children":3138},[3139],{"text":3140,"type":19},"[4]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules \"JavaScript modules - MDN\"",{"type":15,"children":3142},[3143],{"text":3144,"type":19},"[5]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API \"Fetch API - Web APIs | MDN - Mozilla\"",{"type":15,"children":3146},[3147],{"text":3148,"type":19},"[6]: https://vercel.com/docs/deployments \"Deploying to Vercel\"",{"type":15,"children":3150},[3151],{"text":3152,"type":19},"[7]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch \"Using the Fetch API - Web APIs | MDN - Mozilla\"",{"type":15,"children":3154},[3155],{"text":3156,"type":19},"[8]: https://vite.dev/config \"Configuring Vite\"",{"type":15,"children":3158},[3159],{"text":3160,"type":19},"[9]: https://vercel.com/docs/getting-started-with-vercel \"Getting started with Vercel\"",{"type":15,"children":3162},[3163],{"text":3164,"type":19},"[10]: https://vercel.com/docs/frameworks/frontend/vite \"Vite on Vercel\"","2026-03-14T14:38:41.140Z","2026-03-14T14:38:41.292Z",{"id":3168,"documentId":3169,"name":3170,"alternativeText":3171,"caption":3171,"focalPoint":3171,"width":3172,"height":3173,"formats":3174,"hash":3208,"ext":3176,"mime":3179,"size":3209,"url":3210,"previewUrl":3171,"provider":3211,"provider_metadata":3171,"createdAt":3212,"updatedAt":3212,"publishedAt":3212},13,"hzw6wbeb79ld70766lu25egm","learn-javascript-from-scratch-to-vercel-deployment.png",null,1536,1024,{"large":3175,"small":3185,"medium":3193,"thumbnail":3200},{"ext":3176,"url":3177,"hash":3178,"mime":3179,"name":3180,"path":3171,"size":3181,"width":3182,"height":3183,"sizeInBytes":3184},".png","https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_learn_javascript_from_scratch_to_vercel_deployment_5065599d29.png","large_learn_javascript_from_scratch_to_vercel_deployment_5065599d29","image/png","large_learn-javascript-from-scratch-to-vercel-deployment.png",980.88,1000,667,980882,{"ext":3176,"url":3186,"hash":3187,"mime":3179,"name":3188,"path":3171,"size":3189,"width":3190,"height":3191,"sizeInBytes":3192},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_learn_javascript_from_scratch_to_vercel_deployment_5065599d29.png","small_learn_javascript_from_scratch_to_vercel_deployment_5065599d29","small_learn-javascript-from-scratch-to-vercel-deployment.png",279.99,500,333,279989,{"ext":3176,"url":3194,"hash":3195,"mime":3179,"name":3196,"path":3171,"size":3197,"width":3198,"height":3190,"sizeInBytes":3199},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_learn_javascript_from_scratch_to_vercel_deployment_5065599d29.png","medium_learn_javascript_from_scratch_to_vercel_deployment_5065599d29","medium_learn-javascript-from-scratch-to-vercel-deployment.png",579.74,750,579744,{"ext":3176,"url":3201,"hash":3202,"mime":3179,"name":3203,"path":3171,"size":3204,"width":3205,"height":3206,"sizeInBytes":3207},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_learn_javascript_from_scratch_to_vercel_deployment_5065599d29.png","thumbnail_learn_javascript_from_scratch_to_vercel_deployment_5065599d29","thumbnail_learn-javascript-from-scratch-to-vercel-deployment.png",73.01,234,156,73012,"learn_javascript_from_scratch_to_vercel_deployment_5065599d29",638.43,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/learn_javascript_from_scratch_to_vercel_deployment_5065599d29.png","strapi-provider-upload-strapi-cloud","2026-03-14T14:30:57.125Z",{"id":3214,"documentId":3215,"name":3216,"slug":3217,"bio":3218,"createdAt":3219,"updatedAt":3219,"publishedAt":3220},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",[3222,3274,3320,3365,3411,3456],{"id":3223,"documentId":3224,"title":3225,"slug":3226,"excerpt":3227,"difficulty":11,"estimatedCost":3228,"seoTitle":3229,"seoDescription":3230,"createdAt":3231,"updatedAt":3231,"publishedAt":3232,"maturity":3233,"coverImage":3234},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","stable",{"id":3235,"documentId":3236,"name":3237,"alternativeText":3171,"caption":3171,"focalPoint":3171,"width":3238,"height":3239,"formats":3240,"hash":3270,"ext":3176,"mime":3179,"size":3271,"url":3272,"previewUrl":3171,"provider":3211,"provider_metadata":3171,"createdAt":3273,"updatedAt":3273,"publishedAt":3273},6,"ap2d2wcmasourkoh3f5l0wyi","cover-astro-tailwind-css-modern-landing-pages.png",1857,949,{"large":3241,"small":3248,"medium":3255,"thumbnail":3262},{"ext":3176,"url":3242,"hash":3243,"mime":3179,"name":3244,"path":3171,"size":3245,"width":3182,"height":3246,"sizeInBytes":3247},"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":3176,"url":3249,"hash":3250,"mime":3179,"name":3251,"path":3171,"size":3252,"width":3190,"height":3253,"sizeInBytes":3254},"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":3176,"url":3256,"hash":3257,"mime":3179,"name":3258,"path":3171,"size":3259,"width":3198,"height":3260,"sizeInBytes":3261},"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":3176,"url":3263,"hash":3264,"mime":3179,"name":3265,"path":3171,"size":3266,"width":3267,"height":3268,"sizeInBytes":3269},"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":3275,"documentId":3276,"title":3277,"slug":3278,"excerpt":3279,"difficulty":11,"estimatedCost":3280,"seoTitle":3281,"seoDescription":3282,"createdAt":3283,"updatedAt":3284,"publishedAt":3285,"maturity":3233,"coverImage":3286},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",{"id":3287,"documentId":3288,"name":3289,"alternativeText":3171,"caption":3171,"focalPoint":3171,"width":3172,"height":3173,"formats":3290,"hash":3315,"ext":3176,"mime":3179,"size":3316,"url":3317,"previewUrl":3171,"provider":3211,"provider_metadata":3171,"createdAt":3318,"updatedAt":3318,"publishedAt":3319},5,"mekbtcfjrui3pj6ixju8k812","astro-content-collection-portfolio-development.png",{"large":3291,"small":3297,"medium":3303,"thumbnail":3309},{"ext":3176,"url":3292,"hash":3293,"mime":3179,"name":3294,"path":3171,"size":3295,"width":3182,"height":3183,"sizeInBytes":3296},"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":3176,"url":3298,"hash":3299,"mime":3179,"name":3300,"path":3171,"size":3301,"width":3190,"height":3191,"sizeInBytes":3302},"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":3176,"url":3304,"hash":3305,"mime":3179,"name":3306,"path":3171,"size":3307,"width":3198,"height":3190,"sizeInBytes":3308},"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":3176,"url":3310,"hash":3311,"mime":3179,"name":3312,"path":3171,"size":3313,"width":3205,"height":3206,"sizeInBytes":3314},"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":3287,"documentId":3321,"title":3322,"slug":3323,"excerpt":3324,"difficulty":11,"estimatedCost":3325,"seoTitle":3326,"seoDescription":3327,"createdAt":3328,"updatedAt":3329,"publishedAt":3330,"maturity":3233,"coverImage":3331},"ru06yk2a087zqapworwd6rsg","Nuxt 4 + Strapi 5","nuxt-4-strapi-5-primevue","A modern content-driven stack for SEO-friendly websites, blogs, documentation platforms, and scalable editorial projects.","Low to medium depending on hosting, media usage, and database provider.","Nuxt 4 + Strapi 5 + PrimeVueStack Guide for Modern Content-Driven Websites","Learn when to use Nuxt 4 with Strapi 5 and Prime Vue Components, its strengths, limitations, architecture patterns, and official resources for production-ready projects.","2026-03-08T18:43:39.573Z","2026-03-08T18:57:30.703Z","2026-03-08T18:57:30.958Z",{"id":3332,"documentId":3333,"name":3334,"alternativeText":3171,"caption":3171,"focalPoint":3171,"width":3172,"height":3173,"formats":3335,"hash":3360,"ext":3176,"mime":3179,"size":3361,"url":3362,"previewUrl":3171,"provider":3211,"provider_metadata":3171,"createdAt":3363,"updatedAt":3363,"publishedAt":3364},2,"b46gf1zi57op33uk2w07h9j6","modernwebdashboard.png",{"large":3336,"small":3342,"medium":3348,"thumbnail":3354},{"ext":3176,"url":3337,"hash":3338,"mime":3179,"name":3339,"path":3171,"size":3340,"width":3182,"height":3183,"sizeInBytes":3341},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_modernwebdashboard_b49d2560d2.png","large_modernwebdashboard_b49d2560d2","large_modernwebdashboard.png",990.81,990808,{"ext":3176,"url":3343,"hash":3344,"mime":3179,"name":3345,"path":3171,"size":3346,"width":3190,"height":3191,"sizeInBytes":3347},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_modernwebdashboard_b49d2560d2.png","small_modernwebdashboard_b49d2560d2","small_modernwebdashboard.png",268.68,268682,{"ext":3176,"url":3349,"hash":3350,"mime":3179,"name":3351,"path":3171,"size":3352,"width":3198,"height":3190,"sizeInBytes":3353},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_modernwebdashboard_b49d2560d2.png","medium_modernwebdashboard_b49d2560d2","medium_modernwebdashboard.png",571.02,571018,{"ext":3176,"url":3355,"hash":3356,"mime":3179,"name":3357,"path":3171,"size":3358,"width":3205,"height":3206,"sizeInBytes":3359},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_modernwebdashboard_b49d2560d2.png","thumbnail_modernwebdashboard_b49d2560d2","thumbnail_modernwebdashboard.png",69.13,69125,"modernwebdashboard_b49d2560d2",574.58,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/modernwebdashboard_b49d2560d2.png","2026-03-08T18:43:20.691Z","2026-03-08T18:43:20.698Z",{"id":3366,"documentId":3367,"title":3368,"slug":3369,"excerpt":3370,"difficulty":3371,"estimatedCost":3372,"seoTitle":3373,"seoDescription":3374,"createdAt":3375,"updatedAt":3375,"publishedAt":3376,"maturity":3233,"coverImage":3377},4,"zu3qggap5kjtcwsfzkm1a1zf","Next.js + Sanity","nextjs-sanity","A flexible stack for content-rich websites that need strong editorial tooling, fast previews, and modern React-based frontend delivery.","intermediate","Medium depending on content volume, image delivery, preview usage, and hosting plan. seoTitle: Next.js + Sanity Stack Guide for Content Platforms and Modern Editorial Sites","Next.js + Sanity Stack Guide for Content Platforms and Modern Editorial Sites","Explore the Next.js + Sanity stack, including architecture, ideal use cases, benefits, trade-offs, and key documentation resources.","2026-03-08T18:51:03.536Z","2026-03-08T18:51:03.784Z",{"id":3378,"documentId":3379,"name":3380,"alternativeText":3171,"caption":3171,"focalPoint":3171,"width":3172,"height":3173,"formats":3381,"hash":3406,"ext":3176,"mime":3179,"size":3407,"url":3408,"previewUrl":3171,"provider":3211,"provider_metadata":3171,"createdAt":3409,"updatedAt":3409,"publishedAt":3410},3,"ml2ee2zpq4kzbtab101u9ghd","sanitynextjs.png",{"large":3382,"small":3388,"medium":3394,"thumbnail":3400},{"ext":3176,"url":3383,"hash":3384,"mime":3179,"name":3385,"path":3171,"size":3386,"width":3182,"height":3183,"sizeInBytes":3387},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_sanitynextjs_18c9cce218.png","large_sanitynextjs_18c9cce218","large_sanitynextjs.png",915.04,915039,{"ext":3176,"url":3389,"hash":3390,"mime":3179,"name":3391,"path":3171,"size":3392,"width":3190,"height":3191,"sizeInBytes":3393},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_sanitynextjs_18c9cce218.png","small_sanitynextjs_18c9cce218","small_sanitynextjs.png",243.44,243439,{"ext":3176,"url":3395,"hash":3396,"mime":3179,"name":3397,"path":3171,"size":3398,"width":3198,"height":3190,"sizeInBytes":3399},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_sanitynextjs_18c9cce218.png","medium_sanitynextjs_18c9cce218","medium_sanitynextjs.png",524.8,524801,{"ext":3176,"url":3401,"hash":3402,"mime":3179,"name":3403,"path":3171,"size":3404,"width":3205,"height":3206,"sizeInBytes":3405},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_sanitynextjs_18c9cce218.png","thumbnail_sanitynextjs_18c9cce218","thumbnail_sanitynextjs.png",62.39,62392,"sanitynextjs_18c9cce218",521.69,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/sanitynextjs_18c9cce218.png","2026-03-08T18:46:03.464Z","2026-03-08T18:46:03.471Z",{"id":3412,"documentId":3413,"title":3414,"slug":3415,"excerpt":3416,"difficulty":11,"estimatedCost":3417,"seoTitle":3418,"seoDescription":3419,"createdAt":3420,"updatedAt":3421,"publishedAt":3422,"maturity":3233,"coverImage":3423},14,"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":3424,"documentId":3425,"name":3426,"alternativeText":3171,"caption":3171,"focalPoint":3171,"width":3172,"height":3173,"formats":3427,"hash":3452,"ext":3176,"mime":3179,"size":3453,"url":3454,"previewUrl":3171,"provider":3211,"provider_metadata":3171,"createdAt":3455,"updatedAt":3455,"publishedAt":3455},7,"dilgak8bwsjs0yty173tnbg9","svelkit-tailwindcss-landing-page.png",{"large":3428,"small":3434,"medium":3440,"thumbnail":3446},{"ext":3176,"url":3429,"hash":3430,"mime":3179,"name":3431,"path":3171,"size":3432,"width":3182,"height":3183,"sizeInBytes":3433},"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":3176,"url":3435,"hash":3436,"mime":3179,"name":3437,"path":3171,"size":3438,"width":3190,"height":3191,"sizeInBytes":3439},"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":3176,"url":3441,"hash":3442,"mime":3179,"name":3443,"path":3171,"size":3444,"width":3198,"height":3190,"sizeInBytes":3445},"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":3176,"url":3447,"hash":3448,"mime":3179,"name":3449,"path":3171,"size":3450,"width":3205,"height":3206,"sizeInBytes":3451},"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",{"id":3457,"documentId":3458,"title":3459,"slug":3460,"excerpt":3461,"difficulty":3371,"estimatedCost":3462,"seoTitle":3463,"seoDescription":3464,"createdAt":3465,"updatedAt":3466,"publishedAt":3467,"maturity":3233,"coverImage":3468},18,"ry8zfojo2yql8s554das8x27","Scalable NestJS Backend Stack","scalable-nest-js-backend-stack","A structured backend stack for teams that want strong TypeScript support, scalable architecture, reliable relational data, and clean long-term maintainability for modern APIs and backend systems.","Low to moderate, depending on scale","Scalable NestJS Backend Stack Guide","Learn when to use NestJS with PostgreSQL, Prisma, Redis, and BullMQ for scalable APIs, SaaS platforms, queue-driven systems, and modern TypeScript backend services.","2026-03-11T02:07:18.303Z","2026-03-11T02:10:19.671Z","2026-03-11T02:10:19.872Z",{"id":3469,"documentId":3470,"name":3471,"alternativeText":3171,"caption":3171,"focalPoint":3171,"width":3172,"height":3173,"formats":3472,"hash":3497,"ext":3176,"mime":3179,"size":3498,"url":3499,"previewUrl":3171,"provider":3211,"provider_metadata":3171,"createdAt":3500,"updatedAt":3500,"publishedAt":3500},8,"iiixq48ujzm6kfz3si5qbk9x","Scalable NestJS Backend Stack.png",{"large":3473,"small":3479,"medium":3485,"thumbnail":3491},{"ext":3176,"url":3474,"hash":3475,"mime":3179,"name":3476,"path":3171,"size":3477,"width":3182,"height":3183,"sizeInBytes":3478},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_Scalable_Nest_JS_Backend_Stack_c52c6aa299.png","large_Scalable_Nest_JS_Backend_Stack_c52c6aa299","large_Scalable NestJS Backend Stack.png",1280.39,1280388,{"ext":3176,"url":3480,"hash":3481,"mime":3179,"name":3482,"path":3171,"size":3483,"width":3190,"height":3191,"sizeInBytes":3484},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_Scalable_Nest_JS_Backend_Stack_c52c6aa299.png","small_Scalable_Nest_JS_Backend_Stack_c52c6aa299","small_Scalable NestJS Backend Stack.png",307.8,307801,{"ext":3176,"url":3486,"hash":3487,"mime":3179,"name":3488,"path":3171,"size":3489,"width":3198,"height":3190,"sizeInBytes":3490},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_Scalable_Nest_JS_Backend_Stack_c52c6aa299.png","medium_Scalable_Nest_JS_Backend_Stack_c52c6aa299","medium_Scalable NestJS Backend Stack.png",704.24,704237,{"ext":3176,"url":3492,"hash":3493,"mime":3179,"name":3494,"path":3171,"size":3495,"width":3205,"height":3206,"sizeInBytes":3496},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_Scalable_Nest_JS_Backend_Stack_c52c6aa299.png","thumbnail_Scalable_Nest_JS_Backend_Stack_c52c6aa299","thumbnail_Scalable NestJS Backend Stack.png",71.92,71922,"Scalable_Nest_JS_Backend_Stack_c52c6aa299",935.84,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/Scalable_Nest_JS_Backend_Stack_c52c6aa299.png","2026-03-11T01:48:45.609Z",{"pagination":3502},{"page":3214,"pageSize":3503,"pageCount":3214,"total":3214},25]