En - Part 2 - Teens Advance Web Dev
En - Part 2 - Teens Advance Web Dev
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
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
6
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM
HTML DOM
HTML
DOM
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.
Codes
<p id=”hello-world”>Hi World!<p>
<script>
document.getElementById(“hello-world”).
innerHTML = “Hello World !”
</script>
8
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods
1. Accesing Elements
1. getElementById
getElementById Method means accessing element based on
atribut id.
Codes
<p id=”programmer”>I am Programmer<p>
Codes
var result = document.
getElementById(“programmer”).innerHTML
console.log(result) //show in log
9
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods
2. getElementByTagName
getElementByTagName Method means finding element based
on tag name.
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
3. getElementByClassName
getElementByClassName Method means finding element based
on class attribute.
10
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods
Codes
var result = document.
getElementsByClassName(“apps”)[0].innerHTML
console.log(result) //show in log
Codes
var item = document.1)......(“apps”)
var i;
for (i=0; i< item.length; 2).....) {
var results = item[i].innerHTML;
console.log( 3)......)
}
11
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods
Method :
√ setAttribute(attribute, value)
1. innerHTML
innerHTML Property is used to change content on element; such
as txt or picture.
Codes
var result = document.getElementsByTagName(“p”)
[1].innerHTML = “Hello Programmer !”;
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”;
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”;
13
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods
4. setAttribute
setAttribute Method has the same use with attribute property, but
very different in the writing of property and value pairs.
Codes
var result = document.getElementsByTagName(“p”)
[0].setAttribute(“class”, “blue”)
3. Adding Element
Methods used:
√ createElement() creating element
√ appendChild() adding element
14
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods
Codes
//create element p
var paragraph = document.createElement(“P”);
paragraph.innerHTML = “New Paragraph”;
//add to body
document.body.appendChild(paragraph);
4. Removing Element
Codes
document.body.removeChild(paragraph);
15
Meeting 9 - Intro to Javascript and HTML DOM
HTML DOM Methods
Codes
<ul id=”language”> parent
<li>Javascript</li>
<li>Python</li> child
<li>Kotlin</li>
</ul>
Codes
var list = document.getElementById(“language”);
list.removeChild(list.childNodes[1]);
16
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website
3. Import style.css
<link rel=”stylesheet” type=”text/css”
href=”style.css”>
17
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website
1. Creating Jumbotron
18
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website
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>
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;
}
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) ;
}
21
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website
2. Adding Javascript
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”;
Codes
<script src=”script.js”></script
22
Meeting 9 - Intro to Javascript and HTML DOM
Create New Website
Codes
<button id=”icon-up” onclick=”changeText()”> <i
class=”far fa-hand-point-up”></i></button>
23
Meeting 9 - Intro to Javascript and HTML DOM
Questions
Day/Date :
1. What is HTML DOM?
24
MEETING 10
Example of aside
content
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!
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 !
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>
27
Meeting 10 - Aside, Article, and Iframe Tag
Aside Tag
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;
}
28
Meeting 10 - Aside, Article, and Iframe Tag
Article Tag
Just like the aside tag, the article tag is often used to group other
tags such as <h1>, <p>, <img>.
Syntax!
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>
29
Meeting 10 - Aside, Article, and Iframe Tag
Iframe Tag
Syntax!
30
Meeting 10 - Aside, Article, and Iframe Tag
Iframe Tag
Output
31
Meeting 10 - Aside, Article, and Iframe Tag
Continue Your Website
Continue Website
1. Adding Aside
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>
32
Meeting 10 - Aside, Article, and Iframe Tag
Continue Your Website
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!
33
Meeting 10 - Aside, Article, and Iframe Tag
Continue Your Website
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>
Codes
.content {
margin-left: 10%;
max-width: 65%;
}
article {
max-width: 100%;
}
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;
}
Output
35
Meeting 10 - Aside, Article, and Iframe Tag
Continue Your Website
3. Adding Footer
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 © 2021.
Cobee. All rights reserved.</p>
</div>
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;
}
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!
38
MEETING 11
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
42
Meeting 11 - Add Media (Video and Audio)
File Paths
Code example:
Codes
<img src”https://i.ibb.co/rbw73q3/hero.png”>
Code example:
Codes
<img src”assets/hero.png”>
We can also use above file Paths file on video and audio that
will be learned afterward.
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.
43
Meeting 11 - Add Media (Video and Audio)
Video Tag
Syntax!
<video controls>
<source src=””>
</video>
Codes
<h3>Let’s Learn About Coding with Me</h3>
<video width=”320” height=”240” controls>
<source src=”coding.mp4”>
</video>
44
Meeting 11 - Add Media (Video and Audio)
Audio Tag
Syntax!
<audio controls>
<source src=””>
</audio>
Codes
<h3>BackSound</h3>
<audio controls>
<source src=”fantasy.mp3”>
</audio>>
45
Meeting 11 - Add Media (Video and Audio)
Youtube Video
Video Youtube
1. Go to:
https://www.youtube.com/watch?v=hb7Q33ysCwI
46
Meeting 11 - Add Media (Video and Audio)
Youtube Video
querySelector() Method
Codes
document.querySelector(“p“)
So, the Paragraph element in the first line of the html document
will be accessed.
47
Meeting 11 - Add Media (Video and Audio)
Youtube Video
Codes
document.querySelector(“.title“) <!-- class -->
document.querySelector(“#title“) <!-- id -->
document.querySelector(“p.title“) <!-- p element
with class title -->
querySelectorAll()
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!
Codes
<button onclick=”dayMode()”> Day </button>
<button onclick=”nightMode()”> Night </button>
48
Meeting 11 - Add Media (Video and Audio)
Youtube Video
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“
}
Now, let’s use it on your website to add Like and Dislike icon.
Continue Website.
1. Add Like-Dislike
49
Meeting 11 - Add Media (Video and Audio)
Youtube Video
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>
Codes
.toggle {
display: flex;
justify-content: center;
margin: 10px;
}
.btn {
background-color: transparent;
}
.button:hover {
cursor: pointer;
}
.green {
color: green;
}
.red {
color: red;
}
50
Meeting 11 - Add Media (Video and Audio)
Youtube Video
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’)
}
Let’s add 2 videos about coding on your website! You can use the
following video / find it yourself!
51
Meeting 11 - Add Media (Video and Audio)
Youtube Video
Codes
<article id=”video”>
<div class=”item-video”>
<h3 class=”article-title”>What is Coding?</h3>
<!-- add youtube 1 video here -->
52
Meeting 11 - Add Media (Video and Audio)
Questions
Day/Date :
1. What are the differences between Absolute and Relative Path?
this.classList.2)....(‘green’)
}
53
MEETING 12
DOM EVENTS
12 DOM Events
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.
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
56
Meeting 12 -DOM Events
Event Handler
1. Mouse Events
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.
57
Meeting 12 -DOM Events
Event Handler
Codes
<img src=”https://media.giphy.com/media/
VTtANKl0beDFQRLDTh/giphy.gif” alt=”Code”
width=”100” height=”auto”
onmouseover=”rotateGif(this)”
onmouseout=”rotateBack(this)”>
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)”
}
58
Meeting 12 -DOM Events
Event Handler
2. Window Events
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.
59
Meeting 12 -DOM Events
Event Handler
Codes
<div id=”div” onscroll=”scrolling()”>
<h3>How to differentiate HTML, CSS, and
Javascript on the website?</h3>
Codes
#div {
overflow: scroll;
width: 250px;
height: 200px;
}
Codes
function scrolling() {
document.getElementById(“div”).style.color =
“blue”;
}
60
Meeting 12 -DOM Events
Event Handler
3. Keyboard Events
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.
Codes
function keypress() {
var content = document.getElementById(“div”)
content.innerHTML = “You pressed a key!”
content.style.color = “red”
}
61
Meeting 12 -DOM Events
Event Handler
Codes
<body onkeydown=”keypress()”>
Try it on Replit!
Codes
<button class=”button”>Event Handler</button>
62
Meeting 12 -DOM Events
Event Handler
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!
63
Meeting 12 -DOM Events
Event Listener
Code example:
Codes
var paragraph = document.querySelector(‘.p3’);
paragraph.addEventListener(‘click‘, function(){
paragraph.style.backgroundColor = ‘lightblue’;
})
Codes
<button class=”button2”>Event Listener</button>
64
Meeting 12 -DOM Events
Event Listener
Codes
var btn = document.querySelector(“.button2”);
btn.addEventListener(‘click’, function() {
alert(“Hello World!”);
});
btn.addEventListener(‘click’, function() {
console.log(“Hello Programmer!”);
});
65
Meeting 12 -DOM Events
Continue Your Website
Codes
function changeImage(element) {
element.setAttribute(“src”,
“assets/img-header2.png“)
}
function changeImageBack(element) {
element.setAttribute(“src”,
“assets/img-header.png“)
}
66
Meeting 12 -DOM Events
Continue Your Website
Codes
<img onmouseover=”changeImage(this)”
onmouseout=”changeImageBack(this)”
class=”jumbotron-img” src=”assets/img-header.png”
alt=”Jumbotron Image” width=”700” height=”300”>
67
Meeting 12 -DOM Events
Questions
Day/Date :
1. What types of Event Handlers did you learn above?
68
MEETING 13
DOM Traversal
72
Meeting 13 -DOM Traversal and Prevent Default
DOM Traversal
Example :
But by knowing the Traversal method, you only need to find one
branch to go to another.
With the DOM Traversal method, we can more easily delete the
parent element (ie card) by clicking the close button (child
element).
73
Meeting 13 -DOM Traversal and Prevent Default
Prevent Default
Prevent Default
Case Example :
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
74
Meeting 13 -DOM Traversal and Prevent Default
Let’s Practice
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>
Codes
.container {
display: flex;
justify-content: space-around;
}
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;
}
76
Meeting 13 -DOM Traversal and Prevent Default
Let’s Practice
Codes
.close:hover {
color: red;
cursor: pointer;
}
Codes
var close = document.querySelectorAll(‘.close‘);
77
Meeting 13 -DOM Traversal and Prevent Default
Let’s Practice
Continue Website
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!
Codes
.project-container {
display: flex;
justify-content: space-around;
}
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;
}
80
Meeting 13 -DOM Traversal and Prevent Default
Questions
Day/Date :
1. What is DOM Traversal?
81
MEETING 14
DOM
EVENT BUBBLING
14 DOM
Event Bubbling
Event Bubbling
Example :
1. Child Element has onclick event
2. Parent Element has different onclick
event
84
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling
Codes
var close = document.querySelectorAll(‘.close’);
The code above means, when the close button is clicked, the
parent element (i.e. item) will display none
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”);
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.
86
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling
Codes
e.stopPropagation()
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
Codes
<input type=”text” placeholder=”Your Name”>
87
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling
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()”>
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;
}
88
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling
Codes
function send() {
alert(“Answers sent!”)
}
Continue Website
Let’s apply the concepts that have been learned on the webiste by
creating Add and Closeable Items.
89
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling
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>
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;
}
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;
}
91
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling
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”);
}
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”
}
}
92
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling
Codes
function newElement() {
// Create new list with the inputed value
var li = document.createElement(“li”);
var inputValue = document.
getElementById(“myInput”).value;
// Delete list
for(i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = “none”
}
}
93
Meeting 14 -DOM Event Bubbling
DOM Event Bubbling
94
Meeting 14 -DOM Event Bubbling
Questions
Day/Date :
1. What is Event Bubbling?
95
MEETING 15
ADVANCE 2
EXAM
ADVANCE 2
EXAM
HTML FORM
1 HTML Form
On the website, we often see pages that contain Form, like the
picture above.
104
Meeting 1 - HTML Form
Tag Form
Source: https://www.youtube.com/watch?v=salY_Sm6mv4
Let’s find out first what elements are needed to create a form!
The tags that will be used in creating the form are tag <form>,
<input>, and <label>.
105
Meeting 1 - HTML Form
Tag Input
<form> Tag is used as a container for all the elements in it, such
as labels, inputs, etc.
Syntax!
<form>
<!-- containing other elements -->
</form>
Codes Output
<input>
106
Meeting 1 - HTML Form
Tag Input
Type attribute
Codes
<input type=”text” name=”firstname”>
Name attribute
Codes
<input type=”text” name=”firstname”>
id attribute
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.
107
Meeting 1 - HTML Form
Tag Label
Codes
<label for=”firstname”>First name:</label><br>
<input type=”text” id=”firstname” name=”firstname” >
Output
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
108
Meeting 1 - HTML Form
Tag Textarea
Code example:
Codes
<label for=”address”>Address</label><br>
<textarea name=”address” id=”address” cols=”30”
rows=”20” ></textarea>
Output
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
110
Meeting 1 - HTML Form
Tag Form Attributes
Submit Form
Now to send data you can use the <input> tag with Submit type.
Code example
Codes
<input type=”submit”>
On your last Replit project, add a Submit input like the code
above
111
Meeting 1 - HTML Form
Let’s Practice
Let’s check!
1. Action
Syntax!
<form action=”URL”>
<!-- containing other elements -->
</form>
Code example:
Codes
<form action=”result.html”>
<!-- containing other elements -->
</form>
Codes
<form action=”mailto:[email protected]”>
<!-- containing other elements -->
</form>
112
Meeting 1 - HTML Form
Let’s Practice
2. Target
Code example
Codes
<form action=”result.html” target=”blank”>
<!-- containing other elements -->
</form>
3. Method
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
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
Codes
<form action=”result.html” target=”blank”
method=”GET” autocomplete=”on” >
<!-- containing other elements -->
</form>
5. Novalidate
Syntax!
<form novalidate>
<!-- containing other elements -->
</form>
114
Meeting 1 - HTML Form
Tag Form Attributes
Form Practice
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>
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%;
}
116
Meeting 1 - HTML Form
Let’s Practice
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!.
117
Meeting 1 - HTML Form
Questions
Day/date:
1. Explain what the function of the form on the website is!
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 </.....>
</.....>
118
MEETING 2
Types on Input
1. Text
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”
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
type=”number”
Code example
Codes
<label for=”quantity”>Quantity</label>
<input id=”quantity” type=”number” name=”quantity”
min=”1” max=”5”>
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”>
124
Meeting 2 - Input Types and Attributes
Input Types
5. Date
type=”date”
Code example:
Codes
<label for=”date”>Date</label>
<input id=”date” type=”date” name=”date”>
Output
6. Checkbox
type=”checkbox”
Code example
Codes
<input id=”checkbox” type=”checkbox”
name=”checkbox1” value=”pencil”>
<label for=”checkbox”>Pencil</label>
125
Meeting 2 - Input Types and Attributes
Input Types
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>
126
Meeting 2 - Input Types and Attributes
Input Types
8. File
type=”file”
Code example
Codes
<label for=”file”>Upload File</label> <br>
<input id=”file” type=”file” name=”file”>
Output
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.
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
128
Meeting 2 - Input Types and Attributes
Continue Your Website
2. Placeholder
Code example:
Codes
<input type=”text” name=”language”
placeholder=”Ex.HTML”>
Output
3. Required
Code example
Codes
<input type=”text” name=”language” required>
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
Code example
Codes
<input type=”text” name=”username” autofocus>
Output
autofocus
130
Meeting 2 - Input Types and Attributes
Continue Your Website
5. Readonly
Code example
Codes
<input type=”text” name=”name” value=”Rich
Brian” readonly>
6. Disabled
Code Example
Codes
<input type=”text” name=”name” value=”Rich
Brian” disabled>
131
Meeting 2 - Input Types and Attributes
Continue Your Website
Output
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”>
132
Meeting 2 - Input Types and Attributes
Continue Your Website
8. Multiple
Codes
<input type=”file” name=”file” multiple>
Output
133
Meeting 2 - Input Types and Attributes
Continue Your Website
134
Meeting 2 - Input Types and Attributes
Continue Your Website
Day/Date :
1. Mention the types of input that you studied!
135
MEETING 3
STYLING FORM
3 Styling Form
CSS Combinators
138
Meeting 3 - Styling Form
CSS Combinators
Syntax!
selector1 ~ selector2 {
property : value;
}
Codes
h3 ~ p {
color : yellow;
}
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>
Output
previous sibling h3
child h3
next sibling h3
It means only tag <p> as next sibling that uses color style: yellow
140
Meeting 3 - Styling Form
CSS Combinators
Syntax!
selector1 + selector2 {
property : value;
}
Codes
h1 + p {
color : green;
}
Output
next sibling h1
141
Meeting 3 - Styling Form
CSS Combinators
Syntax!
Codes
div > p {
color : red;
}
Output
child div
142
Meeting 3 - Styling Form
CSS Combinators
Source: https://youtu.be/
kpXKwDGtjGE
143
Meeting 3 - Styling Form
CSS Pseudo Class
Codes
a:link {
color: blue;
}
a:visited {
color: red;
}
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
145
Meeting 3 - Styling Form
CSS Pseudo Class
Codes
input[type=number]:placeholder-shown {
background-color: bizque;
}
input:enabled {
background-color: white;
}
input:disabled {
background-color: coral;
}
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>
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”>
Codes
* {
color: black;
}
:not(label) {
color: brown;
}
147
Meeting 3 - Styling Form
Continue Your Website
Let’s create a
Contact page like
the picture below!
148
Meeting 3 - Styling Form
Continue Your Website
149
Meeting 3 - Styling Form
Continue Your Website
Illustration Image
Codes
<div class=”contact-container”>
<div class=”ilustration”>
<img class=”illustration-img” src=”assets/
contact-illustration.png” alt=”” width=”800px”>
</div>
</div>
Codes
.contact-container {
display: flex;
justify-content: flex-start;
}
.illustration-img {
margin: 0px;
width: 800px;
}
150
Meeting 3 - Styling Form
Continue Your Website
Profile Picture
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>
Codes
.contact {
display: inline-block;
margin: 10px 30px;
text-align: center;
}
.profile-contact-img {
width: 200px;
}
151
Meeting 3 - Styling Form
Continue Your Website
Contact Form
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>
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>
153
Meeting 3 - Styling Form
Continue Your Website
Codes
.form-container {
display: flex;
justify-content: center;
flex-direction: column;
}
.input-container {
display: flex;
justify-content: center;
align-items: flex-start;
}
Codes
.icon {
margin-right: 6px;
}
.fa-user, .fa-map-marker-alt, .fa-envelope-open, .fa-
comment {
font-size: 27px;
}
Codes
.form-label {
position: absolute;
left: 10px;
top: 10px;
}
154
Meeting 3 - Styling Form
Continue Your Website
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%;
}
155
Meeting 3 - Styling Form
Continue Your Website
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;
}
Codes
.submit {
border-style: none;
border-radius: 25px;
color: aliceblue;
background-color: rgb(38, 70, 83);
margin: 5px;
cursor: pointer;
}
156
Meeting 3 - Styling Form
Continue Your Website
Now then we will make the Label text move to the top when the
column is clicked.
Codes
.input-item:focus + .form-label {
top: -5px;
left: -2px;
font-size: 10px;
}
.textarea:focus + .form-label {
top: -5px;
left: -2px;
font-size: 10px;
}
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.
158
Meeting 3 - Styling Form
Continue Your Website
Day/Date :
1. What is the function of CSS Combinators?
159
MEETING 4
or Logitech
What is forEach?
162
Meeting 4 - Image Slider Using For Each
For Each Method
Syntax!
arrayName.forEach(function(variableName) {
//command
}
163
Meeting 4 - Image Slider using For Each
For Each Method
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>”);
})
164
Meeting 4 - Image Slider using For Each
Manual Image Slider
165
Meeting 4 - Image Slider using For Each
Manual Image Slider
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>
<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>
166
Meeting 4 - Image Slider using For Each
Manual Image Slider
Then, we will adjust the position of the image and text using
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;
}
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;
}
168
Meeting 4 - Image Slider using For Each
Manual Image Slider
Codes
var slides = document.querySelectorAll(‘.slide’);
var buttons = document.querySelectorAll(‘.slider-
btn’);
let currentSlide = 1;
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]
169
Meeting 4 - Image Slider using For Each
Manual Image Slider
buttons.forEach(function(btn, i) {
btn.addEventListener(‘click’, function() {
manualNav(i);
currentSlide = i;
})
})
This time we will use Circle. Open the link above and follow these
steps!
170
Meeting 4 - Image Slider using For Each
Manual Image Slider
So it produces a value
of 0% here
So that it produces a
value of 100% here
Codes
.slide {
/* add the code below*/
clip-path: circle(0% at 0 50%)
}
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%
Besides, we also add a different color for the clicked Dots button.
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.
173
Meeting 4 - Image Slider using For Each
Autoplay Image Slider
if(slides.length == i) {
i = 0;
}
setTimeout()
Syntax!
setTimeout(function() {
//command
}, timeInMillisecond);
174
Meeting 4 - Image Slider using For Each
Autoplay Image Slider
Day/Date :
1. What is forEach() method?
175
MEETING 5
Waving Style
173
Meeting 5 - Exploring Tools and Create About Page
Wave Generator
output
wave 1
wave 2
174
Meeting 5 - Exploring Tools and Create About Page
Wave Generator
Wave 1
Codes
.wave1 {
position: absolute;
top: 410px;
z-index: 2;
}
175
Meeting 5 - Exploring Tools and Create About Page
Wave Generator
Wave 2
2. Next is the same as the first wave, Copy the SVG code and
paste after wave 1
Codes
.wave2 {
position: absolute;
top: 450px;
z-index: 3;
}
176
Meeting 5 - Exploring Tools and Create About Page
Background Generator
Blob
Background
Blob Generator
177
Meeting 5 - Exploring Tools and Create About Page
Background Generator
1. Go to : https://www.magicpattern.design/tools/blob-
generator
Output
Output
3. Filter : set grain
178
Meeting 5 - Exploring Tools and Create About Page
Background Generator
Output
Result
example:
Background Generator
179
Meeting 5 - Exploring Tools and Create About Page
Background Generator
1. Go to : https://bggenerator.com/index.php
2. On the left side you will see properties to set the desired
background.
Background Transparent/
Opaque If opaque, set the
color
set shape color
Output
180
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website
Now it’s time to use your Blob and Background on the About page!
li ss
Sk
v ity
Acti
181
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website
Codes
background-image: url(assets/bg_generator.png);
background-size: cover;
Codes
<section id=”about”>
</section>
<section id=”skill”>
</section>
<section id=”activity”>
</section>
182
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website
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>
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;
}
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
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
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>
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
187
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website
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!
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;
}
189
Meeting 5 - Exploring Tools and Create About Page
Continue Your Website
Output
190
Meeting 5 - Exploring Tools and Create About Page
Questions
Day/Date :
1. What tools did you learn today? What are the functions?
4. What is the value position used for the Profile Photo in the
About section?
191
Timedoor Coding Academy
cxcii
MEETING 6
ONLINE COMMUNITY AND
MAKE PROJECT PAGE
Online Community
Programming Communities
are created by utilizing Social
Platforms such as Discord and
Reddit.
193
Meeting 6 - Online Community and Make Project Page
Online Community
Expanding Relations
Finding Solutions
194
Meeting 6 - Online Community and Make Project Page
Online Community
Increasing Knowledge
Practicing Communication
Not only coding skills will improve, but also communication skills!
195
Meeting 6 - Online Community and Make Project Page
Online Community
How to Ask
Click Ask
Question
button
3. Creating Title
The title is the text that is the highlight of your question.
196
Meeting 6 - Online Community and Make Project Page
Online Community
4. Body
Body is information that completes your title in detail, it can
be filled with images, code, text styling, and links.
5. Tags
Tags make it easy to group questions on Stack Overflow. So
your question will be easier to reach.
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.
Answer
Checked Answer
198
Meeting 6 - Online Community and Make Project Page
Online Community
How to Answer
199
Meeting 6 - Online Community and Make Project Page
Continue Your Website
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>
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>
Codes
.page-title {
padding: 10px;
margin 0;
}
.page-title h1{
text-algin: center;
padding 0;
}
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;
}
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%);
}
203
Meeting 6 - Online Community and Make Project Page
Continue Your Website
204
Meeting 6 - Online Community and Make Project Page
Questions
Day/Date :
1. What is Online Community?
205
MEETING 7
CSS TRANSITION AND
REVEAL ON SCROLL
CSS Transition
Let’s Check!
√ Go to https://timedoor.net/
√ Scroll slowly and watch the movement of this content
208
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition
Codes
transition : width 1s ease 2s;
transition-delay
transition-timing-function
transition-duration
transition-property
1. Transition-duration
Code Example:
Codes
transition-duration : 3s;
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;
}
2. Transition-property
Code Example:
Codes
transition-property : margin-left;
210
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition
3. Transition-timing-function
Codes
<img class=”aircraft a1” src=”aircraft.png”
alt=”Aircraft”>
Codes
.a1 {
transition-timing-function: ease;
}
3. Run and try to hover over the Aircraft image!
211
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition
ease-in
Speed: start slow then go faster
ease-out
Speed: start faster, end slower
ease-in-out
Speed: start slow, then get faster, and a bit slow down again.
212
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition
linear
Speed: from start to finish is fixed stable
Codes
<img class=”aircraft a2” src=”aircraft.png”
alt=”Aircraft”>
Codes
.a5 {
transition-timing-function: linear;
}
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.
213
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition
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);
214
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition
Cubic-bezier Hacks
transition illustration
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
215
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition
4. Transition-delay
Code Example:
Codes
transition : 2s;
5. Multiple Property
Code example:
Codes
transition : width 3s,opacity 3s ease-out 1s, margin-
left 3s ease-in-out;
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
217
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition
1. Preparation
2. Add the asset folder too and download the image at this
link : https://tiny.cc/adv3_SiliconValley
2. Coding
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>
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;
}
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;
}
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>
221
Meeting 7 - CSS Transition and Reveal on Scroll
CSS Transition
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;
}
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;
}
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;
Code Details :
viewport
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
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.
Codes
.active {
transform: translateY(0px);
opacity: 1;
}
226
Meeting 7 - CSS Transition and Reveal on Scroll
Questions
Day/Date :
1. What is CSS Transition? Try making one example of the code!
227
MEETING 8
CSS ANIMATION AND
ANIMATION LIBRARY
CSS Animation
Aside from Transition, CSS also has the ability to create more
varied animations with CSS Animation.
Source: https://www.youtube.com/watch?v=HZHHBwzmJLk
229
Meeting 8 - CSS Animation and Animation Library
CSS Animation
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.
230
Meeting 8 - CSS Animation and Animation Library
CSS Animation
What is Keyframes?
Creating Animation
Syntax!
@keyframes Animationname {
from {
property: value;
}
to {
property: value;
}
}
Syntax!
@keyframes Animationname {
0% {
property: value;
}
100% {
property: value;
}
}
231
Meeting 8 - CSS Animation and Animation Library
CSS Animation
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;
}
}
232
Meeting 8 - CSS Animation and Animation Library
CSS Animation
Codes
.container {
width: 100%;
border: 2px solid lightblue;
}
.witch {
width: 70px;
margin-bottom: 10px;
}
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;
233
Meeting 8 - CSS Animation and Animation Library
CSS Animation
234
Meeting 8 - CSS Animation and Animation Library
CSS Animation
1. Animation-iteration-count
Codes
animation-iteration-count: 4; 4 times
animation-iteration-count: infinite; forever
2. Animation-direction
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
3. Animation-fill-mode
Codes
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
236
Meeting 8 - CSS Animation and Animation Library
CSS Animation
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
237
Meeting 8 - CSS Animation and Animation Library
Continue Your Website
Code Example:
Codes
data-aos=”animation-name”
238
Meeting 8 - CSS Animation and Animation Library
CSS Animation
Codes
<link rel=”stylesheet” href=”https://unpkg.com/
aos@next/dist/aos.css” />
Codes
<script src=”https://unpkg.com/aos@next/dist/
aos.js”></script>
239
Meeting 8 - CSS Animation and Animation Library
Continue Your Website
Codes
AOS.init();
Now you can use the key attribute right away! Let’s try it now!
Settings
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”
241
Meeting 8 - CSS Animation and Animation Library
Questions
Now in the AOS Library we can more easily set it using data-
aos-offset
Codes
data-aos-offset=”300”
Multiple Element
242
Meeting 8 - CSS Animation and Animation Library
Continue Your Website
Codes
var codingProjects = document.
querySelectorAll(‘.project’);
codingProjects.forEach(project => {
project.dataset.aos = ‘fade-down’;
})
Codes
project.dataset.aosDuration = 1500;
243
Meeting 8 - CSS Animation and Animation Library
Continue Your Website
Codes
codingProjects.forEach( (project, index) => {
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
Codes
AOS.init({
once: true
});
244
Meeting 8 - CSS Animation and Animation Library
Continue Your Website
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!
245
Meeting 8 - CSS Animation and Animation Library
Questions
Day/Date :
1. What is CSS Animation?
246
MEETING 9
SUBMIT TO EMAIL AND
CREATE MODAL
Form Submit
247
Meeting 9 - Submit to Email and Create Modal
Submit to Email
Codes
<form action=”https://formsubmit.co/
[email protected]” method=”POST”>
<input type=”text” name=”text” >
<input type=”submit”>
</form>
6. Recheck your email and see if the data entered has been
successfully sent!
248
Meeting 9 - Submit to Email and Create Modal
Create Modal
Disable Recaptcha
Codes
<input type=”hidden” name=”_captcha”
value=”false”>
Note: Form Submit does not work on websites on the local path,
or websites that have not been hosted/deployed.
Modal
249
Meeting 9 - Submit to Email and Create Modal
Create Modal
Codes
<button> Show Modal</button>
<div class=”modal-container”>
<div class=”modal”>
<h3>This is Modal</h3>
span>x</span>
</div>
</div>
Styling Button
Codes
button {
margin: 10px;
padding: 8px;
border-radius: 5px;
border: none;
background-color: rgb(47, 130, 255);
cursor: pointer;
color: white;
}
250
Meeting 9 - Submit to Email and Create Modal
Create Modal
Styling Modal
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;
}
Codes
.modal {
position: relative;
width: 150px;
padding: 30px;
border-radius: 10px;
text-align: center;
background-color: white;
}
.modal h3 {
padding: 0;
margin: 0;
}
251
Meeting 9 - Submit to Email and Create Modal
Create Modal
Codes
.modal span {
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
}
Variable Initialization
Codes
var modal = document.querySelector(‘.modal-
container’);
var button = document.querySelector(‘button’);
var btnClose = document.querySelector(‘span’);
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”;
});
}
253
Meeting 9 - Submit to Email and Create Modal
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.
Codes
<form action=”https://formsubmit.co/
[email protected]” autocomplete=”off”
method=”POST”>
254
Meeting 9 - Submit to Email and Create Modal
Continue Your Website
Codes
<input type=”hidden” name=”_next” class=”next”>
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>
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;
}
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;
}
256
Meeting 9 - Submit to Email and Create Modal
Continue Your Website
Codes
var btnSubmit = document.querySelector(‘.submit’);
var modal = document.querySelector(‘.modal-container’);
if(btnSubmit){
btnSubmit.addEventListener(‘click’, function(){
modal.classList.add(‘show’);
After pressing Submit, the modal will appear first then the data
is sent and reload the Contact page
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!
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?
259
Timedoor Coding Academy
260
MEETING 10
SPLASH SCREEN AND
RESPONSIVE WEBSITE
Splash Screen
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>
Div Splash
Codes
.splash {
position: fixed;
width: 100%;
height: 100%;
background-color: cadetblue;
z-index: 200;
margin: 0;
padding: 0;
top: 0;
}
264
Meeting 10 - Splash Screen and Responsive Website
Splash Screen
Splash h1
Codes
.splash h1 {
position: absolute;
top: 60%;
left: 40%;
font-size: 50px;
}
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%;
}
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);
}
266
Meeting 10 - Splash Screen and Responsive Website
Splash Screen
Show Splash
Codes
var splash = document.querySelector(“.splash”);
if(splash) {
document.addEventListener(‘DOMContentLoaded’,
function(event){
setTimeout(function(){
splash.style.display = ‘none’
}, 3000);
});
}
Animate Astronaut
Codes
var animate = document.querySelector(‘.
astronaut-takeoff’);
if(animate) {
document.addEventListener(
‘DOMContentLoaded’, function(event){
setTimeout(function(){
animate.classList.add(‘animation’)
}, 400);
});
}
267
Meeting 10 - Splash Screen and Responsive Website
Splash Screen
Animate Astronaut
Codes
var splashText = document.querySelector(
‘.splash-text’);
if(splashText) {
setTimeout(function(){
splashText.innerHTML = “Come in!”
}, 2000);
}
Responsive Website
You can use the Developer Tools to see changes that occur on
the website.
268
Meeting 10 - Splash Screen and Responsive Website
Responsive Website
Codes
@media (max-width: 900px) {
* {
font-size: 2.5vw;
padding: 0px;
margin: 0px;
}
}
Index.html
1. Splash Screen
On the splash screen we will reduce the size of the image
and also the text.
Codes
.splash h1 {
font-size: 3vw;
}
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%;
}
2. Jumbotron
In this jumbotron we will hide the image and make the
text centered.
Codes
main {
margin-top: 40px;
}
.header {
height: 40px;
}
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;
}
Add the following code for the Wave and Aside . sections
271
Meeting 10 - Splash Screen and Responsive Website
Responsive Website
Codes
.wave1 {
top: 195px;
}
.wave2 {
top: 210px;
}
aside {
display: none;
}
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;
}
5. Image Slider
Image and text size of Image Slider must be reduced
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;
}
5. Article Content
The following code works for main content like projects and
videos.
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;
}
Project.html
274
Meeting 10 - Splash Screen and Responsive Website
Responsive Website
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%;
}
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;
}
Contact.html
Codes
.contact-container {
justify-content: center;
}
.illustration-img {
display: none;
}
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.
Codes
.section-title {
font-size: 4vw;
}
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;
}
Deploy to Netlify
278
Meeting 10 - Splash Screen and Responsive Website
Questions
Day/Date :
1. What is splash screen?
3. What method is used to give a time lag before the text on the
Splash Screen is displayed?
279
Timedoor Coding Academy
280
MEETING 11
CREATE YOUR OWN
WEBSITE
1. Development Process
283
Meeting 11 - Create Your Own Website
Exploring Idea
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)
2. E-commerce
Sport Stuffs
Action Figures
Book Store
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.
285
Meeting 11 - Create Your Own Website
Exploring Idea
1. Website Description
My Website
Website title :
Website type :
286
Meeting 11 - Create Your Own Website
Exploring Idea
2. Website Design
Website Design
287
Meeting 11 - Create Your Own Website
Exploring Idea
3. Exploring Assets
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
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.
Meeting Target
10
11
12
13
14
15
289
Meeting 11 - Create Your Own Website
Exploring Idea
290
MEETING 12
CREATE YOUR OWN
WEBSITE2.
1. Project Preparation
Before you start coding, make sure you prepare the folder
correctly.
√ index.html
√ style.css
√ script.js
√ Folder assets
Assets
1. Move all the images you downloaded in the previous
meeting to the Assets Folder
File HTML
1. HTML Structure
As usual, create an HTML:5 structure in the index.html
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
4. Animation Library
Codes
<link rel=”stylesheet” href=”https://unpkg.com/
aos@next/dist/aos.css” />
Codes
<script src=”https://unpkg.com/aos@next/dist/
aos.js”></script>
294
Meeting 12 - Create Your Own Website
Home Page
Codes
AOS.init();
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
295
Meeting 12 - Create Your Own Website
Home Page
Footer
• Contains Social Media and its icons,
• Contains Copyright
4. Conclusion
296
MEETING 13
CREATE YOUR OWN
WEBSITE2.
1. Detail Page
299
Meeting 13 - Create Your Own Website
Detail Page
2. Conclusion
300
MEETING 14
CREATE YOUR OWN
WEBSITE2.
1. Contact Page
Codes
<form action=”https://formsubmit.co/
[email protected]” method=”POST”>
<input type=”text”>
<input type=”submit”>
</form>
303
Meeting 14 - Create Your Own Website
Contact and About Page
2. About Page
3. Conclusion
304
MEETING 15
CREATE YOUR OWN
WEBSITE2.
1. Brainstorming
2. Revising
3. Creating More Responsive Website
1. Brainstorming
2. Revising
307
Meeting 15 - Create Your Own Website
Detail Page
Codes
@media (max-width: 900px) {
* {
font-size: 2.5vw;
}
}
4. Assignment
At the next meeting, you will present the results of your website.
308
Meeting 15 - Create Your Own Website
Home Page
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
309
Meeting 15 - Create Your Own Website
Home Page
4. Conclusion
310
MEETING 16
CREATE YOUR OWN
WEBSITE2.
1. Deploy to Netlify
Email : timedooracademy.
[email protected]
Password : academy2019
2. Presentation
313
Meeting 16 - Create Your Own Website
Detail Page
3. Concept Examination
4. Conclusion
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
315
Timedoor Coding Academy
316