msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Done Third Lesson

Browse Source
pull/1156/head
koyuncuoglum95 2 years ago
parent c98d70f312
commit 3ac02bd614
5 changed files with 223 additions and 0 deletions
Show Stats Download Patch File Download Diff File

51
3-terrarium/1-intro-to-html/blog.css
Unescape View File

@ -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;
}

44
3-terrarium/1-intro-to-html/blog.html
Unescape View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>My Personal Blog</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<header>
<h1>My Personal Blog - My Journey in Tech</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div style="display: flex;">
<main style="flex: 70%;">
<article>
<h2>My journey in a tech</h2>
<p>05 July 2023 | Posted by: Mehmet Koyuncuoglu</p>
<p>Helo everyone, I am Mehmet Koyuncuoglu and I've started this joruney 5 years ago by learning code myself on udemy.</p>
<a href="#">Continue reading...</a>
</article>
</main>
<aside style="flex: 30%;">
<h3>Popular Posts</h3>
<h3>About Me</h3>
<!-- Your short bio -->
<h3>Contact Info</h3>
</aside>
</div>
<footer>
<p>Copyright &copy; 2023</p>
</footer>
</body>
</html>

57
3-terrarium/2-intro-to-css/blog.css
Unescape View File

@ -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;
}

46
3-terrarium/2-intro-to-css/blog.html
Unescape View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>My Personal Blog</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<header>
<h1>My Personal Blog - My Journey in Tech</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="content-grid">
<main>
<article>
<h2>My journey in a tech</h2>
<p>05 July 2023 | Posted by: Mehmet Koyuncuoglu</p>
<p>Helo everyone, I am Mehmet Koyuncuoglu and I've started this joruney 5 years ago by learning code myself on udemy.</p>
<a href="#">Continue reading...</a>
</article>
</main>
<aside>
<h3>Popular Posts</h3>
<h3>About Me</h3>
<h3>Contact Info</h3>
</aside>
</div>
<footer>
<p>Copyright &copy; 2023</p>
</footer>
</body>
</html>

25
3-terrarium/3-intro-to-DOM-and-closures/assignment.md
Unescape View File

@ -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 <button id="myButton">Click me</button>.
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 |

Write Preview
Loading…
Cancel
Save