~tieong/mdn-playground

1fbf11ec46ca77fc95f88607c9a56a08f9ffb429 — Thomas Ieong 1 year, 4 days ago
Init
A  => accessibility-playground/html-accessibility/images/football.jpg +0 -0
A  => accessibility-playground/html-accessibility/images/star.png +0 -0
A  => accessibility-playground/html-accessibility/images/teapot.jpg +0 -0
A  => accessibility-playground/html-accessibility/index1.html +66 -0
@@ 1,66 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HTML accessibility: Task 1</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }

      .button {
        color: white;
        background-color: blue;
        border-radius: 10px;
        width: 170px;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>Need help?</h1>
    <p>
      If you have any problems with our products, our support center can offer
      you all the help you need, whether you want:
    </p>
    <ol>
      <li>Advice choosing a new product</li>
      <li>Tech support on an existing product</li>
      <li>Refund and cancellation assistance</li>
    </ol>
    <h2>Contact us now</h2>
    <p>
      Our help center contains live chat, e-mail addresses, and phone numbers.
    </p>
    <button
      class="button"
      data-message="You clicked on the contact button!"
      role="link"
    >
      Find Contact Details
    </button>
    <h2>Find out answers</h2>
    <p>
      Our Forums section contains a large knowledge base of searchable
      previously asked questions, and you can always ask a new question if you
      can't find the answer you're looking for.
    </p>
    <button
      class="button"
      data-message="You clickedon the access forums"
      role="link"
    >
      Access Forums
    </button>
  </body>
</html>

A  => accessibility-playground/html-accessibility/index2.html +53 -0
@@ 1,53 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HTML accessibility: Task 2</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }

      form {
        width: 400px;
      }

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
    </style>
  </head>

  <body>
    <form>
      <fieldset>
	<legend>Personal data</legend>
        <ul>
          <li>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" />
          </li>
          <li>
            <label for="age">Age</label>
            <input type="number" id="age" name="age" />
          </li>
          <li>
            <label for="email">Email address</label>
            <input type="email" id="email" name="email" />
          </li>
        </ul>
      </fieldset>
    </form>
  </body>
</html>

A  => accessibility-playground/html-accessibility/index3.html +33 -0
@@ 1,33 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HTML accessibility: Task 3</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <p>
      For more information about our activities, check out our
      <a href="/fundraising">Fundraising</a>, <a
        href="/education"
        >Education</a
      >, sponsorship pack (<a href="/resources/sponsorship.pdf">Sponsorship (PDF)</a
      >), and assessment sheets (<a href="/resources/assessments.docx" download="assessments.docx"
        >Assessments (DOCX)</a
      >).
    </p>
  </body>
</html>

A  => accessibility-playground/html-accessibility/index4.html +50 -0
@@ 1,50 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HTML accessibility: Task 4</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }

      body {
        width: 400px;
        margin: 0 auto;
      }

      main img {
        display: block;
        width: 250px;
        margin: 20px auto;
        box-shadow: 5px 5px 0 black;
      }

      header {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
      }
    </style>
  </head>

  <body>
    <header>
      <img src="images/star.png" alt="" />
      <h1>Groovy images</h1>
    </header>
    <main>
      <img src="images/teapot.jpg" alt="A black teapot" />
      <img src="images/football.jpg" alt="A football" />
    </main>
  </body>
</html>

A  => css-playground/typesetting-homepage/external-link-52.png +0 -0
A  => css-playground/typesetting-homepage/index.html +95 -0
@@ 1,95 @@
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>St Huxley's Community College</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <h1>St Huxley's Community College</h1>
    </header>

    <section>
      <h2>Brave new world</h2>

      <p>
        It's a brave new world out there. Our children are being put in
        increasing more competitive situations, both during recreation, and as
        they start to move into the adult world of
        <a href="https://en.wikipedia.org/wiki/Examination">examinations</a>,
        <a href="https://en.wikipedia.org/wiki/Jobs">jobs</a>,
        <a href="https://en.wikipedia.org/wiki/Career">careers</a>, and other
        life choices. Having the wrong mindset, becoming
        <a href="https://en.wikipedia.org/wiki/Emotion">too emotional</a>, or
        making the wrong choices can contribute to them experiencing difficulty
        in taking their rightful place in today's ideal society.
      </p>

      <p>
        As concerned parents, guardians or carers, you will no doubt want to
        give your children the best possible start in life — and you've come to
        the right place.
      </p>

      <h2>The best start in life</h2>

      <p>
        At St. Huxley's, we pride ourselves in not only giving our students a
        top quality education, but also giving them the societal and emotional
        intelligence they need to win big in the coming utopia. We not only
        excel at subjects such as genetics, data mining, and chemistry, but we
        also include compulsory lessons in:
      </p>

      <ul>
        <li>Emotional control</li>
        <li>Judgement</li>
        <li>Assertion</li>
        <li>Focus and resolve</li>
      </ul>

      <p>If you are interested, then you next steps will likely be to:</p>

      <ol>
        <li><a href="#">Call us</a> for more information</li>
        <li><a href="#">Ask for a brochure</a>, which includes signup form</li>
        <li><a href="#">Book a visit</a>!</li>
      </ol>
    </section>

    <aside>
      <h2>Top course choices</h2>

      <ul>
        <li><a href="#">Genetic engineering</a></li>
        <li><a href="#">Genetic mutation</a></li>
        <li><a href="#">Organic Chemistry</a></li>
        <li><a href="#">Pharmaceuticals</a></li>
        <li><a href="#">Biochemistry with behaviour</a></li>
        <li><a href="#">Pure biochemistry</a></li>
        <li><a href="#">Data mining</a></li>
        <li><a href="#">Computer security</a></li>
        <li><a href="#">Bioinformatics</a></li>
        <li><a href="#">Cybernetics</a></li>
      </ul>

      <p><a href="#">See more</a></p>
    </aside>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Finding us</a></li>
        <li><a href="#">Courses</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Media</a></li>
        <li><a href="#">Prospectus</a></li>
      </ul>
    </nav>

    <footer>
      <p>&copy; 2016 St Huxley's Community College</p>
    </footer>
  </body>
</html>

A  => css-playground/typesetting-homepage/style.css +45 -0
@@ 1,45 @@
/* General setup */

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  min-width: 1000px;
  max-width: 1400px;
}

/* Layout */

section {
  float: left;
  width: 50%;
}

aside {
  float: left;
  width: 30%;
}

nav {
  float: left;
  width: 20%;
}

footer {
  clear: both;
}

header, section, aside, nav, footer {
  padding: 20px;
}

/* header and footer */

header, footer {
  border-top: 5px solid #a66;
  border-bottom: 5px solid #a66;
}

/* WRITE YOUR CODE BELOW HERE */
\ No newline at end of file