├── 4.1
    ├── first.css
    ├── second.html
    └── index.html
├── 6.1
    ├── index.js
    └── index.html
├── .gitattributes
├── 7.1
    ├── messages.json
    ├── index.html
    └── index.js
├── 9.1
    └── index.php
├── 9.4
    ├── index.php
    ├── message.php
    ├── markup.html
    └── gettime.php
├── 9.2
    └── message.php
├── 11.4
    ├── delete.php
    ├── gethelpers.php
    ├── index.php
    ├── post.php
    ├── database.php
    └── edit.php
├── 5.2
    ├── index.js
    └── index.html
├── 11.3
    ├── gethelpers.php
    ├── post.php
    ├── index.php
    ├── database.php
    └── edit.php
├── 5.1
    ├── index.js
    └── index.html
├── 5.3
    ├── index.html
    └── index.js
├── 11.1
    ├── index.php
    └── database.php
├── 6.2
    ├── index.js
    └── index.html
├── 6.4
    ├── index.js
    └── index.html
├── 9.3
    └── message.php
├── 11.2
    ├── index.php
    ├── post.php
    └── database.php
├── 6.3
    ├── index.js
    └── index.html
├── 4.2
    ├── first.css
    ├── second.html
    └── index.html
├── 6.6
    ├── index.html
    └── index.js
├── 4.3
    ├── first.css
    ├── second.html
    └── index.html
├── 6.5
    ├── index.js
    └── index.html
├── 3.1
    ├── index-no-markup.html
    └── index.html
├── 3.2
    └── index.html
└── 3.3
    └── index.html


/4.1/first.css:
--------------------------------------------------------------------------------
1 | body {
2 |     color: red;
3 | }


--------------------------------------------------------------------------------
/6.1/index.js:
--------------------------------------------------------------------------------
1 | document.body.style.backgroundColor = 'gray';


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/7.1/messages.json:
--------------------------------------------------------------------------------
1 | {
2 |     "morning": "Gmorning!",
3 |     "evening": "Gnight!"
4 | }


--------------------------------------------------------------------------------
/9.1/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | echo '<p>This is inside php</p>';
4 | 
5 | ?>
6 | 
7 | this is after php


--------------------------------------------------------------------------------
/9.4/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | echo '<p>This is inside php</p>';
4 | 
5 | ?>
6 | 
7 | this is after php


--------------------------------------------------------------------------------
/9.2/message.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | getMessage();
4 | 
5 | function getMessage() {
6 |     $message = 'This is inside getMessage()';
7 |     
8 |     echo $message;
9 | }


--------------------------------------------------------------------------------
/11.4/delete.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include('database.php');
 3 | include('gethelpers.php');
 4 | 
 5 | deletePost($id);
 6 | 
 7 | header("Location: http://localhost");
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/5.2/index.js:
--------------------------------------------------------------------------------
 1 | function sum(a, b) {
 2 |     return a + b;
 3 | }
 4 | 
 5 | function substract(a, b) {
 6 |     return a - b;
 7 | }
 8 | 
 9 | let three = sum(1, 2); // 3
10 | let seven = sum(5, 2);
11 | let one = substract(3, 2);
12 | 
13 | alert(one);


--------------------------------------------------------------------------------
/11.3/gethelpers.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $id = $_GET['id'];
 4 | 
 5 | $id = filter_var($id, FILTER_VALIDATE_INT);
 6 | 
 7 | if ($id == false || $id < 1) {
 8 |     die('Invalid input');
 9 | }
10 | 
11 | $post = getPost($id);
12 | 
13 | if ($post == null) {
14 |     die('Not Found.');
15 | }


--------------------------------------------------------------------------------
/11.4/gethelpers.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $id = $_GET['id'];
 4 | 
 5 | $id = filter_var($id, FILTER_VALIDATE_INT);
 6 | 
 7 | if ($id == false || $id < 1) {
 8 |     die('Invalid input');
 9 | }
10 | 
11 | $post = getPost($id);
12 | 
13 | if ($post == null) {
14 |     die('Not Found.');
15 | }


--------------------------------------------------------------------------------
/5.1/index.js:
--------------------------------------------------------------------------------
 1 | // let message; // variable declaration
 2 | 
 3 | // message = 'hello, world'; // an assignment statement
 4 | 
 5 | let message = 'hello, world'; // variable initialization
 6 | 
 7 | 
 8 | alert(message);
 9 | 
10 | message = 'hi, world';
11 | 
12 | alert(message);
13 | 
14 | 


--------------------------------------------------------------------------------
/5.1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>JavaScript</title>
 7 | </head>
 8 | <body>
 9 |     <script src="index.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/5.2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>JavaScript</title>
 7 | </head>
 8 | <body>
 9 |     <script src="index.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/5.3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>JavaScript</title>
 7 | </head>
 8 | <body>
 9 |     <script src="index.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/5.3/index.js:
--------------------------------------------------------------------------------
 1 | let jeremy = {
 2 |     firstName: 'Jeremy',
 3 |     lastName: 'McPeak',
 4 |     greet: function(person) {
 5 |         alert('Hello, ' + person.firstName);
 6 |     }
 7 | };
 8 | 
 9 | let john = {
10 |     firstName: 'John',
11 |     lastName: 'Doe'
12 | };
13 | 
14 | 
15 | jeremy.greet(john);


--------------------------------------------------------------------------------
/11.1/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include('database.php');
 3 | 
 4 | $posts = getPosts();
 5 | 
 6 | ?>
 7 | 
 8 | <html>
 9 |     <body>
10 |         <?php foreach ($posts as $post) {?>
11 |             <h2><?=$post->title ?></h2>
12 |             <p><?=$post->content ?></p>
13 |         <?php } ?>
14 |     </body>
15 | </html>


--------------------------------------------------------------------------------
/6.2/index.js:
--------------------------------------------------------------------------------
1 | let messageElement = document.getElementById('message');
2 | let spanElement = document.querySelector('#message span');
3 | let spanElements = document.querySelectorAll('#message span');
4 | 
5 | spanElements.style.color = 'blue';
6 | spanElement.style.color = 'blue';
7 | messageElement.style.backgroundColor = 'yellow';
8 | 


--------------------------------------------------------------------------------
/11.3/post.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include('database.php');
 3 | include('gethelpers.php');
 4 | 
 5 | 
 6 | 
 7 | ?>
 8 | 
 9 | <html>
10 |     <body>
11 |             <h2>
12 |               <?=$post->title ?> <a href="edit.php?id=<?=$id ?>">Edit Post</a>
13 |             </h2>
14 |             <p><?=$post->content ?></p>
15 |     </body>
16 | </html>


--------------------------------------------------------------------------------
/6.4/index.js:
--------------------------------------------------------------------------------
 1 | let messageElement = document.getElementById('message');
 2 | 
 3 | // messageElement.style.color =    'blue';
 4 | // messageElement.style.backgroundColor = 'yellow';
 5 | // messageElement.style.textDecoration = 'underline';
 6 | messageElement.classList.add('ugly-text','bold');
 7 | messageElement.classList.remove('bold');
 8 | 
 9 | 
10 | 
11 | 


--------------------------------------------------------------------------------
/9.4/message.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | function getMessage($timeOfDay) {
 4 |     if ($timeOfDay == 0) { // 0 = Morning
 5 |         $message = 'Good Morning';
 6 |     } else if ($timeOfDay == 1) { // 1 = Afternoon
 7 |         $message = 'Good Afternoon';
 8 |     } else  {
 9 |         $message = 'Good Evening';
10 |     }
11 |         
12 |     return $message;
13 | }


--------------------------------------------------------------------------------
/6.1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>JavaScript</title>
 7 | 
 8 | </head>
 9 | <body style="background-color: white">
10 |     <div id="message"></div>
11 | 
12 |     <script src="index.js"></script>
13 | 
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/9.3/message.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | getMessage(2);
 4 | 
 5 | function getMessage($timeOfDay) {
 6 |     if ($timeOfDay == 0) { // 0 = Morning
 7 |         $message = 'Good Morning';
 8 |     } else if ($timeOfDay == 1) { // 1 = Afternoon
 9 |         $message = 'Good Afternoon';
10 |     } else  {
11 |         $message = 'Good Evening';
12 |     }
13 |         
14 |     echo $message;
15 | }


