diff --git a/my_solution/02-HTML-Fundamentals/challenges.jpg b/my_solution/02-HTML-Fundamentals/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/my_solution/02-HTML-Fundamentals/challenges.jpg differ diff --git a/my_solution/02-HTML-Fundamentals/content.txt b/my_solution/02-HTML-Fundamentals/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/my_solution/02-HTML-Fundamentals/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/my_solution/02-HTML-Fundamentals/index.html b/my_solution/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..bd50aaa23 --- /dev/null +++ b/my_solution/02-HTML-Fundamentals/index.html @@ -0,0 +1,51 @@ + + + + + + Document + + +
+ Hello biig Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, + alias ad deserunt excepturi provident aliquam corrupti vero nam, eius + fugit delectus commodi, esse sequi adipisci nihil impedit quidem + temporibus exercitationem. Lorem ipsum dolor, sit amet consectetur + adipisicing elit. Itaque suscipit vitae libero exercitationem tenetur + totam fugit enim doloremque repellendus corporis officiis consequatur, + natus eos odio, deleniti veniam magnam? Eligendi, debitis. Lorem, ipsum + dolor sit amet consectetur adipisicing elit. Perferendis, molestiae a? + Fugiat nisi laudantium id error labore animi repellendus, voluptatum + perspiciatis doloremque similique pariatur, quos officiis aspernatur quia, + velit facere. +
+ + + diff --git a/my_solution/02-HTML-Fundamentals/laura-jones.jpg b/my_solution/02-HTML-Fundamentals/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/my_solution/02-HTML-Fundamentals/laura-jones.jpg differ diff --git a/my_solution/02-HTML-Fundamentals/post-img.jpg b/my_solution/02-HTML-Fundamentals/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/my_solution/02-HTML-Fundamentals/post-img.jpg differ diff --git a/my_solution/02-HTML-Fundamentals/related-1.jpg b/my_solution/02-HTML-Fundamentals/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/my_solution/02-HTML-Fundamentals/related-1.jpg differ diff --git a/my_solution/02-HTML-Fundamentals/related-2.jpg b/my_solution/02-HTML-Fundamentals/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/my_solution/02-HTML-Fundamentals/related-2.jpg differ diff --git a/my_solution/02-HTML-Fundamentals/related-3.jpg b/my_solution/02-HTML-Fundamentals/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/my_solution/02-HTML-Fundamentals/related-3.jpg differ diff --git a/my_solution/03-CSS-Fundamentals/blog.html b/my_solution/03-CSS-Fundamentals/blog.html new file mode 100644 index 000000000..3b9b6e328 --- /dev/null +++ b/my_solution/03-CSS-Fundamentals/blog.html @@ -0,0 +1,10 @@ + + + + BLOG + + +

BLOG

+ Back to home + + diff --git a/my_solution/03-CSS-Fundamentals/content.txt b/my_solution/03-CSS-Fundamentals/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/my_solution/03-CSS-Fundamentals/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/my_solution/03-CSS-Fundamentals/img/challenges.jpg b/my_solution/03-CSS-Fundamentals/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/my_solution/03-CSS-Fundamentals/img/challenges.jpg differ diff --git a/my_solution/03-CSS-Fundamentals/img/laura-jones.jpg b/my_solution/03-CSS-Fundamentals/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/my_solution/03-CSS-Fundamentals/img/laura-jones.jpg differ diff --git a/my_solution/03-CSS-Fundamentals/img/post-img.jpg b/my_solution/03-CSS-Fundamentals/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/my_solution/03-CSS-Fundamentals/img/post-img.jpg differ diff --git a/my_solution/03-CSS-Fundamentals/img/related-1.jpg b/my_solution/03-CSS-Fundamentals/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/my_solution/03-CSS-Fundamentals/img/related-1.jpg differ diff --git a/my_solution/03-CSS-Fundamentals/img/related-2.jpg b/my_solution/03-CSS-Fundamentals/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/my_solution/03-CSS-Fundamentals/img/related-2.jpg differ diff --git a/my_solution/03-CSS-Fundamentals/img/related-3.jpg b/my_solution/03-CSS-Fundamentals/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/my_solution/03-CSS-Fundamentals/img/related-3.jpg differ diff --git a/my_solution/03-CSS-Fundamentals/index.html b/my_solution/03-CSS-Fundamentals/index.html new file mode 100644 index 000000000..356e6cb6b --- /dev/null +++ b/my_solution/03-CSS-Fundamentals/index.html @@ -0,0 +1,163 @@ + + + + + The Basic Language of the Web: HTML + + + + + + +
+
+

