diff --git a/3-terrarium/1-intro-to-html/blog.css b/3-terrarium/1-intro-to-html/blog.css new file mode 100644 index 00000000..abaac04d --- /dev/null +++ b/3-terrarium/1-intro-to-html/blog.css @@ -0,0 +1,51 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + } + + header { + background-color: #f8f9fa; + padding: 20px; + text-align: center; + } + + nav { + background-color: #007bff; + color: #ffffff; + padding: 10px; + } + + nav ul { + list-style-type: none; + padding: 0; + display: flex; + justify-content: space-around; + } + + nav ul li a { + color: #ffffff; + text-decoration: none; + } + + main { + padding: 20px; + } + + article { + margin-bottom: 20px; + } + + aside { + background-color: #f8f9fa; + padding: 20px; + } + + footer { + background-color: #343a40; + color: #ffffff; + text-align: center; + padding: 10px; + } + \ No newline at end of file diff --git a/3-terrarium/1-intro-to-html/blog.html b/3-terrarium/1-intro-to-html/blog.html new file mode 100644 index 00000000..aa192591 --- /dev/null +++ b/3-terrarium/1-intro-to-html/blog.html @@ -0,0 +1,44 @@ + + + + My Personal Blog + + + +
+

My Personal Blog - My Journey in Tech

+
+ + + +
+
+
+

My journey in a tech

+

05 July 2023 | Posted by: Mehmet Koyuncuoglu

+

Helo everyone, I am Mehmet Koyuncuoglu and I've started this joruney 5 years ago by learning code myself on udemy.

+ Continue reading... +
+
+ + +
+ + + + diff --git a/3-terrarium/2-intro-to-css/blog.css b/3-terrarium/2-intro-to-css/blog.css new file mode 100644 index 00000000..33498e0c --- /dev/null +++ b/3-terrarium/2-intro-to-css/blog.css @@ -0,0 +1,57 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + display: grid; + grid-template-rows: auto 1fr auto; + min-height: 100vh; + } + + header { + background-color: #f8f9fa; + padding: 20px; + text-align: center; + } + + nav { + background-color: #007bff; + color: #ffffff; + padding: 10px; + } + + nav ul { + list-style-type: none; + padding: 0; + display: flex; + justify-content: space-around; + } + + nav ul li a { + color: #ffffff; + text-decoration: none; + } + + .content-grid { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 20px; + padding: 20px; + } + + article { + margin-bottom: 20px; + } + + aside { + background-color: #f8f9fa; + padding: 20px; + } + + footer { + background-color: #343a40; + color: #ffffff; + text-align: center; + padding: 10px; + } + \ No newline at end of file diff --git a/3-terrarium/2-intro-to-css/blog.html b/3-terrarium/2-intro-to-css/blog.html new file mode 100644 index 00000000..4aa8246d --- /dev/null +++ b/3-terrarium/2-intro-to-css/blog.html @@ -0,0 +1,46 @@ + + + + My Personal Blog + + + +
+

My Personal Blog - My Journey in Tech

+
+ + + +
+
+
+

My journey in a tech

+

05 July 2023 | Posted by: Mehmet Koyuncuoglu

+

Helo everyone, I am Mehmet Koyuncuoglu and I've started this joruney 5 years ago by learning code myself on udemy.

+ Continue reading... +
+ +
+ + +
+ + + + diff --git a/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/3-terrarium/3-intro-to-DOM-and-closures/assignment.md index 9797be79..488ebf02 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/assignment.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/assignment.md @@ -4,6 +4,31 @@ Research the DOM a little more by 'adopting' a DOM element. Visit the MDN's [list of DOM interfaces](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) and pick one. Find it being used on a web site in the web, and write an explanation of how it is used. +## Assignment +The Document.querySelector() method returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned. + +It's a very common method used in many websites to manipulate the DOM. + +Example Usage + +Consider the following code snippet from a hypothetical website: + +``` +let myButton = document.querySelector('#myButton'); + +myButton.addEventListener('click', function() { + console.log('Button was clicked!'); +}); +``` + + +In this example, document.querySelector('#myButton') is used to select the first HTML element in the document with an ID of myButton. This might be a button like . + +After the button is selected and stored in the myButton variable, an event listener is added to it. This listener waits for a click event and, when one occurs, it logs a message to the console. + +This kind of code is very common in websites where interactivity is required. The querySelector() method provides an easy way to select elements based on their CSS selectors and perform actions on them. + + ## Rubric | Criteria | Exemplary | Adequate | Needs Improvement |