Ingin menjadi lebih baik di kod? Ajar seseorang CSS.

Baru -baru ini, seorang kawan bertanya kepada saya untuk bimbingan pengaturcaraan. Dia adalah pemula mutlak yang tidak tahu apa -apa tentang pengaturcaraan. Saya memutuskan untuk memulakan dengan titik permulaan saya sendiri: HTML dan CSS. Kami menggunakan CodePen dan mula menyalin dan mengubah suai coretan kod sedia ada. Tidak lama kemudian, jalan pembelajaran jelas dibentangkan kepada kami.

Tujuan artikel ini bukan untuk mengajar asas -asas CSS kepada pembaca yang telah menguasai asas -asas CSS, tetapi untuk memberi tumpuan kepada kandungan yang memberi inspirasi kepada pemula untuk belajar dan diharapkan memberi inspirasi kepada anda untuk menyampaikan pengetahuan kepada orang lain apabila anda mempunyai peluang. Ia sangat menggembirakan untuk membantu orang lain, dan pada gilirannya, saya telah mempelajari beberapa pengalaman berharga yang telah mengubah cara saya berfikir tentang kod. Win-win!

Berikut adalah lima pelajaran yang saya pelajari selepas mengajar orang lain CSS:

Pelajaran 1: Jangan bermula dari awal

Apabila saya mula belajar pengaturcaraan web 12 tahun yang lalu, saya bermula dengan susun atur - menggunakan terapung, margin, mengisi, dan pengisytiharan kedudukan untuk kedudukan. Ini mungkin kelihatan sedikit bertarikh hari ini, tetapi di situlah saya bermula dengan rakan pengaturcaraan baru saya pada masa itu.

Hasilnya tidak sesuai.

Seperti yang anda fikirkan, bermula dengan "Ini adalah cara mencari kotak kosong di tengah skrin" adalah kesilapan. Betapa membosankan! Walaupun saya kagum dengan keupayaan saya untuk menunjukkan bagaimana unsur -unsur kedudukan Flexbox di tengah -tengah skrin (lebih banyak lagi), saya segera menghadapi banyak masalah lain yang tidak berkaitan dengan lokasi.

"Jadi bagaimana menukar warna?"

"Bolehkah ia berubah bentuk ketika melayang?"

"Apa fon yang boleh digunakan di laman web?"

Saya fikir ia akan membawa kita beberapa minggu lagi untuk belajar ini.

Oleh itu, rancangan saya untuk mengajar 12 lajur grid telah ditunda, kami membesarkan meja warna bernama Chris bersama -sama dengan beberapa coretan kod yang disalin dan mula mencuba. Pertama, kami menukar warna logo Cassidy Williams Netflix/Netlify. Wow! Ia dengan serta -merta menarik perhatiannya.

<code><a href="https://www.php.cn/link/2080dd731c0a27c6944f58acae270b81" target="_blank"> 
</a></code>
<div></div>
<div></div>
<div></div>

<div>Lebih cantik</div>

