-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (173 loc) · 14.7 KB
/
index.html
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
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link rel="shortcut icon" href="img/icon.ico" />
<title>Portfolio</title>
</head>
<body>
<header>
<nav>
<ul id="identification">
<a href='Contact'><li>Login</li></a>
<a href="#"><li>Sign Up</li></a>
</ul>
<ul id="about">
<a href="#"><li>Home</li></a>
</ul>
</nav>
</header>
<section id='Week 1'>
<h1 id="week1">Week 1 (My First Website)</h1>
<div class="day1">
<h1 id="daytitle">Day 1</h1>
<p>Hari pertama pada week 1. Kami melakukan perkenalan dengan teman-teman di grup slack. Setelah itu, kami mempelajari dasar-dasar HTML5 di Codeacademy. Disini saya mulai mengenal bagaimana membuat strutur pada html, bagaimana konsep dasar di html dan apa saja fitur terbaru dari html5 yang tidak ada pada html sebelumnya. Pada Codeacademy, saya dikenalkan dengan struktur html, fundamental html, dan apa saja elemen-elemen pada html.</p>
</div>
<div class="day2">
<h1 id="daytitle">Day 2</h1>
<p>Hari kedua. Saya berkenalan dengan CSS. Awalnya saya membaca tentang pengertian CSS dan bagaimana caranya membuat tampilan web dengan menggunakan CSS. Untuk menguasai CSS, saya mempelajari course pada codeacademy, syllabus 3, syllabus 4, dan syllabus 5. Di syllabus 3 saya dikenalkan dengan basic setup dan struktur dari CSS, syllabus 4 diperkenalkan bagaimana menambahkan warna dan mengubah-ubah font pada text, sedangkan syllabus 5 mempelajari bagaimana memanggil dan membuat tampilan menarik pada elemen-elemen di html (div, class, id). Menurut saya pelajaran CSS ini menarik karena dengan CSS kita dapat menampilan halaman web yang menarik sehingga enak dipandang, seperti tugas terakhir pada hari ini yaitu menghias halaman web dengan box berwarna-warni.</p>
</div>
<div class="day3">
<h1 id="daytitle">Day 3</h1>
<p>Hari ketiga. Pada hari ini semua tugas berasal dari codeacademy, dengan syllabus 6, 7, 8, dan 9. Keseluruhan materinya mempelajari bagaimana memanipulasi elemen-elemen html, mulai dari box model, positioning, menambahkan images, dan mengorganisir tables. Syllabus 6 berisi tentang box model pada html. Setiap elemen pada html direpresentasikan sebagai box(persegi) dengan panjang dan lebar yang dapat ditentukan. Batas-batas pada box tersebut dinamakan border. Di syllabus 6 juga dikenalkan dengan konten dan manipulasi model box. Syllabus 7 mempelajari positioning dan layouting pada elemen html (menggunakan CSS tentunya). Syllabus 8 mulai diperkenalkan bagaimana menambahkan images pada halaman web. Terakhir, syllabus 9 dipelajari bagaimana membuat tables di html dan CSS. Materi pada hari harus benar-benar dipahami menurut saya, karena kesulitan paling besar dalam mendesign halaman web adalah menempatkan elemen-elemen dengan benar di halaman web.</p>
</div>
<div class="day4">
<h1 id="daytitle">Day 4</h1>
<p>Hari keempat. Tugas pertama saya membuat halaman web sederhana dan mendesaign halaman tersebut menggunakan CSS. Halaman web ini berisi gambar, header, text box ditengah, dan footer. Halaman web ini kemudian diupload ke github. Sebelumnya, saya juga mempelajari bagaimana menggunakan github dan menakses file-file dari dan ke github itu sendiri. Dan juga saya mempelajari bagaimana menggunakan Markdown.</p>
</div>
<div class="day5">
<h1 id="daytitle">Day 5</h1>
<p>Hari terakhir pada week 1. Tugas kali ini lebih ke kreativitas masing-masing orang karena kami membuat halaman website milik sendiri. Sebelum membuat web ini, saya mempelajari materi bagaimana membuat perencanaan, proses, dan manajemen dalam membuat web. Website yang saya buat berupa web informasi tentang diri sendiri (portofolio). Didalam web ini berisi data diri saya dan aktivitas-aktivitas yang saya lakukan di Hacktiv8. Ya benar, websitenya adalah ini, yang sedang anda lihat sekarang :D. Website ini nantinya akan saya jadikan sebagai media informasi dan sharing saya selama beraktivitas di bootcamp Hacktiv8.</p>
</div>
</section>
<section id='Week 2'>
<h1 id="week2">Week 2 (The World Of Javascript)</h1>
<div class="day1">
<h1 id="daytitle">Day 1</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day2">
<h1 id="daytitle">Day 2</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day3">
<h1 id="daytitle">Day 3</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day4">
<h1 id="daytitle">Day 4</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day5">
<h1 id="daytitle">Day 5</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
</section>
<section id='Week 3'>
<h1 id="week3">Week 3 (Node JS and Javascript Training)</h1>
<div class="day1">
<h1 id="daytitle">Day 1</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day2">
<h1 id="daytitle">Day 2</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day3">
<h1 id="daytitle">Day 3</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day4">
<h1 id="daytitle">Day 4</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day5">
<h1 id="daytitle">Day 5</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
</section>
<section id='Week 4'>
<h1 id="week4">Week 4 (Logics in Javascript)</h1>
<div class="day1">
<h1 id="daytitle">Day 1</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day2">
<h1 id="daytitle">Day 2</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day3">
<h1 id="daytitle">Day 3</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day4">
<h1 id="daytitle">Day 4</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day5">
<h1 id="daytitle">Day 5</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
</section>
<section id='Week 5'>
<h1 id="week5">Week 5 (The World of DOM)</h1>
<div class="day1">
<h1 id="daytitle">Day 1</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day2">
<h1 id="daytitle">Day 2</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day3">
<h1 id="daytitle">Day 3</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day4">
<h1 id="daytitle">Day 4</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day5">
<h1 id="daytitle">Day 5</h1>
<p>Hari ke-5 dari week ini kami diberikan tugas untuk membuat website dengan memakai DOM yang sudah dipelajari. Website yang saya buat berupa petualangan interaktif antara Rapunzel dan Flynn pada film Tangled :). Berikut <a href="game.html">link</a> gamenya, semoga terhibur!! :))))</p>
</div>
</section>
<section id='Week 6'>
<h1 id="week6">Week 6 (ES6 and Programming Paradigm)</h1>
<div class="day1">
<h1 id="daytitle">Day 1</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day2">
<h1 id="daytitle">Day 2</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day3">
<h1 id="daytitle">Day 3</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day4">
<h1 id="daytitle">Day 4</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
<div class="day5">
<h1 id="daytitle">Day 5</h1>
<p>Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt. Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus. Etiam placerat eam in.</p>
</div>
</section>
<footer>
<h1>Contact</h1>
<p>Husni Habil<br>
Jl.Raya Jakarta-Serang KM. 19<br>
Kibin, Kab. Serang<br>
42185 Banten<br>
Indonesia<br><br>
Phone: +62 85794556187<p>
<h1>About</h1>
<p>
Lorem Ipsum Dolor Sit Amet, mea te verear signiferumque, per illum labores ne. Blandit omnesque scripserit pri ex, et pri dicant eirmod deserunt.<br> Aeque perpetua ea nec. Sit erant patrioque delicatissimi ut. Et sea quem sint, nam in minim voluptatibus.<br> Etiam placerat eam in.
</p>
</footer>
<script src='script.js'></script>
</body>
</html>