Saya sangat tertarik mempelajari pengembangan web dan telah mempelajari beberapa dasar-dasar mengenai HTML dan CSS beberapa tahun yang lalu dari W3Schools, tetapi saya tidak pernah belajar bagaimana mengembangkan situs web yang sesuai dengan standar saat ini, yaitu situs yang mengalir bebas tanpa menggunakan tabel untuk mengatur desain situs.

Sumber daya apa saja yang bisa saya mulai?

CSS Zen Garden

Lihat CSS Zen Garden dan balik berbagai hasil. Mereka sangat fleksibel dan memberikan banyak perbedaan pada kode sumber yang sama. Anda akan belajar banyak tentang teknik CSS modern. Bahkan jika Anda tidak membedahnya sepenuhnya, Anda setidaknya akan menemukan banyak inspirasi dan kemampuan CSS terhadap HTML yang dapat diakses normal. Hal yang hebat tentang CSS Zen Garden adalah semantik melawan gaya. Konten bukan gaya apa pun. Segala sesuatu yang Anda lihat gaya dilakukan sepenuhnya oleh CSS yang merupakan cara yang benar untuk melakukannya, karena data dapat dikonsumsi oleh banyak klien yang berbeda, dan gaya hanya oleh mereka yang memvisualisasikannya.

Buku

Ketika datang untuk belajar dari buku-buku yang satu ini tampak seperti awal yang baik CSS: Manual Hilang .

Internet

Saya membaca Smashing Magazine di internet yang menyediakan banyak contoh dan pendekatan. Ini mencakup artikel dari bisnis desain untuk pendekatan hebat dalam desain web dan sama.

Cara terbaik untuk mempelajari cara membuat situs web dan aplikasi adalah dengan benar-benar melakukannya , artinya Anda harus membuat proyek, dan melakukannya setiap saat. Video pendek ini menyampaikan emosi seorang pendatang baru dan memberikan beberapa saran yang bagus tentang masalah tersebut.

Saya juga menulis beberapa rekomendasi lain untuk orang-orang yang tertarik mempelajari pengembangan web yang harus Anda baca sebelum memulai.

Namun, sama seperti Anda tidak dapat berbicara bahasa yang Anda tidak tahu kata-kata, Anda perlu memahami dasar-dasarnya sebelum Anda dapat membangun proyek yang bermanfaat. Berikut adalah beberapa sumber daya untuk mengambil beberapa dasar-dasar dan situs yang memungkinkan Anda menjelajah sendiri.

Ada banyak tempat bagus untuk mempelajari dasar-dasar pengembangan web secara gratis. Mulailah dari sini, tetapi cabutlah mereka untuk bermain-main dengan hal-hal yang tidak mereka ajarkan secara langsung. Setelah melalui beberapa, coba buat sendiri situs / proyek lain dari awal. Melakukan hal itu akan memperkuat konsep, mengajari Anda detail implementasi, dan kemungkinan mengajarkan Anda hal-hal tambahan juga. Anda tidak bisa menjadi pengembang atau desainer yang baik hanya dengan membaca, Anda harus membuatnya !

Saya membuat kursus kilat untuk desainer yang belajar pengembangan web

Saksikan berikut ini! Mereka dirancang untuk audiens berbasis desain tetapi berlaku untuk siapa pun yang belajar. Mereka mengajarkan dasar-dasar dalam slide / post / video kemudian menetapkan proyek kecil di akhir masing-masing untuk mengajarkan pengembangan front-end dunia nyata.

• Pelajaran 1 - Mengapa dan apa di balik pengembangan web
• Pelajaran 2 - Memulai HTML & CSS
• Pelajaran 3 - Memulai JavaScript (JS)

Situs web tutorial bagus lainnya

• CodeAcademy - Dasar-dasar pengetahuan umum dari beberapa bahasa.
• Seri "Learning the Web" Mozilla - Ini dimulai pada tingkat awal dan dapat memandu Anda ke beberapa topik yang lebih kompleks. Sumber yang bagus, saya sangat merekomendasikannya.
• Udacity - Kelas pengembangan web umum.
• Tuts + - Tutorial tentang topik yang lebih spesifik.
• KhanAcademy - Saya belum menggunakannya secara pribadi, tetapi tampaknya semakin baik setiap hari.

Jangan gunakan W3Schools , umumnya sudah usang dan sangat rentan kesalahan. Alih-alih, gunakan situs web tutorial seperti yang di atas untuk mempelajari dan menggunakan salah satu situs dokumentasi di bawah ini ketika Anda mencari sesuatu yang spesifik.

Dokumentasi

Melihat dokumentasi untuk properti, perpustakaan, dan semacamnya sangat penting untuk menjadi pengembang web yang baik. Berikut ini adalah beberapa dokumen terbaik yang dapat Anda gunakan:

