 Front end web development

 CSS Dasar:
1. Font:
 font-family
mengatur jenis font yang akan digunakan
nama font
generic family
body {
font-family: arial, verdana, sans-serif;}
p{
font-family: "Times New Roman", serif;font-size;}

 font-size
mengatur ukuran font
px,%,em

 font-weight
mengatur ketebalan font

 font-variant
mengubah font menjadi small caps
normal ,small-caps

 font-style
mengubah font menjadi bercetak miring
normal,italic,oblique

 line-height
mengatur spasi antar baris
normal,px,em

body {
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 16px
line-heigth: 18px;
font-family: Helvetica, arial, sans-serif;
}
Atau bisa juga
Body {
Font: italic normal bold 16px/18px Helvetica, arial, sans-serif;}
2. Text Styling:
 color
memberikan warna pada tulisan
nama warna: red, lightseagreen, royalblue,..
hexadecimal: #ff0000, #20b2aa, #4169el,..
rgb: rgb(255,0,0), rgb(32,178,170), rbg(65,105,225),..
 text-align
mengatur format paragraf/teks
rata kiri, rata kanan, tengah tengah
 text-ident
mengatur indentasi pada paragraph/teks
 text-decoration
mengatur dekorasi pada teks
membuat underline atau teks nya menjadi di coret
 text-transform
mengubah jenis huruf menjadi huruf besar, kecil/kapital
none, lowercase, uppercase, capitalize
 letter-spacing
mengatur spasi antar huruf
normal, px
 word-spacing
mengatur spasi antar kata
normal, px

3. Background
 Background-color
mengatur warna pada background
A. Nama color (b,inggris)
B. #ffff
C. Rgb (0,0,0,0)
D. …

 Background-image
mengatur gambar yang akan digunakan pada background
A. url()

 Background-position
Mengatur posisi gambar pada background
A. Top left
B. Top center
C. Top right
D. Center left
E. Center center
F. Center right
G. Bottom left
H. Bottom center
I. Bottom right
J. X% Y%
K. X-pos Y-pos

 Background-repeat
mengatur jenis pengulangan gambar pada background
A. Repeat-c
B. Repeat-y
C. No-repeat

 Shorthand
A. Background : color url() position repeat;
B. Contoh : background : lightgreen url(bg.png) top left no-repeat;
4. Selector :
Digunakan pada css untuk mengenali sebuah elemen HTML yang akan di beri style
A. Id
a) Sebuah elemen HTML hanya boleh memiliki 1 id
b) Setiap halaman hanya boleh memiliki 1 elemen dengan id tersebut
c) Dapat digunakan sebagai penanda halaman untuk link
d) Digunakan juga untuk javascript
e) Sebaiknya tidak digunakan untuk css (lebih baik menggunakan class)
B. Class
C. Complex slector

5. Pseudo-class:
Kelas semu yang dimiliki oleh sebuah elemen HTML, yang membuat kita dapat mendefinisikan style pada
“keadaan tertentu” dari elemen tersebut
 Pseudo-class yang terhubung dengan link :
A. :link
Style default pada sebuah link ( a yang memiliki href)
B. : hover
Style Ketika kursor mouse berada diatas sebuah link/elemen
C. :active
style ketika sebuah link di klik ( keadaan aktif)
D. :visited
style Ketika sebuah link sudah pernah dikunjungi sebelum nya (menggunkan browser
yang sama)
 Pseudo-class yang berhubungan dengan posisi elemen (1)
A. :first-child
memilih elemen pertama dari sebuah parent (elemen pembungkus nya)
B. :last-child
memilih elemen terakhir dari sebuah parent (elemen pembungkus nya)
C. :nth-child(n)
memilih elemen ke0n dari sebuah parent (elemen pembungkus nya) n bisa berarti urutan
(1), (2), … atau pola (2n), (3n+2), (4n-1) atau ganjil dan genap (even) & (odd)
 Pseudo-class yang berhubungan dengan posisi elemen (2)
A. :first-of-type
memilih elemen pertama dari sebuah jenis/tipe tag
B. :last-of-type
memilih elemen terakhir dari sebuah jenis/tipe tag