--------------------------------------------------------------------------------
/11.2/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include('database.php');
 3 | 
 4 | $posts = getPosts();
 5 | 
 6 | ?>
 7 | 
 8 | <html>
 9 |     <body>
10 |         <?php foreach ($posts as $post) {?>
11 |             <h2>
12 |                 <a href="post.php?id=<?=$post->id ?>">
13 |                     <?=$post->title ?>
14 |                 </a>
15 |             </h2>
16 |             <p><?=$post->content ?></p>
17 |         <?php } ?>
18 |     </body>
19 | </html>


--------------------------------------------------------------------------------
/11.3/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include('database.php');
 3 | 
 4 | $posts = getPosts();
 5 | 
 6 | ?>
 7 | 
 8 | <html>
 9 |     <body>
10 |         <?php foreach ($posts as $post) {?>
11 |             <h2>
12 |                 <a href="post.php?id=<?=$post->id ?>">
13 |                     <?=$post->title ?>
14 |                 </a>
15 |             </h2>
16 |             <p><?=$post->content ?></p>
17 |         <?php } ?>
18 |     </body>
19 | </html>


--------------------------------------------------------------------------------
/11.4/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include('database.php');
 3 | 
 4 | $posts = getPosts();
 5 | 
 6 | ?>
 7 | 
 8 | <html>
 9 |     <body>
10 |         <?php foreach ($posts as $post) {?>
11 |             <h2>
12 |                 <a href="post.php?id=<?=$post->id ?>">
13 |                     <?=$post->title ?>
14 |                 </a>
15 |             </h2>
16 |             <p><?=$post->content ?></p>
17 |         <?php } ?>
18 |     </body>
19 | </html>


--------------------------------------------------------------------------------
/6.3/index.js:
--------------------------------------------------------------------------------
 1 | let messageElement = document.getElementById('message');
 2 | let firstSpan = document.querySelector('#message span');
 3 | let spanElements = document.querySelectorAll('#message span');
 4 | 
 5 | function setColorBlue(element) {
 6 |     element.style.color = 'blue';
 7 | }
 8 | // NodeList
 9 | spanElements.forEach(setColorBlue);
10 | 
11 | 
12 | firstSpan.style.fontWeight = 'bold';
13 | messageElement.style.backgroundColor = 'yellow';
14 | 


--------------------------------------------------------------------------------
/11.4/post.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include('database.php');
 3 | include('gethelpers.php');
 4 | 
 5 | //var_dump($post);
 6 | 
 7 | ?>
 8 | 
 9 | <html>
10 |     <body>
11 |             <h2>
12 |               <?=$post->title ?> <a href="edit.php?id=<?=$id ?>">Edit Post</a> <a href="delete.php?id=<?=$id ?>">Delete Post</a>
13 |             </h2>
14 |             <h4><?="$post->first_name $post->last_name" ?></h4>
15 |             <p><?=$post->content ?></p>
16 |     </body>
17 | </html>


--------------------------------------------------------------------------------
/11.1/database.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $host = 'localhost';
 4 | $username = 'root';
 5 | $password = 'root';
 6 | $dbname = 'blog';
 7 | 
 8 | function getPosts() {
 9 |     global $host, $username, $password, $dbname;
10 | 
11 |     $db = new mysqli($host, $username, $password, $dbname);
12 |     $records = array();
13 | 
14 |     $result = $db->query('SELECT * FROM posts');
15 | 
16 |     while ($row = $result->fetch_object()) {
17 |         $records[] = $row;
18 |     }
19 | 
20 |     return $records;
21 | }


--------------------------------------------------------------------------------
/9.4/markup.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <body>
 3 |         <h1>What time of day is it?</h1>
 4 |         
 5 |         <form name="theForm" action="" method="post">
 6 |             <select name="time-selection">
 7 |                 <option value="0">Morning</option>
 8 |                 <option value="1">Afternoon</option>
 9 |                 <option value="2">Evening</option>
10 |             </select>
11 |             <input type="submit" value="Submit" />
12 |         </form>
13 |     </body>
14 | </html>


--------------------------------------------------------------------------------
/11.2/post.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include('database.php');
 3 | 
 4 | $id = $_GET['id'];
 5 | 
 6 | $id = filter_var($id, FILTER_VALIDATE_INT);
 7 | 
 8 | if ($id == false || $id < 1) {
 9 |     die('Invalid input');
10 | }
11 | 
12 | $post = getPost($id);
13 | 
14 | if ($post == null) {
15 |     die('Not Found.');
16 | }
17 | 
18 | ?>
19 | 
20 | <html>
21 |     <body>
22 |             <h2>
23 |               <?=$post->title ?>
24 |             </h2>
25 |             <p><?=$post->content ?></p>
26 |     </body>
27 | </html>


--------------------------------------------------------------------------------
/4.2/first.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     /*font-size: 18px;
 3 |     font-family: "arial", "helvetica", sans-serif;*/
 4 |     
 5 |     font: 18px "arial", "helvetica", sans-serif;
 6 |     line-height: 32px;
 7 |     /*background-color: #000000;*/
 8 | }
 9 | 
10 | h1,
11 | h3 {
12 |     font-style: italic;
13 | }
14 | 
15 | #sidebar {
16 |     background-color: green;
17 | }
18 | 
19 | #main-content {
20 |     background-color: lightgray;
21 | }
22 | 
23 | span.error {
24 |     color: red;
25 | }
26 | 
27 | h3.error {
28 |     color: crimson;
29 | }
30 | 
31 | span {
32 |     color: purple;
33 | }


--------------------------------------------------------------------------------
/6.6/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>JavaScript</title>
 7 |     <style>
 8 |         #message {
 9 |             font-size: 26px;
10 |         }
11 |     </style>
12 | </head>
13 | <body style="background-color: rgb(218, 233, 233)">
14 |     <div id="message"></div>
15 | 
16 |     <button id="morning">Morning</button>
17 |     <button id="evening">Evening</button>
18 | 
19 |     <script src="index.js"></script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/7.1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>JavaScript</title>
 7 |     <style>
 8 |         #message {
 9 |             font-size: 26px;
10 |         }
11 |     </style>
12 | </head>
13 | <body style="background-color: rgb(218, 233, 233)">
14 |     <div id="message"></div>
15 | 
16 |     <button id="morning">Morning</button>
17 |     <button id="evening">Evening</button>
18 | 
19 |     <script src="index.js"></script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/6.2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>JavaScript</title>
 7 |     <style>
 8 |         #message {
 9 |             font-size: 26px;
10 |         }
11 |     </style>
12 | </head>
13 | <body style="background-color: rgb(218, 233, 233)">
14 |     <div id="message">
15 |         <span>This </span>
16 |         <span>is </span>
17 |         <span>a </span>
18 |         <span>message.</span>
19 |     </div>
20 | 
21 |     <script src="index.js"></script>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/6.3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>JavaScript</title>
 7 |     <style>
 8 |         #message {
 9 |             font-size: 26px;
10 |         }
11 |     </style>
12 | </head>
13 | <body style="background-color: rgb(218, 233, 233)">
14 |     <div id="message">
15 |         <span>This </span>
16 |         <span>is </span>
17 |         <span>a </span>
18 |         <span>message.</span>
19 |     </div>
20 | 
21 |     <script src="index.js"></script>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/4.3/first.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     /*font-size: 18px;
 3 |     font-family: "arial", "helvetica", sans-serif;*/
 4 |     
 5 |     font: 18px "arial", "helvetica", sans-serif;
 6 |     line-height: 32px;
 7 |     /*background-color: #000000;*/
 8 | }
 9 | 
10 | h1,
11 | h3 {
12 |     font-style: italic;
13 | }
14 | 
15 | #sidebar {
16 |     /*background-color: green;*/
17 |     float: left;
18 |     width: 25%;
19 | }
20 | 
21 | #main-content {
22 |     /*background-color: lightgray;*/
23 |     padding-left: 25%;
24 |     /*float: right;
25 |     width: 75%;*/
26 | }
27 | 
28 | span.error {
29 |     color: red;
30 | }
31 | 
32 | h3.error {
33 |     color: crimson;
34 | }
35 | 
36 | span {
37 |     color: purple;
38 | }


