Add resouce for cqrs and event sourcing (#1307)

* Resources added for oracle

* Update content/roadmaps/101-backend/content/106-relational-databases/104-oracle.md

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

.github/sponsors/doppler-logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3473 1069"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#111;}.cls-3{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="658.73" y1="777.7" x2="341.45" y2="352.06" gradientTransform="matrix(1, 0, 0, -1, 0, 1070)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33a9ff"/><stop offset="1" stop-color="#1673ff"/></linearGradient></defs><rect class="cls-1" width="3473" height="1069"/><path class="cls-2" d="M1054.06,633.32q4.93.45,11.23.9H1081q52.55,0,77.7-26.5,25.59-26.49,25.59-73.18,0-48.94-24.25-74.09t-76.79-25.14q-7.18,0-14.82.45-5.78,0-11,.51a3.73,3.73,0,0,0-3.33,3.74Zm202.54-98.78Q1256.6,575,1244,605t-35.92,49.84q-22.9,19.75-56.14,29.63t-74.55,9.88q-18.86,0-44-1.79A338.32,338.32,0,0,1,984,686.3V386.41a3.8,3.8,0,0,1,3.13-3.75,386.34,386.34,0,0,1,47.17-5.27q26.49-1.8,45.36-1.8,40,0,72.3,9,32.79,9,56.14,28.29T1244,462.25Q1256.61,492.33,1256.6,534.54Z"/><path class="cls-2" d="M1397.52,534.54q0,22.89,5.39,41.31a103.13,103.13,0,0,0,16.17,31.87,74.66,74.66,0,0,0,26.05,20.21q15.27,7.19,35,7.18,19.3,0,34.58-7.18a69.47,69.47,0,0,0,26-20.21A91.41,91.41,0,0,0,1557,575.85q5.83-18.42,5.84-41.31T1557,493.23q-5.39-18.86-16.17-31.88a67.73,67.73,0,0,0-26-20.65q-15.27-7.18-34.58-7.19-19.77,0-35,7.64a72.5,72.5,0,0,0-26.05,20.65q-10.33,13-16.17,31.88A145.23,145.23,0,0,0,1397.52,534.54Zm237.57,0q0,40-12.12,70.49-11.68,30.09-32.34,50.74a134.89,134.89,0,0,1-49.4,30.53,176.88,176.88,0,0,1-61.07,10.33A174.23,174.23,0,0,1,1420,686.3a140,140,0,0,1-49.4-30.53q-21.11-20.65-33.23-50.74-12.13-30.53-12.13-70.49t12.58-70q12.57-30.53,33.68-51.18a142,142,0,0,1,49.4-31A171.39,171.39,0,0,1,1480.16,372a174.08,174.08,0,0,1,60.18,10.33,136.87,136.87,0,0,1,49.4,31q21.1,20.65,33.23,51.18Q1635.09,494.58,1635.09,534.54Z"/><path class="cls-2" d="M1810.48,375.59q69.62,0,106.88,24.7,37.28,24.24,37.28,79.92,0,56.13-37.72,81.27-37.73,24.69-107.79,24.69H1791a3.83,3.83,0,0,0-3.83,3.83v96.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.83a3.81,3.81,0,0,1,3.1-3.75,400.76,400.76,0,0,1,45.4-5.69Q1791.18,375.59,1810.48,375.59Zm4.49,59.72q-7.63,0-15.27.45-5,.3-9.06.62a3.8,3.8,0,0,0-3.51,3.8v86.28h22q36.38,0,54.79-9.88t18.42-36.82q0-13-4.94-21.55a32.47,32.47,0,0,0-13.48-13.47q-8.54-5.39-21.1-7.19A159.75,159.75,0,0,0,1815,435.31Z"/><path class="cls-2" d="M2123.07,375.59q69.61,0,106.89,24.7,37.27,24.24,37.27,79.92,0,56.13-37.72,81.27-37.73,24.69-107.78,24.69h-18.18a3.83,3.83,0,0,0-3.83,3.83v96.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.82a3.8,3.8,0,0,1,3.1-3.74,400.76,400.76,0,0,1,45.4-5.69Q2103.77,375.59,2123.07,375.59Zm4.49,59.72q-7.64,0-15.27.45-5,.3-9.06.62a3.81,3.81,0,0,0-3.51,3.8v86.28h22q36.38,0,54.78-9.88t18.42-36.82q0-13-4.94-21.55a32.47,32.47,0,0,0-13.48-13.47q-8.52-5.39-21.1-7.19A159.75,159.75,0,0,0,2127.56,435.31Z"/><path class="cls-2" d="M2540.5,630.17a1.29,1.29,0,0,1,1.28,1.28v57.62a1.28,1.28,0,0,1-1.28,1.27H2342.25V401.41a3.83,3.83,0,0,1,2.81-3.69l67.25-18.54v251Z"/><path class="cls-2" d="M2618.88,690.34V383a3.84,3.84,0,0,1,3.83-3.83h215a1.28,1.28,0,0,1,1.23,1.64l-16.44,56.26a1.26,1.26,0,0,1-1.22.92H2692.77a3.83,3.83,0,0,0-3.83,3.83v57.24H2803.1a1.27,1.27,0,0,1,1.23,1.63l-16,54.92a1.28,1.28,0,0,1-1.22.92h-94.34a3.82,3.82,0,0,0-3.83,3.83v71.15h154.72a1.28,1.28,0,0,1,1.23,1.63l-16.34,56.27a1.27,1.27,0,0,1-1.22.92Z"/><path class="cls-2" d="M3006,375.59q70.07,0,107.34,25.15,37.28,24.69,37.27,77.22,0,32.79-15.27,53.44-14.82,20.19-43.11,31.87,9.43,11.68,19.76,26.94,10.34,14.82,20.21,31.43,10.32,16.17,19.76,34.13,8.93,16.58,16.65,32.75a1.28,1.28,0,0,1-1.16,1.82H3091.6a1.27,1.27,0,0,1-1.11-.65q-8.37-15-17.15-30.33-8.53-15.72-18-30.53-9-14.82-18-27.84a286.92,286.92,0,0,0-18-24.25h-30.76a3.83,3.83,0,0,0-3.82,3.83V686.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.82a3.8,3.8,0,0,1,3.09-3.74,400,400,0,0,1,44.06-5.69Q2986.67,375.59,3006,375.59Zm4.05,59.72q-7.64,0-13.93.45-4,.3-7.71.61a3.82,3.82,0,0,0-3.51,3.81v80.89h19.76q39.51,0,56.58-9.88t17.07-33.67q0-22.9-17.52-32.33Q3043.71,435.31,3010,435.31Z"/><path class="cls-3" d="M307.26,310a1.79,1.79,0,0,0-1.5,2.75l89.7,140.38a14.19,14.19,0,0,0,12,6.58H528.38c39.92,0,64.87,35.28,64.72,74.79s-26.74,74.44-64.72,74.44H404.77a4.71,4.71,0,0,0-4.71,4.75V754.25a4.72,4.72,0,0,0,4.72,4.75H560.62C689.12,759,753,637.1,753.09,534.5S690,310,560.62,310ZM367,609.29H336.16C318.4,609.29,304,626,304,646.71V757.66a1.28,1.28,0,0,0,1.28,1.28h30.88c17.76,0,32.15-16.75,32.15-37.41v-111A1.27,1.27,0,0,0,367,609.29Z"/></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/sponsors/workos-logo-white-bg.svg

@@ -0,0 +1,11 @@
+<svg width="1354" height="420" viewBox="0 0 1354 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1354" height="420" rx="20" fill="white"/>
+<path d="M434.751 133.122H466.637L489.595 227.729C493.852 245.585 494.697 256.219 494.697 256.219H495.128C495.128 256.219 496.61 245.808 500.867 227.729L522.757 133.122H558.9L582.066 227.729C586.53 246.223 587.598 256.219 587.598 256.219H588.236C588.236 256.219 588.666 246.223 592.907 227.729L615.02 133.122H646.907L606.523 288.313H571.017L546.576 194.344C541.474 173.936 541.044 164.801 541.044 164.801H540.614C540.614 164.801 540.183 173.936 535.512 194.344L512.553 288.313H475.996L434.751 133.122Z" fill="black"/>
+<path d="M641.583 231.934C641.583 196.428 664.541 173.47 699.202 173.47C733.639 173.47 756.597 196.428 756.597 231.934C756.597 267.647 733.639 290.828 699.202 290.828C664.557 290.812 641.583 267.647 641.583 231.934ZM726.832 231.934C726.832 208.976 715.783 195.998 699.202 195.998C681.346 195.998 671.349 210.458 671.349 231.934C671.349 255.323 682.398 268.284 699.202 268.284C717.058 268.284 726.832 253.824 726.832 231.934Z" fill="black"/>
+<path d="M770.836 175.21H799.103V196.048H799.741C804.635 185.207 816.322 174.365 836.299 174.365C839.695 174.365 841.831 174.796 843.314 175.21V203.478H842.469C842.469 203.478 839.918 202.633 832.903 202.633C811.013 202.633 799.103 215.594 799.103 239.828V288.295H770.836V175.21Z" fill="black"/>
+<path d="M856.5 133.122H884.767V182.865C884.767 212.2 884.336 217.509 884.336 217.509H884.767L926.857 175.212H962.139L912.843 224.11L970.031 288.313H936.646L895.401 241.536L884.767 251.946V288.297H856.5V133.122Z" fill="black"/>
+<path d="M970.444 211.285C970.444 163.455 1000.21 131.569 1044.85 131.569C1089.49 131.569 1119.26 163.455 1119.26 211.285C1119.26 259.114 1089.49 291.001 1044.85 291.001C1000.21 291.001 970.444 259.114 970.444 211.285ZM1088.42 211.285C1088.42 178.761 1071 156.855 1044.84 156.855C1018.67 156.855 1001.26 178.761 1001.26 211.285C1001.26 243.809 1018.69 265.715 1044.84 265.715C1070.98 265.715 1088.42 243.809 1088.42 211.285Z" fill="black"/>
+<path d="M1130.08 236.656H1162.4C1162.4 254.943 1174.95 265.146 1194.08 265.146C1210.23 265.146 1221.29 257.063 1221.29 245.584C1221.29 232.622 1212.79 229.21 1185.79 223.901C1161.12 219.007 1134.98 210.716 1134.98 178.399C1134.98 151.408 1157.93 131 1193.01 131C1229.57 131 1252.11 150.132 1252.11 179.037H1219.79C1219.79 165.007 1208.95 156.286 1193.01 156.286C1176.86 156.286 1166.86 164.146 1166.86 175.625C1166.86 187.742 1173.88 192.413 1195.56 196.878C1227.65 203.685 1254.02 207.288 1254.02 243.001C1254.02 271.3 1229.36 290.432 1193.01 290.432C1156.02 290.432 1130.08 268.957 1130.08 236.656Z" fill="black"/>
+<path d="M100 210C100 214.824 101.269 219.647 103.723 223.793L148.231 300.878C152.8 308.747 159.739 315.178 168.369 318.055C185.377 323.724 202.977 316.447 211.354 301.893L222.1 283.278L179.708 210L224.47 132.408L235.216 113.792C238.431 108.208 242.747 103.638 247.824 100H243.17H178.777C166.677 100 155.508 106.431 149.5 116.923L103.723 196.208C101.269 200.354 100 205.177 100 210Z" fill="#6363F1"/>
+<path d="M353.847 210C353.847 205.177 352.578 200.353 350.124 196.207L305.024 118.107C296.647 103.638 279.047 96.3608 262.039 101.945C253.409 104.822 246.47 111.253 241.901 119.122L231.747 136.638L274.139 210L229.378 287.592L218.632 306.208C215.416 311.708 211.101 316.362 206.024 320H210.678H275.07C287.17 320 298.34 313.569 304.347 303.077L350.124 223.792C352.578 219.646 353.847 214.823 353.847 210Z" fill="#6363F1"/>
+</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/custom-ad.tsx

@@ -10,7 +10,7 @@ export const CustomAd = () => {
           >
             <img
               src='/fm-img.png'
-              alt='FM Logo'
+              alt='Custom Logo'
               height='100'
               width='130'
               style={{ maxWidth: '130px', border: 'none' }}

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 />
 
@@ -64,16 +64,6 @@ export function Footer() {
           </Text>
         </Box>
       </Container>
-
-      <CustomAd />
-      {process.env.GA_SECRET && false && (
-        <script
-          async
-          type='text/javascript'
-          src='//cdn.carbonads.com/carbon.js?serve=CE7DLK3Y&placement=roadmapsh'
-          id='_carbonads_js'
-        />
-      )}
     </Box>
   );
 }

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/helmet.tsx

@@ -1,73 +1,165 @@
 import NextHead from 'next/head';
 import siteConfig from '../content/site.json';
+import { RoadmapType } from '../lib/roadmap';
+import { roadmapTheme } from '../styles/theme';
 
 type HelmetProps = {
   title?: string;
   keywords?: string[];
   canonical?: string;
   description?: string;
+  roadmap?: RoadmapType;
 };
 
-const Helmet = (props: HelmetProps) => (
+function getRichSnippetJson(roadmap: RoadmapType) {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': `https://roadmap.sh/${roadmap.id}`,
+    },
+    headline: roadmap.seo.title,
+    description: roadmap.seo.description,
+    image: roadmap.jsonUrl
+      ? `https://roadmap.sh/roadmaps/${roadmap.id}.png`
+      : undefined,
+    author: {
+      '@type': 'Person',
+      name: 'Kamran Ahmed',
+      url: 'https://twitter.com/kamranahmedse',
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'roadmap.sh',
+      logo: {
+        '@type': 'ImageObject',
+        url: 'https://roadmap.sh/brand-square.png',
+      },
+    },
+  };
+}
+
+const Helmet = (props: HelmetProps) => {
+  const { roadmap, title, canonical, description, keywords } = props;
+
+  return (
     <NextHead>
-    <meta charSet='UTF-8' />
+      <meta charSet="UTF-8" />
 
-    <title>{props.title || siteConfig.title}</title>
-    <meta name='description' content={props.description || siteConfig.description} />
+      <title>{title || siteConfig.title}</title>
+      <meta
+        name="description"
+        content={description || siteConfig.description}
+      />
 
-    <meta name='author' content={siteConfig.author} />
-    <meta name='keywords' content={props.keywords ? props.keywords.join(',') : siteConfig.keywords.join(',')} />
+      <meta name="author" content={siteConfig.author} />
+      <meta
+        name="keywords"
+        content={keywords ? keywords.join(',') : siteConfig.keywords.join(',')}
+      />
 
-    <meta name='viewport'
-          content='width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0' />
-    {props.canonical && <link rel='canonical' href={props.canonical} />}
-    <meta httpEquiv='Content-Language' content='en' />
+      <meta
+        name="viewport"
+        content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0"
+      />
+      {canonical && <link rel="canonical" href={canonical} />}
+      <meta httpEquiv="Content-Language" content="en" />
+      <meta property="og:title" content={title || siteConfig.title} />
+      <meta
+        property="og:description"
+        content={description || siteConfig.description}
+      />
+      <meta
+        property="og:image"
+        content={`${siteConfig.url.web}${siteConfig.logoSquare}`}
+      />
+      <meta property="og:url" content={siteConfig.url.web} />
+      <meta property="og:type" content="website" />
+      <meta
+        property="article:publisher"
+        content={`https://facebook.com/${siteConfig.facebook}`}
+      />
+      <meta property="og:site_name" content={siteConfig.name} />
+      <meta property="article:author" content={siteConfig.author} />
 
-    <meta property='og:title' content={props.title || siteConfig.title} />
-    <meta property='og:description' content={props.description || siteConfig.description} />
-    <meta property='og:image' content={`${siteConfig.url.web}${siteConfig.logoSquare}`} />
-    <meta property='og:url' content={siteConfig.url.web} />
-    <meta property='og:type' content='website' />
-    <meta property='article:publisher' content={`https://facebook.com/${siteConfig.facebook}`} />
-    <meta property='og:site_name' content={siteConfig.name} />
-    <meta property='article:author' content={siteConfig.author} />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:site" content={`@${siteConfig.twitter}`} />
+      <meta name="twitter:title" content={title || siteConfig.title} />
+      <meta
+        name="twitter:description"
+        content={description || siteConfig.description}
+      />
+      <meta
+        name="twitter:image"
+        content={`${siteConfig.url.web}${siteConfig.logoSquare}`}
+      />
+      <meta name="twitter:image:alt" content="roadmap.sh" />
 
-    <meta name='twitter:card' content='summary' />
-    <meta name='twitter:site' content={`@${siteConfig.twitter}`} />
-    <meta name='twitter:title' content={props.title || siteConfig.title} />
-    <meta name='twitter:description' content={props.description || siteConfig.description} />
-    <meta name='twitter:image' content={`${siteConfig.url.web}${siteConfig.logoSquare}`} />
-    <meta name='twitter:image:alt' content='roadmap.sh' />
+      <meta name="mobile-web-app-capable" content="yes" />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+      <meta
+        name="apple-mobile-web-app-status-bar-style"
+        content="black-translucent"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/manifest/apple-touch-icon.png"
+      />
+      <meta name="msapplication-TileColor" content="#101010" />
+      <meta name="theme-color" content="#848a9a" />
 
-    <meta name='mobile-web-app-capable' content='yes' />
-    <meta name='apple-mobile-web-app-capable' content='yes' />
-    <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
-    <link rel='apple-touch-icon' sizes='180x180' href='/manifest/apple-touch-icon.png' />
-    <meta name='msapplication-TileColor' content='#101010' />
-    <meta name='theme-color' content='#848a9a' />
+      <link rel="manifest" href="/manifest/manifest.json" />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/manifest/icon32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/manifest/icon16.png"
+      />
+      <link
+        rel="shortcut icon"
+        href="/manifest/favicon.ico"
+        type="image/x-icon"
+      />
+      <link rel="icon" href="/manifest/favicon.ico" type="image/x-icon" />
 
-    <link rel='manifest' href='/manifest/manifest.json' />
-    <link rel='icon' type='image/png' sizes='32x32' href='/manifest/icon32.png' />
-    <link rel='icon' type='image/png' sizes='16x16' href='/manifest/icon16.png' />
-    <link rel='shortcut icon' href='/manifest/favicon.ico' type='image/x-icon' />
-    <link rel='icon' href='/manifest/favicon.ico' type='image/x-icon' />
+      {roadmap?.id && (
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(getRichSnippetJson(roadmap)),
+          }}
+        />
+      )}
 
