0% found this document useful (0 votes)

93 views330 pages

En - Part 2 - Teens Advance Web Dev

Uploaded by

spiritxfn1

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

93 views330 pages

En - Part 2 - Teens Advance Web Dev

Uploaded by

spiritxfn1

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 330

Segala materi dalam buku ini merupakan

property dari Timedoor Coding Academy

Dilarang
menyebarluaskan/memperjualbelikan
materi tanpa seizin Timedoor Coding
Academy
Table of Contents
Advance 2
Meeting 9
Intro to Javascript and HTML DOM.................................................. 5
Meeting 10
Aside, Article, and Iframe.................................................................. 25
Meeting 11
Add Media (Video and Audio).......................................................... 41
Meeting 12
DOM Events.......................................................................................... 57
Meeting 13
DOM Traversal and Prevent Default................................................ 73
Meeting 14
DOM Event Bubbling........................................................................... 85
Meeting 15
Advance 2 Exam Part 1....................................................................... 99
Meeting 16
Advance 2 Exam Part 2...................................................................... 101

Advance 3
Meeting 1
HTML Form......................................................................................... 105
Meeting 2
Input Types and Attributes.............................................................. 123
Meeting 3
Styling Form........................................................................................ 139
Meeting 4
Image Slider Using For Each............................................................. 163
Meeting 5
Exploring Tools and Create About Page......................................... 172
Meeting 6
Online Community and Create Project Page................................ 192

Timedoor Coding Academy

i
Table of Contents
Advance 3
Meeting 7
CSS Transition and Reveal On Scroll............................................... 207
Meeting 8
CSS Animation and Animation Library........................................... 228
Meeting 9
Submit to Email and Create Modal.................................................. 246
Meeting 10
Splash Screen and Responsive Website......................................... 262
Meeting 11
Create Your Own Website.................................................................. 282
Meeting 12
Create Your Own Website.................................................................. 292
Meeting 13
Create Your Own Website.................................................................. 298
Meeting 14
Create Your Own Website.................................................................. 302
Meeting 15
Create Your Own Website.................................................................. 306

Meeting 16
Create Your Own Website.................................................................. 310
MEETING 9

INTRO TO JAVASCRIPT
AND HTML DOM

What are we going to learn?

1. Get to Know Javascript in HTML Document

2. Get to Know HTML DOM
3. Get to Know Methods in DOM
4. Creating Blog Pages

Timedoor Coding Academy

5
Meeting

9 Intro to Javascript and

HTML DOM

Javascript in HTML Document

Do you still remember what is the function

of Javascript code on the Web Page?

Javascript makes a website to become

more dynamic and interactive.

For example; showing content that

runs automatically like Slide Show,
Modal, Countdown, or showing the
current Date.

However, in order to apply Javascript code on the website, we

need DOM to help.

What is HTML DOM?

Timedoor Coding Academy

6
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM

HTML DOM

HTML DOM (Document Object Model) ia a mediator

Javascript code that can be used to manipulate (show,
add, remove, edit) HTML element.

Without DOM, Javascript cannot link with HTML

What is the output form of the DOM?

The DOM output is the same as the Website Page that we
created in the <body> tag.

HTML
DOM

Let’s take a look

of this video!

The website that we create is received by the Web

Browser in the form of an Object Document and
accessed through a URL.

Timedoor Coding Academy

7
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods

This time we will learn the methods found in DOM that can be
used in Javascript.

Method in HTML DOM

DOM method is a command that Javascript uses to execute

tasks for HTML elements.

Example of DOM method used:

Codes
<p id=”hello-world”>Hi World!<p>

DOM Method Searched

Property used to
to find ID element ID
change element
with new value
Expected new
value

Now, we will learn what methods are used to access, change,

add, or remove HTML elements using Javascript code.

Timedoor Coding Academy

8
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods

1. Accesing Elements

Accessing Elements method is used to find elements based

on certain attributes so that their content can be accessed,
changed, added, or removed.
There are 3 Methods to find HTML elements, they are:
√ getElementByID(id)
√ getElementByTagName(name)
√ getElementByClassName(class)

1. getElementById
getElementById Method means accessing element based on
atribut id.

HTML Code Example

Codes
<p id=”programmer”>I am Programmer<p>

Javascript Code Example

Codes
var result = document.
getElementById(“programmer”).innerHTML
console.log(result) //show in log

Create a new project in Replit and write the above HTML

code on index.html, and Javascript code on script.js

Timedoor Coding Academy

9
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods

2. getElementByTagName
getElementByTagName Method means finding element based
on tag name.

Javascript Code Example

Codes
var result = document.getElementsByTagName(“p”)
[1].innerHTML
console.log(result) //show in log

“p” elements are saved in array, then to display only one element
is by accessing the index.

getElementsByTagName(“p”)[1]

element p index to 1

On your last project :

1. Add “I am Web Designer” paragraph below the “I am
Programmer” paragraph
2. Then comment the previous javascript code and write
the code above.
3. Try to change the index number!

3. getElementByClassName
getElementByClassName Method means finding element based
on class attribute.

Timedoor Coding Academy

10
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods

Javascript Code Example

Codes
var result = document.
getElementsByClassName(“apps”)[0].innerHTML
console.log(result) //show in log

On your last project:

1. Add “I am Mobile Apps Developer: paragraph with the
class app attribute
2. Then, comment on previous javascript, and write the
code above.

1. Add some new paragraphs with class apps attribute

2. Show all the results in the log by filling in the following
missing code:

Codes
var item = document.1)......(“apps”)
var i;
for (i=0; i< item.length; 2).....) {
var results = item[i].innerHTML;
console.log( 3)......)
}

Timedoor Coding Academy

11
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods

2. Changing Elements and their Attributes

In changing content or attribute in element, we use

oassignment operator (=) by combining method, accessing
elemet and property or these folllowing methods
Properties :
There are three Properties to change HTML elements:
√ innerHTML
√ attribute
√ style.property

Method :
√ setAttribute(attribute, value)

1. innerHTML
innerHTML Property is used to change content on element; such
as txt or picture.

Javascript Code Example

Codes
var result = document.getElementsByTagName(“p”)
[1].innerHTML = “Hello Programmer !”;

On your last project, please comment the previous javascript code

and write down the code above, then print it in console.

Timedoor Coding Academy

12
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods

2. attribute
Attribute property is used to change attribute in elements; like id,
type, class, etc.
Javascript Code Example

Codes
var result = document.getElementsByTagName(“p”)
[0].className = “blue”;

On your last project,

1. Add Heading 2 with class red and text “Hello

Programmer !”
2. Create red class selector with color: red; property and
blue class selector with color: blue property in style.css
3. Run them first to check the result before it is changed
4. Then, comment on your last javascript code (except
console.log) and write the code above.
5. Run and see the change

3. style.property
style.property is used to change certain property on the
elements.
Javascript Code Example

Codes
var result = document.getElementsByTagName(“p”)
[0].style.color = “green”;

Timedoor Coding Academy

13
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods

On your last project, please comment the previous javascript code

and write down the code above, then print it in console.

4. setAttribute
setAttribute Method has the same use with attribute property, but
very different in the writing of property and value pairs.

Javascript code example

Codes
var result = document.getElementsByTagName(“p”)
[0].setAttribute(“class”, “blue”)

On your last project, please comment the previous javascript code

and write down the code above, then print it in console.

3. Adding Element

Adding elements through Javascript is usually done only when

we want to show them in certain condition.

Methods used:
√ createElement() creating element
√ appendChild() adding element

Timedoor Coding Academy

14
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods

Javascript code example

Codes
//create element p
var paragraph = document.createElement(“P”);
paragraph.innerHTML = “New Paragraph”;
//add to body
document.body.appendChild(paragraph);

On your last project,

1. Comment the previous javascript and write the code
above.
2. Add setAttribute() method with blue class after
document.body.appendChild(paragraph)code.

4. Removing Element

In removing element, you can use removeChild() method.

Javascript Code Example

Codes
document.body.removeChild(paragraph);

Add the code above on your last project

Timedoor Coding Academy

15
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods

We can also remove one child in one parent element using

childNodes[index] property.

childNodes Property hold all child owned by parent element.

HTML Code Example

Codes
<ul id=”language”> parent
<li>Javascript</li>
<li>Python</li> child
<li>Kotlin</li>
</ul>

Javascript Code Example:

Codes
var list = document.getElementById(“language”);
list.removeChild(list.childNodes[1]);

On your last project,

1. Add HTML code above
2. Then give your comment on the previous javascript, then
write the code above
3. Try to remove the text Kotlin !

Timedoor Coding Academy

16
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website

Creating Blog Page

Let’s make our website page with Blog type !

To check the website example, go to:

https://cobee-the-junior-programmer.netlify.app/

Follow these following steps

1. Create a new folder named “Blog” with assets folder

contained.

2. Create index.html file with HTML:5 structure and css file

named style.css

3. Import style.css
<link rel=”stylesheet” type=”text/css”
href=”style.css”>

4. Import script Font Awesome 5

5. Add these tags: <header>, <main>, <footer>

Timedoor Coding Academy

17
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website

5. Make Icon, Title and Navigation inside <header>

tagcontaining Projects, Contacts, dan About Us Menu

You can take a look to your last website as reference for

creating the HTML or CSS codes!

6. For icons downloading, go to : http://tiny.cc/adv2_meeting9

Add the codes before Header Title and set the CSS with
40px wide, margin: 8px 15px, position absolute.

1. Creating Jumbotron

Next, we are going to create a Jumbotron that is different from

your last website.

Here is one, but you can

freely create the design.

Follow these following steps!

1. Find a picture, and put it in Jumbotron. Then, save it in

Asset folder.

Timedoor Coding Academy

18
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website

2. Create this code in index.html

Codes
<section id=”jumbotron”>
<div class=”jumbotron”>
<h1 class=”jumbotron-title”>Get Programming
Tips here!</h1>
<div class=”header-flex”>
<div>
<h2 class=”jumbotron-text”>Are you a
newcomer in Programming? <br> Learn
through <span
style=”color: #f4a261;”>Simple
</span> Game and Website!</h2>
<div class=”mini-text-flex”>
<p class=”mini-text”>Learn
basic programming here</p>
<button id=”icon-up”>
<i class=”far fa-hand-point-up”></i>
</button>
<button id=”icon-down” class=”icon-
down”>
<i class=”far fa-hand-point-down”></i>
</button>
</div>
</div>

3. Then, create CSS. Write the code below in style.css file.

Timedoor Coding Academy

19
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website

Codes
main {
margin-top: 60px;
}

#jumbotron {
width: 100%;
}

.jumbotron {
padding: 20px;
text-align: center;
background-color: rgb(38, 70, 83);
}

.header-flex {
display: flex;
justify-content: space-around;
padding: 0;
}

.jumbotron-title {
color: rgb(224, 251, 252);
font-size: 30px;
padding-bottom: 20px;
}

.jumbotron-text {
color: rgb(224, 251, 252);
text-align: left;
padding-bottom: 20px;
border-bottom: 8px solid rgb(244, 162, 97);
}
/* you may add other styles */
.jumbotron-img {
height: 300px;
}

Timedoor Coding Academy

20
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website

Codes
.mini-text-flex {
display: flex;
justify-content: flex-start;

.mini-text {
color: rgb(224, 251, 252);
text-align: left;
margin-right: 5px;
}

.fa-hand-point-up {
color: aliceblue;
font-size: 20px;
}

.icon-down {
display: none;
}

.fa-hand-point-down {
color: aliceblue;
font-size: 20px;
}

button {
background-color: rgb(38, 70, 83);
border-style: none;
}

button:hover {
cursor: pointer;
transform: translateY(5px) ;
}

Timedoor Coding Academy

21
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website

2. Adding Javascript

Well, we are going to apply Javascript method we have

learned before in Pointer Up button.

So, when the Icon is click, paragraph will turn into a text

1. Create new file entitled script.js and write the code below

Codes
function changeText() {
var replaceText = document.
getElementsByClassName(“mini-text”);
replaceText[0].innerHTML = “Scroll to
see”;

document.getElementId(“icon-up”).style.
display = “none”;

document.getElementId(“icon-down”).style.
display = “block”;

2. Then import the script.js on the index.html at the bottom in

the <script> section

Codes
<script src=”script.js”></script

Timedoor Coding Academy

22
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website

3. Next add the event onclick=”changeText()” to the icon-up

button so that it becomes like this:

Codes
<button id=”icon-up” onclick=”changeText()”> <i
class=”far fa-hand-point-up”></i></button>

event onclick on button means :

After the button is clicked, run function changeText()

We are going to learn more about DOM Event on

the next meeting!

Now, reload your website and click pointer up icon!

Timedoor Coding Academy

23
Meeting 9 - Intro to Javascript and HTML DOM
Questions

Day/Date :
1. What is HTML DOM?

2. Please mention 3 methods to access elements!

What properties are used to change the content of an

3. element?

4. What are the createELement() and appenChild() methods

used for?

5. What method can fill in the missing code correctly?

var result = document.1)..............(“p”)
[0].2)............(“class”, “blue”)

Timedoor Coding Academy

24
MEETING 10

ASIDE, ARTICLE, AND

IFRAME

What are we going to learn?

1. Adding Aside, Article, and Iframe Tags

2. Continue your website

Timedoor Coding Academy

25
Meeting

10 Aside, Article, and

Iframe Tag

Previously, you have created Header, Jumbotron, and text that

can change when it is clicked.

Now, we will start adding content structure with aside, article,

and inframe tag.

Types of Tag (Part 10)

1. Aside Tag <aside>

Aside tag is used to

group other contents next
to the main content.

Example of aside
content

Timedoor Coding Academy

26
Meeting 10 - Aside, Article, and Iframe Tag
Aside Tag

Aside tag is often used to group some other tags such as <h1>,
<p>, img>, dll.

Syntax!

<aside> Aside content </aside>

However, if you just write the content inside the aside tag like the
syntax above, then the result is the same as the Paragraph tag.

Try it on replit !

Create a new project on Replit entitled Aside.

1. Write the following code in index.html

Codes
<div class=”main-content”>
<aside>
<h5>Profile</h5>
<i class=”fas fa-user-circle”></i>
<p>Cobee</p>
</aside>
<div class=”content”>
<h3>Teens Student of Timedoor Coding
Academy</h3>
<p>My name is Cobee who lives in Denpasar.
I am interested with coding and I wanna be
a Web Developer</p>
</div>
</div>

Timedoor Coding Academy

27
Meeting 10 - Aside, Article, and Iframe Tag
Aside Tag

2. Import Font Awesome 5 script on <head>

3. Then wrote this following code on style.css

Codes
.main-content {
display: flex;
justify-content: flex-start;
}

aside {
width: 30%;
border-radius: 10px;
box-shadow: 0px 0px 40px gainsboro;
text-align: center;
padding: 10px;
}

.fa-user-circle {
font-size: 40px;
}

.content {
padding: 15px;
margin-left: 10px;
border-radius: 10px;
box-shadow: 0px 0px 40px gainsboro;
}

4. Try ro change the width value to 10% then 60% !

5. Create one more aside on the right side

Timedoor Coding Academy

28
Meeting 10 - Aside, Article, and Iframe Tag
Article Tag

2. Article Tag <article>

Article Tag is used to group small content within the main

content.

Just like the aside tag, the article tag is often used to group other
tags such as <h1>, <p>, <img>.

Syntax!

<article> Article Content </article>

One article

Code Example:

Codes
<article>
<h2>Construct</h2>
<p>Construct is a platform for creating
2D game using events
provided in the application.</p>
</article>

Timedoor Coding Academy

29
Meeting 10 - Aside, Article, and Iframe Tag
Iframe Tag

3. Iframe Tag <iframe>

The iframe (Inline Frame) tag is used to embed another

web page within our web page.

For instance: displaying Google

Maps pages within the main
content

Aside from that, iframe tag also

displays Youtube video we will
learn in the next meeting

Syntax!

<iframe src=”” width=”” height””></iframe>

In the previous aside project, let’s display the Google Maps

page containing your home address!
1. Open Google Maps, and find your home address!.

Timedoor Coding Academy

30
Meeting 10 - Aside, Article, and Iframe Tag
Iframe Tag

2. Click on share option

3. Choose Embed a Map then copy the HTML code

4. Go back to replit, and create the title with Heading 3

containing text “My Address”
5. Then Paste the iframe code from the Google Map below

Output

Timedoor Coding Academy

31
Meeting 10 - Aside, Article, and Iframe Tag
Continue Your Website

Continue Website

Let’s add aside content,

Google Maps and Footer on
your website!

1. Adding Aside

Later, the aside content will contain some small contents.

Now, we will add author’s name and picture first.

1. Create the following code after Jumbotron Section:

Codes
<div class=”main-content”>
<aside>
<div>
<h3 class=”aside-title”>It’s Cobee</h3>
<img class=”profile-picture” src=”assets/
cobee.png” alt=”Cobee” width=”150px”
height=”auto”>
</div>
</aside>
</div>

Adjust the name and profile picture with your content.

Timedoor Coding Academy

32
Meeting 10 - Aside, Article, and Iframe Tag
Continue Your Website

2. Write the following code in style.css

Codes
.main-content {
display: flex;
justify-content: flex-start;
margin: 20px 20px;
}

aside {
max-width: 18%;
max-height: 800px;
border-radius: 10px;
box-shadow: 0px 0px 30px gainsboro;
padding: 20px;
text-align: center;
margin-top: 50px;
}

.aside-title {
margin-top: 50px;
font-size: 25px;
border-top: 5px solid rgb(38, 70, 83);
border-radius: 5px;
}

