Bagaimana saya bisa mulai mempelajari pengembangan web?


22

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?


4
Saya sarankan menghindari W3Schools sebagai alat belajar. Anda dapat membaca alasannya di sini: meta.stackexchange.com/questions/87678/…
aslum

1
Saya menyarankan bahwa jika w3schools bekerja untuk Anda, Anda menggunakannya. Ya ada kemungkinan ada sesuatu yang tidak akurat, tidak ada yang sempurna. Saya telah melaporkan beberapa masalah pada beberapa halaman tempat saya mendeteksi kesalahan. Banyak orang telah mengoreksi kemampuan bahasa Inggris primitif saya di situs ini. Saya bahkan telah berpartisipasi sedikit liiitle beberapa tahun lalu ke w3C sendiri ketika draft baru diluncurkan. Tidak ada cara untuk mencoba "melarang" situs, tetapi untuk memperbaikinya.
Rafael

Jawaban:


12

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.


25

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.


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


Situs web bermanfaat lainnya

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 !


1
Saya akan menambahkan Lynda.com. Sejauh editor jika Anda menggunakan Mac Anda harus mendapatkan BBEdit atau menggunakan textmate versi gratis.
DᴀʀᴛʜVᴀᴅᴇʀ

1
Saya sepenuhnya setuju tetapi ingin menambahkan bahwa saya akan menyarankan untuk menghindar dari kerangka kerja di awal. Pelajari cara merangkak sebelum Anda belajar cara berjalan. Ini akan memberi Anda basis yang jauh lebih baik, solid untuk melanjutkan bentuk pembelajaran di masa depan dan akan membantu Anda membuat halaman web yang indah, terstruktur, dan semantik.
Musim panas

@ JaneDoe1337 itu tergantung pada siapa Anda bertanya. Kadang-kadang suatu kerangka kerja lebih mudah dipelajari dan membantu untuk penyebaran yang lebih cepat. Juga, setelah mempelajari dasar-dasar suatu kerangka kerja Anda dapat selalu kembali dan mengubah dari waktu ke waktu sebagaimana mestinya jika kerangka kerja tersebut diadopsi dengan baik dan ada pilihan yang lebih baik.
DᴀʀᴛʜVᴀᴅᴇʀ

@Darth_Vader itu sebabnya saya mengatakan itu adalah saran saya;) Pengalaman pribadi saya adalah bahwa orang umumnya tidak kembali dan mempelajari dasar-dasarnya, meninggalkan mereka dengan kurangnya pengetahuan di bagian-bagian tertentu.
Musim panas

4

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


3

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.


"Saya ingin mengalihkan perhatian Anda ke bagian desain desain web" Ya Tuhan, betapa bijaksananya sentece ini! Tidak ada cukup wajah bahagia di situs ini untuk ini: o)
Rafael


0

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.


2
"Sejujurnya, saya akan mulai dengan mempelajari cara mengembangkan situs WordPress. Ya, saya dapat membuat kode situs menggunakan HTML, CSS, PHP ..." Anda harus bekerja dengan CSS dan HTML untuk mengembangkan situs WordPress, tentunya?
e100

Saya tidak setuju, OP akan cenderung mempelajari aturan dan dasar-dasar yang difokuskan pada wordpress. Pengetahuan dasar yang bersih dari bahasa ini akan membantu Anda dalam jangka panjang, ketika mencoba mempelajari bahasa lain atau memecahkan masalah.
Musim panas


-3

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


2
Sementara ini secara teoritis dapat menjawab pertanyaan, akan lebih baik jika Anda dapat memasukkan beberapa kata tentang mengapa situs tertentu ini lebih baik daripada yang lain ...
Farray
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.