Scribd
Upload
70 views

06 - Bootstrap 01 - Workshop Desain Web - 20201018

This document outlines a workshop on Bootstrap, a front-end web development framework. It includes an overview of the topics that will be covered in the workshop such as containers, grid systems, typography, colors, tables, and images. It provides code examples for exercises on implementing these Bootstrap features. The learning objectives are for students to understand Bootstrap syntax and be able to create Bootstrap files to develop websites. It also includes tips for online learning and communication strategies for students to be effective and successful.

Uploaded by

Anas Arsa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
70 views

06 - Bootstrap 01 - Workshop Desain Web - 20201018

This document outlines a workshop on Bootstrap, a front-end web development framework. It includes an overview of the topics that will be covered in the workshop such as containers, grid systems, typography, colors, tables, and images. It provides code examples for exercises on implementing these Bootstrap features. The learning objectives are for students to understand Bootstrap syntax and be able to create Bootstrap files to develop websites. It also includes tips for online learning and communication strategies for students to be effective and successful.

Uploaded by

Anas Arsa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

Workshop Desain Web

06. Bootstrap (1)

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 bootstrap.


 Mahasiswa mampu membuat file bootstrap
untuk mengembangkan aplikasi website.

http://udinharun.lecturer.pens.ac.id 4
Pokok Bahasan
 Introduction
 getbootstrap.com
 Containers
 Grid System
 Text/Typography
 Colors
 Tables
 Images

http://udinharun.lecturer.pens.ac.id 5
Introduction

http://udinharun.lecturer.pens.ac.id 6
http://udinharun.lecturer.pens.ac.id 7
https://getbootstrap.com/

http://udinharun.lecturer.pens.ac.id 8
Containers

http://udinharun.lecturer.pens.ac.id 9
Percobaan 01:

http://udinharun.lecturer.pens.ac.id 10
http://udinharun.lecturer.pens.ac.id 11
Grid System

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

http://udinharun.lecturer.pens.ac.id 15
http://udinharun.lecturer.pens.ac.id 16
Text/Typography

http://udinharun.lecturer.pens.ac.id 17
http://udinharun.lecturer.pens.ac.id 18
Percobaan 03:

http://udinharun.lecturer.pens.ac.id 19
http://udinharun.lecturer.pens.ac.id 20
Colors

http://udinharun.lecturer.pens.ac.id 21
http://udinharun.lecturer.pens.ac.id 22
Percobaan 03:

http://udinharun.lecturer.pens.ac.id 23
http://udinharun.lecturer.pens.ac.id 24
Tables

http://udinharun.lecturer.pens.ac.id 25
http://udinharun.lecturer.pens.ac.id 26
Percobaan 04:

http://udinharun.lecturer.pens.ac.id 27
Percobaan 04: Lanjutan Code

http://udinharun.lecturer.pens.ac.id 28
http://udinharun.lecturer.pens.ac.id 29
Images

http://udinharun.lecturer.pens.ac.id 30
http://udinharun.lecturer.pens.ac.id 31
Percobaan 05:

http://udinharun.lecturer.pens.ac.id 32
http://udinharun.lecturer.pens.ac.id 33
Tugas Workshop

 Kalian Kerjakan 5 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 34
Next

Bootstrap (2)

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

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

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

http://udinharun.lecturer.pens.ac.id 37
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