Kemudian beberapa tweak mudah ke CSS:

 <code>body { background: #F9F2DB; color: #092935; font-size: 50px; } a { color: #092935; } .logo .uno, .dos, .tres { background: #C61561; } .logo .dos { box-shadow: 0 0 20px #F9F2DB; } .logo::before { background: #F9F2DB; } .name { letter-spacing: 8px; }</code>

Dalam beberapa minit, kawan saya terpesona! Tidak ada kedudukan yang membosankan untuk dibimbangkan, hanya beberapa baris mudah kod yang dapat mengubah sesuatu yang biasa menjadi sesuatu yang sama sekali berbeza.

Kemudian dia menyedari bahawa dia boleh mengubah warna apa -apa! Kami memuat beberapa laman web yang terkenal di penyemak imbas kami dan menukar beberapa teks dan warna latar menggunakan devtools, yang semuanya dilakukan dalam beberapa minit. Misi selesai! Rakan saya terpesona.

Pelajaran yang dipelajari: Jangan bimbang untuk cuba membina dari awal. Cuba gunakan sumber sedia ada!

Pelajaran 2: Komen

Ini bukan sebahagian daripada rancangan saya untuk kursus ini, tetapi persoalannya timbul tentang mengapa beberapa bahagian CSS bermula dengan / dan berakhir dengan / jadi kita membincangkannya.

Ini membuatkan saya mula memikirkan kerja saya. Saya benar -benar tidak menulis komen kod yang mencukupi. Mengamati pengaturcara baru yang memberi penjelasan segala -galanya (maksud saya segala -galanya ) membuat saya menyedari betapa bergunanya komen itu, bukan hanya untuk diri sendiri, tetapi untuk pasukan yang lebih luas, dan bahkan untuk anda pada masa akan datang . (Sarah Drasner mempunyai ucapan hebat mengenai topik ini).

Inilah perkara itu: Sebelum itu, saya fikir saya agak rajin dalam menulis komen. Walau bagaimanapun, memerhatikan orang lain melakukan ini membuatkan saya menyedari berapa kali saya melihat sekeping kod (terutamanya JavaScript) dan berharap saya telah menambah satu atau dua garis di sana untuk mengingatkan diri saya apa yang saya lakukan pada masa itu. Tugas sepuluh saat mungkin menyelamatkan saya lima minit (atau lebih) masa. Ini berkumpul, dan sekarang adalah di mana saya berusaha untuk memperbaiki diri.

Pelajaran yang dipelajari: Tulis lebih banyak nota.

Pelajaran 3: Kedudukan

Kami bermula dengan beberapa HTML asas dan jujur, saya hampir segera kehilangan kemuliaan saya apabila saya melihat mata kawan saya. (Tidak seperti mengedit CSS pra-ditulis) Ia kelihatan terlalu membosankan apabila anda tidak dapat melihatnya berfungsi dengan segera. Walau bagaimanapun, kami bertahan dan mencapai keputusan.

Percayalah, jangan gunakan sempadan 1 piksel di sekitar kosong

Unsur ini diposisikan. Anda akan kehilangan perhatian penonton anda dengan cepat. Letakkan gambar anjing -atau bayi yoda atau pizza -selagi ia tidak kosong. Kemudian kami berpaling ke Flexbox. Pada mulanya kami mendapati bahawa terdapat terlalu banyak grid CSS. Kami secara ringkas melihat grid CSS, tetapi ketika membaca banyak artikel mengenainya, jelaslah bahawa banyak orang menganggap bahawa pembaca sudah akrab dengan CSS, terutama Flexbox. Rakan saya memutuskan untuk memulakan dengan Flexbox.

Saya mengakui: Saya begitu biasa menggunakan kerangka UI (terutama bootstrap) yang saya jarang menulis CSS diri saya untuk kedudukan. Saya tahu bagaimana ia berfungsi dan (kebanyakannya) pernyataan, tetapi saya masih jarang menulisnya sendiri, walaupun dalam situasi yang agak mudah. Pengajaran membuat saya berfikir tentang kebergantungan saya terhadap kerangka UI. Ya, mereka sudah pasti hebat dan menjimatkan banyak masa dalam projek kami, tetapi saya masih ingat menggunakan bootstrap dalam projek baru -baru ini yang pada dasarnya hanya mempunyai dua halaman dan mungkin tidak memerlukannya sama sekali!

Pelajaran yang dipelajari: Jika projek itu kecil dan bilangan elemen yang perlu diposisikan adalah minimum, pertimbangkan untuk menyerahkan rangka kerja dan menulis kod dari awal! Hasil akhirnya akan lebih ringan, lebih cepat, dan lebih memuaskan!

Pelajaran 4: Menaip

Saya suka tipografi. Saya cukup bernasib baik untuk bekerja dengan pereka yang hebat sejak beberapa tahun kebelakangan ini, dan ia benar -benar membantu saya memahami nuansa tipografi. Sungguh mengagumkan bagaimana perubahan kepada perkara -perkara seperti ketinggian garis dan jarak perkataan dapat mengangkat reka bentuk dari normal hingga cemerlang. Ini adalah sesuatu yang saya mahukan orang baru yang saya sudah lama belajar menguasai. Nah, saya tidak perlu bersusah payah kerana satu -satunya perkara yang saya berminat pada mulanya adalah mengubah fon, dan kemudian, apa yang penting kepada saya adalah bilangan fon yang boleh kita gunakan. Pilihannya hampir tidak terbatas, perkhidmatan yang menyediakan fon web dan foundries telah melonjak ke titik di mana apa -apa yang mungkin dalam beberapa tahun kebelakangan, pada kadar yang sangat cepat dan mempunyai kesan yang kecil pada masa pemuatan.

Tetapi perkara tentang pereka (dan pemaju depan seperti saya) adalah ini: kita mungkin sedikit sempit ketika datang ke pemilihan fon. Reka bentuk cenderung untuk berpegang pada fon yang sama (Roboto dan Sans Open?) Perkhidmatan yang sama, kerana kita tahu mereka mudah dilaksanakan dan bekerja. Meneroka fon dengan pemula memaksa saya untuk melampaui standard lama dan mencuba sesuatu yang baru. Saya kini mencari kombinasi baru dan tweaking bagaimana mereka bekerja di skrin dan kesan pada rupa dan rasa reka bentuk keseluruhan. Singkatnya, mengajar orang lain tentang tipografi telah meningkatkan sejarah tipografi saya sendiri, yang mungkin telah terjebak sekitar tahun 2017.

Pelajaran yang dipelajari: Teruskan dengan kemas kini terkini dalam tipografi.

Pelajaran 5 :: Hover menjadikan semuanya menyeronokkan

Setakat ini, semuanya berjalan lancar, tetapi seperti yang anda bayangkan, perkara -perkara masih agak statik. Tanpa rancangan sebenar, kami secara tidak sengaja menambah kesan hover elemen, yang segera menarik perhatiannya, seperti kali pertama mengubah warna!

Hover menambah interaksi dan menjadikannya mudah untuk menarik perhatian, yang menjadikan mereka sempurna untuk pemula untuk mencuba. Objek Skala, Tukar Kotak dari Square ke Circle, Sembunyikan Kandungan - Semua yang boleh dilakukan dengan mudah, jadi melayang adalah cara yang ideal untuk pengaturcara baru untuk mendapatkan hasil segera. Inilah perkara: "'Main seperti ini'" akan membuka pintu lain. "Bagaimana jika saya hanya melakukan ini?" Ini adalah soalan yang banyak di antara kita jarang bertanya kepada diri kita dalam kerja harian kita. Dengan reka bentuk yang jelas, terdapat beberapa peluang untuk bermain, dan terdapat juga beberapa peluang untuk bereksperimen.

Jadi, inilah pelajaran terakhir: Buat masa untuk bermain. Hanya ditanya, "Bagaimana anda membuat perkara ini berbuat demikian?" Memaksa saya untuk mempelajari perkara -perkara baru, mempelajari perkara -perkara baru mengenai CSS, dan memahami apa yang dapat saya bawa kembali dalam rutin harian saya. Eksperimen (atau lebih baik lagi, bermain) menjadikan saya pereka yang lebih baik dan saya akan melakukan lebih banyak lagi.

Pelajaran yang dipelajari: Luangkan masa untuk bermain.

kesimpulannya

Jika masa saya mengajar pemula CSS telah mengajar saya apa -apa, saya jarang menulis kod dari awal lagi. Coretan kod dan autocomplete menyelamatkan saya berjam -jam waktu, tetapi ia adalah kemudahan yang membuat saya lupa sesuatu yang sangat asas. Sesuatu yang harus saya ketahui. Dengan mengajar orang lain, pengekodan saya telah meningkat secara keseluruhan walaupun hanya mengambil masa 15 minit sekali -sekala, dan cakrawala saya terbuka kepada idea dan teknik baru yang mungkin tidak dipertimbangkan sebelum ini.

Bagi rakan -rakan saya? Nah, dia begitu terobsesi dengan CSS untuk masa yang singkat kami bersama -sama bahawa dia kini mengambil kursus dalam talian yang termasuk HTML, dan sekarang dia tahu apa yang boleh dilakukan HTML, ia tidak begitu membosankan!

Atas ialah kandungan terperinci Ingin menjadi lebih baik di kod? Ajar seseorang CSS.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!