Dalam kelas online ini kamu akan belajar dasar-dasar HTML dan CSS. HTML dan CSS merupakan pengetahuan umum yang harus dimiliki oleh setiap orang yang menggeluti bidang web programming. Dalam kelas ini, kamu akan belajar mulai dari bagaimana konsep dasar dan cara kerja dari HTML dan CSS serta bagaimana penggunaannya dalam membangun sebuah tampilan website.
Tujuan Umum dan Khusus Pelatihan
Silabus Topik 1: Pengenalan HTML dan CSS
Topik 2: Dasar HTML dan CSS
Topik 3: Membuat Layout Halaman Tanpa Table
Topik 4: Teknologi HTML dan CSS Terbaru
Jenis pekerjaan Kelas ditujukan bagi siapa saja yang ingin berkarir menjadi seorang programmer
Peralatan Belajar Siswa
Visual Studio Code đã hỗ trợ sẵn cho HTML, CSS và JavaScript
Một trong các tính năng của VSCode hấp dẫn các Web Developer đó là hỗ trợ các ngôn ngữ HTML, CSS và JS mặc định mà không cần phải cài thêm thứ gì. Các tính năng cơ bản có thể nói đến như là: Workspace, Xyntax Highlighting, Language Intellisense, Code Formatting, Emmet,…
Mặc dù Visual Studio Code đã hỗ trợ sẵn cho bộ ba ngôn ngữ trùm sò trong lập trình web. Thế nhưng chúng ta có thể tối ưu cách làm việc bằng cách sử dụng thêm một số extension và nắm thêm một số quy ước trong xây dựng project.
Thông tin về Workspace và cách tạo workspace trong VSCode. Mình hay mở workspace bằng cách chuột phải vào folder chứa project, sau đó nhấn chọn Open with Code
What is Workspace in VSCode
Hướng dẫn config cụ thể cho JavaScript trên trang chủ của VSCode: JavaScript in Visual Studio Code.
Cho thanh niên nào muốn try-hard JavaScript: JavaScript extensions in Visual Studio Code
Một số cú pháp Emmet cơ bản
Quy tắc chung khi sử dụng Emmet đó là: bạn chỉ cần gõ một đoạn emmet, sau đó nhấn Tab thì editor sẽ tự động sinh code HTML tương ứng. Bạn cũng đừng lo lắng về việc không nhớ rõ các cách viết tắt. Visual Studio sẽ gợi ý các cú pháp emmet cho bạn. Điều bạn cần chỉ là xài lâu ngày rồi quen tay thôi. Cú pháp chung để sử dụng Emmet: Emmet_Code + Tab
Trên đây là chỉ là một phần rất nhỏ của các củ pháp emmet. Những gì nó làm được còn hay ho hơn nữa. Trong phạm vi bài viết này mình chỉ giới thiệu đến đây. Nếu bạn thấy hứng thú với cú pháp emmet thì hãy nghiên cứu ở trang chủ Emmet hoặc Khóa học Emmet miễn phí trên Udemy
Các extension khác hỗ trợ lập trình web chuyên nghiệp hơn
Công nghệ lập trình web hiện nay đã phát triển rất nhiều. Do đó, chỉ với HTML, CSS, Javascript là không đủ. Một số công nghệ như ReactJS, AngularJS, Electron, Blazor, v.v… được tạo ra để đẩy nhanh giai đoạn phát triển web hoặc tạo ra các ứng dụng đa nền tảng một cách dễ dàng. Những website/ứng dụng được tạo ra về cơ bản sẽ chạy trên một trình duyệt (Chrome, Firefox hoặc Webview của hệ điều hành). Các bạn có thể tải thêm một số extension tương ứng với công nghệ đang làm việc để VSCode hỗ trợ tốt nhất.
Như vậy là chúng ta đã setup thành công Visual Studio Code để hỗ trợ cho lập trình web. Bạn có thắc mắc hay góp ý gì về bài viết? Hãy bình luận ngay phía bên dưới nhé!
Xem thêm bài viết: Tổng hợp những Plugins không thể thiếu cho VSCode
Tiện ích “IntelliSense for CSS class names in HTML”
Tiện ích này cung cấp tính năng gợi ý các class name của CSS cho các thuộc tính, thẻ HTML. Tiện ích này sẽ đọc các file CSS từ workspace (local) hoặc các phần CSS online trên mạng dựa vào phần tử link bạn định nghĩa trong file *.html.
Các tính năng của extension:
Thông tin khác và cài đặt extension: IntelliSense for CSS class names in HTML
Đừng mở file HTML, hãy làm quen với Workspace
Phần này quan trọng, anh em đừng bỏ qua. Đối với Visual Studio Code, workspare là nơi chứa các project với các thiết lập tương ứng. Khi lập trình web bằng VSCode, anh em vẫn có thể mở file HTML và edit. Nhưng sẽ không thể dùng các tính năng như gợi ý file, css, js; Cũng như tạo server ảo để test web như bên dưới bài viết này. Chi tiết anh em có thể đọc ở bày bài viết sau: Workspace VSCode. Còn đơn giản chỉ cần nhớ:
Hãy mở folder chứa code bằng VSCode.
Download Template HTML dan CSS Bootstrap
Dalam panduan cara membuat website dengan html ini kita akan menggunakan salah satu template dari Start Bootstrap. Tenang, template yang digunakan gratis dan mudah untuk dioptimalkan serta dirancang dengan sangat baik.
Yuk kita download terlebih dahulu templatenya.
Langkah 1: Buka website startbootstrap.com untuk mendapatkan template html dan css Start Bootstrap secara gratis dan bebas digunakan.
Langkah 2: Klik Browse Template & Themes.
Langkah 3: Pilih salah satu template sesuai kebutuhan Anda, dalam demo ini kami memilih template Creative karena gratis dan cukup simple jika dilihat dari tampilan yang ada.
Langkah 4: Kemudian klik Free Download dan simpan filenya di lokasi yang mudah ditemukan.
Langkah 5: Setelah selesai di download, buka file tersebut dan pindahkan isinya ke direktori utama akun hosting website Anda. Sebagai permulaan, Anda bisa menggunakan web hosting murah untuk percobaan menerapkan cara membuat website dengan html ini.
Langkah 6: Setelah selesai dipindahkan, buka file tersebut. Caranya klik dua kali di file Index.html dan nantinya akan terbuka di browser chrome yang Anda gunakan.
Selanjutnya kita lanjutkan ke pembahasan selanjutnya.
EMMET.IO – Cú pháp Emmet giúp code HTML siêu nhanh
Emmet (trước đây là Zen Coding) là một plugin cho các code editor như Sublime Text, Atom, Bracket,… Còn đối với Visual Studio Code, nó được tích hợp sẵn! Emmet là các quy tắc viết tắt giúp việc viết code HTML/CSS trở nên nhanh gọn hơn. Thay vì phải gõ từng
Đối với những bạn mới làm quen với lập trình web. Các bạn nên nắm vững và sử dụng thành thạo các web elements (document, head, body, div, span, a, …) rồi hãy nghĩ đến việc sử dụng Emmet. Cú pháp Emmet mang lại nhiều lợi ích, nhưng nó cũng dễ gây lú cho người mới làm quen.
CSS IntelliSense – Gợi ý code cho CSS
Có thể nói, những tính năng sẵn có của Visual Studio Code đã hỗ trợ gần như tận răng cho anh em lập trình web. Thế nhưng CSS lại không được hỗ trợ tính năng gợi ý code. Do vậy, khi làm việc với CSS thì không được tiện lợi cho lắm. Một file CSS thường có rất nhiều class/id. Chẳng ai có thể nhớ hết tên class/id trong đó được. Nhất là khi ta làm việc với bộ CSS Framework lớn như Bootstrap thì thôi nhé, không có gợi ý code thì ngồi nhớ class đến sang năm luôn đi ạ.
Live Server – Test trang web nhanh-gọn-lẹ
Live Server là một tiện ích giúp biến máy tính của bạn thành một máy chủ web đơn giản. Bạn có thể xem kết quả hoặc test trang web của mình ngay trên trình duyệt hoặc từ một thiết bị khác cùng kết nối chung mạng LAN, ví dụ như smartphone. Điểm đặc biệt của ứng dụng này là trang web trên trình duyệt sẽ tự động tải lại khi bạn lưu file *.html.
Một số điều cần biết khi sử dụng Live Server:
Toàn bộ thông tin và cài đặt Live Server:
Vì thời lượng bài viết có hạn nên Hiếu Đá chỉ giới thiệu sơ qua tiện ích này. Mình sẽ viết riêng một bài đầy đủ hướng dẫn dùng Live Server vào dịp khác.