• W3.org - Dokumentasi resmi untuk hampir semua yang diimplementasikan oleh browser web. Belajar membaca dokumen ini sangat penting! Ini tidak berafiliasi dengan W3Schools dengan cara apa pun.
• Mozilla Docs - Sumber daya pihak ke-3 yang sangat andal dari pencipta FireFox yang tetap mutakhir.
• WHATWG.org - Semacam pesaing open source untuk W3; beberapa browser menerapkan saran tertentu dari sini selama W3 di kali.
• DevDocs - Tidak resmi, tetapi memiliki banyak bahasa dokumen di satu situs. Cukup nyaman.

Feed yang bermanfaat

• WebPlatformDaily - Daftar berita yang berhubungan dengan semua web yang diperbarui setiap hari (kecuali akhir pekan).
• SitePoint - Artikel yang sangat berguna tentang berbagai hal.
• WebDesignerDepot - Dapat berada di sisi spam, tetapi sebagian besar artikel aktualnya bagus.
• Smashing Magazine - Topik lebih lanjut, tetapi sebagian besar semua bacaan bagus.
• A List Apart - Sedikit pengetahuan lebih lanjut dalam bentuk blog.

Editor

Proyek kecil / bermain dengan kode

• JSFiddle - Buat proyek kecil dan pantau mereka.
• CodePen - Lihatlah orat-oret kode orang lain dan kirimkan sendiri untuk dilihat orang lain.

Editor teks lengkap

• SublimeText
• Atom

Situs web bermanfaat lainnya

• Halaman Sumber Daya Saya - Daftar sumber daya yang telah saya kompilasi, mulai dari intro hingga desain responsif hingga analisis berbagai cara untuk menghidupkan di browser web.
• Buku pegangan pengembang front-end - Kumpulan posting yang lebih beragam namun bermanfaat yang mencakup beragam topik front-end.
• WebFieldManual - Banyak koleksi sumber daya bermanfaat.
• StackOverflow - Jika Anda memiliki pertanyaan terkait pemrograman tertentu , StackOverflow tidak tertandingi untuk membantu Anda.
• LearnLayout - Pelajari beberapa dasar tentang melakukan tata letak di CSS.
• Posisi dalam desain web - Bagian dari kursus kilat saya yang mungkin paling berguna.
• 30 penyeleksi CSS yang harus Anda ketahui - Kenali mereka dan hemat waktu Anda nanti. Ada juga permainan kecil yang keren untuk menguji pengetahuan pemilih CSS Anda.
• Referensi CSS Codrops - Halaman referensi yang ringkas dan bermanfaat.
• CodeMentor and Thinkful - Situs tempat Anda dapat membayar untuk dibimbing 1 banding 1.

Cari blog pribadi pengembang web dan perancang yang Anda sukai. Mereka sering memiliki konten yang luar biasa.

Saya juga telah menulis pengantar untuk desain UI yang bisa sangat berguna. Saya menghubungkan beberapa sumber daya tambahan di dalamnya.

Saya tidak bisa cukup menekankan, cara terbaik untuk belajar adalah membangun hal-hal yang mendorong batas Anda dan melakukannya terus-menerus .

Untuk daftar yang lebih besar (dan mungkin luar biasa) dari situs web terkait yang bermanfaat, checkout WebDesignRepo !

Tempat terbaik bagi saya untuk belajar tentang desain web (solusi tata letak, kegunaan, gambar, dan solusi teknis) adalah:

lihat semua situs web orang yang menulis artikel di situs web tersebut:

Daftar 24ways.org terpisah

Atau sesuatu yang lebih teknis tentang desain daftar, dan mengambang http://css.maxdesign.com.au/index.htm

Anda harus tahu apa itu standar web. Sumber resminya adalah ini: Konsorsium World Wide Web (w3c) Agak sulit untuk dipelajari dari sana karena sangat teknis, tetapi baik untuk memeriksanya ketika Anda ingin tahu bagaimana cara kerja berbagai hal di web dan mengapa tentang standar. hal yang paling berguna adalah Validator dari kode HTML Anda.

Salah satu cara terbaik adalah dengan melihat baik-baik kode sumber situs web yang bagus, dan tentu saja proporsi hal-hal yang diselaraskan seperti itu untuk mempelajari triknya: http://www.cssbeauty.com/

Dan Lihatlah situs web perancang web yang baik dan apa yang mereka lakukan:

Jason Santa Maria
Dustin Curtis
Joshua Davis
David DeSandro
http://www.thinkingforaliving.org/
dll ...

dan bookmark Delicious saya (ada berbagai hal, Anda harus menggali melalui mereka dan membaca apa yang tidak Anda butuhkan) http://www.delicious.com/Littlemad/webdesign

