diff --git a/projectfolder/content.txt b/projectfolder/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/projectfolder/content.txt @@ -0,0 +1,34 @@ +📘 The Code Magazine + +The Basic Language of the Web: HTML + +Posted by Laura Jones on Monday, June 21st 2027 + +All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web. + +In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it. + +What is HTML? + +HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language). + +HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites. + +In HTML, each element is made up of 3 parts: + +The opening tag +The closing tag +The actual element +You can learn more at the MDN Web Docs. + +Why should you learn HTML? + +There are countless reasons for learning the fundamental language of the web. Here are 5 of them: + +To be able to use the fundamental web dev language +To hand-craft beautiful websites instead of relying on tools like Worpress or Wix +To build web applications +To impress friends +To have fun 😃 + +Hopefully you learned something new here. See you next time! \ No newline at end of file diff --git a/projectfolder/css/shopStyle.css b/projectfolder/css/shopStyle.css new file mode 100644 index 000000000..010692497 --- /dev/null +++ b/projectfolder/css/shopStyle.css @@ -0,0 +1,198 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: content-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +p { + margin-bottom: 20px; +} +.product-description { + clear: both; +} + +.product-container { + border: black 4px solid; + width: 900px; + margin: 25px auto; + position: relative; +} +.product-name { + background: #f7f7f7; + text-transform: uppercase; + text-align: center; + padding: 20px 0; +} + +.product-name::after { + content: 'SALE'; + position: absolute; + top: 25px; + left: -25px; + background: red; + color: white; + letter-spacing: 2px; + padding: 5px 5px; + font-size: 12px; + width: 80px; + text-align: center; +} + +.product-details { + text-transform: uppercase; + margin-bottom: 20px; + font-size: 16px; +} + +.shipping { + text-transform: uppercase; + font-weight: bold; + color: #777; + float: right; +} + +.price { + font-size: 25px; + margin-bottom: 0px; + float: left; +} + +/* Link styling */ +.homepage:link { + color: #1098ad; +} + +.homepage:visited { + color: #1098ad; +} +.homepage:hover { + color: orangered; + text-decoration: none orangred; +} + +a:link { + color: black; + text-decoration: underline black; +} + +a:visited { + color: black; +} + +a:hover { + color: black; + text-decoration: none; +} + +/* Other stuff */ + +button { + width: 100%; + background-color: black; + text-transform: uppercase; + border: black solid 5px; + color: white; + font-size: 18px; +} + +button:hover { + color: black; + background-color: white; + border: black solid 5px; + /* The above can be consolidated down into: + background-color: white + filter:invert(100%) + */ +} + +ul { + margin-left: 15px; + margin-bottom: 10px; +} + +ul li { + list-style: square; + margin-bottom: 10px; +} + +nav { + border: #1098ad solid 5px; + background-color: #ad2510; + opacity: 0.8; + justify-content: center; +} + +.colored-boxes > div { + display: inline-block; + width: 15px; + height: 15px; + margin-right: 5px; + margin-bottom: 10px; +} + +.black { + background-color: black; + border: solid 5px black; + width: 5px; + height: 5px; +} +.blue { + background-color: blue; + border: solid 5px blue; + width: 5px; + height: 5px; +} +.red { + background-color: red; + border: solid 5px red; + width: 5px; + height: 5px; +} + +.yellow { + background-color: yellow; + border: solid 5px yellow; + width: 5px; + height: 5px; +} +.green { + background-color: #00d500; + border: solid 5px #00d500; + width: 5px; + height: 5px; +} +.brown { + background-color: brown; + border: solid 5px brown; + width: 5px; + height: 5px; +} + +/* Floats */ +.product-image { + float: left; + margin-right: 40px; +} + +.product-details-container { + /* background-color: yellow; */ + width: 243px; + height: 250px; + float: left; + padding: 0px 40px; + /* margin-top: 20px; */ +} + +.product-info-container { + width: 243px; + /* background-color: blue; */ + float: left; + height: 250px; + margin-right: 40px; + /* margin-top: 20px; */ +} diff --git a/projectfolder/css/style.css b/projectfolder/css/style.css new file mode 100644 index 000000000..843e03eee --- /dev/null +++ b/projectfolder/css/style.css @@ -0,0 +1,294 @@ +/* Global reset, this resets everything to a starting point of 0 so you can customize the padding and margin at an individual level */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + border-top: 5px solid #1098ad; + color: #444; + font-family: sans-serif; + position: relative; +} + +.container { + width: 1200px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} + +nav a:link { + font-size: 18px; +} + +article { + margin-bottom: 60px; +} +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 40px; +} + +/* SMALLER ELEMENTS */ + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + position: relative; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; + margin-bottom: 30px; +} +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin-bottom: 10px; +} + +/* footer p { + font-size: 16px; +} */ +/* article header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-style: italic; + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related-list p, +li { + list-style: none; + margin: none; +} + +/* .first-li { + font-weight: bold; +} */ +/* +li:first-child { + font-weight: bold; +} */ + +li:last-child { + /* font-style: italic; */ + margin-bottom: 0px; +} +/* style based on odd number of item, odd can be changed to even or a specific number +li:nth-child(odd) { + color: red; +} +*/ + +/* +This selector selects the first child of the article, but will only color it black if its paragraph element, otherwise this does nothing. In the case of our index, the
was the first child +article p:first-child { + color: black; +} */ + +/* Styling Hyperlinks */ +/* Style a elements with an href attrivute on them*/ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + /* color: #777; */ + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} +/* The state of actively clicking */ +a:active { + background-color: black; + font-style: italic; +} + +nav a:link { + /* background-color: orangered; + margin: 20px; + padding: 20px; + display: block; */ + margin-right: 30px; + margin-top: 10px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0px; +} + +/* Resolving conflicts */ +/* +footer p { + color: blue !important; +} +*/ + +/* #copyright { + color: red; +} */ + +/* .copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green; +} */ + +/* In this situation, this falls to the hierarchy of importance. ID (#) will always have priority over classes (.) and child elements (footer p). In a situation where both have the same hierarchy (the case with .copyright and .text) then the last one will become the priority, in this case the text became yellow instead of blue + +Priority List 1 -> 10 +High to Low +1 -> !important +2 -> inline styling +3 -> # +4 -> . +5 -> child element + +*/ +.post-img { + width: 100%; + height: auto; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h2::after { + content: 'TOP'; + background-color: #ffe70e; + color: black; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} + +/* Floats */ + +.author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.clear { + clear: both; +} + +.clearfix::after { + clear: both; + content: ''; + display: block; +} + +article { + width: 825px; + float: left; +} +aside { + width: 300px; + float: right; +} +footer { + clear: both; +} diff --git a/projectfolder/imgs/challenges.jpg b/projectfolder/imgs/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/projectfolder/imgs/challenges.jpg differ diff --git a/projectfolder/imgs/laura-jones.jpg b/projectfolder/imgs/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/projectfolder/imgs/laura-jones.jpg differ diff --git a/projectfolder/imgs/post-img.jpg b/projectfolder/imgs/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/projectfolder/imgs/post-img.jpg differ diff --git a/projectfolder/imgs/related-1.jpg b/projectfolder/imgs/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/projectfolder/imgs/related-1.jpg differ diff --git a/projectfolder/imgs/related-2.jpg b/projectfolder/imgs/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/projectfolder/imgs/related-2.jpg differ diff --git a/projectfolder/imgs/related-3.jpg b/projectfolder/imgs/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/projectfolder/imgs/related-3.jpg differ diff --git a/projectfolder/index.html b/projectfolder/index.html new file mode 100644 index 000000000..65eb34356 --- /dev/null +++ b/projectfolder/index.html @@ -0,0 +1,163 @@ + + + + + The Basic Language of The Web: HTML + + + + + +
+
+ +

📘 The Code Magazine

+ + +
+ + +
+ +
+
+

The Basic Langauge of The Web: HTML

+ the person who wrote this +

+ Posted by Laura Jones on Monday, June 21st 2027 +

+
+ + This is the voice of Satan +
+

+ All modern websites and web applications are built using three + fundamental technologies: HTML, CSS and JavaScript. These are + the languages of the web. +

+

+ In this post, let's focus on HTML. We will learn what HTML is all + about, and why you too should learn it. +

+

What is HTML?

+

+ HTML stands for + HyperText Markup + Language. It's a markup language that web developers + use to structure and describe the content of a webpage (not a + programming language). +

+

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers + understand HTML and render HTML code as websites. +

+

In HTML, each element is made up of 3 parts:

+
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
  4. You can learn more at the MDN Web Docs.
    5. +
+ +

+ You can learn more at the + MDN Web Docs +

+ +

Why should you learn HTML

+ +

+ There are countless reasons for learning the fundamental language of + the web. Here are 5 of them: +

+ +
    +
  • + To be able to use the fundamental web dev language +
    • +
  • + To hand-craft beautiful websites instead of relying on tools like + Worpress or Wix +
    • +
  • To build web applications
    • +
  • To impress friends To have fun 😃
    • +
+

Hopefully you learned something new here. See you next time!

+
+ + + +
+

+ Copyright © 2017 by The Code Magazine +

+
+
+ + diff --git a/projectfolder/pages/blog.html b/projectfolder/pages/blog.html new file mode 100644 index 000000000..82406648e --- /dev/null +++ b/projectfolder/pages/blog.html @@ -0,0 +1,9 @@ + + + + BLOGS + Back to main + +

BLOG

+ + diff --git a/projectfolder/pages/challenges.html b/projectfolder/pages/challenges.html new file mode 100644 index 000000000..cc531a19f --- /dev/null +++ b/projectfolder/pages/challenges.html @@ -0,0 +1,57 @@ + + + + + Challenge 2 - Converse Shoe thingy + + + +
+
+ +

Converse Chuck Taylor All Start Low Top

+ + A shoe +
+

$65.00

+

Free Shipping

+

+ Ready to dress up or down, these classic convo Chucks are an + everyday wardrobe staple +

+ +

More information →

 + +
+
+
+
+
+
+
+
+
+
+

Product Details

+
    +
  • Lightweight, durable and painful
    • +
  • Gives crippling back pain with each step
    • +
  • Expensive door stop
    • +
  • Causes depression
    • +
+
+ + +
+
+ + diff --git a/starter/01-Test/index.html b/starter/01-Test/index.html new file mode 100644 index 000000000..5d754f580 --- /dev/null +++ b/starter/01-Test/index.html @@ -0,0 +1,13 @@ + + + + + + + My millions attempt at a webpage + + +

Hello, world!

+

My name is Michael, and this is an attempt at a webpage and shit like that :D

+ +