MATA PELAJARAN PWPB
Ganjil
#8
2025
Profile
EGI SAMSUL MU’ARIF, S.Pd.
Guru UI/UX, PEMROGRAMAN WEB & PERANGKAT BERGERAK (PWPB)
PWPB
PENGALAMAN KERJA
2019 - 2021 (FLEAVA - FRONTEND + DEVOPS)
2021 - SEKARANG (GURU PPLG SMKN 4 KUNINGAN)
PENDIDIKAN TERAKHIR
S1 PENDIDIKAN TEKNIK INFORMATIKA (UNDIKSHA)
PENGALAMAN PROJECT
ARC
JANNATA
LHM
NATYA
LKH
ALL FLEAVA SERVER
TITIPKU BLOG
DAN LAINNYA….
2
Agenda
01
02
Studi Kasus Website Desa: Header
Refleksi
PWPB
3
Kebutuhan Dasar
Pada Materi Ini
PWPB
MENGENAL TEKNOLOGI
4
Initial Project
PWPB
Membuat Kerangka Project:
index.html
assets (folder)
css (folder)
style.css
images (folder)
5
Yang akan dipelajari
Di project Ini
(Terutama Penerapan
CSS)
PWPB
6
Layouting
PWPB
CSS Keyword: width, margin, padding display, position.
7
Flexbox
PWPB
Keyword
display: flex, align-items, justify-content
Referensi: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
8
Media Query
PWPB
@media not|only mediatype and (media feature) and (media feature) {
CSS-Code;
}
9
Media Query
PWPB
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
10
Media Query
PWPB
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
11
Media Query
PWPB
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only/ screen and (min-width: 1200px) {...}
12
Mari Praktik
PWPB
13
Refleksi
PWPB
Apa kendala?
Apa yang dipelajari hari ini?
#1
#2
14
TERIMAKASIH
PWPB
Ganjil
#8
2025