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:

Malay (Melayu) translation by Urwah bin Azzubair (you can also view the original English article)

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

Thomas telah melakukan pekerjaan yang hebat dengan tetap merancang rancangan 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 kepada beberapa alat dan perpustakaan jadi mari kita mulailah dengan melihatnya.

Alat Perdagangan

Berikut beberapa perkara yang kita perlu untuk dipersiapkan sebelum memulakan pembuatan, Mereka adalah:

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

Selanjutnya ialah Bootstrap. Kita akan menggunakan Bootstrap pada tingkat yang sangat asas, 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 terkini.

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

Terakhir, kita harus mendownload versi terkini dari Modernizr jadi, jika perlu, kita dapat menargetkan ciri peramban tertentu dan jadi kita juga memiliki HTML5 shim untuk lega browser. Ini tidak benar-benar diperlukan tetapi saya ingin memasukkannya ke dalam projek hanya untuk memastikannya.

Sekarang kita mempunyai aset ini kita boleh mula membuat!

Fail dan Folder Struktur

Kita perlu membuat beberapa fail dan folder untuk projek kami, jadi lanjutkan dan buat yang berikut di projek root direktori.

  • css /
  • imej /
  • 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 patut folder bernama asset . Buka folder ini dan anda akan melihat sesuatu yang serupa dengan yang berikut:

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

Kerja bagus! Sekarang, cari file instafeed.min.js dan Modernizr yang telah anda unduh dahulu dan salin ke folder js . Kita hanya perlu menyiapkan beberapa perkara lagi sebelum mula membuat tata letak.

Pengaturan Sass

Kini adalah masa untuk mengaturkan projek kami di app Sass yang telah anda pilih untuk digunakan. Di Koala ini adalah pertanyaan menyeret folder ke aplikasi windows. Saya percaya ia adalah proses yang sama untuk yang lain juga. Hal berikutnya yang selalu saya lakukan ketika mengatur semuanya ialah melihat pilihan Sassia kompilasi dan, jika ada, pilih kotak pilihan untuk menggunakan Autoprefixer . Tambahan berguna ini akan mengurai file Sass kita dan menambah vendor awalan yang kita butuhkan sehingga kita tidak perlu khawatir untuk menuliskannya sendiri. Jangan teragak-agak untuk bermain-main dengan tetapan yang diberikan oleh app Sass anda untuk menyediakan yang terbaik untuk anda. Saya suka menjaga hal-hal sederhana dan biasanya akan memeriksa Autoprefix dan output gaya Memperluas ( Mampat dalam pengeluaran).

Menambah Fail

Buka projek dengan editor apa pun yang Anda gunakan sehingga kami dapat menambahkan beberapa file.

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

Pastikan anda menyegarkan aplikasi Sass yang anda gunakan sehingga mengambil fail baru. Beberapa melakukan ini secara automatik tetapi yang lebih baik adalah memeriksa dan menyegarkan secara manual jika diperlukan.

Saya fikir itu semua fail yang disediakan untuk masa ini. Kita boleh meneruskan dengan membuat tata letak!

Mula buat

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

Kita mempunyai kod pertama Kita! Mari kita memisahkannya menjadi beberapa bahagian.

Bahagian <head> mengandungi tag viewport yang diperlukan sehingga media kueri berfungsi dengan betul. Selanjutnya, kami memberikan tajuk di halaman dan menyertakan tag <link>  untuk berbagai font Google yang ingin kami gunakan. Fon di sini didasarkan pada yang digunakan dalam reka bentuk oleh Thomas. Baris seterusnya mungkin terasa aneh kerana kita belum membuat file style.css , namun menghasilkan file itu akan dilakukan oleh compiler kita Sass. Terakhir, kita menyertakan Modernizr.

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

Mereferensikan JavaScript Fail

Tambahkan bahagian cuplikan di bawah bahagian footer-bottom :

tag <script> ini menunjuk ke berbagai perpustakaan JavaScript kami termasuk jQuery dari Google CDN yang diperlukan oleh Bootstrap.

Gaya

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

Di sini kita menyediakan beberapa variasi yang boleh kita gunakan di stylesheet kita nanti. Pertama adalah beberapa font berkaitan font. Di sinilah kami membawa fon Google yang telah kami masukkan dahulu dan memberikan satu lagi sandaran jika kerana beberapa alasan fon tidak dimuat atau berfungsi.

Kami kemudian mempunyai beberapa warna variasi yang telah dipilih dari reka bentuk. Inilah salah satu sebab mengapa saya sangat menyukai Sass sehingga kita dapat mengatur warna di sini dan melupakan hal-hal seperti mengingat atau menyalin nilai hex di semua tempat.

