Photo By Freepik on Freepik

Coding menjadi keterampilan penting di dunia modern, dan semakin banyak orang yang ingin mempelajari cara membuat kode karena beragamnya karier yang tersedia bagi para pembuat kode. Lantas apakah ada Situs website untuk belajar coding secara online?

Jika Anda ingin mempelajari pengembangan perangkat lunak, bekerja sebagai pengembang, atau mengembangkan situs web, Anda memerlukan beberapa keterampilan coding.

Mengetahui cara coding dapat memberi Anda keunggulan dalam industri yang kompetitif ini, memungkinkan Anda bekerja lebih mandiri dan mendapatkan lebih banyak fleksibilitas dalam jalur karier Anda.

Ada ribuan sumber daya di web yang dapat membantu Anda mempelajari cara membuat kode, namun mencari tahu mana yang terbaik bisa jadi sesuatu hal yang rumit, terutama jika Anda baru mengenal coding.

Jadi, jika Anda siap untuk mulai mempelajari cara membuat kode, berikut adalah beberapa tempat yang bagus dan Mamang rekomendasikan untuk mulai belajar.

Link Mangcoding1. Codecademy

Mangcoding Website Untuk Belajar Coding 1

Codecademy adalah situs web pendidikan dengan tutorial coding interaktif. Tutorial ini dirancang untuk membuat pemrograman mudah dan dapat diakses oleh pemula. Pembelajaran di Codecademy mencakup HTML, CSS, JavaScript, Python, dan Ruby.

Selain itu, di Codecademy juga menggunakan bahasa yang digunakan oleh para profesional pengembangan web, seperti PHP atau Ruby on Rails. Kursus ini gratis untuk digunakan tetapi memiliki opsi Premium dengan akses ke fitur tambahan dan kursus lanjutan.

Situs ini berisi papan diskusi di mana pengguna dapat mengirimkan pertanyaan untuk mendapatkan bantuan dari pengguna lain. Selain itu, bagian terbaik tentang situs ini adalah Anda belajar sambil praktek, bukan hanya membaca artikel atau menonton video tentang cara kerja kode.

Selain dasar-dasarnya, Codecademy menawarkan bahasa pemrograman khusus, seperti Swift, untuk mengembangkan aplikasi Google dan Apple.

Kursus ini mencakup serangkaian penjelasan dan instruksi serta editor kode tempat siswa dapat mengasah keterampilan mereka.

Anda dapat ikut serta dalam paket gratis, yang mencakup pelajaran interaktif dan latihan sehari-hari tetapi terbatas pada kursus dasar. Alternatifnya, mereka menawarkan paket berbayar jika Anda ingin mempelajari lebih mendalam.

Paket Pro-nya berharga $15,99 per bulan, di mana Anda mendapatkan akses ke konten pro-anggota, kursus lanjutan, dan mendapatkan sertifikasi setelah selesai.

Situs web ini luar biasa bagi mereka yang tidak memiliki pengalaman coding sama sekali. Selain itu, situs ini menggunakan gaya pengajaran percakapan dan tidak terlalu teknis.

Link Mangcoding2. Coursera

Mangcoding Website Untuk Belajar Coding 2

Coursera adalah salah satu situs web paling terkemuka untuk mengajari orang cara membuat kode. Lebih dari 100 kursus tersedia, mulai dari Python, JavaScript, hingga Analis Data.

Setiap kursus mencakup materi, pekerjaan rumah, kuis, dan tes. Siswa dapat belajar sesuai kecepatan mereka, Selain itu, kemajuan mereka dipantau oleh Instruktur.

Banyak kursus gratis tersedia di platform ini, tetapi Anda harus mempertimbangkan kursus berbayar jika Anda menginginkan sertifikat. Kursus berbayar biasanya sekitar $39 untuk setiap kursus. Namun, mereka menawarkan masa uji coba gratis selama 7 hari.

