FREECODECAMP

Freecodecamp merupakan organisasi nirlaba yang bergerak di dunia

pemprogaman yang menyediakan platform web yang dapat diakses oleh siapa saja
dimana platform web tersebut menyediakan pembelajaran interaktif, ruang
obrolan, forum komunitas online terkait pengembangan web. Di Freecodecamp
siswa dapat menyelesaikan tugas-tugas proyek yang ada setelah itu siswa juga
dapat bermitra dengan lembaga nonprofit untuk membangun web aplikasi, namun
sebelum siswa menyelesaikan tugas-tugas proyek siswa diberikan tutorial terkait
pemprogaman web berupa HTML, CSS dan JavaScript.

Freecodecamp didirikan oleh Quicy Larson yang diluncurkan pada Oktober 2014.
Quicy Larson merupakan pengembang perangkat lunak yang menciptakan
freecodecamp untuk mempermudah siswa dari pemula menjadi siap kerja.

Kurikulum pembelajaran di Freecodecamp dibagi menjadi desain web responsive,

algoritma javascript dan struktur data, visualisasi data, perpustakaan ujung depan,
jaminan keamanan dan kualitas informasi, serta Api dan layanan mikro.
Kurikulum dirancang mengahabiskan 1.400 jam dengan beberapa tantangan yang
harus dilewati dimasing-masing tahap. Setelah menyelesaikan setiap bagian
kurikulum peserta akan mendapatkan sertifikat.

Bahasa pemprogaman yang diajarkan di freecodecamp saat ini adalah HTML5,

CSS 3, jQuery, Sass, Bootstrap, JavaScript, Node.js, React.js, Python, Express.js,
MongoDB dan Git.

Siswa akan mendapatkan kesempatan bekerja dengan organisasi nonprofit seperti

Kopernik nirlaba yang berbasis di Indonesia setelah menyelesaikan semua
sertifikat kurikulum.

Freecodecamp sendiri sudah memiliki siswa dari 160 negara dengan pengunjung
sekitar 350.000 orang per bulannya, dan tiap siswa tersebut dapat saling
berinteraksi secara langsung melalui forum internasional yang ada di platform
tersebut.
A. Basic HTML dan HTML5
1. Pengenalan HTML
HTML atau HyperText Markup Language adalah bahasa
pemprogaman yang digunakan untuk membuat halaman web. Didalam
bahasa HTML biasanya memiliki tag pembuka dan penutup untuk
memberi tanda pada konten baik berupa judul, paragraf atau daftar.
HTML merupakan standar internet yang didefinisikan dan
dikendalikan pemakaiannya oleh W3C. W3C telah memperbarui
kemampuan HTML supaya dapat ditampilkan diberbagai browser
dengan handal. Sekarang HTML telah berkembang menjadi HTML5.
Secara umum fungsi HTML adalah mengelola serangkaian informasi
atau data sehingga dapat diakses melalui layanan web di internet.
2. Tag HTML
HTML memiliki tag pembuka dan tag penutup. Contoh tag pembuka
<h1> Contoh tag penutup </h1>, yang membedakan tag pembuka dan
tag penutup adalah garis miring setelah kurung buka di tag penutup.
3. Elemen Heading
Elemen Heading digunakan untuk memberi penjudulan pada suatu
dokumen HTML. Tag <h1> digunakan sebagai judul utama,
sedangkan <h2> sampai <h6> digunakan untuk subbab dengan tingkat
yang berbeda-beda.

Gambar 1.1 elemen heading

4. Elemen Paragraph
 Elemen Paragraf digunakan untuk menunjukan identitas text paragraf
di situs web. Elemen Paragraf disimbolkan dengan tag <p></p>.
Contoh : <p>ini adalah paragraf</p>.

Gambar 1.2 elemen paragraf

5. Komentar HTML
Komentar dalam HTML dimulai dengan <!– dan diakhiri dengan ->,
komentar memiliki fungsi untuk membuat sebuah kode tidak aktif
tanpa harus menghapus kode tersebut.
6. Pengenalan HTML5 Element
Dibandingkan HTML, HTML5 memperkenalkan tag yang lebih
deskriptif yang terdiri dari main, header, footer, nav, video, article,
section dan lainnya.
Tag HTML5 dapat membantu pengoptimalan SEO dan aksesibilitas.
Contoh tag HTML5 adalah sebagai berikut :

