From f7dadb9117986258a25d685e1f7e6299c3e5971a Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Tue, 8 Aug 2023 17:44:22 +0800
Subject: [PATCH] Added web building resource masterlist

---
 changelog/index.html                  |   1 +
 home.html                             |   3 +-
 resources/index.html                  |   1 +
 resources/web-building-resources.html | 110 ++++++++++++++++++++++++++
 sitemap.html                          |   1 +
 5 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 resources/web-building-resources.html
diff --git a/changelog/index.html b/changelog/index.html
index b8b8caad..58e3eedd 100644
--- a/changelog/index.html
+++ b/changelog/index.html
@@ -42,6 +42,7 @@
                 <p class="date-style">August 8, 2023:</p>
                 <ul>
                     <li>Added <a href="/shrines/cassettebeasts/featured.html">Featured</a> page to the <a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite> shrine</a>.</li>
+                    <li>Added new resource: <a href="/resources/web-building-resources.html">Web Building Resources</a>.</li>
                 </ul>
 
                 <p class="date-style">August 3, 2023:</p>
diff --git a/home.html b/home.html
index 1d4f4653..23d5b18a 100644
--- a/home.html
+++ b/home.html
@@ -36,7 +36,7 @@
                 <section class="content-section">
                     <h1>Welcome!</h1>
                     <p>Hello! You can call me Leilukin. Welcome to my website! This site is my own personal hub and corner on the internet.</p>
-                    <Enjoy>Feel free to drop a message and say hi on <a href="https://leilukin.123guestbook.com/" target="_blank">my guestbook</a>. Enjoy your stay!</p>
+                    <p>Feel free to drop a message and say hi on <a href="https://leilukin.123guestbook.com/" target="_blank">my guestbook</a>. Enjoy your stay!</p>
                 </section>
 
                 <section class="content-section">
@@ -67,6 +67,7 @@
                         <p class="date-style">August 8, 2023:</p>
                         <ul>
                             <li>Added <a href="/shrines/cassettebeasts/featured.html">Featured</a> page to the <a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite> shrine</a>.</li>
+                            <li>Added new resource: <a href="/resources/web-building-resources.html">Web Building Resources</a>.</li>
                         </ul>
                     </div>
                     <a href="/changelog">View all site changelog</a>
diff --git a/resources/index.html b/resources/index.html
index 95cb8ab9..3be45a13 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -41,6 +41,7 @@
                 <section class="content-section">
                     <h2>Leilukin's Masterlists</h2>
                     <ul>
+                        <li><a href="./web-building-resources.html">Web Building Resources</a></li>
                         <li><a href="./anti-harry-potter-jk-rowling-masterlist.html">Anti-Harry Potter and Anti-J.K. Rowling Masterlist</a></li>
                     </ul>
                 </section>