--------------------------------------------------------------------------------
/6.6/index.js:
--------------------------------------------------------------------------------
 1 | function _id(elementId) {
 2 |     return document.getElementById(elementId);
 3 | }
 4 | 
 5 | function setClick(elementId, callbackFn) {
 6 |     _id(elementId).addEventListener('click', callbackFn);
 7 | }
 8 | 
 9 | let app = {
10 |     messageElement: null,
11 |     setMessage: function(message) {
12 |         app.messageElement.innerHTML = message;
13 |     },
14 |     init: function() {
15 |         app.messageElement = _id('message');
16 | 
17 |         setClick('morning', function() {
18 |             app.setMessage('Gmorning!');
19 |         });
20 | 
21 |         setClick('evening', function() {
22 |             app.setMessage('Gnight!');
23 |         });
24 |     }
25 | };
26 | 
27 | 
28 | app.init();


--------------------------------------------------------------------------------
/9.4/gettime.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include('message.php');
 3 | 
 4 | if ($_SERVER['REQUEST_METHOD'] == 'POST') {
 5 |     $value = $_POST['time-selection'];
 6 |     $message = getMessage($value);
 7 | }
 8 | 
 9 | ?>
10 | <html>
11 |     <body>
12 |         <h1>What time of day is it?</h1>
13 |         
14 |         <form name="theForm" action="" method="post">
15 |             <select name="time-selection">
16 |                 <option value="0">Morning</option>
17 |                 <option value="1">Afternoon</option>
18 |                 <option value="2">Evening</option>
19 |             </select>
20 |             <input type="submit" value="Submit" />
21 |         </form>
22 |         <p><?=$message; ?></p>
23 |     </body>
24 | </html>


--------------------------------------------------------------------------------
/6.5/index.js:
--------------------------------------------------------------------------------
 1 | let messageElement = document.getElementById('message');
 2 | let spans = document.querySelectorAll('#message span');
 3 | 
 4 | function clickSpan(e) {
 5 |     let el = e.target;
 6 | 
 7 |     el.classList.toggle('ugly-text');
 8 | }
 9 | 
10 | spans.forEach(function(element) {
11 |     element.addEventListener('click', clickSpan);
12 | });
13 | 
14 | 
15 | // messageElement.style.color =    'blue';
16 | // messageElement.style.backgroundColor = 'yellow';
17 | // messageElement.style.textDecoration = 'underline';
18 | // messageElement.classList.add('ugly-text','bold');
19 | // messageElement.classList.remove('bold');
20 | 
21 | // function messageClick(){
22 | //     messageElement.classList.toggle('ugly-text');
23 | // }
24 | 
25 | // messageElement.addEventListener('click', messageClick);
26 | 
27 | 


--------------------------------------------------------------------------------
/11.2/database.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $host = 'localhost';
 4 | $username = 'root';
 5 | $password = 'root';
 6 | $dbname = 'blog';
 7 | 
 8 | function getDb() {
 9 |     global $host, $username, $password, $dbname;
10 | 
11 |     $db = new mysqli($host, $username, $password, $dbname);
12 | 
13 |     return $db;
14 | }
15 | 
16 | function getPosts() {
17 |     $db = getDb();
18 | 
19 |     $records = array();
20 | 
21 |     $result = $db->query('SELECT * FROM posts');
22 | 
23 |     while ($row = $result->fetch_object()) {
24 |         $records[] = $row;
25 |     }
26 | 
27 |     return $records;
28 | }
29 | 
30 | function getPost($id) {
31 |     $db = getDb();
32 |     
33 | 
34 |     $result = $db->query('SELECT * FROM posts WHERE id = ' . $id);
35 | 
36 |     $row = $result->fetch_object();
37 | 
38 |     return $row;
39 | }


--------------------------------------------------------------------------------
/11.3/database.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $host = 'localhost';
 4 | $username = 'root';
 5 | $password = 'root';
 6 | $dbname = 'blog';
 7 | 
 8 | function getDb() {
 9 |     global $host, $username, $password, $dbname;
10 | 
11 |     $db = new mysqli($host, $username, $password, $dbname);
12 | 
13 |     return $db;
14 | }
15 | 
16 | function getPosts() {
17 |     $db = getDb();
18 | 
19 |     $records = array();
20 | 
21 |     $result = $db->query('SELECT * FROM posts');
22 | 
23 |     while ($row = $result->fetch_object()) {
24 |         $records[] = $row;
25 |     }
26 | 
27 |     return $records;
28 | }
29 | 
30 | function getPost($id) {
31 |     $db = getDb();
32 |     
33 | 
34 |     $result = $db->query('SELECT * FROM posts WHERE id = ' . $id);
35 | 
36 |     $row = $result->fetch_object();
37 | 
38 |     return $row;
39 | }


--------------------------------------------------------------------------------
/6.4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>JavaScript</title>
 7 |     <style>
 8 |         #message {
 9 |             font-size: 26px;
10 |         }
11 | 
12 |         .ugly-text {
13 |             color: blue;
14 |             background-color: yellow;
15 |             text-decoration: underline;
16 |         }
17 | 
18 |         .bold {
19 |             font-weight: bold;
20 |         }
21 |     </style>
22 | </head>
23 | <body style="background-color: rgb(218, 233, 233)">
24 |     <div id="message">
25 |         <span>This </span>
26 |         <span>is </span>
27 |         <span>a </span>
28 |         <span>message.</span>
29 |     </div>
30 | 
31 |     <script src="index.js"></script>
32 | 
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/6.5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>JavaScript</title>
 7 |     <style>
 8 |         #message {
 9 |             font-size: 26px;
10 |         }
11 | 
12 |         .ugly-text {
13 |             color: blue;
14 |             background-color: yellow;
15 |             text-decoration: underline;
16 |         }
17 | 
18 |         .bold {
19 |             font-weight: bold;
20 |         }
21 |     </style>
22 | </head>
23 | <body style="background-color: rgb(218, 233, 233)">
24 |     <div id="message">
25 |         <span>This </span>
26 |         <span>is </span>
27 |         <span>a </span>
28 |         <span>message.</span>
29 |     </div>
30 | 
31 |     <script src="index.js"></script>
32 | 
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/7.1/index.js:
--------------------------------------------------------------------------------
 1 | function _id(elementId) {
 2 |     return document.getElementById(elementId);
 3 | }
 4 | 
 5 | function setClick(elementId, callbackFn) {
 6 |     _id(elementId).addEventListener('click', callbackFn);
 7 | }
 8 | 
 9 | function fetchJson(url) {
10 |     return fetch(url).then(function(res) {
11 |         return res.json();
12 |     });
13 | }
14 | 
15 | let app = {
16 |     messageElement: null,
17 |     setMessage: function(message) {
18 |         app.messageElement.innerHTML = message;
19 |     },
20 |     init: function() {
21 |         app.messageElement = _id('message');
22 | 
23 |         fetchJson('messages.json').then(function(obj) {
24 | 
25 |             setClick('morning', function() {
26 |                 app.setMessage(obj.morning);
27 |             });
28 | 
29 |             setClick('evening', function() {
30 |                 app.setMessage(obj.evening);
31 |             });
32 | 
33 |         });
34 |     }
35 | };
36 | 
37 | 
38 | app.init();


--------------------------------------------------------------------------------
/11.4/database.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $host = 'localhost';
 4 | $username = 'root';
 5 | $password = 'root';
 6 | $dbname = 'blog';
 7 | 
 8 | function getDb() {
 9 |     global $host, $username, $password, $dbname;
10 | 
11 |     $db = new mysqli($host, $username, $password, $dbname);
12 | 
13 |     return $db;
14 | }
15 | 
16 | function getPosts() {
17 |     $db = getDb();
18 | 
19 |     $records = array();
20 | 
21 |     $result = $db->query('SELECT * FROM posts');
22 | 
23 |     while ($row = $result->fetch_object()) {
24 |         $records[] = $row;
25 |     }
26 | 
27 |     return $records;
28 | }
29 | 
30 | function getPost($id) {
31 |     $db = getDb();
32 |     
33 |     $sql = 'SELECT posts.*, first_name, last_name FROM posts ' .
34 |            'INNER JOIN users ON posts.author_id = users.id ' .
35 |            "WHERE posts.id = $id";
36 | 
37 |     $result = $db->query($sql);
38 | 
39 |     $row = $result->fetch_object();
40 | 
41 |     return $row;
42 | }
43 | 
44 | function deletePost($id) {
45 |     $db = getDb();
46 | 
47 |     $db->query("DELETE FROM posts WHERE id = $id");
48 | }