.profile-picture {
border-style: solid;
border-radius: 50%;
padding: 3px;

Output
Reload your website and see
the result!

Timedoor Coding Academy

33
Meeting 10 - Aside, Article, and Iframe Tag
Continue Your Website

2. Adding Google Maps

Well, the next step is adding Google Maps display to the

main content

1. Create the following code inside div class=”main-

content”, after aside closing.

Codes
<div class=”content”>
<article id=”maps” >
<div class=”maps”>

<iframe src=”” width=”500” height=”350”
style=”border:0;” allowfullscreen=””
loading=”lazy”></iframe>
</div>
</article>
</div>

Insert the HTML link of your home address from Google

Maps inside the iframe tag!

2. Create the following code on style.css

Codes
.content {
margin-left: 10%;
max-width: 65%;
}

article {
max-width: 100%;
}

Timedoor Coding Academy

34
Meeting 10 - Aside, Article, and Iframe Tag
Continue Your Website

Codes
.article-title {
text-align: center;
font-size: 30px;
margin: 50px 0 30px;
}

.maps {
padding: 10px;
}

iframe {
padding: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 40px gainsboro;
}

Reload your website and see the result!

Output

Timedoor Coding Academy

35
Meeting 10 - Aside, Article, and Iframe Tag
Continue Your Website

3. Adding Footer

Do you still remember how to create footer?

Let’s add the footer just like the picture below!

In this time, let’s try to add footer with different style.

Follow the following code!

2. Create the following code on style.css

Timedoor Coding Academy

36
Meeting 10 - Aside, Article, and Iframe Tag
Continue Your Website

Codes
.footer {
background-color: rgb(38, 70, 83);
}
.center-footer {
margin: 0 20px;
}
.main-footer {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.info-top {
text-align: center;
width: 100%;
padding-top: 5px;
color: rgb(224, 251, 252);
}
.info-center {
text-align: center;
width: 100%;
padding-top: 5px;
border-top: 1px solid white;
color: rgb(224, 251, 252);
}
.social-media {
display: flex;
justify-content: center;
}
.fa-instagram-square, .fa-twitter-square, .fa-
facebook-square, .fa-envelope {
padding: 5px;
font-size: 30px;
color: white;
}

Timedoor Coding Academy

37
Meeting 10 - Aside, Article, and Iframe Tag
Questions

Day/Date :
1. What is the function of Aside tag?

2. What is the function of iframe tag? Give the example of its use!

3. What property that sets the aside tag’s width to be small?

4. How do you find HTML links to locations on Google Maps?

5. What property is appropriate to fill the blank space in order to

result content vertically in the Footer?
.main-footer {
display: flex;
.......?: column;
justify-content: center;
width: 100%;
}

Timedoor Coding Academy

38
MEETING 11

ADD MEDIA (VIDEO

AND AUDIO)

What are we going to learn?

1. Adding Paths File and Media

2. Using querySelector() Method
3. Continue Your Website

Timedoor Coding Academy

41
Meeting

11 Add Media (Video and

Audio)

Have you ever seen

a website that plays
backsound when it is
opened?

Or have you seen a video attached on it?

Well, in this time we are going to learn to add video and audio
file into the website, but first, let’s get to know file Path types
before we start it!

File Paths

File paths is the location of where a file is stored in the folder

structure of our website.
There are 2 types of File Path; Absolute and Relative File Paths.

Timedoor Coding Academy

42
Meeting 11 - Add Media (Video and Audio)
File Paths

1. Absolute File Path

Absolute file path is the location in form of complete URL.

Code example:

Codes
<img src”https://i.ibb.co/rbw73q3/hero.png”>

2. Relative File Path

Relative file path is the storage location in our website project

folder, for example in the assets folder.

Code example:

Codes
<img src”assets/hero.png”>

Try to remember about Absolute dan Relative URL types

File paths also have the same type right?

We can also use above file Paths file on video and audio that
will be learned afterward.

Types of tag (Part 11)

Let’s learn about the <video> and <audio> tags that will be used
to add media, with the src (source) attribute to go to the file
location.

Timedoor Coding Academy

43
Meeting 11 - Add Media (Video and Audio)
Video Tag

1. Video Tag <video>

<video> tag is used to add

videos inside the website

Syntax!
<video controls>
<source src=””>
</video>

Open Aside Project you have created on Replit

1. Download audio and video example on the link below
http://tiny.cc/Video-Audio-Meeting11
2. Upload to your Replit directory

3. Then, type the following code after <iframe> Google Maps

Codes
<h3>Let’s Learn About Coding with Me</h3>
<video width=”320” height=”240” controls>
<source src=”coding.mp4”>
</video>

Timedoor Coding Academy

44
Meeting 11 - Add Media (Video and Audio)
Audio Tag

Controls are attributes to add play, play, pause, mute,

and volume options.

2. Audio Tag <audio>

<audio> tag is used to add

sound/music inside our
website.

Syntax!
<audio controls>
<source src=””>
</audio>

Write your following code after <video>

Codes
<h3>BackSound</h3>
<audio controls>
<source src=”fantasy.mp3”>
</audio>>

Timedoor Coding Academy

45
Meeting 11 - Add Media (Video and Audio)
Youtube Video

Video Youtube

Well, other than using <video> tag, we

can also attach video from youtube !

The tag used is <iframe>

Let’s follow the following examples to add it on Replit!

1. Go to:
https://www.youtube.com/watch?v=hb7Q33ysCwI

2. Click Share option 3. Select Embed

4. Then select Copy to copy the whole iframe link.

Timedoor Coding Academy

46
Meeting 11 - Add Media (Video and Audio)
Youtube Video

5. Paste after <audio> code.

6. Change width value into 320 and height into 240.

Can you mention the differences resulted while using

<video> tag dan youtube?

querySelector() Method

querySelector() method is used to get first attribute from the

mentioned selector. Example:

Codes
document.querySelector(“p“)

So, the Paragraph element in the first line of the html document
will be accessed.

Timedoor Coding Academy

47
Meeting 11 - Add Media (Video and Audio)
Youtube Video

Other than element, querySelector() can also refer to other

selectors, such as id attribute or class

Codes
document.querySelector(“.title“) 
document.querySelector(“#title“) 
document.querySelector(“p.title“)

querySelectorAll()

Still included in the querySelector() method, the

querySelectorAll() method is used to get all the attributes with
the specified selector value.

Codes
document.querySelectorAll(“p“)

So, the code above can access the whole paragraph element
inside the HTML document
Try it on Replit. We are going to create Day and Night Mode
buttons!

1. On your last project, add the following code inside<aside>

and after Cobee Paragraph

Codes
<button onclick=”dayMode()”> Day </button>
<button onclick=”nightMode()”> Night </button>

Timedoor Coding Academy

48
Meeting 11 - Add Media (Video and Audio)
Youtube Video

2. Then add the following code on script.js

Codes
function dayMode() {
document.querySelector(“body”).style.color =
“black”;
document.querySelector(“body”).style.
backgroundColor = “white“
}
function nightMode() {
document.querySelector(“body”).style.color =
“white”;
document.querySelector(“body”).style.
backgroundColor = “black“
}

3. Add CSS for Day and Night buttons by yourself.

Now, let’s use it on your website to add Like and Dislike icon.

Continue Website.

Aside from adding the Like and Dislike

icon, we will also add a Video in
addition to the content.

1. Add Like-Dislike

Do the following steps on your website!

Timedoor Coding Academy

49
Meeting 11 - Add Media (Video and Audio)
Youtube Video

1. Add the code below after <img> Profile Picture

Codes
<div class=”toggle”>
<button class=”btn” id=”green”>
<i class=”fa fa-thumbs-up fa-lg”></i>
</button>
<button class=”btn” id=”red”>
<i class=”fa fa-thumbs-down fa-lg”></i>
</button>
</div>

2. Write the following code on style.css

Codes
.toggle {
display: flex;
justify-content: center;
margin: 10px;
}

.btn {
background-color: transparent;
}

.button:hover {
cursor: pointer;
}

.green {
color: green;
}

.red {
color: red;
}

Timedoor Coding Academy

50
Meeting 11 - Add Media (Video and Audio)
Youtube Video

3. Write the following code on the bottom line of script.js

Codes
var btnLike = document.querySelector(‘#green’)
var btnDislike = document.querySelector(‘#red’)

btnLike.onclick = likeColor
btnDislike.onclick = dislikeColor

function likeColor() {
if (btnDislike.classList.contains(‘red’)) {
btnDislike.classList.remove(‘red’)
}

this.classList.toggle(‘green’)
}

function dislikeColor() {
if (btnLike.classList.contains(‘green’)) {
btnLike.classList.remove(‘green’)
}

this.classList.toggle(‘red’)
}

Now see the results and try clicking

on the Like or Dislike icon,
Has the color changed?

2. Add Youtube Video

Let’s add 2 videos about coding on your website! You can use the
following video / find it yourself!

Timedoor Coding Academy

51
Meeting 11 - Add Media (Video and Audio)
Youtube Video

The video will

be placed
on the main
content.

1. Add new <article> tag before maps article.

Codes
<article id=”video”>
<div class=”item-video”>
<h3 class=”article-title”>What is Coding?</h3>

<h3 class=”article-title” >Coding is Not

Difficult!</h3>

</div>
</article>

2. Find the first <iframe> video here :

https://www.youtube.com/watch?v=XMZFUnAgOqs

Then put it in the first comment line

3. Find the second <iframe> video here :

https://www.youtube.com/watch?v=hb7Q33ysCwI

hen put it in the second comment line

4. Resize the first and second video with width=500 and

height=350

Reload your website and

see what happens!

Timedoor Coding Academy

52
Meeting 11 - Add Media (Video and Audio)
Questions

Day/Date :
1. What are the differences between Absolute and Relative Path?

2. How is the code to add video with tag <video> ?

3. What are the function of control?

4. What are the function of querySelector() method?

5. The code that is appropriate to fill the blanks below?

function likeColor() {
1).... (btnDislike.classList.contains(‘red’)) {
btnDislike.classList.remove(‘red’)
}

this.classList.2)....(‘green’)
}

Timedoor Coding Academy

53
MEETING 12

DOM EVENTS

What are we going to learn?

1. DOM Events Concepts (Event Handler dan Event

Listener)
2. Continue Your Website

Timedoor Coding Academy

55
Meeting

12 DOM Events

Do you still remember what is event?

In the DOM there is also an Event to run certain code when an event
occurs.

There are 2 ways to add events, namely Event Handler and Event Listener.

What are the differences?

To understand the differences, let’s learn about it one by one!

DOM Events (Event Handler)

Event Handler means to add an event to an element through

an additional attribute that begins with the word “on”.

There are many types of event handlers, but this time some
types of Events that we are going to learn are:
√ Mouse Events
√ Window Events
√ Keyboard Events

Timedoor Coding Academy

56
Meeting 12 -DOM Events
Event Handler

1. Mouse Events

Mouse Event means certain event

related to mouse activities.

onclick
onclick Event is the event when an element is clicked once.

ondblclick
ondblclick Event is the event when an element is clicked twice.

onmouseover
onmouseover Event is the event when the mouse is hovered
over the element.

onmouseout
onmouseout Event is the event after the mouse is outside the
element.

onmousedown
onmousedown Event is the event when the mouse is pressing the
element (click then hold)

onmouseup
onmouseup Event is the event when the mouse is no longer
pressing the element.

Timedoor Coding Academy

57
Meeting 12 -DOM Events
Event Handler

Let’s practice on Replit !

1. Create a new project entitled DOM Event

2. Find animated image related to coding on https://giphy.
com/
3. Open the GIF you have choosen and select Copy Link
4. Copy on GIF Link
5. Then, open index.html and paste on attribute src tag
<img> just like the example below

Codes
<img src=”https://media.giphy.com/media/
VTtANKl0beDFQRLDTh/giphy.gif” alt=”Code”
width=”100” height=”auto”
onmouseover=”rotateGif(this)”
onmouseout=”rotateBack(this)”>

6. Add width, height, onmouseover,and onmouseout

attribute just like above code.
7. Create the following javascript code on script.js

Codes
function rotateGif(element) {
element.style.transform =”translate(5px, 5px)”;
element.style.transform =”rotate(180deg)”
}
function rotateBack(element) {
element.style.transform =”translate(0px, 0px)”;
element.style.transform =”rotate(0deg)”
}

Timedoor Coding Academy

58
Meeting 12 -DOM Events
Event Handler

8. Try to Run and hover mouse up then out Gif.

9. Next, try replacing the onmouseover event with
onmousedown and onmouseout with onmouseup

2. Window Events

Windows Event means events related

to Window activities, such as loading,
scrolling, and sizing.

onload
onload Event is an event when entering a web page.

onunload
onunload Event is the event when the web page exits.

onscroll
onscroll Event is an event when a web page is scrolled.

onresized
onresized Event is an event when a web page changes size.

Well this time we will try the onscroll event on Replit

Timedoor Coding Academy

59
Meeting 12 -DOM Events
Event Handler

1. On your last project, add this following code after GIF

Codes
<div id=”div” onscroll=”scrolling()”>
<h3>How to differentiate HTML, CSS, and
Javascript on the website?</h3>

<p >HTML, CSS, and Javascript can be analogous

as human body. HTML is the skeleton of the
body, CSS is the clothes or accessories used
and Javascript is a nerve cell that allows
human to move and interact</p>
</div>

2. Add this following code on style.css

Codes
#div {
overflow: scroll;
width: 250px;
height: 200px;
}

3. Then add this code on \ script.js

Codes
function scrolling() {
document.getElementById(“div”).style.color =
“blue”;
}

Timedoor Coding Academy

60
Meeting 12 -DOM Events
Event Handler

3. Keyboard Events

Keyboard Events means events

related to keyboard activity.

onkeypress
onkeypress Event is an event when a keyboard is being
pressed.

onkeydown
onkeydown Event is an event when a keyboard is pressed.

onkeyup
onkeyup Event is the event when a keyboard is released.

Let’s practice on Replit !

1. On your last project, add the following code on script.js

Codes
function keypress() {
var content = document.getElementById(“div”)
content.innerHTML = “You pressed a key!”
content.style.color = “red”
}

Timedoor Coding Academy

61
Meeting 12 -DOM Events
Event Handler

2. Then call onkeypress event on tag <body>

Codes
<body onkeydown=”keypress()”>

3. Run and try to click on a keybord (any key)

4. Next, try to change onkeypress event with onkeyup !
5. Then click and hold one key on the keyboard for a while

Can you see the difference in the timing of the

function call?

In addition to adding attributes to HTML elements, Event

Handlers can also be added via Javascript code.

Try it on Replit!

1. Create a New Project named “Event Handler on JS” then

type the following code in index.html

Codes
<button class=”button”>Event Handler</button>

Timedoor Coding Academy

62
Meeting 12 -DOM Events
Event Handler

2. Type this code on script.js

Codes
var btn = document.querySelector(“.button”);

btn.onclick = () => {
alert(“Hello World!”);
};

3. Try to run it and make sure your code successfully displays the
alert!

4. Add one more onclick event handler below it, to bring up

console.log( “Hello Programmer!”)

Try to run it and click on that Event Handler button,

from the 2 onclick Event Handlers above which code is
executed?

How did it happen?

Save your answer first!
We will discuss after learning Event Listener

Timedoor Coding Academy

63
Meeting 12 -DOM Events
Event Listener

DOM Event Listeners

DOM Event Listeners is an event with code addEventListener

and has the same function as Event Handler.

Code example:

Codes
var paragraph = document.querySelector(‘.p3’);

paragraph.addEventListener(‘click‘, function(){
paragraph.style.backgroundColor = ‘lightblue’;
})

With addEventListener, there is no need to add an Event

Handler again to the HTML.

What is the difference between Event Handler and Event Listener?

Let’s have an experiment on Replit !

1. In the previous project, type the following code in index.

html

Codes
<button class=”button2”>Event Listener</button>

Timedoor Coding Academy

64
Meeting 12 -DOM Events
Event Listener

1. Add the following code on script.js

Codes
var btn = document.querySelector(“.button2”);

btn.addEventListener(‘click’, function() {
alert(“Hello World!”);
});

btn.addEventListener(‘click’, function() {
console.log(“Hello Programmer!”);
});

2. Try to Run, and click on the Event Listener button

After the alert appears, the Hello Programmer text also

appears on the console, right?

So from the experiments carried out, can you mention the

difference?

Timedoor Coding Academy

65
Meeting 12 -DOM Events
Continue Your Website

Continue Your Website

This time we will use the onmouseover event to change the

image on the jumbotron !

Yuk ikuti langkah berikut !

Follow these following steps:

1. Look for an illustration image again on the website of the

free image provider, then save it in the assets folder

2. Rename it into img-header2

3. Open your project and create the following code in script.js

Codes
function changeImage(element) {
element.setAttribute(“src”,
“assets/img-header2.png“)
}

function changeImageBack(element) {
element.setAttribute(“src”,
“assets/img-header.png“)
}

Timedoor Coding Academy

66
Meeting 12 -DOM Events
Continue Your Website

4. Add onmouseover and onmouseout events on the

<img> jumbotron tag to be like this:

Codes
<img onmouseover=”changeImage(this)”
onmouseout=”changeImageBack(this)”
class=”jumbotron-img” src=”assets/img-header.png”
alt=”Jumbotron Image” width=”700” height=”300”>

Make the jumbotron title change using the onmouseover

and onmouseout events.
Hint: innerHTML = “Second Text“

Timedoor Coding Academy

67
Meeting 12 -DOM Events
Questions

Day/Date :
1. What types of Event Handlers did you learn above?

2. What is the difference between onmousedown and onclick?

3. What are some examples of Window Events?

4. What code is used in the Event Listener?

5. What is the correct code to fill in the following blanks?

paragraph.1)......(‘click‘, function(){
paragraph.2)......backgroundColor = ‘lightblue’;
})

Timedoor Coding Academy

68
MEETING 13

DOM TRAVERSAL AND

PREVENT DEFAULT

What are we going to learn?

1. DOM Traversal Concept

2. Prevent Default Method
3. Continue Your Website

Timedoor Coding Academy

71
Meeting

13 DOM Traversal and

Prevent Default

Have you ever seen elements that can be closed or

removed on a website?

What is an effective way to make one

item disappear when the close icon is
clicked?

To create it, we will reapply the concept of Event Listeners in the

previous meeting.

Can you explain again what is Event Listener?

In addition to using the Event Listener,

We will also apply new concepst: DOM
Traversal and Prevent Default.

DOM Traversal

DOM Travesal (DOM search) is a way to get

elements through other elements.

Methods on DOM Traversal consist of

parentNode, parentElement, nextSibling,
nextElementSibling, previousSibling, and
previousElementSibling.

Timedoor Coding Academy

72
Meeting 13 -DOM Traversal and Prevent Default
DOM Traversal

Previously, we have learned to get elements with the

getElement method, right?

Why not use the method to getElement to the desired

element directly?
Because, it is not an effective way when there are many
elements on our web page.

Example :

There is a big tree with many

branches and twigs

Each branch has a different

name.

It would be very tiring if you had a different event per branch

and created the event with the getElementsByClassName()
method, wouldn’t it?

But by knowing the Traversal method, you only need to find one
branch to go to another.

Example on the use of Coding:

There are several cards like this

When we press the close button,

what elements should be missing?

Yes, only one card that is closed

With the DOM Traversal method, we can more easily delete the
parent element (ie card) by clicking the close button (child
element).

Timedoor Coding Academy

73
Meeting 13 -DOM Traversal and Prevent Default
Prevent Default

Prevent Default

Prevent Default is a method

to prevent HTML’s own default
actions from being executed.

Case Example :

When pressing an anchor link that doesn’t contain an href value :

<a href=”” > Click here </a>
Then the web page will not move anywhere, but reload the same
page.

For example: we want to create our own event when the anchor
link is clicked, then we can use the preventDefault() method so
that HTML runs the events we created instead of running the
default actions above.

Practice on Replit

Now so that you understand better, let’s follow these steps in

Replit to make Closeable Items!

Download the images needed

here :
http://tiny.cc/adv2_meeting13

Timedoor Coding Academy

74
Meeting 13 -DOM Traversal and Prevent Default
Let’s Practice

1. Create a new project entitled Closeable Item and upload

the image earlier. Write this code in index.html

Codes
<div class=”container”>
<div class=”item”>
<img src=”elon-musk.jpg” alt=”Elon Musk”
width=”90px” height=”auto”>
<h5 class=”name”>Elon Musk</h5>
<p class=”company”>CEO of Tesla</p>
<a href=”” class=”close”>x</a>
</div>
<div class=”item”>
<img src=”jeff-bezos.jpg” alt=”Jeff Bezos”
width=”90px” height=”auto”>
<h5 class=”name”>Jeff Bezos</h5>
<p class=”company”>CEO of Amazon</p>
<a href=”” class=”close”>x</a>
</div>
<div class=”item”>
<img src=”mark-zuckerberg.jpg” alt=””
width=”90px” height=”auto”>
<h5 class=”name”>Mark Zuckerberg</h5>
<p class=”company”>CEO of Facebook</p>
<a href=”” class=”close”>x</a>
</div>
</div>

2. Write the following code on style.css

Codes
.container {
display: flex;
justify-content: space-around;
}

Timedoor Coding Academy

75
Meeting 13 -DOM Traversal and Prevent Default
Let’s Practice

Codes
.item {
display: inline-block;
padding: 6px;
background-color: gainsboro;
border-radius: 10px;
width: 100px;
position: relative;
margin: 0 5px;
text-align: center;
box-shadow: 5px 5px 10px rgb(177, 169, 169);
}

.item a {
text-decoration: none;
color: rgb(247, 246, 245);
}

.name {
margin: 0;
}

.company {
font-size: 10px;
margin-top: 3px;
}

.img {
border-radius: 8px;
margin-top: 5px;
}
.close {
position: absolute;
top: 0;
right: 3px;
font-weight: bold;
}

Timedoor Coding Academy

76
Meeting 13 -DOM Traversal and Prevent Default
Let’s Practice

Codes
.close:hover {
color: red;
cursor: pointer;
}

3. Write the following code on script.js

Codes
var close = document.querySelectorAll(‘.close‘);

for(let i = 0; i < close.length; i++) {

close[i].addEventListener(‘click‘, function(e){
e.target.parentElement.style.display =
‘none‘;
e.preventDefault()
});
};

This code is an example of using DOM Traversal with

parentElement method.

<div class=”item”> parentElement

<span class=”text”>A</span>
<span>Samuel</span>
<span class=”close”>x</span> accessed
</div> childElement

Try to run on Replit, does the

parentElement disappear
when close is clicked?

Timedoor Coding Academy

77
Meeting 13 -DOM Traversal and Prevent Default
Let’s Practice

Try to comment on the code e.preventDefault() and

see what happens !

Continue Website

In addition to learning about DOM Traversal and Prevent Default,

this time we will also continue the website to add content to
our Blog!

Let’s add screenshots of projects that you’ve created before,

for example Games on Scratch, Construct/Phaser and your
e-commerce Website!

1. Prepare a screen shot of your game or website and save it

in the assets folder.

2. Add the following code to index.html after the div

class=”content”
Customize it with your image name and your project
description, okay!

Timedoor Coding Academy

78
Meeting 13 -DOM Traversal and Prevent Default
Let’s Practice

Codes
<article id=”my-project”>
<h3 class=”article-title”>My Project</h3>
<div class=”project-container”>
<div class=”project”>
<img src=”assets/desert-rally.png” alt=””
width=”300px” height=”210px”>
<h4 class=”project-title”>Desert Rally</h4>
<p class=”project-description”>Game Desert
Rally uses Scratch platform</p>
</div>
<div class=”project”>
<img src=”assets/memory-game.png” alt=””
width=”300px” height=”210px”>
<h4 class=”project-title”>Memory Game</h4>
<p class=”project-description”>Game Memory
Game uses Phaser platform</p>
</div>
</div>
</article>

If you have more projects, you can add the second div
class=”project-container” in <article> tag!

2. Add the following code to index.html after the div

class=”content”

Codes
.project-container {
display: flex;
justify-content: space-around;
}

Timedoor Coding Academy

