<!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/main-components.js" defer></script>
<title>Web Building Resources | Resources | Leilukin's Hub</title>
</head>
<body>
<script src="/js/main-components.js" defer></script>
<header class="main-header">
<noscript>
JavaScript is disabled in your browser. To get the best user experience on
this website, it is recommended that you enable it.
</noscript>
</header>
<nav class="navbar"></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 8 August 2023<br>
Last updated on 8 September 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>General</h2>
<ul class="article-list">
<li><a href="https://neocities.org/tutorials" target="blank">Neocities - Tutorials</a></li>
<li><a href="https://www.w3schools.com/" target="blank">W3Schools Online Web Tutorials</a></li>
<li><a href="https://developer.mozilla.org/" target="blank">MDN Web Docs</a></li>
</ul>
</section>
<section class="content-section">
<h2>Learn HTML & CSS</h2>
<ul class="article-list">
<li><a href="https://neocities.org/tutorial/html/" target="blank">The Neocities HTML Course</a></li>
<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 class="article-list">
<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 class="article-list">
<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>Web Accessibility</h2>
<ul class="article-list">
<li><a href="https://web.dev/learn/accessibility/" target="_blank">web.dev: Learn Accessibility!</a></li>
<li><a href="https://www.udacity.com/course/web-accessibility--ud891" target="_blank">Udacity: Web Accessibility</a></li>
<li><a href="https://www.edx.org/learn/computer-programming/the-world-wide-web-consortium-w3c-web-accessibility-introduction" target="_blank">edX: The World Wide Web Consortium (W3C) - Introduction to Web Accessibility</a></li>
<li><a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/" target="_blank">Web Accessibility Initiative (WAI): Introduction to Web Accessibility</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank">MDN: Accessibility</a></li>
<li><a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">Web Accessibility Initiative (WAI): WCAG Overview</a></li>
<li><a href="https://web.dev/learn/forms/" target="_blank">web.dev: Learn Forms!</a></li>
<li><a href="https://inclusive-components.design/" target="_blank">Inclusive Components</a></li>
<li><a href="https://www.a11yproject.com/" target="_blank">The A11y Project</a></li>
<li><a href="https://www.smashingmagazine.com/category/accessibility" target="_blank">Smashing Magazine: Accessibility</a></li>
</ul>
</section>
<section class="content-section">
<h2>Code Snippets</h2>
<ul class="article-list">
<li><a href="https://codepen.io/" target="_blank">CodePen</a></li>
<li><a href="https://sadgrl.online/learn/sections/snippets" target="_blank">Sadgrl's HTML and CSS snippets</a></li>
</ul>
</section>
<section class="content-section">
<h2>Neocities Resources</h2>
<ul class="article-list">
<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>
</div>
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->
</main>
<footer class="main-footer"></footer>
</body>
</html>