Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap
Webdesign

Pembuatan Portofolio Berbasis Instagram dengan Bootstrap

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Dalam tutorial ini saya akan menjalankan proses pembuatan portofolio berbasis Instagram sederhana seperti yang dirancang dalam tutorial sebelumnya oleh Tomas Laurinavicius.

Thomas telah melakukan pekerjaan yang hebat dengan tetap merancang desain yang sederhana, luas dan fungsional, jadi saya pikir wajar jika kita melakukan hal yang sama saat pembuatan.  Untuk membuat hidup kita lebih mudah kita akan bergantung pada beberapa alat dan libraries jadi mari kita mulai dengan melihatnya.

Tools of the Trade

Berikut beberapa hal yang kita butuhkan untuk dipersiapkan sebelum memulai pembuatan,  Mereka adalah:

Pertama-tama, Anda perlu membuat Sass dan dijalankan di komputer Anda.  Cara termudah untuk melakukannya adalah dengan menggunakan salah satu aplikasi unggulan yang tersedia untuk melakukan semua pengamatan dan kompilasi.  Saat ini saya menggunakan Koala yang merupakan cross platform dan gratis, jadi ini pilihan yang sangat bagus untuk memulai dan berlari dengan cepat.  Ada alternatif seperti Scout, aplikasi Prepros and Compass.  Mereka semua menyediakan fungsionalitas yang hampir sama sehingga pilihannya ada pada Anda!

Selanjutnya adalah Bootstrap.  Kita akan menggunakan Bootstrap pada tingkat yang sangat mendasar, untuk menangani beberapa elemen responsif dari halaman.  Kami secara khusus ingin mengunduh versi Sass sehingga kami dapat memasukkannya ke dalam stylesheet kami sendiri dan memanfaatkan variabel yang tersedia.  Silakan mengunduh versi terbaru.

Hampir sampai!  Kita sekarang perlu mengambil salinan Instafeed.js yang akan menangani semua pekerjaan yang mengambil foto-foto dari Instagram.  Perlu dicatat di sini bahwa untuk mendapatkan sesuatu dari Instagram Anda perlu menyediakan plugin dengan ID klien yang dapat dihasilkan dengan mendaftar ke Instagram dan mengisi formulir di bagian pengembang.

Terakhir, kita harus mendownload versi terbaru dari Modernizr jadi, jika perlu, kita bisa menargetkan fitur browser tertentu dan jadi kita juga memiliki shim HTML5 untuk browser lawas.  Ini tidak benar-benar diperlukan tapi saya ingin memasukkannya ke dalam proyek hanya untuk memastikannya.

Sekarang kita memiliki aset ini kita bisa mulai pembuatan!

Struktur File dan Folder

Kita perlu membuat beberapa file dan folder untuk proyek kita, jadi lanjutkan dan buat yang berikut di direktori root proyek.

  • css/
  • images/
  • js/
  • index.html

Ini adalah blok awal dasar kita.  Selanjutnya, temukan arsip Bootstrap yang Anda unduh sebelumnya dan ekstrak di tempat yang dapat Anda temukan dengan mudah.  Di dalam folder yang diekstrak seharusnya folder bernama asset.  Buka folder ini dan Anda akan melihat sesuatu yang mirip dengan berikut ini:

Salin direktori fonts ke dalam root proyek dengan folder lain yang baru saja kita buat.  Buka javascripts dan salin file bootstrap.js ke folder js proyek kita.  Terakhir, buka direktori stylesheet dan salin file bootstrap.scss dan folder bootstrap ke dalam folder css proyek kita.  File dan folder kita sekarang harus terlihat seperti ini ...

Kerja bagus!  Sekarang, cari file instafeed.min.js dan Modernizr yang telah Anda unduh sebelumnya dan salin ke folder js.  Kita hanya perlu menyiapkan beberapa hal lagi sebelum mulai membangun tata letak.

Pengaturan Sass

Sekarang adalah waktunya untuk mengatur proyek kita di app Sass yang telah Anda pilih untuk digunakan.  Di Koala ini adalah pertanyaan menyeret folder ke jendela app.  Saya percaya itu adalah proses yang sama untuk yang lain juga.  Hal berikutnya yang selalu saya lakukan saat mengatur semuanya adalah melihat pilihan kompilasi Sass dan, jika ada, pilih centang kotak untuk menggunakan Autoprefixer.  Tambahan berguna ini akan mengurai file Sass kita dan menambahkan awalan vendor yang kita butuhkan sehingga kita tidak perlu khawatir untuk menuliskannya sendiri.  Jangan ragu untuk bermain-main dengan pengaturan yang diberikan oleh app Sass Anda untuk menyiapkan yang terbaik untuk Anda.  Saya suka menjaga hal-hal sederhana dan biasanya akan memeriksa Autoprefix dan gaya output Expanded (Compressed in production).

