Raw Materi “Dasar Pemrograman Web untuk Pemula”

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

• Pengertian HTML
• Struktur dasar HTML5
• Perkembangan HTML dari HTML4 hingga HTML5
• Browser modern dan cara kerjanya
• Code editor modern (VS Code, Sublime Text)
• Pengenalan Developer Tools pada browser

Persiapan Belajar

• Pengenalan Git & GitHub
• Dasar-dasar Git
• Instalasi Visual Studio Code
• Extension penting untuk web development
• Struktur folder project web
• Pengenalan terminal/command line

Dasar HTML

• Elemen/Tag HTML
• Attribute HTML
• Headings
• Paragraph
• Formatting text
• List
• Hyperlink
• Images
• Studi Kasus
• Semantic HTML
• Audio & Video HTML5

CSS

• Pengertian CSS
• Inline CSS
• Internal CSS
• External CSS
• Selector CSS (ID, Clas, Tag)
• CSS Selector lanjutan
• CSS Selector lanjutan bagian 2
• Inline & Block Element
• Perbedaan block dan inline pada elemen HTML
• CSS Box Model
• Position, Display, dan Z-index
• CSS Flexbox
• CSS Grid Layout
• Animasi sederhana dengan CSS
• Studi Kasus

Table

• Pengertian Baris dan Kolom
• Penggabungan Cell
• Styling Table dengan CSS
• Responsive Table
• Studi Kasus

Form

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

Media

• Audio/Video
• Canvas
• SVG
• Embed Google Maps & YouTube
• Studi Kasus

Layouting Modern

• Pengenalan Layout dan Grid System
• CSS Float Property
• Flexbox Layout
• CSS Grid
• Responsive Navbar
• CSS Framework (Bootstrap / Tailwind CSS)
• Studi Kasus Landing Page

Responsive Web Design

• Pengertian Responsive Web Design
• Viewport dan Grid View
• Media Queries
• Mobile First Design
• Optimasi tampilan mobile
• Studi Kasus Responsive Website

Pembuatan Template

• Pengenalan UI Design
• Design & Slicing
• Menulis struktur HTML
• Menulis CSS yang rapi dan scalable
• Responsive Layout
• Publish website ke GitHub Pages / Vercel / Netlify

JavaScript Dasar

• Pengertian JavaScript
• Variabel dan Tipe Data
• Function dan Event
• DOM Manipulation
• Fetch API dasar
• Studi Kasus interaktif sederhana

CSS & Web Tricks

• Dropdown Menu
• Google Fonts
• Background Full Width
• Image Sprite
• Dark Mode sederhana
• Smooth Scroll
• Hover Effect & Transition

 

Itulah raw materi yang dapat Mangcoding bagikan. Semoga materi ini dapat membantu teman-teman yang baru memulai belajar web development di era modern saat ini. Dunia web terus berkembang, jadi jangan takut untuk terus belajar dan mencoba teknologi baru.