Lập trình CSS và SASS nâng cao với dự án website Landing Page

Giới thiệu khóa học

Qua khóa FRONT END CƠ BẢN , Kteam đã hướng dẫn các bạn đã có được những kiến thức cơ bản về  HTML và CSS.

Trong combo Front End 2019, chúng ta sẽ cùng nhau tìm hiểu và áp dụng những kiến thức chuyên sâu về CSS. Do kiến thức về CSS trong khóa học khá lớn và chi tiết nên Kteam đã chia làm 2 phần.

• Phần 1: CSS và SASS Nâng Cao
• Phần 2: Flexbox và CSS grid layouts

Ở khóa học này chúng ta sẽ cũng nhau tìm hiểu tổng quát về phần 1: CSS và SASS Nâng Cao với dự án Website Landing Page.

Tham gia đóng góp khóa học cộng đồng

Nếu bạn muốn gửi đến cộng đồng những khóa học do chính bạn/ team của bạn thực hiện. Đừng ngần ngại liên hệ với Kteam để được hỗ trợ nhé!

---

Giới thiệu về project sẽ thực hiện

Bạn và Kteam đã cùng làm quen với website Seltaught 2018 ở khóa Lập trình FRONT END CƠ BẢN có cấu trúc khá đơn giản. Trong khóa này, chúng ta sẽ cùng xây dựng website Landing page Selftaught 2019 với các hiệu ứng thú vị và trông hấp dẫn hơn nhé

Cùng xem qua một số hình ảnh của project Landing Page mà chúng ta sẽ cùng nhau xây dựng trong khóa học này.  Bạn cũng có thể truy cập vào đường link bên dưới để trải nghiệm bản PRIEVIEW của website landing page Selftaught 2019 mà chúng ta sẽ cùng thực hiện nhé! 

LANDING PAGE WEBSITE SELFTAUGHT 2019

• Screen:

• Responsive design

  

---

Đối tượng tham gia

Khóa học này không dành cho các bạn bắt đầu làm quen với HTML và CSS, vậy nếu bạn mới làm quen với CSS thì hãy tham khảo khóa FRONTEND CƠ BẢN của Kteam trước nhé!

Thời lượng mỗi video từ 3 – 30 phút nhằm chia nhỏ quá trình thực hiện, giúp bạn dễ tiếp thu và ứng dụng source code hỗ trợ từ thư viện Howkteam.com

---

Kiến thức truyền tải

Trong khóa này các bạn sẽ được hướng dẫn:

• Cách hoạt động của CSS
• Các features mới của CSS áp dụng cho modern browser (các thế hệ browser cũ không hỗ trợ) ví dụ: clip-path, perspective, background-clip, …
• Hướng dẫn Sass
• Hướng dẫn cài đặt Node, giới thiệu về NPM, xây dựng môi trường để sử dụng Sass cấu trúc và thiết kế file CSS
• Sử dụng BEM để đặt tên class, cấu trúc component để thiết kế website
• Tự thiết kế grid system
• Các nguyên tắc thiết kế responsive
• Sử dụng sass tạo web responsive
• Test browser supports

Và còn rất nhiều thứ bạn có thể học được thông qua phần 1 của khóa học này.

Sau khi kết thúc phần 1:

•  Bạn sẽ nắm được hoàn toàn workflow tạo 1 website với thiết kế có sẵn
•  Mở rộng kiến thức về CSS với những kĩ thuật hết sức mới mẻ.
•  Tự tin áp dụng kiến thức học được vào các project thực tế.

---

Phần mềm sử dụng

Trước khi tham gia khóa học hãy đảm bảo bạn đã cài đặt các công cụ sau, để tránh làm gián đoạn quá trình học của bạn.

Visual Studio Code

Là 1 editor khá mạnh và được nhiều người sử dụng trong thời gian gần đây. Download rất đơn giản bằng cách lên trang chủ của nó Visual Studio Code để tài về tùy theo hệ điều hành của bạn

Lưu ý: Bạn hoàn toàn có thể sử dụng 1 editor khác như sublime text, atom, …

Việc cài đặt Visual code tương đối đơn giản, bạn có thể tham khảo qua bài bên dưới:

• CÀI ĐẶT VISUAL STUDIO CODE

 

Nodejs và NPM

Nodejs là (nói đơn giản) nền tảng giúp bạn chạy server sử dụng javascript cùng với đó là NPM là công cụ quản lí các thư viện của nodejs. Ở trong khóa học này chúng ta không đào sâu tìm hiểu về Nodejs và NPM, chúng sẽ hỗ trợ chúng ta COMPILE SASS THÀNH CSS .

Các bạn cài đặt Nodejs bằng cách vào trang chủ NodeJs và tải về phiên bản phù hợp với hệ điều hành của bạn, npm sẽ tự động cài đặt cùng với Nodejs.

 

---

Chú thích

Khóa học này được xây dựng dựa vào 1 khóa học trên Udemy. Các bạn hoàn toàn có thể vào đấy để tham khảo nhé ( tất nhiên là cần biết Tiếng Anh rồi :D)

ADVANCED CSS AND SASS COURSE

Khóa học này được công chiếu vào 19h00 mỗi thứ 4 và thứ 7 hàng tuần trên kênh youtube của Kteam, hãy đón xem khóa học và tham gia thảo luận cùng cộng đồng các vấn đề liên quan, nhớ like / share / subscribe để ủng hộ Kteam nhé!

CÔNG CHIẾU KHÓA HỌC CSS VÀ SASS NÂNG CAO TRÊN KÊNH YOUTUBE CỦA KTEAM

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

Cảm ơn các bạn đã luôn đồng hành cùng Kteam. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên "Luyện tập – Thử Thách – Không ngại khó"