SlideShare a Scribd company logo
Learning CSS Framework
Bootstrap
Andrian Dwi Baitur Rizky
Andrian Dwi Baitur Rizky
● Head of Academic in Charge GDSC
Trunojoyo
● Informatics Engineering 2020
● Sidoarjo
● Instagram : andreandriand
● Linkedln : linkedin.com/in/andreandrian
● Github : andreandriand
● Showwcase : @andreandrian
Review
Apa itu CSS ?
Framework
Framework adalah sebuah kerangka kerja yang digunakan untuk
mengembangkan website. Framework ini diciptakan untuk
membantu web developer dalam menulis baris kode. Dengan
menggunakan framework penulisan kode akan jauh lebih mudah,
cepat, dan terstruktur rapi.
- dicoding.com
Framework vs Template
“a template is like a paint-by-numbers and a framework is
more like a LEGO set.”
- Blair Kelly
Framework adalah suatu kerangka yang harus disusun dengan
benar agar dapat digunakan. Sedangkan Template adalah sebuah
kerangka yang sudah tersusun rapi dengan output yang telah
ditentukan sebelumnya.
CSS Framework
● Bootstrap
● Materialize
● SemanticUI
● Foundation
● Bulma
● UIKit
● etc.
Today’s Job
Create portfolio website from scratch using bootstrap 5
Let’s CODE

More Related Content

Similar to Study Jam Frontend #2 (Bootstrap).pptx

DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
shabilla6
 
DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
shabilla6
 
DevCoach 131 : Front-End | Bikin Elemen HTML Sendiri dengan Web Component
DevCoach 131 : Front-End | Bikin Elemen HTML Sendiri dengan Web ComponentDevCoach 131 : Front-End | Bikin Elemen HTML Sendiri dengan Web Component
DevCoach 131 : Front-End | Bikin Elemen HTML Sendiri dengan Web Component
shabilla6
 
1100631021_YiiFramework
1100631021_YiiFramework1100631021_YiiFramework
1100631021_YiiFramework
LAILATUL MUTMAINNAH
 
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
DicodingEvent
 
Domain .id dalam Dunia Kreatif Digital Indonesia (Andi Budimansyah - Pandi)
Domain .id dalam Dunia Kreatif Digital Indonesia (Andi Budimansyah - Pandi)Domain .id dalam Dunia Kreatif Digital Indonesia (Andi Budimansyah - Pandi)
Domain .id dalam Dunia Kreatif Digital Indonesia (Andi Budimansyah - Pandi)
Indriyatno Banyumurti
 
GDSC UIN Walisongo - Info Session.pdf
GDSC UIN Walisongo - Info Session.pdfGDSC UIN Walisongo - Info Session.pdf
GDSC UIN Walisongo - Info Session.pdf
Oniquee
 
Tugas 1 0317 individu
Tugas 1 0317 individuTugas 1 0317 individu
Tugas 1 0317 individu
eko nofrianto
 
Suses menjadi programmer web
Suses menjadi programmer webSuses menjadi programmer web
Suses menjadi programmer web
Teguh Andriyanto
 
Apa Itu Framework CodeIgniter?
Apa Itu Framework CodeIgniter?Apa Itu Framework CodeIgniter?
Apa Itu Framework CodeIgniter?
jundi26
 
Tugas 3 0317 (individu)
Tugas 3  0317 (individu)Tugas 3  0317 (individu)
Tugas 3 0317 (individu)
RiaWahyuni5
 
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdfMemahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Beon Intermedia
 
bootstrap.pptx
bootstrap.pptxbootstrap.pptx
bootstrap.pptx
febriyantisihotang
 
Konsep Dasar Proyek dan Proyek Sistem Informasi
Konsep Dasar Proyek dan Proyek Sistem InformasiKonsep Dasar Proyek dan Proyek Sistem Informasi
Konsep Dasar Proyek dan Proyek Sistem Informasi
Sandi Andrian
 
Tugas 6 individu rekayasa web 0316
Tugas 6  individu rekayasa web 0316Tugas 6  individu rekayasa web 0316
Tugas 6 individu rekayasa web 0316
septianarul
 
Rekayasa web
Rekayasa webRekayasa web
Rekayasa web
Elisanendes
 
Dapatkan awal yang baik dalam desain web
Dapatkan awal yang baik dalam desain webDapatkan awal yang baik dalam desain web
Dapatkan awal yang baik dalam desain web
ConradsenFoley6
 
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL BTHE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
SyahraniAdrianty
 
Kelompok 3.pptx
Kelompok 3.pptxKelompok 3.pptx
Kelompok 3.pptx
2141006JESSICAALTHEA
 
Modul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter DasarModul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter Dasar
Ridwan Fadjar
 