Gambar 1.3 contoh tag html5

7. Menambahkan Gambar di Website
Untuk menambahkan gambar ke situs web dapat menggunakan elemen
img, dan atribut src digunakan untuk mengambil gambar dari url
tertentu. Contoh :
 Gambar 1.4 Elemen img
8. Menambahkan link ekternal
Untuk membuat link ekternal pada halaman web dapat menggunakan
elemen a (anchor). Elemen anchor membutuhkan alamat web tujuan
yang disebut atribut href dan link alamat yang dituju. Contoh:
<a href = https://unisnu.ac.id> Link ini menuju ke Situs Unisnu </a>

Gambar 1.5 Elemen anchor

Jika tulisan link ini menuju ke situs unisnu maka situs tersebut akan
menampilkan halaman web unisnu.
9. Menambkan link internal
Untuk menuju bagian yang lain dihalaman web dapat menggunakan a
(anchor) dengan memberi value pada atribut href dengan simbol hash #
ditambah id elemen yang ingin ditaukan secara internal. Kemudian
atribut id yang sama juga ditambahkan di elemen yang ditautkan. Id
merupakan atribut yang digunakan untuk mendeskripsikan elemen
secara unik
Contoh :
 <a href=”#yodi”> Footer </a>
..............................
<footer id=”yodi”>akhir halaman</footer>

Saat diklik link footer maka, akan ditunjukan bagian halaman dengan
elemen id yodi.
10. Mematikan Link dengan Hash
Untuk membuat link mati atau tidak memiliki alamat url cukup dengan
menggunakan hash #, misalnya <a href = “#”>no link</a>
Hal ini diperlukan jika kita merancang website namun belum
mengetahui elemen tersebut akan ditautkan.
11. Membuat List bullet
Untuk membuat daftar dengan style bullet atau gaya poin-poin maka
digunakan elemen <ul> sebagai tag pembuka, kemudian diikuti
sejumlah elemen<li>, dan terakhir ditutup dengan </ul>
Contoh :

Gambar 1.6 List Bullet

12. Membuat List Number
Elemen <ol> diikuti beberapa <li> elemen digunakan untuk membuat
daftar bernomor di HTML

Gambar 1.7 List Number

13. Membuat Formulir Web
 Membuat Text Field
Untuk membuat inputan type text di form web menggunakan:
<input type = "text">
 Menambahkan placeholder
Placeholder digunakan untuk membuat info yang ditampilkan
di text field sebelum pengguna memasukan input data.
<input type = "text" placeholder = "ini adalah teks placeholder">
 Form Action
Untuk membuat data yang diinputkan di form field bisa dikirim
ke server maka dibutuhkan form action.
<form action = "/ url-alamat-aksi-form"></form>
 Menambahkan Button Submit
Untuk membuat tombol submit di formulir web supaya inputan
bisa dikirim ke url yang dituju bisa menggunakan perintah:
<button type = "submit"> tombol ini mengirimkan formulir
</button>
 Menambahkan fungsi required di form
Untuk membuat kolom formulir tertentu harus diisi maka
dibutuhkan fungsi required. Berikut contoh elemennya : <input
type = "text" required>
 Input type radio button
Type radio button biasanya digunakan untuk memilih jawaban
dari beberapa pilihan. Berikut contohnya:
<label for = "indoor">
<input id = "indoor" type = "radio" name = "indoor-outdoor"> Dalam
ruangan
</label>
 Input Type Checkbox
Untuk memilih lebih dari satu jawaban di formulir web maka
dibuat Checkbox, berikut ini contohnya:
 <label for="loving"><input id="loving" type="checkbox"
name="personality"> Loving</label>
 Menambahkan value pada radio button dan checkbox
