Desain Web Untuk Anak-Anak: Selamat Datang di Kota Tuts+!

Selamat datang di Kota Tuts+, dimana semua orang menyukai desain web! Dalam seri ini kita akan belajar semua tentang mendesain dan membangun sebuah website. Untuk membantu kami, kita akan membantu sebuah website bersama-sama.

Pelajaran (atau tutorial) ini akan memberimu tahap demi tahap untuk membuat sebuah website. Semua file latihan akan dicantumkan di akhir tiap pelajaran, jadi kamu dapat meningkatkan karyamu sendiri sambil berjalan.

Jadi, mari masuk, buat dirimu nyaman dan mari kita buat sesuatu untuk orang-orang di Kota Tuts+!

Bagaimana Cara Kerja Web?

Mari melangkah mundur dan pikirkan tentang bagaimana cara kerja web.

Ketika dua komputer terhubung ke internet (yang ditunjukkan dalam garis kuning dalam gambar di bawah) mereka dapat saling berbicara satu sama lain.

Sebuah server (kotak biru) adalah komputer khusus yang berisi file-file web page. Komputermu di rumah atau sekolah bukan sebuah server, karena itu tidak terhubung langsung ke internet. Kita terhubung ke internet melalui sebuah Internet Service Provider (ISP).

Sebuah konten situs (semua hal yang dibicarakan website) diatur dalam aturan khusus yang dimengerti komputer; semacam berbicara dalam bahasa rahasia dan kode, kecuali kita juga akan mengerti rahasia kecil ini!

Dalam gambar ini browser meminta untuk melihat www.tutsplus.com dari server dimana file situs itu hidup. Server mengirimkan file kembali dan browser menerjemahkannya untuk menampilkan sebuah halaman dalam layar. Dan ini terjadi sangat cepat!

Itu semua tentang komunikasi dan berbagi informasi.

Karena semua ini, sebuah situs yang kamu tulis secara lokal (dalam komputermu) tidak dapat dilihat orang lain pada komputer yang berbeda, hingga kamu memindahkan file itu ke server. Kita akan melihat ini dengan semestinya nanti.

Tugas Seorang Web Desainer

Tugas seorang web desainer sangat penting. Semua barang yang muncul dalam gambar di atas terjadi untuk satu alasan: untuk melihat sebuah website. Tugas seorang web desainer adalah menentukan bagaimana tampilan dan kerja website ini, dan bahkan hal lainnya, seperti memastikan website dapat digunakan untuk pengunjung (dalam cara yang sama kamu adalah seorang pengunjung Tuts+ sekarang ini).

Project Kita

Dalam seri ini kita akan membuat sebuah website untuk Kota Tuts+. Kota ini memerlukan tempat dimana turis bisa mendapatkan informasi berguna tentang kota sebelum mereka mengunjungi.

Berikut adalah preview website:

Website ini akan meliputi semua poin-poin desain web yang akan kita pelajari. Itu akan menjadi sebuah project desain web pertamamu!

Membuat Sketsa dan Membangun

Sekarang mari kita bicara sedikit tentang apa yang kita perlukan untuk tiba di situ.

Pertama, kita akan menggambar situs kita dan kemudian mencantumkan apa yang ingin kita miliki pada halaman dalam sebuah file khusus. Kita juga akan menambahkan tautan di sini untuk pengunjung untuk dibawa ke tempat lain, seperti website belanja.

Styling

Setelah kita menggambar dan menulis file khusus untuk website kita perlu membuatnya tampak bagus. Ini adalah bagian dimana semua ide warna dan layout (menentukan dimana barang-barang ini akan tampil pada layar) akan diwujudkan.

Bagaimana cara kita membuat situs kita mudah digunakan? Perasaan apa yang ingin kita berikan warnanya? Dimana seharusnya semua diletakkan pada layar smartphone? Bagaimana dengan layar penuh komputer? Font apa yang terbaik? Ini adalah semua hal yang harus kita pikirkan, namun jangan khawatir, prosesnya menyenangkan dan pertanyaan ini akan muncul secara alami saat semakin sering kamu mendesain web.

