initial repo population

carolynshin · Mar 8, 2016 · ec54b50 · ec54b50
commit ec54b50
Show file tree

Hide file tree

Showing 83 changed files with 2,574 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org>
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# learning-area
+Github repo for the [MDN Learning Area](https://developer.mozilla.org/en-US/Learn). 
diff --git a/css/introduction-to-css/box-model/index.html b/css/introduction-to-css/box-model/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Box model</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <header>Header</header>
+    <main>Main content</main>
+    <footer>Footer</footer>
+  </body>
+</html>
diff --git a/css/introduction-to-css/box-model/style.css b/css/introduction-to-css/box-model/style.css
@@ -0,0 +1,31 @@
+/* General styles */
+
+body {
+  margin: 0;
+}
+
+body > * {
+  padding: 20px;
+  font-size: 20px;
+  border: 20px solid rgba(0,0,0,0.5);
+}
+
+/* specific boxes */
+
+header, footer {
+  background-color: blue;
+  color: white;
+}
+
+main {
+  background-color: yellow;
+}
+
+header {
+
+}
+
+footer {
+
+}
+
diff --git a/css/introduction-to-css/cascade-and-inheritance/index.html b/css/introduction-to-css/cascade-and-inheritance/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS values and units</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div id="important">
+      <p class="better">This is a paragraph.</p>
+      <p class="better" id="winning">One selector to rule them all!</p>
+    </div>
+
+    <hr>
+
+    <div id="weight">
+      <div id="outer" class="container">
+        <div id="inner" class="container">
+          <ul>
+            <li class="nav"><a href="#">One</a></li>
+            <li class="nav"><a href="#">Two</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <hr>
+
+    <div id="live">
+      <div id="outer" class="container">
+        <div id="inner" class="container">
+          <ul>
+            <li class="nav"><a href="#">One</a></li>
+            <li class="nav"><a href="#">Two</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+
diff --git a/css/introduction-to-css/cascade-and-inheritance/style.css b/css/introduction-to-css/cascade-and-inheritance/style.css
@@ -0,0 +1,97 @@
+/* General styles */
+
+hr {
+  width: 80%;
+  margin: 50px auto;
+}
+
+/* Important example */
+
+#important #winning {
+  background-color: red;
+  border: 1px solid black;
+}
+
+#important .better {
+  background-color: gray;
+  border: none !important;
+}
+
+#important p {
+  color: white;
+  background-color: blue;
+  padding: 5px;
+}
+
+/* Selector weight example */
+
+/* weight: 0201; */
+#weight #outer a {
+  background-color: red;
+}
+
+/* weight: 0301; */
+#weight #outer #inner a {
+  background-color: blue;
+}
+
+/* weight: 0204; */
+#weight #outer div ul li a {
+  color: yellow;
+}
+
+/* weight: 0213; */
+#weight #outer div ul .nav a {
+  color: white;
+}
+
+/* weight: 0115; */
+#weight div div li:nth-child(2) a:hover {
+  border: 10px solid black;
+}
+
+/* weight: 0114; */
+#weight div li:nth-child(2) a:hover {
+  border: 10px dashed black;
+}
+
+/* weight: 0124; */
+#weight div div .nav:nth-child(2) a:hover {
+  border: 10px double black;
+}
+
+#weight a {
+  display: inline-block;
+  line-height: 40px;
+  font-size: 20px;
+  text-decoration: none;
+  text-align: center;
+  width: 200px;
+  margin-bottom: 10px;
+}
+
+#weight ul {
+  padding: 0;
+}
+
+#weight li {
+  list-style-type: none;
+}
+
+/* live sample styling */
+
+#live #outer div ul .nav a {
+  background-color: blue;
+  padding: 5px;
+  display: inline-block;
+  margin-bottom: 10px;
+}
+
+#live div div li a {
+color: yellow;
+}
+
+#live #outer #inner a {
+  background-color: initial;
+  color: red;
+}
diff --git a/css/introduction-to-css/css-selectors/de.png b/css/introduction-to-css/css-selectors/de.png
diff --git a/css/introduction-to-css/css-selectors/en-GB.png b/css/introduction-to-css/css-selectors/en-GB.png
diff --git a/css/introduction-to-css/css-selectors/es.png b/css/introduction-to-css/css-selectors/es.png
diff --git a/css/introduction-to-css/css-selectors/index.html b/css/introduction-to-css/css-selectors/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS selectors</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div id="element-selectors">
+      <h1>Hello World!</h1>
+      <p>This is a paragraph.</p>
+
+      <ul>
+        <li>This is</li>
+        <li>A list</li>
+      </ul>
+    </div>
+
+    <hr>
+
+    <div id="class-selectors">
+      <p class="base-box warning">My first paragraph.</p>
+      <p class="">My second paragraph.</p>
+      <p class="">My third paragraph</p>
+    </div>
+
+    <hr>
+
+    <div id="id-selectors">
+      <p id="first"><strong>Winner</strong>: Velma Victory</p>
+      <p id="second"><strong>2nd</strong>: Colin Contender</p>
+      <p id="third"><strong>3rd</strong>: Phoebe Player</p>
+    </div>   
+
+    <hr>
+
+    <div id="attribute-selectors">
+      <ol>
+        <li lang="en-GB" data-perf="inc-pro">Manchester United</li>
+        <li lang="es" data-perf="same-pro">Barcelona</li>
+        <li lang="de" data-perf="dec">Bayern Munich</li>
+
+        <li lang="es" data-perf="same">Real Madrid</li>
+        <li lang="de" data-perf="inc-rel">Borussia Dortmund</li>
+        <li lang="en-GB" data-perf="dec-rel">Southampton FC</li>
+      </ol>
+    </div>
+
+    <hr>
+
+    <div id="pseudo-class-selectors">
+      <ul>
+        <li><a href="#">United Kingdom</a></li>
+        <li><a href="#">Germany</a></li>
+        <li><a href="#">Finland</a></li>
+        <li><a href="#">Russia</a></li>
+        <li><a href="#">Spain</a></li>
+        <li><a href="#">Poland</a></li>
+      </ul>
+    </div>
+
+    <hr>
+
+    <div id="pseudo-element-selectors">
+      <p>This is my very important paragraph. I am a distinguished gentleman of such renown that my paragraph needs to be styled in a manner befitting my majesty. Bow before my splendour, dear students, and go forth and learn CSS!</p>
+    </div>
+
+    <hr>
+
+    <div id="combinators"> 
+
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Portfolio</a></li>
+        <li><a href="#">About</a></li>
+      </ul>
+
+      <h1>Welcome to my website</h1>
+
+      <p>Hello, and welcome! I hope you enjoy your time here.</p>
+
+      <h2>My philosophy</h2>
+
+      <p>I am a believer in chilling out, and not getting grumpy. I think everyone else should follow this ideal, and <a href="#">drink green tea</a>.</p>
+
+    </div>   
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# learning-area
		Github repo for the [MDN Learning Area](https://developer.mozilla.org/en-US/Learn).