Biasanya pembelajaran dilakukan melalui materi video, bahan bacaan, kegiatan, kuis, dan forum. Anda juga dapat menetapkan tujuan yang jelas untuk memotivasi diri sendiri.

Link Mangcoding3. Udemy

Mangcoding Website Untuk Belajar Coding 3

Udemy memberi penggunanya akses ke ratusan kursus yang ditawarkan oleh instruktur dari seluruh dunia. Mirip dengan Coursera karena memungkinkan orang mengambil kelas online gratis.

Namun, tidak seperti Coursera, Coursera lebih menekankan pada proyek dunia nyata daripada pembelajaran mandiri.

Udemy adalah salah satu situs coding online terbaik, dengan lebih dari 130.000+ kursus online. Ribuan kursus dapat diakses oleh siswa di semua tingkatan, baik pemrogram pemula, pengembang web berpengalaman, atau profesional berpengalaman yang ingin meningkatkan keterampilan mereka.

Karena ada begitu banyak pilihan, sebaiknya Anda memulai dengan kursus yang memiliki peringkat bintang tinggi dan review materi kursus yang bagus.

Dengan kursus online gratis ini, Anda dapat mengakses videonya, tetapi Anda tidak dapat berinteraksi dengan instrukturnya. Selain itu, Anda tidak bisa mendapatkan sertifikat atau menerima masukan dari mereka.

Link Mangcoding4. Code.org

Mangcoding Website Untuk Belajar Coding 4

Code.org adalah situs web luar biasa lainnya untuk mengajari anak-anak cara membuat kode. Hadi dan Ali Partovi mendirikannya pada tahun 2013 untuk mengajarkan dasar-dasar ilmu komputer kepada anak-anak.

Situs web ini menyediakan kursus yang mencakup keterampilan pemrograman dasar seperti variabel, array, dan fungsi.

Ada juga berbagai aktivitas menyenangkan yang tersedia untuk membuat prosesnya lebih menyenangkan. Misalnya, permainan bernama “Guess My Number” memungkinkan anak-anak untuk berlatih berhitung sambil bersenang-senang.

Pada situs ini terdapat katalog kursus secara eksplisit yang dirancang untuk programmer pemula yang tertarik mempelajari Python. Namun, ini sesuai untuk siswa dari segala usia atau tingkat keterampilan.

Link Mangcoding5. freeCodeCamp

Mangcoding Website Untuk Belajar Coding 5

freeCodeCamp adalah organisasi nirlaba yang didedikasikan untuk mengajarkan ilmu komputer kepada orang-orang dari segala rentang usia.

Tujuannya adalah untuk menyediakan kurikulum dan sumber daya ekstrakurikuler sumber terbuka gratis bagi siapa saja, tanpa memandang jenis kelamin, warna kulit, agama, orientasi seksual, status ekonomi, kemampuan fisik, atau pengetahuan sebelumnya, untuk mempelajari ilmu komputer.

Platform ini mengajar melalui pendekatan berbasis proyek. Setiap kursus dimulai dengan video pengantar, diikuti dengan materi tekstual, kuis, dan proyek pembelajaran coding praktis. Siswa didorong untuk fokus pada proyek mereka dan menyerahkannya setelah selesai.

FreeCodeCamp adalah salah satu platform pembelajaran coding online paling terkenal. Platform ini memiliki ribuan lulusan yang telah bekerja di perusahaan terkenal seperti Google, Apple, dan Netflix.

Setelah mendaftar, Anda akan diberikan daftar kelas yang disusun berdasarkan tingkat kesulitan. Jadi, Anda dapat segera mulai mempelajari kode sesuai tingkatan kemampuan Anda sekarang.

Link Mangcoding6. edX

Mangcoding Website Untuk Belajar Coding 6

