Video Screencast 2025, Februari
Desain komentar mungkin terlihat sangat sederhana. Dan itu benar! Tapi menurut saya sederhana efektif dalam kasus ini. Komentar adalah bagian penting dari CSS-Tricks "
Kami mulai menggali Photoshop di sini dan mendesain area komentar. Kami mulai dari atas, yang berarti setiap komentar itu sendiri (sebagai lawan dari "
Kami mulai dengan melihat beberapa pekerjaan kasar yang saya lakukan di belakang layar menyempurnakan beberapa hal yang perlu dilakukan. Seperti menambahkan sisa "
Kami hampir selesai membangun beranda dari area Snippets situs. Segera, kami mulai mengubah berbagai hal dan memasukkan lebih banyak hal ke "
Dengan desain untuk area cuplikan "selesai" - sekarang kita dapat beralih ke beberapa interaktivitas (baca: JavaScript). Kami menambahkan rollover yang sangat lemah untuk tautan di "
Kami sekarang memiliki desain Photoshop untuk bekerja dari beranda area Snippets. Jauh lebih bisa dijelajahi daripada sebelumnya, tetapi tetap mempertahankan pelangi "
Saatnya menyelami area Snippets! Artinya, area konten yang sebenarnya. Kami sudah memiliki tajuk di tempatnya. Area potongan cukup populer. "
Dalam screencast ini kami membungkus bagian Almanak. Ada hierarki yang cukup jelas di Almanak. Bunyinya: Home> Almanac Home> Property atau Selector> "
Kami melompat ke depan sedikit di sini. Ini adalah seri screencast yang cukup komprehensif, tetapi hanya sekitar 40 jam dan tentu saja proyek yang sebenarnya "
Kami telah bekerja secara lokal di domain lokal (v10.whatup). Sekarang saatnya mulai beralih ke WordPress. Kami akan terus bekerja secara lokal "
Kami memiliki semua konten yang kami butuhkan pada output halaman ini dan kami memiliki header di tempatnya. Sekarang kita bisa mulai CSSin 'konten ke dalam desain yang kita masuki "
Saat kita mulai bekerja di WordPress, akan lebih baik jika kita mendapatkan salinan persis dari database langsung untuk digunakan secara lokal. Beberapa situs web memiliki hal-hal seperti "
Sekarang setelah kita berjuang untuk mendapatkan konten yang tepat di beranda Almanac, kita dapat menggali beberapa gaya sebenarnya dengan CSS. Kami memutuskan untuk pergi "
Dalam screencast ini sebagian besar kita berurusan dengan "Photostar" oranye yang mendominasi footer. Kami membuat bintang di file terpisah di Photoshop, jadi kami dapat membuat "
Sundulan untuk Alamanc telah masuk, kali ini dari Giovanni Difeterici. Kami menggunakan banyak teknik yang telah kami buat untuk memulai "
Ilustrasi tajuk khusus untuk bagian video telah masuk, kali ini dari Alyssa Nassner. Kami menghabiskan sedikit waktu untuk mengatur file Photoshop dan "
Dalam screencast terakhir untuk membuat footer, kita mengerjakan footer bawah di mana area CodePen dan ShopTalk berada. Kami harus mengubah HTML menjadi "
Dalam screencast ini kami fokus pada garis di bawah tautan di bagian atas footer. Kami agak tersandung mencari tahu hal mana yang harus "
Kepala potongan telah masuk, kali ini oleh Reagan Ray. Kami menghabiskan sedikit waktu di Photoshop kali ini mengacak-acak sedikit untuk memastikan kami "
Dengan struktur HTML untuk footer di tempat, kami memiliki apa yang kami butuhkan untuk mulai menata gaya dan membuat footer ini terlihat seperti yang kami rancang di Photoshop. "
Ini adalah pekerjaan Photoshop terakhir yang akan kami lakukan secara khusus tentang footer sebelum kami melompat ke dalam benar-benar membangunnya. Dalam screencast ini kami "
Kami sedang mengerjakan desain untuk footer di Photoshop. Pengingat cepat: Saya bekerja di Photoshop karena saya merasa lebih kreatif di sana sebelum saya melompati "
Kami membahas lebih banyak lagi bisnis Photoshoppin dalam screencast ini, meletakkan footer paling bawah dengan tautan ke dua proyek terbesar saya lainnya, CodePen "
Kami memulai perjalanan besar yang merupakan footer! CSS-Tricks selalu memiliki footer mewah yang besar dan desain ini tidak terkecuali. Ini tidak murni "
Dengan desain footer kami yang sudah siap untuk digunakan di Photoshop, kami dapat mulai membuatnya menjadi mockup HTML dan CSS statis kami. Langkah pertama adalah memberi "
Kami memiliki zona BSA lain untuk diintegrasikan ke dalam situs. Yang ini seharusnya lebih mudah karena kita sudah memiliki JavaScript dan hanya "
Kami memiliki mockup tentang bagaimana kami ingin zona BuySellAds kami terlihat, jadi mari kita mulai membangunnya secara nyata. Situs web BuySellAds memberikan kode yang kami butuhkan "
Satu-satunya hal yang hilang sekarang dari tajuk Forum adat kami adalah bagian yang sebenarnya bertuliskan "Forum"! Nick mengilustrasikan tangan yang memegang tanda yang dimaksudkan "
Sekarang kita tahu persis zona apa yang sedang kita kerjakan, kita kembali ke Photoshop dan meniru tampilan zona iklan yang kita inginkan. Kami memiliki preseden untuk "
Seperti yang Anda ketahui, beberapa iklan di CSS-Tricks bersifat "swakelola", seperti sponsor utama Treehouse. Saya mengambilnya karena itu hanya satu "