0% found this document useful (0 votes)
93 views330 pages

En - Part 2 - Teens Advance Web Dev

Uploaded by

spiritxfn1
Copyright
© © All Rights Reserved
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
Copyright
© © All Rights Reserved
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>

<script>
document.getElementById(“hello-world”).
innerHTML = “Hello World !”
</script>

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


<script src=”https://kit.fontawesome.com/
f90068558c.js” crossorigin=”anonymous”></script>

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>

<div>
<img class=”jumbotron-img”
src=”assets/img-header.png” alt=””
width=”auto” height=”300”>
</div>
</div>
</div>
</section>

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>


<script src=”https://kit.fontawesome.com/
f90068558c.js” crossorigin=”anonymous”></script>

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”>
<!-- use your home address iframe-->
<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!

1. Create this following code inside Footer tag!

Codes
<div class=”main-footer”>
<h3 class=”info-top”>Cobee The Junior
Programmer</h3>
<div class=”social-media”>
<i class=”fab fa-instagram-square”></i>
<i class=”fab fa-twitter-square”></i>
<i class=”fab fa-facebook-square”></i>
<i class=”fas fa-envelope”></i>
</div>
<p class=”info-center”>Copyright &copy; 2021.
Cobee. All rights reserved.</p>
</div>

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“) <!-- class -->
document.querySelector(“#title“) <!-- id -->
document.querySelector(“p.title“) <!-- p element
with class 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>
<!-- add youtube 1 video here -->

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


Difficult!</h3>
<!-- add youtube 2 video here -->
</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”>


<li class=”search-tags-item”>HTML</li>
<li class=”search-tags-item”>Code</li>
</ul>
</div>

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>
<!-- containing other elements -->
</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”>
<!-- containing other elements -->
</form>

Code example:

Codes
<form action=”result.html”>
<!-- containing other elements -->
</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]”>
<!-- containing other elements -->
</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”>
<!-- containing other elements -->
</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” >
<!-- containing other elements -->
</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” >
<!-- containing other elements -->
</form>

5. Novalidate

Novalidate attribute is used to ignore data validation.

Syntax!
<form novalidate>
<!-- containing other elements -->
</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

<input type=”date”
name=”date” min=”2021-01-
01” max=”2021-01-31”>

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?


<input type=”1).....” name=”date_of_birth”
2)....=”2021-07-01” 3)....=”2021-07-31”>

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 -->


<div class=”input-container”>
<div class=”icon”>
<i class=”fas fa-map-marker-alt”></i>
</div>
<div class=”form-input”>
<input class=”input-item” type=”text”
name=”city” id=”city” placeholder=” “>
<label for=”city” class=”form-label”>City
</label>
</div>
</div>

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 -->

<div class=”navigation”>
<div class=”slider-btn active”></div>
<div class=”slider-btn”></div>
<div class=”slider-btn”></div>
<div class=”slider-btn”></div>
<div class=”slider-btn”></div>
</div>
</div>
</section>

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>

<section id=”skill”>
</section>

<section id=”activity”>
</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>

<div class=”rocket-container”>
<img src=”asset/rocket.png” alt=”Rocket”>
</div>
</div>
</article>
</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>

<!-- add Facebook and Netflix here-->


</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


copyright.

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

10

11

12

13

14

15

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

You might also like