--------------------------------------------------------------------------------
/11.3/edit.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include('database.php');
 3 | 
 4 | if (isset($_POST['edit-submit'])) {
 5 | 
 6 |     $postId = filter_var($_POST['post-id'], FILTER_VALIDATE_INT);
 7 |     
 8 |     if ($postId == false || $postId < 1) {
 9 |         die('Invalid input');
10 |     }
11 | 
12 |     $postTitle = strip_tags($_POST['post-title']);
13 |     $postContent = strip_tags($_POST['post-content']);
14 | 
15 |     $sql = "UPDATE posts SET title = ?, content = ? WHERE id = ?";
16 | 
17 |     $db = getDb();
18 | 
19 |     $smt = $db->prepare($sql);
20 |     $smt->bind_param('ssi', $postTitle, $postContent, $postId);
21 |     $smt->execute();
22 |     
23 |     header("Location: post.php?id=$postId");
24 | } else {
25 |     include('gethelpers.php');
26 | }
27 | 
28 | 
29 | ?>
30 | 
31 | <html>
32 |     <body>
33 |         <form action="edit.php" method="post">
34 |             <input type="hidden" name="post-id" value="<?=$post->id ?>" />
35 |             <div>
36 |                 <label for="post-title">Title:</label>
37 |                 <input type="text" name="post-title" value="<?=$post->title ?>" />
38 |             </div>
39 |             <div>
40 |                 <label for="post-content">Content:</label>
41 |                 <input type="text" name="post-content" value="<?=$post->content ?>" />
42 |             </div>
43 |             <div>
44 |                 <input type="submit" name="edit-submit" value="Edit Post" />
45 |             </div>
46 |         </form>
47 |     </body>
48 | </html>


--------------------------------------------------------------------------------
/11.4/edit.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include('database.php');
 3 | 
 4 | if (isset($_POST['edit-submit'])) {
 5 | 
 6 |     $postId = filter_var($_POST['post-id'], FILTER_VALIDATE_INT);
 7 |     
 8 |     if ($postId == false || $postId < 1) {
 9 |         die('Invalid input');
10 |     }
11 | 
12 |     $postTitle = strip_tags($_POST['post-title']);
13 |     $postContent = strip_tags($_POST['post-content']);
14 | 
15 |     $sql = "UPDATE posts SET title = ?, content = ? WHERE id = ?";
16 | 
17 |     $db = getDb();
18 | 
19 |     $smt = $db->prepare($sql);
20 |     $smt->bind_param('ssi', $postTitle, $postContent, $postId);
21 |     $smt->execute();
22 |     
23 |     header("Location: post.php?id=$postId");
24 | } else {
25 |     include('gethelpers.php');
26 | }
27 | 
28 | 
29 | ?>
30 | 
31 | <html>
32 |     <body>
33 |         <form action="edit.php" method="post">
34 |             <input type="hidden" name="post-id" value="<?=$post->id ?>" />
35 |             <div>
36 |                 <label for="post-title">Title:</label>
37 |                 <input type="text" name="post-title" value="<?=$post->title ?>" />
38 |             </div>
39 |             <div>
40 |                 <label for="post-content">Content:</label>
41 |                 <input type="text" name="post-content" value="<?=$post->content ?>" />
42 |             </div>
43 |             <div>
44 |                 <input type="submit" name="edit-submit" value="Edit Post" />
45 |             </div>
46 |         </form>
47 |     </body>
48 | </html>


--------------------------------------------------------------------------------
/3.1/index-no-markup.html:
--------------------------------------------------------------------------------
 1 | Introduction to Web Development
 2 | 
 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed orci vel nisi sodales pellentesque quis non dolor. Nulla sollicitudin ligula nec sem ultricies tempor. Ut vitae dapibus ante. Donec viverra porta quam quis ultrices. Curabitur vehicula, ligula nec aliquet pulvinar, lacus magna varius ipsum, in iaculis lectus odio ac urna.
 4 | 
 5 | What You Need
 6 | 
 7 | Fusce varius nec quam vel dapibus. Nullam a lacus quis mi mollis dictum. Sed ornare orci velit, quis tincidunt est porttitor ut. Nulla eget rutrum ante, non euismod libero. Proin et ipsum urna. Nullam molestie bibendum risus et eleifend. Nam sit amet egestas risus. Nunc congue dolor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
 8 | 
 9 | Mauris eu nisl lobortis, viverra leo eget, interdum dolor. Sed porta nunc ante, sed ullamcorper dolor tincidunt eu. Fusce id metus ullamcorper, vulputate lacus rutrum, maximus erat. Morbi quis auctor velit. Integer quis efficitur mauris, vitae iaculis nisi. Donec dignissim consectetur est, a tincidunt turpis. Pellentesque sit amet eleifend nisl. Nam odio sapien, congue non eros ut, aliquam efficitur nunc. Donec turpis magna, fringilla vel arcu non, mattis dapibus est. Aenean dignissim sem ac ante mollis volutpat. Ut erat quam, interdum nec scelerisque non, sagittis eget mauris. Morbi non cursus orci, a finibus turpis. Nullam varius ex ut convallis dapibus.
10 | 
11 | Tips to Achieve Greatness
12 | 
13 | Mauris sit amet tortor sagittis, pretium eros et, viverra ligula. Nunc ac nisl consectetur risus blandit hendrerit a id massa. Fusce ut ultricies ante. Mauris interdum ac erat dignissim sollicitudin. Praesent placerat ultricies purus sit amet gravida. Pellentesque convallis a neque sit amet sodales. Nam est eros, sagittis nec nisi a, feugiat luctus lorem. Fusce eleifend viverra facilisis. Aenean tempor imperdiet elit ut varius. Ut quis consectetur leo, eget bibendum neque. Nullam volutpat purus ligula, vitae condimentum ante vulputate sit amet. Praesent ornare magna sit amet egestas consectetur.
14 | 
15 | In ultrices dapibus dui, sed dapibus quam semper sed. Vivamus venenatis libero volutpat, maximus ante ut, porta dui. Duis vehicula ligula sit amet ipsum convallis cursus. Proin eget mauris et risus pulvinar porttitor ut in tellus. Nullam vel rutrum eros. Sed tincidunt orci urna, at imperdiet dui fringilla in. Nullam quis vulputate velit. Ut non nunc varius, interdum tellus et, convallis sapien. Integer non est volutpat urna faucibus accumsan nec vitae felis. Duis quam velit, fringilla id ultricies ac, consectetur non velit. Curabitur blandit, nulla in aliquam imperdiet, magna leo bibendum odio, at malesuada sapien arcu quis ipsum. Maecenas eleifend, urna sit amet consectetur dictum, lacus magna volutpat ipsum, ac mollis risus lacus porta nulla.
16 | 


--------------------------------------------------------------------------------
/3.1/index.html:
--------------------------------------------------------------------------------
 1 | <h1>Introduction to Web Development</h1> 
 2 | 
 3 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed orci vel nisi sodales pellentesque quis non dolor. Nulla sollicitudin ligula nec sem ultricies tempor. Ut vitae dapibus ante. Donec viverra porta quam quis ultrices. Curabitur vehicula, ligula nec aliquet pulvinar, lacus magna varius ipsum, in iaculis lectus odio ac urna.</p>
 4 | 
 5 | <h3>What You Need</h3>
 6 | 
 7 | <p>Fusce varius nec quam vel dapibus. Nullam a lacus quis mi mollis dictum. Sed ornare orci velit, quis tincidunt est porttitor ut. Nulla eget rutrum ante, non euismod libero. Proin et ipsum urna. Nullam molestie bibendum risus et eleifend. Nam sit amet egestas risus. Nunc congue dolor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
 8 | 
 9 | <p>Mauris eu nisl lobortis, viverra leo eget, interdum dolor. Sed porta nunc ante, sed ullamcorper dolor tincidunt eu. Fusce id metus ullamcorper, vulputate lacus rutrum, maximus erat. Morbi quis auctor velit. Integer quis efficitur mauris, vitae iaculis nisi. Donec dignissim consectetur est, a tincidunt turpis. Pellentesque sit amet eleifend nisl. Nam odio sapien, congue non eros ut, aliquam efficitur nunc. Donec turpis magna, fringilla vel arcu non, mattis dapibus est. Aenean dignissim sem ac ante mollis volutpat. Ut erat quam, interdum nec scelerisque non, sagittis eget mauris. Morbi non cursus orci, a finibus turpis. Nullam varius ex ut convallis dapibus.</p>