Akhirnya, untuk kami khusus variasi, kami mempunyai beberapa margin dan padding sederhana. Saya suka memasukkan ini walaupun saya tidak selalu menggunakannya. Menyenangkan mempunyai asas nilai untuk bekerja dan memberikan kita kemampuan untuk membuat perubahan secara seragam pada elemen yang menggunakan variable-variable.

Bahagian seterusnya adalah di mana kita menyertakan Bootstrap, tetapi sebelum kita melakukannya, kita harus mengatur font Bootstrap utama $font-family-sans-serif agar sesuai dengan $main-font yang sudah dibuat sebelumnya. Ini bermakna bahawa ketika Bootstrap dikompilasi, itu akan menggunakan font utama kita dari miliknya sendiri.

Pernyataan @import disini tidak menyertakan .scss di akhir fail kerana ini tidak diperlukan ketika menyertakan file lain Sass. Sass cukup pintar untuk mencari dan mencari fail yang tepat. Simpan fail itu dan semoga app Sass anda akan menyadari bahawa anda telah menyimpan fail Sass dan mengkompilasi style.css .

Lebih Banyak Gaya

Mari meneruskannya dengan menambah beberapa gaya:

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

Kita kemudian menetapkan warna dan saiz font default untuk badan dan memberi tambahan ketinggian elemen <element> ..

Itu untuk fail 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 gunakan adalah sebagai berikut:

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

Tandukan kod Sisa terdiri daripada tiga elemen div yang mengandungi nama, tajuk dan pautan sosial. Saya telah menerapkan beberapa kelas pada elemen-elemen ini yang akan kita gunakan selanjutnya dalam file Sass kita.

Gaya Header

Mari kita mulakan dengan menambah beberapa baris kod di dalam pernyataan header kami.

Ini harus disimpan di bahagian header file Sass kita tepat di bawah deklarasi untuk header itu sendiri.

Imej Tetap

Anda akan melihat di sini bahawa kami telah menetapkan img tag kedudukan untuk fixed. Ini bermakna gambar akan tetap berada di posisi ketika pengguna melakukan skrol, sehingga menghasilkan perasaan yang mendalam. Idenya adalah kandungan skrol atas atas gambar di header. Karena kami mengadopsi metodologi pertama seluler, gaya dasar memberikan citra pada lebar dan posisi di tengah dengan menerapkan margin kiri negatif persis setengah lebar. Ini berfungsi karena titik transformasi gambar di CSS adalah pojok kiri atas, jadi saat kami memberikan yang deklarsi left: 50% itu akan menempatkan sisi kiri elemen di tengah layar. Trik margin negatif kecil membantu elemen terpusat yang benar dengan posisi absolut atau tetap.

Permintaan Media

Kami kemudian menggunakan salah satu saiz saiz skrin pertama kami. Kami katakan di sini: pada saiz besar jendela membuat gambar memenuhi pelayar lebar dan memposisikannya kembali di atas kiri atas. Yang penting, kita harus menetapkan semula margin supaya gambar tidak lepas sedikit ke kiri.

Mari kita lihat dulu pekerjaan kita di browser!

Mari kita lanjutkan ...

Di sini kita buat fon kedudukan dan gaya unsur name dan titles . Kita perlu menggunakan media kueri pada titles elemen untuk mendorongnya sedikit lebih banyak di layar besar. Mari kita lakukan penyegaran cepat di penyemak imbas.

Itu sudah kelihatan lebih baik! Mari kita bersihkan tajuk itu lagi.

Hal utama yang perlu diperhatikan di sini ialah gaya untuk span unsur. Kami menggunakan tag span di kod kami untuk membungkus sebagian utama tajuk. Ini membolehkan kita untuk menargetkannya di CSS dan, seperti yang telah kita lakukan di sini, mengubah tata letaknya. Di mobile kita memerlukannya menjadi elemen tingkat blok sehingga bertumpuk di bawahnya, namun pada layar yang lebih besar tidak apa-apa untuk dijalankan sama seperti biasa teks. Ini harus kelihatan jauh lebih baik sekarang ...

Fancy Font

Gaya pantas yang harus kita tambahkan adalah untuk nama di atas kiri atas. Letakkan kod berikut di bahagian akhir fail Sass, di luar blok header .

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

Ikon Sosial

Kita harus memperhatikan ikon sosial yang, dalam hal ini, akan melibatkan pembuatan sprite untuk menampilkan resolusi normal dan resolusi tinggi (Retina).

Pergilah ke Iconfinder dan ambil ikon masing-masing dalam reka bentuk. Sebaiknya pilih saiz yang lebih besar dari yang kita butuhkan sehingga tidak ada masalah yang menscalakannya. Saya sentiasa memilih saiz 256px.

Pada grafik editing perisian anda (seperti Photoshop) buat file baru yaitu 152px x 52px. Tarik di masing-masing ikon dan skala masing-masing hingga 48px x 48px. Ikon itu menjadi hitam, tetapi kita memerlukannya untuk menjadi putih, jadi terapkan penapis untuk masing-masing.