Menambahkan Files

Bukalah proyek dengan editor apa pun yang Anda gunakan sehingga kita dapat menambahkan beberapa file.

Pertama-tama di bawah direktori css tambahkan sebuah file bernama style.scss.  Kemudian di dalam folder js tambahkan sebuah file bernama app.js.

Pastikan Anda me-refresh app Sass yang Anda gunakan sehingga mengambil file baru.  Beberapa melakukan ini secara otomatis tapi yang lebih baik adalah memeriksa dan me-refresh secara manual jika diperlukan.

Saya pikir itu semua file yang disiapkan untuk saat ini.  Kita bisa melanjutkan dengan membuat tata letak!

Mulai membuat

Buka index.html dan masukkan (atau copy / paste) HTML dasar berikut ini:

Kita memiliki kode pertama Kita!  Mari kita memisahkannya menjadi beberapa bagian.

Bagian <head>  berisi tag viewport yang diperlukan sehingga kueri media bekerja dengan benar.  Selanjutnya, kita memberikan judul pada halaman dan menyertakan tag <link> untuk berbagai font Google yang ingin kita gunakan.  Font di sini didasarkan pada yang digunakan dalam desain oleh Thomas.  Baris berikutnya mungkin terasa aneh karena kita belum membuat file style.css, namun menghasilkan file itu akan dilakukan oleh Sass compiler kami.  Terakhir, kita menyertakan Modernizr.

Elemen <body> berisi empat elemen lainnya untuk menampung masing-masing band yang tampil pada desain.  Saya telah menerapkan beberapa descriptive classes ke elemen <section> sehingga kita dapat dengan jelas melihat apa yang akan mereka gunakan.

Mereferensikan File JavaScript

Tambahkan cuplikan berikut di bawah bagian footer-bottom:

tag <script> ini menunjuk ke berbagai libraries JavaScript kita termasuk jQuery dari Google CDN yang dibutuhkan oleh Bootstrap.

Styles

Kita memiliki blok-blok bangunan dasar jadi mari kita lanjutkan dengan menyiapkan file style.scss kita sedikit.

Di sini kita menyiapkan beberapa variabel yang bisa kita gunakan di stylesheet kita nanti.  Pertama adalah beberapa variabel terkait font.  Di sinilah kita membawa Google fonts yang telah kita masukkan sebelumnya dan memberi masing-masing sebuah fallback jika karena beberapa alasan font tidak dimuat atau bekerja.

Kami kemudian memiliki beberapa variabel warna yang telah dipilih dari desain.  Inilah salah satu alasan mengapa saya sangat mencintai Sass sehingga kita dapat mengatur warna di sini dan melupakan hal-hal seperti mengingat atau menyalin hex values di semua tempat.

Akhirnya, untuk variabel khusus kita, kita memiliki beberapa margin dan padding sederhana.  Saya suka memasukkan ini bahkan saya tidak selalu menggunakannya.  Menyenangkan memiliki nilai dasar untuk bekerja dan memberi kita kemampuan untuk membuat perubahan seragam pada elemen yang menggunakan variable-variabel.

Bagian selanjutnya adalah di mana kita menyertakan Bootstrap, tapi sebelum kita melakukannya, kita harus mengatur variabel font Bootstrap utama $font-family-sans-serif agar sesuai dengan variabel $main-font yang sudah dibuat sebelumnya.  Ini berarti bahwa ketika Bootstrap dikompilasi, itu akan menggunakan font utama kita daripada miliknya sendiri.

Pernyataan @import disini tidak menyertakan .scss di akhir file karena ini tidak diperlukan saat menyertakan file Sass lainnya.  Sass cukup pintar untuk mencari dan menemukan file yang tepat.  Simpan file itu dan semoga app Sass Anda akan menyadari bahwa Anda telah menyimpan file Sass dan mengkompilasi style.css.

Lebih Banyak Styles

Mari meneruskannya dengan menambahkan beberapa styles:

Disini kita menggunakan universal selector * untuk mengatur segala sesuatunya sebagai position: relative sehingga tidak ada kejutan saat menggunakan elemen yang benar-benar diposisikan.  Ini juga berguna untuk secara universal mengatur box-sizing property ke border-box sehingga kita dapat menggunakan persentase lebar dan tidak khawatir dengan elemen padding yang mempengaruhi tata letak.

Kita kemudian menetapkan warna dan ukuran default font untuk body dan memberi tambahan ketinggian elemen <header>..

Itu untuk file Sass kita untuk saat ini.  Kembali ke file index.html sehingga kita bisa mulai mengerjakan header.

Memunculkan Header

Header untuk desain ini tidak rumit dalam desain, yang menjadikan pembuatannya lebih mudah.  Markup yang akan kita akan mempergunakan adalah sebagai berikut:

Ini harus masuk di antara tag <header> kita.  Anda akan melihat tag gambar pertama yang menggunakan referensi dari gambar yang tidak ada.  Kita perlu mengiris gambar ini dari PSD.  Saya tidak akan membahas detail tentang cara melakukannya di tutorial ini, tetapi jika Anda memerlukan bantuan untuk memeriksa tip cepat ini.

Sisa kode header terdiri dari tiga elemen div yang berisi nama, judul dan tautan sosial.  Saya telah menerapkan beberapa kelas pada elemen-elemen ini yang akan kita gunakan selanjutnya dalam file Sass kita.

Header Styles

Mari kita mulai dengan menambahkan beberapa baris kode di dalam header declaration kita.

Ini harus disimpan di bagian header file Sass kita tepat di bawah declarations untuk header itu sendiri.

Fixed Image

Anda akan melihat di sini bahwa kita telah menetapkan posisi tag img untuk diperbaiki.  Ini berarti gambar akan tetap berada pada posisi saat pengguna melakukan scrolls, sehingga menciptakan perasaan mendalam.  Idenya adalah konten scrolls up di atas gambar di header.  Karena kita mengadopsi mobile first methodology, gaya dasar memberi citra pada lebar dan posisi di tengah dengan menerapkan margin kiri negatif persis setengah lebar.  Ini bekerja karena titik transformasi gambar di CSS adalah pojok kiri atas, jadi saat kita memberi yang deklarsi left: 50% itu akan menempatkan tepi kiri elemen di tengah layar.  Trik margin negatif kecil membantu elemen terpusat yang benar dengan posisi absolut atau tetap.

Media Query

Kita kemudian telah menggunakan salah satu variabel ukuran layar pertama kita.  Kita katakan di sini: pada ukuran jendela besar membuat gambar memenuhi lebar browser dan memposisikannya kembali di pojok kiri atas.  Yang penting, kita harus me-reset margin sehingga gambar tidak lepas sedikit ke kiri.

Mari kita lihat dulu pekerjaan kita di browser!

Mari kita lanjutkan ...

Di sini kita membuat elemen name dan titles 'posisi dan gaya font.  Kita perlu menggunakan kueri media pada elemen titles untuk mendorongnya sedikit lebih banyak di layar besar.  Mari kita lakukan quick refresh di browser.

Itu sudah terlihat lebih baik!  Mari kita bersihkan headings tersebut sedikit lagi.

Hal utama yang perlu diperhatikan disini adalah style untuk elemen span.  Kita menggunakan tag span di kode kita untuk membungkus sebagian heading utama.  Ini memungkinkan kita untuk menargetkannya di CSS dan, seperti yang telah kita lakukan di sini, ubah tata letaknya.  Di mobile kita membutuhkannya menjadi elemen tingkat blok sehingga bertumpuk di bawahnya, namun pada layar yang lebih besar tidak apa-apa untuk dijalankan bersamaan seperti teks biasa.  Ini harus terlihat jauh lebih baik sekarang ...

Fancy Font

Quick style yang harus kita tambahkan adalah untuk nama di pojok kiri atas.  Tempatkan kode berikut di bagian akhir file Sass, di luar blok header.

Kita menerapkan fancy font kami untuk elemen apa pun dengan kelas ini.  Ini agar kita dapat menggunakan kembali ini kapanpun kita membutuhkannya dan itu tidak terbatas pada elemen tertentu.

Social Icons

Kita harus memperhatikan social icons yang, dalam hal ini, akan melibatkan pembuatan sprites untuk menampilkan resolution normal dan resolution tinggi (Retina).