Value digunakan untuk menentukan nilai pilihan pada masing-
masing opsi, contoh :
<label for = "indoor">
<input id = "indoor" value = "indoor" type = "radio" name = "indoor-
outdoor"> Dalam ruangan
</label>
<label for = "outdoor">
<input id = "outdoor" value = "outdoor" type = "radio" name =
"indoor-outdoor"> Luar ruangan
</label>
14. Div Elemen
Elemen div atau elemen divisi adalah tempat untuk menampung elemen-
elemen lain. Elemen div dibuka dengan <div> dan ditutup </div>.
15. Mendeklarasikan doctype html
Doctype html digunakan untuk memberitahu browser versi html yang
digunakan di halaman web
Berikut contoh untuk mendeklarasikan
<!DOCTYPE html>
<html>
<!-- Your HTML code goes here -->
</html>
16. Menentukan Bagian HTML
Pada halaman HTML bisa ditambahkan tingkatan bagian tag dengan
menggunakan elemen head dan body. elemen metadata, judul, style
biasanya masuk ke elemen head, sedangkan untuk elemen body
memuat konten-konten halaman. Berikut ini contoh tata letak halaman:
<! DOCTYPE html>
<html>
 <head>
<! - elemen metadata ->
</head>
<body>
<! - konten halaman ->
</ Body>
</html>
B. Basic CSS
1. Pengenalan CSS
Cascading Style Sheets (CSS) digunakan untuk memberi gaya pada
text atau content di html. CSS dapat mengontrol warna, font,
positioning, jarak, perekat, dekorasi dan transisi pada konten-konten
halaman web.
Ada tiga cara untuk memasang CSS. Pertama langsung dipasang
sebaris dengan elemen HTML dan atribut, Kedua menggunakan CSS
dalam tag style di dokumen HTML, terakhir menulis css di style sheet
eksternal, lalu merujukan file tersebut ke dokumen html.
2.
C. Applied Visual Design
Desain visual dalam pengambangan web menggabungkan tipografi,
warna, tata letak, grafik, dan animasi untuk mendukung penyampaian isi
halaman situs.
Desain visul dapat mempengaruhi presntasi dan pengalaman pengguna
web tersebut.
1. Membuat keseimbangan visual dengan text-align
Untuk mengatur rata text di css bisa menggunakan text-align yang
dibagi menjadi 4:
- Text-Align Justify : menyelaraskan tepi kanan dan kiri text pada
paragraf
- Text-Align Center : Memusatkan Text diposisi tengah paragraf
- Text-Align Left : Meratakan Text ke kiri
 - Text-Align Right : Meratakan text ke kanan
2. Mengatur Lebar dan Tinggi Elemen
Tiap-tiap elemen di halaman website dapat diatur lebar dan tingginya
dengan property width dan height, contoh:

img {
width: 220px;
height: 100px;
}
Code tersebut mengubah elemen img memiliki lebar 220 px dan tinggi
100px,
3. Mengatur Style Text dengan tag
Tanpa css kita bisa mengatur style text sesuai keinginan kita, baik
strong, u, em, ataupun s
<strong> = font-weight: bold;
<u> = text-decoration: underline;
<em> = text-decoration: italic;
<s> = text-decoration: line-through;

4. Menggunakan hr tag
Tag hr digunakan untuk membuat garis lurus secara horizontal yang
biasanya untuk memisahkan judul dengan paragraf
5. Menyesuaikan background text
Untuk mempermudah pembaca kita bisa menandai beberapa text
dengan memberi warna background berbeda dengan property rgba.
Rgba singkatan dari :
R : Red
G: green
B: Blue
A: aplha/level opacity;
Nilai RGB dapat berkisar dari 0 hingga 255. Nilai alpha dapat berkisar dari 1,
yang sepenuhnya buram atau berwarna solid, hingga 0, yang sepenuhnya
transparan atau jernih. rgba () sangat bagus untuk digunakan dalam kasus
ini, karena memungkinkan Anda untuk menyesuaikan opasitas. Ini berarti
Anda tidak harus sepenuhnya memblokir latar belakang.
Contoh code: background-color: rgba(45, 45, 45, 0.1)
6. Mengubah Text-Transform
Text-transform digunakan untuk mengatur transformasi text
baik itu uppercase lowercase atau yang lainnya,
 Contoh : text-transform : capitalize;
7. Mengatur jarak spasi text
Untuk mengatur jarak spasi kita bisa menggunakan line-hight, contoh:
line-hight:30px;
8.
D. Applied Accessibility
E. Responsive Web Design Principles
F. CSS Flexbox
G. CSS Grid