79
Meeting 13 -DOM Traversal and Prevent Default
Let’s Practice

Codes
.project {
margin: 10px 30px;
border-bottom: 10px solid #e76f51;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 0 10px gainsboro;
}

.project-title {
color: #e76f51;
font-weight: bold;
}

This is an example of the result if displaying 4 projects

Timedoor Coding Academy

80
Meeting 13 -DOM Traversal and Prevent Default
Questions

Day/Date :
1. What is DOM Traversal?

2. What are the benefits of using DOM Traversal?

3. What is Prevent Default ?

4. What is accessed by the parentElement method in the DOM

Traversal?

5. What is the correct code to fill in the following blanks?

for(let i = 0; i < close.length; i++) {
close[i].addEventListener(‘click‘, function(e){
e.target.1)......style.display =
‘none‘;
e.2).......()
});
});

Timedoor Coding Academy

81
MEETING 14

DOM
EVENT BUBBLING

What are we going to learn?

1. DOM Event Bubbling Concept

2. Input Tag
3. Continue Your Website

Timedoor Coding Academy

83
Meeting

14 DOM
Event Bubbling

Just imagine a group of water bubbles

How is it moving? Moving up isn’t it?

Well, Bubbling Events can be analogous to

water bubbles.

Event Bubbling

Event Bubbling is the nature of events such as water bubbles

moving upwards.
This means that the event that is executed on the child will
make the event on the parent also run.
child

Example :
1. Child Element has onclick event
2. Parent Element has different onclick
event

When child element is clicked, then the

event that is executed is the event on the
child element and also the event on the
parent element.

To understand better, let’s try it to

Replit!
parent
Download the images needed here :
http://tiny.cc/adv2_meeting14

Timedoor Coding Academy

84
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling

1. Create a new project entitled Event Bubbling

2. Make 3 item cards containing the following images and
game names, the method is the same as the previous

3. Add the following code to create a click event on the

child, namely the close button.

Codes
var close = document.querySelectorAll(‘.close’);

for(let i = 0; i < close.length; i++) {

close[i].addEventListener(‘click’, function(e){
e.target.parentElement.style.display =
‘none’;
e.preventDefault()
});
};

The code above means, when the close button is clicked, the
parent element (i.e. item) will display none

Timedoor Coding Academy

85
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling

4. Then, add the following code for the event on parent , that
is card item.

Codes
var item = document.querySelectorAll(“.item”);

for (let i = 0; i < item.length; i++) {

item[i].addEventListener(‘click’, function(e){
alert(“Item “ +i+ “ clicked”)
})
}

The code aboce means, when card item is clocked, then it will
display alert.

Try to run the code. If you click Close button, then alert will apear.
After alert is closed, then the item will disappear.

However, if we click it around the item (for example on picture) then

it will only show alert.

Meanwhile the expected conditions are:

1. When Close is clicked, then item will disappear (without
displaying alert)
2. When card item is clicked will show an alert..

Timedoor Coding Academy

86
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling

To fix it up, we need to add stopPropagation() method

4. Add this following code after preventDefault()

Codes
e.stopPropagation()

So, stopPropagation() method will prevents the parent element

from executing its method when the child is clicked.

v
Types of Tag (Part 12) - Input

<input> Tag is an element that the user can type in. Usually used to
enter data on a form.

placeholder

placeholder attribute is a hint text

that is displayed in the input to provide
Code example: brief information

Codes
<input type=”text” placeholder=”Your Name”>

attribute type is the type of input element used.

There are many types and will be learned on the next meeting!

Timedoor Coding Academy

87
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling

Let’s try on Replit!

1. Create a new project on Replit with the code below:

Codes
<h3>Answer the following riddles!</h3>
<p>1. I’m tall when I am young, but short when
I’m old. What am I?</p>
<input type=”text” placeholder=”Answer”>
<p>2. What is full of holes but still holds
water?</p>
<input type=”text” placeholder=”Answer”>
<p>3. What is in front of you but can’t be
seen?</p>
<input type=”text” placeholder=”Answer”> <br>
<input type=”submit” class=”submit” onclick=”
sendData()”>

2. Add the following CSS on style.css

Codes
input {
margin: 0 15px 5px;
outline: none;
border: none;
border-bottom: 1px solid cadetblue;
width: 450px;
}

.submit {
border-radius: 5px;
padding: 6px;
width; 100px;
}

Timedoor Coding Academy

88
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling

3. Then add this javascript code on script.js

Codes
function send() {
alert(“Answers sent!”)
}

The more complete material about input will be learned in

Advance 3!

Now, let’s apply these concepts on your website!

Continue Website

1. Add and Closeable Item

Let’s apply the concepts that have been learned on the webiste by
creating Add and Closeable Items.

We are going to add Search Tags List that will

be used on your projects.

The items in the list can be closed and added

again. However, this data is not saved,
meaning that if the website is reloaded, the
items on the list will return to the original one.

Timedoor Coding Academy

89
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling

1. Inside the Aside tag, after div class=”profile” closure

Add the code below:

Codes
<div class=”search-tags-container”>
<div class=”input-tag”>
<h3 class=”aside-title”>Search Here</h3>
<input id=”myInput” type=”text”
placeholder=”Search...”>
<span class=”addBtn” onclick=”newElement()”>
Search</span>
</div>

<ul id=”myUL” class=”search-tags-list”>

2. Add the following code on style.css

Codes
ul, li {
position: relative;
}

input {
width: 70%;
border: none;
background-color: rgb(255, 255, 255);
border: 2px solid rgb(38, 70, 83);
height: 40px;
margin: 0;
padding: 5px;
}

Timedoor Coding Academy

90
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling

Codes
.addBtn {
width: 30%;
padding: 6px;
background-color: rgb(38, 70, 83);
margin: 0;
cursor: pointer;
color: snow;
height: 40px;
border-radius: 5px;
font-size: 10px;
}

.search-tags-list {
list-style: none;
margin: 30px 0;
padding: 0;
}

.search-tags-item {
margin: 5px;
padding: 10px;
background-color: rgb(38, 70, 83);
color: snow;
text-align: left;
}

.close {
position: absolute;
right: 0;
top: 0;
padding: 0 5px;
color: tomato;
font-family: ‘Fredoka One’, cursive;
cursor: pointer;
font-size: 20px;
}

Timedoor Coding Academy

91
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling

3. Add the following code on script.js

The following code works to add a close sign in each list
item.

Codes
var myList = document.getElementsByTagName(“li”);
var i;
for (i = 0; i < myList.length; i++) {
var span = document.createElement(“span”);
span.innerHTML = “x”;
myList[i].appendChild(span).
setAttribute(“class”, “close”);
}

The next code serves to provide an event on the close icon

so that when it is clicked, the item will disappear

Codes
var close = document.
getElementsByClassName(“close”);
var i;
for(i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = “none”
}
}

Timedoor Coding Academy

92
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling

Last, create a function to add elements through the input

field.

Codes
function newElement() {
// Create new list with the inputed value
var li = document.createElement(“li”);
var inputValue = document.
getElementById(“myInput”).value;

// Check the inputed value

if(inputValue === ‘’ || inputValue === ‘ ’) {
alert(“Data cannot be empty!”);
} else {
document.getElementById(“myUL”).
appendChild(li).setAttribute(“class”, “search-
tags-item”);
li.innerHTML = inputValue;
}

// Clear text on the search bar

document.getElementById(“myInput”).value = “”;

// Create button close

var span = document.createElement(“SPAN”);
span.innerHTML = “x”;
li.appendChild(span).setAttribute(“class”,“close”);

// Delete list
for(i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = “none”
}
}

Timedoor Coding Academy

93
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling

Try reloading and check if you have successfully added or closed

items?

2. Add Google Fonts

Do you still remember how to change the font with

Google Fonts?

Visit the websitehttps://fonts.google.com/ and try adding some

different fonts!

Timedoor Coding Academy

94
Meeting 14 -DOM Event Bubbling
Questions

Day/Date :
1. What is Event Bubbling?

2. Which event is executed first? Child or Parent?

3. What is the function of <input> tag?

4. What code do you add to script.js?

5. What is the correct code to fill in the following blanks?

for (i = 0; i < myList.length; i++) {
var span = document.1)......(“span”);
2)......innerHTML = “x”;
myList[i].3).....(span).
setAttribute(“class”, “close”);
}

Timedoor Coding Academy

95
MEETING 15

ADVANCE 2
EXAM

What are we going to learn?

1. Advance 2 Exam Part 1

2. The exam questions will be given by your teacher

Timedoor Coding Academy

97
MEETING 16

ADVANCE 2
EXAM

What are we going to learn?

1. Advance 2 Exam Part 2

2. The exam questions will be given by your Teacher

Timedoor Coding Academy

99
ADVANCE 3

Timedoor Coding Academy

101
MEETING 1

HTML FORM

What are we going to learn?

1. The use of Form in HTML

2. Tag Form, Input, Label, Text Area, dan Select
3. Attibute on Form Tag
4. Form Practice

Timedoor Coding Academy

103
Meeting

1 HTML Form

Do you know what are these pictures for?

On the website, we often see pages that contain Form, like the
picture above.

Forms usually ask visitors to enter data, such as email, password,

name, and others.

Have you ever tried filling out a form on a website and

pressing the Sumbit button?

Do you know where your data is sent?

Timedoor Coding Academy

104
Meeting 1 - HTML Form
Tag Form

Well, today we will learn the concept of Form in HTML.

Form is the part of the website that is used to enter data.

For example Registration Form, Criticism and Suggestion
Form, etc.

Before learning to make forms, let’s watch the following video to

recall the material that you have learned and also about form!

Check this out!

Source: https://www.youtube.com/watch?v=salY_Sm6mv4

What can you conclude from the video?

Let’s find out first what elements are needed to create a form!

Types of Tag (Part 13)

The tags that will be used in creating the form are tag <form>,
<input>, and <label>.

Timedoor Coding Academy

105
Meeting 1 - HTML Form
Tag Input

1. Form Tag <form>

<form> Tag is used as a container for all the elements in it, such
as labels, inputs, etc.

Syntax!
<form>

</form>

2. Input Tag <input>

<input> Tag is the most important element in order to be able to

enter data on the form.
Code example

Codes Output

<input>

1. Try to write the code above on Replit

2. Try to insert text, number, and symbol

What can you input there

Well, sometimes in an input form we can only enter certain

data. For example, you can only enter numbers in the phone
number input.

Timedoor Coding Academy

106
Meeting 1 - HTML Form
Tag Input

Type attribute

The type attribute is used to specify the type of data entered,

such as text, date, number, or submit.
Code example:

Codes
<input type=”text” name=”firstname”>

Name attribute

Name attribute must be added to the input tag so that the

data can be submitted.
Code example:

Codes
<input type=”text” name=”firstname”>

id attribute

id attribute can be added to match it with the label pair

Code example:

Codes
<input type=”text” name=”firstname” id=”firstname” >

So, the id attribute on the input will pair with for attribute on
the label.

What is label?
Now then we will study Tag Label.

Timedoor Coding Academy

107
Meeting 1 - HTML Form
Tag Label

3. Label Tag <label>

<label> Tag is used to create title/name input that is made. It is

usually written before <input>.
Code example

Codes
<label for=”firstname”>First name:</label><br>
<input type=”text” id=”firstname” name=”firstname” >

for attribute contains the same value as its pair id input

Output

1. Create your own project on replit with the code below:

Codes
<form>
<label>Name</label> <br>
<input type=”text”> <br>
<label>Class Code in Timedoor</label> <br>
<input type=”text”> <br>
<label>Age</label> <br>
<input type=”text”> <br>
</form>
2. Add CSS for label and input i.e margin: 5px

Timedoor Coding Academy

108
Meeting 1 - HTML Form
Tag Textarea

4. Textarea Tag <textarea>

<textarea> Tag is used to create bigger input.

Code example:

Codes
<label for=”address”>Address</label><br>
<textarea name=”address” id=”address” cols=”30”
rows=”20” ></textarea>

cols attribute is used to set lebar and rows attribute to set

length.

Output

5. Select Tag <select>

<select> Tag is ised to display input selections in form of

dropdown.

Timedoor Coding Academy

109
Meeting 1 - HTML Form
Tag Select

Code Example

Codes
<label for=”country”>Country</label><br>
<select name=”country” id=”country”>
<option value=”singapore”>Singapore</option>
<option value=”indonesia”>Indonesia</option>
<option value=”japan”>Japan</option>
</select>

Output

1. On your last Replit project, create an address input using

the <textarea> tag
2. Also create a Favorite Level input using the <select> tag
with options: Beginner, Intermediate, Advance

Timedoor Coding Academy

110
Meeting 1 - HTML Form
Tag Form Attributes

Submit Form

What do you do after filling out the form?

You have to send the data right?

Now to send data you can use the <input> tag with Submit type.

Code example

Codes
<input type=”submit”>

Submit Type will generate input display

Output
button just like this picture:

On your last Replit project, add a Submit input like the code
above

Timedoor Coding Academy

111
Meeting 1 - HTML Form
Let’s Practice

Tag Form Attribute

Tag <form> can have many attributes

What are they and their functions?

Let’s check!

1. Action

Action attribute is used to provide the address for sending data

on the form.

Syntax!
<form action=”URL”>

</form>

Code example:

Codes
<form action=”result.html”>

</form>

The above code means the data will be sent to result.html.

The action attribute can also be redirected to an email with
the value mailto

Codes
<form action=”mailto:[email protected]”>

</form>

Timedoor Coding Academy

112
Meeting 1 - HTML Form
Let’s Practice

2. Target

Just like what we learned earlier, the target attribute is used to

determine which tab the url of the action will open in.

Code example

Codes
<form action=”result.html” target=”blank”>

</form>

Do you still remember what is the result if the value is

blank?

3. Method

The method attribute is used to give commands to send data.

The command consists of get and post.

When is GET or POST used?

GET
• The data is sent in the form of a URL string so that it is
visible in the URL field
• Then use GET when data is not sensitive

POST
• The data is sent through the server so it is not visible on
the website
• Then use POST when data is sensitive/needs to be kept
secret

Timedoor Coding Academy

113
Meeting 1 - HTML Form
Tag Form Attributes

Code example

Codes
<form action=”result.html” target=”blank”
method=”GET” >

</form>

4. Autocomplete

Autocomplete attribute used to provide value suggestions

based on data that has been entered previously.

Autocomplete value may contain on/off.

Code example

Codes
<form action=”result.html” target=”blank”
method=”GET” autocomplete=”on” >

</form>

5. Novalidate

Novalidate attribute is used to ignore data validation.

Syntax!
<form novalidate>

</form>

Timedoor Coding Academy

114
Meeting 1 - HTML Form
Tag Form Attributes

Form Practice

Let’s try to make a simple form and

try all the form attributes that have
been learned!

1. Create a new folder entitled earning_Form

2. Tadd a new file via Visual Studio Code named “form.html”

and write the code below

Codes
<div class=”form”>
<h3 class=”title”>Coding Competition <br>
Enrollment 2021</h3>
<form action=”result.html” target=”blank”
method=”GET” autocomplete=”on” novalidate>
<label for=”name”>Name</label>
<input type=”text” id=”name” name=”name”>
<label for=”email”>Email</label>
<input type=”text” id=”email” name=”email”>
<label for=”address”>Address</label>
<textarea id=”address” name=”address”
cols=”30” row=”10”></textarea>
<label for=”phone”>Phone</label>
<input type=”text” id=”phone”
name=”phone”>
<input type=”submit” value=”Submit”
class=”submit-btn”>
</form>
</div>

Timedoor Coding Academy

115
Meeting 1 - HTML Form
Let’s Practice

3. Then add the style.css file and write the following code.
You can modify it however you want!

Codes
.title {
text-align: center;
}

.form {
padding: 15px;
background-color: rgb(159, 231, 174);
box-shadow: 0 0 5px rgb(116, 240, 142);
border-radius: 5px;
width: 30%;
}

label {
display: inline-block;
margin-bottom: 5px;
}

input, textarea {
display: inline-block;
margin-bottom: 10px;
border: none;
padding: 5px;
border-radius: 3px;
width: 100%;
}

4. Don’t forget to import style.css in

form.html !
<link rel=”stylesheet”
href=”style.css”>

Timedoor Coding Academy

116
Meeting 1 - HTML Form
Let’s Practice

5. In the same folder, create a new file called result.html which

contains <h1> with the text “Thanks for Submitting!”

6. Save and see the result in Web Browser

7. Try to enter data on the form and then clicking Submit. An

html page result will appear containing the form data in the
URL.

1. Add the top new input, using the <select> for

Competition Category. Options :
• Kids (8-10 y)
• Teens (11-13 y)
• High School (14-16 y)
• Adult (17-21 y)

2. On <form>, change the method to POST and find the

difference!

3. Add CSS so that all label text is bolder, the form is in the
middle of the page, and style the submit button with
your creations!.

Timedoor Coding Academy

117
Meeting 1 - HTML Form
Questions

Day/date:
1. Explain what the function of the form on the website is!

2. What tags are used to create large input fields?

3. What is the function of <label> tag?

4. What form attributes have you learned?

5. What are the suitable tag for the blank spaces below?
<1)...... name=”” id=””>
<2).... value=””> 10 years old </.....>
<...... value=””> 11 years old </.....>
<...... value=””> 12 years old </.....>

</.....>

Timedoor Coding Academy

118
MEETING 2

INPUT TYPES AND

ATTRIBUTES

What are we going to learn?

1. Types on input tag

2. Input attribute
3. Form practice

Timedoor Coding Academy

121
Meeting

2 Input Types and

Attribute

Types on Input

As stated earlier, input has many types based on their needs.

Let’s discuss one by one!

1. Text

Text type displays a column as large as one row of area, as

seen in the previous meeting.

type=”text”

Output

Text type can be used for data of type String and short, such as
Name, Username, or instance.

2. Password

Password type displays the column like text, but the entered
data is not seen as a character but a bullet symbol.

type=”password”

Timedoor Coding Academy

122
Meeting 2 - Input Types and Attributes
Input Types

Code example

Codes
<label for=”password”>Email</label>
<input id=”password” type=”password”
name=”password”>

Output

3. Number

Number type display columns like text with up and down

buttons. The data entered is only number type.

type=”number”

Code example

Codes
<label for=”quantity”>Quantity</label>
<input id=”quantity” type=”number” name=”quantity”
min=”1” max=”5”>

The min and max properties are Output

useful for setting a limit on the
number that can be entered.

Timedoor Coding Academy

123
Meeting 2 - Input Types and Attributes
Input Types

4. Email

Email type displays a column like text, but the entered data is
automatically checked whether it has an @ symbol or not.

type=”email”

Code example

Codes
<label for=”email”>Email</label>
<input id=”email” type=”email” name=”email”>

In the form.html file that you created last

meeting, please modify and add the following
conditions :
1. Change email type to email
2. Add new label and input for password
with type password
3. Add a new label and input for age with
type number. Use attributes min=8 and
max=16
4. Remove novalidate Attribute
What happens if novalidate is removed?
a. In the email field, try entering data without @
b. In the age column, try entering greater number
than 16

Timedoor Coding Academy

124
Meeting 2 - Input Types and Attributes
Input Types

5. Date

Date type displays a column in the format of date/month/year

and the option to display a calendar.

type=”date”

Code example:

Codes
<label for=”date”>Date</label>
<input id=”date” type=”date” name=”date”>

Output

6. Checkbox

Checkbox type displays a checkbox that can be selected more

than one.

type=”checkbox”

Code example

Codes
<input id=”checkbox” type=”checkbox”
name=”checkbox1” value=”pencil”>
<label for=”checkbox”>Pencil</label>

Timedoor Coding Academy

125
Meeting 2 - Input Types and Attributes
Input Types

Output All available options must

have a different name
attribute, so the value can
be sent.

Example:
name=”pencil”
label name=”pen”
name=”eraser”
checkbox input

7. Radio

Radio type displays a radio button and is used when the user
can only select one option.

type=”radio”

Code example

Codes
<input id=”radio” type=”radio” name=”language”
value=”HTML”> <br>
<label for=”radio”>HTML</label>

Output All available options must

have the same name
attribute, so that only one of
them can be selected.

Timedoor Coding Academy

126
Meeting 2 - Input Types and Attributes
Input Types

8. File

File type displays a button that goes to our file directory.

type=”file”

Code example

Codes
<label for=”file”>Upload File</label> <br>
<input id=”file” type=”file” name=”file”>

Output

In the form.html earlier,

1. Add the CSS below :
.check {
width : 10%
}
Add the following code to create a
new input:
- Date of birth date type
- Gender radio type
- File completeness checkbox type
- Upload File file type

3. Add class=”check” on radio input and checkbox

Timedoor Coding Academy

127
Meeting 2 - Input Types and Attributes
Continue Your Website

Attribute on Input

Input has many attributes that will affect the input data and its
styling.