Similar to Study Jam Frontend #2 (Bootstrap).pptx (20)

DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
 
DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
DevCoach #131_ Front-End Web _ Bikin Elemen HTML Sendiri dengan Web Component...
 
DevCoach 131 : Front-End | Bikin Elemen HTML Sendiri dengan Web Component
DevCoach 131 : Front-End | Bikin Elemen HTML Sendiri dengan Web ComponentDevCoach 131 : Front-End | Bikin Elemen HTML Sendiri dengan Web Component
DevCoach 131 : Front-End | Bikin Elemen HTML Sendiri dengan Web Component
 
1100631021_YiiFramework
1100631021_YiiFramework1100631021_YiiFramework
1100631021_YiiFramework
 
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
 
Domain .id dalam Dunia Kreatif Digital Indonesia (Andi Budimansyah - Pandi)
Domain .id dalam Dunia Kreatif Digital Indonesia (Andi Budimansyah - Pandi)Domain .id dalam Dunia Kreatif Digital Indonesia (Andi Budimansyah - Pandi)
Domain .id dalam Dunia Kreatif Digital Indonesia (Andi Budimansyah - Pandi)
 
GDSC UIN Walisongo - Info Session.pdf
GDSC UIN Walisongo - Info Session.pdfGDSC UIN Walisongo - Info Session.pdf
GDSC UIN Walisongo - Info Session.pdf
 
Tugas 1 0317 individu
Tugas 1 0317 individuTugas 1 0317 individu
Tugas 1 0317 individu
 
Suses menjadi programmer web
Suses menjadi programmer webSuses menjadi programmer web
Suses menjadi programmer web
 
Apa Itu Framework CodeIgniter?
Apa Itu Framework CodeIgniter?Apa Itu Framework CodeIgniter?
Apa Itu Framework CodeIgniter?
 
Tugas 3 0317 (individu)
Tugas 3  0317 (individu)Tugas 3  0317 (individu)
Tugas 3 0317 (individu)
 
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdfMemahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
 
bootstrap.pptx
bootstrap.pptxbootstrap.pptx
bootstrap.pptx
 
Konsep Dasar Proyek dan Proyek Sistem Informasi
Konsep Dasar Proyek dan Proyek Sistem InformasiKonsep Dasar Proyek dan Proyek Sistem Informasi
Konsep Dasar Proyek dan Proyek Sistem Informasi
 
Tugas 6 individu rekayasa web 0316
Tugas 6  individu rekayasa web 0316Tugas 6  individu rekayasa web 0316
Tugas 6 individu rekayasa web 0316
 
Rekayasa web
Rekayasa webRekayasa web
Rekayasa web
 
Dapatkan awal yang baik dalam desain web
Dapatkan awal yang baik dalam desain webDapatkan awal yang baik dalam desain web
Dapatkan awal yang baik dalam desain web
 
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL BTHE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
 
Kelompok 3.pptx
Kelompok 3.pptxKelompok 3.pptx
Kelompok 3.pptx
 
Modul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter DasarModul Pelatihan CodeIgniter Dasar
Modul Pelatihan CodeIgniter Dasar
 

More from AdiMasmudi

Study Jam UIUX_Meet 1.pdf
Study Jam UIUX_Meet 1.pdfStudy Jam UIUX_Meet 1.pdf
Study Jam UIUX_Meet 1.pdf
AdiMasmudi
 
Study Jam UIUX_Meet 2.pdf
Study Jam UIUX_Meet 2.pdfStudy Jam UIUX_Meet 2.pdf
Study Jam UIUX_Meet 2.pdf
AdiMasmudi
 
Study Jam UIUX_Final Meet.pdf
Study Jam UIUX_Final Meet.pdfStudy Jam UIUX_Final Meet.pdf
Study Jam UIUX_Final Meet.pdf
AdiMasmudi
 
Day 1 - Dasar Android.pptx
Day 1 - Dasar Android.pptxDay 1 - Dasar Android.pptx
Day 1 - Dasar Android.pptx
AdiMasmudi
 
Day 2 - Dasar Kotlin.pptx
Day 2 - Dasar Kotlin.pptxDay 2 - Dasar Kotlin.pptx
Day 2 - Dasar Kotlin.pptx
AdiMasmudi
 
Day 3 - Activity dan View.pptx
Day 3 - Activity dan View.pptxDay 3 - Activity dan View.pptx
Day 3 - Activity dan View.pptx
AdiMasmudi
 
Day 4 - RecyclerView.pptx
Day 4 - RecyclerView.pptxDay 4 - RecyclerView.pptx
Day 4 - RecyclerView.pptx
AdiMasmudi
 
