From 5ad0b2d07d5a978885e0612bc392f4195914623c Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 15 Feb 2019 08:17:52 -0800 Subject: [PATCH 1/4] starting part 0 --- index.html | 1 + step1-00/fabric.jpg | Bin 0 -> 13252 bytes step1-00/index.html | 127 ++++++++++++++++++++++++++++++++++++++++++++ step1-00/style.css | 6 +++ 4 files changed, 134 insertions(+) create mode 100644 step1-00/fabric.jpg create mode 100644 step1-00/index.html create mode 100644 step1-00/style.css diff --git a/index.html b/index.html index d855a4e..bf2c180 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@

Day 1

+ Step 0 Step 1 Step 2 Step 3 diff --git a/step1-00/fabric.jpg b/step1-00/fabric.jpg new file mode 100644 index 0000000000000000000000000000000000000000..27722a28fb6c5eafdec778ad2443704b70bf1556 GIT binary patch literal 13252 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 literal 0 HcmV?d00001 diff --git a/step1-00/index.html b/step1-00/index.html new file mode 100644 index 0000000..6958a0b --- /dev/null +++ b/step1-00/index.html @@ -0,0 +1,127 @@ + + + Intro to HTML + + + + + + HTML Element Reference + +

Document Meta Data

+

head, title, link, style

+ +

Content Sections

+ +
+
+

My Website

+ +
+ +
+

My Blog

+
+

Blog Title 1

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt + consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt + consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! +

+
+
+

Blog Title 2

+ + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus debitis cupiditate sunt possimus praesentium eligendi + iure, ratione consequuntur, facere ex dolores beatae nostrum cumque voluptatum doloremque id amet. Magnam, rem. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt + consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! +

+
+
+
Copyright 2019
+
+
+

Text content

+ +

Blockquote

+ +
+

Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.

+
+ + – Aldous Huxley, Brave New World + +

Definition List

+
+
Beast of Bodmin
+
A large feline inhabiting Bodmin Moor.
+ +
Morgawr
+
A sea serpent.
+ +
Owlman
+
A giant owl-like creature.
+
+ +

Figure

+
+ Fabric Logo +
The Fabric Logo
+
+ +

Ordered List

+
    +
  1. Ordered
    2. +
  2. list
    3. +
  3. items
    4. +
+ +

Unordered List

+
    +
  • Unordered
    • +
  • list
    • +
  • items
    • +
+ +

Paragraph

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, vero! Eum optio veniam nisi, assumenda ea velit in corrupti vel + eos reprehenderit beatae libero rem iusto, maiores, corporis sunt laborum. +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis porro consequuntur exercitationem, perspiciatis nam saepe, odit + enim omnis qui commodi cupiditate in eveniet. Nemo maxime ipsam recusandae consectetur voluptatum non? +

+

Pre