Sekarang kita perlu memposisikan mereka. Kita akan mempunyai dua piksel ruang 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. Ikon posisikan berikut dua piksel dari tepi atas dan dua piksel dari satu sama lain. Anda harus berakhir seperti ini:

Anda harus berakhir seperti ini: Ini akan menjadi versi Retina kita. Abaikan latar belakang hitam di sini, saya tambah ini hanya agar kita benar-benar dapat melihat ikon gambarnya.

Menggunakan fungsi Photoshop Simpan untuk Web (atau yang setara dengan aplikasi anda) simpan gambar ini dengan nama file social-sprite@2x.png . Pastikan anda menempatkannya di folder kami. Sekarang kita perlu mengubah saiz sprite gambar untuk membuat resolusi standard ukuran. Kita boleh melakukan ini di Photoshop secara langsung di kotak dialog Simpan untuk Web . Yang penting gambar harus diubah ukurannya menjadi 76px x 52px. Simpan saiz ini sebagai social-sprite.png dan letakkan di folder gambar juga.

Dengan itu, kita mempunyai sprite kita jadi mari kita tuliskan beberapa kod untuk menggunakannya! Letakkan kod berikut kembali ke bahagian header tepat selepas gaya untuk h1 dan h2 .

Wow, itu kelihatan rumit, meski tidak sepenuhnya benar, sejujurnya! Untuk memulakan, kami posisikan pembungkus elemen .sosial di bahagian atas kanan.

Selanjutnya, kami mengaplikasikan beberapa gaya pada tag <a> untuk mengatur tinggi dan lebar masing-masing dan untuk menghapus teks dari paparan dengan menggunakan besar text-indent . Kita juga mengatur dasar opacity menjadi 0,8 yang kita ganti menjadi 1.0 pada hover. Ini memberikan kesan peralihan yang sederhana.

Bahagian selanjutnya adalah untuk sprite kita. Kita perlu membiarkan peranti dengan DPI tinggi skrin tahu di mana mendapati tinggi resolusi aset yang diminta oleh media kueri dengan baik. Kita harus yakin untuk mengatur background-size harta sehingga skala gambar pada ukuran "benar". Kini kita perlu mengatur background-position untuk setiap ikon. Simpan, simpan, simpan dan muat semula!

Seperti yang anda lihat, gaya fancy-font kami bekerja berdasarkan nama dan ikon sosial kita kelihatan indah. Kerja bagus!

Bagian lanjut akan membahas kandungan utama yang akan kami gunakan Instafeed.js untuk dihubungkan ke API Instagram dan menarik beberapa gambar untuk halaman kami.

Feed Instagram

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

Anda akan melihat di sini saya telah menandakan setiap bahagian yang akan kita perlukan untuk foto Instagram. Kod untuk ini tidak akan benar-benar dimuat dari halaman HTML tetapi dari JavaScript kita akan menulis untuk Instafeed.js. Jangan khawatir tentang ini buat masa ini, kita hanya cuba untuk mendapatkan gaya yang tepat pada tahap ini.

Grid Bootstrap

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

Begitu juga, jika kita meletakkan col-xs-12 col-sm-6 col-md-3 sebagai kelas pada elemen, ia akan mengarahkan elemen tersebut untuk mempunyai penuh lebar layout pada xs skrin ukuran, dua kolom pada layar ukuran sm dan empat Kolom pada saiz skrin md . Awalnya agak membingungkan, tetapi 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 boleh belajar lebih banyak mengenai Bootstrap di kursus Tuts percuma Bootstrap 3 untuk Reka Bentuk Web

Hal lain yang perlu disebutkan adalah penggunaan test_img.jpg yang belum ada. Ini adalah pemegang tempat gambar yang saya buat untuk digunakan dalam markup. Jangan teragak-agak untuk membuat sendiri atau menggunakan yang ada di sumber-sumber yang disediakan, pastikan anda memasukkannya ke dalam images direktori.

Gaya Instagram

Sekarang, kita punya markup mari tambah beberapa gaya:

Anda harus meletakkan kod ini tepat setelah seluruh blok header dalam file Sass utama. Ini menerapkan beberapa sifat warna latar belakang dan gaya fon. Simpan fail Sass dan lihat di pelayar.

Sejumlah kecil kod itu telah membuat perbezaan besar. Kita perlu membuatnya lebih baik lagi, jadi kembali ke file Sass menambah kod berikut:

Hal ini perlu dilakukan tepat selepas pernyataan 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. Kami kemudian memastikan gambar apa saja dalam .image-wrap kami berukuran 100% sehingga mereka berskala dengan browser. Elemen .likes harus diposisikan secara mutlak di sebelah kiri bawah kotak gambar dan memiliki teks putih pada latar belakang hitam transparan.