10 | 
11 | <h3>Tips to Achieve Greatness</h3>
12 | 
13 | <p>Mauris sit amet tortor sagittis, pretium eros et, viverra ligula. Nunc ac nisl consectetur risus blandit hendrerit a id massa. Fusce ut ultricies ante. Mauris interdum ac erat dignissim sollicitudin. Praesent placerat ultricies purus sit amet gravida. Pellentesque convallis a neque sit amet sodales. Nam est eros, sagittis nec nisi a, feugiat luctus lorem. Fusce eleifend viverra facilisis. Aenean tempor imperdiet elit ut varius. Ut quis consectetur leo, eget bibendum neque. Nullam volutpat purus ligula, vitae condimentum ante vulputate sit amet. Praesent ornare magna sit amet egestas consectetur.</p>
14 | 
15 | <p>In ultrices dapibus dui, sed dapibus quam semper sed. Vivamus venenatis libero volutpat, maximus ante ut, porta dui. Duis vehicula ligula sit amet ipsum convallis cursus. Proin eget mauris et risus pulvinar porttitor ut in tellus. Nullam vel rutrum eros. Sed tincidunt orci urna, at imperdiet dui fringilla in. Nullam quis vulputate velit. Ut non nunc varius, interdum tellus et, convallis sapien. Integer non est volutpat urna faucibus accumsan nec vitae felis. Duis quam velit, fringilla id ultricies ac, consectetur non velit. Curabitur blandit, nulla in aliquam imperdiet, magna leo bibendum odio, at malesuada sapien arcu quis ipsum. Maecenas eleifend, urna sit amet consectetur dictum, lacus magna volutpat ipsum, ac mollis risus lacus porta nulla.</p>
16 | 


--------------------------------------------------------------------------------
/3.2/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <title>Introduction to Web Development</title>
 6 |     </head>
 7 |     <body>
 8 |         <h1>Introduction to Web Development</h1> 
 9 | 
10 |         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed orci    vel nisi sodales pellentesque quis non dolor. Nulla sollicitudin ligula nec sem ultricies tempor. Ut vitae dapibus ante. Donec viverra porta quam quis ultrices. Curabitur vehicula, ligula nec aliquet pulvinar, lacus magna varius ipsum, in iaculis lectus odio ac urna.</p>
11 | 
12 |         <h3>What You Need</h3>
13 | 
14 |         <p>Fusce varius nec quam vel dapibus. Nullam a lacus quis mi mollis dictum. Sed ornare orci velit, quis tincidunt est porttitor ut. Nulla eget rutrum ante, non euismod libero. Proin et ipsum urna. Nullam molestie bibendum risus et eleifend. Nam sit amet egestas risus. Nunc congue dolor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
15 | 
16 |         <p>Mauris eu nisl lobortis, viverra leo eget, interdum dolor. Sed porta nunc ante, sed ullamcorper dolor tincidunt eu. Fusce id metus ullamcorper, vulputate lacus rutrum, maximus erat. Morbi quis auctor velit. Integer quis efficitur mauris, vitae iaculis nisi. Donec dignissim consectetur est, a tincidunt turpis. Pellentesque sit amet eleifend nisl. Nam odio sapien, congue non eros ut, aliquam efficitur nunc. Donec turpis magna, fringilla vel arcu non, mattis dapibus est. Aenean dignissim sem ac ante mollis volutpat. Ut erat quam, interdum nec scelerisque non, sagittis eget mauris. Morbi non cursus orci, a finibus turpis. Nullam varius ex ut convallis dapibus.</p>
17 | 
18 |         <h3>Tips to Achieve Greatness</h3>
19 | 
20 |         <p>Mauris sit amet tortor sagittis, pretium eros et, viverra ligula. Nunc ac nisl consectetur risus blandit hendrerit a id massa. Fusce ut ultricies ante. Mauris interdum ac erat dignissim sollicitudin. Praesent placerat ultricies purus sit amet gravida. Pellentesque convallis a neque sit amet sodales. Nam est eros, sagittis nec nisi a, feugiat luctus lorem. Fusce eleifend viverra facilisis. Aenean tempor imperdiet elit ut varius. Ut quis consectetur leo, eget bibendum neque. Nullam volutpat purus ligula, vitae condimentum ante vulputate sit amet. Praesent ornare magna sit amet egestas consectetur.</p>
21 | 
22 |         <p>In ultrices dapibus dui, sed dapibus quam semper sed. Vivamus venenatis libero volutpat, maximus ante ut, porta dui. Duis vehicula ligula sit amet ipsum convallis cursus. Proin eget mauris et risus pulvinar porttitor ut in tellus. Nullam vel rutrum eros. Sed tincidunt orci urna, at imperdiet dui fringilla in. Nullam quis vulputate velit. Ut non nunc varius, interdum tellus et, convallis sapien. Integer non est volutpat urna faucibus accumsan nec vitae felis. Duis quam velit, fringilla id ultricies ac, consectetur non velit. Curabitur blandit, nulla in aliquam imperdiet, magna leo bibendum odio, at malesuada sapien arcu quis ipsum. Maecenas eleifend, urna sit amet consectetur dictum, lacus magna volutpat ipsum, ac mollis risus lacus porta nulla.</p>
23 | 
24 |     </body>
25 | </html>
26 | 
27 | 


--------------------------------------------------------------------------------
/3.3/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <title>Introduction to Web Development</title>
 6 |     </head>
 7 |     <body>
 8 |         <div id="sidebar">
 9 |             <ul>
10 |                 <li>Home</li>
11 |                 <li>Article</li>
12 |             </ul>
13 |         </div>
14 |         <div id="main-content">
15 |             <h1>Introduction to Web Development</h1>
16 |         <p>Lorem <span>ipsum</span> dolor sit amet, consectetur adipiscing elit. Quisque sed orci    vel nisi sodales pellentesque quis non dolor. Nulla sollicitudin ligula nec sem ultricies tempor. Ut vitae dapibus ante. Donec viverra porta quam quis ultrices. Curabitur vehicula, ligula nec aliquet pulvinar, lacus magna varius ipsum, in iaculis lectus odio ac urna.</p>
17 | 
18 |         <h3>What You Need</h3>
19 | 
20 |         <p>Fusce varius nec quam vel dapibus. Nullam a lacus quis mi mollis dictum. Sed ornare orci velit, quis tincidunt est porttitor ut. Nulla eget rutrum ante, non euismod libero. Proin et ipsum urna. Nullam molestie bibendum risus et eleifend. Nam sit amet egestas risus. Nunc congue dolor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
21 | 
22 |         <p>Mauris eu nisl lobortis, viverra leo eget, interdum dolor. Sed porta nunc ante, sed ullamcorper dolor tincidunt eu. Fusce id metus ullamcorper, vulputate lacus rutrum, maximus erat. Morbi quis auctor velit. Integer quis efficitur mauris, vitae iaculis nisi. Donec dignissim consectetur est, a tincidunt turpis. Pellentesque sit amet eleifend nisl. Nam odio sapien, congue non eros ut, aliquam efficitur nunc. Donec turpis magna, fringilla vel arcu non, mattis dapibus est. Aenean dignissim sem ac ante mollis volutpat. Ut erat quam, interdum nec scelerisque non, sagittis eget mauris. Morbi non cursus orci, a finibus turpis. Nullam varius ex ut convallis dapibus.</p>
23 | 
24 |         <h3>Tips to Achieve Greatness</h3>
25 | 
26 |         <p>Mauris sit amet tortor sagittis, pretium eros et, viverra ligula. Nunc ac nisl consectetur risus blandit hendrerit a id massa. Fusce ut ultricies ante. Mauris interdum ac erat dignissim sollicitudin. Praesent placerat ultricies purus sit amet gravida. Pellentesque convallis a neque sit amet sodales. Nam est eros, sagittis nec nisi a, feugiat luctus lorem. Fusce eleifend viverra facilisis. Aenean tempor imperdiet elit ut varius. Ut quis consectetur leo, eget bibendum neque. Nullam volutpat purus ligula, vitae condimentum ante vulputate sit amet. Praesent ornare magna sit amet egestas consectetur.</p>
27 | 
28 |         <p>In ultrices dapibus dui, sed dapibus quam semper sed. Vivamus venenatis libero volutpat, maximus ante ut, porta dui. Duis vehicula ligula sit amet ipsum convallis cursus. Proin eget mauris et risus pulvinar porttitor ut in tellus. Nullam vel rutrum eros. Sed tincidunt orci urna, at imperdiet dui fringilla in. Nullam quis vulputate velit. Ut non nunc varius, interdum tellus et, convallis sapien. Integer non est volutpat urna faucibus accumsan nec vitae felis. Duis quam velit, fringilla id ultricies ac, consectetur non velit. Curabitur blandit, nulla in aliquam imperdiet, magna leo bibendum odio, at malesuada sapien arcu quis ipsum. Maecenas eleifend, urna sit amet consectetur dictum, lacus magna volutpat ipsum, ac mollis risus lacus porta nulla.</p>
29 |         
30 |         </div>
31 |         
32 | 
33 |     </body>
34 | </html>
35 | 
36 | 