Pergilah ke Iconfinder dan ambil masing-masing icons dalam desain.  Sebaiknya pilih ukuran yang lebih besar dari yang kita butuhkan sehingga tidak ada masalah yang menskalakannya.  Saya selalu memilih ukuran 256px.

Pada software editing grafis Anda (seperti Photoshop) buat file baru yaitu 152px x 52px.  Tarik di masing-masing icons dan skala masing-masing hingga 48px x 48px.  Icons itu menjadi hitam, tapi kita membutuhkannya untuk menjadi putih, jadi terapkan filter untuk masing-masing.

Sekarang kita perlu memposisikan mereka.  Kita akan memiliki dua ruang piksel di sekitar masing-masing, jadi gerakkan yang pertama ke tepi kiri dan mendorong jauh dengan dua piksel.  Begitu juga mendorongnya dari tepi atas dengan dua piksel.  Posisikan icons berikut dua piksel dari tepi atas dan dua piksel dari satu sama lain.  Anda harus berakhir seperti ini:

Ini akan menjadi Retina version kita.  Abaikan latar belakang hitam di sini, saya menambahkan ini hanya agar kita benar-benar bisa melihat icon gambarnya.

Menggunakan fungsi Photoshop Save for Web (atau yang setara dengan app Anda) simpan gambar ini dengan nama file social-sprite@2x.png.  Pastikan Anda menempatkannya di folder gambar proyek kita.  Sekarang kita perlu mengubah ukuran gambar sprite untuk membuat ukuran standard resolution.  Kita bisa melakukan ini di Photoshop secara langsung di Save for Web dialog box.  Yang penting gambar harus diubah ukurannya menjadi 76px x 52px.  Simpan ukuran ini sebagai social-sprite.png dan letakkan di folder gambar juga.

Dengan itu, kita memiliki sprite kita jadi mari kita tuliskan beberapa kode untuk menggunakannya!  Tempatkan kode berikut kembali ke bagian header tepat setelah styles untuk h1 dan h2.

Wow, itu terlihat rumit, meski tidak sepenuhnya benar, sejujurnya!  Untuk memulai, kita posisikan elemen pembungkus .sosial di pojok kanan atas.

Selanjutnya, kita menerapkan beberapa styles pada tag <a> untuk mengatur tinggi dan lebar masing-masing dan untuk menghapus teks dari tampilan dengan menggunakan text-indent yang besar.  Kita juga mengatur opacity dasar menjadi 0,8 yang kita ganti menjadi 1.0 pada hover.  Ini memberikan efek rollover sederhana.

Bagian selanjutnya adalah untuk sprite kita.  Kita perlu membiarkan perangkat dengan layar DPI tinggi tahu di mana menemukan aset resolution tinggi yang diminta oleh kueri media dengan baik.  Kita harus yakin untuk mengatur  property background-size sehingga skala gambar pada ukuran "benar".  Sekarang kita perlu mengatur background-position untuk setiap icon.  Simpan, simpan, simpan dan refresh!

Seperti yang Anda lihat, fancy-font style kita bekerja berdasarkan nama dan social icons kita terlihat indah.  Kerja bagus!

Bagian selanjutnya akan membahas konten utama dimana kita akan menggunakan Instafeed.js untuk terhubung ke API Instagram dan menarik beberapa gambar untuk halaman kami.

Instagram Feed

Kita akan mulai dengan menambahkan beberapa markup ke halaman index.html kita, jadi buka dan copy / paste yang berikut di dalam tag <section class = "instagram-wrap">:

Anda akan lihat di sini saya telah menandai setiap bagian yang akan kita perlukan untuk foto Instagram.  Kode untuk ini tidak akan benar-benar dimuat dari halaman HTML tapi dari JavaScript kita akan menulis untuk Instafeed.js.  Jangan khawatir tentang ini untuk saat ini, kita hanya mencoba untuk mendapatkan styling right pada tahap ini.

Bootstrap's Grid

