Skip to content

Commit 4ca7f1f

Browse files
elfgoddelfgodd
committed
Section 13: Intro to the DOM & Important note HTML and CSS
1 parent 18701a2 commit 4ca7f1f

4 files changed

Lines changed: 81 additions & 0 deletions

File tree

‎13-JS-In-the-Browser-DOM-Manipulation/README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
## 13-JS-In-the-Browser-DOM-Manipulation
2+
3+
## 1. Introduction to the DOM
4+
5+
Document Object Model
6+
7+
## 2. IMPORTANT NOTE HTML & CSS
8+
9+
Make sure you are comfortable with **basic HTML & CSS!**
10+
11+
You just need to understand how to create simple elements on a page, how to nest things together,
12+
how to work with IDs and classes, how to write simple CSS selectors to select based on of elements,
13+
classes and ID's, maybe attributes.
14+
15+
You need to understand how to change color to CSS and fonts and how to resize something, the basic
16+
properties, So if you don't have that understanding right now, i recommend you take an hour or two
17+
to go follow a tutorial online.
18+

‎13-JS-In-the-Browser-DOM-Manipulation/app.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
h1 {
2+
color: purple;
3+
font-size: 60px;
4+
}
5+
6+
#bear-photo {
7+
width: 250px;
8+
height: 250px;
9+
}
10+
11+
.special {
12+
color: teal;
13+
font-size: 30px;
14+
border: 1px solid teal;
15+
}
16+
17+
input[type="password"] {
18+
height: 50px;
19+
width: 100px;
20+
}

‎13-JS-In-the-Browser-DOM-Manipulation/app.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// ******************************
2+
// xxxxxxxxxxxxxxxxxxxxxxxxx ******************************
3+
// Example 1

‎13-JS-In-the-Browser-DOM-Manipulation/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="app.css">
8+
<title>JavaScript</title>
9+
</head>
10+
<body>
11+
<h1 class="header">My WebPage</h1>
12+
<p id="main">Lorem ipsum dolor sit amet consectetur adipiscing
13+
ipsum dolor sit amet consectetur adipiscing
14+
ipsum dolor sit amet consectetur adipiscing
15+
</p>
16+
<p>Lorem ipsum dolor sit amet consectetur adipiscing
17+
ipsum dolor sit amet consectetur adipiscing
18+
ipsum dolor sit amet consectetur adipiscing
19+
</p>
20+
<form action="">
21+
<input type="text" placeholder="Bear Name">
22+
<input type="password" placeholder="Password">
23+
<input type="submit" placeholder="Bear Name">
24+
</form>
25+
<p class="special">
26+
Paragraph
27+
</p>
28+
<ul>
29+
<li class="special">First Thing</li>
30+
<li>Second Thing</li>
31+
<li class="special">Third Thing</li>
32+
</ul>
33+
<img
34+
id="bear-photo"
35+
src="https://images.unsplash.com/photo-1547146092-983100a60066?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
36+
alt="alt tag"
37+
/>
38+
<script src="app.js"></script>
39+
</body>
40+
</html>

0 commit comments

Comments
 (0)