Peta Seri

Di bawah adalah roadmap lengkap untuk perjalanan yang akan kita tempuh dalam membuat website kita. Tiap blok memiliki perkenalan ke topik dan kemudian dipecah menjadi bagian-bagian yang lebih kecil.

Perkenalan

Kamu dapat melihat bintang pink yang tertulis Intro pada saat ini. Kita sekarang memiliki ide dasar tentang bagaimana cara kerja web, tugas seorang desain web, dan telah mengintip project yang akan kita desain dan bangun bersama.

Membangun Sebuah Website

Bagian berikutnya adalah dimana kita memikirkan ide dan mulai membuat sketsa. Sketsa adalah cara yang sangat menyenangkan untuk mengumpulkan pikiranmu tentang sebuah desain sebelum kamu mulai melakukan coding. Itu dapat menjadi sebuah penghemat waktu dan membantu kita tetap pada jalur.

Kita akan berbicara tentang file dan peralatan yang perlu kita mulai dengan bagian coding website kita.

HTML

HyperText Markup Language (HTML) adalah bahasa rahasia (tapi tidak lama lagi!) yang digunakan untuk mengatur file teks yang kita bahas secara singkat sebelumnya. Bahasa ini membantu browser kita mengerti dan menampilkan file website.

Semuanya dalam website kita, dan semua website untuk hal tersebut, akan tampil dalam elemen HTML. Elemen adalah sedikit dari bahasa ini yang memiliki sebuah arti dan membantu menjelaskan semuanya yang kita tempatkan dalam halaman.

Jangan khawatir tentang apa arti code ini sebenarnya saat ini, asal selama kamu tahu bahwa setiap website dibuat dari sebuah dokumen tertulis.

CSS

Cascading Stylesheets, CSS, membuat kita dapat mengatur styling (warna, font, perasaan total) untuk website kita, membuatnya atraktif dan semudah mungkin digunakan oleh pengunjung.

Layout CSS

CSS dapat juga membantu kita menempatkan semua bagian dalam halaman.

Gambar

Dalam bagian perjalanan ini kita akan berbicara dengan cepat tentang jenis gambar yang akan dicantumkan dalam situs kita dan bagaimana melakukan beberapa styling untuk itu. Akan ada empat gambar cantik untuk ditambahkan, apa yang kamu pikirkan tentang itu?

Dasar-Dasar Desain

Dalam bagian ini kita akan melihat "building blocks" desain web. Kita ingin memastikan kita membuat sesuatu yang akan digunakan orang-orang, dan dapat digunakan dengan mudah, selain memastikan itu tampak bagus.

Typografi

Typografi adalah seni menyusun ketikan dan sebuah tindak lanjut yang bagus untuk pelajaran desain baru kita, karena itu secara hebat menambahkan atau menghilangkan kesuksesan website kita.

Contoh pertama typografi dalam situs kita dapat ditemukan pada bagian paling atas:

Warna

Warna sangat penting dan menyenangkan. Warna dapat membuat sebuah situs cantik, juga memiliki arti, yang akan kita bicarakan semuanya di sini.

Akhir Seri

Kita akan menyelesaikan seri pelajaran ini dengan mempelajari bagaimana mendapatkan file websitemu ke dalam salah satu komputer khusus itu, sebuah server, sehingga semua teman dan keluargamu dapat melihatnya di internet. Kita juga akan membicarakan dimana kamu dapat membawa studimu dengan jabatan baru sebagai "Desain Web untuk Kota Tuts+".

Namun jangan terlalu khawatir tentang itu sekarang, kita baru akan ke sana!

Sampai Jumpa Kembali!

Dalam pelajaran berikutnya kita akan langsung melompat ke dalam pelajaran bagaimana kita menyiapkan diri untuk membangun sebuah website dengan HTML. Saya sudah tidak sabar, sampai bertemu di kota!