Add flutter courses

Add links with more information about Flutter and tutorials

.github/sponsors/doppler-logo.svg

@@ -0,0 +1,17 @@
+<svg width="527" height="83" viewBox="0 0 527 83" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M135.783 59.3472C136.392 59.4025 137.083 59.4578 137.858 59.5132C138.688 59.5132 139.656 59.5132 140.763 59.5132C147.237 59.5132 152.023 57.8808 155.122 54.6162C158.276 51.3515 159.853 46.8418 159.853 41.0872C159.853 35.0558 158.359 30.4908 155.371 27.3921C152.383 24.2935 147.652 22.7441 141.178 22.7441C140.293 22.7441 139.38 22.7718 138.439 22.8271C138.068 22.8271 137.705 22.8358 137.351 22.853C136.45 22.8969 135.783 23.6663 135.783 24.5677V59.3472ZM173.216 41.0872C173.216 46.0672 172.441 50.4108 170.892 54.1182C169.343 57.8255 167.129 60.8965 164.252 63.3312C161.43 65.7658 157.972 67.5918 153.877 68.8092C149.782 70.0265 145.19 70.6352 140.099 70.6352C137.775 70.6352 135.064 70.5245 131.965 70.3032C129.364 70.1638 126.801 69.8684 124.278 69.4171C123.436 69.2666 122.835 68.527 122.835 67.6721V13.1161C125.823 12.5628 128.922 12.2031 132.131 12.0371C135.396 11.8158 138.19 11.7051 140.514 11.7051C145.439 11.7051 149.893 12.2585 153.877 13.3651C157.916 14.4718 161.375 16.2148 164.252 18.5941C167.129 20.9735 169.343 24.0168 170.892 27.7241C172.441 31.4315 173.216 35.8858 173.216 41.0872Z" fill="#111111"/>
+<path d="M199.262 41.0872C199.262 43.9092 199.594 46.4545 200.258 48.7232C200.977 50.9918 201.973 52.9562 203.246 54.6162C204.574 56.2208 206.178 57.4658 208.06 58.3512C209.941 59.2365 212.099 59.6792 214.534 59.6792C216.913 59.6792 219.043 59.2365 220.925 58.3512C222.861 57.4658 224.466 56.2208 225.739 54.6162C227.067 52.9562 228.063 50.9918 228.727 48.7232C229.446 46.4545 229.806 43.9092 229.806 41.0872C229.806 38.2652 229.446 35.7198 228.727 33.4511C228.063 31.1271 227.067 29.1628 225.739 27.5581C224.466 25.8981 222.861 24.6255 220.925 23.7401C219.043 22.8548 216.913 22.4121 214.534 22.4121C212.099 22.4121 209.941 22.8825 208.06 23.8231C206.178 24.7085 204.574 25.9811 203.246 27.6411C201.973 29.2458 200.977 31.2101 200.258 33.5341C199.594 35.8028 199.262 38.3205 199.262 41.0872ZM243.169 41.0872C243.169 46.0118 242.422 50.3555 240.928 54.1182C239.489 57.8255 237.497 60.9518 234.952 63.4972C232.406 65.9872 229.363 67.8685 225.822 69.1412C222.336 70.4138 218.573 71.0502 214.534 71.0502C210.605 71.0502 206.898 70.4138 203.412 69.1412C199.926 67.8685 196.882 65.9872 194.282 63.4972C191.681 60.9518 189.634 57.8255 188.14 54.1182C186.646 50.3555 185.899 46.0118 185.899 41.0872C185.899 36.1625 186.673 31.8465 188.223 28.1391C189.772 24.3765 191.847 21.2225 194.448 18.6771C197.104 16.1318 200.147 14.2228 203.578 12.9501C207.064 11.6775 210.716 11.0411 214.534 11.0411C218.462 11.0411 222.17 11.6775 225.656 12.9501C229.142 14.2228 232.185 16.1318 234.786 18.6771C237.386 21.2225 239.434 24.3765 240.928 28.1391C242.422 31.8465 243.169 36.1625 243.169 41.0872Z" fill="#111111"/>
+<path d="M275.584 11.7051C284.16 11.7051 290.745 13.2268 295.338 16.2701C299.93 19.2581 302.227 24.1828 302.227 31.0441C302.227 37.9608 299.903 42.9685 295.255 46.0672C290.607 49.1105 283.967 50.6322 275.335 50.6322H273.066C272.073 50.6322 271.268 51.4373 271.268 52.4306V69.8882H260.118C259.125 69.8882 258.32 69.083 258.32 68.0897V13.1991C261.141 12.6458 264.13 12.2585 267.284 12.0371C270.438 11.8158 273.204 11.7051 275.584 11.7051ZM276.414 22.7441C275.473 22.7441 274.532 22.7718 273.592 22.8271C273.359 22.8417 273.135 22.8562 272.918 22.8707C271.984 22.9331 271.268 23.7126 271.268 24.6479V39.5931H275.335C279.817 39.5931 283.192 38.9845 285.461 37.7671C287.729 36.5498 288.864 34.2811 288.864 30.9611C288.864 29.3565 288.559 28.0285 287.951 26.9771C287.397 25.9258 286.567 25.0958 285.461 24.4871C284.409 23.8231 283.109 23.3805 281.56 23.1591C280.01 22.8825 278.295 22.7441 276.414 22.7441Z" fill="#111111"/>
+<path d="M333.356 11.7051C341.933 11.7051 348.517 13.2268 353.11 16.2701C357.703 19.2581 359.999 24.1828 359.999 31.0441C359.999 37.9608 357.675 42.9685 353.027 46.0672C348.379 49.1105 341.739 50.6322 333.107 50.6322H330.838C329.845 50.6322 329.04 51.4373 329.04 52.4306V69.8882H317.89C316.897 69.8882 316.092 69.083 316.092 68.0897V13.1991C318.914 12.6458 321.902 12.2585 325.056 12.0371C328.21 11.8158 330.977 11.7051 333.356 11.7051ZM334.186 22.7441C333.245 22.7441 332.305 22.7718 331.364 22.8271C331.132 22.8417 330.907 22.8562 330.69 22.8707C329.757 22.9331 329.04 23.7126 329.04 24.6479V39.5931H333.107C337.589 39.5931 340.964 38.9845 343.233 37.7671C345.502 36.5498 346.636 34.2811 346.636 30.9611C346.636 29.3565 346.332 28.0285 345.723 26.9771C345.17 25.9258 344.34 25.0958 343.233 24.4871C342.182 23.8231 340.881 23.3805 339.332 23.1591C337.783 22.8825 336.067 22.7441 334.186 22.7441Z" fill="#111111"/>
+<path d="M410.14 58.7662C410.472 58.7662 410.74 59.0345 410.74 59.3656V69.2887C410.74 69.6198 410.472 69.8882 410.14 69.8882H375.663C374.67 69.8882 373.865 69.083 373.865 68.0897V17.3101C373.865 16.5002 374.405 15.7901 375.186 15.5748L386.813 12.3691V58.7662H410.14Z" fill="#111111"/>
+<path d="M426.789 69.8882C425.796 69.8882 424.991 69.083 424.991 68.0897V12.3691H464.944C465.344 12.3691 465.632 12.753 465.52 13.1367L462.694 22.8107C462.62 23.0664 462.385 23.2421 462.119 23.2421H439.737C438.744 23.2421 437.939 24.0473 437.939 25.0406V34.5301H458.554C458.953 34.5301 459.241 34.9136 459.129 35.2972L456.384 44.7223C456.31 44.9782 456.075 45.1542 455.809 45.1542H439.737C438.744 45.1542 437.939 45.9593 437.939 46.9526V59.0152H466.05C466.449 59.0152 466.737 59.3983 466.626 59.7818L463.817 69.4558C463.743 69.7119 463.508 69.8882 463.242 69.8882H426.789Z" fill="#111111"/>
+<path d="M496.532 11.7051C505.164 11.7051 511.776 13.2545 516.369 16.3531C520.962 19.3965 523.258 24.1551 523.258 30.6291C523.258 34.6685 522.317 37.9608 520.436 40.5061C518.61 42.9961 515.954 44.9605 512.468 46.3992C513.63 47.8378 514.847 49.4978 516.12 51.3792C517.393 53.2052 518.638 55.1418 519.855 57.1892C521.128 59.1812 522.345 61.2838 523.507 63.4972C524.512 65.3633 525.455 67.2088 526.335 69.0336C526.527 69.4299 526.237 69.8882 525.797 69.8882H512.571C512.354 69.8882 512.154 69.7707 512.047 69.5812C511.05 67.7993 510.029 65.9926 508.982 64.1612C507.931 62.2245 506.824 60.3432 505.662 58.5172C504.555 56.6912 503.449 54.9758 502.342 53.3712C501.235 51.7112 500.129 50.2172 499.022 48.8892H494.43C493.436 48.8892 492.631 49.6943 492.631 50.6876V69.8882H481.482C480.488 69.8882 479.683 69.083 479.683 68.0897V13.1991C482.505 12.6458 485.41 12.2585 488.398 12.0371C491.441 11.8158 494.153 11.7051 496.532 11.7051ZM497.279 22.7441C496.338 22.7441 495.481 22.7718 494.706 22.8271C494.563 22.8381 494.421 22.8491 494.281 22.8601C493.348 22.933 492.631 23.7126 492.631 24.6479V38.5972H496.283C501.152 38.5972 504.638 37.9885 506.741 36.7711C508.844 35.5538 509.895 33.4788 509.895 30.5461C509.895 27.7241 508.816 25.7321 506.658 24.5701C504.555 23.3528 501.429 22.7441 497.279 22.7441Z" fill="#111111"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.52378 0C0.860841 0 0.468192 0.732463 0.825109 1.29112L15.7055 24.5822C16.936 26.5083 19.0574 27.6739 21.343 27.6739H41.4698C48.8467 27.6739 53.4585 34.1966 53.4315 41.5C53.4045 48.8034 48.49 55.2611 41.4698 55.2611H19.982C18.7491 55.2611 17.7542 56.2606 17.7542 57.4936V80.7699C17.7542 82.0016 18.747 83 19.9786 83H47.4274C71.1783 83 82.9858 60.4663 83.0002 41.5C83.0146 22.5337 71.3453 0 47.4274 0H1.52378ZM11.2867 55.3259H5.94311C2.66082 55.3259 0 58.4222 0 62.2417V73.2033V82.3895C0 82.7206 0.268396 82.989 0.599478 82.989H5.94311C9.22539 82.989 11.8862 79.8927 11.8862 76.0732V55.9254C11.8862 55.5943 11.6178 55.3259 11.2867 55.3259Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="66.2481" y1="-2.76031" x2="7.59388" y2="75.9105" gradientUnits="userSpaceOnUse">
+<stop offset="0.0364583" stop-color="#409FF8"/>
+<stop offset="0.5" stop-color="#1673FF"/>
+<stop offset="1" stop-color="#516FF7"/>
+</linearGradient>
+</defs>
+</svg>