Previously you have learned the name and id attributes, as

well as the min and max on the number. Do you remember
the function?

1. Value

The value attribute is the data value entered in the input field.
Code example

Codes
<input type=”radio” name=”language value=”HTML”>

Output

The value attribute is often used in radio and checkbox input

types.
Its function is to store the selected value.

Timedoor Coding Academy

128
Meeting 2 - Input Types and Attributes
Continue Your Website

2. Placeholder

The placeholder attribute is the hint text contained in the input

field. Usually used to provide information or examples of data
that must be entered.

Code example:

Codes
<input type=”text” name=”language”
placeholder=”Ex.HTML”>

Output

3. Required

The required attribute indicates that the input must be filled in

before being submitted.

Code example

Codes
<input type=”text” name=”language” required>

Timedoor Coding Academy

129
Meeting 2 - Input Types and Attributes
Continue Your Website

Output

So, when you click Submit but the data is still empty, a
validation message will appear.

4. Autofocus

The autofocus attribute is used to automatically place the

cursor in the input field when the page is opened.

Code example

Codes
<input type=”text” name=”username” autofocus>

Output

autofocus

Timedoor Coding Academy

130
Meeting 2 - Input Types and Attributes
Continue Your Website

5. Readonly

Readonly attribute means that an input can only be read,

copied, and clicked, but cannot enter/change data in it.

Code example

Codes
<input type=”text” name=”name” value=”Rich
Brian” readonly>

Output The value attribute

must be filled in, so
that the data is not
empty and can be

6. Disabled

The disabled attribute indicates that the input is disabled,

meaning that it cannot be edited and clicked, but can still be
copied.

Code Example

Codes
<input type=”text” name=”name” value=”Rich
Brian” disabled>

Timedoor Coding Academy

131
Meeting 2 - Input Types and Attributes
Continue Your Website

Output

In contrast to the readonly attribute where data is still sent

when submitting, the disabled attribute data is not sent when
submitting.

The disabled attribute is usually used in Edit Forms, where

there is data that cannot be changed since the first input, for
example Username data or other sensitive data.

7. Min and Max

The min and max attributes can also be used to set the
minimum and maximum values for date type inputs.

Code Example

Codes Output

With the code above, the data

entered cannot be less than
January 1 and cannot be later
than January 31.

Timedoor Coding Academy

132
Meeting 2 - Input Types and Attributes
Continue Your Website

8. Multiple

Multiple attribute is used to enter more than 1 data on email

type and file.
Code example

Codes
<input type=”file” name=”file” multiple>

Output

There are 3 files

uploaded

Note: Save and Reload every time you finish working on 1

number so you can see the changes!

In the form.html earlier, add the following conditions:

1. Add value to radio input and checkbox
2. Convert the label text to a placeholder.
- Comment on the label name, email, address, no. phone,
password, and age
- Add placeholders to these inputs.

Timedoor Coding Academy

133
Meeting 2 - Input Types and Attributes
Continue Your Website

3. Add required on all inputs.

4. If you have already made a category select, add autofocus
to the category select
5. Add min and max on the date of birth with free value
6. Add multiple to the input file
7. Try to use readonly and disabled on one of the inputs

Create a form in Visual Studio Code for Mobile Legend Team

Member Registration that contains:
1. Input type text, number, email, and radio/checkbox
2. Use the value, required, placeholder, and autofocus
attributes
3. Give style with your creation

Timedoor Coding Academy

134
Meeting 2 - Input Types and Attributes
Continue Your Website

Day/Date :
1. Mention the types of input that you studied!

2. How to code to make this output?

3. What is the function of placeholder attribute?

4. What attribute is added to insert more than 1 file?

5. What is the correct code to fill in the following blanks?

Timedoor Coding Academy

135
MEETING 3

STYLING FORM

What are we going to learn?

1. Adding Style on Form

2. Submitting to Email
3. Continue your website

Timedoor Coding Academy

137
Meeting

3 Styling Form

CSS Combinators

Do you still remember the concept of Parent Children in

HTML using Javascript?

Did you know that the concept of Parent Children also

applies to CSS?

Now to combine between parents

and children in CSS, we can use CSS
Combinators.

CSS Combinators is an alternative to using too many

class selectors for more efficient and flexible styling.

Before learning about CSS Combinators, you should understand

the following Parent and Children chart.
• <ul> is Parent from <li> A
<ul> and <li> B
• li> A and <li> B are Child
from <ul>
• <li> A has 1 sibling
namely <li> B
<li> <li>
• <li> B is the next sibling
of <li> A
A B

Timedoor Coding Academy

138
Meeting 3 - Styling Form
CSS Combinators

Now this CSS Combinators is used to connect 2 selectors so

that there is no need to create a new selector class again.

The types of CSS Combinators will be explained below:

1. General Sibling Selector (~)

Its function is to select all selector2 which includes the next

siblings of selector1.

Syntax!

selector1 ~ selector2 {
property : value;
}

1. Create a new project in Replit named “CSS Combinators”

2. Write this code onstyle.css

Codes
h3 ~ p {
color : yellow;
}

3. Write the following code and continue with the other

zodiacs!

Timedoor Coding Academy

139
Meeting 3 - Styling Form
CSS Combinators

Codes
<h1>Zodiac names</h1>
<p>Let’s find out about the zodiacs!</p>

<h3>1. Aries</h3>
<div>
<p>Dates: 21 March - 19April</p>
<p>Sign: Ram</p>
</div>

<h3>2. Taurus </h3>

<div>
<p> Dates: 20 April - 20 May</p>
<p>Sign: Bull</p>
</div>

<p> What date were you born </p>

<p> So, what is your zodiac? </p>

Output

previous sibling h3

child h3

next sibling h3

It means only tag <p> as next sibling that uses color style: yellow

Timedoor Coding Academy

140
Meeting 3 - Styling Form
CSS Combinators

2. Adjacent Sibling Selector (+)

Its function is to select one selector2 which is the next siblings of

selector1.

Syntax!

selector1 + selector2 {
property : value;
}

1. Add the following CSS on your last project

Codes
h1 + p {
color : green;
}

2. Run and see the result!

Output

next sibling h1

Timedoor Coding Academy

141
Meeting 3 - Styling Form
CSS Combinators

3. Child Selector (>)

Its function is to select all selector2 which are child of selector1.

Syntax!

selector1 > selector2 {

property : value;
}

1. Add this following CSS on your last project!

Codes
div > p {
color : red;
}

2. Run and see the result!

Output

child div

Timedoor Coding Academy

142
Meeting 3 - Styling Form
CSS Combinators

CSS Pseudo Class

You must have searched for a keyword on Google and

opened the results that appeared right?

When you return to the previous page, does the title of

the article change color?

Well that can happen because there is a CSS Psedo Class.

Before learning about the

types of Pseudo Class, let’s
watch a video!

Source: https://youtu.be/
kpXKwDGtjGE

Timedoor Coding Academy

143
Meeting 3 - Styling Form
CSS Pseudo Class

How about that video? Do you understand the use of

Pseudo Class?

CSS Pseudo Class is used to provide styling in certain

conditions. For example hover and active.

Now let’s learn about another type of CSS Pseudo Class!

1. Pseudo Class for Link

:link before visiting the link

:visited after visiting the link

1. Try the following code on a new project called “CSS Pseudo

Class”
2. Write the CSS code below on style.css

Codes
a:link {
color: blue;
}

a:visited {
color: red;
}

3. Write the following code in index.html

Timedoor Coding Academy

144
Meeting 3 - Styling Form
CSS Pseudo Class

Codes
<h2> Facebook or Instagram? </h2>
<a href=”https://www.facebook.com/”
target=”blank”>Visit Facebook</a> <br>
<a href=”https://www.instagram.com/”
target=”blank”>Visit Instagram</a> <br> <br>

4. Run and see the results before and after being clicked!
If you already open Facebook or Instagram before, the link
will be red after Run

Output

Before clicking After clicking

2. Pseudo Class for User Action & Input

Hover, Active , Focus previously learned are included in User

Actions.
:hover when the mouse is hovered over the element

:active when the element is being clicked (or held)

:focus when focus on input element

Timedoor Coding Academy

145
Meeting 3 - Styling Form
CSS Pseudo Class

In addition there are also enabled, disabled, and placeholder-shown.

:enabled points to a fillable input element

:disabled points to disabled input elements

:placeholder-shown points to an element that has a

placeholder attribute

1. Write the following CSS code in style.css on your last project

Codes
input[type=number]:placeholder-shown {
background-color: bizque;
}

input:enabled {
background-color: white;
}

input:disabled {
background-color: coral;
}

2. Write the code below on index.html

Codes
<label for=””>What apps do you use most
often?</label> <br>
<input type=”text”> <br>
<label for=””>How many hours a day do you use
it?</label> <br>

Timedoor Coding Academy

146
Meeting 3 - Styling Form
CSS Pseudo Class

Codes
<input type=”number” placeholder=”Amount”> <br>
<label for=””>Write how you control to use it!
</label> <br>
<input type=”text” disabled> <br> <br>
<input type=”submit” value=”Submit”>

3. Run and see the result!

4. Try to add background color for :
- hover on label selector
- active on input selector [type=submit]
- focus on input selector

3. Pseudo Class for Not

:not(selector) designates elements that are not

included in the selector.

Add the following CSS code and see the result!

Codes
* {
color: black;
}

:not(label) {
color: brown;
}

Timedoor Coding Academy

147
Meeting 3 - Styling Form
Continue Your Website

Output Look, all the text except the label

is turning brown

After learning the concept above,

let’s apply it to create a Contact
page on your website!

Continue Your Website!

Let’s create a
Contact page like
the picture below!

1. Look for Illustration images and Profile pictures first on

https://undraw.co/illustrations

You can set the color first to match the theme of

your website!

Timedoor Coding Academy

148
Meeting 3 - Styling Form
Continue Your Website

Search keyword phone for

illustration images

Search profile or avatar as the

keyword for profile picture

Download and then save it in your project folder!

2. Create a contact.html file with HTML5 code structure.

Replace all the code in the <head> tag to be the same as
index.html

3. Add code <header>, <main>, <footer>

4. Copy Paste the code in the Header and Footer in index.

html to the contact.html file
Don’t forget to copy paste the <script> code too!

5. Next we will create code to add an image and contact form

Timedoor Coding Academy

149
Meeting 3 - Styling Form
Continue Your Website

Illustration Image

1. Add the following HTML code to Contact.html to add an

illustration image on the left.

Codes
<div class=”contact-container”>
<div class=”ilustration”>
<img class=”illustration-img” src=”assets/
contact-illustration.png” alt=”” width=”800px”>
</div>
</div>

2. Then add the following CSS code to style.css

Codes
.contact-container {
display: flex;
justify-content: flex-start;
}

.illustration-img {
margin: 0px;
width: 800px;
}

Save and see the results!

justify-content with value flex-start

makes the image on the left side.

Timedoor Coding Academy

150
Meeting 3 - Styling Form
Continue Your Website

Profile Picture

1. Add the following HTML code inside the contact-container

class div, right after the illustration class div cover.

Codes
<div class=”contact”>
<img class=”profile-contact-img” src=”assets/
profile-contact.png” alt=””>
<h1>Contact Me</h1>
<p>Please feel free to contact me </p>
<h4>Your Information</h4>
</div>

2. Then add the following CSS code to style.css

Codes
.contact {
display: inline-block;
margin: 10px 30px;
text-align: center;
}

.profile-contact-img {
width: 200px;
}

Save and Try to see the result

becomes like this

Timedoor Coding Academy

151
Meeting 3 - Styling Form
Continue Your Website

Contact Form

1. Add the following HTML code after <h4>Your Information

</h4>

Codes
<form action=”contact.html” autocomplete=”off”>
<div class=”form-container”>
<-- Input Name Column -->
<div class=”input-container”>
<div class=”icon”>
<i class=”fas fa-user”></i>
</div>
<div class=”form-input”>
<input class=”input-item” type=”text”
name=”name” id=”name” placeholder=” “>
<label for=”name” class=”form-label”> Name
</label>
</div>
</div>

<-- Input City Column -->

Timedoor Coding Academy

152
Meeting 3 - Styling Form
Continue Your Website

Codes
<-- Input Email Column -->
<div class=”input-container”>
<div class=”icon”>
<i class=”far fa-envelope-open”></i>
</div>
<div class=”form-input”>
<input class=”input-item” type=”text”
name=”email” id=”email” placeholder=” “>
<label for=”email” class=”form-label”>
Email</label>
</div>
</div>

<-- Input Message Column -->

<div class=”textarea-container”>
<div class=”icon”>
<i class=”fas fa-comment”></i>
</div>
<div class=”form-textarea”>
<textarea class=”textarea” type=”text”
name=”message” id=”message” cols=”52”
rows=”8” placeholder=” “>
</textarea>
<label for=”message” class=”form-label”>
Message</label>
</div>
</div>
</div>

<input type=”submit” value=”Submit” class=”submit”>

</form>

Make sure the placeholder attribute contains 1 space!

2. Then add the following CSS code to style.css

Timedoor Coding Academy

153
Meeting 3 - Styling Form
Continue Your Website

CSS for container

Codes
.form-container {
display: flex;
justify-content: center;
flex-direction: column;
}

.input-container {
display: flex;
justify-content: center;
align-items: flex-start;
}

CSS for icon on input column

Codes
.icon {
margin-right: 6px;
}
.fa-user, .fa-map-marker-alt, .fa-envelope-open, .fa-
comment {
font-size: 27px;
}

CSS for Label

Codes
.form-label {
position: absolute;
left: 10px;
top: 10px;
}

Timedoor Coding Academy

154
Meeting 3 - Styling Form
Continue Your Website

CSS for Input Name, City, and Email

Codes
.form-input {
position: relative;
width: 100%;
border-bottom: 1px solid grey;
outline: none;
height: 48px;
margin-bottom: 15px;
padding: 0;
}

.input-item {
position: absolute;
top: 0;
left: 0;
border-style: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
font-size: 15px;
height: 100%;
}

Try to save and see first,

the result becomes like
this.

Timedoor Coding Academy

155
Meeting 3 - Styling Form
Continue Your Website

CSS for Input Message with Text Area

Codes
.textarea-container {
display: flex;
justify-content: center;
}

.form-textarea {
position: relative;
}

.textarea {
border-style: none;
border-bottom: 1px solid grey;
outline: none;
margin-top: 10px;
}

Save and review the results,

the Message column
becomes aligned with the
other columns.

CSS for Submit

Codes
.submit {
border-style: none;
border-radius: 25px;
color: aliceblue;
background-color: rgb(38, 70, 83);
margin: 5px;
cursor: pointer;
}

Timedoor Coding Academy

156
Meeting 3 - Styling Form
Continue Your Website

Now the Submit button also

has a style.
You can adjust the color to
your website!

Now then we will make the Label text move to the top when the
column is clicked.

Add the following CSS code

Codes
.input-item:focus + .form-label {
top: -5px;
left: -2px;
font-size: 10px;
}
.textarea:focus + .form-label {
top: -5px;
left: -2px;
font-size: 10px;
}

Try to see the results and fill out the form!

When typing into the next column, does the label

overlap with the data you entered?

Timedoor Coding Academy

157
Meeting 3 - Styling Form
Continue Your Website

Well, to fix this we need to add CSS so that the Label stays on top
when the input field is not being filled.

Codes
.input-item:not(:placeholder-shown).input-
item:not(:focus) + .form-label {
top: -2px;
left: -2px;
font-size: 10px;
color: rgb(138, 130, 130);
}

Take a look at your website again, now you can enter data without
being stacked with labels.

In this form, we use CSS Combinators and Pseudo Classes to

make styling based on the relationship between Parent, Children,
and SIbling.

1. Check on the Message input! Do the posts overlap too?

2. Add the pseudo class not as above for the textarea too!

Timedoor Coding Academy

158
Meeting 3 - Styling Form
Continue Your Website

Day/Date :
1. What is the function of CSS Combinators?

2. What is the difference between General and Adjacent Sibling

Selector?

3. What is the function of CSS Pseudo Class ?

4. Mention 2 pseudo classes for links!

5. Create CSS code for pseudo class not in selector p !

Timedoor Coding Academy

159
MEETING 4

IMAGE SLIDER USING

FOR EACH

What are we going to learn?

1. Creating Image Sliders Manually and Autoplay

2. Learning to Use forEach

Timedoor Coding Academy

161
Meeting

4 Image Slider Using For

Each

Have you ever seen a banner containing an image slide that

automatically changes on a website?

For example onPaypal website

or Logitech

It is called Image Slider.

Image Slider can be created with HTML, CSS, and Javascript!

In creating Image Slider, we will use forEach concept on

Javascript.

What is forEach?

Timedoor Coding Academy

162
Meeting 4 - Image Slider Using For Each
For Each Method

forEach() Method in Javascript

For Each is a loop that is used to access items in an array

without having to write down the length of the array.

forEach() included in the concept of loop / loop.

Remember the loop types we learned earlier?

Do you remember when to use a for loop and when to use a

while loop?

Now in forEach(), we repeat the command based on the length

of the array (same as for loop).

But with forEach, the number of iterations doesn’t need to be

counted because forEach automatically checks the number of
items in the array.

Syntax!

