Scribd Logo
Upload

Welcome to Scribd!

  • 45 views

    06 - Bootstrap 01 - Workshop Desain Web - 20201018

    Uploaded by

    Anas Arsa
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    06 - Bootstrap 01 - Workshop Desain Web - 20201018

    Uploaded by

    Anas Arsa
    45 views40 pages
    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.

    Original Title

    06 - Bootstrap 01- Workshop Desain Web - 20201018

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    45 views40 pages

    06 - Bootstrap 01 - Workshop Desain Web - 20201018

    Uploaded by

    Anas Arsa
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 40

    Workshop Desain Web

    06. Bootstrap (1)

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


    http://udinharun.lecturer.pens.ac.id
    udinharun@pens.ac.id

    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