-    { /* Global Site Tag (gtag.js) - Google Analytics */}
+      {/* Global Site Tag (gtag.js) - Google Analytics */}
       {process.env.GA_SECRET && (
         <>
-        <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_SECRET}`} />
-        <script dangerouslySetInnerHTML={{
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_SECRET}`}
+          />
+          <script
+            dangerouslySetInnerHTML={{
               __html: `
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
             gtag('config', '${process.env.GA_SECRET}');
-          `
-        }} />
+          `,
+            }}
+          />
         </>
       )}
-
     </NextHead>
-);
+  );
+};
 
 export default Helmet;

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/a.tsx

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 
 type EnrichedLinkProps = {
   href: string;
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 const Link = styled.a`
   font-weight: 600;
@@ -13,14 +13,25 @@ const Link = styled.a`
 
 const EnrichedLink = (props: EnrichedLinkProps) => {
   // Is external URL or is a media URL
-  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href);
+  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
+    props.href
+  );
+
+  const linkProps: Record<string, string> = {
+    target: '_self',
+    ...(isExternalUrl
+      ? {
+          rel: 'nofollow',
+          target: '_blank',
+        }
+      : {}),
+  };
 
   return (
-    <Link href={props.href} target={isExternalUrl ? '_blank' : '_self'}>
+    <Link href={props.href} {...linkProps}>
       {props.children}
     </Link>
   );
 };
 
 export default EnrichedLink;
-

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

@@ -5,16 +5,48 @@ type BadgeLinkType = {
   target: string;
   badgeText: string;
   href: string;
-  children: React.ReactNode
+  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;
+
+  // Is external URL or is a media URL
+  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
+    props.href
+  );
+
+  const linkProps: Record<string, string> = {
+    ...(isExternalUrl
+      ? {
+          rel: 'nofollow',
+        }
+      : {}),
+  };
 
   return (
-    <Text mb={0}>
-      <Link fontWeight={500} textDecoration='underline' href={href} target={target}>
-        <Badge colorScheme={'purple'} style={{ position: 'relative', top: '-2px' }}>{badgeText}</Badge> {children}
+    <Text mb={'0px'}>
+      <Link
+        fontSize="14px"
+        color="blue.700"
+        fontWeight={500}
+        textDecoration="none"
+        href={href}
+        target={target}
+        _hover={{ textDecoration: 'none', color: 'purple.400' }}
+        {...linkProps}
+      >
+        <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),
-  h2: linkify(H2),
-  h3: linkify(H3),
-  h4: linkify(H4),
-  h5: linkify(H5),
-  h6: linkify(H6)
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  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;

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,116 @@
+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';
+import { queryGroupElementsById } from '../../lib/renderer/utils';
+
+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');
+                  queryGroupElementsById(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);
+                  queryGroupElementsById(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.800',
-  'green.800',
-  'teal.800',
-  'gray.800',
-  'red.900'
+  'red.100',
+  'yellow.100',
+  'green.200',
+  'teal.200',
+  'blue.200',
+  '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'
-      bg={bgColorList[colorIndex] ?? bgColorList[0]}
-      color='white'
-      p='15px'
-      rounded='10px'
-      pos='relative'
+      shadow="2xl"
+      className={'home-roadmap-item'}
+      bg={'rgba(255,255,255,.05)'}
+      color="white"
+      p="15px"
+      rounded="10px"
+      pos="relative"
     >
       {isCommunity && (
-        <Tooltip label={'Community contribution'} hasArrow placement='top'>
-          <InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
+        <Tooltip label={'Community contribution'} hasArrow placement="top">
+          <InfoIcon opacity={0.5} position="absolute" top="10px" right="10px" />
         </Tooltip>
       )}
 
-      <Heading fontSize={['17px', '17px', '22px']} mb='5px'>{title}</Heading>
-      <Text color='gray.200' fontSize={['13px']}>{subtitle}</Text>
+      <Heading
+        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 { isInteractiveRoadmap, 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>
+        {isInteractiveRoadmap(roadmap.id) && (
+          <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'
-          left={0}
-          right={0}
+          position='sticky'
+          top={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'
-         bg='gray.800'>
-      <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>
+    <Box
+      borderTopWidth={1}
+      pt={['40px', '40px', '70px']}
+      pb={['40px', '45px', '80px']}
+      textAlign="left"
+      bg="brand.footer"
+    >
+      <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']}
-                    variant='outline' borderWidth={2}
-                    colorScheme='green' _hover={{ color: 'green.200', textDecoration: 'none' }}>
+            <Button
+              as={Link}
+              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>
-            <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>
+              colorScheme="yellow"
+            >
+              Updates & Paid Content
+            </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",
-    "createdAt": "2020-07-09T19:59:14.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-07-01T19:59:14.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-06-28T19:59:14.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-06-20T19:59:14.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-06-02T20:59:14.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-05-26T20:59:14.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-05-19T20:59:14.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-05-14T20:59:14.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-05-04T20:59:14.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-05-04T12:59:14.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-04-28T15:48:21.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-04-22T15:48:21.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-04-03T15:48:21.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-03-15T15:48:21.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-03-14T15:48:21.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-02-18T15:48:21.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-02-29T15:48:21.191Z"
+    "updatedAt": "2021-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",
-    "createdAt": "2020-01-17T15:48:21.191Z",
+    "updatedAt": "2021-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",
-    "createdAt": "2019-12-03T12:13:00.860Z"
+    "updatedAt": "2020-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",
-    "updatedAt": "2020-07-24T12:40:18"
+    "createdAt": "2017-10-24T17:00:00.860Z",
+    "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/threads-and-concurrency.md

@@ -0,0 +1,8 @@
+# Threads and Concurrency
+
+A thread is an execution context in which the instructions to the CPU can be scheduled and executed independently of the parent process. Concurrency is the concept of multiple threads in a shared memory space being computed simultaneously (or intermittently executed in succession to provide that illusion). Concurrency allows multiple processes to execute at once and can apply to programming languages as well as operating systems. 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=olYdb0DdGtM'>Threading Tutorial #1 - Concurrency, Threading and Parallelism</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@akhandmishra/operating-system-threads-and-concurrency-aec2036b90f8'>Operating System: Threads and Concurrency</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.mit.edu/6.005/www/fa14/classes/17-concurrency/'>Reading 17: Concurrency</BadgeLink>

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
-people and get people to start contributing so it might be rough on the edges, but that is where we need your help.
+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.
 
 ## 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

@@ -1,13 +1,12 @@
 [
   {
     "seo": {
-      "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.",
+      "title": "Frontend Developer Roadmap: Learn to become a modern frontend developer",
+      "description": "Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.",
       "keywords": [
-        "frontend roadmap",
-        "javascript roadmap",
-        "frontend roadmap 2021",
-        "javascript roadmap 2021",
+        "javascript roadmap 2022",
+        "frontend roadmap 2022",
+        "frontend developer roadmap 2022",
         "guide to becoming a developer",
         "guide to becoming a frontend developer",
         "frontend developer",
@@ -17,6 +16,7 @@
         "javascript developer",
         "frontend development skills",
         "frontend development skills test",
+        "frontend roadmap",
         "frontend engineer roadmap",
         "frontend developer roadmap",
         "become a frontend developer",
@@ -32,27 +32,33 @@
       ]
     },
     "title": "Frontend Developer",
-    "description": "Step by step guide to becoming a modern frontend developer in 2021",
+    "description": "Step by step guide to becoming a modern frontend developer in 2022",
     "featuredTitle": "Frontend",
-    "featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
+    "featuredDescription": "Step by step guide to becoming a frontend developer in 2022",
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
     "featured": true,
-    "imagePath": "/roadmaps/frontend.png",
-    "resourcesPath": "/roadmaps/1-frontend/resources.md",
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap",
+    "imageUrl": "/roadmaps/frontend.png",
+    "jsonUrl": "/project/frontend.json",
+    "resourcesPath": "/roadmaps/100-frontend/resources.md",
+    "pdfUrl": "/pdfs/frontend.pdf",
+    "contentPathsFilePath": "/roadmaps/100-frontend/content-paths.json",
     "id": "frontend",
+    "metaPath": "/roadmaps/100-frontend/meta.json",
     "isUpcoming": false
   },
   {
     "seo": {
-      "title": "Learn to become a modern backend developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.",
+      "title": "Backend Developer Roadmap: Learn to become a modern backend developer",
+      "description": "Learn to become a modern backend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.",
       "keywords": [
+        "backend roadmap 2022",
+        "backend developer roadmap 2022",
         "guide to becoming a developer",
         "guide to becoming a backend developer",
+        "backend roadmap",
         "backend developer",
         "backend engineer",
         "backend skills",
@@ -75,18 +81,21 @@
       ]
     },
     "title": "Backend Developer",
-    "description": "Step by step guide to becoming a modern backend developer in 2021",
+    "description": "Step by step guide to becoming a modern backend developer in 2022",
     "featuredTitle": "Backend",
-    "featuredDescription": "Step by step guide to becoming a backend developer in 2021",
+    "featuredDescription": "Step by step guide to becoming a backend developer in 2022",
     "featured": true,
-    "imagePath": "/roadmaps/backend.png",
-    "resourcesPath": "/roadmaps/2-backend/resources.md",
+    "imageUrl": "/roadmaps/backend.png",
+    "jsonUrl": "/project/backend.json",
+    "resourcesPath": "/roadmaps/101-backend/resources.md",
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap",
+    "pdfUrl": "/pdfs/backend.pdf",
+    "contentPathsFilePath": "/roadmaps/101-backend/content-paths.json",
     "id": "backend",
+    "metaPath": "/roadmaps/101-backend/meta.json",
     "isUpcoming": false
   },
   {
@@ -94,6 +103,9 @@
       "title": "DevOps Roadmap: Learn to become a DevOps Engineer or SRE",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
+        "devops roadmap 2022",
+        "sre roadmap 2022",
+        "operations roadmap 2022",
         "guide to becoming a devops enginer",
         "devops roadmap",
         "sre roadmap",
@@ -112,12 +124,13 @@
       ]
     },
     "title": "DevOps Roadmap",
-    "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2021",
+    "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2022",
     "featuredTitle": "DevOps",
-    "featuredDescription": "Step by step guide for DevOps or operations role in 2021",
+    "featuredDescription": "Step by step guide for DevOps or operations role in 2022",
     "featured": true,
-    "imagePath": "/roadmaps/devops.png",
-    "resourcesPath": "/roadmaps/3-devops/resources.md",
+    "imageUrl": "/roadmaps/devops.png",
+    "jsonUrl": "/project/devops.json",
+    "resourcesPath": "/roadmaps/102-devops/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -127,8 +140,9 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/devops-roadmap",
+    "pdfUrl": "/pdfs/devops.pdf",
     "id": "devops",
+    "metaPath": "/roadmaps/102-devops/meta.json",
     "isUpcoming": false
   },
   {
@@ -136,6 +150,8 @@
       "title": "React Developer Roadmap: Learn to become a React 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": [
+        "react roadmap 2022",
+        "react developer roadmap 2022",
         "guide to becoming a react developer",
         "react developer roadmap",
         "react roadmap",
@@ -150,14 +166,15 @@
       ]
     },
     "title": "React Developer",
-    "description": "Everything that is there to learn about React and the ecosystem in 2021.",
+    "description": "Everything that is there to learn about React and the ecosystem in 2022.",
     "featuredTitle": "React",
-    "featuredDescription": "Step by step guide to become a React Developer in 2021",
+    "featuredDescription": "Step by step guide to become a React Developer in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
     "featured": true,
-    "contentPath": "/roadmaps/4-react/landscape.md",
-    "resourcesPath": "/roadmaps/4-react/resources.md",
+    "landingPath": "/roadmaps/103-react/landscape.md",
+    "resourcesPath": "/roadmaps/103-react/resources.md",
+    "jsonUrl": "/project/react.json",
     "versions": [
       "latest",
       "2018",
@@ -167,10 +184,237 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/react-roadmap",
+    "pdfUrl": "/pdfs/react.pdf",
     "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 2022.",
+    "featuredTitle": "Angular",
+    "featuredDescription": "Step by step guide to become a Angular Developer in 2022",
+    "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": "/pdfs/angular.pdf",
+    "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 2022",
+    "featuredTitle": "Android",
+    "featuredDescription": "Step by step guide to becoming an Android Developer in 2022",
+    "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 2022",
+    "featuredTitle": "Python",
+    "featuredDescription": "Step by step guide to becoming a Python Developer in 2022",
+    "isTextHeavy": true,
+    "isCommunity": false,
+    "featured": true,
+    "jsonUrl": "/project/python.json",
+    "resourcesPath": "/roadmaps/106-python/resources.md",
+    "landingPath": "/roadmaps/106-python/landscape.md",
+    "pdfUrl": "/pdfs/python.pdf",
+    "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 Go 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 2022",
+    "featuredTitle": "Go",
+    "featuredDescription": "Step by step guide to becoming a Go developer in 2022",
+    "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": "/pdfs/go.pdf",
+    "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 java development. Learn to become a modern Java 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 2022",
+    "featuredTitle": "Java",
+    "featuredDescription": "Step by step guide to becoming a Java Developer in 2022",
+    "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": "/pdfs/java.pdf",
+    "id": "java",
+    "metaPath": "/roadmaps/108-java/meta.json"
+  },
   {
     "seo": {
       "title": "DBA Roadmap: Learn to become a database administrator with PostgreSQL",
@@ -197,50 +441,50 @@
       ]
     },
     "title": "PostgreSQL DBA",
-    "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021",
+    "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2022",
     "featuredTitle": "DBA",
-    "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2021",
-    "contentPath": "/roadmaps/5-postgresql-dba/landscape.md",
-    "resourcesPath": "/roadmaps/5-postgresql-dba/resources.md",
+    "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2022",
+    "landingPath": "/roadmaps/109-postgresql-dba/landscape.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",
-      "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.",
+      "title": "AWS Roadmap: Learn to use AWS",
+      "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",
-        "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"
+        "guide to aws",
+        "aws roadmap",
+        "aws skills",
+        "aws skills test",
+        "skills for aws",
+        "cloud development",
+        "what is aws",
+        "aws quiz",
+        "aws 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": true,
+    "title": "AWS",
+    "description": "Everything that is there to learn about AWS and the ecosystem in 2022.",
+    "featuredTitle": "AWS",
+    "featuredDescription": "Step by step guide to learn AWS in 2022",
+    "isTextHeavy": false,
+    "isCommunity": false,
+    "isUpcoming": true,
     "featured": true,
-    "contentPath": "/roadmaps/6-android/landscape.md",
-    "resourcesPath": "/roadmaps/6-android/resources.md",
+    "landingPath": "/roadmaps/110-aws/landscape.md",
+    "resourcesPath": "/roadmaps/110-aws/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -250,8 +494,8 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "id": "android",
-    "isUpcoming": false
+    "id": "aws",
+    "metaPath": "/roadmaps/110-aws/meta.json"
   },
   {
     "seo": {
@@ -273,16 +517,18 @@
       ]
     },
     "title": "QA Engineer",
-    "description": "Steps to follow in order to become a modern QA Engineer in 2021",
+    "description": "Steps to follow in order to become a modern QA Engineer in 2022",
     "featuredTitle": "QA",
-    "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021",
+    "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
     "isUpcoming": true,
-    "contentPath": "/roadmaps/7-qa/landscape.md",
-    "resourcesPath": "/roadmaps/7-qa/resources.md",
+    "featured": true,
+    "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/1-frontend/resources.md

@@ -1,76 +0,0 @@
-<div className='alert alert-primary' style={{ marginBottom: '-10px'}}>
-  This page is incomplete and is being worked upon. Please check back later or <a href='/signup'>subscribe</a> / <a href='https://twitter.com/kamranahmedse'>follow me on twitter</a> to get notified. Also, feel free to contribute by suggesting the resources in <a href='https://github.com/kamranahmedse/developer-roadmap'>the issues</a>.
-</div>
-
-# Become a Frontend Developer
-Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way. 
-
-## Internet and how it works?
-
-Get the basic understanding of internet, browsers, networks and other relevant knowledge. 
-
-* <BadgeLink badgeText='Read' href='/guides/what-is-internet'>What is Internet?</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the internet works in 5 minutes</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth/'>What is HTTP and how it evolved?</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://blog.cloudflare.com/http3-the-past-present-and-future/'>HTTP/3: the past, the present, and the future</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://kinsta.com/blog/http3/'>What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work: Behind the scenes of modern web browsers</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Rck3BALhI5c'>DNS as Fast As Possible</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://howdns.works/'>How DNS works?</BadgeLink>
-* <BadgeLink badgeText='Read' href='/guides/dns-in-one-picture'>DNS in One Picture</BadgeLink>
-
-## Learn HTML
-HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the basic tags, learn how to write semantic HTML, understand basic SEO, learn how to divide your pages into sections that will help you style them. 
-
-Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section.
- 
-
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=UB1O30fR-EE'>HTML Crash Course For Absolute Beginners</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/default.asp'>W3Schools – HTML Tutorial</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://hacks.mozilla.org/2016/08/a-few-html-tips/'>A few HTML tips</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://hackernoon.com/six-tips-to-set-up-a-better-html-document-ud1033z3z'>Six tips to set up a better HTML document</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>HTML Semantic Elements</BadgeLink> 
-* <BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element'>HTML elements reference</BadgeLink> 
-
-## Style your pages with CSS
-With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections.
-
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools – CSS Tutorial</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wm6CUkswsNw'>Build An HTML5 Website With A Responsive Layout</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/JJSoEo8JSnc?t=46'>Flexbox CSS In 20 Minutes</BadgeLink>
-
-## Basics of JavaScript
-JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript.
-
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
-
-## Version Control Systems and Git
-
-Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.
-
-In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS.  
-
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
-
-Now that you know what git is go ahead and create an account on [GitHub](https://github.com) and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community.
-
-## Modern JavaScript
-
-In this section you will learn how to use package managers and get started with the "modern JavaScript".
-
-* <BadgeLink badgeText='Read' href='https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70'>Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it)</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=8Rmj5UY5mJk'>What is NPM and how to use it</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
-
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />

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

@@ -0,0 +1,136 @@
+{
+  "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",
+  "testing-your-apps:mocha": "/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md",
+  "testing-your-apps:chai": "/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md",
+  "testing-your-apps:ava": "/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md",
+  "testing-your-apps:jasmine": "/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.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=TNQsmPf24go'>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,10 @@
+# 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 colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/'>HTTP/3 From A To Z: Core Concepts</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,9 @@
+# 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>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=WjDrMKZWCt0'>How Do Web Browsers Work?</BadgeLink>

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

@@ -0,0 +1,9 @@
+# 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>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=e48AyJOA9W8'>When to add glue records to DNS settings</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Visit' href='https://messwithdns.net/'>Miss with DNS - DNS Playground</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,9 @@
+# HTML Basics
+
+HTML stands for HyperText 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>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=3PHXvlpOkf4'>Build 15 JavaScript Projects - Vanilla JavaScript</BadgeLink>

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

@@ -0,0 +1,9 @@
+# Semantic HTML
+
+Semantic element clearly describes its meaning to both the browser and the developer.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>W3Schools: Semantic HTML</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://hackernoon.com/how-to-write-semantic-html-dkq3ulo'>How To Write Semantic HTML</BadgeLink>
+
+

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

@@ -0,0 +1,6 @@
+# Forms and Validations
+
+Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation'>MDN Web Docs: Client-side form validation</BadgeLink>

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

@@ -0,0 +1,7 @@
+# Best Practices
+
+Learn to follow the best practices for writing maintainable and scalable HTML documents.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://github.com/hail2u/html-best-practices'>HTML Best Practices</BadgeLink>
+

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

@@ -0,0 +1,8 @@
+# Accessibility
+Web accessibility means that websites, tools, and technologies are designed and developed in such a way that people with disabilities can use them easily.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g'>Complete Playlist on Accessibility</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/accessibility/index.php'>Accessibility Tutorial
+</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/'>A Complete Guide To Accessible Front-End Components</BadgeLink>

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

@@ -0,0 +1,12 @@
+# Basics of SEO
+
+SEO or Search Engine Optimization is the technique used to optimize your website for better rankings on search engines such as Google, Bing etc.
+
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/search/docs'>Google Search Central — SEO Docs</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://github.com/seo/guide'>SEO Guide</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/welldone-software/seo-for-developers-a-quick-overview-5b5b7ce34679'>SEO for Developers</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=xsVTqzratPs'>Complete SEO Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SnxeXZpZkI0'>SEO Expert Course</BadgeLink>

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

@@ -0,0 +1,10 @@
+# HTML
+
+HTML stands for HyperText 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>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.codecademy.com/learn/learn-html'>Codecademy - Learn HTML</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/denysdovhan/learnyouhtml'>Interactive HTML 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,12 @@
+# Making layouts
+
+Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts. Use the resources below to learn about these topics: 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://flexboxfroggy.com/'>Learn and Practice Flexbox</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://cssgridgarden.com/'>Game for learning CSS Grid</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/all-about-floats/'>All about Floats</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/'>Positioning Types: How Do They Differ?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model'>The Box Model</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/'>The CSS Display Property</BadgeLink>

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

@@ -0,0 +1,9 @@
+# Responsive Web Design
+
+Responsive Web Designing is the technique to make your webpages look good on all screen sizes. There are certain techniques used to achieve that e.g. CSS media queries, percentage widths, min or max widths heights etc.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/css_rwd_intro.asp'>Responsive Web Design</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/learn/design/'>Learn Responsive Design</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=srvUrASNj0s'>Introduction To Responsive Web Design</BadgeLink>

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

@@ -0,0 +1,15 @@
+# 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://web.dev/learn/css/'>Web.dev by Google — 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>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://flexbox.io/'>What The Flexbox!</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-css'>Learn CSS | Codecademy</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-intermediate-css'>Learn Intermediate CSS | Codecademy</BadgeLink>

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

@@ -0,0 +1,9 @@
+# JavaScript
+
+JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>

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

@@ -0,0 +1,11 @@
+# DOM Manipulation
+
+The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/'>What is the DOM?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/js_htmldom.asp'>JavaScript HTML DOM</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.javascripttutorial.net/javascript-dom/'>JavaScript DOM</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7Tok22qxPzQ'>What is DOM, Shadow DOM and Virtual DOM?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=0ik6X4DJKCc'>JavaScript DOM Crash Course</BadgeLink>
+

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

@@ -0,0 +1,7 @@
+# Fetch API
+
+Ajax is the technique that lets us send and receive the data asynchronously from the servers e.g. updaing the user profile or asynchronously fetch the list of searched products without reloading the page.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'>Fetch API MDN Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=-ZI0ea5O2oA'>JavaScript Fetch API</BadgeLink>

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

@@ -0,0 +1,9 @@
+# Modern JavaScript
+
+ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming language. It is the first major update to the language since ES5 which was standardized in 2009. You should look at the features introduced with ES6 and onwards.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.javascripttutorial.net/es6/'>ES6 Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=NCwa_xi0Uuc'>Learn Modern JavaScript in 1 Hour</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=nZ1DMMsyVyI'>JavaScript ES6, ES7, ES8</BadgeLink>
+

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

@@ -0,0 +1,13 @@
+# JavaScript Concepts
+
+Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM and strict.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Glossary/Hoisting'>JavaScript Hoisting</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/bubbling-and-capturing'>Event Bubbling and Capturing</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Glossary/Scope'>Scope in JavaScript</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/'>Var, Let and Const — What's the difference?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain'>Inheritance and Prototype Chain</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode'>JavaScript Strict Mode</BadgeLink>
+<BadgeLink badgeText='Read' href='https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif'>JavaScript Visualized (7 Part Series)</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7Tok22qxPzQ'>DOM vs Shadow DOM vs Virtual DOM</BadgeLink>

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

@@ -0,0 +1,10 @@
+# JavaScript
+
+JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/workshopper/javascripting'>Learn the basics of JavaScript</BadgeLink>

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

@@ -0,0 +1,8 @@
+# Git
+
+[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>

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

@@ -0,0 +1,8 @@
+# Version Control Systems
+
+Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>

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,8 @@
+# GitLab
+
+[GitLab](https://gitlab.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='Visit' colorScheme="green" href='https://gitlab.com/'>GitLab Website</BadgeLink>
+<BadgeLink badgeText='Read' href='https://docs.gitlab.com/'>GitLab Documentation</BadgeLink>

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

@@ -0,0 +1,8 @@
+# BitBucket
+
+[BitBucket](https://bitbucket.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='Visit' colorScheme="green" href='https://bitbucket.com/'>BitBucket Website</BadgeLink>
+<BadgeLink badgeText='Read' href='https://bitbucket.org/product/guides'>How to use BitBucket?</BadgeLink>

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

@@ -0,0 +1,8 @@
+# Repo Hosting Services
+
+There are different repository hosting services with the most famous one being GitHub, GitLab and BitBucket. I would recommend creating an account on GitHub because that is where most of the OpenSource work is done and most of the developers are.
+
+<ResourceGroupTitle>Services Links</ResourceGroupTitle>
+<BadgeLink badgeText='Visit' colorScheme="green" href='https://github.com'>GitHub: Where the world builds software</BadgeLink>
+<BadgeLink badgeText='Visit' href='https://gitlab.com'>GitLab: Iterate faster, innovate together</BadgeLink>
+<BadgeLink badgeText='Visit' href='https://bitbucket.com'>BitBucket: The Git solution for professional teams</BadgeLink>

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

@@ -0,0 +1,12 @@
+# HTTPS
+
+HTTPS is a secure way to send data between a web server and a browser.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/'>What is HTTPS?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https'>Why HTTPS Matters</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https'>Enabling HTTPS on Your Servers</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hExRDVZHhig'>SSL, TLS, HTTP, HTTPS Explained</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=GoXgl9r0Kjk'>HTTPS — Stories from the field</BadgeLink>
+
+

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

@@ -0,0 +1,8 @@
+# Content Security Policy
+
+Content Security Policy is a computer security standard introduced to prevent cross-site scripting, clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP'>MDN — Content Security Policy (CSP)</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/csp'>Google Devs — Content Security Policy (CSP)</BadgeLink>
+

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

@@ -0,0 +1,6 @@
+# CORS
+
+Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS'>CORS — Cross-Origin Resource Sharing</BadgeLink>

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

@@ -0,0 +1,9 @@
+# OWASP Security Risks
+
+OWASP or Open Web Application Security Project is an online community that produces freely-available articles, methodologies, documentation, tools, and technologies in the field of web application security.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://en.wikipedia.org/wiki/OWASP'>Wikipedia - OWASP</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://github.com/0xRadi/OWASP-Web-Checklist'>OWASP Web Application Security Testing Checklist</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/'>OWASP Top 10 Security Risks</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html'>OWASP Cheatsheets</BadgeLink>

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

@@ -0,0 +1,11 @@
+# Web Security Knowledge
+
+Web security refers to the protective measures taken by the developers to protect the web applications from threats that could affect the business.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https'>Why HTTPS Matters</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://en.wikipedia.org/wiki/OWASP'>Wikipedia - OWASP</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://github.com/0xRadi/OWASP-Web-Checklist'>OWASP Web Application Security Testing Checklist</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/'>OWASP Top 10 Security Risks</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html'>OWASP Cheatsheets</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP'>Content Security Policy (CSP)</BadgeLink>

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

@@ -0,0 +1,10 @@
+# npm
+
+npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html'>Modern JavaScript for Dinosaurs</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/'>An Absolute Beginner's Guide to Using npm</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2V1UUhBJ62Y'>NPM tutorial for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/workshopper/how-to-npm'>How to NPM</BadgeLink>

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

@@ -0,0 +1,8 @@
+# Yarn
+
+Yarn is a software packaging system developed in 2016 by Facebook for Node.js JavaScript runtime environment that provides speed, consistency, stability, and security as an alternative to npm (package manager).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html'>Modern JavaScript for Dinosaurs</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://yarnpkg.com/en/docs/getting-started'>Yarn - Getting Started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=g9_6KmiBISk'>Yarn Crash Course</BadgeLink>

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

@@ -0,0 +1,13 @@
+# Package Managers
+
+Package managers allow you to manage the dependencies (external code written by you or someone else) that your project needs to work correctly.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html'>Modern JavaScript for Dinosaurs</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/'>An Absolute Beginner's Guide to Using npm</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2V1UUhBJ62Y'>NPM tutorial for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://yarnpkg.com/en/docs/getting-started'>Yarn - Getting Started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=g9_6KmiBISk'>Yarn Crash Course</BadgeLink>
+
+

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

@@ -0,0 +1,9 @@
+# BEM
+
+The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://en.bem.info'>BEM Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://en.bem.info/methodology/quick-start'>BEM Documentation</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://css-tricks.com/bem-101'>BEM 101</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://en.bem.info/tutorials/'>BEM Tutorials</BadgeLink>

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

@@ -0,0 +1,7 @@
+# OOCSS
+
+As with any object-based coding method, the purpose of OOCSS or Object Oriented CSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='http://oocss.org/'>OOCSS Official Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/'>Introduction to Object Oriented CSS</BadgeLink>

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

@@ -0,0 +1,6 @@
+# SMACSS
+
+SMACSS (pronounced “smacks”) is more style guide than rigid framework. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='http://smacss.com/'>SMACSS Official Website</BadgeLink>

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

@@ -0,0 +1,10 @@
+# CSS Architecture
+
+CSS is notoriously difficult to manage in large, complex, rapidly-iterated systems. There are different ways of writing CSS that allows in writing more maintainable CSS.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.webfx.com/blog/web-design/css-methodologies/'>A Look at Some CSS Methodologies</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://en.bem.info'>BEM Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='http://oocss.org/'>OOCSS Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='http://smacss.com/'>SMACSS Official Website</BadgeLink>
+

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

@@ -0,0 +1,8 @@
+# Sass
+
+Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. It lets you write maintainable CSS and provides features like variable, nesting, mixins, extension, functions, loops, conditionals and so on.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://sass-lang.com/'>Sass Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://sass-lang.com/documentation'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=_a5j7KoflTs'> Sass Tutorial for Beginners</BadgeLink>

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

@@ -0,0 +1,6 @@
+# PostCSS
+
+PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://postcss.org/'>Official Website</BadgeLink>

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

@@ -0,0 +1,8 @@
+# Less
+
+Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://lesscss.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://lesscss.org/usage/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=YD91G8DdUsw'> Less CSS Pre-Processor Tutorial</BadgeLink>