edX mempelajari Ilmu Data, Bahasa Pemrograman, Visi Komputer, Kecerdasan Buatan, Pembelajaran Mesin, dan bidang lainnya, serta menyediakan lebih dari 190 kursus yang diajar oleh beberapa tutor. Selain itu, edX menawarkan beragam program, mulai dari MOOC hingga sertifikat.

MOOC adalah kursus yang biasanya diajarkan oleh universitas dan tersedia untuk siapa saja di seluruh dunia. Di sisi lain, sertifikatnya biasanya merupakan kursus khusus mata pelajaran dan hanya tersedia bagi individu yang lulus ujian dengan syarat tertentu.

Namun, Anda harus tahu bahwa sertifikat tidak sepenuhnya gratis. Anda harus membayar yang masing-masing biayanya sekitar $50. Namun demikian, ini adalah cara terbaik untuk belajar bahasa pemrograman seperti C++ dan Python tanpa menginvestasikan waktu atau uang dalam program gelar.

Jika Anda merasa sangat yakin dengan keterampilan Anda setelah mengikuti satu atau lebih kursus melalui edX, Anda mungkin ingin mencoba program master mereka di bidang Ilmu Komputer.

Link Mangcoding7. SoloLearn

Mangcoding Website Untuk Belajar Coding 7

SoloLearn adalah sumber yang bagus bagi mereka yang ingin mempelajari cara membuat kode sendiri. Selain itu, SoloLearn juga menawarkan program sertifikat bagi mereka yang ingin menjadi tutor untuk orang lain.

Ada tutorial dalam lima bahasa berbeda, yaitu Inggris, Spanyol, Prancis, Jerman, dan Portugis Brasil. Sumber daya yang ditawarkan oleh situs web ini sangat membantu bagi individu yang ingin mulai belajar cara membuat kode sendiri atau memerlukan bantuan dengan bahasa pengkodean tertentu.

Namun, situs ini hanya menyediakan beberapa peluang interaktif seperti Codecademy.

Link Mangcoding8. Scrimba

Mangcoding Website Untuk Belajar Coding 8

Scrimba adalah platform pengkodean interaktif online terkemuka yang mengajarkan HTML, CSS, JavaScript, dan banyak lagi. Dengan Scrimba, Anda dapat menonton kursus dari instruktur terbaik dunia dan mengikuti arahan mereka di browser Anda tanpa harus menginstal perangkat lunak apa pun.

Bagi mereka yang memilih akses offline, Scrimba juga memiliki lebih dari 30 jam konten video yang tersedia untuk diunduh. Selain sangat mudah digunakan dan memungkinkan pelajar yang ingin belajar sambil bepergian, mereka juga memiliki kursus tentang berbagai topik seperti jQuery atau Ruby.

Website ini akan menunjukkan kepada Anda contoh dan cara membuat sesuatu kode, dan setelah menunjukkan kepada Anda apa yang harus dilakukan, dan website ini juga akan merevisi dan menunjukkan apa yang tidak boleh dilakukan.

Selain itu, aspek hebat lainnya dari situs web ini adalah adanya petunjuk jelas tentang cara mendaftar dan mulai menggunakannya, yang dapat dilihat dengan cara menggulir ke bawah di bagian atas halaman web mereka.

Selain itu, ada kelas langsung di mana siswa dapat mengajukan pertanyaan melalui obrolan yang dapat membantu mereka jika mengalami kesulitan.

Link Mangcoding9. Udacity

Mangcoding Website Untuk Belajar Coding 9

Udacity menawarkan kursus komprehensif tentang pengembangan web, termasuk HTML dan CSS, JavaScript, kerangka kerja front-end seperti React dan Angular, dan kerangka kerja back-end seperti Ruby on Rails.

Kursus diatur secara mandiri, dengan tenggat waktu tugas yang harus diselesaikan sebelum melanjutkan. Selain itu, website Ini juga mencakup kuis dan forum interaktif sehingga siswa dapat memperoleh masukan dan bantuan dari instruktur, mentor, alumni, dan siswa lainnya.

