Code example can be seen here: https://github.com/agustinustheo/instagram-clone-html-css-js-exercise

1. INTRODUCTION TO
HTML, CSS, JS
Agustinus Theodorus

2. HELLO!
Agustinus Theodorus
IT Architect and Web Services Staff at Bina Nusantara
IT Division

3. HOW DOES CLIENT SIDE & SERVER SIDE WORK?
Web
Server
Web BrowserInternet
HTTP Request
HTTP Response

4. INTRODUCTION TO
HTML
Agustinus Theodorus

5. WHAT IS HTML?
Hypertext Markup Language
is the standard markup language for documents designed to be displayed in a web browser.

6. COMMONLY USED HTML TAGS
<p>…</p>
<br />
<h1>…</h1>
<!--…-->
<ol>…</ol>
<ul>…</ul>
<img />
<a>…</a>
<table>…</table>

7. INTRODUCTION TO
CSS
Agustinus Theodorus

8. WHAT IS CSS?
Cascading Style Sheets
is a style sheet language used for describing the presentation of a document written in a markup language like
HTML.

9. LET’S CODE
CSS!

10. INTRODUCTION TO
JAVASCRIPT
Agustinus Theodorus

11. WHAT IS JAVASCRIPT?
Ja-va-Script
ˈjävəskript,ˈjavə-/
noun
an object-oriented computer programming language commonly used to create interactive effects within web
browsers.

12. HOW DOES JAVASCRIPT WORK?
A brief explanation of Client Side and Server Side.
▪ Client Side 🡪 script is run on client’s browser, and doesn’t need web server to run.
▪ Server Side 🡪 script is processed on a web server, and is served back at the user to generate a dynamic html
page for the client.

13. HOW DOES JAVASCRIPT WORK?
Web
Server
Web Browser
(Client Side JS is
processed here)

14. HOW DO WE APPLY JAVASCRIPT?
▪ There are 3 ways to apply Javascript in your web app:
▪ Internal JavaScript
Written in the .html file within the script tag
<script>
function sayHiConsoleLog()
{
var button = document.getElementById(‘helloBtn’);
button.onclick = function () {
console.log(‘Hello World’);
}
}
</script>
▪ External JavaScript
Written in a external .js file
<script src="script.js"></script>
▪ Inline JavaScript handlers
Written inline in html tags (script here usually calls functions)
<button onclick=“sayHiConsoleLog()">Click me!</button>

15. LET’S LEARN
SYNTAX!

16. BUT BEFORE
THAT..

17. var , let , & const;
The variables used in javascript are dynamic.
Variables in Javascript

18. function(){
console.log(‘I am a function’);
}
Javascript Functions

19. alert(object)
To show an alert containing the value of the object.
alert

20. console.log(object)
To log the value of the object in the console.
console.log

21. object.getElementById(‘name of element’)
Used to get a HTML element by their Id as an object
.getElementById

22. object.onclick
Used to add a trigger event on a object.
.onclick

23. object.value
Used to get the value of input tags (<input>).
.value

24. object.length
Used to get the length of a object.
.length

25. object.checked
Used to get the Boolean in a <input type=“radio”> or <input type=“checkbox”>.
.checked

26. object.innerHTML
Used to get or modify the value of HTML tags, i.e: (<div>, < p>, <span>, etc..)
.innerHTML

27. object.substring(start index, end index)
Used to get the part of string in object value.
.substring

28. testString.test(string)
Used to check if the string contains testString.
.test

29. EXERCISES
▪ File : form registrasi.html