studyjam-frontend-3.pptx
studyjam-frontend-3.pptxstudyjam-frontend-3.pptx
studyjam-frontend-3.pptx
AdiMasmudi
 
Getting start with vue.pptx
Getting start with vue.pptxGetting start with vue.pptx
Getting start with vue.pptx
AdiMasmudi
 
Back-End.pptx
Back-End.pptxBack-End.pptx
Back-End.pptx
AdiMasmudi
 
Study Jam Backend.pptx
Study Jam Backend.pptxStudy Jam Backend.pptx
Study Jam Backend.pptx
AdiMasmudi
 
Study Jam Backend - Firebase.pptx
Study Jam Backend - Firebase.pptxStudy Jam Backend - Firebase.pptx
Study Jam Backend - Firebase.pptx
AdiMasmudi
 
[info session] Intro GDSC Trunojoyo Madura University 2022.pptx
[info session] Intro GDSC Trunojoyo Madura University 2022.pptx[info session] Intro GDSC Trunojoyo Madura University 2022.pptx
[info session] Intro GDSC Trunojoyo Madura University 2022.pptx
AdiMasmudi
 

More from AdiMasmudi (13)

Study Jam UIUX_Meet 1.pdf
Study Jam UIUX_Meet 1.pdfStudy Jam UIUX_Meet 1.pdf
Study Jam UIUX_Meet 1.pdf
 
Study Jam UIUX_Meet 2.pdf
Study Jam UIUX_Meet 2.pdfStudy Jam UIUX_Meet 2.pdf
Study Jam UIUX_Meet 2.pdf
 
Study Jam UIUX_Final Meet.pdf
Study Jam UIUX_Final Meet.pdfStudy Jam UIUX_Final Meet.pdf
Study Jam UIUX_Final Meet.pdf
 
Day 1 - Dasar Android.pptx
Day 1 - Dasar Android.pptxDay 1 - Dasar Android.pptx
Day 1 - Dasar Android.pptx
 
Day 2 - Dasar Kotlin.pptx
Day 2 - Dasar Kotlin.pptxDay 2 - Dasar Kotlin.pptx
Day 2 - Dasar Kotlin.pptx
 
Day 3 - Activity dan View.pptx
Day 3 - Activity dan View.pptxDay 3 - Activity dan View.pptx
Day 3 - Activity dan View.pptx
 
Day 4 - RecyclerView.pptx
Day 4 - RecyclerView.pptxDay 4 - RecyclerView.pptx
Day 4 - RecyclerView.pptx
 
studyjam-frontend-3.pptx
studyjam-frontend-3.pptxstudyjam-frontend-3.pptx
studyjam-frontend-3.pptx
 
Getting start with vue.pptx
Getting start with vue.pptxGetting start with vue.pptx
Getting start with vue.pptx
 
Back-End.pptx
Back-End.pptxBack-End.pptx
Back-End.pptx
 
Study Jam Backend.pptx
Study Jam Backend.pptxStudy Jam Backend.pptx
Study Jam Backend.pptx
 
Study Jam Backend - Firebase.pptx
Study Jam Backend - Firebase.pptxStudy Jam Backend - Firebase.pptx
Study Jam Backend - Firebase.pptx
 
[info session] Intro GDSC Trunojoyo Madura University 2022.pptx
[info session] Intro GDSC Trunojoyo Madura University 2022.pptx[info session] Intro GDSC Trunojoyo Madura University 2022.pptx
[info session] Intro GDSC Trunojoyo Madura University 2022.pptx
 

Study Jam Frontend #2 (Bootstrap).pptx

  • 2. Andrian Dwi Baitur Rizky ● Head of Academic in Charge GDSC Trunojoyo ● Informatics Engineering 2020 ● Sidoarjo ● Instagram : andreandriand ● Linkedln : linkedin.com/in/andreandrian ● Github : andreandriand ● Showwcase : @andreandrian
  • 4. Framework Framework adalah sebuah kerangka kerja yang digunakan untuk mengembangkan website. Framework ini diciptakan untuk membantu web developer dalam menulis baris kode. Dengan menggunakan framework penulisan kode akan jauh lebih mudah, cepat, dan terstruktur rapi. - dicoding.com
  • 5. Framework vs Template “a template is like a paint-by-numbers and a framework is more like a LEGO set.” - Blair Kelly Framework adalah suatu kerangka yang harus disusun dengan benar agar dapat digunakan. Sedangkan Template adalah sebuah kerangka yang sudah tersusun rapi dengan output yang telah ditentukan sebelumnya.
  • 6. CSS Framework ● Bootstrap ● Materialize ● SemanticUI ● Foundation ● Bulma ● UIKit ● etc.
  • 7. Today’s Job Create portfolio website from scratch using bootstrap 5