📘 The Code Magazine

+ + +
+ +
+
+

The Basic Language of the Web: HTML

+ + Headshot of Laura Jones + +

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

+ + HTML code on a screen +
+ +

+ 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. +
+ +

+ You can learn more at + 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: +

+ + + +

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

+
+ + + + +
+ + + + diff --git a/my_solution/03-CSS-Fundamentals/style.css b/my_solution/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..f641a294a --- /dev/null +++ b/my_solution/03-CSS-Fundamentals/style.css @@ -0,0 +1,224 @@ +* { + margin: 0; + padding: 0; +} + +/* page sections */ +body { + font-family: sans-serif; + color: #444; + border-top: 10px solid #1098ad; + position: relative; +} +.container { + width: 800px; + margin: 0 auto; +} +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} +.post-header { + margin-bottom: 40px; +} + +article { + margin-bottom: 60px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 0; + width: 500px; +} + +/* smaller elements */ +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + color: blue; + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +h4 { + font-size: 20px; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15; +} +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} +li { + font-size: 20px; + margin-bottom: 10px; +} +/* utolsónak nem kell margin */ +li:last-child { + margin-bottom: 0; +} + +.no-bullet-points { + list-style: none; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +/* footer p { + font-size: 16px; +} */ +#copyright { + font-size: 16px; +} + +#auther { + font-style: italic; + font-size: 18px; +} + +.post-img { + width: 100%; + height: auto; +} + +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: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { + /* color: red; */ +} +h2 { + position: relative; +} +h2::after { + content: "Top"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} + +/* header p { + font-style: italic; +} */ + +/* .first-li { + font-weight: bold; +} */ + +li:first-child { + font-weight: bold; +} +li:last-child { + font-style: italic; +} +/* this won't work */ +article p:first-child { + color: red; +} + +/* styling links */ +/* a { + color: #1098ad; +} */ + +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline dotted orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +/* resolving conflicts */ +/* #copyright { + color: red; +} */ +/* .copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green; +} */ diff --git a/my_solution/04-CSS-Layouts/blog.html b/my_solution/04-CSS-Layouts/blog.html new file mode 100644 index 000000000..3b9b6e328 --- /dev/null +++ b/my_solution/04-CSS-Layouts/blog.html @@ -0,0 +1,10 @@ + + + + BLOG + + +

BLOG

+ Back to home + + diff --git a/my_solution/04-CSS-Layouts/content.txt b/my_solution/04-CSS-Layouts/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/my_solution/04-CSS-Layouts/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/my_solution/04-CSS-Layouts/css-grid.html b/my_solution/04-CSS-Layouts/css-grid.html new file mode 100644 index 000000000..e2daa6d42 --- /dev/null +++ b/my_solution/04-CSS-Layouts/css-grid.html @@ -0,0 +1,80 @@ + + + + + + + CSS Grid + + + +
+
(1) HTML
+
(2) and
+
(3) CSS
+
(4) are
+
(5) amazing
+
(6) languages
+
(7) to
+
(8) learn
+
+ +
+
(1)
+
(3)
+
(4)
+
(5)
+
(6)
+
(7)
+
+ + diff --git a/my_solution/04-CSS-Layouts/flexbox.html b/my_solution/04-CSS-Layouts/flexbox.html new file mode 100644 index 000000000..3c2ba50e3 --- /dev/null +++ b/my_solution/04-CSS-Layouts/flexbox.html @@ -0,0 +1,85 @@ + + + + + + + Flexbox + + + +
+
HTML
+
and
+
CSS
+
are
+
amazing
+
languages
+
to
+
learn
+
+ + diff --git a/my_solution/04-CSS-Layouts/img/challenges.jpg b/my_solution/04-CSS-Layouts/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/my_solution/04-CSS-Layouts/img/challenges.jpg differ diff --git a/my_solution/04-CSS-Layouts/img/laura-jones.jpg b/my_solution/04-CSS-Layouts/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/my_solution/04-CSS-Layouts/img/laura-jones.jpg differ diff --git a/my_solution/04-CSS-Layouts/img/post-img.jpg b/my_solution/04-CSS-Layouts/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/my_solution/04-CSS-Layouts/img/post-img.jpg differ diff --git a/my_solution/04-CSS-Layouts/img/related-1.jpg b/my_solution/04-CSS-Layouts/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/my_solution/04-CSS-Layouts/img/related-1.jpg differ diff --git a/my_solution/04-CSS-Layouts/img/related-2.jpg b/my_solution/04-CSS-Layouts/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/my_solution/04-CSS-Layouts/img/related-2.jpg differ diff --git a/my_solution/04-CSS-Layouts/img/related-3.jpg b/my_solution/04-CSS-Layouts/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/my_solution/04-CSS-Layouts/img/related-3.jpg differ diff --git a/my_solution/04-CSS-Layouts/index.html b/my_solution/04-CSS-Layouts/index.html new file mode 100644 index 000000000..be955824c --- /dev/null +++ b/my_solution/04-CSS-Layouts/index.html @@ -0,0 +1,177 @@ + + + + + + + The Basic Language of the Web: HTML + + + + + +
+
+

📘 The Code Magazine

+ + + + +
+ +
+
+

The Basic Language of the Web: HTML

+ +
+ Headshot of Laura Jones + +

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

+
+ + HTML code on a screen + +
+ +

+ 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. +
+ +

+ You can learn more at + 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: +

+ + + +

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

+
+ + + + +
+ + diff --git a/my_solution/04-CSS-Layouts/style.css b/my_solution/04-CSS-Layouts/style.css new file mode 100644 index 000000000..071e7f6f9 --- /dev/null +++ b/my_solution/04-CSS-Layouts/style.css @@ -0,0 +1,275 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + color: #444; + font-family: sans-serif; + + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 1200px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; +} + +nav { + font-size: 18px; +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 0; + margin-bottom: 30px; +} + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +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; +} + +li:last-child { + margin-bottom: 0; +} + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + margin: 0; + list-style: none; +} + +body { +} + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { +} + +article p:first-child { + color: red; +} + +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + margin-right: 30px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { +} + +h2 { + position: relative; +} + +h2::before { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} + +/* +.author-img { + float: left; +} + +.author { + float: left; + margin-left: 20px; + margin-top: 10px; +} + +h1 { + float: left; +} +nav { + float: right; +} +.clear { + clear: both; +} + +.clearfix::after { + content: ""; + clear: both; + display: block; +} + +article { + width: 825px; + float: left; +} +aside { + width: 300px; + float: right; + padding: 50px 40px; +} +footer { + clear: both; +} */ + +.main-header { + display: flex; + align-items: center; + justify-content: space-between; +} +.author-box { + display: flex; + align-items: center; + margin-bottom: 30px; +} +.author { + margin-left: 20px; +} +.related-post { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 30px; +} + +.realted-link :link { + font-size: 17px; + font-weight: bold; + font-style: normal; + margin-bottom: 5px; + display: block; +} + +.related-author { + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + font-style: italic; +}