index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>EDT Workshop by youngrewired</title>

    <link rel="stylesheet" href="stylesheets/styles.css">
    <link rel="stylesheet" href="stylesheets/github-light.css">
    <script src="javascripts/scale.fix.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1 class="header">EDT Workshop</h1>
        <p class="header"></p>

        <ul>
          <li class="download"><a class="buttons" href="https://github.com/youngrewired/edt/zipball/master">Download ZIP</a></li>
          <li class="download"><a class="buttons" href="https://github.com/youngrewired/edt/tarball/master">Download TAR</a></li>
          <li><a class="buttons github" href="https://github.com/youngrewired/edt">View On GitHub</a></li>
        </ul>

        <p class="header">This project is maintained by <a class="header name" href="https://github.com/youngrewired">youngrewired</a></p>


      </header>
      <section>
        <h1>
<a id="background" class="anchor" href="#background" aria-hidden="true"><span class="octicon octicon-link"></span></a>Background</h1>

<p>The aim of YRS x EDT Workshops is to introduce young people to the foundations of digital making and technology in an enjoyable and immersive way. Our workshops are inspirational, fun and hands-on, with a focus on peer-to-peer learning and teamwork. Each workshop follows a simple, three module process that introduces the basics before quickly allowing participants to explore the practical application of their new skills. </p>

<p>The YRS x EDT Introduction to Web Development Workshop provides the fundamental development and design skills required to build for the web. During this workshop, participants will be introduced to HTML, CSS and Javascript, implementing these skills to customise their own webpage. </p>

<h1>
<a id="section-1---anatomy-of-a-webpage" class="anchor" href="#section-1---anatomy-of-a-webpage" aria-hidden="true"><span class="octicon octicon-link"></span></a>Section 1 - Anatomy of a Webpage</h1>

<p><a href="http://codepen.io">Codepen</a></p>

<ul>
<li><a href="http://codepen.io/youngrewired/pen/pjodMm">Codepen - Lists</a></li>
<li><a href="http://codepen.io/youngrewired/pen/dYyJbW">Codepen - Links</a></li>
<li><a href="http://codepen.io/youngrewired/pen/epYyzN">Codepen - Images</a></li>
</ul>

<p>Test your skills</p>

<ul>
<li><a href="https://codepen.io/youngrewired/pen/XmXZxK">Tony's Code Pen-Challenge</a></li>
<li><a href="https://codepen.io/youngrewired/pen/pjgaOo">Tony's Code Pen-Answers</a></li>
</ul>

<h1>
<a id="section-2---making-our-page-pretty" class="anchor" href="#section-2---making-our-page-pretty" aria-hidden="true"><span class="octicon octicon-link"></span></a>Section 2 - Making our Page Pretty!</h1>

<h2>
<a id="codepens" class="anchor" href="#codepens" aria-hidden="true"><span class="octicon octicon-link"></span></a>Codepens</h2>

<ul>
<li><a href="http://codepen.io/youngrewired/pen/epYyzN">Codepen - Colours &amp; Images</a></li>
</ul>

<h2>
<a id="colours" class="anchor" href="#colours" aria-hidden="true"><span class="octicon octicon-link"></span></a>Colours</h2>

<p><a href="http://www.crockford.com/wrrrld/color.html">Full list of CSS colours</a></p>

<p><a href="http://chir.ag/projects/name-that-color">Hex code generator</a></p>

<h2>
<a id="fonts" class="anchor" href="#fonts" aria-hidden="true"><span class="octicon octicon-link"></span></a>Fonts</h2>

<p>Make the <code>&lt;h2&gt;</code> not bold</p>

<pre><code>h2 {
    font-weight: normal;
}
</code></pre>

<p>Make the <code>&lt;p&gt;</code> italic</p>

<pre><code>p {
    font-style: italic;
}
</code></pre>

<p>Remove the underline on the <code>&lt;a&gt;</code></p>

<pre><code>a {
    text-decoration: none;
}
</code></pre>

<h2>
<a id="size" class="anchor" href="#size" aria-hidden="true"><span class="octicon octicon-link"></span></a>Size</h2>

<p>Link to an image: <a href="http://a.yrs.io/a.jpg">http://a.yrs.io/a.jpg</a></p>

<h1>
<a id="next-steps" class="anchor" href="#next-steps" aria-hidden="true"><span class="octicon octicon-link"></span></a>Next Steps</h1>

<p>HTML</p>

<ul>
<li><a href="http://www.htmldog.com/">HTML Dog</a></li>
<li><a href="http://www.htmldog.com/reference/htmltags/">List of HTML Tags</a></li>
<li><a href="http://www.html5rocks.com/en/resources">Advanced - HTML Rocks</a></li>
</ul>

<p>CSS</p>

<ul>
<li><a href="http://tympanus.net/codrops/css_reference/">All CSS Rules</a></li>
<li><a href="https://css-tricks.com/">CSS Tricks Blog</a></li>
<li><a href="http://webdesign.tutsplus.com/courses/30-days-to-learn-html-css">30 Days to Learn HTML &amp; CSS Video Course</a></li>
<li><a href="http://sass-lang.com/guide">Advanced - Sass Basics</a></li>
</ul>

<p>Javascript</p>

<ul>
<li><a href="https://www.codecademy.com/en/tracks/javascript">Codecademy - JavaScript</a></li>
</ul>
      </section>
      <footer>
        <p><small>Hosted on <a href="https://pages.github.com">GitHub Pages</a> using the Dinky theme</small></p>
      </footer>
    </div>
    <!--[if !IE]><script>fixScale(document);</script><![endif]-->
		
  </body>
</html>