index.php

<html lang="en" prefix="og: http://ogp.me/ns#">
 <head>
  <title>Study Game Development</title>
  <link href="https://www.studygamedev.com/" rel="canonical"/>
  <link href="https://www.studygamedev.com/" rel="shortlink"/>
  <meta charset="UTF-8"/>
  <link href="./style.css" media="screen, speech" rel="stylesheet"/>
  <meta name="description" content="Study game development online in fields such as programming, writing, sound effects, music, art, 3D models, design, user experience, quality assurance, production, marketing, finances, and management."/>
  <meta property="og:type" content="website"/>
  <meta property="og:locale" content="en_US"/>
  <meta property="og:title" content="Study Game Development - Learn Online"/>
  <meta property="og:description" content="Study game development online in fields such as programming, writing, sound effects, music, art, 3D models, design, user experience, quality assurance, production, marketing, finances, and management."/>
  <meta property="og:url" content="https://www.studygamedev.com/"/>
  <meta property="og:image" content="https://www.studygamedev.com/i/meta.png">
  <meta property="og:site_name" content="Study Game Dev"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <link href="" rel="shortcut icon"/>
 </head>
 <body class="setting-theme-dark">
  <div id="setting-unfolding-marker"></div>
  <nav id="wrapper-button-menu-closed" role="navigation">
   <button id="button-main-menu" aria-controls="wrapper-main-menu" aria-haspopup="menu" type="button">
    <span class="icon-main-menu" aria-hidden="true">
     <svg version="1.1" viewBox="0 0 50 37" height="37px" width="50px" x="0px" y="0px">
      <rect height="5" width="20" x="5" y="10"/>
      <rect height="5" width="20" x="25" y="10"/>
      <rect height="5" width="20" x="5" y="22"/>
      <rect height="5" width="20" x="25" y="22"/>
     </svg>
    </span>
    Menu
   </button>
  </nav>
  <input id="line-input-search" placeholder="🔎 Search..." type="text">
  <header role="banner">
   <h1 id="text-site-title"><a aria-label="Header Title" data-char="StudyGameDev" href="#" tabindex="1">StudyGameDev</a></h1>
  </header>

  <div id="background-black-alpha"></div>

  <nav id="wrapper-main-menu" aria-label="Main" role="dialog">
   <nav id="wrapper-button-menu-open"></nav>
   <ul role="menu">
    <li role="menuitem" tabindex="-1">
     <button id="button-settings-accessibility" aria-controls="wrapper-settings-accessibility" aria-haspopup="menu" aria-label="Open the accessibilities settings" type="button">Accessibility</button>
    </li>
    <li role="menuitem" tabindex="-1">
     <a class="icon-external-link" href="https://github.com/nitronova/StudyGameDev.com/">Github Page</a>
    </li>
    <li role="menuitem" tabindex="-1">
     <a class="icon-external-link" href="https://twitter.com/nitro_nova">My Twitter</a>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-programming" class="button-toggle-submenu red" aria-controls="submenu-programming" aria-haspopup="menu" type="button">Programming</button>
     <ul id="submenu-programming" tabindex="-1">
      <li><a href="#" to="prog-intro">Intro to Programming</a></li>
      <li><a href="#" to="prog-c">Learn C</a></li>
      <li><a href="#" to="prog-c-sharp">Learn C#</a></li>
      <li><a href="#" to="prog-lua">Learn Lua</a></li>
      <li><a href="#" to="prog-eng-love2d">Love2D (Lua)</a></li>
      <li><a href="#" to="prog-eng-godot">Godot (GDScript)</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-writing" class="button-toggle-submenu scarlet" aria-controls="submenu-writing" aria-haspopup="menu" type="button">Writing</button>
     <ul id="submenu-writing" tabindex="-1">
      <li><a href="#" to="writ-intro">Intro to Writing</a></li>
      <li><a href="#" to="writ-worldbuilding">Worldbuilding</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-sound-design" class="button-toggle-submenu orange" aria-controls="submenu-sound-design" aria-haspopup="menu" type="button">Sound Design</button>
     <ul id="submenu-sound-design" tabindex="-1">
      <li><a href="#" to="sd-intro">Intro to Sound Design</a></li>
      <li><a href="#" to="sd-fundamentals">Fundamentals of Audio</a></li>
      <li><a href="#" to="sd-recording">Recording Techniques</a></li>
      <li><a href="#" to="sd-processing">Processing Techniques</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-music-production" class="button-toggle-submenu yellow" aria-controls="submenu-music-production" aria-haspopup="menu" type="button">Music Production</button>
     <ul id="submenu-music-production" tabindex="-1">
      <li><a href="#" to="mp-intro">Intro to Music Production</a></li>
      <li><a href="#" to="mp-music-theory">Music Theory</a></li>
      <li><a href="#" to="mp-tracking-stage">Tracking Stage</a></li>
      <li><a href="#" to="mp-mixing-stage">Mixing and Mastering</a></li>
      <li><a href="#" to="mp-applications">Applications of Video Game Music</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-art" class="button-toggle-submenu lime" aria-controls="submenu-art" aria-haspopup="menu" type="button">Art</button>
     <ul id="submenu-art" tabindex="-1">
      <li><a href="#" to="art-intro">Intro to Art</a></li>
      <li><a href="#" to="art-fundamentals-topic">Art Fundamentals</a></li>
      <li><a href="#" to="art-human-anatomy-topic">Human Anatomy</a></li>
      <li><a href="#" to="art-drawing">Drawing Other Things</a></li>
      <li><a href="#" to="art-specializations">Types of Artists</a></li>
      <li><a href="#" to="art-animation">2D Animation</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button type="button" id="button-submenu-3d-modelling" aria-controls="submenu-3d-modelling" aria-haspopup="menu" class="button-toggle-submenu green">3D Modelling</button>
     <ul id="submenu-3d-modelling" tabindex="-1">
      <li><a href="#" to="3d-intro">Intro to 3D</a></li>
      <li><a href="#" to="3d-softwares">3D Software</a></li>
      <li><a href="#" to="3d-blender">Blender</a></li>
      <li><a href="#" to="3d-animation-topic">3D Animation</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-design" class="button-toggle-submenu turquoise" aria-controls="submenu-design" aria-haspopup="menu" type="button">Design</button>
     <ul id="submenu-design" tabindex="-1">
      <li><a href="#" to="gd-intro">Intro to Design</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-user-experience" class="button-toggle-submenu skyblue" aria-controls="submenu-user-experience" aria-haspopup="menu" type="button">User Experience</button>
     <ul id="submenu-user-experience" tabindex="-1">
      <li><a href="#" to="ux-intro">Intro to UX</a></li>
      <li><a href="#" to="ux-menus">User-Friendly Menus</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-quality-assurance" class="button-toggle-submenu cobalt" aria-controls="submenu-quality-assurance" aria-haspopup="menu" type="button">Quality Assurance</button>
     <ul id="submenu-quality-assurance" tabindex="-1">
      <li><a href="#" to="qa-intro">Intro to QA</a></li>
      <li><a href="#" to="qa-techniques">Testing Techniques</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-production-management" class="button-toggle-submenu blue" aria-controls="submenu-production-management" aria-haspopup="menu" type="button">Production & Management</button>
     <ul id="submenu-production-management" tabindex="-1">
      <li><a href="#" to="ppm-intro">Intro to Production & Management</a></li>
      <li><a href="#" to="ppm-documentation">Documentation</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-marketing" class="button-toggle-submenu purple" aria-controls="submenu-marketing" aria-haspopup="menu" type="button">Marketing</button>
     <ul id="submenu-marketing" tabindex="-1">
      <li><a href="#" to="mkt-intro">Intro to Marketing</a></li>
      <li><a href="#" to="mkt-inbound">Inbound Marketing</a></li>
      <li><a href="#" to="mkt-outbound">Outbound Marketing</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-finance" class="button-toggle-submenu violet" aria-controls="submenu-finance" aria-haspopup="menu" type="button">Finance</button>
     <ul id="submenu-finance" tabindex="-1">
      <li><a href="#" to="fm-intro">Intro to Finance</a></li>
      <li><a href="#" to="fm-logistics-projections">Logistics & Projections</a></li>
      <li><a href="#" to="fm-taxes">Business Taxes</a></li>
     </ul>
    </li>
    <li class="wrapper-submenu-parent" role="menuitem" tabindex="-1">
     <button id="button-submenu-biz-legal" class="button-toggle-submenu rose" aria-controls="submenu-biz-legal" aria-haspopup="menu" type="button">Business & Legal</button>
     <ul id="submenu-biz-legal" tabindex="-1">
      <li><a href="#" to="bl-intro">Intro to Business & Law</a></li>
      <li><a href="#" to="bl-start">Starting a Business</a></li>
      <li><a href="#" to="bl-labor">Labor & Safety</a></li>
     </ul>
    </li>
   </ul>
  </nav>

  <form id="wrapper-settings-accessibility" aria-describedby="text-accessibility-settings-description" aria-labelledby="text-accessibility-settings-title" role="dialog" tabindex="-1">
   <h2 id="text-accessibility-settings-title">Accessibility Controls</h2>
   <p id="text-accessibility-settings-description">Enhance your experience on the site by operating the settings in the menu below.</p>
   <p>This site is keyboard-navigable. Combining the ctrl key with z or slash will bookmark your spot and jump to the navigation menu. Use tab, shift-tab, and space to navigate the menu (it is screen reader compatible).
       Once you hit Save, you will be opted in for a cookie file that saves your settings for next time you browse the website.</p>
   <ul role="menu" tabindex="-1">
    <li role="menuitem" tabindex="-1">
     <label for="setting-theme">Theme</label>
     <select id="setting-theme" name="setting-theme">
      <option value="setting-theme-dark">Dark theme</option>
      <option value="setting-theme-bright">Bright theme</option>
     </select>
    </li>
    <li role="menuitem" tabindex="-1">
     <label for="setting-font-size">Font Size</label>
     <select id="setting-font-size">
      <option value="setting-font-default">Default</option>
      <option value="setting-font-larger">Larger</option>
      <option value="setting-font-largest">Largest</option>
     </select>
    </li>
    <li role="menuitem" tabindex="-1">
     <input id="setting-content-unfold" name="setting-content-unfold" type="checkbox" value="setting-content-unfolded">
     <label for="setting-content-unfold">Display All Content Unfolded (note: this can make the site less accessible.)</label>
    </li>
    <li role="menuitem" id="wrapper-accessibility-save-exit" tabindex="-1">
     <button id="button-settings-accessibility-save" aria-label="Save your accessibilities settings." type="button">Save</button>
     <button id="button-settings-accessibility-close" aria-label="Close the accessibilities settings dialog and return to the navigation menu." type="button">Exit</button>
    </li>
   </ul>
  </form>
  <form id="wrapper-code-generator" aria-describedby="text-code-generator-description" aria-hidden="true" aria-labelledby="text-code-generator-title" role="dialog" tabindex="-1">
   <h3 id="text-code-generator-title" class="group-focusable-code-generator">Generate a Code that can be used in db.js</h3>
   <p id="text-code-generator-description">This is for developer use, but please do send codes to my Twitter!</p>
   <div class="wrapper-layout-half-left">
    <ul role="menu" tabindex="-1">
     <li role="menu-item" tabindex="-1">
      <label for="parameter-select-section">Information Category</label>
      <select id="parameter-select-section" class="form-select-code-generator group-focusable-code-generator"></select>
     </li>
     <li role="menu-item" tabindex="-1">
      <label for="parameter-select-tag">Content Type</label>
      <select id="parameter-select-tag" class="form-select-code-generator group-focusable-code-generator">
       <option value="orange,Article">Article</option>
       <option value="green,Book">Book</option>
       <option value="yellow,Channel">Channel</option>
       <option value="scarlet,Code">Code</option>
       <option value="blue,Course">Course</option>
       <option value="purple,Download">Download</option>
       <option value="red,Graphic">Graphic</option>
       <option value="orange,List">List</option>
       <option value="green,Online Manual">Online Manual</option>
       <option value="green,PDF">PDF</option>
       <option value="red,Playlist">Playlist</option>
       <option value="scarlet,Podcast">Podcast</option>
       <option value="purple,Software">Software</option>
       <option value="purple,Supplies">Supplies</option>
       <option value="red,Video">Video</option>
       <option value="yellow,Website">Website</option>
       <option value="yellow,Wiki">Wiki</option>
       <option value="blue,Udemy">Udemy</option>
      </select>
     </li>
     <li role="menu-item" tabindex="-1">
      <label for="parameter-resource-url">Content Source</label>
      <input id="parameter-resource-url" class="form-line-input-code-generator group-focusable-code-generator" placeholder="https://..." type="text">
     </li>
     <li role="menu-item" tabindex="-1">
      <label for="parameter-resource-summary">Content Summary</label>
      <input id="parameter-resource-summary" class="form-line-input-code-generator group-focusable-code-generator" placeholder="Short summary of item." type="text">
     </li>
     <li role="menu-item" tabindex="-1">
      <label for="parameter-resource-details">Content Details</label>
      <input id="parameter-resource-details" class="form-line-input-code-generator group-focusable-code-generator" placeholder="Longer explanation of the item." type="text">
     </li>
    </ul>
   </div>
   <ul role="menu" tabindex="-1">
    <li role="menu-item" tabindex="-1">
     <label for="text-output-code-generator">Generated code:</label>
     <textarea id="text-output-code-generator" class="group-focusable-code-generator"></textarea>
    </li>
    <li role="menu-item" tabindex="-1">
     <button id="button-code-generator-copy-output" class="group-focusable-code-generator" type="button">Copy code</button>
     <button id="button-code-generator-close" class="group-focusable-code-generator" type="button">Exit code generator</button>
    </li>
   </ul>
  </form>

  <main id="wrapper-main-site-content" role="main">
   <div id="wrapper-resource-content"></div>
   <div id="wrapper-home-page-content">
    <h2>Study one of many fields of game development.</h2>
    <p>We list resources that explain topics of game development. Under each category, we try to arrange information in an academic order. There are a lot of resources to dive into, here, so let's get you started with a few recommended subjects.</p>
    <p>These resources are coming soon, stay tuned while we continue to populate the site.</p>
    <p id="text-recommended-topics">
     <a class="red" href="#" to="prog-eng-godot">Learn GDScript</a>
     <a class="scarlet" href="#" to="writ-worldbuilding">Worldbuilding</a>
     <a class="orange" href="#" to="sd-recording">Recording Techniques</a>
     <a class="yellow" href="#" to="mp-music-theory">Music Theory</a>
     <a class="lime" href="#" to="art-intro">How to Draw</a>
     <a class="green" href="#" to="3d-blender">Learn Blender 3D</a>
     <a class="turquoise" href="#" to="gd-intro">Game Design</a>
     <a class="skyblue" href="#" to="ux-menus">User-Friendliness</a>
     <a class="cobalt" href="#" to="qa-intro">Game Testing</a>
     <a class="blue" href="#" to="ppm-documentation">Design Documents</a>
     <a class="purple" href="#" to="mkt-inbound">Market Research</a>
     <a class="violet" href="#" to="fm-taxes">Business Taxes</a>
     <a class="rose" href="#" to="bl-start">Starting a Business</a>
    </p>
   </div>
  </main>
  <div id="dynamic-loading-bar" class="loading-complete" loading="0"></div>
  <button id="button-code-generator" aria-controls="wrapper-code-generator" aria-haspopup="menu" aria-label="Open the dialog for generating content codes" type="button">Make<br/>Code</button>
  <script defer src="./section-toggle.js" type="text/javascript"></script>
  <script defer src="./taffy-min.js" type="text/javascript"></script>
  <script defer src="./db-init.js" type="text/javascript"></script>
  <script defer src="./db-populate.js" type="text/javascript"></script>
  <script defer src="./awesome-menu.js" type="text/javascript"></script>
  <script defer src="./gencode.js" type="text/javascript"></script>
  <script defer src="./search.js" type="text/javascript"></script>
 </body>
</html>