arrayName.forEach(function(variableName) {
//command
}

callback function variable that holds

parameter each item in the
Declared array array
name

Timedoor Coding Academy

163
Meeting 4 - Image Slider using For Each
For Each Method

Comparison of for loops and forEach

Codes
var genres = [‘Jazz’, ‘Pop’, ‘Rock’, ‘Dangdut’]

//for loop
for(i=0; i<genres.length; i++) {
document.write(“I choose “ + genres[i] + “<br>”);
}

//for each
genres.forEach(function(genre) {
document.write(“I choose “ + genre + “<br>”);
})

Create a new project in Replit and write the code above.

Are the results the same?

So now you understand the forEach method, right?

Let’s create an Image Slider with the forEach() concept on your
Blog website!

We will try 2 ways, namely

Manual and Autoplay Image
Slider

Timedoor Coding Academy

164
Meeting 4 - Image Slider using For Each
Manual Image Slider

Manual Image Slider

This Image Slider will

display the types of
projects to be created.

The location of the Image Slider is under the Jumbotron. So note

that you have to write the code between the Jumbotron and the
main content class!

1. First download the 5 images that will be used in this link:

http://tiny.cc/adv3_meeting4

2. Each image will have the following text in it :

• Game Development : Instead of playing game all
day long, why not create your own?
• Web Development : Every company need website.
Take advantage of that opportunity!
• Web Design : Color, Transition, Animation are cool.
• Kids Programming : Better know earlier with a fun
way of arranging blocks.
• Mobile Apps Development : Mobile apps are very
popular and most needed in this world.

Timedoor Coding Academy

165
Meeting 4 - Image Slider using For Each
Manual Image Slider

3 In index.html, create a new <section> with id=”slider”

after the <section> jumbotron. Write the following code:

Codes
<section id=”slider” class=”section-slider”>
<div class=”image-slider”>
<div class=”slide active”>
<img src=”assets/game-development.jpg” alt=””>
<div class=”slide-text”>
<h2>Game Development</h2>
<p>Instead of playing game all day long, why
not create your own?</p>
</div>
</div>

<!-- Copy paste the div class slide above (without

active word) until there are 5 div -->

Pay attention to the comments!

You have to create 5 slide divs for each image and text pair, right!
You can compose the text yourself.
See the results, have all your
images and texts appeared?

Timedoor Coding Academy

166
Meeting 4 - Image Slider using For Each
Manual Image Slider

Then, we will adjust the position of the image and text using
CSS

4. Add the following code to style.css

Codes
.section-slider {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 30px;
}

.image-slider {
position: relative;
width: 640px;
height: 426px;
}

.slide {
width: 100%;
position: absolute;
}

.slide img {
width: 100%;
border-radius: 15px;
}

.slide-text {
position: absolute;
bottom: 50px;
left: 30px;
background-color: rgba(220, 220, 220, 0.609);
padding: 15px ;
border-radius: 10px;
}

Timedoor Coding Academy

167
Meeting 4 - Image Slider using For Each
Manual Image Slider

Codes
.slide-text h2 {
font-size: 30px;
padding: 0;
margin: 0;
}

.slide-text p {
font-size: 15px;
padding: 0;
margin: 0;
}

.navigation {
position: absolute;
display: flex;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}

.slider-btn {
background-color: rgb(151, 151, 151);
width: 12px;
height: 12px;
border-radius: 50%;
cursor: pointer;
margin: 0 5px;
}

Look at the results, now all the pictures

are stacked in the same position and
the writing is already in the picture,
right?

Timedoor Coding Academy

168
Meeting 4 - Image Slider using For Each
Manual Image Slider

Next we need Javascript so that each Dots button can be clicked

to view other images manually.

5. Add the following code to the bottom line of script.js

Codes
var slides = document.querySelectorAll(‘.slide’);
var buttons = document.querySelectorAll(‘.slider-
btn’);
let currentSlide = 1;

//Manual images slider

var manualNav = function(manual) {
slides.forEach(function (slide) {
slide.classList.remove(‘active’);

buttons.forEach((btn) => {
btn.classList.remove(‘active’);
});
});

slides[manual].classList.add(‘active’);
buttons[manual].classList.add(‘active’);
}

buttons.forEach(function(btn, i) {
btn.addEventListener(‘click’, function() {
manualNav(i);
currentSlide = i;
})
})
The slides array store all slide class divs and each of their items is
accessed using forEach. So does buttons.
slides = [slide1, slide2, slide3, slide4, slide5]
buttons = [btn1, btn2, btn3, btn4, btn5]

Timedoor Coding Academy

169
Meeting 4 - Image Slider using For Each
Manual Image Slider

When do the items in the array begin to be accessed?

That is shown by the following code section where the
manualNav function is called when the Dots button is

buttons.forEach(function(btn, i) {
btn.addEventListener(‘click’, function() {
manualNav(i);
currentSlide = i;
})
})

So, when accessed by forEach, the active class slide1 is removed

and then slide2 is added the active class and so on.

So next we need to style the active class by adding a transition to

change the image.

Clip-path is a CSS property that is used to crop the part of

an element (such as an image) that you want to show or
hide.

Clip-paths have various forms which can be

generated using the clip path generator at
the following link:
https://bennettfeely.com/clippy/

This time we will use Circle. Open the link above and follow these
steps!

Timedoor Coding Academy

170
Meeting 4 - Image Slider using For Each
Manual Image Slider

First, find the before transition value by dragging the green

circle to the left and the red circle to the left.

So it produces a value
of 0% here

Second, find the after transition value by clicking again on

Circle.
Then drag the green circle to the far left and the red circle to the
far right.

So that it produces a
value of 100% here

Then we will enter the values in the CSS code.

6. Add the before transition value to the .slide selector as

shown in the following example

Codes
.slide {
/* add the code below*/
clip-path: circle(0% at 0 50%)
}

Timedoor Coding Academy

171
Meeting 4 - Image Slider using For Each
Manual Image Slider

7. Then add the new CSS code by entering the after transition
value like this

Codes
.slide.active {
clip-path: circle(150% at 0 50%);
transition: 2s;
transition-property: clip-path;
}

.slider-btn.active {
background-color: rgb(38, 70, 83);
}

100% 150%

The clip-path is changed

to 150% so that the image is
fully displayed.

Besides, we also add a different color for the clicked Dots button.

Take a look at the results!

Click on the Dots button, can
the image be changed?

Autoplay Image Slider

To create autoplay image slider or sliding automatically, you

need to add the following code in script.js

Timedoor Coding Academy

172
Meeting 4 - Image Slider using For Each
Manual Image Slider

Codes
var repeat = function(activeClass) {
let active = document.
getElementsByClassName(‘active’);

let i = 1;
var repeater = function() {
setTimeout(function() {
[...active].forEach(function(activeSlide) {
activeSlide.classList.remove(‘active’);
});

slides[i].classList.add(‘active’);
buttons[i].classList.add(‘active’);
i++

if(slides.length == i) {
i = 0;
}
if(i >= slides.length) {
return;
}
repeater();
}, 5000);
}
repeater();
}
repeat();

Just like Maual Image Slider, Autoplay also uses settings via the
active class.

But do you know where the difference is?

If in Manual the code is executed when clicking on the
button, in Autoplay the code is executed every 5 seconds.

Timedoor Coding Academy

173
Meeting 4 - Image Slider using For Each
Autoplay Image Slider

Then added a check if it reaches the last image (slides.length == i,

which is 5), then i value is reset to 0.

if(slides.length == i) {
i = 0;
}

By calling the repeater() function inside the repeat() function, the

loop is repeated continuously.

Take a look at the results!

The picture will change
automatically every 5
seconds

setTimeout()

In the code above, we use the setTimeout method, right?

setTimeout() Method is used to give a delay before

executing the command in it.

Syntax!

setTimeout(function() {
//command
}, timeInMillisecond);

Timedoor Coding Academy

174
Meeting 4 - Image Slider using For Each
Autoplay Image Slider

Day/Date :
1. What is forEach() method?

2. What is the syntax for writing forEach() ?

3. What is the function of this code on script.js

var slides = document.querySelectorAll(‘.slide’);

4. What is the function of setTimeout() method?

5. What is the correct code to fill in the following blanks?

buttons.1)......(function(btn) {
2)......classList.remove(‘active’);
});

Timedoor Coding Academy

175
MEETING 5

EXPLORING TOOLS AND

CREATE ABOUT PAGE

What are we going to learn?

1. Using The Blob Generator

2. Using The Background Generator
3. Using The Waves Generator
4. Continue Your Website

Timedoor Coding Academy

172
Meeting

5 EXPLORING TOOLS AND

CREATE ABOUT PAGE

Waving Style

Have you ever seen a

jumbotron with a wavy
background like this?

To make a waving style, it’s

very easy!

We will also learn to make waving styles using the Wave

Generator to make your website look more elegant!

Wave Generator is a tool for

creating various waveforms.
The tool that will be used is
getwaves.io

Timedoor Coding Academy

173
Meeting 5 - Exploring Tools and Create About Page
Wave Generator

Follow the following steps !

1. Open Link : https://getwaves.io/

2. When the page opens, you can use it right away

Shape colors opacity number of randomize

options waves
download file svg/svg code

output

3. We will create 2 waves, namely :

• wave 1 : the same color as your jumbotron but the color
is lighter
• wave 2 : white

wave 1
wave 2

Timedoor Coding Academy

174
Meeting 5 - Exploring Tools and Create About Page
Wave Generator

Wave 1

1. First make a lighter color than your jumbotron

Set all the settings as you like, if it’s done click the button
Download

Select Copy SVG Code

2. Now go to index.html, find the closing code </section>

jumbotron (or the line before the section slider) .
Then paste the line after the </section> code.

3. Add class=”wave1” inside the <svg> tag

4. Create the following code in style.css

Codes
.wave1 {
position: absolute;
top: 410px;
z-index: 2;
}

Timedoor Coding Academy

175
Meeting 5 - Exploring Tools and Create About Page
Wave Generator

Wave 2

1. Now create a second wave without changing the shape of

the first wave. You just need to change the color to #ffff

2. Next is the same as the first wave, Copy the SVG code and
paste after wave 1

3. Add class=”wave2” inside the <svg> tag

4. Create the following code in style.css

Codes
.wave2 {
position: absolute;
top: 450px;
z-index: 3;
}

5. Well now see the result becomes like this

You have successfully

created a waving
style on a jumbotron!

6. Check Image Slider!

If your Image Slider is stacked with waves, add
z-index: 10 on selector .image-slider

Timedoor Coding Academy

176
Meeting 5 - Exploring Tools and Create About Page
Background Generator

After jumbotron, then we will continue the website on the About

page.

Blob

Background

But we need to prepare the Blob and Background images as

above. Let’s use an online generator to make it!

Blob Generator

Blob Generator is a tool

to create various shapes
randomly.

There are many examples of Blob Generator on the internet, but

this time we will use Blob Generator from Magic Pattern.

Timedoor Coding Academy

177
Meeting 5 - Exploring Tools and Create About Page
Background Generator

Let’s follow the following steps !

1. Go to : https://www.magicpattern.design/tools/blob-
generator

2. On the left side you can set some Properties

1. Blob Fill : set type and color

2. Customize : set shape

Output

Output
3. Filter : set grain

Timedoor Coding Academy

178
Meeting 5 - Exploring Tools and Create About Page
Background Generator

3. Now let’s make Blob with free color

Output
Result
example:

4. Next, Export the image with .png format

5. Now that you have a blob image, save it in your project

folder!

Background Generator

Now then we will create

a background using the
Background Generator.

Timedoor Coding Academy

179
Meeting 5 - Exploring Tools and Create About Page
Background Generator

Follow the following steps!

1. Go to : https://bggenerator.com/index.php

2. On the left side you will see properties to set the desired
background.

Every click the result will be

different

change background size

Background Transparent/
Opaque If opaque, set the
color
set shape color

set shape transparency

set shape type
set shape amount
set maximum shape size

3. Come on now you try to make it yourself!

This is an example of the result.

Output

Color Type : Random Color

Shape Amount : 5
Max Shape Size : 100

Timedoor Coding Academy

180
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website

4. Now when you’re done, you can save it by clicking Save as

PNG.

5. Then save it in your project folder

Now it’s time to use your Blob and Background on the About page!

Continue Your Website

Besides of containing a self-description, the About page also

contains a Skills and Activity section like this.

li ss
Sk

v ity
Acti

Timedoor Coding Academy

181
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website

Follow the following steps !

1. Choose 6 pictures from the following link :

http://tiny.cc/adv3_meeting5
Then Download and Save in your project folder

2. Create a file about.html with HTML5 code structure.

Replace all the code in the <head> tag to be the same as
index.html

3. Add code <header>, <main>, <footer>

4. Copy Paste the code in the Header and Footer in

index.html to the about.html file

5. Add a background-image to the body selector with the

results from the background generator earlier.

Codes
background-image: url(assets/bg_generator.png);
background-size: cover;

6. Prepare 3 sections on <main>

Codes
<section id=”about”>
</section>

Timedoor Coding Academy

182
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website

7. Coding for About section.

Prepare your Photo to replace Cobee in

the sample image.

Use Remove Background website to

remove the background of your photo or
the Blob Generator to make it Blob.

If you don’t have one, you can also use an image from
Unsplash or Freepik.

Codes
<div class=”section-container”>
<h2 class=”section-title”>About Me</h2>
<p class=”section-subtitle”>My Introduction</p>
<div class=”about-image”>
<img class=”blob-image” src=”assets/blob-
orange.png” alt=”Blob Image”>
<img class=”blogger-image” src=”assets/Normal
1.png” alt=”Profile Picture”>
</div>
<div class=”about-description”>
<p> I am Cobee, 16 years old student who
lives in Denpasar. I started to learn
coding when I was an elementary student.
I was learning Scratch and create a
simple Memory Game with my own code. From
that day, I become a fan of coding and
started to learn more, for example
Javascript Game using Phaser Framework
and also Web Development.</p>
<h4>Cobee</h4>
</div>
</div>

Timedoor Coding Academy

183
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website

CSS

Codes
.section-container {
text-align: center;
padding: 10px;
}
.section-title {
font-size: 40px;
margin: 50px 0 0;
}
.section-subtitle {
font-size: 15px;
color: gray;
margin: 10px 0 0;
}
.about-flex-item {
display: block;
}
.about-image {
margin: 0;
}
You can adjust the
.blob-image {
style on the blob-
width: 500px; image and blogger-
height: auto; image selectors to
transform: rotate(-90deg); your image!
}
.blogger-image {
position: absolute;
width: 200px;
height: auto;
left: 580px;
top: 350px;
}

Timedoor Coding Academy

184
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website

Codes
.about-description p {
width: 60%;
display: block;
margin-left: auto;
margin-right: auto;
letter-spacing: 2px;
}

.about-description h4 {
color: gray;
letter-spacing: 2px;
}

Output

Timedoor Coding Academy

185
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website

8. Download the image for the Skill section in the skill images
folder at the link:
http://tiny.cc/adv3_meeting5

For Construct and Phaser, choose one according to what

you have learned at the Intermediate level.

9. Coding for section Skills.

HTML

Codes
<div class=”section-container”>
<h2 class=”section-title”>Skills</h2>
<p class=”section-subtitle”>My Technical Skill
for 3 years Learn Coding</p>
<div class=”skills-flex”>
<div class=”skill-item”>
<img src=”assets/scratch.png” alt=”Scratch”>
<h4>Game Development with Scratch</h4>
<p>1 year</p>
</div>
<div class=”skill-item”>
<img src=”assets/phaser.png” alt=”Phaser”>
<h4>Game Development with Phaser</h4>
<p>2 years</p>
</div>
<div class=”skill-item”>
<img src=”assets/html.png” alt=”HTML”>
<h4>Website Development</h4>
<p>1 year</p>
</div>
</div>
</div>

Timedoor Coding Academy

186
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website

CSS

Codes
.skills-flex {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 50px;
}
.skill-item {
box-shadow: 0 0 3px gainsboro;
border-radius: 10px;
padding: 15px;
background-color: white;
}
.skill-item img {
width: 200px;
height: 180px;
}
.skill-item p {
padding: 5px;
box-shadow: 0 0 10px gainsboro;
border-radius: 5px;
background-color: rgb(243, 199, 117);
}

Output

Timedoor Coding Academy

187
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website

9. Coding for Activity section.

HTML

Codes
<div class=”section-container”>
<h2 class=”section-title”>Activity</h2>
<p class=”section-subtitle”>My Activity</p>
<div class=”activity-flex”>
<div class=”activity-item”>
<img src=”assets/activity1.jpg” alt=”1”>
</div>
<div class=”activity-item”>
<img src=”assets/activity2.jpg” alt=”2”>
</div>
<div class=”activity-item”>
<img src=”assets/activity3.jpg” alt=”3”>
</div>
<div class=”activity-item”>
<img src=”assets/activity4.jpg” alt=”4”>
</div>
<div class=”activity-item”>
<img src=”assets/activity5.jpg” alt=”5”>
</div>
<div class=”activity-item”>
<img src=”assets/activity6.jpg” alt=”6”>
</div>
</div>
</div>

Adjust the path on the img with the 6 images that you
downloaded earlier!

Timedoor Coding Academy

188
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website

CSS

Codes
.activity-flex {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
justify-content: center;
}

.activity-item {
padding: 20px;
background-color: white;
box-shadow: 0 0 3px gainsboro;
border-radius: 5px;
margin: 10px;
}

.activity-item img {
width: 350px;
height: auto;
}

In the activity-item, you can change the background-

color and box-shadow as you like!

Timedoor Coding Academy

189
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website

Output

Timedoor Coding Academy

190
Meeting 5 - Exploring Tools and Create About Page
Questions

Day/Date :
1. What tools did you learn today? What are the functions?

2. What display is used in the Activity section?

3. What is used to set the background shape in the background

generator?

4. What is the value position used for the Profile Photo in the
About section?

5. What property is used to set the layering on Wave ?

Timedoor Coding Academy

191
Timedoor Coding Academy

cxcii
MEETING 6
ONLINE COMMUNITY AND
MAKE PROJECT PAGE

What are we going to learn?

1. Learning about Online Community

2. Continue Your Website

Timedoor Coding Academy

192
Meeting

6 Online Community and

Make Project Page

Online Community

Along with the development of the internet,

many innovations were created. One of them
is the Online Community.

Have you heard about Online Community?

Online Community is a group of people formed

virtually with the same interests or goals.

In the world of programming, there are also many examples of

online communities called Programming Communities.

Programming Communities
are created by utilizing Social
Platforms such as Discord and
Reddit.

Or even form custom Platforms like

Stack Overflow and KotaKode.

Timedoor Coding Academy

193
Meeting 6 - Online Community and Make Project Page
Online Community

What are the benefits of joining the Programming?

Community?

1. Benefits of Programming Community

Participating in the Programming Community is an important

thing for a programmer to do.

There are many benefits you can have!

Expanding Relations

Although programmers spend a lot of time in front of the

computer,

but still can socialize virtually

with programmers from various
countries.

Finding Solutions

In coding, getting errors is normal.

Now by joining the Programming
Community, you can get help solving
errors or asking questions about codes
that you don’t understand.

Timedoor Coding Academy

194
Meeting 6 - Online Community and Make Project Page
Online Community

Increasing Knowledge

Learning with Programming Community is one of the effective

learning methods.

You can take part in simple discussions in the

community, then discover new things that
were not taught before, such as coding hacks,
tips, new techniques, etc.

Practicing Communication

Not only coding skills will improve, but also communication skills!

You are required to use sentences that

are easy to understand and also polite
in order to be able to build trust from
other members.

2. Implementation on Stack Overflow

Now it’s time for us to learn

how to use the very popular
Programming Community,
namely Stack Overflow.

Timedoor Coding Academy

195
Meeting 6 - Online Community and Make Project Page
Online Community

Stack Overflow is a question and answer website for all

programmers.

What are the basic things you should know?

How to Ask

You don’t need to do this step because your teacher will

demonstrate it.

1. You must create an account first.

You can use a

Google account,
then fill in the
required fields.

2. After successfully logging in, you can see the Ask

Question button on the first page

Click Ask
Question
button

3. Creating Title
The title is the text that is the highlight of your question.

Timedoor Coding Academy

196
Meeting 6 - Online Community and Make Project Page
Online Community

You will see similar questions that have already been

posted

4. Body
Body is information that completes your title in detail, it can
be filled with images, code, text styling, and links.

You can create containers for program code by::

Block text that includes program code then click Ctrl+K

The output can be seen right away.

5. Tags
Tags make it easy to group questions on Stack Overflow. So
your question will be easier to reach.

Timedoor Coding Academy

197
Meeting 6 - Online Community and Make Project Page
Online Community

6. Post
Last, question is ready to post.

In the post you can see several features such as Up Vote and
Down Vote, answer column, checked answer as the most suitable
answer.

Up Vote dan Down Vote

Answer

Checked Answer

Timedoor Coding Academy

198
Meeting 6 - Online Community and Make Project Page
Online Community

How to Answer

To answer a question, you can open the Questions menu and

select the question.

At the bottom there is a column to answer the question.

So, isn’t it easy to use a Programming Community like Stack

Overflow?

By following the community you

will find it easier to solve your own
coding problems.

Continue Your Website

Let’s continue your website by adding a Project page!

Timedoor Coding Academy

199
Meeting 6 - Online Community and Make Project Page
Continue Your Website

Follow the following steps!

1. Download the rocket image at this link:

http://tiny.cc/adv3_meeting6

2. Create a project.html file with HTML5 code structure.

Replace all the code in the <head> tag to be the same as
index.html

3. Add code <header>, <main>, <footer>

4. Copy Paste the code in the Header and Footer in index.

html to the about.html file

5. On <main>, make the following code. Adjust the h3 title

and description paragraph with your creativity!

Codes
<div class=”page-title”>
<h1> My project Details </h1>
</div
<div class=”all-projects”>
<article id=”scratch-project”>
<div class=”project-detail”>
<div class=”project-img”>
<img src=”assets/desert_rally.png”
alt=”Desert Rally”>
</div>
<div class=”project-description”>
<h3> Desert Rally </h3>
<p> Desert Rally is using Visual Programming
to create kind of Endless Game. I am
using Scratch for ......
</p>

Timedoor Coding Academy

200
Meeting 6 - Online Community and Make Project Page
Continue Your Website

Codes
<p class=”project-link”>
Here is the link to project preview
<a href=”www.yourlink.com”> Desert Rally
Game</a>
</p>
</div>

6. To add another project, copy<article> code until

</article> then paste after</article> tag.

7. Remember to change the article id, title h3 and description with

other projects!

8. Next create CSS in style.css like this

Codes
.page-title {
padding: 10px;
margin 0;
}
.page-title h1{
text-algin: center;
padding 0;
}

Timedoor Coding Academy

201
Meeting 6 - Online Community and Make Project Page
Continue Your Website