--------------------------------------------------------------------------------
/4.1/second.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <title>Second Page</title>
 6 |         <link rel="stylesheet" type="text/css" href="first.css" />
 7 |     </head>
 8 |     <body>
 9 |         <div id="sidebar">
10 |             <ul>
11 |                 <li>Home</li>
12 |                 <li>Article</li>
13 |             </ul>
14 |         </div>
15 |         <div id="main-content">
16 |             <h1>Second Page</h1>
17 |         <p>Lorem <span>ipsum</span> dolor sit amet, consectetur adipiscing elit. Quisque sed orci    vel nisi sodales pellentesque quis non dolor. Nulla sollicitudin ligula nec sem ultricies tempor. Ut vitae dapibus ante. Donec viverra porta quam quis ultrices. Curabitur vehicula, ligula nec aliquet pulvinar, lacus magna varius ipsum, in iaculis lectus odio ac urna.</p>
18 | 
19 |         <h3>What You Need</h3>
20 | 
21 |         <p>Fusce varius nec quam vel dapibus. Nullam a lacus quis mi mollis dictum. Sed ornare orci velit, quis tincidunt est porttitor ut. Nulla eget rutrum ante, non euismod libero. Proin et ipsum urna. Nullam molestie bibendum risus et eleifend. Nam sit amet egestas risus. Nunc congue dolor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
22 | 
23 |         <p>Mauris eu nisl lobortis, viverra leo eget, interdum dolor. Sed porta nunc ante, sed ullamcorper dolor tincidunt eu. Fusce id metus ullamcorper, vulputate lacus rutrum, maximus erat. Morbi quis auctor velit. Integer quis efficitur mauris, vitae iaculis nisi. Donec dignissim consectetur est, a tincidunt turpis. Pellentesque sit amet eleifend nisl. Nam odio sapien, congue non eros ut, aliquam efficitur nunc. Donec turpis magna, fringilla vel arcu non, mattis dapibus est. Aenean dignissim sem ac ante mollis volutpat. Ut erat quam, interdum nec scelerisque non, sagittis eget mauris. Morbi non cursus orci, a finibus turpis. Nullam varius ex ut convallis dapibus.</p>
24 | 
25 |         <h3>Tips to Achieve Greatness</h3>
26 | 
27 |         <p>Mauris sit amet tortor sagittis, pretium eros et, viverra ligula. Nunc ac nisl consectetur risus blandit hendrerit a id massa. Fusce ut ultricies ante. Mauris interdum ac erat dignissim sollicitudin. Praesent placerat ultricies purus sit amet gravida. Pellentesque convallis a neque sit amet sodales. Nam est eros, sagittis nec nisi a, feugiat luctus lorem. Fusce eleifend viverra facilisis. Aenean tempor imperdiet elit ut varius. Ut quis consectetur leo, eget bibendum neque. Nullam volutpat purus ligula, vitae condimentum ante vulputate sit amet. Praesent ornare magna sit amet egestas consectetur.</p>
28 | 
29 |         <p>In ultrices dapibus dui, sed dapibus quam semper sed. Vivamus venenatis libero volutpat, maximus ante ut, porta dui. Duis vehicula ligula sit amet ipsum convallis cursus. Proin eget mauris et risus pulvinar porttitor ut in tellus. Nullam vel rutrum eros. Sed tincidunt orci urna, at imperdiet dui fringilla in. Nullam quis vulputate velit. Ut non nunc varius, interdum tellus et, convallis sapien. Integer non est volutpat urna faucibus accumsan nec vitae felis. Duis quam velit, fringilla id ultricies ac, consectetur non velit. Curabitur blandit, nulla in aliquam imperdiet, magna leo bibendum odio, at malesuada sapien arcu quis ipsum. Maecenas eleifend, urna sit amet consectetur dictum, lacus magna volutpat ipsum, ac mollis risus lacus porta nulla.</p>
30 |         
31 |         </div>
32 |         
33 | 
34 |     </body>
35 | </html>
36 | 
37 | 


--------------------------------------------------------------------------------
/4.2/second.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <title>Second Page</title>
 6 |         <link rel="stylesheet" type="text/css" href="first.css" />
 7 |     </head>
 8 |     <body>
 9 |         <div id="sidebar">
10 |             <ul>
11 |                 <li>Home</li>
12 |                 <li>Article</li>
13 |             </ul>
14 |         </div>
15 |         <div id="main-content">
16 |             <h1>Second Page</h1>
17 |         <p>Lorem <span>ipsum</span> dolor sit amet, consectetur adipiscing elit. Quisque sed orci    vel nisi sodales pellentesque quis non dolor. Nulla sollicitudin ligula nec sem ultricies tempor. Ut vitae dapibus ante. Donec viverra porta quam quis ultrices. Curabitur vehicula, ligula nec aliquet pulvinar, lacus magna varius ipsum, in iaculis lectus odio ac urna.</p>
18 | 
19 |         <h3>What You Need</h3>
20 | 
21 |         <p>Fusce varius nec quam vel dapibus. Nullam a lacus quis mi mollis dictum. Sed ornare orci velit, quis tincidunt est porttitor ut. Nulla eget rutrum ante, non euismod libero. Proin et ipsum urna. Nullam molestie bibendum risus et eleifend. Nam sit amet egestas risus. Nunc congue dolor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
22 | 
23 |         <p>Mauris eu nisl lobortis, viverra leo eget, interdum dolor. Sed porta nunc ante, sed ullamcorper dolor tincidunt eu. Fusce id metus ullamcorper, vulputate lacus rutrum, maximus erat. Morbi quis auctor velit. Integer quis efficitur mauris, vitae iaculis nisi. Donec dignissim consectetur est, a tincidunt turpis. Pellentesque sit amet eleifend nisl. Nam odio sapien, congue non eros ut, aliquam efficitur nunc. Donec turpis magna, fringilla vel arcu non, mattis dapibus est. Aenean dignissim sem ac ante mollis volutpat. Ut erat quam, interdum nec scelerisque non, sagittis eget mauris. Morbi non cursus orci, a finibus turpis. Nullam varius ex ut convallis dapibus.</p>
24 | 
25 |         <h3>Tips to Achieve Greatness</h3>
26 | 
27 |         <p>Mauris sit amet tortor sagittis, pretium eros et, viverra ligula. Nunc ac nisl consectetur risus blandit hendrerit a id massa. Fusce ut ultricies ante. Mauris interdum ac erat dignissim sollicitudin. Praesent placerat ultricies purus sit amet gravida. Pellentesque convallis a neque sit amet sodales. Nam est eros, sagittis nec nisi a, feugiat luctus lorem. Fusce eleifend viverra facilisis. Aenean tempor imperdiet elit ut varius. Ut quis consectetur leo, eget bibendum neque. Nullam volutpat purus ligula, vitae condimentum ante vulputate sit amet. Praesent ornare magna sit amet egestas consectetur.</p>
28 | 
29 |         <p>In ultrices dapibus dui, sed dapibus quam semper sed. Vivamus venenatis libero volutpat, maximus ante ut, porta dui. Duis vehicula ligula sit amet ipsum convallis cursus. Proin eget mauris et risus pulvinar porttitor ut in tellus. Nullam vel rutrum eros. Sed tincidunt orci urna, at imperdiet dui fringilla in. Nullam quis vulputate velit. Ut non nunc varius, interdum tellus et, convallis sapien. Integer non est volutpat urna faucibus accumsan nec vitae felis. Duis quam velit, fringilla id ultricies ac, consectetur non velit. Curabitur blandit, nulla in aliquam imperdiet, magna leo bibendum odio, at malesuada sapien arcu quis ipsum. Maecenas eleifend, urna sit amet consectetur dictum, lacus magna volutpat ipsum, ac mollis risus lacus porta nulla.</p>
30 |         
31 |         </div>
32 |         
33 | 
34 |     </body>
35 | </html>
36 | 
37 | 


