diff --git a/docs/beginner.html b/docs/beginner.html
index 01274c709..16c06e47d 100644
--- a/docs/beginner.html
+++ b/docs/beginner.html
@@ -12,6 +12,47 @@
     <meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
     <meta property="og:type" content="website" /><meta property="og:image" content="favicon.png">
     <link rel="icon" type="image/png" href="favicon.png">
+    <script>
+          function registerClickListener() {
+        document.addEventListener('click', function (event) {
+          if( document.getElementById('doc-drawer-checkbox').checked ) {
+            if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) {
+              document.getElementById('doc-drawer-checkbox').checked = false;
+            }
+          }
+          if ( event.target.classList.contains('collapse') ) {
+            event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
+          }
+          else if (event.target.classList.contains('clipboard-copy')) {
+            const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
+            const textArea = document.createElement("textarea");
+            textArea.value = text.trim();
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand("Copy");
+            document.body.removeChild(textArea);
+            let tst = document.createElement('div');
+            tst.classList = 'toast';
+            tst.innerHTML = 'Snippet copied to clipboard!';
+            document.body.appendChild(tst);
+            setTimeout(function() {
+              tst.style.opacity = 0;
+              setTimeout(function() {
+                document.body.removeChild(tst);
+              },300);
+            },1700);
+          }
+          else if (event.target.classList.contains('scroll-to-top')){
+            scrollToTop();
+          }
+          else if (event.target.classList.contains('sublink-1')){
+            if(event.target.getAttribute("href").includes('./')) return;
+            event.preventDefault();
+            scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
+            document.getElementById('doc-drawer-checkbox').checked = false;
+          }
+        }, false)};
+    </script>
   </head>
   <body>
     <div id="splash">
@@ -210,7 +251,7 @@ Return the string truncated to the desired length, with <code>'...'</code> appen
   str<span class="token punctuation">.</span>length <span class="token operator">></span> num <span class="token operator">?</span> str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> num <span class="token operator">></span> <span class="token number">3</span> <span class="token operator">?</span> num <span class="token operator">-</span> <span class="token number">3</span> <span class="token punctuation">:</span> num<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'...'</span> <span class="token punctuation">:</span> str<span class="token punctuation">;</span>
 </pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">truncateString</span><span class="token punctuation">(</span><span class="token string">'boomerang'</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'boom...'</span>
 </pre>
-<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="card fluid"><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div>    </div>
+<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div>    </div>
     </div>
     <footer class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer>
   </body>
diff --git a/scripts/web.js b/scripts/web.js
index 5822589a8..a2d654366 100644
--- a/scripts/web.js
+++ b/scripts/web.js
@@ -55,8 +55,8 @@ let snippets = {},
   startPart = '',
   endPart = '',
   output = '',
-  startBeginnerPart = '',
-  endBegginerPart = '',
+  beginnerStartPart = '',
+  beginnerEndPart = '',
   beginnerOutput = '',
   pagesOutput = [];
   tagDbData = {};
@@ -70,8 +70,8 @@ try {
   startPart = fs.readFileSync(path.join(staticPartsPath, 'page-start.html'), 'utf8');
   endPart = fs.readFileSync(path.join(staticPartsPath, 'page-end.html'), 'utf8');
 
-  startBeginnerPart = fs.readFileSync(path.join(staticPartsPath, 'beginner-page-start.html'), 'utf8');
-  endBeginnerPart = fs.readFileSync(path.join(staticPartsPath, 'beginner-page-end.html'), 'utf8');
+  beginnerStartPart = fs.readFileSync(path.join(staticPartsPath, 'beginner-page-start.html'), 'utf8');
+  beginnerEndPart = fs.readFileSync(path.join(staticPartsPath, 'beginner-page-end.html'), 'utf8');
 } catch (err) {
   // Handle errors (hopefully not!)
   console.log(`${chalk.red('ERROR!')} During static part loading: ${err}`);
@@ -170,7 +170,7 @@ try {
 
 try {
   // Add the static part
-  beginnerOutput += `${startBeginnerPart + '\n'}`;
+  beginnerOutput += `${beginnerStartPart + '\n'}`;
 
   // Filter begginer snippets
   const filteredBeginnerSnippets = Object.keys(snippets)
@@ -180,7 +180,6 @@ try {
     return obj;
   }, {});
 
-  console.log(filteredBeginnerSnippets);
   for (let snippet of Object.entries(filteredBeginnerSnippets))
         beginnerOutput +=
         '<div class="row">' +
@@ -197,13 +196,7 @@ try {
           '</div></div></div></div>';
 
 
-  beginnerOutput +=
-  '<div class="card fluid">' +
-  // begginer snippet goes here.
-  '<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button>' +
-  '</div></div>';
-
-  beginnerOutput += `${endBeginnerPart}`;
+  beginnerOutput += `${beginnerEndPart}`;
 
   // Generate 'beginner.html' file
   fs.writeFileSync(path.join(docsPath, 'beginner.html'), beginnerOutput);
diff --git a/static-parts/beginner-page-start.html b/static-parts/beginner-page-start.html
index 7a49e98e8..edd03d57e 100644
--- a/static-parts/beginner-page-start.html
+++ b/static-parts/beginner-page-start.html
@@ -12,6 +12,47 @@
     <meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
     <meta property="og:type" content="website" /><meta property="og:image" content="favicon.png">
     <link rel="icon" type="image/png" href="favicon.png">
+    <script>
+          function registerClickListener() {
+        document.addEventListener('click', function (event) {
+          if( document.getElementById('doc-drawer-checkbox').checked ) {
+            if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) {
+              document.getElementById('doc-drawer-checkbox').checked = false;
+            }
+          }
+          if ( event.target.classList.contains('collapse') ) {
+            event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
+          }
+          else if (event.target.classList.contains('clipboard-copy')) {
+            const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
+            const textArea = document.createElement("textarea");
+            textArea.value = text.trim();
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand("Copy");
+            document.body.removeChild(textArea);
+            let tst = document.createElement('div');
+            tst.classList = 'toast';
+            tst.innerHTML = 'Snippet copied to clipboard!';
+            document.body.appendChild(tst);
+            setTimeout(function() {
+              tst.style.opacity = 0;
+              setTimeout(function() {
+                document.body.removeChild(tst);
+              },300);
+            },1700);
+          }
+          else if (event.target.classList.contains('scroll-to-top')){
+            scrollToTop();
+          }
+          else if (event.target.classList.contains('sublink-1')){
+            if(event.target.getAttribute("href").includes('./')) return;
+            event.preventDefault();
+            scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
+            document.getElementById('doc-drawer-checkbox').checked = false;
+          }
+        }, false)};
+    </script>
   </head>
   <body>
     <div id="splash">
