elements with text content.
+
+Extra: make the columns stack on small browser windows
+
+
+
+# Bootstrap: spacing
+
+One particularly useful feature of Bootstrap is readily provided CSS classes for spacing!
+
+For example, to add padding around an element, we can just give it a p-x class, where x is a number from 1 to 5 depending on how much padding we want.
+
+[https://getbootstrap.com/docs/5.3/utilities/spacing/](https://getbootstrap.com/docs/5.3/utilities/spacing/)
+
+# Bootstrap input form
+
+Bootstrap includes styled input forms and buttons that look much better than the default ones.
+
+
+
+Code for the form in the previous slide
+
+
+
+
+
+Email address
+
+
+
+
+
+
+
+Password
+
+
+
+
+
+
Submit
+
+
Reset form
+
+
+
+# Styling forms
+
+Input field size, button size, button color etc. can be changed just by adding classes to the element. For example:
+
+
Primary button
+
+
Danger button
+
+
Small warning button
+
+
Large success button
+
+
+
+# Exercise 2: Input form
+
+
+
+Create the form from earlier
+
+Add a checkbox
+
+Add radio buttons
+
+Make the input fields LARGE
+
+Change the colors of the buttons and make them full width and stacked on top of each other
+
+Use spacing classes like mb-2, pb-2 etc. to space the elements to your liking
+
+# Bootstrap: advanced
+
+Bootstrap also offers many additional useful features
+
+Standardized color classes
+
+__R__ __esponsive __ CSS classes to make the web site usable on both smaller and larger screens
+
+Classes for setting element alignment (vertical-align)
+
+Styles for various different elements, like buttons, forms and lists
+
+
+
+# Bootstrap: conclusion
+
+Bootstrap provides a CSS layout system and a lot of ready-made CSS classes
+
+Helps you to create appealing web pages quickly, without needing to write a lot of boilerplate CSS code
+
+Look up Bootstrap's documentation if you're wondering whether it could save time in, e.g., styling your button or table
+
+[https://getbootstrap.com/docs/5.3/getting-started/introduction/](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
+
+# Assignments
+
+[Assignments about this topic can be found here](https://gitea.buutti.com/education/academy-assignments/src/branch/master/Front-end%20Basics/3.%20Bootstrap)
+
diff --git a/4-js-in-html-and-dom.md b/4-js-in-html-and-dom.md
new file mode 100644
index 0000000..2afbdc9
--- /dev/null
+++ b/4-js-in-html-and-dom.md
@@ -0,0 +1,503 @@
+# JS in HTML & DOM
+
+# Linking JS to HTML
+
+# Motivation
+
+During this course, we'll mostly focus on front-end development with React
+
+However, it helps to understand some of the basics on how to interact with web pages using pure JavaScript
+
+We won't dive deep into making complex websites with pure JavaScript without a framework, but we'll glance at some of the basics
+
+* Javascript in an HTML file is written within the
+
+
+
+
+
+Exercise 1: HTML + JS hello world
+
+Add some functionality to your HTML page.
+
+Create a function that prints "hello world" . Call this function in your script!
+
+# Events
+
+* Creating a function and then running it when loading the page doesn't really add _interactivity _ to a website
+ * Luckily, JavaScript functions can be bound to various __events__
+* The fastest way: define the function inside the
+
+JS has quite large amounts of built in events for different kind of user interactions.
+
+A list of these can be found in:
+
+[https://developer.mozilla.org/en-US/docs/Web/Events](https://developer.mozilla.org/en-US/docs/Web/Events)
+
+and
+
+[https://www.w3schools.com/jsref/dom_obj_event.asp](https://www.w3schools.com/jsref/dom_obj_event.asp)
+
+Forms and JS example
+
+
+
+const loginForm = document.querySelector("#login");
+
+loginForm.addEventListener("submit", (e) => {
+
+e.preventDefault();
+
+const username = document.querySelector("#username");
+
+const password = document.querySelector("#password");
+
+console.log("username: ", username.value);
+
+console.log("password: ", password.value);
+
+});
+
+Event listener fires when form is submitted. The script selects username and password inputs and logs the values
+
+# Exercise 2: Counter
+
+Add a button to your page. Add an event handler function to the button that uses the window.alert method to tell the user how many times they've clicked on the button so far.
+
+See [https://developer.mozilla.org/en-US/docs/Web/API/Window/alert](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert)
+
+For example, on first press the user should see a message box saying "Clicked 1 time(s)", on second press it should say "Clicked 2 time(s)", and so on.
+
+_Note:_ _ _ In real life, avoid using window.alert as it's generally not great for the user experience. Here it's fine for educational purposes.
+
+Exercise 3: Color change click!
+
+Create an HTML element whose color changes when it's clicked.
+
+First, use the fast "onclick" version
+
+Then, convert it into using addEventListener
+
+_Extra: _ Change the color of _another_ element, not the one that was clicked!
+
+_Extra 2: _ Change the color into a new random color every time the button is clicked!
+
+# Strict mode
+
+* __Strict mode__ was introduced in ES5
+* Strict mode __makes a few changes__ to normal JS semantics
+ * Prohibits some JS syntax
+ * Creates error logs for silent JS errors (that do not show up in the console)
+ * Allows optimization of JS code
+ * Strict mode is on automatically when using JavaScript modules i.e. using import and export
+
+Converting your JS files to strict mode
+
+* Make the first line of your code 'use strict'
+* It prevents you from creating code that is considered bad practice:
+ * Declaring variable without a keyword (let, const, (or var))
+ * Using the "with" statement (we won't get into that, don't use it)
+ * Using "delete" on a variable
+ * Declaring functions in blocks:
+ * and so on…
+ * [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
+
+if (q===w) _function_ f() {}
+
+# Window
+
+__window__ is an object that contains a set of default variables and functions that you can use within a browser
+
+window.alert(), window.document, window.console.log(), window....
+
+As you can see, most of these functions look familiar. That's because you can access them also without window.
+
+In some sense, window keyword is just a list of global variables and functions.
+
+Be careful with window!
+
+Basically...
+
+window.console.log("asd") --> console.log("asd")
+
+window.alert("asd") --> alert("asd")
+
+If you give a variable or function a name that is already used within the "window" object by default, that __variable/function gets overwritten!__
+
+# Separating scripts
+
+Separating JS from HTML completely
+
+Instead of including JS in the HTML file, we can separate it to another .js file
+
+Then, we can refer to the new JS file in our HTML file:
+
+
+
+There can be more than one of these links, e.g.,
+
+
+
+
+
+
+
+_Note that the order of the script links matters!_
+
+Multiple js files
+
+* If we have multiple JS files, loading the page can get visibly slower
+ * Adding a defer="defer" argument enables files to be __loaded as resources get freed (=faster!)_
+ * Still, the files will get executed in the correct order!
+*
+*
+*
+* _About file order:_ load more general stuff first, and the most specialized stuff last.
+* It's also clearer if you make function calls in the __last script only__ , and only __declare __ stuff in the earlier scripts.
+
+# Extra: Executing JS on page load
+
+To execute script when the page loads, you can do this:
+
+In your script.js file, you can define a function called, say, load()
+
+then set it as a value of window.onload
+
+function load() {
+
+console.log("page loaded!");
+
+}
+
+window.onload = load;
+
+# Exercise 4: Greeting the user
+
+Separate your scripts into script files and link them to your main page.
+
+Create a new file user.js
+
+Into the new file, add a function that changes text on the page to a personified greeting "Welcome, [username]!
+
+Run the function when the page is loaded.
+
+Run the function again when the user submits a new username with a form!
+
+# Dynamic CSS
+
+# More about CSS classes
+
+HTML elements can have multiple class attributes separated with a space
Submit Cancel
+
+__Applies to both buttons__
+
+.btn {
+
+border: none,
+
+}
+
+__Applies to__ __ __ .btn-red
+
+.btn-red {
+
+background-color: red;
+
+}
+
+__Applies to __ .btn-blue
+
+.btn-blue {
+
+background-color: blue;
+
+}
+
+# ClassList
+
+In JS, __classes can be added and removed__ dynamically with classlist (array-like object):
+
+const button = document.querySelector(".btn-red");
+
+button.classList.add("btn-blue");
+
+button.classList.remove("btn-red");
+
+Or __toggled__ :const anotherButton = document.querySelector("#another-btn");button.classList.toggle("btn-blue");
+
+Changing the element style
+
+We can change the style of an element by using its style property.
+
+First we get the element:
+
+const someEl = document.getElementById('someEl');
+
+Then we can change the element's style:
+
+someEl.style['font-weight'] = 'bold';
+
+or
+
+someEl.style.fontWeight = 'bold';
+
+CSS visibility vs display
+
+We can change an element's __visibility __ by using the css "visibility" property. Basically meaning that we can either __show or hide an element__ __.__ Let's first store a reference to the element in someEl variable
+
+const someEl = document.getElementById('someEl');
+
+Notice that __display__ removes the element and its effects from the DOM
+
+This __frees up space__ , but the element is still visible in the source code
+
+__Visibility __ only hides the element from the DOM, __still reserving the space for it__
+
+someEl.style.visibility="hidden"; someEl.style.display="none";
+
+someEl.style.visibility="visible"; someEl.style.display="block";
+
+Exercise 5: change styles on hover
+
+Get a handle to the three different sections on your page and make them change color to yellow when you hover your mouse over them
+
+
+
+---
+
+Solutions: Solutions: https://buuttilab.com/bctjs/week3-html-css-js-dom/-/tree/master/lecture-exercise-solutions/hover
+
+# Dynamic HTML
+
+Inserting HTML using JS
+
+JavaScript allows us to create HTML by __saving HTML as a string__
+
+let someHtml = "
";
+
+document.getElementById("someElementId").innerHTML = someHtml;
+
+More often than not, we want to use __template literals__ instead of quotations, since this will help us embed variables in to our HTML code
+
+let someHtml = \`
+
+
+
+
Hello there ${friend}
+
+
+
+\`;
+
+Creating HTML elements by using JS
+
+JS allows us to __create new HTML elements __ __programmatically__ as well
+
+This way of adding new HTML elements is less prone to typos than when using string literals
+
+const pTag = document.createElement("p");
+
+pTag.innerHTML = "I am some Html in a p tag";
+
+document.getElementById("someDivForExample").appendChild(pTag);
+
+OR
+
+const text = document.createTextNode("I am text node to append");
+
+pTag.appendChild(text);
+
+document.getElementById("someDivForExample").appendChild(pTag);
+
+Removing a HTML element by using JS
+
+Similarly, we can also __remove __ an element from DOM
+
+const post = document.getElementById("someElementWeWantToRemove");
+
+const posts = post.parentElement;
+
+posts.removeChild(post);
+
+Alternatively, we can remove the _n_ __th child__ from a parent like this:
+
+const posts = document.getElementById("list_of_posts");
+
+posts.removeChild(posts.childNodes[n]);
+
+# DOM
+
+
+
+Wikimedia Commons
+
+__HTML DOM__ (Document Object Model) is the _tree structure_ of the web page
+
+it's created when the web page is opened
+
+JS can modify all elements within the DOM
+
+__DOM elements are objects__ , which have a range of different methods and properties
+
+document.getElementById("idname").innerHTML;
+
+_getElementById_ _() _ _ is a __method__ , innerHTML _ _ is a __property__
+
+Hint: We can access element attributes with method getAttribute()
+
+# Exercise 6: event listeners
+
+Create a simple user interface that displays jokes. Create four buttons and event listeners for:
+
+Displaying one random joke
+
+Displaying one random nerdy joke (category: nerdy)
+
+Displaying all jokes
+
+Deleting the first joke
+
+Jokes array can be found on [Gitea](https://gitea.buutti.com/education/academy-assignments/src/branch/master/Front-end%20Basics/4.%20JS%20in%20HTML%20&%20DOM/jokes.js) .
+
+---
+
+Default joke array and solution: https://buuttilab.com/bctjs/week3-html-css-js-dom/-/blob/master/lecture-exercise-solutions/jokes/main.js
+
+# Chrome Dev Tools
+
+* The most important tools of a modern web developer are bundled with the browser!
+* Open the _ Inspect _ menu with
+* _F12_ or _CTRL+SHIFT+I_
+* right-click the webpage and click Inspect
+* Inspect has multiple tabs
+* Most used ones: _ _
+ * _Console_ , _Network_ , _Application_ , _Elements, Toggle._
+
+
+
+# Console
+
+_Browser has its own _ _Console_
+
+_one of the most important tools for a front-end developer_
+
+_e.g., app's error messages, console.logs and failed requests are printed here_
+
+
+
+* In _Elements_ you can browse and edit the HTML structure of the webpage
+* easily demonstrate different styles in the browser
+ * move the edits into code editor
+* The internal structure of ready-made UI components get exposed here
+
+
+
+* _Network_ exposes the data traffic (HTTP!)
+ * the requests the page is sending to the server, and their responses
+* Helps e.g., in the optimization of page load time
+ * You can see which elements load slower!
+* you can check _Disable cache_ to make debugging easier (no previous data influences the current state of the web app!)
+* check _Preserve log_ to keep the console log intact when the page is reloaded
+
+
+
+_In _ _Application_ _ you can track and manage e.g.,_
+
+_Local Storage_
+
+_cookies_
+
+_tokens_
+
+
+
+# Toggle
+
+* _Toggle_ is used for designing responsiveness of webpages
+* How would the page look on…
+ * different resolutions
+ * phones, tablets, etc…
+
+
+
+
+
+Exercise 7: Let's mess around
+
+Go to some random news page and change a headline into something silly with the Dev tools. (It's surprisingly easy!)
+
+
+
+# Assignments
+
+[Assignments about this topic can be found here](https://gitea.buutti.com/education/academy-assignments/src/branch/master/Front-end%20Basics/4.%20JS%20in%20HTML%20&%20DOM)
+
diff --git a/imgs/.gitkeep b/imgs/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/imgs/1-web-and-html_0.png b/imgs/1-web-and-html_0.png
new file mode 100644
index 0000000..04b520e
Binary files /dev/null and b/imgs/1-web-and-html_0.png differ
diff --git a/imgs/1-web-and-html_1.png b/imgs/1-web-and-html_1.png
new file mode 100644
index 0000000..833d595
Binary files /dev/null and b/imgs/1-web-and-html_1.png differ
diff --git a/imgs/1-web-and-html_10.png b/imgs/1-web-and-html_10.png
new file mode 100644
index 0000000..236d8ac
Binary files /dev/null and b/imgs/1-web-and-html_10.png differ
diff --git a/imgs/1-web-and-html_11.png b/imgs/1-web-and-html_11.png
new file mode 100644
index 0000000..54fc4a0
Binary files /dev/null and b/imgs/1-web-and-html_11.png differ
diff --git a/imgs/1-web-and-html_12.png b/imgs/1-web-and-html_12.png
new file mode 100644
index 0000000..47454a3
Binary files /dev/null and b/imgs/1-web-and-html_12.png differ
diff --git a/imgs/1-web-and-html_13.png b/imgs/1-web-and-html_13.png
new file mode 100644
index 0000000..c2de1e3
Binary files /dev/null and b/imgs/1-web-and-html_13.png differ
diff --git a/imgs/1-web-and-html_14.png b/imgs/1-web-and-html_14.png
new file mode 100644
index 0000000..65912c2
Binary files /dev/null and b/imgs/1-web-and-html_14.png differ
diff --git a/imgs/1-web-and-html_15.png b/imgs/1-web-and-html_15.png
new file mode 100644
index 0000000..404ecfc
Binary files /dev/null and b/imgs/1-web-and-html_15.png differ
diff --git a/imgs/1-web-and-html_16.png b/imgs/1-web-and-html_16.png
new file mode 100644
index 0000000..3ed5bbd
Binary files /dev/null and b/imgs/1-web-and-html_16.png differ
diff --git a/imgs/1-web-and-html_17.png b/imgs/1-web-and-html_17.png
new file mode 100644
index 0000000..7bc4237
Binary files /dev/null and b/imgs/1-web-and-html_17.png differ
diff --git a/imgs/1-web-and-html_18.png b/imgs/1-web-and-html_18.png
new file mode 100644
index 0000000..8c7d498
Binary files /dev/null and b/imgs/1-web-and-html_18.png differ
diff --git a/imgs/1-web-and-html_19.png b/imgs/1-web-and-html_19.png
new file mode 100644
index 0000000..294c4d3
Binary files /dev/null and b/imgs/1-web-and-html_19.png differ
diff --git a/imgs/1-web-and-html_2.png b/imgs/1-web-and-html_2.png
new file mode 100644
index 0000000..1820f86
Binary files /dev/null and b/imgs/1-web-and-html_2.png differ
diff --git a/imgs/1-web-and-html_20.png b/imgs/1-web-and-html_20.png
new file mode 100644
index 0000000..343607f
Binary files /dev/null and b/imgs/1-web-and-html_20.png differ
diff --git a/imgs/1-web-and-html_21.png b/imgs/1-web-and-html_21.png
new file mode 100644
index 0000000..343607f
Binary files /dev/null and b/imgs/1-web-and-html_21.png differ
diff --git a/imgs/1-web-and-html_22.png b/imgs/1-web-and-html_22.png
new file mode 100644
index 0000000..f1d1e1d
Binary files /dev/null and b/imgs/1-web-and-html_22.png differ
diff --git a/imgs/1-web-and-html_23.png b/imgs/1-web-and-html_23.png
new file mode 100644
index 0000000..d0e1764
Binary files /dev/null and b/imgs/1-web-and-html_23.png differ
diff --git a/imgs/1-web-and-html_24.png b/imgs/1-web-and-html_24.png
new file mode 100644
index 0000000..6d8a1d9
Binary files /dev/null and b/imgs/1-web-and-html_24.png differ
diff --git a/imgs/1-web-and-html_25.png b/imgs/1-web-and-html_25.png
new file mode 100644
index 0000000..6d8a1d9
Binary files /dev/null and b/imgs/1-web-and-html_25.png differ
diff --git a/imgs/1-web-and-html_26.png b/imgs/1-web-and-html_26.png
new file mode 100644
index 0000000..6d8a1d9
Binary files /dev/null and b/imgs/1-web-and-html_26.png differ
diff --git a/imgs/1-web-and-html_3.png b/imgs/1-web-and-html_3.png
new file mode 100644
index 0000000..6a51113
Binary files /dev/null and b/imgs/1-web-and-html_3.png differ
diff --git a/imgs/1-web-and-html_4.png b/imgs/1-web-and-html_4.png
new file mode 100644
index 0000000..06db54b
Binary files /dev/null and b/imgs/1-web-and-html_4.png differ
diff --git a/imgs/1-web-and-html_5.png b/imgs/1-web-and-html_5.png
new file mode 100644
index 0000000..b9bfb06
Binary files /dev/null and b/imgs/1-web-and-html_5.png differ
diff --git a/imgs/1-web-and-html_6.png b/imgs/1-web-and-html_6.png
new file mode 100644
index 0000000..2246e93
Binary files /dev/null and b/imgs/1-web-and-html_6.png differ
diff --git a/imgs/1-web-and-html_7.png b/imgs/1-web-and-html_7.png
new file mode 100644
index 0000000..8cc03d6
Binary files /dev/null and b/imgs/1-web-and-html_7.png differ
diff --git a/imgs/1-web-and-html_8.png b/imgs/1-web-and-html_8.png
new file mode 100644
index 0000000..ee020e4
Binary files /dev/null and b/imgs/1-web-and-html_8.png differ
diff --git a/imgs/1-web-and-html_9.png b/imgs/1-web-and-html_9.png
new file mode 100644
index 0000000..6393c47
Binary files /dev/null and b/imgs/1-web-and-html_9.png differ
diff --git a/imgs/2-css_0.png b/imgs/2-css_0.png
new file mode 100644
index 0000000..87a3b08
Binary files /dev/null and b/imgs/2-css_0.png differ
diff --git a/imgs/2-css_1.png b/imgs/2-css_1.png
new file mode 100644
index 0000000..982f2ac
Binary files /dev/null and b/imgs/2-css_1.png differ
diff --git a/imgs/2-css_10.png b/imgs/2-css_10.png
new file mode 100644
index 0000000..e9e51ac
Binary files /dev/null and b/imgs/2-css_10.png differ
diff --git a/imgs/2-css_11.png b/imgs/2-css_11.png
new file mode 100644
index 0000000..ec281fd
Binary files /dev/null and b/imgs/2-css_11.png differ
diff --git a/imgs/2-css_2.png b/imgs/2-css_2.png
new file mode 100644
index 0000000..51d9c36
Binary files /dev/null and b/imgs/2-css_2.png differ
diff --git a/imgs/2-css_3.png b/imgs/2-css_3.png
new file mode 100644
index 0000000..beaff17
Binary files /dev/null and b/imgs/2-css_3.png differ
diff --git a/imgs/2-css_4.png b/imgs/2-css_4.png
new file mode 100644
index 0000000..b441443
Binary files /dev/null and b/imgs/2-css_4.png differ
diff --git a/imgs/2-css_5.png b/imgs/2-css_5.png
new file mode 100644
index 0000000..ea81c4d
Binary files /dev/null and b/imgs/2-css_5.png differ
diff --git a/imgs/2-css_6.png b/imgs/2-css_6.png
new file mode 100644
index 0000000..0356937
Binary files /dev/null and b/imgs/2-css_6.png differ
diff --git a/imgs/2-css_7.png b/imgs/2-css_7.png
new file mode 100644
index 0000000..ce3f3c7
Binary files /dev/null and b/imgs/2-css_7.png differ
diff --git a/imgs/2-css_8.png b/imgs/2-css_8.png
new file mode 100644
index 0000000..346a230
Binary files /dev/null and b/imgs/2-css_8.png differ
diff --git a/imgs/2-css_9.png b/imgs/2-css_9.png
new file mode 100644
index 0000000..7f608fd
Binary files /dev/null and b/imgs/2-css_9.png differ
diff --git a/imgs/3-bootstrap_0.png b/imgs/3-bootstrap_0.png
new file mode 100644
index 0000000..461c76c
Binary files /dev/null and b/imgs/3-bootstrap_0.png differ
diff --git a/imgs/3-bootstrap_1.png b/imgs/3-bootstrap_1.png
new file mode 100644
index 0000000..a94590b
Binary files /dev/null and b/imgs/3-bootstrap_1.png differ
diff --git a/imgs/3-bootstrap_10.png b/imgs/3-bootstrap_10.png
new file mode 100644
index 0000000..d7ebcf0
Binary files /dev/null and b/imgs/3-bootstrap_10.png differ
diff --git a/imgs/3-bootstrap_11.png b/imgs/3-bootstrap_11.png
new file mode 100644
index 0000000..e27a2ff
Binary files /dev/null and b/imgs/3-bootstrap_11.png differ
diff --git a/imgs/3-bootstrap_12.png b/imgs/3-bootstrap_12.png
new file mode 100644
index 0000000..0e0b4af
Binary files /dev/null and b/imgs/3-bootstrap_12.png differ
diff --git a/imgs/3-bootstrap_13.png b/imgs/3-bootstrap_13.png
new file mode 100644
index 0000000..d0b2a5d
Binary files /dev/null and b/imgs/3-bootstrap_13.png differ
diff --git a/imgs/3-bootstrap_2.png b/imgs/3-bootstrap_2.png
new file mode 100644
index 0000000..29b8c3b
Binary files /dev/null and b/imgs/3-bootstrap_2.png differ
diff --git a/imgs/3-bootstrap_3.png b/imgs/3-bootstrap_3.png
new file mode 100644
index 0000000..48723d8
Binary files /dev/null and b/imgs/3-bootstrap_3.png differ
diff --git a/imgs/3-bootstrap_4.png b/imgs/3-bootstrap_4.png
new file mode 100644
index 0000000..a88c217
Binary files /dev/null and b/imgs/3-bootstrap_4.png differ
diff --git a/imgs/3-bootstrap_5.png b/imgs/3-bootstrap_5.png
new file mode 100644
index 0000000..7e73ade
Binary files /dev/null and b/imgs/3-bootstrap_5.png differ
diff --git a/imgs/3-bootstrap_6.png b/imgs/3-bootstrap_6.png
new file mode 100644
index 0000000..048a25c
Binary files /dev/null and b/imgs/3-bootstrap_6.png differ
diff --git a/imgs/3-bootstrap_7.png b/imgs/3-bootstrap_7.png
new file mode 100644
index 0000000..0e0b4af
Binary files /dev/null and b/imgs/3-bootstrap_7.png differ
diff --git a/imgs/3-bootstrap_8.png b/imgs/3-bootstrap_8.png
new file mode 100644
index 0000000..444f187
Binary files /dev/null and b/imgs/3-bootstrap_8.png differ
diff --git a/imgs/3-bootstrap_9.png b/imgs/3-bootstrap_9.png
new file mode 100644
index 0000000..99ac523
Binary files /dev/null and b/imgs/3-bootstrap_9.png differ
diff --git a/imgs/4-js-in-html-and-dom_0.png b/imgs/4-js-in-html-and-dom_0.png
new file mode 100644
index 0000000..e5674e9
Binary files /dev/null and b/imgs/4-js-in-html-and-dom_0.png differ
diff --git a/imgs/4-js-in-html-and-dom_1.png b/imgs/4-js-in-html-and-dom_1.png
new file mode 100644
index 0000000..d489d23
Binary files /dev/null and b/imgs/4-js-in-html-and-dom_1.png differ
diff --git a/imgs/4-js-in-html-and-dom_2.png b/imgs/4-js-in-html-and-dom_2.png
new file mode 100644
index 0000000..7dd19bb
Binary files /dev/null and b/imgs/4-js-in-html-and-dom_2.png differ
diff --git a/imgs/4-js-in-html-and-dom_3.png b/imgs/4-js-in-html-and-dom_3.png
new file mode 100644
index 0000000..30f3a47
Binary files /dev/null and b/imgs/4-js-in-html-and-dom_3.png differ
diff --git a/imgs/4-js-in-html-and-dom_4.png b/imgs/4-js-in-html-and-dom_4.png
new file mode 100644
index 0000000..ab0ebdf
Binary files /dev/null and b/imgs/4-js-in-html-and-dom_4.png differ
diff --git a/imgs/4-js-in-html-and-dom_5.png b/imgs/4-js-in-html-and-dom_5.png
new file mode 100644
index 0000000..322d2c0
Binary files /dev/null and b/imgs/4-js-in-html-and-dom_5.png differ
diff --git a/imgs/4-js-in-html-and-dom_6.png b/imgs/4-js-in-html-and-dom_6.png
new file mode 100644
index 0000000..8032edc
Binary files /dev/null and b/imgs/4-js-in-html-and-dom_6.png differ
diff --git a/imgs/4-js-in-html-and-dom_7.png b/imgs/4-js-in-html-and-dom_7.png
new file mode 100644
index 0000000..57ccd8d
Binary files /dev/null and b/imgs/4-js-in-html-and-dom_7.png differ
diff --git a/imgs/4-js-in-html-and-dom_8.png b/imgs/4-js-in-html-and-dom_8.png
new file mode 100644
index 0000000..dc9efb7
Binary files /dev/null and b/imgs/4-js-in-html-and-dom_8.png differ
diff --git a/imgs/4-js-in-html-and-dom_9.png b/imgs/4-js-in-html-and-dom_9.png
new file mode 100644
index 0000000..89eb545
Binary files /dev/null and b/imgs/4-js-in-html-and-dom_9.png differ
diff --git a/imgs/buuttilogo.png b/imgs/buuttilogo.png
deleted file mode 100644
index 8c35578..0000000
Binary files a/imgs/buuttilogo.png and /dev/null differ
+* src ("source") is an _attribute_ , and its value tells where the shown image is located
+* If you want to use a local image you can put it in the same folder as the __ __ _index.html_ _ _ and load it as src="my_image.png"
+ * Subfolders work, too: src="images/my_image.png"
+* A link to other (remote or local) sites is added with the _link tag_
+* Tag for a link is for anchor.
+* The link will itself be as a href attribute standing for hypertext reference.
+* Remote link:
+ * This links to Google!
+* Local link:
+ * This links to test.html!
+* _Divisors _ are containers we can hold our text and images in
+ * made using 
+*