Terakhir, gaya untuk .description . Empat harta terakhir membolehkan kotak untuk menyembunyikan teks melimpah dengan cara yang baik dengan memberikan ellipsis di bahagian akhir. Hal yang baik untuk melakukan hal ini di CSS adalah apabila kotak berubah ukuran sedikit lebih banyak kandungan akan terungkap, tetapi ellipsis masih akan melakukan tugasnya jika diperlukan. Pelayar sokongan juga sangat lengkap .

Sisa lagi untuk menyimpan fail dan penyemak imbas semula:

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

Menggunakan Instafeed.js

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

Setelah anda menyiapkan semua itu, kami perlu menambahkan kode berikut ke app.js file:

Biarkan saya menjelaskan apa yang ditulis di sini:

Pertama, beberapa jQuery. Mulailah dengan fungsi siap dokumen (versi disingkat) jadi tidak ada yang berjalan sampai kami siap.

Kedua, nyatakan feed varians dan tetapkan nilainya kepada instafeed baru.

Pasokan Instafeed seterusnya dengan beberapa pilihan untuk mengendalikan pengembaliannya:

  • clientId - Klien ID yang anda dapat dari Instagram.
  • target - elemen ID di halaman yang ingin anda isi dengan gambar.
  • get - Mod Instafeed sedang berjalan. Menggunakan 'tagged' disini jadi Instafeed tahu kita cari dengan tagname. get - Mod Instafeed sedang berjalan. Menggunakan 'tagged' disini jadi Instafeed tahu kita cari dengan tagname.
  • tagName - Tag nama untuk ditelusuri.
  • links - Adakah untuk membungkus gambar dengan links kembali ke Instagram
  • limit - Batasi jumlah gambar yang dikembalikan. Berguna untuk paging.
  • sortBy - Cara mengurutkan kembali gambar. Ditetapkan most-recent untuk projek kami.
  • resolution - Imej saiz dikembalikan.
  • template - HTML yang akan digunakan semasa membuat gambar pada halaman. Kita akan menggunakan markup yang kita buat tadi. Instafeed menggunakan kurung kurawal untuk menunjukkan di mana pelbagai sifat gambar akan dimasukkan.

Terakhir, jalankan feednya!

Jika anda menyimpan fail dan menyemak penyemak imbas anda akan melihat sesuatu yang mirip dengan ini:

Sekiranya anda mempunyai masalah pastikan your Client ID adalah benar dan kodenya baik saja. Jika anda menggunakan apa yang disediakan di dalam fail sumber semuanya harus baik-baik saja. Anda harus melihat 8 gambar kembali dari Instagram dengan Suka dan deskripsi yang dipaparkan.

Pengaturan

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

Entah menghapus atau mengomentari ini. Saya telah memutuskan untuk memberi komen supaya saya boleh memujuknya jika perlu.

The Footer

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

Seperti yang anda lihat, kami menggunakan lebih banyak Bootstrap kelas di sini. Kali ini memerintahkan elemen ini untuk mencapai dua belas kolom penuh setiap saat.

Gaya Footer

Mari tambahkan juga gaya untuk bahagian ini.

Blok kod lain yang rumit! Sekali lagi, itu tidak terlalu menakutkan. Itu hanya mengatur beberapa warna, saiz font dan jarak. Kita menggunakan beberapa media kueri untuk menarik elemen ke tempat yang berbeza untuk ukuran skrin yang berbeza. Khususnya,  .contact-now-btn .. yang memerlukan dua peringkat media pertanyaan untuk menyesuaikan ukurannya, berakhir pada paling kecil layar di layar besar. Jika anda menyimpan fail dan menyemak penyemak imbas anda akan melihat sesuatu seperti ini.

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

Bahagian bawah kaki

Tambah beberapa teks ke bahagian itu di HTML. Kemudian buka fail Sass dan tambahkan gaya berikut:

Ini boleh diletakkan di bawah gaya footer . Kami menggunakan letter-spacing untuk memberikan sedikit jarak untuk setiap huruf. Bahagian ini mempunyai jarak cukup sedikit ke kiri dan kanan yang beralih ke atas dan bawah pada layar yang lebih besar. Simpan fail dan semak penyemak imbas.

Kita sudah selesai! Tata letaknya kelihatan mengagumkan di telefon bimbit dan desktop dan kami berjaya 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 apa saja portofolio konten. Kita bisa lebih berjiwa petualang dengan Bootstrap dan Sass tapi juga kamu tidak perlu jika dasar-dasar berfungsi dengan sempurna. Apa yang kita miliki di sini adalah fondasi yang brilian untuk memperluaskan dan menyesuaikan diri.

Saya harap anda mengikuti langkah tanpa masalah dan telah mempelajari 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 telah membaca.

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.