6. Inheritance (pewarisan):
Sebuah elemen mewarisi beberapa nilai dari property yang dimilik oleh elemen parent-nya
A. Properti yang diwariskan:
a) Color
b) Font
c) Letter-spacing
d) Line-height
e) Lint-style
f) Text-align
g) Text-indent
h) Text-transform
i) Visibility
j) White-space

7. Specifity:
setiap deklarasi css (selector) memiliki BERAT yang berbeda. Berat tersebut menentukan seberapa
spesifik sebuah elemen dapat dipilih oleh selector
 Ketika buat sebuah elemen p dan kita beri 2 style color sekaligus didalam 1 selector (p) maka yang
akan muncul adalah style color yg ke 2 karena style color yg ke 2 menimpa style color ke 1
 Tetapi jika kita memberi elemen tersebeut selector id/class ,Ketika kita akan memberi style color dan
menggunakan slector id/class maka akan jauh lbh sepesifik dari pada hanya menggunakan p saja
 CSS Layouting:
Teknik css untuk mengatur dan meletakan atau memposisi kan elemen elemen HTML yang sudah kita buat
menggunakan sintax css

8. Display:
Setiap tag pada HTML berada didalam sebuah kotak. Property display pada css mengatur perilaku dari
kotak tersebut. Setiap tag pada HTML memiliki nilai default untuk property DISPLAY. Tetapi kita juga
dapat mengubah perilaku dari tag tersebut dengan mengganti value nya.
i. pengertian <div>&<span>: tag pada HTML digunakan untuk memverikan ‘maksud’/’arti’ pada
sebuah konten (p untuk paragtaf, h1 untuk heading utama dll)
tag <div> dan <span> tidak memiliki ‘arti’ apapun keduanya digunakan untuk mengelompokkan
tag-tag HTML dan memberikan informasi terhadap tag=tag tersebut.
ii. <div> memiliki display default nya adalah blok
<span> memiliki dispalay default nya adalah inline

A. Inline:
elemen inline: b, strong, i, em, a, span, sub, sup, button, input, label, select, textarea,…
a) Elemen HTML yang secara default tidak menambahkan baris baru Ketika dibuat
b) Lebar dan tinggi elemennya sebesar konten yang ada didalam nya
c) Kita tidak dapat mengatur tinggi dan lebar dari elemen inline
d) Margin dan padding hanya mempengaruhi elemen secara horizontal, tidak vertical
e) Hanya elemen img saja yang display inline nya bisa kita atur width dan height nya

B. Inline-block
a) Tidak ada elemen yang default memiliki property display : inline-block
b) Kita harus ubah secara manual property tersebut
c) Perilaku dasarnya sama dengan elemen inline
d) Perbedaanya, elemen inline-block dapat kita atur tinggi dan lebar nya

C. Block: h1-h6, p, ol, ul, li, form, hr, div,..

a) Elemen HTML yang secara default menambahkan baris baru Ketika dibuat
b) Jika tidak diatur lebar nya, maka lebar default dari elemen block akan memenuhi
lebar dari browser/parent nya
c) Kita dapat mengatur tinggi dan lebar dari elemen block
d) Didalam elemen block, kita dapat menyimpan tag dengan elemen inline, inline-
block, atau bahkan elemen block lagi
e) Jika kita tambahkan elemen block lg di bawah maka dia akan ada di bawah nya
bukan disamping nya hal tersebut adalah perilaku dari display block

D. None

9. Dimensi
Property css untuk mengatur dimensi: width dan height
a) Px
b) %
c) In
d) Cm
e) Mm
f) Pt
g) Pc