Codes
.all-projects {
margin-top: 5%;
}
.project-detail {
margin: 50px 30px 100px;
padding: 20px;
border-radius: 5px;
background-color: rgb(255, 255, 255);
box-shadow: 2px 2px 5px grey;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.project-img {
margin: 5px ;
}
.project-img img {
width: 350px;
height: auto;
border-radius: 5px;
}
.project-description {
margin: 5px;
}
.project-description h3 {
margin: 0 5px 5px;
padding: 0;
font-size: 23px;
}

Timedoor Coding Academy

202
Meeting 6 - Online Community and Make Project Page
Continue Your Website

Codes
.project-description p {
margin: 20px 5px;
padding: 0;
line-height: 1.8;
text-indent: 40px;
}
p.project-link {
text-indent: 0;
}
.project-link a{
color: cadetblue;
text-decoration: underline;
margin: 0;
padding: 0;
}

8. Finally, add the following CSS for styling the rocket image

Codes
.rocket-container {
position: relative;
}
.rocket-container img{
position: absolute;
width: 180px;
top: 0;
right: 0;
transform: translateY(-50%);
}

Timedoor Coding Academy

203
Meeting 6 - Online Community and Make Project Page
Continue Your Website

Well now your project page is complete!

1. Add a background-image to each project.

2. Add a border to the project image.
3. Give different styling when the link is hovered.

Timedoor Coding Academy

204
Meeting 6 - Online Community and Make Project Page
Questions

Day/Date :
1. What is Online Community?

Give examples of Programming Community!

3. What position is used for the Rocket Image?

4. What is the use of the text-indent property?

5. What happens if you don’t use margin-top 6% in the all-

projects selector?

Timedoor Coding Academy

205
MEETING 7
CSS TRANSITION AND
REVEAL ON SCROLL

What are we going to learn?

1. Learning about SS Transition

2. Creating Reveal Element when Scroll
3. Continue Your Website

Timedoor Coding Academy

207
Meeting

7 CSS Transition and

Reveal On Scroll

CSS Transition

Have you noticed on most websites there is movement of

content when the page is scrolled, hovered or clicked?

Let’s Check!
√ Go to https://timedoor.net/
√ Scroll slowly and watch the movement of this content

Images and text

move up, don’t they?

Well, that is one example

of using the transition
property in CSS.

CSS Transition is used to provide transitions to elements by

changing property values subtly.

Timedoor Coding Academy

208
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

The transition property can be set to 4 values. However, the

required value is only the transition-duration value.

The 4 values can

be written in shorthand form like this

Codes
transition : width 1s ease 2s;

transition-delay
transition-timing-function
transition-duration
transition-property

1. Transition-duration

The transition-duration property is used to set the transition

duration in units of s or ms. The default value is 0.

Code Example:

Codes
transition-duration : 3s;

1. Create a new project in Replit named “CSS Transition”

2. Add an image that you can download here : http://tiny.cc/
adv3_meeting7
3. Generate HTML div code with class=container
4. Inside the div, Add an Aircraft image with class = aircraft
5. Then write the following code in style.css

Timedoor Coding Academy

209
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

Codes
.container {
width: 80%;
border: 2px solid black;
}
.aircraft {
display: block;
width: 50px;
margin-bottom: 20px;
transition-duration: 3s;
}
.container:hover .aircraft {
margin-left: 200px;
width: 70px;
}

6. Run and try to hover over the Aircraft image!

Result: if hover on div.container, then margin-left and width on

Aircraft are changed in 3 seconds subtly.

2. Transition-property

The transition-property is used to select what properties you

want to give the transition effect. The value can be filled with all
(default), certain properties, or none.

Code Example:

Codes
transition-property : margin-left;

Timedoor Coding Academy

210
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

1. In this project, add transition-property: margin-left; on the

aircraft selector !
2. Take a look, does the width value also change subtly?

3. Transition-timing-function

The transition-timing-function property is used to set the

starting and ending speed of the transition effect.

There are several types of values of the transition-timing-

ease (default)
Speed: slow at first, then fast, and finally slow.

1. In the previous project, add class a1 to the <img> aircraft, it

looks like this

Codes
<img class=”aircraft a1” src=”aircraft.png”
alt=”Aircraft”>

2. Then add the following CSS

Codes
.a1 {
transition-timing-function: ease;
}
3. Run and try to hover over the Aircraft image!

Timedoor Coding Academy

211
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

ease-in
Speed: start slow then go faster

1. In the previous project, copy and paste the same <img>

then change the class to aircraft a2.
2. Then add CSS selector a2 with ease-in
3. Run and try hover over Aircraft a2 image

ease-out
Speed: start faster, end slower

2. In the previous project, copy and paste the same <img>

then change the class to aircraft a3.
3. Then add CSS selector a3 with ease-out
4. Run and try hover over Aircraft a3 image

ease-in-out
Speed: start slow, then get faster, and a bit slow down again.

1. In the previous project, copy and paste the same <img>

then change the class to aircraft a4.
2. Then add CSS selector a4 with ease-in-out
3. Run and try hover over Aircraft a4 image

Timedoor Coding Academy

212
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

From the 4 Aircraft it can be compared that all images will

arrive at the same point in a span of 3 seconds, but with
different speed variations.

linear
Speed: from start to finish is fixed stable

1. In the previous project, copy and paste the same <img>

then change the class to aircraft a5.

Codes
<img class=”aircraft a2” src=”aircraft.png”
alt=”Aircraft”>

2. Then add the following CSS

Codes
.a5 {
transition-timing-function: linear;
}

3. Run and try to hover over the Aircraft a5 image!

steps(n, jump-term)
Value steps have a intermitten transition (stepping).
• n : number of steps
• jump-term : skipped steps (skip).
Jump consists of jump-start, jump-end, jump-none,
jump-both, start, and end.

Timedoor Coding Academy

213
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

1. To see the difference, open the following link :

https://codepen.io/danwilson/pen/gqOBJd
2. Then go back to replica to try one of the values
3. In the previous project, copy and paste the same <img>
then change the class to aircraft a6.
4. Then add CSS selector a6 with steps()
5. Run and try hover over Aircraft a6 image

cubic-bezier
Speed: written by yourself with numbers from 0-1.
The cubic-bezier value contains 4 parameters which are 4 speed
variations with free values.
Code Example:

Codes
transition-timing-function: cubic-bezier(0.075,
0.82,0.165,2);

1. In the previous project, copy and paste the same <img>

then change the class to aircraft a7.
2. Then add a7 CSS selector like the code above
3. Run and try hover over Aircraft a7 image

But, how do you know the cubic-bezier value easily?

Let’s follow the following steps !

Timedoor Coding Academy

214
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

Cubic-bezier Hacks

1. On the Aircraft a7 image, right click &

select Inspect
2. Then you will see this part

3. Click on the purple sign so this

screen appears
4. Try changing the shape of the
curve by drawing a purple line.
5. You will see the value changes

transition illustration

options for other timing-

functions (ease, linear, etc)

line for cubic-bezier

value entered into CSS

code

6. Now, if you get the desired value, copy the value and paste it in
the CSS code earlier.
7. Run again and see the transition changes

Timedoor Coding Academy

215
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

4. Transition-delay

The transition-delay property provides a time lag before the

transition starts.

Code Example:

Codes
transition : 2s;

In the previous project, add the code above to the aircraft

selector!

5. Multiple Property

If you want to transition more than 1 property, then connect the

shorthand transitions with a comma.

Code example:

Codes
transition : width 3s,opacity 3s ease-out 1s, margin-
left 3s ease-in-out;

1. In the previous project, add a new <img> Aircraft with class:

last-aircraft
2. Then add the following CSS code

Timedoor Coding Academy

216
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

Codes
.last-aircraft {
display: block;
width: 50px;
height: auto;
opacity: 0.5;
margin-bottom: 20px;
transition: width 3s ease-in 1s,opacity 3s
ease-out 1s, margin-left 3s
ease-in-out 1s;;
}
.last-aircraft:hover {
width: 80px;
opacity: 1;
margin-left: 30px;
}
3. Run and try to hover over the Aircraft image!

Reveal on Scroll

Reveal on Scroll means to run a transition animation when the

page is scrolled, for example like on PT. Timedoor website.

Well this time we will

practice it on a simple
article website about
Silicon Valley.

Your teacher will show you

an example of the result
first.

Timedoor Coding Academy

217
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

To create Reveal on Scroll, we will use HTML, CSS, and Javascript.

Let’s follow these steps!

1. Preparation

1. Create a project folder called Silicon Valley with index.

html, style.css, and script.js files

2. Add the asset folder too and download the image at this
link : https://tiny.cc/adv3_SiliconValley

3. Import Google Fonts named Roboto and WindSong.

Or you can also use the font you like

4. Create HMTL structure in index.html and import style.css

and script.js

2. Coding

1. Prepare 2 sections on the body, namely :

• section id=”header”
• section id=”content”

2. Type the following code in the

header section to create a
header like this

Timedoor Coding Academy

218
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

Codes
<section id=”header”>
<h1 class=”title”>Silicon Valley</h1>
<div class=”container-flex”>
<div class=”container”>
<div class=”big-image”>
<img src=”silicon_valley.png” alt=””>
<div class=”image-text”>
<h3>Sillicon Valley, California, USA
</h3>
</div>
</div>
</div>
</div>
</section>

3. Create the following code in style.css

Codes
body {
background-image: url(‘wave.svg’);
background-size:370%;
background-repeat: no-repeat;
}
.title {
text-align: center;
color: rgb(161, 10, 10);
font-size: 70px;
font-family: ‘WindSong’, cursive;
}
.container-flex {
display: flex;
justify-content: space-around;
align-items: center;
}

Timedoor Coding Academy

219
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

Codes
.container {
position: relative;
width: 640px;
height: 426px;
}
.big-image {
position: absolute;
width: 100%;
}
.big-image img {
border-radius: 8px;
width: 100%;
}
.image-text {
position: absolute;
bottom: 30px;
right: 50px;
padding: 1px 6px;
background-color: rgba(255, 248, 248, 0.699);
border-radius: 10px;
font-family: ‘Roboto’, sans-serif;
}

3. Next we will create a content section, which consists of 2

parts, namely:
• Have you ever heard about Silicon Valley?
• 3 Big Companies which are Located in Sillicon Valley

Timedoor Coding Academy

220
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

Codes
<section id=”content”>
<div class=”article-container”>
<div class=”description”>
<h2>Have you ever heard about Silicon
Valley?</h2>
<p> Silicon Valley is......</p>
</div>

<div class=”companies “>

<h2>3 Big Companies That’s Located in
Silicon Valley</h2>

<div id=”google” class=”company reveal”>

<img src=”google-img.jpg” alt=”Google”
width=”450px”>
<div class=”company-description”>
<h4>Google</h4>
<p>Founded in 1998 .....</p>
</div>
</div>

</div>
</div>
</section>

Also make a company reveal class div for Facebook and

Netflix!

4. Find descriptions of Silicon Valley, Google, Facebook, and

Netflix on Wikipedia!

Timedoor Coding Academy

221
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

5. Add the following code to style.css

Codes
h2 {
font-family: ‘Roboto’, sans-serif;
}

.article-container {
margin: 20px 70px;
}

.description p {
text-align: justify;
line-height: 1.8;
text-indent: 80px;
font-family: ‘Roboto’, sans-serif;
}

.companies {
display: flex;
flex-direction: column;
justify-content: center;
}

.company {
display: flex;
justify-content: space-evenly;
margin: 20px 10px;
padding: 30px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 8px grey;
}

.company img {
border-radius: 10px;
}

Timedoor Coding Academy

222
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

Codes
.company-description h4 {
padding: 0;
margin: 0;
font-size: 25px;
}
.company-description p {
width: 450px;
font-family: ‘Roboto’, sans-serif;
line-height: 1.8;
text-indent: 80px;
text-align: justify;
}
.reveal {
transform: translateY(150px);
opacity: 0;
transition: all 2s;
}

6. Next is to make Reveal on Scroll on the content of 3 Big

Companies.

In general, we will utilize of the ‘scroll’ event of the Event

Listener and create a reveal() function to animate the
content.

reveal() Function Algorithm:

a. Search for all elements with class reveal and store them
in a variable.
b. Checking each item, if its position is in the scroll area
then add the active class style.
c. Besides that, remove the reveal class

Timedoor Coding Academy

223
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

Codes
window.addEventListener(‘scroll’, reveal);

function reveal() {
var reveals = document.querySelectorAll(‘.reveal’)

reveals.forEach(reveal => {
var windowHeight = window.innerHeight;
var revealTop = reveal.getBoundingClientRect().top;
var revealPoint = 40;

if (revealTop < windowHeight - revealPoint) {

reveal.classList.add(‘active’)
} else {
reveal.classList.remove(‘active’)
}
});
}

Code Details :

• Object window : opened window

• Properti innerHeight : viewport height on window
• Method getBoundingClientRect() : to get size and position
values of elements based on viewport

viewport

Timedoor Coding Academy

224
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

Method getBoundingClientRect()

The
getBoundingClientRect()
method is used to get this
value

top bottom

left

right

In the code above, we used the revealTop variable to store the

top value of the company element.

Then check it, if the value is less than: viewport height

(windowHeight) minus 40 (revealPoint), then apply class active

Timedoor Coding Academy

225
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition

For example :
viewport height = 600
So when revealTop = 400, the revealTop value does not meet the
if check above, so the content is not displayed.

5. Finally, add the following code to the style.css to give the

style a final state (after transition).

Codes
.active {
transform: translateY(0px);
opacity: 1;
}

1. Try to the revealPoint variable value to 5, 500, then 700 !

2. Add a property to make the box-shadow purple after the
transition is complete.

Timedoor Coding Academy

226
Meeting 7 - CSS Transition and Reveal on Scroll
Questions

Day/Date :
1. What is CSS Transition? Try making one example of the code!

What is the value transition-timing-function? Mention 3

2. examples of value!

3. What event is used to make Reveal on Scroll ?

4. What is the use of the getBoundingClientRect() method?

5. What is the correct code to fill in the following blanks?

if (1)..... < windowHeight - 2)......) {
3).....classList.add(‘active’)
} else {
reveal.classList.4).....(‘active’)
}

Timedoor Coding Academy

227
MEETING 8
CSS ANIMATION AND
ANIMATION LIBRARY

What are we going to learn?

1. Learning CSS Animation

2. Using Library Scroll Reveal
3. Continue Your Website

Timedoor Coding Academy

228
Meeting

8 CSS Animation and

Animation Library

CSS Animation

Do you remember the CSS Transition in the last meeting?

Can you explain it again?

Aside from Transition, CSS also has the ability to create more
varied animations with CSS Animation.

CSS Animation is used to animate elements by changing

property values in multiple time variants using the help of
Keyframes.

From the definition above, can you imagine the

difference between Animation and Transition?

To see the comparison, let’s check the following video!

Source: https://www.youtube.com/watch?v=HZHHBwzmJLk

Timedoor Coding Academy

229
Meeting 8 - CSS Animation and Animation Library
CSS Animation

Comparison of CSS Transition and Animation

To understand better, take a look at the following Transition and

Animation illustrations!

CSS Transition
Transition

Starting Ending

The transition only sets the starting value and ending value of
the property.
For example, from margin-left value 0, to 30px in 2s

CSS Animation

Starting Keyframe 1

Keyframe 2 Ending
Animations can set many property value changes.
For example, from margin-left is 0, to 30px in 2s, then to 50px in
4s.

That’s because the Animation uses keyframes.

Timedoor Coding Academy

230
Meeting 8 - CSS Animation and Animation Library
CSS Animation

What is Keyframes?

Keyframes is a CSS statement that functions to custom the

movement of the middle from the animation by changing
the properties at a certain time.

Creating Animation

Syntax!
@keyframes Animationname {
from {
property: value;
}
to {
property: value;
}
}

Or use 0% (equal to from) and 100% (equal to)

Syntax!
@keyframes Animationname {
0% {
property: value;
}
100% {
property: value;
}
}

Timedoor Coding Academy

231
Meeting 8 - CSS Animation and Animation Library
CSS Animation

By using %, you can add more changes.

Code example

Codes
@keyframes Witchanimation {
0% {
margin-left: 0;
margin-top: 0;
}
25% {
margin-left: 200px;
margin-top: 0;
}
50% {
margin-left: 200px;
margin-top: 100px;
}
100% {
margin-left: 100px;
margin-top: 200px;
}
}

1. Create a new project in Replit named “CSS Animation”

2. Download the images in this link: http://tiny.cc/adv3_
meeting8
3. Upload images
4. Write HTML code to display image in div class container
5. Add class witch on <img>

Timedoor Coding Academy

232
Meeting 8 - CSS Animation and Animation Library
CSS Animation

6. Write the following code on style.css

Codes
.container {
width: 100%;
border: 2px solid lightblue;
}

.witch {
width: 70px;
margin-bottom: 10px;
}

7. Then add the Keyframe code on the previous page

Does the animation work?

With @keyframes code, you only create animation and don’t use
it.
To use it, use the animation-name and animation-duration
properties.

Using Animation

Codes
animation-name: Witchanimation;
animation-duration: 8s;

Timedoor Coding Academy

233
Meeting 8 - CSS Animation and Animation Library
CSS Animation

8. Add above code inside selector : .container:hover .witch

9. Run and see the result

Is after the animation finished, the image

returns to its original position right away?

What about transition?

So can you write down the second difference between

animation and transition?

The third difference is that Transitions must have trigger to

animate, such as hover, active, or media queries.

Meanwhile, the animation can be started immediately without

getting a trigger. Let’s prove it!

Try to move the animation-name and animation-duration

properties into the witch selector!
When is it started?

Timedoor Coding Academy

234
Meeting 8 - CSS Animation and Animation Library
CSS Animation

Aside from animation-name and animation-duration, CSS Animation

also has animation-delay and animation-timing-function properties
like CSS Transition.

There are 3 more properties, namely animation-iteration-count,

animation-direction, animation-fill-mode, and animation shorthand.

1. Animation-iteration-count

animation-iteration-count properti used to set the number of

times the animation is performed.

Codes
animation-iteration-count: 4; 4 times
animation-iteration-count: infinite; forever

1. Add the animation-iteration-count property 2 times to the

witch selector.
2. Experiment with infinite too!

2. Animation-direction

The animation-direction property is used to set the animation

direction, i.e. forward, backward, or both.

Timedoor Coding Academy

235
Meeting 8 - CSS Animation and Animation Library
CSS Animation

Codes
animation-direction: normal; forward
animation-direction: reverse; backward
animation-direction: alternate; forth and back
animation-direction: alternate-reverse; back and forth

1. Add an animation-direction property with one of the

values above.
2. Experiment for all values!

3. Animation-fill-mode

The animation-fill-mode property is used to set which styles are

applied before and after the animation is executed.
1. None (Default) :element uses its own style when not
animated.
2. Forwards : after the animation is complete, the element is
styled keyframes 100% (last keyframes)
3. Backwards : after the animation is complete, the element
applies style keyframes 0% (first keyframes)
4. Both : applying forwards and backwards

Codes
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

Timedoor Coding Academy

236
Meeting 8 - CSS Animation and Animation Library
CSS Animation

1. Add animation-fill-mode forwards and animation-delay

2s properties.
2. Add background-color red on selector witch and
background-color blue on keyframes 0%
3. Do an experiment for none, backwards and both.

Do you see the difference between none and backwards?

Before the delay, the value backwards immediately

changes the background color to red (according to the
keyframes value of 0%), while none changes the color after
the delay is complete.
What about forwards and both?

Forwards does not immediately change the background

color to red while both is the oposite.

So from all the values we can see that the finish line is different,
where forwards and both do not return to their original position.

4. Animation Shorthand

The animation property can be set to 6 values at once using an

animation shorthand sequence of values like this.
1. animation-name
2. animation-duration
3. animation-timing-function
Codes
4. animation-delay animation: Witchanimation
4s ease-out 1s infinite
5. animation-iteration-count
alternate
6. animation-direction

Timedoor Coding Academy

237
Meeting 8 - CSS Animation and Animation Library
Continue Your Website

Continue Your Website

Isn’t it easy to create animation?

In addition to making it yourself,

we can also use libraries to create
animations, for example AOS
Library, ScrollReveal, Animate, etc.

Why use the Animation Library?

The Animation Library was also created using CSS
Animation!
The Animation Library is ready-to-use, so it’s more
practical than creating your own.

Well now we will try to use the AOS LIbrary

It is done by adding a new key attribute to the HTML element

Code Example:

Codes
data-aos=”animation-name”

AOS is a free and very popular javascript animation

library for creating website animations easily.

Timedoor Coding Academy

238
Meeting 8 - CSS Animation and Animation Library
CSS Animation

Follow the steps below!

1. Go to AOS website : https://michalsnik.github.io/aos/

You will see

an example of
animation and its
key attribute

Try scrolling to the end!

On the website, the AOS LIbrary immediately shows how to
install it too!

2. Follow these steps for installation!

Add this code inside <head>

Codes
<link rel=”stylesheet” href=”https://unpkg.com/
aos@next/dist/aos.css” />

3. Also add the following code inside the <body>, exactly

before <script src=”script.js”><script>

Codes
<script src=”https://unpkg.com/aos@next/dist/
aos.js”></script>

Timedoor Coding Academy

239
Meeting 8 - CSS Animation and Animation Library
Continue Your Website

4. Next is the initialization of the library in the script.js file.

Write the following code on the bottom line

Codes
AOS.init();

Now you can use the key attribute right away! Let’s try it now!

We’re going to add a fade-right to this text

1. On <h2> with class=”jumbotron-text”, Add data-

aos=”fade-right”
2. Save and Reload your website !
3. Next, try to add another animation to the text and images
on the jumbotron !

What if you scroll down and go back to the

jumbotron, does the animation play again?

Settings

To make the animation only play once after reloading the

website, you can add the following attributes.

Timedoor Coding Academy

240
Meeting 8 - CSS Animation and Animation Library
Continue Your Website

Codes
data-aos-once=”true”

Besides once, just like CSS Animation you can also add duration,
delay, and easing (timing-function)

Codes
data-aos-once=”true”
data-aos-duration=”2000”
data-aos-delay=”500”
data-aos-easing=”ease-in”

In <h2> with class=”jumbotron-text”, Add :

1. data-aos-once=”true”
2. data-aos-duration=”2000”
3. data-aos-delay=”500”
4. data-aos-easing=”ease-in”

Try another value for data-aos-easing!

Remember this code in the previous meeting?

if (revealTop < windowHeight - revealPoint) {

reveal.classList.add(‘active’)
}