Udacity menawarkan lebih dari 60 program nanodegree dalam berbagai mata pelajaran mulai dari ilmu komputer dan analisis data hingga administrasi bisnis, kewirausahaan, desain game, dan pembelajaran mesin.

Alumni program ini mencakup individu yang ingin mengubah karier dan mereka yang ingin memasuki bidang baru yang belum mereka kuasai sebelumnya seperti seseorang dengan gelar di bidang sastra yang ingin menjadi pengembang web.

Link Mangcoding10. Codewars

Mangcoding Website Untuk Belajar Coding 10

CodeWars adalah platform online tempat para pemrogram bersaing untuk memecahkan masalah pemrograman. Selain itu, Codewars menekankan pada keterlibatan komunitas, di mana anggota dapat menilai diri mereka sendiri satu sama lain.

Pengguna bisa memulai dengan memilih salah satu bahasa yang ingin mereka pelajari. Mereka kemudian membagikan jawaban mereka untuk ditinjau, dan tingkat kesulitan diberikan kepada mereka.

Mereka dapat melanjutkan ke rangkaian tantangan berikutnya setelah menyelesaikannya pada tingkat kesulitan tertentu.

Link Mangcoding11. CodeMonkey

Mangcoding Website Untuk Belajar Coding 11

CodeMonkey menugaskan anak-anak untuk membantu monyet mengambil pisangnya yang hilang saat melakukan perjalanan melintasi peta lucu yang penuh dengan teka-teki pengkodean prosedural, penyelesaian tugas ini menggunakan kode nyata yang ditulis dalam CoffeeScript atau Python.

Setiap level ditampilkan dari perspektif top-down, dan pengguna harus menulis serta menjalankan cuplikan kode di satu bagian layar untuk mengarahkan monyet melewati setiap level di bagian lain.

Format tersegmentasi ini memungkinkan siswa untuk melihat hasil usaha mereka dengan segera, dan permainan berjalan melalui setiap baris kode saat dilakukan.

Kursus dimulai dengan pengkodean berbasis blok untuk anak kecil dan berlanjut ke aktivitas seperti Kursus Dodo Does Math dan Banana Tales Python.

Dengan menjamurnya bootcamp pengkodean dan sumber daya online, mempelajari cara membuat kode menjadi lebih mudah dari sebelumnya. Namun, ada begitu banyak pilihan sehingga diperlukan upaya yang cukup besar untuk mengetahui mana yang bermanfaat.

Daftar situs web diatas yang kami bahas mudah-mudahan dapat membantu Anda mempelajari cara membuat kode, menjadi pengembang web, atau bahkan memulai bisnis Anda sendiri.

Saat Anda maju dalam menggunakan salah satu situs web ini, pastikan untuk membangun sesuatu sendiri untuk terus berlatih dan terus belajar.

Mempelajari cara membuat kode mungkin tampak menakutkan pada awalnya, tetapi dengan referensi ini, kami berharap segalanya menjadi bisa lebih mudah.

Itulah artikel 11 Situs Website Untuk Belajar Coding Dengan Panduan Komprehensif yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru untuk Anda. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Sumber : 11 Situs Website Untuk Belajar Coding Dengan Panduan Komprehensif

Photo by Ferenc Almasi on Unsplash

Pada bab sebelumnya kita sudah mengetahui pengertian CSS dan bagaimana CSS disisipkan dengan teknik inline CSS. pada artikel kali ini , kita akan belajar bagaimana menyisipkan CSS dengan menggunakan internal/embeded CSS dan external CSS.

Link MangcodingInternal CSS

Sebelumnya kita sudah mendapatkan gambaran bahwa Internal CSS adalah sintaks CSS yang ditulis bersamaan dengan file HTML yang kita buat dengan menggunakan elemen <style>… </style>. Internal CSS lazimnya ditulis didalam tag/elemen <head> yang berada pada bagian atas dokumen HTML, namun meskipun disimpan didalam body atau didalam elemen lainnya akan tetap terbaca selama elemen yang membutuhkannya berada di bawahnya.

