2023-08-08 09:44:22 +00:00
<!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" >
2023-08-13 11:57:38 +00:00
< script src = "/js/main-components.js" defer > < / script >
2023-08-08 09:44:22 +00:00
< title > Web Building Resources | Resources | Leilukin's Hub< / title >
< / head >
< body >
2023-08-13 11:57:38 +00:00
< 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 >
2023-08-08 09:44:22 +00:00
< 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" >
2023-08-30 09:59:58 +00:00
First published on 8 August 2023< br >
2023-09-07 16:38:36 +00:00
Last updated on 8 September 2023
2023-08-08 09:44:22 +00:00
< / 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 >
2023-09-07 16:38:36 +00:00
< 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 >
2023-08-08 09:44:22 +00:00
< section class = "content-section" >
< h2 > Learn HTML & CSS< / h2 >
2023-09-07 16:38:36 +00:00
< ul class = "article-list" >
< li > < a href = "https://neocities.org/tutorial/html/1" target = "blank" > The Neocities HTML Course< / a > < / li >
2023-08-08 09:44:22 +00:00
< 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 >
2023-09-07 16:38:36 +00:00
< ul class = "article-list" >
2023-08-08 09:44:22 +00:00
< 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 >
2023-09-07 16:38:36 +00:00
< ul class = "article-list" >
2023-08-08 09:44:22 +00:00
< 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 >
2023-08-10 15:45:13 +00:00
< section class = "content-section" >
< h2 > Web Accessibility< / h2 >
2023-09-07 16:38:36 +00:00
< ul class = "article-list" >
2023-08-10 15:45:13 +00:00
< 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 >
2023-08-08 09:44:22 +00:00
< section class = "content-section" >
2023-08-11 03:25:24 +00:00
< h2 > Code Snippets< / h2 >
2023-09-07 16:38:36 +00:00
< ul class = "article-list" >
2023-08-11 03:25:24 +00:00
< 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 >
2023-08-08 09:44:22 +00:00
< / ul >
< / section >
< section class = "content-section" >
2023-08-11 03:25:24 +00:00
< h2 > Neocities Resources< / h2 >
2023-09-07 16:38:36 +00:00
< ul class = "article-list" >
2023-08-11 03:25:24 +00:00
< 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 >
2023-08-08 09:44:22 +00:00
< / ul >
< / section >
< / div >
<!-- <aside class="right - sidebar">
Right sidebar content here
< / aside > -->
< / main >
2023-08-13 11:57:38 +00:00
< footer class = "main-footer" > < / footer >
2023-08-08 09:44:22 +00:00
< / body >
< / html >