Timedoor Coding Academy

241
Meeting 8 - CSS Animation and Animation Library
Questions

The code above is used to determine at what position the

viewport is in when an element runs after transition.

Now in the AOS Library we can more easily set it using data-
aos-offset

Codes
data-aos-offset=”300”

1. On the jumbotron image, add the attribute:

data-aos-offset=”600”. Make sure the data-aos
attribute is there first!
2. Then try to scroll slowly and notice the image starts to
appear after scrolling!
3. After knowing its function, you can delete it

Multiple Element

If you want to set the animation at once on several elements, you

don’t need to add the data-aos attribute one by one!

Let’s just use javascript!

We will try it on the
project content

Timedoor Coding Academy

242
Meeting 8 - CSS Animation and Animation Library
Continue Your Website

Follow the steps below!

1. Add the following code to script.js before AOS initialization

code

Codes
var codingProjects = document.
querySelectorAll(‘.project’);

codingProjects.forEach(project => {
project.dataset.aos = ‘fade-down’;
})

The codingProjects variable stores all elements that use the

project class.

Then each item goes through a forEach stage to get a fade-

down animation.

2. Save and see the result!

3. Next is to add duration.

Add the following code after project.dataset.aos =
‘fade-down’;

Codes
project.dataset.aosDuration = 1500;

4. Save and see the result !

We can also add different values. For example, each

project does not start animation at the same time.

Timedoor Coding Academy

243
Meeting 8 - CSS Animation and Animation Library
Continue Your Website

5. Add index parameter to forEach so that it becomes like

this

Codes
codingProjects.forEach( (project, index) => {

The index parameter value will change according to the

number of project items, starting from 0, 1, 2, 3, until
length.codingProjects

Then add this code after aosDuration

Codes
project.dataset.aosDelay = index * 300;

[0, 1, 2, 3, ...]
Unlike animation type and duration, animation delay has a
different value for each element.
The value will increase when the index changes.

All Element

Settings can also be made on all elements that have

animation at once.

It is done by creating it inside AOS initializer.

Codes
AOS.init({
once: true
});

Timedoor Coding Academy

244
Meeting 8 - CSS Animation and Animation Library
Continue Your Website

6. Save and see the results!

Each project will fade-down in turn.

For example, like the code above, all elements that have
animations will only animate once.

1. Complete the AOS initialization with the code above and see
the result!
2. Add animations to other content as well including the
Project, Contact, and About!

Timedoor Coding Academy

245
Meeting 8 - CSS Animation and Animation Library
Questions

Day/Date :
1. What is CSS Animation?

2. Mention the differences between CSS Animation and CSS

Transition!

3. What are Keyframes? Give one example of the code!

4. What is AOS Library?

5. What is the correct code to fill in the blanks below??

codingProjects.forEach( (project, index) => {

1)...... = ‘fade-down’;
project.dataset.2)..... = 1000;
project.dataset.aosDelay = 3).... * 500;
})

Timedoor Coding Academy

246
MEETING 9
SUBMIT TO EMAIL AND
CREATE MODAL

What are we going to learn?

1. Creating Submit to Form

2. Creating Modal
3. Continue Your Website

Timedoor Coding Academy

246
Meeting Submit to Email and
9 Create Modal

Previously you have created a Contact page.

But the input data can’t be sent yet,

right?
Well now we will learn to send the data to
email!

Form Submit

Form Submit is a website that can help

us send data on forms to email.

Using the Submit Form is much easier!

We just need to add it to the action attribute
Remember what the action attribute does?

Form Submit is the

mediator for sending
data from the website to
our email.

Let’s try it on Replit !

1. Create a new project in Replit named “Meeting 9”.

To use the Submit Form, the main things to do are:

1. Entering the Form Submit link and the destination
email in the action attribute
2. Using the POST method

Timedoor Coding Academy

247
Meeting 9 - Submit to Email and Create Modal
Submit to Email

2. Write the following code in index.html and customize it

with your email!

Codes
<form action=”https://formsubmit.co/
[email protected]” method=”POST”>
<input type=”text” name=”text” >
<input type=”submit”>
</form>

3. Try Run and enter something in the form.

As a result you will be asked for activation via email.

4. Open your email and activate first.

5. Back to Replit. Run and try to input again.

You will be asked to recaptcha
Check I’m not a robot and the
form has been successfully
sent to your email!

6. Recheck your email and see if the data entered has been
successfully sent!

Timedoor Coding Academy

248
Meeting 9 - Submit to Email and Create Modal
Create Modal

Disable Recaptcha

7. You can also disable recaptcha!

Let’s add this code after input text

Codes
<input type=”hidden” name=”_captcha”
value=”false”>

8. Try running again and enter new text.

Check your email to make sure the data has been sent
successfully!

Note: Form Submit does not work on websites on the local path,
or websites that have not been hosted/deployed.

Modal

Have you ever seen a popup like

this when opening a website?
It is called capital.

Modal is a popup that appears on the top layer of a web page.

Usually, modals are used to display notifications, dialog boxes,
advertisements, etc.

What triggers modal to appear?

How do you close it?

Timedoor Coding Academy

249
Meeting 9 - Submit to Email and Create Modal
Create Modal

Let’s learn to create modal on Replit!

1. Still in the previous project, add the following code to

index.html

Codes
<button> Show Modal</button>
<div class=”modal-container”>
<div class=”modal”>
<h3>This is Modal</h3>
span>x</span>
</div>
</div>

We use a button to bring up the modal.

Then the modal will contain the text “This is Modal”

2. Next is styling on Button and Modal.

Add the following code to style.css, you can change the

value as you like!

Styling Button

Codes
button {
margin: 10px;
padding: 8px;
border-radius: 5px;
border: none;
background-color: rgb(47, 130, 255);
cursor: pointer;
color: white;
}

Timedoor Coding Academy

250
Meeting 9 - Submit to Email and Create Modal
Create Modal

Styling Modal

Modal-container is made to fill the web page and cover

all the content behind it.

Codes
.modal-container {
background-color: rgba(0, 0, 0, 0.404);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}

Modal is in form of a dialog box contains contents such as text,

images, or links.

Codes
.modal {
position: relative;
width: 150px;
padding: 30px;
border-radius: 10px;
text-align: center;
background-color: white;
}
.modal h3 {
padding: 0;
margin: 0;
}

Timedoor Coding Academy

251
Meeting 9 - Submit to Email and Create Modal
Create Modal

We can also add a modal close button.

Codes
.modal span {
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
}

3. Run and see the result!

Does modal appear right away?

Now to make it hidden before the button is pressed,
we need to add a property:
visibility : hidden

4. Add visibility: hidden property inside modal-

container selector

5. Next is to create javascript code in script.js

Variable Initialization

Codes
var modal = document.querySelector(‘.modal-
container’);
var button = document.querySelector(‘button’);
var btnClose = document.querySelector(‘span’);

Timedoor Coding Academy

252
Meeting 9 - Submit to Email and Create Modal
Continue Your Website

Show Modal

Codes
if (button) {
button.addEventListener(‘click’, function() {
modal.style.visibility = “visible”;
});
}

Close Modal

Codes
if (btnClose) {
btnClose.addEventListener(‘click’, function() {
modal.style.visibility = “hidden”;
});
}

6. Run and see the result!

You have successfully created a Submit Form and Modal, let’s

now apply both on the Contact page of your blog!

Timedoor Coding Academy

253
Meeting 9 - Submit to Email and Create Modal
Continue Your Website

Continue Your Website!

Now we will use the Submit Form to send data on the Contact
page and Modal to bring up the sent message popup.

Follow the steps below:

1. Open your Blog project website, then open the

contact.html file

2. Add action and method attributes to the <form> . tag

Codes
<form action=”https://formsubmit.co/
[email protected]” autocomplete=”off”
method=”POST”>

3. Add the code to disable Recaptcha after the <form> tag

above!

4. Save and Try to submit data. Remember, the data cannot be

sent yet, because the website is still stored in the local path.

But does the window move to the Form Submit

address?
We can change it to stay on our web page!

Timedoor Coding Academy

254
Meeting 9 - Submit to Email and Create Modal
Continue Your Website

It’s done by adding input next.

5. Add the following code after the Recaptcha disable code

Codes
<input type=”hidden” name=”_next” class=”next”>

Next we need to add the capital first

6. Add the following code before the closing tag </main>

Codes
<div class=”modal-container”>
<div class=”modal”>
<img src=”assets/rocket.png” alt=””>
<h3> Message Sent </h3>
<p> Thank you for submitting ! </p>
</div>
</div>

7. Next add the following code in style.css

Codes
.modal-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.411);
visibility: hidden;
opacity: 0;
transition: visibility 1s, opacity 1s;
}

Timedoor Coding Academy

255
Meeting 9 - Submit to Email and Create Modal
Continue Your Website

Codes
.show {
visibility: visible;
opacity: 1;
}

.modal {
width: 600px;
height: 400px;
position: relative;
background-color: white;
padding: 35px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.modal h3 {
margin: 0;
padding: 0;
font-size: 30px;
}

.modal p {
margin: 20px 0;
padding: 0;
font-size: 15px;
}

.modal img {
display: block;
margin: 0 auto 0 auto;
padding: 0;
width: 300px;
}

Timedoor Coding Academy

256
Meeting 9 - Submit to Email and Create Modal
Continue Your Website

8. Finally add this code to script.js

Codes
var btnSubmit = document.querySelector(‘.submit’);
var modal = document.querySelector(‘.modal-container’);

if(btnSubmit){
btnSubmit.addEventListener(‘click’, function(){
modal.classList.add(‘show’);

const next = document.querySelector(‘.next’);

next.setAttribute(‘value’,
‘https://cobee-the-junior-programmer.netlify.app/
contact.html’);
});

Adjust the name of your website

later when hosting it!

After pressing Submit, the modal will appear first then the data
is sent and reload the Contact page

9. Now, try to submit data on the Contact page, check whether

the modal has successfully appeared!

Note: Ignore the Submit Form

that hasn’t been successful in
sending data!

Timedoor Coding Academy

257
Meeting 9 - Submit to Email and Create Modal
Continue Your Website

Deploy to Netlify

To prove whether or not the data was sent to your email, let’s
deploy this Blog project to Netlify!

You can use a TImedoor Email : timedooracademy.adv@

account or your own gmail.com
account! Password : academy2019

After Deploy, don’t forget to rename

your website according to the
address in step 8 earlier!

Timedoor Coding Academy

258
Meeting 9 - Submit to Email and Create Modal
Questions

Day/Date :
1. What are the 2 main things that must be added to use Form
Submit?

2. What is Modal?

3. What is the value position used in the modal-container class?

4. What is the display value in the modal class?

5. What is the correct code to fill in the blanks below?

if(1)......){
btnSubmit.2)........(‘click’,function(){
modal.classList.3)......(‘show’);
const next = document.querySelector(‘.next’);
next.4)........(‘value’,
‘www.yourwebsite.com/index.html’);
});

Timedoor Coding Academy

259
Timedoor Coding Academy

260
MEETING 10
SPLASH SCREEN AND
RESPONSIVE WEBSITE

What are we going to learn?

1. Adding Splash Screen

2. Creating More Responsive Website

Timedoor Coding Academy

262
Meeting Splash Screen and
10 Responsive Website

Splash Screen

Have you ever heard about Splash Screen?

Splash Screen is the first

website display containing
text and images.

Here is the example on Twitter website:

https://twitter.com/?lang=en

Now, you are going to create Splash Screen on your Blog!

Your teacher will show you the

result of Splash Screen.

Follow the steps below:

1. First, download the required images on this link : http://

tiny.cc/adv3_meeting10

2. In index.html before <header>, add the following code.

Timedoor Coding Academy

263
Meeting 10 - Splash Screen and Responsive Website
Splash Screen

Codes
<div class=”splash”>
<h1 class=”splash-text” data-aos=”fade-
right” data-aos-duration=”200”> Hello Guys!
<br> Welcome to the club </h1>
<img class=”astronaut-dabbing” src=”assets/
astronaut1.png” alt=””>
<img class=”astronaut-takeoff” src=”assets/
astronaut2.png” alt=””>
</div>

Now as what we have seen in the code above, we add an

animation’s to the h1 text.

3. Next, create the following CSS code in style.css

Div Splash

You can change the background color as you like!

Codes
.splash {
position: fixed;
width: 100%;
height: 100%;
background-color: cadetblue;
z-index: 200;
margin: 0;
padding: 0;
top: 0;
}

The above code makes the entire index.html page

covered by the div class splash.

Timedoor Coding Academy

264
Meeting 10 - Splash Screen and Responsive Website
Splash Screen

Splash h1

Codes
.splash h1 {
position: absolute;
top: 60%;
left: 40%;
font-size: 50px;
}

The h1 position is at the

bottom. If the top value
above isn’t quite right, you
can adjust it yourself!

Splash Image

Codes
.astronaut-dabbing {
position: absolute;
top: 40%;
left: 18%;
width: 400px;
animation: hide 0.5s 1s forwards;
}

.astronaut-takeoff {
position: absolute;
top: 93%;
left: 18%;
}

The image of Astronaut 2 (take off) is made invisible

because later it will slide from below.

Timedoor Coding Academy

265
Meeting 10 - Splash Screen and Responsive Website
Splash Screen

Animation

Codes
.animation {
animation: glide 3s ease-out forwards;
}
@keyframes hide {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
75% {
opacity: 0.7;
}
100% {
opacity: 0;
}
}
@keyframes glide {
50% {
transform: scale(0.8);
}
100% {
transform:translateY(-900px) scale(0.1);
}

Key frames hide animate opacity so that astronaut 1 is

blinking.

While the key frames glide allows Astronaut 2 to glide

upwards.

Timedoor Coding Academy

266
Meeting 10 - Splash Screen and Responsive Website
Splash Screen

4. Add this Javascript code in script.js

Show Splash

The following code is used to set the appearance and

disappearance of the splash screen

Codes
var splash = document.querySelector(“.splash”);
if(splash) {
document.addEventListener(‘DOMContentLoaded’,
function(event){
setTimeout(function(){
splash.style.display = ‘none’
}, 3000);
});
}

Animate Astronaut

The following code is used to animate the Astronaut 2

image after a 400 ms lag

Codes
var animate = document.querySelector(‘.
astronaut-takeoff’);
if(animate) {
document.addEventListener(
‘DOMContentLoaded’, function(event){
setTimeout(function(){
animate.classList.add(‘animation’)
}, 400);
});
}

Timedoor Coding Academy

267
Meeting 10 - Splash Screen and Responsive Website
Splash Screen

The DomContentLoaded event is executed after the HTML

document is loaded, without waiting for the elements in it
(such as images, text, etc.) to finish loading.

Animate Astronaut

The following code works to animate the Astronaut 2

image after a 400 ms lag

Codes
var splashText = document.querySelector(
‘.splash-text’);
if(splashText) {
setTimeout(function(){
splashText.innerHTML = “Come in!”
}, 2000);
}

5. Finished ! Save and see the results!

Responsive Website

Remember what a responsive website is?

Let’s make your blog more responsive!

You can use the Developer Tools to see changes that occur on
the website.

1. It is done by doing Right Click > Inspect on your website.

2. Then, click this icon

Timedoor Coding Academy

268
Meeting 10 - Splash Screen and Responsive Website
Responsive Website

So, to make your website responsive, follow the steps below!

1. Write the following code in style.css

Codes
@media (max-width: 900px) {
* {
font-size: 2.5vw;
padding: 0px;
margin: 0px;
}
}

The code above is for setting the font-size, padding, and

margins, overall when the viewport is 900px or less.

Well next we will set it per page.

Make sure you write the next step in Media Queries and adjust
the value if the code in the book isn’t quite right!

Index.html

1. Splash Screen
On the splash screen we will reduce the size of the image
and also the text.

Add the following code for the Wave and Aside.

Codes
.splash h1 {
font-size: 3vw;
}

Timedoor Coding Academy

269
Meeting 10 - Splash Screen and Responsive Website
Responsive Website

Codes
.astronaut-dabbing {
top: 56%;
left: 18%;
width: 200px;
}
.astronaut-dabbing {
top: 96%;
left: 7%;
}

Save and check if the Splash Screen is responsive!

2. Jumbotron
In this jumbotron we will hide the image and make the
text centered.

Add the following code for the jumbotron part

Codes
main {
margin-top: 40px;
}
.header {
height: 40px;
}

Timedoor Coding Academy

270
Meeting 10 - Splash Screen and Responsive Website
Responsive Website

Codes
.header-flex {
display: block;
padding: 3px;
}
.jumbotron-title {
font-size: 4vw;
}
.mini-text-flex {
justify-content: center;
margin: 3px;
}
.jumbotron-text {
text-align: center;
}
.mini-text {
text-align: center;
padding-bottom: 30px;
margin: 10px;
}
.jumbotron img {
display: none;
}

Save and check if Jumbotron is responsive!

3. Wave and Aside

The wave must be raised and the aside will be hidden.

Add the following code for the Wave and Aside . sections

Timedoor Coding Academy

271
Meeting 10 - Splash Screen and Responsive Website
Responsive Website

Codes
.wave1 {
top: 195px;
}
.wave2 {
top: 210px;
}
aside {
display: none;
}

Save and check if Wave and Aside are responsive!

4. Content
Because Aside is hidden, the main content is placed in
the middle.
Add the following code for Content section!

Codes
.main-content {
margin: 0;
justify-content: center;
}
.content {
margin: 10px 0;
}

Save and check if Content is responsive!

5. Image Slider
Image and text size of Image Slider must be reduced

Add the following code for the Image Slider section

Timedoor Coding Academy

272
Meeting 10 - Splash Screen and Responsive Website
Responsive Website

Codes
.image-slider {
width: 50%;
height: 240px;
}
.slide-text {
left: 0;
bottom: 0;
}
.slide-text h2 {
width: 150px;
height: auto;
font-size: 20px;
}
.slide-text p {
font-size: 10px;
}

The result is like the image

on the side.

5. Article Content
The following code works for main content like projects and
videos.

Add the following code for the Image Slider section

Timedoor Coding Academy

273
Meeting 10 - Splash Screen and Responsive Website
Responsive Website

Codes
.article-title {
font-size: 4vw;
}
.project-container {
display: block;
}
.project-container {
margin-bottom: 20px;
}
.project img {
max-width: 100%;
max-height: 20%;
}
.video-content {
max-width: 100%;
max-height: 220px;
}

The result is like the image

on the side.

Project.html

On the Project page, the display of each project card is changed

to a block and the rocket image is hidden.

Timedoor Coding Academy

274
Meeting 10 - Splash Screen and Responsive Website
Responsive Website

Add the following code still inside Media Queries

Codes
.page-title h1 {
font-size: 4vw;
}
.project-detail {
display: block;
}
.project-detail img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
max-height: 50%;
}

Timedoor Coding Academy

275
Meeting 10 - Splash Screen and Responsive Website
Responsive Website

Codes
.project-description h3 {
font-size: 2vw;
text-align: center;
}
.project-description p {
font-size: 2vw;
}
.rocket-container {
display: none;
}

Save and check if the Project page is responsive!

Contact.html

On the Contact page, we will hide the

illustration image that was previously on
the left side.

Add the following code for the Contact

page

Codes
.contact-container {
justify-content: center;
}
.illustration-img {
display: none;
}

Timedoor Coding Academy

276
Meeting 10 - Splash Screen and Responsive Website
Responsive Website

Codes
.modal {
display: flex;
align-items: center;
flex-direction: column;
max-width: 60%;
max-height: 40%;
padding: 10px;
}
.modal h3 {
margin: 0;
padding: 0;
font-size: 4vw;
}
.modal img {
max-width: 60%;
}
Save and check if the Contact page is responsive!

About.html
On the About page, we have to
rearrange the position of the Blob
image and Profile Photo, so that they
remain in the center.

Add the following code to the About Us page

Codes
.section-title {
font-size: 4vw;
}

Timedoor Coding Academy

277
Meeting 10 - Splash Screen and Responsive Website
Responsive Website

Codes
.section-subtitle {
font-size: 2vw;
}
.blob-image {
max-width: 60%;
max-height: 60%;
transform: rotate(-90deg);
}
.blogger-image {
position: absolute;
max-width: 27%;
max-height: 50%;
left: 37%;
top: 100px;
}
.about-description p {
width: 80%;
}
.skill-item {
margin: 5px;
}

Finished! You’ve managed to make your blog more

responsive!

Deploy to Netlify

Now you can re-deploy your website to Netlify!

Email : timedooracademy. Try opening your website link on

[email protected] your cellphone too to make sure
Password : academy2019 it is already responsive!

Timedoor Coding Academy

278
Meeting 10 - Splash Screen and Responsive Website
Questions

Day/Date :
1. What is splash screen?

What is the value position on the Splash Screen to cover the

2. entire page?

3. What method is used to give a time lag before the text on the
Splash Screen is displayed?