Untuk menyeleksi elemen yang akan kita gunakan dalam Internal CSS kita akan mengenal istilah selector yang mana akan kita pelajari setelah memahami penggunaan External CSS.

<html>
<head>
<metacharset="UTF-8">
<title>tes HTML</title>
<style>
header {
background:url('https://mangcoding.com/wp-content/uploads/2017/02/cropped-pexels-photo-48727.jpeg') no-repeat center center; padding:50px;
}
h2 {
color:#007EC7;
text-align: center;
}
.subtitle {
background:rgba(255, 255, 255, 0.7);
padding:5px
}
</style>
</head>
<body>
<header>
<h2>Welcome to my Site</h2>
<pclass="subtitle">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
</header>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt aut, nesciunt eaque ullam. Quasi, laudantium optio enim. Sequi, eaque quod. Voluptatum vero rerum, assumenda itaque totam consequatur dicta dolore. </p>
</body>
</html>

 

berdasarkan contoh diatas, bandingkan pengunaan CSS internal dengan inline CSS, lebih rapih dan mudah bukan? ^_^. Meskipun demikian, penggunaan CSS internal sedikit sekali di gunakan untuk membangun sebuah web. CSS internal biasanya di generate bersamaan dengan tag HTML yang dihasilkan oleh server side scripting seperti PHP, nodeJS, Ruby, dll. CSS pada umumnya dibuat dengan menggunakan External CSS seperti yang akan kita bahas dibawah ini. masih semangat kan kawan-kawan?

Link MangcodingExternal CSS

External CSS memisahkan antara file html dengan file CSS. file CSS berkestensi .css kemudian dihubungkan dengan menggunakan tag/elemen <link> yang biasanya di simpan di dalam tag <head>. penggunaanya mirip sekali dengan Internal CSS yang membutuhkan selector untuk menyeleksi elemen mana yang akan kita sisipkan CSS. untuk memahami penggunaan CSS External, ikuti langkah berikut ini :

  1. Buatlah halaman html yang terdiri dari header berisi text (seperti pada materi sebelumnya) kemudian berikan judul dan konten pada halaman web yang anda buat. (lihat contoh dibawah ini)
  2. pada tagbuatlah tag seperti dibawah ini, atau jika anda menggunakan sublime text cukup mengetikkan kata link lalu pencet tab, pastikan tampilan headnya jadi seperti ini.
<head>
<metacharset="UTF-8">
<title>External HTML</title>
<linkrel="stylesheet"href="style.css"/>
</head>

 

Seperti yang telah anda buat sebelumnya pada materi internal CSS (Lihat contoh dibawah ini)

Demikian penjelasan singkat mengenai CSS internal dan external. pada saat kita membuat CSS pada contoh diatas, secara tidak langsung kita sudah menyeleksi elemen mana yang akan kita beri CSS dengan menggunakan selector Tag/Elemen.

Apa itu Selector?
Berapa banyak tipe selector?
Pokok bahasan ini kita pelajari pada bagian selanjutnya.

Keep Learning ^_^
Semangat

Photo by Gabriel Heinzer on Unsplash

Sebelum kita masuk ke bab ini, pastikan terlebih dahulu sudah memiliki text-editor seperti sublime text, notepad++, atau yang lainnya (silakan pilih salah satu). jika tidak, saya sarankan cek artikel sebelumnya untuk mengenal editor dan bagaimana cara menyimpan file html.

Elemen/Tag

Pada bab sebelumnya, kita sudah mengetahui bahwa html terdiri dari sekumpulan tag yang mewakili suatu konten. jadi, untuk membuat suatu konten kita harus mengetahui terlebih tag yang digunakan. suatu HTML biasanya terdiri dari tag pembuka, dan tag penutup dengan konten/isinya berada di kedua tag tersebut.