diff --git a/resources/web-building-resources.html b/resources/web-building-resources.html
new file mode 100644
index 00000000..05993824
--- /dev/null
+++ b/resources/web-building-resources.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" id="page-top">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <meta property="og:url" content="https://leilukin.neocities.org/resources/anti-harry-potter-jk-rowling-masterlist">
+        <meta property="og:type" content="website">
+        <meta property="og:site_name" content="Leilukin's Hub">
+        <meta property="og:title" content="Web Building Resources | Resources">
+        <meta property="og:description" content="A list of resources for learning or helping you to build your own website, including HTML, CSS, JavaScript, as well as responsive and accessible web design.">
+
+        <link rel="stylesheet" href="/css/style-main.css" type="text/css" media="all">
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
+
+        <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
+        <link rel="manifest" href="/assets/favicon/site.webmanifest">
+
+        <script src="/js/header.js" defer></script>
+        <script src="/js/footer.js" defer></script>
+
+        <title>Web Building Resources | Resources | Leilukin's Hub</title>
+    </head>
+    <body>
+        <header></header>
+        <nav></nav>
+        <main>
+            <!-- <aside class="left-sidebar">
+                Left sidebar content here
+            </aside> -->
+
+            <div class="content-container">
+                <section class="content-section">
+                    <h1>Web Building Resources</h1>
+
+                    <p class="center-text">
+                        First published on August 8, 2023
+                    </p>
+
+                    <p>Here is a list of resources for learning or helping you to build your own website, including HTML, CSS, JavaScript, as well as responsive and accessible web design.</p>
+                </section>
+
+                <section class="content-section">
+                    <h2>Learn HTML & CSS</h2>
+                    <ul>
+                        <li><a href="https://web.dev/learn/html/" target="_blank">web.dev: Learn HTML!</a></li>
+                        <li><a href="https://web.dev/learn/css/" target="_blank">web.dev: Learn CSS!</a></li>
+                        <li><a href="https://internetingishard.netlify.app/html-and-css/index.html" target="_blank">Interneting Is Hard: HTML & CSS is hard</a></li>
+                    </ul>
+                </section>
+
+                <section class="content-section">
+                    <h2>Learn Responsive Web Design</h2>
+                    <ul>
+                        <li><a href="https://courses.kevinpowell.co/conquering-responsive-layouts" target="_blank">Kevin Powell: Conquering Responsive Layouts</a></li>
+                        <li><a href="https://web.dev/learn/design/" target="_blank">web.dev: Learn Responsive Design!</a></li>
+                        <li><a href="https://internetingishard.netlify.app/html-and-css/responsive-design/index.html" target="_blank">Interneting Is Hard: Responsive Design</a></li>
+                        <li><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/" target="_blank">freeCodeCamp: Responsive Web Design</a></li>
+                        <li><a href="https://flexbox.io/" target="_blank">Wes Bos: What the Flexbox?!</a></li>
+                        <li><a href="https://cssgrid.io/" target="_blank">Wes Bos: CSS Grid</a></li>
+                        <li><a href="https://web.dev/learn/css/flexbox/" target="_blank">web.dev: Learn CSS! - Flexbox module</a></li>
+                        <li><a href="https://web.dev/learn/css/grid/" target="_blank">web.dev: Learn CSS! - Grid module</a></li>
+                        <li><a href="https://web.dev/learn/images/" target="_blank">web.dev: Learn Images!</a></li>
+                        <li><a href="https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/" target="_blank">Josh Comeau: An Interactive Guide to Flexbox</a></li>
+                        <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">CSS-Tricks: A Complete Guide to Flexbox</a></li>
+                        <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank">CSS-Tricks: A Complete Guide to CSS Grid</a></li>
+                        <li><a href="https://flexboxfroggy.com/" target="_blank">Flexbox Froggy - A game for learning CSS flexbox</a></li>
+                        <li><a href="https://cssgridgarden.com/" target="_blank">Grid Garden - A game for learning CSS grid</a></li>
+                    </ul>
+                </section>
+
+                <section class="content-section">
+                    <h2>Learn JavaScript</h2>
+                    <ul>
+                        <li><a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures" target="_blank">freeCodeCamp: JavaScript Algorithms and Data Structures</a></li>
+                        <li><a href="https://www.youtube.com/watch?v=BI1o2H9z9fo" target="_blank">Traversy Media YouTube: Modern JavaScript From The Beginning</a></li>
+                        <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript" target="_blank">MDN: JavaScript - Dynamic client-side scripting</a></li>
+                        <li><a href="https://javascript.info/" target="_blank">JavaScript.info: The Modern JavaScript Tutorial</a></li>
+                        <li><a href="https://wesbos.com/javascript" target="_blank">Wes Bos: JavaScript Notes & Reference</a></li>
+                        <li><a href="https://www.youtube.com/watch?v=PkZNo7MFNFg" target="_blank">freeCodeCamp YouTube: Learn JavaScript - Full Course for Beginners</a></li>
+                    </ul>
+                </section>
+
+                <section class="content-section">
+                    <h2>Neocities Resources</h2>
+                    <ul>
+                        <li><a href="https://sadgrl.online/projects/layout-builder/" target="_blank">Sadgrl's Layout Builder</a></li>
+                        <li><a href="https://hekate2.github.io/buttonmaker/" target="_blank">hekate2's 88x31 Web Button Maker</a></li>
+                        <li><a href="https://virtualobserver.moe/ayano/comment-widget" target="_blank">Ayano's Neocities comment widget</a></li>
+                    </ul>
+                </section>
+
+                <section class="content-section">
+                    <h2>Code Snippets</h2>
+                    <ul>
+                        <li><a href="https://sadgrl.online/learn/sections/snippets" target="_blank">Sadgrl's HTML and CSS snippets</a></li>
+                    </ul>
+                </section>
+            </div>
+
+            <!-- <aside class="right-sidebar">
+                Right sidebar content here
+            </aside> -->
+        </main>
+        <footer></footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/sitemap.html b/sitemap.html
index 98e3b895..42bb87c7 100644
--- a/sitemap.html
+++ b/sitemap.html
@@ -59,6 +59,7 @@
                     </ul>
                     <li><a href="/resources/">Resources</a></li>
                     <ul>
+                        <li><a href="/resources/web-building-resources.html">Web Building Resources</a></li>
                         <li><a href="/resources/anti-harry-potter-jk-rowling-masterlist.html">Anti-Harry Potter and Anti-J.K. Rowling Masterlist</a></li>
                     </ul>
                     <li><a href="/shrines/">Shrines</a></li>