+ 
+        // This is a pre tag            --           It respects spacing and tabs
+        // But actual code still needs to be escaped
+        <ul>
+          <li>Unordered</li>
+          <li>list</li>
+          <li>items</li>
+        </ul>
+
+
+ + diff --git a/step1-00/style.css b/step1-00/style.css new file mode 100644 index 0000000..8c97104 --- /dev/null +++ b/step1-00/style.css @@ -0,0 +1,6 @@ +aside { + float: right; + width: 33%; + padding: 10px; + background: #eee; +} From f0af657ea06aefe6f61bb9b6891b5e1aa04eb82d Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 15 Feb 2019 08:28:41 -0800 Subject: [PATCH 2/4] few more inline tags --- step1-00/index.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/step1-00/index.html b/step1-00/index.html index 6958a0b..e7c04be 100644 --- a/step1-00/index.html +++ b/step1-00/index.html @@ -123,5 +123,20 @@ </ul> +
+

Inline text elements

+ +

Anchor tag

+ + + a br span + +

Inline style tags

+

b tag em tag i tag sub tag sup tab code tag

+
From 91e7993408fc80e56940d69c0d8712193a6a5019 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 15 Feb 2019 10:15:52 -0800 Subject: [PATCH 3/4] finished HTML demo page --- step1-00/index.html | 107 +++++++++++++++++++++++++++++++++++++++----- step1-00/style.css | 4 ++ 2 files changed, 101 insertions(+), 10 deletions(-) diff --git a/step1-00/index.html b/step1-00/index.html index e7c04be..c15b04d 100644 --- a/step1-00/index.html +++ b/step1-00/index.html @@ -21,10 +21,10 @@

My Website

@@ -61,7 +61,7 @@
Copyright 2019
-

Text content

+

Block Text content

Blockquote

@@ -126,17 +126,104 @@

Inline text elements

-

Anchor tag

+

Anchor tag, br and span

- - a br span + Website address
+ Email
+ Phone

Inline style tags

b tag em tag i tag sub tag sup tab code tag

+
+

Table content

+ + + + + + + + + + + + + + + + + +
The table header
The table bodywith two columns
Another table rowwith two columns
+
+
+

Forms

+ +
+
+ + +
+
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+
+ + + +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + + +
+ +
+ +
+
+
diff --git a/step1-00/style.css b/step1-00/style.css index 8c97104..b1a4247 100644 --- a/step1-00/style.css +++ b/step1-00/style.css @@ -4,3 +4,7 @@ aside { padding: 10px; background: #eee; } + +form > div { + margin-bottom: 20px; +} From f9932aa48b1a60baa8e97f0edab5529f29684d58 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 15 Feb 2019 11:19:18 -0800 Subject: [PATCH 4/4] css demo --- step1-00/css-demo.css | 49 +++++++++ step1-00/css-demo.html | 29 +++++ step1-00/html-demo.html | 229 +++++++++++++++++++++++++++++++++++++++ step1-00/index.html | 231 +--------------------------------------- 4 files changed, 309 insertions(+), 229 deletions(-) create mode 100644 step1-00/css-demo.css create mode 100644 step1-00/css-demo.html create mode 100644 step1-00/html-demo.html diff --git a/step1-00/css-demo.css b/step1-00/css-demo.css new file mode 100644 index 0000000..62b4a88 --- /dev/null +++ b/step1-00/css-demo.css @@ -0,0 +1,49 @@ +h1 { + padding: 10px; + margin-bottom: 15px; + margin-top: 15px; + color: black; + background: #ddd; + border: 1px solid #ababab; +} + +a { + color: white; +} +a:hover { + color: #ccc; +} + +.tiles { + display: flex; +} + +.tiles img { + display: block; + margin: 0 auto; + max-width: 75%; +} + +.tiles > div { + background: rgb(10, 10, 10); + color: white; + flex-basis: 100%; + padding: 10px 20px 15px; + margin-right: 20px; +} + +.tiles > div:last-child { + margin-right: 0; +} + +a + a { + display: block; +} + +#contact-form > * { + display: block; +} + +input[type='submit'] { + margin-top: 10px; +} diff --git a/step1-00/css-demo.html b/step1-00/css-demo.html new file mode 100644 index 0000000..99ecc74 --- /dev/null +++ b/step1-00/css-demo.html @@ -0,0 +1,29 @@ + + + + + +
+

This is my Title

+
+
+

Important Links

+ We're Awesome + Learn More + Hire Us +
+
+

Our Logo

+ fabric logo +
+
+

Contact Us

+
+ + +
+
+
+
+ + diff --git a/step1-00/html-demo.html b/step1-00/html-demo.html new file mode 100644 index 0000000..c15b04d --- /dev/null +++ b/step1-00/html-demo.html @@ -0,0 +1,229 @@ + + + Intro to HTML + + + + + + HTML Element Reference + +

Document Meta Data

+

head, title, link, style

+ +

Content Sections

+ +
+
+

My Website

+ +
+ +
+

My Blog

+
+

Blog Title 1

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt + consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt + consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! +

+
+
+

Blog Title 2

+ + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus debitis cupiditate sunt possimus praesentium eligendi + iure, ratione consequuntur, facere ex dolores beatae nostrum cumque voluptatum doloremque id amet. Magnam, rem. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt + consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! +

+
+
+
Copyright 2019
+
+
+

Block Text content

+ +

Blockquote

+ +
+

Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.

+
+ + – Aldous Huxley, Brave New World + +

Definition List

+
+
Beast of Bodmin
+
A large feline inhabiting Bodmin Moor.
+ +
Morgawr
+
A sea serpent.
+ +
Owlman
+
A giant owl-like creature.
+
+ +

Figure

+
+ Fabric Logo +
The Fabric Logo
+
+ +

Ordered List

+
    +
  1. Ordered
    2. +
  2. list
    3. +
  3. items
    4. +
+ +

Unordered List

+
    +
  • Unordered
    • +
  • list
    • +
  • items
    • +
+ +

Paragraph

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, vero! Eum optio veniam nisi, assumenda ea velit in corrupti vel + eos reprehenderit beatae libero rem iusto, maiores, corporis sunt laborum. +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis porro consequuntur exercitationem, perspiciatis nam saepe, odit + enim omnis qui commodi cupiditate in eveniet. Nemo maxime ipsam recusandae consectetur voluptatum non? +

+

Pre

+ 
+        // This is a pre tag            --           It respects spacing and tabs
+        // But actual code still needs to be escaped
+        <ul>
+          <li>Unordered</li>
+          <li>list</li>
+          <li>items</li>
+        </ul>
+
+
+
+

Inline text elements

+ +

Anchor tag, br and span

+ + Website address
+ Email
+ Phone
+ +

Inline style tags

+

b tag em tag i tag sub tag sup tab code tag

+
+
+

Table content

+ + + + + + + + + + + + + + + + + +
The table header
The table bodywith two columns
Another table rowwith two columns
+
+
+

Forms

+ +
+
+ + +
+
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+
+ + + +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + + +
+ +
+ +
+
+
+ + diff --git a/step1-00/index.html b/step1-00/index.html index c15b04d..be6fabc 100644 --- a/step1-00/index.html +++ b/step1-00/index.html @@ -1,229 +1,2 @@ - - - Intro to HTML - - - - - - HTML Element Reference - -

Document Meta Data

-

head, title, link, style

- -

Content Sections

- -
-
-

My Website

- -
- -
-

My Blog

-
-

Blog Title 1

- -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt - consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! -

- -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt - consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! -

-
-
-

Blog Title 2

- - -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus debitis cupiditate sunt possimus praesentium eligendi - iure, ratione consequuntur, facere ex dolores beatae nostrum cumque voluptatum doloremque id amet. Magnam, rem. -

- -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt - consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! -

-
-
-
Copyright 2019
-
-
-

Block Text content

- -

Blockquote

- -
-

Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.

-
- - – Aldous Huxley, Brave New World - -

Definition List

-
-
Beast of Bodmin
-
A large feline inhabiting Bodmin Moor.
- -
Morgawr
-
A sea serpent.
- -
Owlman
-
A giant owl-like creature.
-
- -

Figure

-
- Fabric Logo -
The Fabric Logo
-
- -

Ordered List

-
    -
  1. Ordered
    2. -
  2. list
    3. -
  3. items
    4. -
- -

Unordered List

-
    -
  • Unordered
    • -
  • list
    • -
  • items
    • -
- -

Paragraph

-

- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, vero! Eum optio veniam nisi, assumenda ea velit in corrupti vel - eos reprehenderit beatae libero rem iusto, maiores, corporis sunt laborum. -

-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis porro consequuntur exercitationem, perspiciatis nam saepe, odit - enim omnis qui commodi cupiditate in eveniet. Nemo maxime ipsam recusandae consectetur voluptatum non? -

-

Pre

- 
-        // This is a pre tag            --           It respects spacing and tabs
-        // But actual code still needs to be escaped
-        <ul>
-          <li>Unordered</li>
-          <li>list</li>
-          <li>items</li>
-        </ul>
-
-
-
-

Inline text elements

- -

Anchor tag, br and span

- - Website address
- Email
- Phone
- -

Inline style tags

-

b tag em tag i tag sub tag sup tab code tag

-
-
-

Table content

- - - - - - - - - - - - - - - - - -
The table header
The table bodywith two columns
Another table rowwith two columns
-
-
-

Forms

- -
-
- - -
-
-
- - -
- -
- - -
-
- -
- - -
- -
- - -
-
- - - -
-
-
- - -
- -
- - -
- -
- - -
-
-
- - - -
- -
- -
-
-
- - +HTML Demo
+CSS Demo