--------------------------------------------------------------------------------
/4.3/second.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <title>Second Page</title>
 6 |         <link rel="stylesheet" type="text/css" href="first.css" />
 7 |     </head>
 8 |     <body>
 9 |         <div id="sidebar">
10 |             <ul>
11 |                 <li>Home</li>
12 |                 <li>Article</li>
13 |             </ul>
14 |         </div>
15 |         <div id="main-content">
16 |             <h1>Second Page</h1>
17 |         <p>Lorem <span>ipsum</span> dolor sit amet, consectetur adipiscing elit. Quisque sed orci    vel nisi sodales pellentesque quis non dolor. Nulla sollicitudin ligula nec sem ultricies tempor. Ut vitae dapibus ante. Donec viverra porta quam quis ultrices. Curabitur vehicula, ligula nec aliquet pulvinar, lacus magna varius ipsum, in iaculis lectus odio ac urna.</p>
18 | 
19 |         <h3>What You Need</h3>
20 | 
21 |         <p>Fusce varius nec quam vel dapibus. Nullam a lacus quis mi mollis dictum. Sed ornare orci velit, quis tincidunt est porttitor ut. Nulla eget rutrum ante, non euismod libero. Proin et ipsum urna. Nullam molestie bibendum risus et eleifend. Nam sit amet egestas risus. Nunc congue dolor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
22 | 
23 |         <p>Mauris eu nisl lobortis, viverra leo eget, interdum dolor. Sed porta nunc ante, sed ullamcorper dolor tincidunt eu. Fusce id metus ullamcorper, vulputate lacus rutrum, maximus erat. Morbi quis auctor velit. Integer quis efficitur mauris, vitae iaculis nisi. Donec dignissim consectetur est, a tincidunt turpis. Pellentesque sit amet eleifend nisl. Nam odio sapien, congue non eros ut, aliquam efficitur nunc. Donec turpis magna, fringilla vel arcu non, mattis dapibus est. Aenean dignissim sem ac ante mollis volutpat. Ut erat quam, interdum nec scelerisque non, sagittis eget mauris. Morbi non cursus orci, a finibus turpis. Nullam varius ex ut convallis dapibus.</p>
24 | 
25 |         <h3>Tips to Achieve Greatness</h3>
26 | 
27 |         <p>Mauris sit amet tortor sagittis, pretium eros et, viverra ligula. Nunc ac nisl consectetur risus blandit hendrerit a id massa. Fusce ut ultricies ante. Mauris interdum ac erat dignissim sollicitudin. Praesent placerat ultricies purus sit amet gravida. Pellentesque convallis a neque sit amet sodales. Nam est eros, sagittis nec nisi a, feugiat luctus lorem. Fusce eleifend viverra facilisis. Aenean tempor imperdiet elit ut varius. Ut quis consectetur leo, eget bibendum neque. Nullam volutpat purus ligula, vitae condimentum ante vulputate sit amet. Praesent ornare magna sit amet egestas consectetur.</p>
28 | 
29 |         <p>In ultrices dapibus dui, sed dapibus quam semper sed. Vivamus venenatis libero volutpat, maximus ante ut, porta dui. Duis vehicula ligula sit amet ipsum convallis cursus. Proin eget mauris et risus pulvinar porttitor ut in tellus. Nullam vel rutrum eros. Sed tincidunt orci urna, at imperdiet dui fringilla in. Nullam quis vulputate velit. Ut non nunc varius, interdum tellus et, convallis sapien. Integer non est volutpat urna faucibus accumsan nec vitae felis. Duis quam velit, fringilla id ultricies ac, consectetur non velit. Curabitur blandit, nulla in aliquam imperdiet, magna leo bibendum odio, at malesuada sapien arcu quis ipsum. Maecenas eleifend, urna sit amet consectetur dictum, lacus magna volutpat ipsum, ac mollis risus lacus porta nulla.</p>
30 |         
31 |         </div>
32 |         
33 | 
34 |     </body>
35 | </html>
36 | 
37 | 


--------------------------------------------------------------------------------
/4.1/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <title>Introduction to Web Development</title>
 6 |         <link rel="stylesheet" type="text/css" href="first.css" />
 7 |     </head>
 8 |     <body>
 9 |         <div id="sidebar">
10 |             <ul>
11 |                 <li>Home</li>
12 |                 <li>Article</li>
13 |             </ul>
14 |         </div>
15 |         <div id="main-content">
16 |             <h1>Introduction to Web Development</h1>
17 |         <p>Lorem <span>ipsum</span> dolor sit amet, consectetur adipiscing elit. Quisque sed orci    vel nisi sodales pellentesque quis non dolor. Nulla sollicitudin ligula nec sem ultricies tempor. Ut vitae dapibus ante. Donec viverra porta quam quis ultrices. Curabitur vehicula, ligula nec aliquet pulvinar, lacus magna varius ipsum, in iaculis lectus odio ac urna.</p>
18 | 
19 |         <h3>What You Need</h3>
20 | 
21 |         <p>Fusce varius nec quam vel dapibus. Nullam a lacus quis mi mollis dictum. Sed ornare orci velit, quis tincidunt est porttitor ut. Nulla eget rutrum ante, non euismod libero. Proin et ipsum urna. Nullam molestie bibendum risus et eleifend. Nam sit amet egestas risus. Nunc congue dolor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
22 | 
23 |         <p>Mauris eu nisl lobortis, viverra leo eget, interdum dolor. Sed porta nunc ante, sed ullamcorper dolor tincidunt eu. Fusce id metus ullamcorper, vulputate lacus rutrum, maximus erat. Morbi quis auctor velit. Integer quis efficitur mauris, vitae iaculis nisi. Donec dignissim consectetur est, a tincidunt turpis. Pellentesque sit amet eleifend nisl. Nam odio sapien, congue non eros ut, aliquam efficitur nunc. Donec turpis magna, fringilla vel arcu non, mattis dapibus est. Aenean dignissim sem ac ante mollis volutpat. Ut erat quam, interdum nec scelerisque non, sagittis eget mauris. Morbi non cursus orci, a finibus turpis. Nullam varius ex ut convallis dapibus.</p>
24 | 
25 |         <h3>Tips to Achieve Greatness</h3>
26 | 
27 |         <p>Mauris sit amet tortor sagittis, pretium eros et, viverra ligula. Nunc ac nisl consectetur risus blandit hendrerit a id massa. Fusce ut ultricies ante. Mauris interdum ac erat dignissim sollicitudin. Praesent placerat ultricies purus sit amet gravida. Pellentesque convallis a neque sit amet sodales. Nam est eros, sagittis nec nisi a, feugiat luctus lorem. Fusce eleifend viverra facilisis. Aenean tempor imperdiet elit ut varius. Ut quis consectetur leo, eget bibendum neque. Nullam volutpat purus ligula, vitae condimentum ante vulputate sit amet. Praesent ornare magna sit amet egestas consectetur.</p>
28 | 
29 |         <p>In ultrices dapibus dui, sed dapibus quam semper sed. Vivamus venenatis libero volutpat, maximus ante ut, porta dui. Duis vehicula ligula sit amet ipsum convallis cursus. Proin eget mauris et risus pulvinar porttitor ut in tellus. Nullam vel rutrum eros. Sed tincidunt orci urna, at imperdiet dui fringilla in. Nullam quis vulputate velit. Ut non nunc varius, interdum tellus et, convallis sapien. Integer non est volutpat urna faucibus accumsan nec vitae felis. Duis quam velit, fringilla id ultricies ac, consectetur non velit. Curabitur blandit, nulla in aliquam imperdiet, magna leo bibendum odio, at malesuada sapien arcu quis ipsum. Maecenas eleifend, urna sit amet consectetur dictum, lacus magna volutpat ipsum, ac mollis risus lacus porta nulla.</p>
30 |         
31 |         </div>
32 |         
33 | 
34 |     </body>
35 | </html>
36 | 
37 | 