.github/sponsors/oss-logo.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 646.6 105.7" style="enable-background:new 0 0 646.6 105.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#104366;}
+	.st1{fill:#4086C6;}
+</style>
+<g>
+	<path class="st0" d="M21.1,79.8c-6.6-3.5-11.7-8.4-15.5-14.6C1.9,59,0,52,0,44.3c0-7.8,1.9-14.7,5.6-20.9
+		c3.7-6.2,8.9-11.1,15.5-14.6c6.6-3.5,14-5.3,22.2-5.3c8.2,0,15.6,1.8,22.1,5.3c6.6,3.5,11.7,8.4,15.5,14.6
+		c3.8,6.2,5.6,13.2,5.6,20.9c0,7.8-1.9,14.7-5.6,20.9c-3.8,6.2-8.9,11.1-15.5,14.6c-6.5,3.5-13.9,5.3-22.1,5.3
+		C35,85.1,27.6,83.4,21.1,79.8z M55.9,66.3c3.8-2.1,6.7-5.1,8.9-9c2.1-3.8,3.2-8.2,3.2-13.1c0-4.9-1.1-9.3-3.2-13.1
+		c-2.1-3.8-5.1-6.8-8.9-9c-3.8-2.1-8-3.2-12.6-3.2c-4.7,0-8.9,1.1-12.6,3.2s-6.7,5.1-8.9,9c-2.1,3.8-3.2,8.2-3.2,13.1
+		c0,4.9,1.1,9.3,3.2,13.1c2.1,3.8,5.1,6.8,8.9,9c3.8,2.1,8,3.2,12.6,3.2C47.9,69.5,52.1,68.5,55.9,66.3z"/>
+	<path class="st0" d="M108.1,82.6c-5.8-1.7-10.5-3.9-14.1-6.6l6.2-13.8c3.4,2.5,7.4,4.5,12.1,6c4.7,1.5,9.3,2.3,14,2.3
+		c5.2,0,9-0.8,11.5-2.3c2.5-1.5,3.7-3.6,3.7-6.2c0-1.9-0.7-3.4-2.2-4.7c-1.5-1.2-3.3-2.2-5.6-3c-2.3-0.8-5.4-1.6-9.3-2.5
+		c-6-1.4-11-2.9-14.8-4.3c-3.8-1.4-7.1-3.7-9.9-6.9c-2.7-3.2-4.1-7.4-4.1-12.6c0-4.6,1.2-8.7,3.7-12.5c2.5-3.7,6.2-6.7,11.2-8.9
+		c5-2.2,11.1-3.3,18.3-3.3c5,0,10,0.6,14.8,1.8c4.8,1.2,9,2.9,12.6,5.2l-5.6,13.9c-7.3-4.1-14.6-6.2-21.9-6.2
+		c-5.1,0-8.9,0.8-11.3,2.5c-2.4,1.7-3.7,3.8-3.7,6.5c0,2.7,1.4,4.7,4.2,6c2.8,1.3,7.1,2.6,12.9,3.9c6,1.4,11,2.9,14.8,4.3
+		c3.8,1.4,7.1,3.7,9.9,6.8c2.7,3.1,4.1,7.3,4.1,12.5c0,4.5-1.3,8.6-3.8,12.4c-2.5,3.7-6.3,6.7-11.3,8.9c-5,2.2-11.2,3.3-18.4,3.3
+		C120,85.1,113.9,84.3,108.1,82.6z"/>
+	<path class="st0" d="M180.1,82.6c-5.8-1.7-10.5-3.9-14.1-6.6l6.2-13.8c3.4,2.5,7.4,4.5,12.1,6c4.7,1.5,9.3,2.3,14,2.3
+		c5.2,0,9-0.8,11.5-2.3c2.5-1.5,3.7-3.6,3.7-6.2c0-1.9-0.7-3.4-2.2-4.7c-1.5-1.2-3.3-2.2-5.6-3c-2.3-0.8-5.4-1.6-9.3-2.5
+		c-6-1.4-10.9-2.9-14.8-4.3c-3.8-1.4-7.1-3.7-9.9-6.9c-2.7-3.2-4.1-7.4-4.1-12.6c0-4.6,1.2-8.7,3.7-12.5c2.5-3.7,6.2-6.7,11.2-8.9
+		s11.1-3.3,18.3-3.3c5,0,10,0.6,14.8,1.8c4.8,1.2,9,2.9,12.6,5.2l-5.6,13.9c-7.3-4.1-14.6-6.2-21.9-6.2c-5.1,0-8.9,0.8-11.3,2.5
+		c-2.4,1.7-3.7,3.8-3.7,6.5c0,2.7,1.4,4.7,4.2,6c2.8,1.3,7.1,2.6,12.9,3.9c6,1.4,10.9,2.9,14.8,4.3s7.1,3.7,9.9,6.8
+		c2.7,3.1,4.1,7.3,4.1,12.5c0,4.5-1.3,8.6-3.8,12.4c-2.5,3.7-6.3,6.7-11.3,8.9c-5,2.2-11.2,3.3-18.4,3.3
+		C192,85.1,186,84.3,180.1,82.6z"/>
+	<path class="st1" d="M293.2,79.1c-6.2-3.5-11.1-8.2-14.7-14.3c-3.6-6.1-5.4-12.9-5.4-20.5c0-7.6,1.8-14.5,5.4-20.5
+		c3.6-6.1,8.5-10.9,14.7-14.3c6.2-3.5,13.2-5.2,20.9-5.2c5.7,0,11,0.9,15.8,2.8c4.8,1.8,8.9,4.6,12.3,8.2l-3.6,3.7
+		c-6.3-6.2-14.4-9.4-24.3-9.4c-6.6,0-12.6,1.5-18.1,4.5c-5.4,3-9.7,7.2-12.8,12.5s-4.6,11.2-4.6,17.8s1.5,12.5,4.6,17.8
+		c3.1,5.3,7.3,9.5,12.8,12.5c5.4,3,11.4,4.5,18.1,4.5c9.8,0,17.9-3.2,24.3-9.5l3.6,3.7c-3.4,3.6-7.5,6.4-12.4,8.2
+		c-4.9,1.9-10.1,2.8-15.7,2.8C306.3,84.3,299.4,82.6,293.2,79.1z"/>
+	<path class="st1" d="M395.4,30c3.9,3.7,5.9,9.2,5.9,16.4v37.4h-5.4V73.3c-1.9,3.5-4.6,6.2-8.2,8.1c-3.6,1.9-7.9,2.9-13,2.9
+		c-6.5,0-11.7-1.5-15.5-4.6c-3.8-3.1-5.7-7.1-5.7-12.2c0-4.9,1.8-8.9,5.2-11.9c3.5-3,9.1-4.6,16.8-4.6h20.2v-4.7
+		c0-5.5-1.5-9.7-4.5-12.5c-3-2.9-7.3-4.3-13-4.3c-3.9,0-7.7,0.7-11.2,2c-3.6,1.4-6.6,3.2-9.1,5.4l-2.8-4.1c2.9-2.6,6.5-4.7,10.6-6.2
+		c4.1-1.5,8.5-2.2,13-2.2C385.9,24.4,391.5,26.3,395.4,30z M387.9,76.2c3.4-2.3,6-5.5,7.7-9.8V55.3h-20.1c-5.8,0-10,1.1-12.6,3.2
+		c-2.6,2.1-3.9,5-3.9,8.7c0,3.8,1.4,6.9,4.3,9.1c2.9,2.2,6.9,3.3,12.1,3.3C380.3,79.6,384.5,78.5,387.9,76.2z"/>
+	<path class="st1" d="M469,28.2c4.4,2.6,7.9,6.1,10.4,10.6c2.5,4.5,3.8,9.7,3.8,15.5c0,5.8-1.3,11-3.8,15.5
+		c-2.5,4.6-6,8.1-10.4,10.6c-4.4,2.5-9.4,3.8-14.9,3.8c-5.2,0-9.9-1.2-14.1-3.7c-4.2-2.4-7.5-5.9-9.8-10.2v35.3h-5.6V24.8h5.4v13.9
+		c2.3-4.5,5.6-8,9.9-10.6c4.2-2.5,9-3.8,14.3-3.8C459.6,24.4,464.6,25.7,469,28.2z M465.9,76c3.6-2.1,6.5-5,8.5-8.8
+		c2.1-3.8,3.1-8.1,3.1-12.9c0-4.8-1-9.1-3.1-12.9c-2.1-3.8-4.9-6.7-8.5-8.8c-3.6-2.1-7.7-3.2-12.2-3.2c-4.5,0-8.6,1.1-12.1,3.2
+		c-3.6,2.1-6.4,5-8.5,8.8c-2.1,3.8-3.1,8.1-3.1,12.9c0,4.8,1,9.1,3.1,12.9c2.1,3.8,4.9,6.7,8.5,8.8c3.6,2.1,7.6,3.2,12.1,3.2
+		C458.3,79.1,462.3,78.1,465.9,76z"/>
+	<path class="st1" d="M500.3,9.2c-0.9-0.9-1.4-1.9-1.4-3.2c0-1.3,0.5-2.4,1.4-3.3c0.9-0.9,2-1.4,3.3-1.4c1.3,0,2.4,0.4,3.3,1.3
+		c0.9,0.9,1.4,1.9,1.4,3.2c0,1.3-0.5,2.4-1.4,3.3c-0.9,0.9-2,1.4-3.3,1.4C502.3,10.5,501.2,10.1,500.3,9.2z M500.7,24.8h5.6v58.9
+		h-5.6V24.8z"/>
+	<path class="st1" d="M559.4,80c-1.4,1.4-3.2,2.4-5.4,3.1c-2.1,0.7-4.4,1.1-6.7,1.1c-5.1,0-9.1-1.4-11.9-4.2
+		c-2.8-2.8-4.2-6.8-4.2-11.8V29.7h-10.8v-4.9h10.8V12h5.6v12.9h18.7v4.9H537v37.9c0,3.8,0.9,6.8,2.8,8.8c1.8,2,4.6,3,8.2,3
+		c3.7,0,6.7-1.1,9.1-3.3L559.4,80z"/>
+	<path class="st1" d="M611.8,30c3.9,3.7,5.9,9.2,5.9,16.4v37.4h-5.4V73.3c-1.9,3.5-4.6,6.2-8.2,8.1c-3.6,1.9-7.9,2.9-13,2.9
+		c-6.5,0-11.7-1.5-15.5-4.6c-3.8-3.1-5.7-7.1-5.7-12.2c0-4.9,1.8-8.9,5.2-11.9c3.5-3,9.1-4.6,16.8-4.6H612v-4.7
+		c0-5.5-1.5-9.7-4.5-12.5c-3-2.9-7.3-4.3-13-4.3c-3.9,0-7.7,0.7-11.2,2c-3.6,1.4-6.6,3.2-9.1,5.4l-2.8-4.1c2.9-2.6,6.5-4.7,10.6-6.2
+		c4.1-1.5,8.5-2.2,13-2.2C602.3,24.4,607.9,26.3,611.8,30z M604.3,76.2c3.4-2.3,6-5.5,7.7-9.8V55.3h-20.1c-5.8,0-10,1.1-12.6,3.2
+		c-2.6,2.1-3.9,5-3.9,8.7c0,3.8,1.4,6.9,4.3,9.1c2.9,2.2,6.9,3.3,12.1,3.3C596.7,79.6,600.9,78.5,604.3,76.2z"/>
+	<path class="st1" d="M640.9,0h5.6v83.8h-5.6V0z"/>
+</g>
+</svg>

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Deployment to GitHub Pages
+name: Deployment to GH Pages
 on:
   push:
     branches: [ master ]
@@ -22,7 +22,7 @@ jobs:
       run: |
         npm run meta
         npm run build
-    - name: Deploy to GitHub Pages
+    - name: Deploy to GH Pages
       run: |
         git config user.email "kamranahmed.se@gmail.com"
         git config user.name "Kamran Ahmed"

README.md

@@ -1,39 +0,0 @@
-<p align="center">
-  <img src="public/brand.png" height="128">
-  <h2 align="center">roadmap.sh</h2>
-  <p align="center">Community driven roadmaps, articles and resources for developers<p>
-  <p align="center">
-    <a href="https://roadmap.sh/guides">
-    	<img src="https://img.shields.io/badge/-Guides-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-    <a href="https://roadmap.sh/roadmaps">
-    	<img src="https://img.shields.io/badge/-Roadmaps-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-    <a href="./contributing/guide.md">
-    	<img src="https://img.shields.io/badge/%E2%9D%A4-Contribute-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-  </p>
-</p>
-
-[roadmap.sh](https://roadmap.sh) is the community effort to create knowledge that is approachable for the developers.
-
-The website is built with Next.js, contains roadmaps which are the step by step guides for developers, guides which are the easier to understand explanations on the complex topics. Anyone can contribute to the website by suggesting changes to existing paths, adding learning resources, becoming an author by adding new guides, updating the existing guides.
-
-## Development
-
-Clone the repository, install the dependencies and start the application
-
-```bash
-git clone https://github.com/kamranahmedse/roadmap.sh
-yarn install
-yarn dev
-```
-
-## Contributions
-
-* Add new Roadmap
-* Suggest changes to existing roadmap
-* Write an article
-* Improve the site's codebase
-* Write tests
-

code_of_conduct.md

@@ -0,0 +1,76 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at <kamranahmed.se@gmail.com>. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

components/footer.tsx

@@ -33,7 +33,7 @@ function NavigationLinks() {
 
 export function Footer() {
   return (
-    <Box bg='gray.900' p={['25px 0', '25px 0', '40px 0']}>
+    <Box bg='brand.hero' p={['25px 0', '25px 0', '40px 0']}>
       <Container maxW='container.md'>
         <NavigationLinks />
 
@@ -65,8 +65,8 @@ export function Footer() {
         </Box>
       </Container>
 
-      <CustomAd />
+      {/*<CustomAd />*/}
-      {process.env.GA_SECRET && false && (
+      {process.env.GA_SECRET && (
         <script
           async
           type='text/javascript'

components/global-header.tsx

@@ -72,7 +72,7 @@ function MobileMenuLinks() {
                top={0}
                bg='gray.900'
                spacing='12px'
-               zIndex={1}
+               zIndex={999}
         >
           <Link href='/roadmaps'>Roadmaps</Link>
           <Link href='/guides'>Guides</Link>
@@ -86,9 +86,15 @@ function MobileMenuLinks() {
   );
 }
 
-export function GlobalHeader() {
+type GlobalHeaderProps = {
+  variant?: 'transparent' | 'solid'
+};
+
+export function GlobalHeader(props: GlobalHeaderProps) {
+  const { variant = 'solid' } = props;
+
   return (
-    <Box bg='gray.900' p='58px 0 20px'>
+    <Box bg={variant === 'solid' ? 'gray.900' : 'transparent'} p='20px 0'>
       <Container maxW='container.md'>
         <Flex justifyContent='space-between' alignItems='center'>
           <Box>

components/links-list-item.tsx

@@ -6,15 +6,17 @@ type LinksListItemProps = {
   title: string;
   subtitle: string;
   badgeText?: string;
+  target?: string;
   icon?: React.ReactChild;
   hideSubtitleOnMobile?: boolean;
 };
 
 export function LinksListItem(props: LinksListItemProps) {
-  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href } = props;
+  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href, target } = props;
 
   return (
     <Link
+      target={target || '_self'}
       href={href}
       fontSize={['14px', '14px', '15px']}
       py='9px'
@@ -24,6 +26,15 @@ export function LinksListItem(props: LinksListItemProps) {
       color='gray.600'
       alignItems={['flex-start', 'center']}
       justifyContent={'space-between'}
+      sx={{
+        '@media (hover: none)': {
+          '&:hover': {
+            '& .list-item-title': {
+              transform: 'none'
+            }
+          }
+        }
+      }}
       _hover={{
         textDecoration: 'none',
         color: 'blue.400',

components/md-renderer/mdx-components/badge-link.tsx

@@ -5,16 +5,18 @@ type BadgeLinkType = {
   target: string;
   badgeText: string;
   href: string;
+  colorScheme?: string;
   children: React.ReactNode
 };
 
 export function BadgeLink(props: BadgeLinkType) {
-  const { target = '_blank', badgeText, href, children } = props;
+  const { target = '_blank', colorScheme='purple', badgeText, href, children } = props;
 
   return (
-    <Text mb={0}>
+    <Text mb={'0px'}>
-      <Link fontWeight={500} textDecoration='underline' href={href} target={target}>
+      <Link fontSize='14px' color='blue.700' fontWeight={500} textDecoration='none' href={href} target={target} _hover={{ textDecoration: 'none', color: 'purple.400' }}>
-        <Badge colorScheme={'purple'} style={{ position: 'relative', top: '-2px' }}>{badgeText}</Badge> {children}
+        <Badge fontSize='11px' mr='7px' colorScheme={colorScheme}>{badgeText}</Badge>
+        {children}
       </Link>
     </Text>
   );

components/md-renderer/mdx-components/heading.tsx

@@ -5,7 +5,7 @@ import LinkIcon from 'components/icons/link.svg';
 const linkify = (Component: React.FunctionComponent<any>) => {
   return function EnrichedHeading(props: { children: string }): React.ReactNode {
     const text = props.children;
-    const id = text.toLowerCase && text
+    const id = text?.toLowerCase && text
       .toLowerCase()
       .replace(/[^\x00-\x7F]/g, '')
       .replace(/\s+/g, '-')
@@ -35,10 +35,10 @@ const HeaderLink = styled.a`
 
 const H1 = styled.h1`
   position: relative;
-  font-size: 42px;
+  font-size: 32px;
   line-height: 40px;
   font-weight: 700;
-  margin: 32px 0 10px !important;
+  margin: 20px 0 10px !important;
 
   &:hover ${HeaderLink} {
     display: flex;
@@ -46,12 +46,12 @@ const H1 = styled.h1`
 `;
 
 const H2 = styled(H1).attrs({ as: 'h2' })`
-  font-size: 32px;
+  font-size: 30px;
 `;
 
 const H3 = styled(H1).attrs({ as: 'h3' })`
   margin: 22px 0 8px;
-  font-size: 30px;
+  font-size: 28px;
 `;
 
 const H4 = styled(H1).attrs({ as: 'h4' })`
@@ -70,12 +70,12 @@ const H6 = styled(H1).attrs({ as: 'h6' })`
 `;
 
 const Headings = {
-  h1: linkify(H1),
+  h1: H1,
-  h2: linkify(H2),
+  h2: H2,
-  h3: linkify(H3),
+  h3: H3,
-  h4: linkify(H4),
+  h4: H4,
-  h5: linkify(H5),
+  h5: H5,
-  h6: linkify(H6)
+  h6: H6
 };
 
 export default Headings;

components/md-renderer/mdx-components/index.tsx

@@ -10,6 +10,7 @@ import EnrichedLink from './a';
 import { BadgeLink } from './badge-link';
 import { Li, Ul } from './ul';
 import PremiumBlock from './premium-block';
+import { ResourceGroupTitle } from './resource-group-title';
 
 const MdxComponents = {
   p: P,
@@ -22,6 +23,7 @@ const MdxComponents = {
   img: Img,
   code: Code,
   BadgeLink: BadgeLink,
+  ResourceGroupTitle: ResourceGroupTitle,
   PremiumBlock: PremiumBlock,
   ul: Ul,
   li: Li

components/md-renderer/mdx-components/resource-group-title.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Heading } from '@chakra-ui/react';
+
+type ResourceGroupTitleProps = {
+  children: React.ReactNode;
+};
+
+export function ResourceGroupTitle(props: ResourceGroupTitleProps) {
+  const { children } = props;
+
+  return <Heading mt='20px' color='gray.800' fontSize='14px' pb='5px' borderBottomWidth={1} textTransform='uppercase' as="h2" mb={'10px'}>{children}</Heading>;
+}

components/md-renderer/mdx-components/ul.tsx

@@ -5,6 +5,10 @@ import styled from 'styled-components';
 export const Ul = styled.ul`
   margin-left: 40px;
   margin-bottom: 18px;
+  
+  ul {
+    margin-top: 18px;
+  }
 `;
 
 export const Li = styled.li`

components/opensource-banner.tsx

@@ -2,7 +2,7 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
 
 export function OpensourceBanner() {
   return (
-    <Box borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['20px', '20px', '30px']} textAlign='center'>
+    <Box bg='white' borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['60px', '60px', '90px']} textAlign='center'>
       <Container maxW='container.md'>
         <Heading fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Open Source</Heading>
         <Text lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>The project is OpenSource,&nbsp;
@@ -12,7 +12,7 @@ export function OpensourceBanner() {
             target='_blank'
             borderBottomWidth={1}
             fontWeight={600}
-          >7th most starred project on GitHub</Link> and is visited by hundreds of thousands of
+          >6th most starred project on GitHub</Link> and is visited by hundreds of thousands of
           developers every month.</Text>
         <iframe
           src='https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large'

components/page-header.tsx

@@ -1,18 +1,21 @@
-import { Box, Container, Heading, Text } from '@chakra-ui/react';
+import { Badge, Box, Container, Heading, Link, Text } from '@chakra-ui/react';
 import React from 'react';
+import siteConfig from '../content/site.json';
 
 type PageHeaderProps = {
   title: string;
   subtitle: string;
   children?: React.ReactNode;
+  beforeTitle?: React.ReactNode;
 };
 
 export function PageHeader(props: PageHeaderProps) {
-  const { title, subtitle, children } = props;
+  const { title, subtitle, children, beforeTitle = null } = props;
 
   return (
     <Box pt={['25px', '20px', '45px']} pb={['20px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
       <Container maxW='container.md' position='relative'>
+        {beforeTitle}
         <Heading
           as='h1'
           color='black'

components/page-wrapper.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+
+type PageWrapperProps = {
+  children: React.ReactNode;
+}
+
+export function PageWrapper(props: PageWrapperProps) {
+  const { children } = props;
+
+  return (
+    <Box bgColor='brand.bg' bgImage='url(/bg.jpg)' bgRepeat='no-repeat' bgSize='100%' w='100%' minH='100vh'>
+      { children }
+    </Box>
+  );
+}

components/roadmap/content-drawer.tsx

@@ -0,0 +1,115 @@
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { RemoveScroll } from 'react-remove-scroll';
+import { RoadmapType } from '../../lib/roadmap';
+import RoadmapGroup from '../../pages/[roadmap]/[group]';
+import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
+
+type ContentDrawerProps = {
+  roadmap: RoadmapType;
+  groupId: string;
+  onClose?: () => void;
+};
+
+export function ContentDrawer(props: ContentDrawerProps) {
+  const { roadmap, groupId, onClose = () => null } = props;
+  if (!groupId) {
+    return null;
+  }
+
+  const isDone = localStorage.getItem(groupId) === 'done';
+
+  return (
+    <Box zIndex={99999} pos="relative">
+      <Box
+        onClick={onClose}
+        pos="fixed"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        bg="black"
+        opacity={0.4}
+      />
+      <RemoveScroll allowPinchZoom>
+        <Box
+          p="0px 30px 30px"
+          position="fixed"
+          w={['100%', '60%', '40%']}
+          bg="white"
+          top={0}
+          right={0}
+          bottom={0}
+          borderLeftWidth={'1px'}
+          overflowY="scroll"
+        >
+          <Flex
+            mt="20px"
+            justifyContent="space-between"
+            alignItems="center"
+            zIndex={1}
+          >
+            {!isDone && (
+              <Button
+                onClick={() => {
+                  localStorage.setItem(groupId, 'done');
+                  document
+                    .querySelectorAll(`[data-group-id*="-${groupId}"]`)
+                    .forEach((item) => item?.classList?.add('done'));
+                  onClose();
+                }}
+                colorScheme="green"
+                leftIcon={<CheckIcon />}
+                size="xs"
+                iconSpacing={0}
+              >
+                <Text
+                  as="span"
+                  d={['block', 'none', 'none', 'block']}
+                  ml="10px"
+                >
+                  Mark as Done
+                </Text>
+              </Button>
+            )}
+            {isDone && (
+              <Button
+                onClick={() => {
+                  localStorage.removeItem(groupId);
+                  document
+                    .querySelectorAll(`[data-group-id*="-${groupId}"]`)
+                    .forEach((item) => item?.classList?.remove('done'));
+                  onClose();
+                }}
+                colorScheme="red"
+                leftIcon={<RepeatIcon />}
+                size="xs"
+                iconSpacing={0}
+              >
+                <Text
+                  as="span"
+                  d={['block', 'none', 'none', 'block']}
+                  ml="10px"
+                >
+                  Mark as Pending
+                </Text>
+              </Button>
+            )}
+            <Button
+              onClick={onClose}
+              colorScheme="yellow"
+              ml="5px"
+              leftIcon={<CloseIcon width="8px" />}
+              iconSpacing={0}
+              size="xs"
+            >
+              <Text as="span" d={['none', 'none', 'none', 'block']} ml="10px">
+                Close
+              </Text>
+            </Button>
+          </Flex>
+          <RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
+        </Box>
+      </RemoveScroll>
+    </Box>
+  );
+}

components/roadmap/edit-content-page-link.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Button, Divider, Link, Text } from '@chakra-ui/react';
+
+type EditContentPageLinkProps = {
+  href: string;
+};
+
+export function EditContentPageLink(props: EditContentPageLinkProps) {
+  const { href } = props;
+
+  return (
+    <Box my='30px'>
+      <Divider mb="15px" orientation="horizontal" />
+      <Text
+        lineHeight="23px"
+        fontWeight={500}
+        fontSize="14px"
+        color="gray.500"
+        mb="10px"
+      >
+        This page is a work in progress. Help us by writing a small
+        introduction to the topic and suggesting a few links to read more
+        about this topic.
+      </Text>
+      <Button
+        size="sm"
+        py="20px"
+        as={Link}
+        href={href}
+        target="_blank"
+        isFullWidth
+        colorScheme={'gray'}
+        _hover={{ textDecoration: 'none', bg: 'gray.200' }}
+      >
+        Edit this Page
+      </Button>
+    </Box>
+  );
+}

components/roadmap/home-roadmap-item.tsx

@@ -1,47 +1,114 @@
-import { Box, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
 import { InfoIcon } from '@chakra-ui/icons';
 
 type RoadmapGridItemProps = {
   title: string;
   subtitle: string;
   isCommunity?: boolean;
+  isUpcoming?: boolean;
   colorIndex?: number;
   url: string;
 };
 
 const bgColorList = [
-  'blue.900',
+  'red.100',
-  'red.800',
+  'yellow.100',
-  'green.800',
+  'green.200',
-  'teal.800',
+  'teal.200',
-  'gray.800',
+  'blue.200',
-  'red.900'
+  'red.200',
+  'gray.200',
+  'teal.200',
+  'yellow.100',
+  'green.200',
+  'red.200',
 ];
 
 export function HomeRoadmapItem(props: RoadmapGridItemProps) {
-  const { title, subtitle, isCommunity, colorIndex = 0, url } = props;
+  const {
+    title,
+    subtitle,
+    isCommunity,
+    colorIndex = 0,
+    url,
+    isUpcoming,
+  } = props;
 
   return (
     <Box
       as={Link}
       href={url}
-      _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
+      _hover={{
+        textDecoration: 'none',
+        bg: 'rgba(255,255,255,.10)',
+      }}
+      sx={{
+        // On mobile devices, don't change the scale
+        '@media (hover: none)': {
+          '&:hover': {
+            bg: 'rgba(255,255,255,.05)',
+          },
+        },
+      }}
       flex={1}
-      shadow='2xl'
+      shadow="2xl"
-      bg={bgColorList[colorIndex] ?? bgColorList[0]}
+      className={'home-roadmap-item'}
-      color='white'
+      bg={'rgba(255,255,255,.05)'}
-      p='15px'
+      color="white"
-      rounded='10px'
+      p="15px"
-      pos='relative'
+      rounded="10px"
+      pos="relative"
     >
       {isCommunity && (
-        <Tooltip label={'Community contribution'} hasArrow placement='top'>
+        <Tooltip label={'Community contribution'} hasArrow placement="top">
-          <InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
+          <InfoIcon opacity={0.5} position="absolute" top="10px" right="10px" />
         </Tooltip>
       )}
 
-      <Heading fontSize={['17px', '17px', '22px']} mb='5px'>{title}</Heading>
+      <Heading
-      <Text color='gray.200' fontSize={['13px']}>{subtitle}</Text>
+        fontSize={['17px', '17px', '22px']}
+        color={bgColorList[colorIndex]}
+        mb="5px"
+      >
+        {title}
+      </Heading>
+      <Text color="gray.200" fontSize={['13px']}>
+        {subtitle}
+      </Text>
+
+      {isUpcoming && (
+        <Flex
+          alignItems="center"
+          justifyContent="center"
+          pos="absolute"
+          left={0}
+          right={0}
+          top={0}
+          bottom={0}
+          rounded="10px"
+        >
+          <Text
+            color="white"
+            bg="gray.600"
+            zIndex={1}
+            fontWeight={600}
+            p={'5px 10px'}
+            rounded="10px"
+          >
+            Upcoming
+          </Text>
+          <Box
+            bg={'black'}
+            pos="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            rounded={'10px'}
+            opacity={0.5}
+          />
+        </Flex>
+      )}
     </Box>
   );
 }

components/roadmap/new-alert-banner.tsx

@@ -0,0 +1,50 @@
+import { Badge, Link, Text } from '@chakra-ui/react';
+import siteConfig from '../../content/site.json';
+import { event } from '../../lib/gtag';
+import React from 'react';
+
+export function NewAlertBanner() {
+  return (
+    <Text
+      _hover={{
+        textDecoration: 'none',
+        color: 'blue.700',
+        '& .new-badge': { bg: 'blue.700' },
+      }}
+      as={Link}
+      href={siteConfig.url.youtube}
+      d="block"
+      target="_blank"
+      color="red.700"
+      fontSize="sm"
+      mb="10px"
+      fontWeight={500}
+      onClick={() =>
+        event({
+          category: 'Subscription',
+          action: 'Clicked the YouTube banner',
+          label: 'YouTube Alert on Roadmap',
+        })
+      }
+    >
+      <Badge
+        transition={'all 300ms'}
+        className="new-badge"
+        mr="7px"
+        colorScheme="red"
+        variant="solid"
+      >
+        New
+      </Badge>
+      <Text textDecoration="underline" as="span" d={['none', 'inline']}>
+        Roadmap topics to be covered on our YouTube Channel
+      </Text>
+      <Text textDecoration="underline" as="span" d={['inline', 'none']}>
+        Topic videos being made on YouTube
+      </Text>
+      <Text as="span" ml="5px">
+        &raquo;
+      </Text>
+    </Text>
+  );
+}

components/roadmap/roadmap-error.tsx

@@ -0,0 +1,26 @@
+import { RoadmapType } from '../../lib/roadmap';
+import { Container, Heading, Link, Text } from '@chakra-ui/react';
+import siteConfig from '../../content/site.json';
+
+type RoadmapProps = {
+  roadmap: RoadmapType;
+};
+
+export function RoadmapError(props: RoadmapProps) {
+  const { roadmap } = props;
+
+  return (
+    <Container
+      bg={'red.600'}
+      maxW={'container.md'}
+      position="relative"
+      mt="50px"
+      p='20px'
+      rounded='5px'
+      color='white'
+    >
+      <Heading mb='4px' size='md'>Oops! There&apos;s an error</Heading>
+      <Text>Try refreshing or <Link target='_blank' fontWeight={700} textDecoration={'underline'} fontSize='14px' href={siteConfig.url.issue}>report a bug</Link> and use the <Link fontWeight={700} textDecoration={'underline'} href={`/roadmaps/${roadmap.id}.png`}>non-interactive version</Link></Text>
+    </Container>
+  );
+}

components/roadmap/roadmap-loader.tsx

@@ -0,0 +1,20 @@
+import { Container, Spinner } from '@chakra-ui/react';
+
+export function RoadmapLoader() {
+  return (
+    <Container
+      maxW={'container.md'}
+      position="relative"
+      mt="60px"
+      textAlign="center"
+    >
+      <Spinner
+        thickness="7px"
+        speed="0.65s"
+        emptyColor="gray.200"
+        color="gray.500"
+        size="xl"
+      />
+    </Container>
+  );
+}

components/roadmap/roadmap-page-header.tsx

@@ -0,0 +1,113 @@
+import { RoadmapType } from '../../lib/roadmap';
+import { NewAlertBanner } from './new-alert-banner';
+import {
+  Badge,
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  Link,
+  Stack,
+  Text,
+} from '@chakra-ui/react';
+import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
+import React from 'react';
+
+type RoadmapPageHeaderType = {
+  roadmap: RoadmapType;
+};
+
+export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
+  const { roadmap } = props;
+
+  return (
+    <Box
+      pt={['25px', '20px', '45px']}
+      pb={['20px', '15px', '30px']}
+      borderBottomWidth={1}
+      mb="30px"
+    >
+      <Container maxW="container.md" position="relative">
+        <NewAlertBanner />
+        <Heading
+          as="h1"
+          color="black"
+          fontSize={['28px', '33px', '40px']}
+          fontWeight={700}
+          mb={['2px', '2px', '5px']}
+        >
+          {roadmap.title}
+        </Heading>
+        <Text fontSize={['13px', '14px', '15px']}>{roadmap.description}</Text>
+        <Flex justifyContent="space-between" alignItems={'center'} mt="20px">
+          <Stack isInline>
+            <Button
+              d={['flex', 'flex']}
+              as={Link}
+              href={'/roadmaps'}
+              size="xs"
+              py="14px"
+              px="10px"
+              colorScheme="teal"
+              variant="solid"
+              _hover={{ textDecoration: 'none' }}
+            >
+              &larr;
+              <Text as="span" d={['none', 'inline']} ml="5px">
+                All Roadmaps
+              </Text>
+            </Button>
+
+            {roadmap.pdfUrl && (
+              <Button
+                as={Link}
+                href={roadmap.pdfUrl}
+                target="_blank"
+                size="xs"
+                py="14px"
+                px="10px"
+                leftIcon={<DownloadIcon />}
+                colorScheme="yellow"
+                variant="solid"
+                _hover={{ textDecoration: 'none' }}
+              >
+                Download
+              </Button>
+            )}
+            <Button
+              as={Link}
+              href={'/signup'}
+              size="xs"
+              py="14px"
+              px="10px"
+              variant="solid"
+              colorScheme="yellow"
+              leftIcon={<AtSignIcon />}
+              _hover={{ textDecoration: 'none' }}
+            >
+              Subscribe
+            </Button>
+          </Stack>
+        </Flex>
+        {roadmap.id === 'frontend' && (
+          <Text
+            mt="30px"
+            mb={['-37px', '-32px', '-47px']}
+            fontWeight={500}
+            fontSize="14px"
+            bg="white"
+            borderWidth={1}
+            p="5px 7px"
+            rounded="3px"
+          >
+            <Badge pos="relative" top={'-1px'} mr="6px" colorScheme="yellow">
+              New
+            </Badge>
+            Resources are here, try clicking any nodes.
+          </Text>
+        )}
+      </Container>
+    </Box>
+  );
+}

components/sticky-banner.tsx

@@ -1,25 +1,27 @@
 import { Flex, Link, Text } from '@chakra-ui/react';
 import YouTubeLogo from '../components/icons/youtube.svg';
 import siteConfig from '../content/site.json';
+import { event } from '../lib/gtag';
 
 export function StickyBanner() {
   return (
     <Flex as={Link}
           href={siteConfig.url.youtube}
-          bg={'yellow.300'}
+          bg={'yellow.200'}
           color='gray.900'
-      // bg={'teal.900'}
-      // color='gray.300'
           alignItems='center'
-          position='fixed'
+          position='sticky'
-          left={0}
+          top={0}
-          right={0}
           zIndex={999}
           justifyContent='center'
           py='8px'
           _hover={{ textDecoration: 'none', bg: 'yellow.400' }}
-      // _hover={{ textDecoration: 'none', bg: 'teal.800', color: 'gray.100' }}
           target='_blank'
+          onClick={() => event({
+            category: 'Subscription',
+            action: 'Clicked the YouTube banner',
+            label: 'Sticky YouTube banner on Top'
+          })}
     >
       <YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} />
       <Text as='span' fontWeight={500} fontSize='14px'>

components/updates-banner.tsx

@@ -1,37 +1,77 @@
-import { Box, Button, Container, Flex, Heading, Link, Text } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  Link,
+  Text,
+} from '@chakra-ui/react';
 import siteConfig from '../content/site.json';
 
 export function UpdatesBanner() {
   return (
-    <Box borderTopWidth={1} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left'
+    <Box
-         bg='gray.800'>
+      borderTopWidth={1}
-      <Container maxW='container.md'>
+      pt={['40px', '40px', '70px']}
-        <Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
+      pb={['40px', '45px', '80px']}
-          Informed</Heading>
+      textAlign="left"
-        <Text color='gray.400' lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>Subscribe yourself to get
+      bg="brand.footer"
-          updates, new
+    >
-          guides, videos and roadmaps in your inbox.</Text>
+      <Container maxW="container.md">
+        <Heading
+          color={'gray.100'}
+          fontSize={['25px', '25px', '35px']}
+          mb={['5px', '5px', '15px']}
+        >
+          Stay Informed
+        </Heading>
+        <Text
+          color="gray.400"
+          lineHeight="26px"
+          fontSize={['15px', '15px', '16px']}
+          mb="20px"
+        >
+          Subscribe yourself to get updates, new guides, videos and roadmaps in
+          your inbox.
+        </Text>
 
         <Flex flexDirection={['column', 'column', 'row']}>
           <Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
-            <Button as={Link} href='/signup' width={['full', 'auto']} fontSize={['14px', '14px', '16px']}
+            <Button
-                    variant='outline' borderWidth={2}
+              as={Link}
-                    colorScheme='green' _hover={{ color: 'green.200', textDecoration: 'none' }}>
+              href="/signup"
+              width={['full', 'auto']}
+              fontSize={['14px', '14px', '16px']}
+              variant="outline"
+              borderWidth={2}
+              colorScheme="green"
+              _hover={{ color: 'green.200', textDecoration: 'none' }}
+            >
               Subscribe to Updates
             </Button>
-            <Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text>
+            <Text color="gray.500" fontSize="13px" mt="5px">
+              Free subscription for updates
+            </Text>
           </Box>
           <Box>
-            <Button as={Link}
+            <Button
+              as={Link}
               href={siteConfig.url.sponsor}
-                    target='_blank'
+              target="_blank"
               width={['full', 'auto']}
               fontSize={['14px', '14px', '16px']}
               _hover={{ textDecoration: 'none', bg: 'yellow.500' }}
-                    colorScheme='yellow'>Updates & Paid Content</Button>
+              colorScheme="yellow"
-            <Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span'
+            >
-                                                                                                             fontWeight={600}>5$
+              Updates & Paid Content
-              per month</Text></Text>
+            </Button>
+            <Text color="gray.500" fontSize="13px" mt="5px">
+              Support the project by paying as little as{' '}
+              <Text as="span" fontWeight={600}>
+                5$ per month
+              </Text>
+            </Text>
           </Box>
         </Flex>
       </Container>

components/watch/video-grid-item.tsx

@@ -5,6 +5,7 @@ type VideoGridItemProps = {
   title: string;
   subtitle: string;
   date: string;
+  target?: string;
   isNew?: boolean;
   isPro?: boolean;
   colorIndex?: number;
@@ -53,10 +54,10 @@ const bgColorList = [
 ];
 
 export function VideoGridItem(props: VideoGridItemProps) {
-  const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href } = props;
+  const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href, target } = props;
 
   return (
-    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } shadow='xl' p='20px'
+    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } target={target || '_self'} shadow='xl' p='20px'
           rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
       <Text mb='7px' fontSize='12px' color='gray.400'>
         {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}

content/guides.json

@@ -1,4 +1,13 @@
 [
+  {
+    "id": "avoid-render-blocking-javascript-with-async-defer",
+    "title": "Async and Defer Script Loading",
+    "description": "Learn how to avoid render blocking JavaScript using async and defer scripts.",
+    "isPro": false,
+    "authorUsername": "kamranahmedse",
+    "updatedAt": "2021-09-10T19:59:14.191Z",
+    "createdAt": "2021-09-10T19:59:14.191Z"
+  },
   {
     "id": "what-are-web-vitals",
     "title": "What are Web Vitals?",
@@ -23,8 +32,8 @@
     "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-07-09T19:59:14.191Z",
+    "updatedAt": "2021-07-09T19:59:14.191Z",
-    "createdAt": "2020-07-09T19:59:14.191Z"
+    "createdAt": "2021-07-09T19:59:14.191Z"
   },
   {
     "id": "sso",
@@ -32,8 +41,8 @@
     "description": "Learn the basics of SAML and understand how does Single Sign On work.",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-07-01T19:59:14.191Z",
+    "updatedAt": "2021-07-01T19:59:14.191Z",
-    "createdAt": "2020-07-01T19:59:14.191Z"
+    "createdAt": "2021-07-01T19:59:14.191Z"
   },
   {
     "id": "oauth",
@@ -41,8 +50,8 @@
     "description": "Learn and understand what is OAuth and how it works",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-06-28T19:59:14.191Z",
+    "updatedAt": "2021-06-28T19:59:14.191Z",
-    "createdAt": "2020-06-28T19:59:14.191Z"
+    "createdAt": "2021-06-28T19:59:14.191Z"
   },
   {
     "id": "jwt-authentication",
@@ -50,8 +59,8 @@
     "description": "Understand what is JWT authentication and how is it implemented",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-06-20T19:59:14.191Z",
+    "updatedAt": "2021-06-20T19:59:14.191Z",
-    "createdAt": "2020-06-20T19:59:14.191Z"
+    "createdAt": "2021-06-20T19:59:14.191Z"
   },
   {
     "id": "token-authentication",
@@ -59,8 +68,8 @@
     "description": "Understand what is token based authentication and how it is implemented",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-06-02T20:59:14.191Z",
+    "updatedAt": "2021-06-02T20:59:14.191Z",
-    "createdAt": "2020-06-02T20:59:14.191Z"
+    "createdAt": "2021-06-02T20:59:14.191Z"
   },
   {
     "id": "session-authentication",
@@ -68,8 +77,8 @@
     "description": "Understand what is session based authentication and how it is implemented",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-05-26T20:59:14.191Z",
+    "updatedAt": "2021-05-26T20:59:14.191Z",
-    "createdAt": "2020-05-26T20:59:14.191Z"
+    "createdAt": "2021-05-26T20:59:14.191Z"
   },
   {
     "id": "basic-authentication",
@@ -77,8 +86,8 @@
     "description": "Understand what is basic authentication and how it is implemented",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-05-19T20:59:14.191Z",
+    "updatedAt": "2021-05-19T20:59:14.191Z",
-    "createdAt": "2020-05-19T20:59:14.191Z"
+    "createdAt": "2021-05-19T20:59:14.191Z"
   },
   {
     "id": "character-encodings",
@@ -86,8 +95,8 @@
     "description": "Covers the basics of character encodings and explains ASCII vs Unicode",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-05-14T20:59:14.191Z",
+    "updatedAt": "2021-05-14T20:59:14.191Z",
-    "createdAt": "2020-05-14T20:59:14.191Z"
+    "createdAt": "2021-05-14T20:59:14.191Z"
   },
   {
     "id": "unfamiliar-codebase",
@@ -95,8 +104,8 @@
     "description": "Tips on getting getting familiar with an unfamiliar codebase",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-05-04T20:59:14.191Z",
+    "updatedAt": "2021-05-04T20:59:14.191Z",
-    "createdAt": "2020-05-04T20:59:14.191Z"
+    "createdAt": "2021-05-04T20:59:14.191Z"
   },
   {
     "id": "why-build-it-and-they-will-come-wont-work-anymore",
@@ -104,8 +113,8 @@
     "description": "Why “build it and they will come” alone won’t work anymore",
     "isPro": false,
     "authorUsername": "spekulatius",
-    "updatedAt": "2020-05-04T12:59:14.191Z",
+    "updatedAt": "2021-05-04T12:59:14.191Z",
-    "createdAt": "2020-05-04T12:59:14.191Z"
+    "createdAt": "2021-05-04T12:59:14.191Z"
   },
   {
     "id": "dhcp-in-one-picture",
@@ -113,8 +122,8 @@
     "description": "Here is what happens when a new device joins the network.",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-04-28T15:48:21.191Z",
+    "updatedAt": "2021-04-28T15:48:21.191Z",
-    "createdAt": "2020-04-28T15:48:21.191Z"
+    "createdAt": "2021-04-28T15:48:21.191Z"
   },
   {
     "id": "ssl-tls-https-ssh",
@@ -122,8 +131,8 @@
     "description": "Quick tidbit on the differences between SSL, TLS, HTTPS and SSH",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-04-22T15:48:21.191Z",
+    "updatedAt": "2021-04-22T15:48:21.191Z",
-    "createdAt": "2020-04-22T15:48:21.191Z"
+    "createdAt": "2021-04-22T15:48:21.191Z"
   },
   {
     "id": "asymptotic-notation",
@@ -131,8 +140,8 @@
     "description": "Learn the basics of measuring the time and space complexity of algorithms",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-04-03T15:48:21.191Z",
+    "updatedAt": "2021-04-03T15:48:21.191Z",
-    "createdAt": "2020-04-03T15:48:21.191Z"
+    "createdAt": "2021-04-03T15:48:21.191Z"
   },
   {
     "id": "big-o-notation",
@@ -140,8 +149,8 @@
     "description": "Easy to understand explanation of Big-O notation without any fancy terms",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-03-15T15:48:21.191Z",
+    "updatedAt": "2021-03-15T15:48:21.191Z",
-    "createdAt": "2020-03-15T15:48:21.191Z"
+    "createdAt": "2021-03-15T15:48:21.191Z"
   },
   {
     "id": "random-numbers",
@@ -149,8 +158,8 @@
     "description": "Learn how they are generated and why they may not be truly random.",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-03-14T15:48:21.191Z",
+    "updatedAt": "2021-03-14T15:48:21.191Z",
-    "createdAt": "2020-03-14T15:48:21.191Z"
+    "createdAt": "2021-03-14T15:48:21.191Z"
   },
   {
     "id": "scaling-databases",
@@ -158,8 +167,8 @@
     "description": "Learn the ups and downs of different database scaling strategies",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-02-18T15:48:21.191Z",
+    "updatedAt": "2021-02-18T15:48:21.191Z",
-    "createdAt": "2020-02-18T15:48:21.191Z"
+    "createdAt": "2021-02-18T15:48:21.191Z"
   },
   {
     "id": "what-is-internet",
@@ -167,8 +176,8 @@
     "description": "Learn the basics of internet and everything involved with this short video series",
     "isPro": false,
     "authorUsername": "dmytrobol",
-    "updatedAt": "2020-02-29T15:48:21.191Z",
+    "updatedAt": "2021-02-29T15:48:21.191Z",
-    "createdAt": "2020-02-29T15:48:21.191Z"
+    "createdAt": "2021-02-29T15:48:21.191Z"
   },
   {
     "id": "torrent-client",
@@ -176,8 +185,8 @@
     "description": "Learn everything you need to know about BitTorrent by writing a client in Go",
     "isPro": false,
     "authorUsername": "jesse",
-    "updatedAt": "2020-01-17T15:48:21.191Z",
+    "updatedAt": "2021-01-17T15:48:21.191Z",
-    "createdAt": "2020-01-17T15:48:21.191Z",
+    "createdAt": "2021-01-17T15:48:21.191Z",
     "canonical": "https://blog.jse.li/posts/torrent/"
   },
   {
@@ -186,8 +195,8 @@
     "description": "How to Step Up as a Junior, Mid Level or a Senior Developer?",
     "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2019-12-03T12:13:00.860Z",
+    "updatedAt": "2020-12-03T12:13:00.860Z",
-    "createdAt": "2019-12-03T12:13:00.860Z"
+    "createdAt": "2020-12-03T12:13:00.860Z"
   },
   {
     "id": "design-patterns-for-humans",
@@ -241,7 +250,7 @@
     "description": "How do proxy servers work and what are forward and reverse proxies?",
     "isPro": false,
     "authorUsername": "ebrahimbharmal007",
-    "createdAt": "2020-07-24T12:40:18",
+    "createdAt": "2017-10-24T17:00:00.860Z",
-    "updatedAt": "2020-07-24T12:40:18"
+    "updatedAt": "2017-10-24T17:00:00.860Z"
   }
 ]

content/guides/asymptotic-notation.md

@@ -13,4 +13,3 @@ Asymptotic notation is the standard way of measuring the time and space that an
 
 [![](/guides/asymptotic-notation.png)](/guides/asymptotic-notation.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1243861514907418624) where this image was posted.

content/guides/avoid-render-blocking-javascript-with-async-defer.md

@@ -0,0 +1,2 @@
+[![](/guides/avoid-render-blocking-javascript-with-async-defer.png)](/guides/avoid-render-blocking-javascript-with-async-defer.png)
+

content/guides/basic-authentication.md

@@ -1,3 +1,2 @@
 [![](/guides/basic-authentication.png)](/guides/basic-authentication.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1261783266044063748) where this image was posted.

content/guides/big-o-notation.md

@@ -2,4 +2,3 @@ Big-O notation is the mathematical notation that helps analyse the algorithms to
 
 [![](/guides/big-o-notation.png)](/guides/big-o-notation.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1235708842610212864) where this image was posted.

content/guides/character-encodings.md

@@ -1,3 +1,2 @@
 [![](/guides/character-encodings.png)](/guides/character-encodings.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1259631582362689537) where this image was posted.

content/guides/ci-cd.md

@@ -2,4 +2,3 @@ The image below details the differences between the continuous integration and c
 
 [![](/guides/ci-cd.png)](/guides/ci-cd.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1282806173939511298) where this image was posted.

content/guides/dhcp-in-one-picture.md

@@ -1,3 +1,2 @@
 [![](/guides/dhcp.png)](/guides/dhcp.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1254142557417857025) where this image was posted.

content/guides/jwt-authentication.md

@@ -1,3 +1,2 @@
 [![](/guides/jwt-authentication.png)](/guides/jwt-authentication.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1273375903511465990) where this image was posted.

content/guides/oauth.md

@@ -1,3 +1,2 @@
 [![](/guides/oauth.png)](/guides/oauth.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1276994010423361540) where this image was posted.

content/guides/random-numbers.md

@@ -2,4 +2,3 @@ Random numbers are everywhere from computer games to lottery systems, graphics s
 
 [![](/guides/random-numbers.png)](/guides/random-numbers.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1237851549302312962) where this image was posted.

content/guides/scaling-databases.md

@@ -2,4 +2,3 @@ The chart below aims to give you a really basic understanding of how the capabil
 
 [![](/guides/scaling-databases.svg)](/guides/scaling-databases.svg)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1234209674003611650) where this image was posted.

content/guides/session-authentication.md

@@ -1,3 +1,2 @@
 [![](/guides/session-authentication.png)](/guides/session-authentication.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1264113498520465410) where this image was posted.

content/guides/ssl-tls-https-ssh.md

@@ -1,3 +1,2 @@
 [![](/guides/ssl-tls-https-ssh.png)](/guides/ssl-tls-https-ssh.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1252717722724642822) where this image was posted.

content/guides/sso.md

@@ -1,3 +1,2 @@
 [![](/guides/sso.png)](/guides/sso.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1280266408434302979) where this image was posted.

content/guides/token-authentication.md

@@ -1,3 +1,2 @@
 [![](/guides/token-authentication.png)](/guides/token-authentication.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1266832006782103552) where this image was posted.

content/guides/unfamiliar-codebase.md

@@ -1,3 +1,2 @@
 [![](/guides/unfamiliar-codebase.png)](/guides/unfamiliar-codebase.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1256340163573231616) where this image was posted.

content/guides/what-are-web-vitals.md

@@ -1,3 +1,2 @@
 [![](/guides/web-vitals.png)](/guides/web-vitals.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1425476526770987012) where this image was posted.

content/guides/what-is-sli-slo-sla.md

@@ -1,3 +1,2 @@
 [![](/guides/sli-slo-sla.jpeg)](/guides/sli-slo-sla.jpeg)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1421778722865229824) where this image was posted.

content/pages/about.md

@@ -19,8 +19,8 @@ learnings, get feedbacks on their projects etc.
 ## How did you build roadmap.sh?
 
 The basic version of the website has been built with [Next.js](https://github.com/zeit/next.js/), is opensource and can
-be found on [github](https://github.com/kamranahmedse/roadmap.sh). It was hastily done to get it out in front of the
+be found on [github](https://github.com/kamranahmedse/developer-roadmap). It was hastily done to get it out in front of the
-people and get people to start contributing so it might be rough on the edges, but that is where we need your help.
+people and get people to start contributing, so it might be rough on the edges, but that is where we need your help.
 
 ## How does it make money?
 
@@ -37,7 +37,7 @@ creates value for the people.
 ## Can I contribute?
 
 You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The
-source code of the website can be [found on Github](https://github.com/kamranahmedse/roadmap.sh). Your contributions can
+source code of the website can be [found on Github](https://github.com/kamranahmedse/developer-roadmap). Your contributions can
 be:
 
 * Adding a new roadmap
@@ -51,7 +51,7 @@ be:
 * Becoming a sponsor
 
 Just make sure
-to [follow the contribution guidelines](https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing) when you
+to [follow the contribution guidelines](https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing) when you
 decide to contribute.
 
 ## Can I redistribute the content?

content/roadmaps.json

@@ -4,10 +4,6 @@
       "title": "Learn to become a modern frontend developer",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
-        "frontend roadmap",
-        "javascript roadmap",
-        "frontend roadmap 2021",
-        "javascript roadmap 2021",
         "guide to becoming a developer",
         "guide to becoming a frontend developer",
         "frontend developer",
@@ -17,6 +13,7 @@
         "javascript developer",
         "frontend development skills",
         "frontend development skills test",
+        "frontend roadmap",
         "frontend engineer roadmap",
         "frontend developer roadmap",
         "become a frontend developer",
@@ -40,10 +37,13 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "featured": true,
-    "imagePath": "/roadmaps/frontend.png",
+    "imageUrl": "/roadmaps/frontend.png",
-    "resourcesPath": "/roadmaps/1-frontend/resources.md",
+    "jsonUrl": "/project/frontend.json",
+    "resourcesPath": "/roadmaps/100-frontend/resources.md",
     "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap",
+    "contentPathsFilePath": "/roadmaps/100-frontend/content-paths.json",
     "id": "frontend",
+    "metaPath": "/roadmaps/100-frontend/meta.json",
     "isUpcoming": false
   },
   {
@@ -53,6 +53,7 @@
       "keywords": [
         "guide to becoming a developer",
         "guide to becoming a backend developer",
+        "backend roadmap",
         "backend developer",
         "backend engineer",
         "backend skills",
@@ -79,14 +80,16 @@
     "featuredTitle": "Backend",
     "featuredDescription": "Step by step guide to becoming a backend developer in 2021",
     "featured": true,
-    "imagePath": "/roadmaps/backend.png",
+    "imageUrl": "/roadmaps/backend.png",
-    "resourcesPath": "/roadmaps/2-backend/resources.md",
+    "jsonUrl": "/project/frontend.json",
+    "resourcesPath": "/roadmaps/101-backend/resources.md",
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
     "pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap",
     "id": "backend",
+    "metaPath": "/roadmaps/101-backend/meta.json",
     "isUpcoming": false
   },
   {
@@ -116,8 +119,9 @@
     "featuredTitle": "DevOps",
     "featuredDescription": "Step by step guide for DevOps or operations role in 2021",
     "featured": true,
-    "imagePath": "/roadmaps/devops.png",
+    "imageUrl": "/roadmaps/devops.png",
-    "resourcesPath": "/roadmaps/3-devops/resources.md",
+    "jsonUrl": "/project/devops.json",
+    "resourcesPath": "/roadmaps/102-devops/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -129,6 +133,7 @@
     },
     "pdfUrl": "https://kamranahmedse.gumroad.com/l/devops-roadmap",
     "id": "devops",
+    "metaPath": "/roadmaps/102-devops/meta.json",
     "isUpcoming": false
   },
   {
@@ -156,8 +161,9 @@
     "isTextHeavy": false,
     "isCommunity": false,
     "featured": true,
-    "contentPath": "/roadmaps/4-react/landscape.md",
+    "landingPath": "/roadmaps/103-react/landscape.md",
-    "resourcesPath": "/roadmaps/4-react/resources.md",
+    "resourcesPath": "/roadmaps/103-react/resources.md",
+    "jsonUrl": "/project/react.json",
     "versions": [
       "latest",
       "2018",
@@ -169,8 +175,235 @@
     },
     "pdfUrl": "https://kamranahmedse.gumroad.com/l/react-roadmap",
     "id": "react",
+    "metaPath": "/roadmaps/103-react/meta.json",
     "isUpcoming": false
   },
+  {
+    "seo": {
+      "title": "Angular Developer Roadmap: Learn to become a Angular developer",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap.",
+      "keywords": [
+        "guide to becoming a angular developer",
+        "angular developer roadmap",
+        "angular roadmap",
+        "become angular developer",
+        "angular developer skills",
+        "angular skills test",
+        "skills for angular development",
+        "learn angular development",
+        "what is angular",
+        "angular quiz",
+        "angular interview questions"
+      ]
+    },
+    "title": "Angular Developer",
+    "description": "Everything that is there to learn about Angular and the ecosystem in 2021.",
+    "featuredTitle": "Angular",
+    "featuredDescription": "Step by step guide to become a Angular Developer in 2021",
+    "isTextHeavy": false,
+    "isCommunity": false,
+    "featured": true,
+    "jsonUrl": "/project/angular.json",
+    "landingPath": "/roadmaps/104-angular/landscape.md",
+    "resourcesPath": "/roadmaps/104-angular/resources.md",
+    "versions": [
+      "latest",
+      "2018",
+      "2017"
+    ],
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/angular-roadmap",
+    "id": "angular",
+    "metaPath": "/roadmaps/104-angular/meta.json",
+    "isUpcoming": false
+  },
+  {
+    "seo": {
+      "title": "Android Developer Roadmap: Learn to become an Android developer",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.",
+      "keywords": [
+        "guide to becoming an android developer",
+        "android developer roadmap",
+        "android roadmap",
+        "become android developer",
+        "android developer skills",
+        "android skills test",
+        "skills for android development",
+        "learn android development",
+        "what is android",
+        "android quiz",
+        "android interview questions"
+      ]
+    },
+    "title": "Android Developer",
+    "description": "Step by step guide to becoming an Android developer in 2021",
+    "featuredTitle": "Android",
+    "featuredDescription": "Step by step guide to becoming an Android Developer in 2021",
+    "isTextHeavy": true,
+    "isCommunity": false,
+    "featured": true,
+    "jsonUrl": "/project/android.json",
+    "landingPath": "/roadmaps/105-android/landscape.md",
+    "resourcesPath": "/roadmaps/105-android/resources.md",
+    "versions": [
+      "latest",
+      "2018",
+      "2017"
+    ],
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "id": "android",
+    "metaPath": "/roadmaps/105-android/meta.json",
+    "isUpcoming": false
+  },
+  {
+    "seo": {
+      "title": "Learn to become a modern Python developer",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for python development. Learn to become a modern Python developer by following the steps, skills, resources and guides listed in this roadmap.",
+      "keywords": [
+        "guide to becoming an python developer",
+        "python developer roadmap",
+        "python roadmap",
+        "become python developer",
+        "python developer skills",
+        "python skills test",
+        "skills for python development",
+        "learn python development",
+        "what is python",
+        "python quiz",
+        "python interview questions"
+      ]
+    },
+    "title": "Python Developer",
+    "description": "Step by step guide to becoming a Python developer in 2021",
+    "featuredTitle": "Python",
+    "featuredDescription": "Step by step guide to becoming a Python Developer in 2021",
+    "isTextHeavy": true,
+    "isCommunity": false,
+    "featured": true,
+    "jsonUrl": "/project/python.json",
+    "resourcesPath": "/roadmaps/106-python/resources.md",
+    "landingPath": "/roadmaps/106-python/landscape.md",
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/python-roadmap",
+    "versions": [
+      "latest"
+    ],
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "id": "python",
+    "metaPath": "/roadmaps/106-python/meta.json",
+    "isUpcoming": false
+  },
+  {
+    "seo": {
+      "title": "Learn to become a Go developer",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
+      "keywords": [
+        "guide to becoming a golang developer",
+        "guide to becoming a go developer",
+        "golang developer",
+        "go developer",
+        "guide to golang",
+        "guide to go",
+        "golang roadmap",
+        "go roadmap",
+        "golang skills",
+        "go skills",
+        "golang skills test",
+        "go skills test",
+        "skills for golang",
+        "skills for go",
+        "cloud development",
+        "what is golang",
+        "what is go",
+        "golang quiz",
+        "go quiz",
+        "golang interview questions",
+        "go interview questions"
+      ]
+    },
+    "title": "Go Developer",
+    "description": "Step by step guide to becoming a Go developer in 2021",
+    "featuredTitle": "Go",
+    "featuredDescription": "Step by step guide to becoming a Go developer in 2021",
+    "isTextHeavy": false,
+    "isCommunity": false,
+    "isUpcoming": false,
+    "featured": true,
+    "jsonUrl": "/project/golang.json",
+    "landingPath": "/roadmaps/107-golang/landscape.md",
+    "resourcesPath": "/roadmaps/107-golang/resources.md",
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/go-roadmap",
+    "versions": [
+      "latest",
+      "2018",
+      "2017"
+    ],
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "id": "golang",
+    "metaPath": "/roadmaps/107-golang/meta.json"
+  },
+  {
+    "seo": {
+      "title": "Learn to become a modern Java developer",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
+      "keywords": [
+        "guide to becoming a developer",
+        "guide to becoming a java developer",
+        "java developer",
+        "java engineer",
+        "java skills",
+        "guide to java",
+        "java roadmap",
+        "java skills",
+        "java skills test",
+        "skills for java",
+        "cloud development",
+        "what is java",
+        "java quiz",
+        "java interview questions",
+        "java engineer roadmap",
+        "java developer roadmap",
+        "become a java developer",
+        "java developer career path",
+        "java developer",
+        "modern java developer"
+      ]
+    },
+    "title": "Java Developer",
+    "description": "Step by step guide to becoming a Java developer in 2021",
+    "featuredTitle": "Java",
+    "featuredDescription": "Step by step guide to becoming a Java Developer in 2021",
+    "isTextHeavy": false,
+    "isCommunity": false,
+    "isUpcoming": false,
+    "featured": true,
+    "jsonUrl": "/project/java.json",
+    "landingPath": "/roadmaps/108-java/landscape.md",
+    "resourcesPath": "/roadmaps/108-java/resources.md",
+    "versions": [
+      "latest",
+      "2018",
+      "2017"
+    ],
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/java-roadmap",
+    "id": "java",
+    "metaPath": "/roadmaps/108-java/meta.json"
+  },
   {
     "seo": {
       "title": "DBA Roadmap: Learn to become a database administrator with PostgreSQL",
@@ -200,47 +433,47 @@
     "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021",
     "featuredTitle": "DBA",
     "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2021",
-    "contentPath": "/roadmaps/5-postgresql-dba/landscape.md",
+    "landingPath": "/roadmaps/109-postgresql-dba/landscape.md",
-    "resourcesPath": "/roadmaps/5-postgresql-dba/resources.md",
+    "resourcesPath": "/roadmaps/109-postgresql-dba/resources.md",
     "author": {
       "name": "Alexey Lesovsky",
       "url": "https://github.com/lesovsky"
     },
-    "isCommunity": true,
+    "isCommunity": false,
     "isTextHeavy": true,
     "featured": true,
     "detailed": false,
     "versions": [],
     "id": "postgresql-dba",
+    "metaPath": "/roadmaps/109-postgresql-dba/meta.json",
     "isUpcoming": false
   },
   {
     "seo": {
-      "title": "Android Developer Roadmap: Learn to become an Android developer",
+      "title": "AWS Roadmap: Learn to use AWS",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
-        "guide to becoming an android developer",
+        "guide to aws",
-        "android developer roadmap",
+        "aws roadmap",
-        "android roadmap",
+        "aws skills",
-        "become android developer",
+        "aws skills test",
-        "android developer skills",
+        "skills for aws",
-        "android skills test",
+        "cloud development",
-        "skills for android development",
+        "what is aws",
-        "learn android development",
+        "aws quiz",
-        "what is android",
+        "aws interview questions"
-        "android quiz",
-        "android interview questions"
       ]
     },
-    "title": "Android Developer",
+    "title": "AWS",
-    "description": "Step by step guide to becoming an Android developer in 2021",
+    "description": "Everything that is there to learn about AWS and the ecosystem in 2021.",
-    "featuredTitle": "Android",
+    "featuredTitle": "AWS",
-    "featuredDescription": "Step by step guide to becoming an Android Developer in 2021",
+    "featuredDescription": "Step by step guide to learn AWS in 2021",
-    "isTextHeavy": true,
+    "isTextHeavy": false,
-    "isCommunity": true,
+    "isCommunity": false,
+    "isUpcoming": true,
     "featured": true,
-    "contentPath": "/roadmaps/6-android/landscape.md",
+    "landingPath": "/roadmaps/110-aws/landscape.md",
-    "resourcesPath": "/roadmaps/6-android/resources.md",
+    "resourcesPath": "/roadmaps/110-aws/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -250,8 +483,8 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "id": "android",
+    "id": "aws",
-    "isUpcoming": false
+    "metaPath": "/roadmaps/110-aws/meta.json"
   },
   {
     "seo": {
@@ -277,12 +510,14 @@
     "featuredTitle": "QA",
     "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021",
     "isUpcoming": true,
-    "contentPath": "/roadmaps/7-qa/landscape.md",
+    "featured": true,
-    "resourcesPath": "/roadmaps/7-qa/resources.md",
+    "landingPath": "/roadmaps/111-qa/landscape.md",
+    "resourcesPath": "/roadmaps/111-qa/resources.md",
     "author": {
       "name": "Anas Fitiani",
       "url": "https://github.com/anas-qa"
     },
-    "id": "qa"
+    "id": "qa",
+    "metaPath": "/roadmaps/111-qa/meta.json"
   }
 ]

content/roadmaps/100-frontend/content-paths.json

@@ -0,0 +1,132 @@
+{
+  "home": "/roadmaps/100-frontend/content/readme.md",
+  "internet": "/roadmaps/100-frontend/content/100-internet/readme.md",
+  "internet:how-does-the-internet-work": "/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md",
+  "internet:what-is-http": "/roadmaps/100-frontend/content/100-internet/101-what-is-http.md",
+  "internet:browsers-and-how-they-work": "/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md",
+  "internet:dns-and-how-it-works": "/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md",
+  "internet:what-is-domain-name": "/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md",
+  "internet:what-is-hosting": "/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md",
+  "html": "/roadmaps/100-frontend/content/101-html/readme.md",
+  "html:learn-the-basics": "/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md",
+  "html:writing-semantic-html": "/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md",
+  "html:forms-and-validations": "/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md",
+  "html:conventions-and-best-practices": "/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md",
+  "html:accessibility": "/roadmaps/100-frontend/content/101-html/104-accessibility.md",
+  "html:seo-basics": "/roadmaps/100-frontend/content/101-html/105-seo-basics.md",
+  "css": "/roadmaps/100-frontend/content/102-css/readme.md",
+  "css:learn-the-basics": "/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md",
+  "css:making-layouts": "/roadmaps/100-frontend/content/102-css/101-making-layouts.md",
+  "css:responsive-design-and-media-queries": "/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md",
+  "javascript": "/roadmaps/100-frontend/content/103-javascript/readme.md",
+  "javascript:syntax-and-basic-constructs": "/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md",
+  "javascript:learn-dom-manipulation": "/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md",
+  "javascript:learn-fetch-api-ajax-xhr": "/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md",
+  "javascript:es6-and-modular-javascript": "/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md",
+  "javascript:concepts": "/roadmaps/100-frontend/content/103-javascript/104-concepts.md",
+  "version-control-systems": "/roadmaps/100-frontend/content/104-version-control-systems/readme.md",
+  "version-control-systems:basic-usage-of-git": "/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md",
+  "repo-hosting-services": "/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md",
+  "repo-hosting-services:github": "/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md",
+  "repo-hosting-services:gitlab": "/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md",
+  "repo-hosting-services:bitbucket": "/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md",
+  "web-security-knowledge": "/roadmaps/100-frontend/content/106-web-security-knowledge/readme.md",
+  "web-security-knowledge:cors": "/roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md",
+  "web-security-knowledge:https": "/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md",
+  "web-security-knowledge:content-security-policy": "/roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md",
+  "web-security-knowledge:owasp-security-risks": "/roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md",
+  "package-managers": "/roadmaps/100-frontend/content/107-package-managers/readme.md",
+  "package-managers:npm": "/roadmaps/100-frontend/content/107-package-managers/100-npm.md",
+  "package-managers:yarn": "/roadmaps/100-frontend/content/107-package-managers/101-yarn.md",
+  "css-architecture": "/roadmaps/100-frontend/content/108-css-architecture/readme.md",
+  "css-architecture:bem": "/roadmaps/100-frontend/content/108-css-architecture/100-bem.md",
+  "css-architecture:oocss": "/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md",
+  "css-architecture:smacss": "/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md",
+  "css-preprocessors": "/roadmaps/100-frontend/content/109-css-preprocessors/readme.md",
+  "css-preprocessors:sass": "/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md",
+  "css-preprocessors:postcss": "/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md",
+  "css-preprocessors:less": "/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md",
+  "build-tools": "/roadmaps/100-frontend/content/110-build-tools/readme.md",
+  "build-tools:task-runners": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md",
+  "build-tools:task-runners:npm-scripts": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md",
+  "build-tools:linters-formatters": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md",
+  "build-tools:linters-formatters:prettier": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md",
+  "build-tools:linters-formatters:eslint": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md",
+  "build-tools:linters-formatters:standardjs": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md",
+  "build-tools:module-bundlers": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md",
+  "build-tools:module-bundlers:webpack": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md",
+  "build-tools:module-bundlers:esbuild": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md",
+  "build-tools:module-bundlers:rollup": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md",
+  "build-tools:module-bundlers:parcel": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md",
+  "build-tools:module-bundlers:vite": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md",
+  "pick-a-framework": "/roadmaps/100-frontend/content/111-pick-a-framework/readme.md",
+  "pick-a-framework:react-js": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md",
+  "pick-a-framework:react-js:recoil": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md",
+  "pick-a-framework:react-js:redux": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md",
+  "pick-a-framework:react-js:mobx": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md",
+  "pick-a-framework:angular": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md",
+  "pick-a-framework:angular:rxjs": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md",
+  "pick-a-framework:angular:ngrx": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md",
+  "pick-a-framework:vue-js": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md",
+  "pick-a-framework:vue-js:vuex": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md",
+  "modern-css": "/roadmaps/100-frontend/content/112-modern-css/readme.md",
+  "modern-css:styled-components": "/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md",
+  "modern-css:css-modules": "/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md",
+  "modern-css:styled-jsx": "/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md",
+  "modern-css:emotion": "/roadmaps/100-frontend/content/112-modern-css/103-emotion.md",
+  "web-components": "/roadmaps/100-frontend/content/113-web-components/readme.md",
+  "web-components:html-templates": "/roadmaps/100-frontend/content/113-web-components/100-html-templates.md",
+  "web-components:custom-elements": "/roadmaps/100-frontend/content/113-web-components/101-custom-elements.md",
+  "web-components:shadow-dom": "/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md",
+  "css-frameworks": "/roadmaps/100-frontend/content/114-css-frameworks/readme.md",
+  "css-frameworks:js-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md",
+  "css-frameworks:js-first:chakra-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md",
+  "css-frameworks:js-first:material-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md",
+  "css-frameworks:js-first:radix-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md",
+  "css-frameworks:js-first:tailwind-css": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md",
+  "css-frameworks:css-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md",
+  "css-frameworks:css-first:bootstrap": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md",
+  "css-frameworks:css-first:bulma": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md",
+  "testing-your-apps": "/roadmaps/100-frontend/content/115-testing-your-apps/readme.md",
+  "testing-your-apps:jest": "/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md",
+  "testing-your-apps:react-testing-library": "/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md",
+  "testing-your-apps:cypress": "/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md",
+  "testing-your-apps:enzyme": "/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md",
+  "testing-your-apps:other-options": "/roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md",
+  "type-checkers": "/roadmaps/100-frontend/content/116-type-checkers/readme.md",
+  "type-checkers:typescript": "/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md",
+  "type-checkers:flow": "/roadmaps/100-frontend/content/116-type-checkers/101-flow.md",
+  "progressive-web-apps": "/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md",
+  "progressive-web-apps:performance": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md",
+  "progressive-web-apps:apis": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md",
+  "server-side-rendering": "/roadmaps/100-frontend/content/118-server-side-rendering/readme.md",
+  "server-side-rendering:react-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md",
+  "server-side-rendering:react-js:next-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md",
+  "server-side-rendering:react-js:after-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md",
+  "server-side-rendering:angular": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md",
+  "server-side-rendering:angular:universal": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md",
+  "server-side-rendering:vue-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md",
+  "server-side-rendering:vue-js:nuxt-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md",
+  "graphql": "/roadmaps/100-frontend/content/119-graphql/readme.md",
+  "graphql:apollo": "/roadmaps/100-frontend/content/119-graphql/100-apollo.md",
+  "graphql:relay-modern": "/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md",
+  "static-site-generators": "/roadmaps/100-frontend/content/120-static-site-generators/readme.md",
+  "static-site-generators:next-js": "/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md",
+  "static-site-generators:gatsbyjs": "/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md",
+  "static-site-generators:nuxt-js": "/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md",
+  "static-site-generators:vuepress": "/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md",
+  "static-site-generators:jekyll": "/roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md",
+  "static-site-generators:hugo": "/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md",
+  "static-site-generators:gridsome": "/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md",
+  "static-site-generators:eleventy": "/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md",
+  "mobile-applications": "/roadmaps/100-frontend/content/121-mobile-applications/readme.md",
+  "mobile-applications:react-native": "/roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md",
+  "mobile-applications:nativescript": "/roadmaps/100-frontend/content/121-mobile-applications/101-nativescript.md",
+  "mobile-applications:flutter": "/roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md",
+  "mobile-applications:ionic": "/roadmaps/100-frontend/content/121-mobile-applications/103-ionic.md",
+  "desktop-applications": "/roadmaps/100-frontend/content/122-desktop-applications/readme.md",
+  "desktop-applications:electron": "/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md",
+  "desktop-applications:carlo": "/roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md",
+  "desktop-applications:proton-native": "/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md",
+  "web-assembly": "/roadmaps/100-frontend/content/123-web-assembly.md"
+}

content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md

@@ -0,0 +1,10 @@
+# Internet
+
+The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the Internet Works in 5 Minutes</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/101-what-is-http.md

@@ -0,0 +1,9 @@
+# What is HTTP?
+
+HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/'>What is HTTP?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview'>An overview of HTTP</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth/'>Journey to HTTP/2</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=iYM2zFP3Zn0'>HTTP Crash Course & Exploration</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md

@@ -0,0 +1,8 @@
+# Browsers
+
+A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface. 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.browserstack.com/guide/browser-rendering-engine'>Role of Rendering Engine in Browsers</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work'>Populating the Page: How Browsers Work</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md

@@ -0,0 +1,7 @@
+# DNS
+The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/'>What is DNS?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wj0od2ag5sk'>DNS and How does it Work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7lxgpKh_fRY'>DNS Records</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md

@@ -0,0 +1,8 @@
+# Domain Name
+
+A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the DNS system.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name'>What is a Domain Name?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/'>What is a Domain Name? | Domain name vs. URL</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Y4cRx19nhJk'>A Beginners Guide to How Domain Names Work</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md

@@ -0,0 +1,8 @@
+# Hosting
+
+Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=htbY9-yggB0'>What Is Web Hosting? Explained</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=AXVZYzw8geg'>Different Types of Web Hosting Explained</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Kx_1NYYJS7Q'>Where to Host a Fullstack Project on a Budget</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/readme.md

@@ -0,0 +1,10 @@
+# Internet
+
+The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the Internet Works in 5 Minutes</BadgeLink>

content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md

@@ -0,0 +1 @@
+# Learn the basics

content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md

@@ -0,0 +1 @@
+# Writing semantic html

content/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md

@@ -0,0 +1 @@
+# Forms and validations

content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md

@@ -0,0 +1 @@
+# Conventions and best practices

content/roadmaps/100-frontend/content/101-html/104-accessibility.md

@@ -0,0 +1 @@
+# Accessibility

content/roadmaps/100-frontend/content/101-html/105-seo-basics.md

@@ -0,0 +1 @@
+# Basics of SEO

content/roadmaps/100-frontend/content/101-html/readme.md

@@ -0,0 +1,8 @@
+# HTML
+
+HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md

@@ -0,0 +1,11 @@
+# CSS Basics
+
+CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>

content/roadmaps/100-frontend/content/102-css/101-making-layouts.md

@@ -0,0 +1,5 @@
+# Making layouts
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://flexboxfroggy.com/'>Learn and Practice Flexbox</BadgeLink>

content/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md

@@ -0,0 +1 @@
+# Responsive Design

content/roadmaps/100-frontend/content/102-css/readme.md

@@ -0,0 +1,11 @@
+# CSS
+
+CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>

content/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md

@@ -0,0 +1 @@
+# Syntax and basic constructs

content/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md

@@ -0,0 +1 @@
+# Learn dom manipulation

content/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md

@@ -0,0 +1 @@
+# Learn fetch api ajax xhr

content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md

@@ -0,0 +1 @@
+# Es6 and modular javascript

content/roadmaps/100-frontend/content/103-javascript/104-concepts.md

@@ -0,0 +1 @@
+# Concepts

content/roadmaps/100-frontend/content/103-javascript/readme.md

@@ -0,0 +1 @@
+# Javascript

content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md

@@ -0,0 +1 @@
+# Basic usage of git

content/roadmaps/100-frontend/content/104-version-control-systems/readme.md

@@ -0,0 +1 @@
+# Version control systems

content/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md

@@ -0,0 +1,11 @@
+# Github
+
+[GitHub](https://github.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink badgeText='Read' href='https://docs.github.com/en/get-started/quickstart/hello-world'>GitHub: Quickstart</BadgeLink>
+<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=w3jLJU7DT5E'>What is GitHub?</BadgeLink>
+<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=wpISo9TNjfU'>Git vs. GitHub: What's the difference?</BadgeLink>
+<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=RGOj5yH7evk'>Git and GitHub for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=eulnSXkhE7I'>Git and GitHub - CS50 Beyond 2019</BadgeLink>

content/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md

@@ -0,0 +1 @@
+# Gitlab

content/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md

@@ -0,0 +1 @@
+# Bitbucket

content/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md

@@ -0,0 +1 @@
+# Repo hosting services

content/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md

@@ -0,0 +1 @@
+# Https

content/roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md

@@ -0,0 +1 @@
+# Content security policy

content/roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md

@@ -0,0 +1 @@
+# Cors

content/roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md

@@ -0,0 +1 @@
+# Owasp security risks

content/roadmaps/100-frontend/content/106-web-security-knowledge/readme.md

@@ -0,0 +1 @@
+# Web security knowledge

content/roadmaps/100-frontend/content/107-package-managers/100-npm.md

@@ -0,0 +1 @@
+# Npm

content/roadmaps/100-frontend/content/107-package-managers/101-yarn.md

@@ -0,0 +1 @@
+# Yarn

content/roadmaps/100-frontend/content/107-package-managers/readme.md

@@ -0,0 +1 @@
+# Package managers

content/roadmaps/100-frontend/content/108-css-architecture/100-bem.md

@@ -0,0 +1 @@
+# Bem

content/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md

@@ -0,0 +1 @@
+# Oocss

content/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md

@@ -0,0 +1 @@
+# Smacss

content/roadmaps/100-frontend/content/108-css-architecture/readme.md

@@ -0,0 +1 @@
+# Css architecture

content/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md

@@ -0,0 +1 @@
+# Sass

content/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md

@@ -0,0 +1 @@
+# Postcss

content/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md

@@ -0,0 +1 @@
+# Less

content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md

@@ -0,0 +1 @@
+# Css preprocessors

content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md

@@ -0,0 +1 @@
+# Npm scripts

content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md

@@ -0,0 +1 @@
+# Task runners

content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md

@@ -0,0 +1 @@
+# Webpack

content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md

@@ -0,0 +1 @@
+# Esbuild

content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md

@@ -0,0 +1 @@
+# Rollup