10. Overflow
Property css yang akan kita gunakan untuk mengatur perilaku elemen yang kasus nya keluar dari parent
nya
a) Visible (value default) meskipun kita tidak kasih velue visible elemen pasti default nya visible
(jika da konten yang keluar dari parent nya maka dia akan diperlihat kan)
b) Auto : css akan secara otomatis menambah kan scroll Ketika konten nya tidak cukup lagi
c) Hidden
d) Scroll
11. Box model
css box model mendefinisikan ‘kotak’ yang dihasilkan oleh sebuah elemen, lalu menampilkannya sesuai
dengan format visual nya terdiri dari:
 Setiap elemen didalam halaman berada didalam sebuah box(kotak)
 Kita bisa mengatur ukuran dan posisi kotak tersebut
 Kita bisa memberi warna/gambar sebagai background kotak tersebut

A. Margin
area transparan disekitar kotak (diluar border)
1) Cara pakai
2) Overlapping margin
ini terjadi Ketika kita menggambungkan 2 buah margin biasa nya kiri dan kanan
/ atas dan bawah
3) Negative margin
margin kita bisa mengasih nilai negatif
4) Auto
5) Shorthand

B. Border
batas disekeliling content dan padding

C. Padding
area transparan didalam kota (antara konten dan border)

D. Box-sizing
mengatur agar ukuran kotal/elemen tidak berubah dikarenakan penambahan
padding&margin

E. Content (tulisan, gambar, link, dll)

konten sebenarnya didalam box, bisa serupa teks atau gamabar
12. Float
property pada css untuk mengatur posisi sebuah elemen. Sebuah elemen dapat dipaksa untuk berada
disebelah kiri atau kanan dari parent/pembungkus nya dengan menggunakan property ini
a) None
b) Right
c) Left
I. Normal flow
II. Out-of flow
 Yang bisa dilakukan menggunakan float
a) Text-wrapping
membuat teks mengelilingi gambar atau elemen lain
b) Image gallery
membuat serangkaian gambar menjadi galeri
c) Multi-column layout
membuat halaman memiliki beberapa kolom
d) DLL
dan masih banyak
 cara menghentikan/membersihkan Float
a) left
b) right
c) both (untuk kedua nya)

1) menggunakan property overflow

 auto
2) menggunakan <div> kosong
 membuat <div> kosong dengan claas (kosong) lalu di css nya kita menambah
kan properti clear di div kosong sesuai dengan float nya
3) menggunakan Teknik micro clearfix

13. Position
position memungkinkan kita untuk menggeser sebauh elemen tanpa mempengaruhi elemen lain nya
a) Static (default)
 Menggunakan position selain static (non-static), akan membuat sebuah elem
menjadi seolah olah berbeda dimensi dari elemen lain nya
 Elemen yang diberi position selain static dapat menggunakan properti
top, left,right, dan bottom untuk mengatur posisinya
b) Relative
 Ketika kita menggerakkan elemen dengan posisi relative (menggunakan
property top, left, bottom, dan right), ruang yang ditempati oleh
elemen tersebut masih ada
 Ketika kita menggerakkan elemen dengan posisi relative, elemen akan bergerak
relative terhadap posisi semula nya
 Jika kita memberi property top: 0; dan left: 0; maka elemen tidak berubah
posisinya
c) Absolute
 Ketika kita menggerakkan elemen dengan posisi absolute (menggunakan
property top, left, bottom, dan right). Ruang yang ditempati oleh elemen
tersebut dianggap tidak ada
 Ketika kita menggerakkan elemen dengan posisi absolut, elemen akan bergerak
negative terhadap posisi dari elemen parent-nya, selama position parent-
nya memiliki position yang juga non-static
d) Fixed
position fixed akan relative terhadap windows browser
dia tidak akan memperdulikan parent nya walau pun parent nya non statik
dan ketika kita scrol halaman nya akan terkunci di posisi nya biasa di gunakan untuk
navbar
14. Z-index
dalam property z-index kita bisa memberi nilai angka semakin besar nilai angka nyam aka elemen nya
akan berada semakin depan ,jika sumbu x adalah horizontal dan sumbu y vertikal maka sumbu z d3 ,jika
 ingin berada paling depan tinggal kita beri nilai paling besar dan jika ingin berada paling belakang tinggkal
kita kasih nilai negative
 CSS3