Sebelum Anda mulai mempelajari semua kerangka itu ...

Saya ingin mengarahkan perhatian Anda ke bagian desain desain web.

Tentu saja, Anda dapat dengan mudah membangun situs web dengan Bootstrap atau kerangka kerja lainnya. Tapi itu bukan desain. Kerangka kerja bisa menjadi dasar, tetapi jika Anda tidak memutar sendiri, pada dasarnya Anda akan mendapatkan situs web yang sama seperti semua situs web lain di luar sana .

Itu sebabnya saya menyarankan Anda untuk mempelajari dasar-dasar desain dan mencoba menerapkannya sendiri.

Bagaimana Anda membuat situs web (cantik) sendiri?

Nah, itu pertanyaan yang layak untuk dibaca, tetapi berikut adalah beberapa petunjuk:

1. Baca tentang prinsip-prinsip dasar desain . Ini primer 7-langkah dalam desain web akan membantu Anda memulai. Juga, seri artikel tentang Majalah Smashing ini .
2. Amati desain orang lain. Apa prinsip dasar yang mereka gunakan dan bagaimana? Tapi jangan hanya mengamati, perhatikan pengamatan Anda .
3. Desain dengan tujuan bisnis dalam pikiran . Ada desain web untuk membantu bisnis mewujudkan tujuannya dan untuk membantu pengguna mencapai tujuan mereka sendiri. Ketika 2 tujuan bertemu, semua orang senang. Jadi, tujuan itu harus menjadi titik awal Anda, selalu. Anda harus mendasarkan setiap keputusan desain yang Anda buat pada sasaran ini — pilihan font, pilihan warna, tata letak, dll.
4. Pastikan ada keselarasan di seluruh desain Anda. Secara umum, ini berarti keharmonisan antara pesan yang ingin Anda kirim, warna, font, mood situs web dan merek. Mulailah menanamkan harmoni dalam desain Anda dengan menggunakan skala modular untuk memandu keputusan ukuran Anda. Seri mini ini menjelaskan lebih banyak tentang harmoni dan menggunakan skala modular.
5. Baca pengantar tipografi yang menakjubkan ini : Tipografi Praktis Butterick atau, setidaknya, ringkasannya

Coba desain dari awal

Sekarang, ketika Anda selesai membaca tentang semua hal ini dan Anda tahu HTML dan CSS, Anda akan dapat melakukan desain sendiri yang sangat sederhana.

Cobalah untuk mendesain satu halaman dengan teks saja, hitam putih .

Kenapa hanya teks? Karena teks sejauh ini merupakan media yang paling banyak digunakan untuk menyampaikan pesan di web. Oleh karena itu, penting bagi Anda, sebagai perancang web, untuk dapat membuat teks terlihat bagus dan menyenangkan untuk dibaca.

Kenapa hitam dan putih? Karena memilih warna adalah satu lagi binatang buas. Mengambil langkah-langkah kecil akan membuat Anda merasa senang dengan kemajuan yang Anda capai dan akan membantu Anda belajar lebih cepat.

Terapkan prinsip-prinsip desain dasar yang Anda pelajari + gunakan pengamatan desain orang lain + pikirkan tujuan halaman itu + ukuran teks menggunakan skala modular.

Cara terbaik untuk belajar adalah membuat sesuatu jadi buatlah diri Anda sebuah situs web.

Baca standar , alistapart , tutsplus .

Jika Anda perlu melihat buku di SitePoint - HTML Utopia: Merancang Tanpa Tabel Menggunakan CSS .

Beberapa pemikiran tentang csszengarden dan W3Schools .

Jujur, saya akan mulai dengan mempelajari cara mengembangkan situs WordPress. Ya, saya dapat membuat kode situs menggunakan HTML, CSS, PHP, ... tapi saya bisa membuat situs WordPress lebih cepat dan kemudian menyesuaikan sesuai kebutuhan.

Jika Anda ingin memulai hanya mempelajari standar hari ini maka saya akan merekomendasikan http://nettuts.com/ . Juga akan bermanfaat untuk mendapatkan keanggotaan premium dan mendapatkan akses ke beberapa tutorial hebat. Jika beralih dari PSD ke HTML adalah sesuatu yang Anda minati, mereka akan membahasnya.

Nettuts adalah bagian dari Envato. Envato memiliki beberapa situs tutorial yang mencakup pengembangan web, wordpress, vektor, pengeditan foto dan video dan banyak lagi. Ini tempat yang bagus untuk memulai.

Hanya 2 sen saya.

Untuk pemula Photoshop di desain Web, saya akan merekomendasikan situs ini http://psdvibe.com/

Ada banyak situs web dengan banyak tutorial. Namun, platform terbaik untuk mempelajari desain web adalah http://teamtreehouse.com/ . Semoga ini bisa membantu! Nik