Bentuk baku :

<tagname>isi dari tag yang kita buat</tagname>

<h3>contoh tag pembuatan judul </h3>
<p>contoh pembuatan paragraf </p>

 

Attribute

Pada Umumnya semua elemen/tag HTML memiliki attribute. Attribut berisi informasi tambahan mengenai tag yang akan kita buat. contohnya kita akan membuat suatu judul dengan membuat H6. H6 ini ingin rata tengah maka kita bisa menambahkan align=”center”. Attribute pada html disimpan di tag pembuka dan biasanya bentuk umum dari suatu attribute adalah name=”value”.

<h6 align="center">Judul dengan rata tengah</h6>
<p align="left">Paragraph dengan rata kiri </p>
<a href="https://www.mangcoding.com" target="_blank">Klik disini</a>

 

Headings digunakan untuk membuat judul pada artikel atau paragraf yang akan kita buat. Heading terdiri dari h1, h2,h3, sampai dengan h6

<h1>ini heading 1</h1>
<h2>ini heading 2</h2>
<h3>ini heading 3</h3>
<h4>ini heading 4</h4>
<h5>ini heading 5</h5>
<h6>ini heading 6</h6>

 

Untuk membuat paragraf, kita cukup menggunakan tag p, jika kita menggunakan sublime text 3, kita cukup mengetikkan huruf p di keyboard kemudian pencet tab maka secara otomatis akan memunculkan tag pembuka dan tag penutup. untuk mendapatkan tulisan dengan dummy text lorem ipsum, kita cukup mengetikkan lorem kemudian pencet tab

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum esse inventore reiciendis voluptate, sapiente, perspiciatis minima et debitis dignissimos harum nisi ex? Odit non perspiciatis adipisci. Dicta nisi, cupiditate alias. </p>

 

Formatting text

Seperti halnya belajar software pengolah text, kadang kala kita membutuhkan tulisan berbentuk tebal, miring, dll. HTML menyediakan tag untuk formatting text, berikut adalah tag-tag yang dipakai untuk membuat format text

Tag Description
<b> Untuk membuat text menjadi tebal
<em> Untuk membuat text menjadi miring
<i> Untuk membuat text menjadi miring
<small> Untuk membuat text menjadi lebih kecil
<strong> Untuk membuat text menjadi tebal
<sub> Untuk membuat tulisan seperti H2O
<sup> Untuk membuat tulisan seperti M2
<ins> Untuk membuat garis dibawha tulisan
<del> Untuk membuat tulisan yang dicoret
<mark> Untuk menandai tulisan (defaultnya warna kuning)

List

List terbagi menjadi 2, yaitu ordered list dan unordered list

Ordered List

  1. ordered list digunakan untuk list dengan penomoran berurut
  2. tag ol digunakan untuk membuka ordered list
  3. tag li digunakan untuk isi list
  4. tag ol memiliki attribute type “a”, “A”, “I”, “i”, “1”

Unordered List

  • unordered list digunakan untuk list dengan tidak memandang urutan
  • tag ul digunakan untuk membuka ordered list
  • tag li digunakan untuk isi list
  • tag ol memiliki attribute type “square”, “circle”, “disc”, “none”

untuk memahami Ol dan Ul silakan anda buat file dibawah ini kemudian save lalu buka di browser kesayangan anda.

<h2 align="center">Mengenal List</h2>
<p>List itu terbagi menjadi 2</p>
<h4>Ordered List</h4>
<ol>
    <li>tag ol digunakan untuk membuka ordered list</li>
    <li>tag li digunakan untuk isi list</li>
    <li>tag ol memiliki attribute type "a", "A", "I", "i", "1" </li>
</ol>