15. Border radius
Elemen css untuk membuat ujung box nya tumpul, kita bisa memambahkan border-radius ke satu sisi saja.
Jika hanya border-radius=50px itu akan memberi ke 4 sisi nya. Secara tidak lansung border radius seperti
bingkai untuk foto menggunakan background image, jika menambahkan foto nya dari html maka kita harus
menambahkan overflow hidden lalu atur gambar nya

16. Opacity
Property untuk mengatur transparansi pada suatu elemen, semakin kecil angka nya semakin transparan

17. RGBa & HSLa

RGBa: property pengganti opacity untuk mengatur transparansi
HSLa: property pengganti opacity untuk mengatur transparansi, heu(h) untuk mengubah warna, saturation
(s) untuk mengatur saturasi warna, lightnes (l) untuk gelap terang

18. Box-shadow
Property untuk membuat bayangan pada elemen yang kita buat
a) <x-offset>
untuk mengatur jarak bayangan pada sumbu horizontal (nilai nya numerik) jika nilai
nya dikasih 10px maka akan begerak ke kanan 10px jika dikasih nilai mines maka
akan begerak ke sebalah kiri
b) <y-offset>
untuk mengatur jarak bayangan secara vertikal
c) <blur>
seberapa besar blur yang kita kasih
d) <color>
warna yang kita ingin kan
e) <inset>
jika kita memberi property ini shadow nya berada didalam kotak nya
f) <spread>
untuk menambah kan size shadow nya
g) Multiple shadow
kita bisa memberikan lebih dari satu bayangan dalam satu elemen

19. Text shadow

Property untuk membuat shadow pada text(tulisan), mirip seperti box-shadow hanya tidak memiliki spread
dan inset
a) <x-offset>
untuk mengatur jarak bayangan pada sumbu horizontal (nilai nya numerik) jika nilai
nya dikasih 10px maka akan begerak ke kanan 10px jika dikasih nilai mines maka
akan begerak ke sebalah kiri
b) <y-offset>
untuk mengatur jarak bayangan secara vertikal
c) <blur>
seberapa besar blur yang kita kasih
d) <color>
warna yang kita ingin kan
e) Multiple shadow
kita bisa memberikan lebih dari satu bayangan dalam satu elemen
20. Linear gradient
Memberikan gradasi warna secara garis luruh, linear gradient bukan property pada css3, melainkan value
untuk background-image
background-image: linear-gradient (warna awal, warna akhir);
sintaks lengkap: background-image: linear-gradient(suduht | arah, warna awal, warna
akhir);
Arah: to bottom, to top, to left, to right, to left top, to left bottom, to right top, to right
bottom
Color stop untuk mengatur bobot untuk gradient warna nya
 background-image: linear-gradient(suduht/arah, warna awal 63%, warna akhir 83%);
21. Radial gradient
Memberikan gradasi warna secara melingkar, radial gradient bukan property pada css3, melainkan value
untuk background-image
background-image: radial-gradient(suduht | arah, warna awal, warna akhir);
warna yang diberikan akan menyesuaikan ukuran nya, jika ingin mengatur satu warna memiliki ukuran
yang jauh lebih besar dari pada warna yang lain nya maka bisa menggunkana color stop seperti di linear
gradient
sintaks lengkap: radila-gradient(<tipe> <jangkauan> at <posisi-y> <posisi-x>, <warna-1>, <warna-
2., …, <wanra-n>):
tipe:
a) Ellipse (default)
b) Circle bentuk gradasi nya akan melingkar
Jangkauan: jarak dari pusat gradasi ke sisi terluar nya
1) Closest-corner
jarak dari pusat gradient ke sudut terdekat elemen
2) Closest-side
jarak dari pusat gradient ke sisi terderkat elemen
3) Farthest-corner
jarak dari pusat gradient ke sudut tejauh elemen
4) Farthest-side
jarak dari pusat gradient ke sisi terjauh elemen

Background-image: radial-gradient(circle closest-side, red, blue);

Posisi-y
a) Top
b) Center
c) Bottom
d) Px
Posisi-x
a) Left
b) Center
c) Right
d) Px
Background-image: radial-gradient(circle closest-side at top left, red, blue);
 22. Font face