Satu hal yang mungkin Anda perhatikan, jika Anda pernah menggunakan Bootstrap sebelumnya, adalah kami menggunakan beberapa kelas Bootstrap untuk pertama kalinya.  Kita menggunakan col-xs-xx, col-sm-xx, col-md-xx, col-lg-xx untuk menyesuaikan elemen pada ukuran layar yang berbeda.  Cara kerja grid Bootstrap, singkatnya, adalah melalui kontainer, baris dan kolom.  Setiap baris harus berada di dalam sebuah kontainer dan setiap kolom harus berada di dalam satu baris.  Juga harus ada dua belas kolom di setiap baris.  Di sinilah kelas seperti col-xs-12 masuk ke dalamnya.  Pada ukuran layar xs elemen ini harus menjangkau dua belas kolom yang, secara visual di layar, muncul sebagai satu kolom besar.

Demikian juga, jika kita meletakkan col-xs-12 col-sm-6 col-md-3 sebagai kelas pada elemen, ia akan menginstruksikan elemen tersebut untuk memiliki tata letak lebar penuh pada ukuran layar xs, dua kolom pada ukuran layar sm dan empat Kolom pada ukuran layar md.  Awalnya agak membingungkan, tapi jika Anda memahami bagaimana kelas diberi nama dan apa yang masing-masing mewakili di layar, akan menjadi sangat intuitif untuk digunakan pada akhirnya.

you can learn more about Bootstrap in the free Tuts course Bootstrap 3 for Web Design
Anda bisa belajar lebih banyak tentang Bootstrap di kursus Tuts gratis Bootstrap 3 for Web Design

Hal lain yang perlu disebutkan adalah penggunaan test_img.jpg yang belum ada.  Ini adalah gambar placeholder yang saya buat untuk digunakan dalam markup.  Jangan ragu untuk membuat sendiri atau menggunakan yang ada di source files yang disediakan, pastikan Anda memasukkannya ke dalam direktori images.

Instagram Styles

Sekarang, kita punya markup mari tambahkan beberapa styles:

Anda harus menempatkan kode ini tepat setelah seluruh header block dalam file Sass utama.  Ini menerapkan beberapa properties warna latar belakang dan font styles.  Simpan file Sass dan lihat di browser.

Sejumlah kecil kode itu telah membuat perbedaan besar.  Kita perlu membuatnya lebih baik lagi, jadi kembali ke file Sass tambahkan kode berikut:

Hal ini perlu dilakukan tepat setelah declaration h3 di dalam .instagram-content.  Mari cepat berjalan melalui sedikit demi sedikit ini.  Kita memberikan .photo-box kita  beberapa margin bawah sehingga masing-masing diberi jarak dengan baik.  Kita tidak perlu khawatir jarak kiri dan kanan seperti yang ditangani oleh Bootstrap.  Kita kemudian memastikan gambar apapun dalam .image-wrap kami  berukuran 100% sehingga mereka berskala dengan browser.  Elemen .likes harus diposisikan secara mutlak di pojok kiri bawah kotak gambar dan memiliki teks putih pada latar belakang hitam transparan.

Terakhir, styles untuk .description.  Empat properti terakhir memungkinkan kotak untuk menyembunyikan overflowing text dengan cara yang baik dengan memberikan ellipsis di bagian akhir.  Hal yang baik untuk melakukan hal ini di CSS adalah ketika kotak berubah ukuran konten sedikit banyak akan terungkap, namun ellipsis masih akan melakukan tugasnya jika diperlukan.  Dukungan browser juga sangat lengkap.

Sisa lagi untuk menyimpan file dan refresh browser:

Ini terlihat cantik sekarang!  Saya pikir langkah selanjutnya harus mengganti HTML kita dengan gambar Instagram feed yang sebenarnya dengan bantuan Instafeed.js.

Menggunakan Instafeed.js

Cara kerja plugin ini membuatnya mudah bagi siapa saja untuk menambahkan Instagram feed ke situs web mereka.  Namun, Anda memerlukan ID Klien dari Instagram untuk menggunakannya.  Anda bisa mendapatkannya dengan mendaftar ke akun Instagram dan menuju ke bagian pengembang untuk menyiapkan ID Klien Anda.

Setelah Anda menyiapkan semua itu, kita perlu menambahkan kode berikut ke file app.js:

Biarkan saya menjelaskan apa yang dituliskan di sini:

Pertama, beberapa jQuery.  Mulailah dengan dokumen ready function (disingkat version) jadi tidak ada yang berjalan sampai kita siap.

Kedua, nyatakan variabel feed dan tetapkan nilainya ke instance baru Instafeed.