<h4>Unordered List</h4>
<ul>
    <li>tag ul digunakan untuk membuka ordered list</li>
    <li>tag li digunakan untuk isi list</li>
    <li>tag ol memiliki attribute type "square", "circle", "disc", "none" </li>
</ul>
<a href="dasar.html" target="_parent">Halaman dasar</a>

 

Hyperlink digunakan untuk membuat link dari satu halaman ke halaman lain atau ke url diluar website kita. misalnya kita punya file index.html lalu dengan mengklik tombol tertentu maka akan menuju ke halaman about.html atau ketika kita klik lari ke halaman facebook kita. untuk melakukan semua itu diperlukan suatu hyperlink.
Contoh penulisan hyperlink adalah sebagai berikut :

<a href="url/link tujuan">link text</a>
<a href="https://www.facebook.com/mangcoding/" target="_blank">Lihat FB saya</a>

 

cara default, semua link html akan muncul seperti ini di smua browser :
  • Link yang belum dikunjungi akan terlihat berwarna biru dan bergaris bawah
  • Link yang sudah dikunjungi akan terlihat berwarna purple namun tetap bergaris bawah
  • Link memiliki attribute target (“_blank”,”_self”,”_top”,”_parent”)

Menyisipkan Gambar

Tag yang digunakan untuk menyisipkan image dalam HTML adalah img. selain src img memiliki attribut width dan height untuk mengatur lebar dan tinggi gambar, serta alt untuk memberikan keterangan pada gambar

<img src="gambar.jpg" alt="gambar anda" width="200px" height="auto" />

 

Demikian penjelasan singkat untuk dasar HTML, mudah-mudahan bermanfaat. Keep Learning ^_^
Semangat.

 

Photo by Jackson Sophat on Unsplash

Berikut ini, adalah raw materi “Dasar Pemrograman Web untuk Pemula” yang akan saya tulis didalam blog ini. semoga bermanfaat untuk rekan-rekan developer yang baru belajar.

Note : Penulisan artikel ini tidak terstruktur, saya buat dan sesuaikan dengan materi pengajaran yang akan saya berikan di kelas. jadi saya mohon maaf karena masih ada beberapa materi yang belum tersedia, Terima kasih. (materi yang sudah tersedia, ditandai dengan hyperlink bergaris bawah)

Pengenalan HTML

Persiapan Belajar

  • Pengenalan git
  • Dasar-dasar git
  • Penggunaan Sublime

Dasar HTML

Dasar HTML

CSS

  • Pengertian CSS
  • Inline CSS
  • Internal CSS
  • External CSS
  • Selector CSS dengan menggunakan ID, Clas, Tag
  • CSS Selector lanjutan
  • CSS Selector lanjutan bagian 2
  • Inline & Block Element
  • Perbedaan block dan inline pada elemen HTML
  • CSS Box Model
  • Studi Kasus
  • Table

  • Pengertian Baris dan Kolom
  • Penggabungan Cell
  • Penerapan CSS dalam Table
  • Studi Kasus
  • Form

  • – Pengertian Form
  • – Elemen-elemen Form
  • – Form Attribute
  • – Penerapan CSS dalam Form
  • – Studi Kasus pembuatan facebook registration page
  • Media

  • Audio/Video
  • Canvas
  • SVG
  • Studi Kasus
  • layouting

  • Pengenalan Layout dan Grid
  • HTML Table
  • CSS Float Property
  • Studi Kasus 1
  • CSS framework
  • CSS flexbox
  • Studi Kasus 2
  • CSS Responsive

  • Pengertian Responsive Webdesign
  • Viewport dan Grid View
  • Media Queries
  • Studi Kasus
  • Pembuatan template

  • Pengenalan Software Design
  • Design & Slicing
  • Menulis Kode HTML
  • Menulis Kode CSS
  • CSS Responsive
  • Publish to git page
  • CSS Trick

  • Dropdown Menu
  • Penggunaan Google Font
  • Membuat Background FullWidth
  • Image Sprite