PPT BUNGA.pptx seminar laporan Praktek Kerja lapangan

Seminar Laporan Praktek Kerja Lapangan

1. PELAKSANAAN PRAKTIK KERJA LAPANGAN (PKL) NAMA : BUNGA ASTRI LESTARI NIS : 202110035 KELAS : TKJ 1

2. WAKTU PELAKSANAAN Waktu pelaksanaan PKL dilaksanakan pada tanggal 31 Januari sampai dengan 25 Maret 2022 .

3. Bootstrap  adalah sebuah software framework CSS, HTML, dan Javascript yang banyak digunakan oleh  front-end web developer. Framework ini membantu developer untuk membuat  website responsive yang bisa menyesuaikan ukuran layar perangkat yang digunakan pengunjung .

4. LANGKAH-LANGKAH MEMBANGUN WEB FRONTEND DENGAN BOOTSTRAP 1. Menentukan UKM dan dibuat menjadi contoh website dengan mengunakan figma . Contoh :

5. 2. Langkah kedua buat rancangan landing page sebagai gambaran dari website yang akan dibuat . 3. Sebelum melanjutkan ketahap berikutknya sebaiknya mencari w3school bootstrap di google crome dan pilih Bootstrap 5 Tutorial , didalamnya terdapat berbagai kode untuk memudahkan dalam mengerjakannya 4. Mulai membuat rancangan syntak Navbar bootstrap dengan menggunakan editor Gamelab, tambahkan tag <img src=”assets/....” alt=”....” > untuk menambahkan gambar. 5. Berik ut hasil dari na vbar

6. 6. selanjutnya rancang syntax header menggunakan bootstrap. 7. Berikut adalah hasil dari header 8. tahap selanjutnya tambahkan konten Menu Terlaris menggunakan elemen card, tambahkan tag <div class=” row-cols-md”> untuk mengatur ukuran card, tag <img src=”assets/...” class=”card-img-top” alt=”...”> untuk menambahkan gambar, tambahkan tag <style=” height:..px; widht:...px;”> untuk mengatur ukuran card. 9. Berikut adalah hasil dari content card 10. tahap selanjutnya merancang syntax form pemesanan menggunakan bootstrap. tag <div class="col-sm-20"> untuk mengatur ukuran table, taambahkan tag < style=" margin-center:… px ;"> untuk merubah text atas table agar rata tengah

7. 11. Berikut hasil dari form pemesanan 12. Tahap selanjutnya merancang footer menggunakan bootstrap. tambahkan tag <div class="countainer-fluid”> untuk memblok semua elemen yang ada di dalamnya, tambahkan tag <style = Z ="background-color:…;"> untuk meambahkan warna 13. Berikut hasil dari footer

8. “TERIMAKASIH”