<div class="header-Outro">
  <div class="row content single-Col">
  <h1>Learn How to Make Websites!</h1>
  </div>
</div>

<div class="content single-Col misc-page">
  <h2>Available now: <a href="/tutorial/html/">The Neocities HTML course</a>! <% if !signed_in? %><small style="display:inline">(requires login)</small><% end %></h2>
  <a href="/tutorial/html/"><img src="/img/welcomingcat.png" alt="The Neocities cat warmly opening her paws at you" class="welcoming-cat"></a>
  <p> Never coded before? Our fun interactive tutorial will show you the ropes! <a href="/tutorial/html/">Join Penelope the cat</a> in crafting your own personal spot on the web.</p>
  <p>Learning how to make websites allows you to create any content you want, arrange that content in any way you like, and share that content with the world. It could be an information portal for teaching people <a href="http://sheldonbrown.com" target="_blank">how to repair bikes</a>, a graphics project, or a collection of your poetry.</p>

  <h2>Other Resources</h2>
  <h3>HTML</h3>

  <p>HTML is short for "HyperText Markup Language", and is the basic building block used to build all websites.</p>

  <ul>
    <li>
      <a href="https://www.htmldog.com/guides/html/beginner" title="Learn beginner HTML">HTML Beginner Tutorial</a>
    </li>
    <li>
      <a href="https://developer.mozilla.org/en-US/learn/html" title="Learn beginner HTML from Mozilla">Mozilla Learn HTML Resources</a>
    </li>
    <li>
      <a href="https://teamtreehouse.com">Learn how to build websites with Treehouse</a>
    </li>
    <li>
      <a href="https://www.codecademy.com/tracks/web" title="online lessons">Online lessons at Codecademy</a>
    </li>
  </ul>

  <h3>CSS</h3>

  <p>CSS is short for "Cascading Style Sheets", which is the code used to set the style of your web pages. It is embedded in your HTML, and directs how your website should look. If HTML was your house, CSS would be what allows you to decorate the way it looks.</p>

  <ul>
    <li>
      <a href="https://developer.mozilla.org/en-US/learn/css" title="Learn beginner CSS from Mozilla">Mozilla Learn CSS Resources</a>
    </li>
  </ul>

  <h3>CSS Frameworks</h3>

  <p>CSS frameworks are pre-built CSS styles that make it easy to quickly build a nice looking web page without having to "roll your own" set of styles. Neocities itself uses one as the basis for our design. They are definitely worth checking out once you have an understanding of how CSS works.</p>

  <ul>
    <li>
      <a href="https://getbootstrap.com/" title="Bootstrap" target="_blank">Bootstrap</a>
    </li>
    <li>
      <a href="https://picturepan2.github.io/spectre" title="Spectre">Spectre</a>
    </li>
    <li>
      <a href="https://elementcss.neocities.org">Element CSS</a>
    </li>
    <li>
      <a href="https://purecss.io/" title="Yahoo!'s Pure CSS" target="_blank">Pure</a>
    </li>
    <li>
      <a href="https://github.com/scottaohara/Brass-Tacks" title="Brass Tacks Sass Framework" target="_blank">Brass Tacks</a>
    </li>
    <li>
      <a href="https://github.com/owenversteeg/min" title="Min: the world's smallest (995 bytes) CSS framework" target="_blank">Min</a>
    </li>
    <li>
      <a href="https://bulma.io/" title="Bulma: The Framework Built on Flexbox" target="_blank">Bulma</a>
    </li>
    <li>
      <a href="https://chrisnager.github.io/ungrid/" title="ungrid: the simplest responsive css grid">ungrid</a>
    </li>
  </ul>

  <h3>JavaScript</h3>
  <p>JavaScript is the programming language that comes standard with all web browsers. You can embed JavaScript code into your HTML to allow you to program your websites to do things. JavaScript was once a weak language with a lot of problems, but it is now a very fast and powerful language that is used for both web browsers and for complicated server backends (with Node.js). It is a great beginners language if you want to learn how to program, and can be used to perform almost any kind of program.</p>

  <ul>
    <li><a href="https://developer.mozilla.org/en-US/learn/javascript">Mozilla Learn JavaScript Resources</a></li>
  </ul>

  <h3>Static Site Generators</h3>
  <p>
    Static site generators allow developers to make a web site that has many properties of dynamic web sites, except it generates static HTML which can then be uploaded to Neocities.
  </p>

  <ul>
    <li>
      <a href="https://gohugo.io/">Hugo</a>
    </li>
    <li>
      <a href="https://jekyllrb.com/">Jekyll</a>
    </li>
    <li>
      <a href="https://nextjs.org/learn/">Next.js</a>
    </li>
    <li>
      <a href="https://www.gatsbyjs.org/">Gatsby</a>
    </li>
    <li>
      <a href="https://v2.vuepress.vuejs.org/">VuePress</a>
    </li>
    <li>
      <a href="https://astro.build/">Astro</a>
    </li>
  </ul>

  <h3>WebGL</h3>
  <p>WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas.</p>

  <p>You can use WebGL frameworks for making 3D models and worlds in your browser!</p>

  <ul>
    <li>
      <a href="https://aframe.io/">A-Frame</a> - A web framework for building virtual reality experiences.
    </li>
    <li>
      <a href="https://threejs.org/">Three.js</a> - An easy to use, lightweight, 3D library with a default WebGL renderer.</a>
    </li>
  </ul>

</div> <!-- end .content -->