--------------------------------------------------------------------------------
/4.2/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <title>Introduction to Web Development</title>
 6 |         <link rel="stylesheet" type="text/css" href="first.css" />
 7 |     </head>
 8 |     <body>
 9 |         <div id="sidebar">
10 |             <ul>
11 |                 <li>Home</li>
12 |                 <li>Article</li>
13 |             </ul>
14 |         </div>
15 |         <div id="main-content">
16 |             <h1>Introduction to Web Development</h1>
17 |         <p>Lorem <span class="error">ipsum</span> dolor sit amet, consectetur adipiscing elit. Quisque sed orci    vel nisi sodales pellentesque quis non dolor. Nulla sollicitudin ligula nec sem ultricies tempor. Ut vitae dapibus ante. Donec viverra porta quam quis ultrices. Curabitur vehicula, ligula nec aliquet pulvinar, lacus magna varius ipsum, in iaculis lectus odio ac urna.</p>
18 | 
19 |         <h3 class="error">What You Need</h3>
20 | 
21 |         <p>Fusce varius nec quam vel dapibus. Nullam a lacus quis mi mollis dictum. Sed ornare orci velit, quis tincidunt <span>est porttitor ut</span>. Nulla eget rutrum ante, non euismod libero. Proin et ipsum urna. Nullam molestie bibendum risus et eleifend. Nam sit amet egestas risus. Nunc congue dolor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
22 | 
23 |         <p>Mauris eu nisl lobortis, viverra leo eget, interdum dolor. Sed porta nunc ante, sed ullamcorper dolor tincidunt eu. Fusce id metus ullamcorper, vulputate lacus rutrum, maximus erat. Morbi <span class="error">quis auctor velit</span>. Integer quis efficitur mauris, vitae iaculis nisi. Donec dignissim consectetur est, a tincidunt turpis. Pellentesque sit amet eleifend nisl. Nam odio sapien, congue non eros ut, aliquam efficitur nunc. Donec turpis magna, fringilla vel arcu non, mattis dapibus est. Aenean dignissim sem ac ante mollis volutpat. Ut erat quam, interdum nec scelerisque non, sagittis eget mauris. Morbi non cursus orci, a finibus turpis. Nullam varius ex ut convallis dapibus.</p>
24 | 
25 |         <h3>Tips to Achieve Greatness</h3>
26 | 
27 |         <p>Mauris sit amet tortor sagittis, pretium eros et, viverra ligula. Nunc ac nisl consectetur risus blandit hendrerit a id massa. Fusce ut ultricies ante. Mauris interdum ac erat dignissim sollicitudin. Praesent placerat ultricies purus sit amet gravida. Pellentesque convallis a neque sit amet sodales. Nam est eros, sagittis nec nisi a, feugiat luctus lorem. Fusce eleifend viverra facilisis. Aenean tempor imperdiet elit ut varius. Ut quis consectetur leo, eget bibendum neque. Nullam volutpat purus ligula, vitae condimentum ante vulputate sit amet. Praesent ornare magna sit amet egestas consectetur.</p>
28 | 
29 |         <p>In ultrices dapibus dui, sed dapibus quam semper sed. Vivamus venenatis libero volutpat, maximus ante ut, porta dui. Duis vehicula ligula sit amet ipsum convallis cursus. Proin eget mauris et risus pulvinar porttitor ut in tellus. Nullam vel rutrum eros. Sed tincidunt orci urna, at imperdiet dui fringilla in. Nullam quis vulputate velit. Ut non nunc varius, interdum tellus et, convallis sapien. Integer non est volutpat urna faucibus accumsan nec vitae felis. Duis quam velit, fringilla id ultricies ac, consectetur non velit. Curabitur blandit, nulla in aliquam imperdiet, magna leo bibendum odio, at malesuada sapien arcu quis ipsum. Maecenas eleifend, urna sit amet consectetur dictum, lacus magna volutpat ipsum, ac mollis risus lacus porta nulla.</p>
30 |         
31 |         </div>
32 |         
33 | 
34 |     </body>
35 | </html>
36 | 
37 | 


--------------------------------------------------------------------------------
/4.3/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <title>Introduction to Web Development</title>
 6 |         <link rel="stylesheet" type="text/css" href="first.css" />
 7 |     </head>
 8 |     <body>
 9 |         <div id="sidebar">
10 |             <ul>
11 |                 <li><a href="index.html">Home</a></li>
12 |                 <li><a href="second.html">Article</a></li>
13 |             </ul>
14 |         </div>
15 |         <div id="main-content">
16 |             <h1>Introduction to Web Development</h1>
17 |         <p>Lorem <span class="error">ipsum</span> dolor sit amet, consectetur adipiscing elit. Quisque sed orci    vel nisi sodales pellentesque quis non dolor. Nulla sollicitudin ligula nec sem ultricies tempor. Ut vitae dapibus ante. Donec viverra porta quam quis ultrices. Curabitur vehicula, ligula nec aliquet pulvinar, lacus magna varius ipsum, in iaculis lectus odio ac urna.</p>
18 | 
19 |         <h3 class="error">What You Need</h3>
20 | 
21 |         <p>Fusce varius nec quam vel dapibus. Nullam a lacus quis mi mollis dictum. Sed ornare orci velit, quis tincidunt <span>est porttitor ut</span>. Nulla eget rutrum ante, non euismod libero. Proin et ipsum urna. Nullam molestie bibendum risus et eleifend. Nam sit amet egestas risus. Nunc congue dolor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
22 | 
23 |         <p>Mauris eu nisl lobortis, viverra leo eget, interdum dolor. Sed porta nunc ante, sed ullamcorper dolor tincidunt eu. Fusce id metus ullamcorper, vulputate lacus rutrum, maximus erat. Morbi <span class="error">quis auctor velit</span>. Integer quis efficitur mauris, vitae iaculis nisi. Donec dignissim consectetur est, a tincidunt turpis. Pellentesque sit amet eleifend nisl. Nam odio sapien, congue non eros ut, aliquam efficitur nunc. Donec turpis magna, fringilla vel arcu non, mattis dapibus est. Aenean dignissim sem ac ante mollis volutpat. Ut erat quam, interdum nec scelerisque non, sagittis eget mauris. Morbi non cursus orci, a finibus turpis. Nullam varius ex ut convallis dapibus.</p>
24 | 
25 |         <h3>Tips to Achieve Greatness</h3>
26 | 
27 |         <p>Mauris sit amet tortor sagittis, pretium eros et, viverra ligula. Nunc ac nisl consectetur risus blandit hendrerit a id massa. Fusce ut ultricies ante. Mauris interdum ac erat dignissim sollicitudin. Praesent placerat ultricies purus sit amet gravida. Pellentesque convallis a neque sit amet sodales. Nam est eros, sagittis nec nisi a, feugiat luctus lorem. Fusce eleifend viverra facilisis. Aenean tempor imperdiet elit ut varius. Ut quis consectetur leo, eget bibendum neque. Nullam volutpat purus ligula, vitae condimentum ante vulputate sit amet. Praesent ornare magna sit amet egestas consectetur.</p>
28 | 
29 |         <p>In ultrices dapibus dui, sed dapibus quam semper sed. Vivamus venenatis libero volutpat, maximus ante ut, porta dui. Duis vehicula ligula sit amet ipsum convallis cursus. Proin eget mauris et risus pulvinar porttitor ut in tellus. Nullam vel rutrum eros. Sed tincidunt orci urna, at imperdiet dui fringilla in. Nullam quis vulputate velit. Ut non nunc varius, interdum tellus et, convallis sapien. Integer non est volutpat urna faucibus accumsan nec vitae felis. Duis quam velit, fringilla id ultricies ac, consectetur non velit. Curabitur blandit, nulla in aliquam imperdiet, magna leo bibendum odio, at malesuada sapien arcu quis ipsum. Maecenas eleifend, urna sit amet consectetur dictum, lacus magna volutpat ipsum, ac mollis risus lacus porta nulla.</p>
30 |         
31 |         </div>
32 |         
33 | 
34 |     </body>
35 | </html>
36 | 
37 | 


--------------------------------------------------------------------------------