Digunakan untuk mengelola font pada css3.
1) Font yang di pilih menggunakan font family maka font harus ada disistem operasi
client/user.
2) Kita juga bisa menggunkana layanan dari google http://www.fonts.google.com
3) Atau bisa juga menggunakan @font-face
menggunakan font face kita harus menginstal dlu font yang ingin kita gunakan cara
menggunakan font-face:

Setiap font memiliki tipe yang berbeda kita juga harus memasukan tipe font agar tipe font nya bisa kita gunakan
dan masing masing dari font karena memiliki tipe yang berbeda dukungan browser terhadap font tersebut juga
beda

23. Web font generator

Mengubah tipe font yang sudah ada menjadi tipe font yang kita inginkan missal dari EOT ke WOFF kita
bisa menggunakan web font generator
24. Vendor prefixes
Teknik di css3 yang digunakan agar sintaks css3 yang kita buat itu compatible di semua browser, sintaks
khusus yang harus ditambahkan untuk beberapa property css3, sintaks spesifik untuk tiap browser/vendor
memiliki karakteristik berbeda

Masing prefixes ini akan membuat property css3 berkerja di browser tersebut, karenam tidak semua
browser support css3!
25. Filter
Property css3 yang digunakan untuk memberikan efek visual pada gambar , background atau border

Filter: <tipe-filter>;

1) blur(px)
efek blur pada css3 ada lah gaussian blur, semakin besar angka makan akan
semakin blur
2) brightness (angka|%)
mengatur gelap terang nya gamabr, semakin tinggi angka nya semakin
terang
3) contrast (angka|%)
merip seperti brightness
4) saturate (angka|%)
mengatur saturasi pada gambar, semakin besar maka gambar nya semakin
berwarna
5) grayscale (angka|%)
member ikan efek gambar menjadi abu abu
6) sepia (angka|%)
memberikan efek seperti warna kuning
7) hue-rotate (deg)
merotasi warna searah jarum jam
8) invert (angka|%)
membuat foto nya menjadi efek negative film
9) opacity (angka|%)
10) drop-shadow (sama seperti box-shadow)
kita juga bisa memberi lebih dari satu filter

26. Transform
Property transform memungkin kan kita dapat memanipulasi format visual dari elemen html, ada 2 jenis
transform 2D & 3D
Transform: <fungsi>;
Fungsi transform
1) Scale
memperbesar/memperkecil
scale(angka), scaleX(angka), scaleY(angka)
2) Rotate
memitar
rotate(deg), rotateX(deg), rotateY(deg)
3) Skew
membuat coding miring
skew(deg), skewX(deg), skewY(deg
4) Translate
mengubah posisi
translate(px), translateX(px), translateY(px)
27. Transition

 GIT & GITHUB

Git salah satu dari VCS ( Version Control System), disebut juga revision control system atau source code
management adalah system yang mengelola perubahan dari sebuah dokumen, program computer, website
dan kumpulan informasi lain
 Sebuah system yang menyimpan rekaman/snapshot perubahan pada source code
 Memungkinkan bekerja berkolaborasi dengan baik
  Mengatahui siapa yang melakukan dan kapan sebuah perubahan terjadi
 Memungkinkan kita untuk Kembali ke keadaan sebelum perubahan (checkout)
Git: sebuah VSC terdistribusi untuk mengelola perubahan file dalam folder / sebuah software untuk
mengelola perubahan file didalam folder (repository/repo), Riwayat perubahan file disimpan
menggunakan serangkaian commit
Istilah dalam git:

 Repo: folder project kita

 Commit: rekaman / snapshot dari repo kita
 Hash: penanda unik pada sebuah commit
 Checkout: berpindah ke sebuah commit
 Branch: cabang bebas dari sebuah commit
 Marge: menggambungkan branch
 Remote: sumber yang memiliki repo
 Clone: mengambil repo dari remote
 Push: mengirimkan commit ke repo
 Pull: mengambil commit dari repo
GitHub: layanan cloud untuk menyimpan & mengola project / repo git (Instagram nya para programmer)