Pasokan Instafeed berikutnya dengan beberapa pilihan untuk mengendalikan pengembaliannya:

  • clientId - ID Klien yang Anda dapatkan dari Instagram.
  • target - ID elemen pada halaman yang ingin Anda isi dengan gambar.
  • get - Mode Instafeed sedang berjalan.  Menggunakan 'tagged' disini jadi Instafeed tahu kita mencari dengan tagname.
  • tagName - Nama tag untuk ditelusuri.
  • links - Apakah untuk membungkus gambar dengan tautan kembali ke Instagram
  • limit - Batasi jumlah gambar yang dikembalikan.  Berguna untuk paging.
  • sortBy - Cara mengurutkan returned images.  Ditetapkan most-recent untuk proyek kita.
  • resolution - Ukuran images returned.
  • template - HTML yang akan digunakan saat rendering gambar pada halaman.  Kita akan menggunakan markup yang kita buat tadi.  Instafeed menggunakan kurung kurawal untuk menunjukkan di mana berbagai properties gambar akan dimasukkan.

Terakhir, jalankan feednya!

Jika Anda menyimpan file dan refresh browser Anda akan melihat sesuatu yang mirip dengan ini:

Jika Anda memiliki masalah pastikan ID Klien Anda benar dan kodenya baik-baik saja.  Jika Anda menggunakan apa yang disediakan di source files semuanya seharusnya baik-baik saja.  Anda harus melihat delapan gambar kembali dari Instagram dengan Likes dan deskripsi yang ditampilkan.

Pengaturan

Kita sekarang perlu membereskan HTML kita karena kita masih memiliki template awal yang kita buat menggunakan kode tadi.  Beralih kembali ke index.html dan temukan kode berikut ...

Entah menghapus atau mengomentari ini.  Saya telah memutuskan untuk berkomentar sehingga saya bisa merujuknya nanti jika diperlukan.

The Footer

Kembali di index.html tambahkan kode berikut di dalam elemen <footer>..

Seperti yang Anda lihat, kita menggunakan lebih banyak kelas Bootstrap di sini.  Kali ini memerintahkan elemen ini untuk menjangkau dua belas kolom penuh setiap saat.

Footer Styles

Mari tambahkan juga styles untuk bagian ini.

Block of code lain yang rumit!  Sekali lagi, itu tidak terlalu menakutkan.  Itu hanya mengatur beberapa warna, ukuran font dan jarak.  Kita menggunakan beberapa kueri media untuk menarik elemen ke posisi yang berbeda untuk ukuran layar yang berbeda.  Khususnya, .contact-now-btn .. yang membutuhkan dua tingkat query media untuk menyesuaikan ukurannya, berakhir pada layar terkecil di layar besar.  Jika Anda menyimpan file dan refresh browser Anda akan melihat sesuatu seperti ini .

Mari selesaikan ini dengan bagian terakhir yang ingin saya berikan perintah .footer-bottom.

Footer Bottom

Tambahkan beberapa teks ke bagian itu di HTML.  Kemudian buka file Sass dan tambahkan styles berikut:

Ini bisa diletakkan di bawah footer styles.  Kita menggunakan letter-spacing untuk memberikan sedikit jarak untuk setiap huruf.  Bagian ini memiliki jarak yang cukup sedikit ke kiri dan kanan yang beralih ke atas dan bawah pada layar yang lebih besar.  Simpan file dan refresh browser.

Kita sudah selesai!  Tata letaknya terlihat mengagumkan di mobile dan desktop dan kita berhasil mendapatkan foto langsung dari Instagram menggunakan Instafeed.  Sudah selesai dilakukan dengan baik!

Kesimpulan

Yang saya sukai dari tata letak ini adalah Anda dapat menyesuaikannya dengan konten portofolio apa pun.  Kita bisa saja lebih berjiwa petualang dengan Bootstrap dan Sass tapi juga Anda tidak perlu jika dasar-dasar bekerja dengan sempurna.  Apa yang kita miliki di sini adalah fondasi yang brilian untuk memperluas dan menyesuaikan diri.

Saya harap Anda mengikuti langkah-langkah tanpa masalah dan telah belajar sesuatu yang baru sejauh ini.  Jangan ragu untuk meninggalkan pemikiran, saran atau perbaikan dalam komentar.  Misalnya, ada masalah aneh dengan cara Safari membuat laman jika Anda menggulir terlalu cepat - saran mengapa hal itu terjadi sangat disambut!  Terima kasih sudah membaca.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.