4. Mention things you have to do to make a responsive website!

5. What properties were changed on the project card

on the Project page to make it more responsive?

Timedoor Coding Academy

279
Timedoor Coding Academy

280
MEETING 11
CREATE YOUR OWN
WEBSITE

What are we going to learn?

1. Knowing the Development Process

2. Choosing Website Types
3. Creating Website Design

Timedoor Coding Academy

282
Meeting

11 Create Your Own

Website

It’s time to create your own

website!

Have you got any idea already?

Before starting to share your ideas, let’s remember the

development process again!

1. Development Process

Do you still remember what are the steps in the

Development process?

1. Explore 2. Design 3. Coding

6. Deploy 5. Revise 4. Present

So today we will explore and put your ideas into form.

Timedoor Coding Academy

283
Meeting 11 - Create Your Own Website
Exploring Idea

2. Choose The Website Type

The following are the types of websites that you can choose.

1. Blog
You can use several types of content on this blog
website as a reference.
Personal blog about
your work (such as
photography, music,
game project, or dance
cover)

Blog about tutorials

or tips, such as
cooking recipes or
life hacks.

2. E-commerce

Or do you want to create an e-commerce

website again?

You can create a sales website, but with different

products!

Sport Stuffs
Action Figures
Book Store

Timedoor Coding Academy

284
Meeting 11 - Create Your Own Website
Exploring Idea

3. Article
You can also create a website that contains articles
with the theme of Education, Social, or Reviews.

Coding
For example, articles on
types of programming
languages.

Review
For example, a review
of funny items on the
Marketplace or a food review.

Public Figure
For example, a football
player or a legendary
musician.

Tourist Destination
For example, interesting
spots that must be visited
in America.

So, what website do you want to create?

Timedoor Coding Academy

285
Meeting 11 - Create Your Own Website
Exploring Idea

3. Make Your Own Website

Let’s describe your website in the form below!

1. Website Description

My Website

Website title :
Website type :

Home Page content :

Detail Page content :

Contact Page content :

About Page content :

Timedoor Coding Academy

286
Meeting 11 - Create Your Own Website
Exploring Idea

2. Website Design

After creating a website description, let’s describe the general

design first so it’s easier to implement!

Website Design

Now, share your ideas with

your classmates in turn!

Timedoor Coding Academy

287
Meeting 11 - Create Your Own Website
Exploring Idea

3. Exploring Assets

It’s time to collect the necessary assets!

You can use the following link recommendations to avoid

Illustration Images

Freepik Undraw

https://www.freepik.com/ https://undraw.co/

Photography
Unsplash Pexels

https://unsplash.com/ https://www.pexels.com/

Gif Images

Giphy Tenor

https://giphy.com/ https://tenor.com/

Image Icon

Flaticon Font Awesome

https://giphy.com/ https://fontawesome.com/

Timedoor Coding Academy

288
Meeting 11 - Create Your Own Website
Exploring Idea

4. Conclusion

Finally, let’s make a target for working on your website during the
10th to 15th meeting.

How far do you want to finish in 1 meeting?

Meeting Target

Timedoor Coding Academy

289
Meeting 11 - Create Your Own Website
Exploring Idea

What have you done today?

Did you achieve your target at this meeting?

Timedoor Coding Academy

290
MEETING 12
CREATE YOUR OWN
WEBSITE2.

What are we going to learn?

1. Preparing the Project Structure

2. Creating Headers, Footers, and Home Pages

Timedoor Coding Academy

292
Meeting

12 Create Your Own

Website

1. Project Preparation

Before you start coding, make sure you prepare the folder
correctly.

What are the files needed?

√ index.html
√ style.css
√ script.js
√ Folder assets

Assets
1. Move all the images you downloaded in the previous
meeting to the Assets Folder

2. Make sure your image size is no more than 2 MB to

avoid websites that are too heavy.
Use Compress Image Online to
minimize the image size.

File HTML
1. HTML Structure
As usual, create an HTML:5 structure in the index.html

Timedoor Coding Academy

293
Meeting 12 - Create Your Own Website
Home Page

2. Import CSS
Import link style.css inside <head> tag

Codes
<link rel=”stylesheet” type=”text/css”
href=”style.css”>

3. Google Font

Find at least 2 suitable fonts to collaborate on your

website

Remember to copy and paste the link in the <head> tag

4. Animation Library

Add the following code inside the <head> tag

Codes
<link rel=”stylesheet” href=”https://unpkg.com/
aos@next/dist/aos.css” />

Also add the following code inside the <body>, exactly

before <script src=”script.js”><script>

Codes
<script src=”https://unpkg.com/aos@next/dist/
aos.js”></script>

Timedoor Coding Academy

294
Meeting 12 - Create Your Own Website
Home Page

Next is the initialization of the library in the script.js file.

Write the following code on the bottom line

Codes
AOS.init();

5. Header, Main, Footer

Create structure with <header>, <main>, <footer> tags inside

<body> tag.

6. Copy Paste File

Copy and paste the index.html file to create another page

template.

2. Home Page Design

What is displayed on the Home Page?

The Home Page must at least contain the following contents!

Header
• Contains the Website Name on the right and 3
Navigations on the left.
• Sticky (sticks to the top when scrolled)

Jumbotron
• Contains Text and Images
• Image may change on hover
• Can use Wave style

Timedoor Coding Academy

295
Meeting 12 - Create Your Own Website
Home Page

Preview Main Content

• Show a general snippet of your content and explain the
description in general terms.
You can also add Best Sellers.

• If you find a related video, add it on the Home Page

• Also Add Location using Google Maps

Footer
• Contains Social Media and its icons,
• Contains Copyright

4. Conclusion

What have you done today?

Did you achieve your target at this meeting?

Timedoor Coding Academy

296
MEETING 13
CREATE YOUR OWN
WEBSITE2.

What are we going to learn?

1. Creating Detail Page

Timedoor Coding Academy

298
Meeting

13 Create Your Own

Website

1. Detail Page

The Detail page displays a complete description of your

product/article.

What is the first thing to do?

1. Remember to Copy Paste the Header and Footer on the

Home Page to the Details Page

2. Add Image, Title, and Description in a Card so that your

content is neater.

You can also add tables for more detailed content.

Timedoor Coding Academy

299
Meeting 13 - Create Your Own Website
Detail Page

2. Conclusion

What have you done today>

Did you achieve your target at this meeting?

Timedoor Coding Academy

300
MEETING 14
CREATE YOUR OWN
WEBSITE2.

What are we going to learn?

1. Creating Contact Page and About Me

Timedoor Coding Academy

302
Meeting

14 Create Your Own

Website

1. Contact Page

The Contact page contains a form that can be sent to email.

1. Copy Paste the Header and Footer to the Contact Page.

2. You can add an Illustration image (not required) before

the Form.

3. Style on the Form can follow the previous Blog Project,

where when clicked, the label will move to the top.

4. Use Form Submit to send to Email.

Add action and method attributes to the Form and

customize it with your email!

Codes
<form action=”https://formsubmit.co/
[email protected]” method=”POST”>
<input type=”text”>
<input type=”submit”>
</form>

Don’t forget to add the Javascript code too!

5. Add Modal after clicking the Submit button

Timedoor Coding Academy

303
Meeting 14 - Create Your Own Website
Contact and About Page

2. About Page

On the About Page you can be free to be creative.

1. Copy Paste the Header and Footer to the About Page.

2. At least contain your photo and ID

3. You can add Activities, Skills, or Testimonials (not required)

3. Conclusion

What have you done today?

Did you achieve your target at this meeting?

Timedoor Coding Academy

304
MEETING 15
CREATE YOUR OWN
WEBSITE2.

What are we going to learn?

1. Brainstorming
2. Revising
3. Creating More Responsive Website

Timedoor Coding Academy

306
Meeting

15 Create Your Own

Website

1. Brainstorming

Now it’s time for you to show your project progress to

your classmates !
When showing it, do some of these things!

1. Describe your website name

and description
Try to explain what type of
website you create and what it
is used for.

2. Ask your friends if your have

problems.
Don’t be shy to ask questions in
your group!

3. Ask your friends’ opinion about

your website.
Ask your friends if they have any
opinion on how to improve your
website

2. Revising

It’s time to implement your friends’ suggestions!

What are all the suggestions you would like to make?

You can start with the easiest suggestions!

Timedoor Coding Academy

307
Meeting 15 - Create Your Own Website
Detail Page

3. Creating More Responsive Website

Do you still remember how to create More Responsive

Website?

1. You can start by opening Developer Tools (Right click >

Inspect)

2. Create CSS code with Media Queries

Codes
@media (max-width: 900px) {
* {
font-size: 2.5vw;
}
}

4. Assignment

At the next meeting, you will present the results of your website.

So make your presentation at home with the following

conditions.

1. Prepare 3-5 minutes presentation

Timedoor Coding Academy

308
Meeting 15 - Create Your Own Website
Home Page

2. You can make it in Microsoft Power Point, Canva, or others.

Add matching images.

3. The presentation must contain this point:

Opening
• Name, Class, Greeting

Website Type
• What topics are contained in your website content

Design
• The source of the assets used (image or video)
• Screenshot of a small part of each page

Suggestions accepted
• Mention the suggestions you received from friends
during brainstorming
• Mention the revision you made based on that
suggestion

Closing
• Add your impression while studying at Timedoor
• Quotes (optional)
• Closing

Timedoor Coding Academy

309
Meeting 15 - Create Your Own Website
Home Page

4. Conclusion

What have you done today?

Did you achieve your target at this meeting?

Timedoor Coding Academy

310
MEETING 16
CREATE YOUR OWN
WEBSITE2.

What are we going to learn?

1. Deploy Wesbite to Netlify

2. Presentation
3. Concept Test on Google Form

Timedoor Coding Academy

312
Meeting

16 Create Your Own

Website

1. Deploy to Netlify

Congratulations for finishing your website! It’s time for

you to Deploy to Netifly!

Email : timedooracademy.
[email protected]
Password : academy2019

Don’t forget to change your website name in Setting and

include the link on your Presentation!

2. Presentation

Are you ready to present your website to your

classmates?

Take turns, let’s start the

presentation and exchange
comments with your friends!

Timedoor Coding Academy

313
Meeting 16 - Create Your Own Website
Detail Page

3. Concept Examination

Finally, you have to complete the final exam through the

Google Form that will be given by your teacher!

4. Conclusion

What lessons can you take from today’s meeting?

How do you feel after successfully creating your own website?

Timedoor Coding Academy

314
CREDITS
References

• https://www.w3schools.com/
• https://developer.mozilla.org/en-US/
• https://css-tricks.com/
• https://www.youtube.com/

Images

• https://www.freepik.com/
• https://www.flaticon.com/
• https://www.vecteezy.com/
• https://undraw.co/
• https://unsplash.com/
• https://www.pexels.com/
• https://giphy.com/

Websites Included

• https://www.google.com/maps
• https://www.paypal.com/id/home
• https://www.amazon.com/
• https://www.logitech.com/en-us
• https://timedoor.net/
• https://academy.timedoor.net/
• https://replit.com/
• https://bennettfeely.com/clippy/
• https://getwaves.io/
• https://www.magicpattern.design/tools/blob-generator
• https://bggenerator.com/index.php
• https://michalsnik.github.io/aos/
• https://formsubmit.co/
• https://www.netlify.com/
• https://fontawesome.com/
• https://fonts.google.com

Timedoor Coding Academy

315
Timedoor Coding Academy

316

Frontenddevelopment Assignment 1683725195
No ratings yet
Frontenddevelopment Assignment 1683725195
18 pages
The HTML DOM (Document Object Model) D O M
No ratings yet
The HTML DOM (Document Object Model) D O M
15 pages
Project Report On Electronic Voting Machine Using Fpga Verilog
50% (2)
Project Report On Electronic Voting Machine Using Fpga Verilog
23 pages
FSWD Question Bank 5 Units
No ratings yet
FSWD Question Bank 5 Units
54 pages
The DOM, EVENTS, DATE-TIME
No ratings yet
The DOM, EVENTS, DATE-TIME
40 pages
Web Technology1
No ratings yet
Web Technology1
122 pages
06-Dom & Bom
No ratings yet
06-Dom & Bom
28 pages
JavaScript HTML DOM
No ratings yet
JavaScript HTML DOM
16 pages
JavaScript HTML DOM
No ratings yet
JavaScript HTML DOM
30 pages
JS-DOM-Events
No ratings yet
JS-DOM-Events
51 pages
KTLT 2-6
No ratings yet
KTLT 2-6
142 pages
Module - 3 Javascript Part 2 DOM
No ratings yet
Module - 3 Javascript Part 2 DOM
46 pages
11 - JavaScript DOM
No ratings yet
11 - JavaScript DOM
25 pages
Java Script
No ratings yet
Java Script
87 pages
Js Events and Dom
No ratings yet
Js Events and Dom
16 pages
Jquery Workshop
No ratings yet
Jquery Workshop
254 pages
The HTML Dom
No ratings yet
The HTML Dom
9 pages
Javascript Dom
No ratings yet
Javascript Dom
20 pages
JavaScript DOM
No ratings yet
JavaScript DOM
18 pages
Saira Web Systems and Technologies Lecture 6 06012025 090208pm
No ratings yet
Saira Web Systems and Technologies Lecture 6 06012025 090208pm
40 pages
DOM Slides
No ratings yet
DOM Slides
38 pages
UECS2094 UECS 2194 - Topic 4
No ratings yet
UECS2094 UECS 2194 - Topic 4
30 pages
AWP HandBook ADVANCED WEB PROGRAMMING 3161611
No ratings yet
AWP HandBook ADVANCED WEB PROGRAMMING 3161611
91 pages
DOM Manipulation in JavaScript
No ratings yet
DOM Manipulation in JavaScript
11 pages
Web Lec 09
No ratings yet
Web Lec 09
61 pages
Sample
No ratings yet
Sample
7 pages
Session 11 DOM Manipulation
No ratings yet
Session 11 DOM Manipulation
16 pages
Chapter 9
No ratings yet
Chapter 9
61 pages
Java Script
No ratings yet
Java Script
87 pages
JS Dom
No ratings yet
JS Dom
11 pages
Module 4 Cheatsheet JavaScript
No ratings yet
Module 4 Cheatsheet JavaScript
4 pages
JS Dom
No ratings yet
JS Dom
71 pages
Module 6 JavaScript DOM
No ratings yet
Module 6 JavaScript DOM
33 pages
Ocument Bject Odel: A Standard For How To Get, Change, Add, or Delete HTML Elements
No ratings yet
Ocument Bject Odel: A Standard For How To Get, Change, Add, or Delete HTML Elements
39 pages
Unit 2 Notes
No ratings yet
Unit 2 Notes
34 pages
Day - 1
No ratings yet
Day - 1
48 pages
Unit - Ii
No ratings yet
Unit - Ii
39 pages
BIS601 Module 2 PDF
No ratings yet
BIS601 Module 2 PDF
33 pages
Lec 8 Basic JavaScript DOM Client Side Validation 03052023 122614pm
No ratings yet
Lec 8 Basic JavaScript DOM Client Side Validation 03052023 122614pm
61 pages
The HTML DOM (Document Object Model)
No ratings yet
The HTML DOM (Document Object Model)
11 pages
HTML Dom
No ratings yet
HTML Dom
10 pages
AVA Cript: HTML Doms
No ratings yet
AVA Cript: HTML Doms
32 pages
Iwt Unit 3
No ratings yet
Iwt Unit 3
25 pages
Dom (D O M) : Ocument Bject Odel
No ratings yet
Dom (D O M) : Ocument Bject Odel
8 pages
5248 26042020074047 IV Unit Javascript HTML Dom Document
No ratings yet
5248 26042020074047 IV Unit Javascript HTML Dom Document
76 pages
DOM Events
No ratings yet
DOM Events
6 pages
Document Object Model
No ratings yet
Document Object Model
48 pages
IP - Chapter 4
No ratings yet
IP - Chapter 4
85 pages
DOM and Events (Part 1) : I. What Is DOM?
No ratings yet
DOM and Events (Part 1) : I. What Is DOM?
3 pages
Document Object Model: Softuni Team
No ratings yet
Document Object Model: Softuni Team
47 pages
07DOM and JS Events
No ratings yet
07DOM and JS Events
54 pages
Day - 7 Arrays, Objects
No ratings yet
Day - 7 Arrays, Objects
6 pages
Lec 8 - DOM
No ratings yet
Lec 8 - DOM
144 pages
2.1 Usage of Document Object Model (DOM)
No ratings yet
2.1 Usage of Document Object Model (DOM)
10 pages
Module 4
No ratings yet
Module 4
18 pages
Javascript3 1
No ratings yet
Javascript3 1
3 pages
IWT Unit 3 - JS DOM
No ratings yet
IWT Unit 3 - JS DOM
29 pages
Var El Document - Queryselector ('H1') Console - Log ('El:', El)
No ratings yet
Var El Document - Queryselector ('H1') Console - Log ('El:', El)
8 pages
JS Dom
No ratings yet
JS Dom
4 pages
Chapter Five JavaScript On HTML Forms
No ratings yet
Chapter Five JavaScript On HTML Forms
8 pages
PCC Pantone Catalog 2003 Low Res
No ratings yet
PCC Pantone Catalog 2003 Low Res
22 pages
Multiple-Choice Questions
No ratings yet
Multiple-Choice Questions
8 pages
CPR - SourceCode
No ratings yet
CPR - SourceCode
8 pages
Guidelines For Online Test
No ratings yet
Guidelines For Online Test
17 pages
Red Hat Enterprise Linux-8-8.2 Release Notes-En-US
100% (1)
Red Hat Enterprise Linux-8-8.2 Release Notes-En-US
131 pages
VB &HTML (III Bcom CA)
No ratings yet
VB &HTML (III Bcom CA)
51 pages
Import Os
No ratings yet
Import Os
15 pages
Azure Fundamentals Key Terms
No ratings yet
Azure Fundamentals Key Terms
18 pages
Customer - Service - Desk Final Thesis
No ratings yet
Customer - Service - Desk Final Thesis
116 pages
DEF CON 23 - Sean-Metcalf-Red-vs-Blue-AD-Attack-and-Defense
No ratings yet
DEF CON 23 - Sean-Metcalf-Red-vs-Blue-AD-Attack-and-Defense
81 pages
Bca1mpcl 2021 Oct Methodology of Programing in C Language
No ratings yet
Bca1mpcl 2021 Oct Methodology of Programing in C Language
2 pages
3 Simple Ways To Find Your Windows 10 Product Key
No ratings yet
3 Simple Ways To Find Your Windows 10 Product Key
5 pages
(Student) L1 L2 FAG1003 Type Computer Component
No ratings yet
(Student) L1 L2 FAG1003 Type Computer Component
31 pages
Tara's Treetop Adventure: Author: Sangeeta Velegar Illustrator: Sarthak Sinha
No ratings yet
Tara's Treetop Adventure: Author: Sangeeta Velegar Illustrator: Sarthak Sinha
15 pages
Adobe and Digital Textile Printing Booklet
No ratings yet
Adobe and Digital Textile Printing Booklet
12 pages
2 Cookbook VBFA Adoption 20180406
No ratings yet
2 Cookbook VBFA Adoption 20180406
16 pages
Unit 4 Programming Assignment
No ratings yet
Unit 4 Programming Assignment
9 pages
Integrating Artificial Intelligence With Simulation Modeling
No ratings yet
Integrating Artificial Intelligence With Simulation Modeling
21 pages
PseudocodeStructureOCR PDF
No ratings yet
PseudocodeStructureOCR PDF
3 pages
Genshin Nahida Build & Weapon Genshin Impact - GameWith
No ratings yet
Genshin Nahida Build & Weapon Genshin Impact - GameWith
1 page
Compiler Design BCST 602
No ratings yet
Compiler Design BCST 602
2 pages
Actors
No ratings yet
Actors
2 pages
Ms SQL Server Always On Io Reliability Storage System On Hitachi VSP
No ratings yet
Ms SQL Server Always On Io Reliability Storage System On Hitachi VSP
25 pages
English Modbus Tools Poll v7.1.0 and Slave v6.2.0
No ratings yet
English Modbus Tools Poll v7.1.0 and Slave v6.2.0
3 pages
Algorithms PDF
No ratings yet
Algorithms PDF
6 pages
Faq Clicks Digital Token
No ratings yet
Faq Clicks Digital Token
7 pages
Xi-Cs-Sqp-Set 1
No ratings yet
Xi-Cs-Sqp-Set 1
4 pages
Boddu Saiteja - 198105
No ratings yet
Boddu Saiteja - 198105
1 page
Kolynos
No ratings yet
Kolynos
2 pages
Quick JavaScript Learning In Just 3 Days: Fast-Track Learning Course
From Everand
Quick JavaScript Learning In Just 3 Days: Fast-Track Learning Course
Vijay K.R.
No ratings yet