-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathScratchJr.html
More file actions
188 lines (174 loc) · 13.5 KB
/
ScratchJr.html
File metadata and controls
188 lines (174 loc) · 13.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!doctype html>
<html lang="en">
<head>
<title>Nextbit_2.0</title>
<link rel="icon" href="imgs/png/logo_dino.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- awesome font -->
<link rel='stylesheet' href='./css/font-awesome.min.css'>
<!-- css navbar -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/navbar.css">
<!-- css style -->
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/loader.css">
<!-- css ScratchJr -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./css/cardcourse.css">
<!-- css bubble footer -->
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/bubble.css">
</head>
<body>
<!-- Start Navbar -->
<nav class="navbar navbar-expand-custom navbar-mainbg" id="navbar">
<a class="navbar-brand navbar-logo" href="./index.html">
<picture>
<source srcset="imgs/webp/logo_dino.webp">
<img src="./imgs/png/logo_dino.png"/>
</picture>
<span>Next</span>bit
</a>
<button class="navbar-toggler" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars text-white"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<div class="hori-selector"><div class="left"></div><div class="right"></div></div>
<li class="nav-item">
<a class="nav-link" href="./index.html"><i class="fa fa-home"></i>หน้าหลัก</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html"><i class="fa fa-users"></i>เกี่ยวกับพวกเรา</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="./course.html"><i class="fa fa-graduation-cap"></i>คอร์สเรียน</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://nextbit.co/post/"><i class="fa fa-cubes"></i>บทความ</a>
</li>
</ul>
</div>
</nav>
<!-- End Navbar -->
<!-- Start Container -->
<div class="container">
<section class="head-scratchjr">
<div class="subhead-scratchjr">
<h1>คอร์ส ScratchJr - Basic</h1><br>
<div class="row">
<div class="col-lg-6 align-self-left">
<img class="head-dino" src="./imgs/png/Nextbit_Dino.png">
</div>
<div class="col-lg-6 align-self-right" >
<img class="head-qr" src="./imgs/png/qr_code.png">
</div>
</div>
</div>
</section>
<section id="banner-section">
<p align="center" class="responsive-iframe">
<video class="iframe-responsive" controls autoplay muted loop>
<source src="./video/IntroNextBit.webm" type="video/webm">
</video>
</p>
<div class="paragraph">
<h1>รายละเอียดคอร์สเรียน</h1><br>
<p>คอร์ส ScratchJr - Basic ออกแบบมาให้น้องๆ สามารถเรียนเขียน Code โดยการลากบล็อกคำสั่งต่างๆ จากที่ไหนก็ได้ ขอเพียงแค่มี iPad หรือ Tablet<br><br>
แค่เพียงไม่เกิน 20 นาทีต่อวัน ก็สามารถทำให้น้องๆ เขียน Code อย่างง่ายเป็น <br><br>
คอร์ส ScratchJr - Basic นี้เราทำขึ้นเพื่อสอนการใช้โปรแกรม ScratchJr เบื้องต้นอย่างละเอียด ทุกบล็อกคำสั่งและ ทุก Function ที่มีในโปรแกรม ผ่านเรื่องราววุ่นๆ ของเหล่าไดโน่ 3 ตัว ที่เป็นเพื่อนกัน อยู่หมู่บ้านเดียวกัน และ เรียนโรงเรียนเดียวกัน
โดยร้อยเรียงเป็นเรื่องราวเป็นเสมือนนิทาน 1 เรื่องที่เราจะเล่าให้น้องๆฟังไปพร้อมกับการเรียนเขียน Code ที่สนุกสนานกว่า 40 ตอน <br><br>ในนิทานแต่ละเรื่อง จะช่วยให้น้องๆ สามารถนำความรู้จากการใช้บล็อกคำสั่งต่างๆ มาแก้ไขปัญหาร่วมกับเหล่าไดโน่ อีกทั้งยังสามารถสร้างโปรเจค เรื่องราว และเกม ผ่านการใช้ความคิดสร้างสรรค์ในการสร้างตัวละคร ฉากพื้นหลัง และ Effects ต่างๆ<br><br>
นอกจากนี้โปรแกรม ScratchJr ยังมีลูกเล่นที่น่าสนใจอีกมากมาย อาทิเช่น การอัดเสียงเพิ่มเข้าไป หรือ การใช้กล้องถ่ายรูป เพื่อสร้างตัวละครที่มีหน้าและเสียงของน้องๆ เข้าไปในโปรแกรม<br><br>
น้องๆ จะได้เรียนรู้ศัพท์ภาษาอังกฤษผ่านการเขียน Code โดยที่เราจะอธิบายให้น้องๆฟังอย่างละเอียด สนุก และเข้าใจได้ง่ายที่สุด ในแต่ละตอนที่มีคำถามชวนคิด เราจะมีเฉลยท้ายคลิปให้เป็นแนวคำตอบ และหากน้องๆ ยังมีคำถามหรือข้อสงสัย สามารถส่งมาถามเราได้ที่ <span>Line: @NextBit</span><br><br>
คอร์สนี้เหมาะสำหรับ<br>
1.เด็กอายุ 4-8 ขวบ<br>
2.เด็กที่ไม่มีพื้นฐานการเขียนโปรแกรมมาก่อน<br>
3.เด็กที่กำลังเตรียมตัวเรียนโปรแกรม Scratch ในชั้นถัดไป<br><br>
อุปกรณ์ที่ใช้ในการเรียน<br>
1.iPad หรือ Tablet 1 เครื่อง เพื่อใช้ในการเขียนโค้ด<br>
2.iPhone, iPad, Tablet, โทรศัพท์มือถือ หรือ คอมพิวเตอร์ 1 เครื่อง เพื่อใช้ในการดูคลิปเนื้อหา<br>
3.Internet<br><br>
จำนวนเนื้อหา<br>
20 บท 40 ตอน รวมกว่า 400 นาที<br>
เรียนซ้ำได้ตลอด ไม่มีวันหมดอายุ<br><br>
สนใจ สอบถามข้อมูลเพิ่มเติมได้ที่ <span>Line: @NextBit</span>
</p>
</div>
</section>
</div>
<!-- End Container -->
<!-- Start Footer -->
<footer>
<div class="bubbles">
<div class="bubble" style="--size:3.3909991037595413rem; --distance:8.564411425917513rem; --position:-3.3532309343188405%; --time:3.337641675397866s; --delay:-3.8598811310658885s;"></div>
<div class="bubble" style="--size:5.257650665640758rem; --distance:7.436513802589119rem; --position:58.07638903927696%; --time:3.5787606993702172s; --delay:-3.727907387715606s;"></div>
<div class="bubble" style="--size:5.229508255244221rem; --distance:9.9519353103117rem; --position:74.21436924845615%; --time:3.028254580955734s; --delay:-3.2558799292110705s;"></div>
<div class="bubble" style="--size:5.675200319744859rem; --distance:6.150496605028215rem; --position:16.40803187630667%; --time:2.095930094316172s; --delay:-2.012984983796527s;"></div>
<div class="bubble" style="--size:4.3761417212986435rem; --distance:6.8733372826509695rem; --position:67.33293542719909%; --time:3.488941974619582s; --delay:-2.334601722943579s;"></div>
<div class="bubble" style="--size:4.685994744877967rem; --distance:6.7313548620829895rem; --position:31.27613675088076%; --time:2.2925754221462955s; --delay:-3.737222941850242s;"></div>
<div class="bubble" style="--size:3.1129848616561464rem; --distance:7.973768390749606rem; --position:6.987046974998384%; --time:3.0081815354815857s; --delay:-2.0327254202297422s;"></div>
<div class="bubble" style="--size:5.210656076916611rem; --distance:6.009244755368356rem; --position:46.407251437646885%; --time:2.825860489876731s; --delay:-3.2693626984936204s;"></div>
<div class="bubble" style="--size:5.766361012511409rem; --distance:6.85814516018899rem; --position:67.06485868169764%; --time:3.1537974261224564s; --delay:-3.450262969142444s;"></div>
<div class="bubble" style="--size:2.3488025390021123rem; --distance:9.612803488962832rem; --position:62.36777292198522%; --time:2.2375997498686555s; --delay:-3.7258814246212713s;"></div>
<div class="bubble" style="--size:4.841820891042348rem; --distance:6.792663462265825rem; --position:41.51432637876691%; --time:3.8539796309214767s; --delay:-2.600818884719666s;"></div>
<div class="bubble" style="--size:2.32621822881762rem; --distance:6.618214802867413rem; --position:74.20527249008273%; --time:3.1652743852504166s; --delay:-3.96047773357275s;"></div>
</div>
<div class="footer-main">
<div class="footer-logo">
<picture>
<source srcset="./imgs/webp/logo_dino.webp">
<img src="./imgs/png/logo_dino.png"/>
</picture>
<h3><span>Next</span>bit.co©2021</h3>
</div>
<div class="footer-link list_jigsaw">
<ul>
<li><a href="./index.html" target="_blank">หน้าหลัก</a></li>
<li><a href="./about.html" target="_blank">เกี่ยวกับพวกเรา</a></li>
<li><a href="./course.html">คอร์สเรียน</a></li>
<li> <a href="https://nextbit.co/post/" target="_blank">บทความ</a></li>
</ul>
</div>
<div class="footer-contact">
<div>
<h3>ช่องทาง<span>ติดต่อ</span></h3>
<p><i class="fa fa-phone"></i>062-365-9233</p>
<p><i class="fa fa-envelope"></i>nextbit365@gmail.com</p>
</div>
<div class="footer-icons">
<a href="https://nextbit.co/facebook"><i class="fa fa-facebook"></i></a>
<a href="https://nextbit.co/youtube"><i class="fa fa-youtube-play"></i></a>
</div>
</div>
<div class="footer-qrcode">
<picture>
<source srcset="./imgs/webp/qr_code.webp">
<img src="./imgs/png/qr_code.png"/>
</picture>
</div>
</div>
</footer>
<!-- End Footer -->
<svg style="position:fixed; top:100vh;">
<defs>
<filter id="blob">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="blob"></feColorMatrix>
<feComposite in="SourceGraphic" in2="blob" operator="atop"></feComposite>
</filter>
</defs>
</svg>
<div class="loader-wrapper">
<img src="./imgs/gif/loading_scratch.gif">
<div class="thought"><h4>ไปเรียนกันเถอะ</h4></div>
</div>
<!-- Start Script -->
<!-- Navbar -->
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
<script src='./js/navbar.js'></script>
<script src='./js/loader.js'></script>
<!-- End Script -->
</body>
</html>