Scribd
Upload
69 views

05 - CSS 02 - Workshop Desain Web - 20201007

This document discusses a workshop on web design using CSS. It provides an overview of the course schedule, learning objectives, and topics to be covered. The topics include CSS rounded corners, border images, gradients, shadows, transforms, tooltips, buttons, pagination, multiple columns, and box sizing. It includes code examples and exercises for students to complete each topic. The document encourages students to complete the exercises and submit a report documenting their results. It also provides tips for online learning, communication, and success as a student.

Uploaded by

EC T
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
69 views

05 - CSS 02 - Workshop Desain Web - 20201007

This document discusses a workshop on web design using CSS. It provides an overview of the course schedule, learning objectives, and topics to be covered. The topics include CSS rounded corners, border images, gradients, shadows, transforms, tooltips, buttons, pagination, multiple columns, and box sizing. It includes code examples and exercises for students to complete each topic. The document encourages students to complete the exercises and submit a report documenting their results. It also provides tips for online learning, communication, and success as a student.

Uploaded by

EC T
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

Workshop Desain Web

05. Cascading Style Sheet (CSS) (2)

M. Udin Harun Al Rasyid, S.Kom, Ph.D


http://udinharun.lecturer.pens.ac.id
[email protected]

http://udinharun.lecturer.pens.ac.id 1
http://udinharun.lecturer.pens.ac.id 2
Rencana Pembelajaran Semester
Pekan Pembahasan
1-2 HTML Dasar
3 HTML 5
4 Cascading Style Sheet (CSS)
5 Cascading Style Sheet (CSS) advanced
6-7 Bootstrap
8 UTS: Presentasi Proposal Final Project Kuliah
9 Bootstrap
10-11 Javascript
12 jQuery
13 Website Layout & Template
14 Colors & Typography
15-16 UAS: Demo Final Project Kuliah

http://udinharun.lecturer.pens.ac.id 3
Capaian Pembelajaran

 Mahasiswa memahami sintak CSSS


 Mahasiswa mampu membuat file CSS untuk
memformat tampilan website.

http://udinharun.lecturer.pens.ac.id 4
Pokok Bahasan
 CSS Rounded Corners
 CSS Border Images
 CSS Gradients
 CSS Shadow Effects
 CSS 2D Transforms
 CSS Tooltip
 CSS Buttons
 CSS Pagination
 CSS Multiple Columns
 CSS Box Sizing

http://udinharun.lecturer.pens.ac.id 5
CSS Rounded Corners

http://udinharun.lecturer.pens.ac.id 6
http://udinharun.lecturer.pens.ac.id 7
Percobaan 01:

http://udinharun.lecturer.pens.ac.id 8
Percobaan 01 (Lanjutan Code):

http://udinharun.lecturer.pens.ac.id 9
http://udinharun.lecturer.pens.ac.id 10
CSS Border Images

http://udinharun.lecturer.pens.ac.id 11
http://udinharun.lecturer.pens.ac.id 12
Percobaan 02:

http://udinharun.lecturer.pens.ac.id 13
http://udinharun.lecturer.pens.ac.id 14
CSS Gradients

http://udinharun.lecturer.pens.ac.id 15
http://udinharun.lecturer.pens.ac.id 16
Percobaan 03:

http://udinharun.lecturer.pens.ac.id 17
http://udinharun.lecturer.pens.ac.id 18
CSS Shadow Effects

http://udinharun.lecturer.pens.ac.id 19
http://udinharun.lecturer.pens.ac.id 20
Percobaan 04:

http://udinharun.lecturer.pens.ac.id 21
CSS 2D Transforms

http://udinharun.lecturer.pens.ac.id 22
Percobaan 05:

http://udinharun.lecturer.pens.ac.id 23
http://udinharun.lecturer.pens.ac.id 24
CSS Tooltip

http://udinharun.lecturer.pens.ac.id 25
Percobaan 06:

http://udinharun.lecturer.pens.ac.id 26
CSS Buttons

http://udinharun.lecturer.pens.ac.id 27
Percobaan 07:

http://udinharun.lecturer.pens.ac.id 28
http://udinharun.lecturer.pens.ac.id 29
CSS Pagination

http://udinharun.lecturer.pens.ac.id 30
Percobaan 08:

http://udinharun.lecturer.pens.ac.id 31
CSS Multiple Columns

http://udinharun.lecturer.pens.ac.id 32
Percobaan 09:

http://udinharun.lecturer.pens.ac.id 33
http://udinharun.lecturer.pens.ac.id 34
CSS Box Sizing

http://udinharun.lecturer.pens.ac.id 35
Percobaan 10:

http://udinharun.lecturer.pens.ac.id 36
http://udinharun.lecturer.pens.ac.id 37
Tugas Workshop

 Kalian Kerjakan 10 percobaan source code


diatas.
 Buatkan Laporan DOC yang terdiri dari:
 Cover
 Course Code, hasil tampilan, dan penjelasan tentang
tag-tag HTML setiap percobaan.

http://udinharun.lecturer.pens.ac.id 38
Next

Bootstrap

http://udinharun.lecturer.pens.ac.id 39
Referensi

 https://www.w3schools.com/css/default.asp

http://udinharun.lecturer.pens.ac.id 40
IKLAN STRATEGI BELAJAR DAN
SUKSES MENJADI MAHASISWA

http://udinharun.lecturer.pens.ac.id 41
Strategi Belajar  Cek jaringan, kuota,
PC/Laptop/smartphone
Online dan
 Membaca dan melihat konten materi dari
Komunikasi yang dosen sebelum pembelajaran dimulai.
Efektif  Hadir tepat waktu sesuai jam kuliah.
 Ijin ke dosen jika datang terlambat kuliah
atau ada kendala.
 Catat hal-hal yang tidak dimengerti dan
tanyakan saat kuliah online sinkron.
 Proaktif dalam forum diskusi secara
langsung maupun tidak langsung.
 Kerjakan semua tugas tepat waktu.
 Jangan sampai tidak mengerjakan tugas.
 Pastikan tugas sudah sukses diunggah
secara online.
 Berkomunikasi dengan dosen sesuai etika. Perhatikan
Strategi Belajar pemakaian kosakata yang baik, waktu, tempat, alat
komunikasi.
Online dan  Diskusi dengan teman/kakak kelas berkaitan dengan
Komunikasi yang tugas dan materi.
 Buat forum diskusi online dengan teman seangkatan.
Efektif  Ikuti forum komunitas IT di kampus maupun luar kampus.
 Ikuti forum BEM/HIMA/UKKI
 Aktif dalam kompetisi lomba mahasiswa.
 Menambah pengetahuan dari luar kampus secara online:
 edX
 Coursera
 udemy
 Khan Academy
 MIT Opencourseware
 W3schools
 Youtube
 etc
 Siapkan mentalmu dahulu
 Atur jadwalmu dengan sebaik mungkin
 Lengkapi alat-alat yang menunjang
perkuliahan
 Pasang target IPK
 Belajar dengan fokus dan kerja keras
 Review materi kuliah
 Dekat dengan dosen
Tips Sukses  Asah skill
Menjadi Mahasiswa  Jalin jaringan yang luas
 Berorganisasi
 Berdoa kepada Allah SWT dan
meminta doa restu dari kedua orangtua

You might also like