Dự án Web phản hồi thực tế với SCSS(SASS)+FLEX và Figma
Sử dụng hoàn hảo SCSS(SASS) và FLEX Layout vào thực tế! Đây là quy trình xây dựng dự án website phản hồi (responsive) có hệ thống, từ việc thiết kế UI cho trang chủ và các trang con cốt lõi của toàn bộ website bằng Figma, đến việc tạo cấu trúc HTML wireframe với tên class nhất quán và hoàn thiện việc xuất bản (publishing). Trong suốt khóa học kéo dài hơn 41 giờ, bạn sẽ được học kỹ lưỡng các lý thuyết cốt lõi và khả năng ứng dụng thực tiễn, đồng thời thiết kế và xây dựng bố cục phản hồi tương thích với PC - Mobile - Tablet. Qua đó, bạn không chỉ tích lũy được kinh nghiệm và bí quyết về các dự án web phản hồi mà còn nâng cao đáng kể lý thuyết cốt lõi cũng như kỹ năng ứng dụng thực tế của jQuery.
Đây là lần đầu tiên tôi phát triển front web nên rất lo lắng.
Học phí hơi khác so với các khóa học khác.
Tôi hơi lo lắng (hahaha)
Sự lựa chọn của tôi hóa ra là một ơn trời.
(Bạn thực sự giỏi giảng bài!!)
Tôi không có bất kỳ kinh nghiệm phát triển web nào.
Tôi nghĩ rằng chương trình chính đã phát triển nên được phục vụ trên web/di động.
Tôi cảm thấy cần phải chuẩn bị và học tập trước nên đã đăng ký tham gia lớp học và nghỉ phép khoảng một tuần.
Tôi lấy nó ra và lái nó. Vào ngày thứ 4, anh ấy bắt đầu nôn ói.
Dù sao thì vào ngày thứ 5, tôi đã học xong hết bài giảng.
Tôi đã thực hiện một số thử nghiệm với trang ASP.Net Core 7 Razor.
(Từ trang Udemy: Ứng dụng web ASP.NET Core
Sau khi nghe bài giảng về Trang sử dụng dao cạo trị giá 15.000 won~ haha)
Các kết quả kiểm tra được liên kết tốt với DB và thể hiện tốt.
Tôi rất hạnh phúc và trải nghiệm một thế giới mới.
Trước đây, nó bắt đầu với COBOL và Fortran, và bây giờ là C#, VB.NET và một số thứ khác.
Với công nghệ cũ(?) đã phát triển ứng dụng máy tính để bàn bằng cách sử dụng các công cụ phát triển,
Liệu tôi có thể thích ứng với môi trường phát triển phù hợp với xu hướng hiện tại không? Tôi nghĩ...
Lời giải thích chi tiết rất dễ hiểu.
Nhờ có bạn, nó đã cho tôi sức mạnh to lớn và cho tôi lòng can đảm.
SCSS / Figma (thanh toán trả phí) / JQuery / HTML
Lên cấp chỉ với 4 món trên và các bài giảng ví dụ mẫu!!
Tôi đã sử dụng Photoshop được gần 20 năm và nhờ đó,
Tôi không nghĩ tôi sẽ sử dụng nó. cười
Các chi đều dài.
Đây là lần đầu tiên tôi học xong một bài giảng dài 100%... haha
Cảm ơn những bài giảng tuyệt vời của thầy.
Tôi sẽ cầu nguyện cho bạn luôn được khỏe mạnh.
5.0
pcdoomco4
83% đã tham gia
Một trong những người hướng dẫn tại Infron được coi là tiết kiệm chi phí nhất là Coding Works. Khóa học mới ra mắt gần đây hơi đắt vì là công nghệ mới nhất, nhưng nhìn vào nội dung hiện có, tôi rất ấn tượng với khối lượng khổng lồ với mức học phí rất thấp nên đã tìm hiểu về Coding Works và tham gia khóa học. Ngay cả khi bạn vào học viện ngoại tuyến, cũng khó có thể tìm được một lớp học có mật độ dày đặc như vậy. Nếu nhìn vào toàn bộ cấu trúc bài giảng thì thời gian giảng lên tới hơn 40 giờ nên nội dung lại rất chi tiết. Ngoài ra, bằng cách hợp nhất các công nghệ cấp trung đến nâng cao mới nhất của WebPubble, bạn có thể đạt được kết quả bao gồm các công nghệ tiên tiến thực tế thông qua các lớp học thực hành, thực hành. Trên hết, tôi rất ấn tượng bởi cách người hướng dẫn trả lời nhanh chóng. Tôi đã có câu hỏi vào Chủ nhật, vì vậy tôi đã để lại hai câu hỏi liên quan đến việc tham gia khóa học và họ đã trả lời ngay ngày hôm đó với số lượng lớn, thực hành chuyên sâu về công nghệ mới nhất, phản hồi nhanh chóng. từ người hướng dẫn, v.v. Tôi rất thích khóa học này. Không có lý do gì để không giới thiệu nó. Tôi thành thật nghĩ rằng các nhà phát triển front-end đã có các kỹ năng webpub cơ bản trước React View. Ngày nay, ranh giới giữa các ngành đang sụp đổ và việc thực hiện đa tác vụ là bắt buộc. , nên cần người biết làm mọi việc. Nếu bạn muốn có được một vị trí được trả lương cao, bạn cần có khả năng tạo ra những gì bạn có trong đầu ít nhất bằng việc triển khai trên màn hình. Tôi cũng khuyên bạn nên tự mình học khóa học này, ngay cả khi bạn đang có. đang nghiên cứu React hoặc View. Tôi chưa phải là người bướng bỉnh nhưng những lời giải thích rất tử tế và hay nên học rất thú vị ^^ Khối lượng lớn có nghĩa là người hướng dẫn có kinh nghiệm giảng dạy sâu sắc Ngay cả khi một người hướng dẫn có kinh nghiệm nông cạn dạy một lượng lớn thời gian giảng dạy, đó là điều đó. không thể được. Tôi đã trăm tuổi. Mặc dù tôi đang học VÀ, tôi chọn khóa học này với mục đích nâng cao kỹ năng của mình lên trình độ chuyên gia cũng như thực hiện màn hình.
5.0
문유연
17% đã tham gia
Lớp học tuyệt vời nhất.....!
Tôi đã từng học qua rất nhiều bài giảng rồi, nhưng có lẽ chưa thấy ai hướng dẫn chi tiết mà lại dễ hiểu như thầy/cô cả. Nhờ vậy mà tôi đã học hỏi được thực sự rất nhiều điều.
Tôi thực sự đề xuất khóa học này cho những ai còn đang phân vân không biết có nên học hay không. Ngay cả khi bạn không có nền tảng cơ bản, thầy/cô cũng sẽ giải thích rất dễ hiểu và chi tiết, nên tôi tin rằng bạn sẽ tuyệt đối không hối hận đâu.
Bạn sẽ nhận được điều này sau khi học.
Quy trình sản xuất dự án trang web đáp ứng (responsive) một cách hệ thống
Lý thuyết cốt lõi và kỹ năng ứng dụng thực tế SCSS(SASS)
Lý thuyết cốt lõi và kỹ năng ứng dụng thực tế của FLEX Layout
Thiết kế và xây dựng bố cục phản hồi tương thích với PC, điện thoại di động và máy tính bảng
Lý thuyết cốt lõi và kỹ năng ứng dụng thực tế jQuery để xây dựng dự án web responsive
Kỹ năng thiết kế UI website bằng Figma
Khả năng thiết kế cấu trúc wireframe HTML và hệ thống class name một cách bài bản.
Tạo danh mục sản phẩm (portfolio) web đáp ứng tốt nhất dành cho người thiết kế web (web publisher) và nhà phát triển.
Nếu bạn đang tìm kiếm một bộ hồ sơ năng lực (portfolio) ấn tượng dành cho Web Publisher và nhà phát triển? Dự án trang web khóa học trực tuyến phản hồi nhanh với SCSS(SASS)+FLEX!
"Hoàn thiện khả năng xây dựng dự án website phản hồi hệ thống với khóa học Dự án Web phản hồi thực chiến SCSS(SASS)+FLEX cùng Figma " "Lượng kiến thức đồ sộ hơn 41 giờ học"
Vì đây là công việc xuất bản SCSS(SASS) hơi lạ lẫm nên người mới bắt đầu có thể thấy hơi quá sức, nhưng người ở trình độ sơ cấp nếu theo dõi kỹ từng phần theo thứ tự thì hoàn toàn có thể hoàn thành được.
Sử dụng hoàn hảo SCSS(SASS) và FLEX vào thực tế!
Point 1. Thiết kế UI website SCSS(SASS)+FLEX bằng Figma Point 2. Sản xuất chi tiết tất cả các trang HTML Wireframe cho website SCSS(SASS)+FLEX Point 3. Xây dựng và xuất bản đa dạng nhiều trang web sử dụng SCSS(SASS)+FLEX Point 4. Thiết kế, sản xuất bố cục đáp ứng (Responsive) cho PC, di động, máy tính bảng và hoàn thiện công việc xuất bản một cách hoàn hảo Point 5. Lý thuyết cốt lõi về jQuery và khả năng ứng dụng thực tế để xây dựng các dự án web đáp ứng
Khóa học này chứa đựng những bí quyết thiết kế web trung và cao cấp mà Coding Works đã giảng dạy tại nhiều học viện offline và trong các khóa học tạo trang web portfolio cá nhân từ trước đến nay. Đặc biệt, vì đây là dự án thiết kế web phản hồi được xây dựng dựa trên SCSS(SASS)+FLEX, bạn có thể nâng cao tối đa khả năng sử dụng SCSS(SASS)+FLEX của mình. Tôi chắc chắn rằng sau khi hoàn thành khóa học, bạn sẽ sở hữu kỹ năng thiết kế web phản hồi trình độ trung và cao cấp được cải thiện rõ rệt!
Cập nhật video lý thuyết cốt lõi về SCSS (5 giờ 9 phút)
Để hỗ trợ việc thực hiện dự án web responsive thực tế bằng SCSS(SASS)+FLEX một cách suôn sẻ, tôi đã cập nhật phần Lý thuyết cốt lõi (Essential Theory) của SCSS. Video Lý thuyết cốt lõi (Essential Theory) của SCSS bao gồm hầu hết tất cả các lý thuyết về SCSS trong suốt 5 giờ 9 phút, vì vậy bạn có thể tìm hiểu sâu và đầy đủ về các lý thuyết trọng tâm của SCSS.
Từ Phần 5, bạn không nhất thiết phải học hết toàn bộ các video đã được thêm vào cho công việc xuất bản (publishing). Các video lý thuyết thiết yếu cho công việc xuất bản từ Phần 5 trở đi bao gồm những nội dung sau đây, vì vậy chỉ cần học những phần này là bạn có thể thực hiện công việc xuất bản mà không gặp bất kỳ trở ngại nào.
1. Lý thuyết cốt lõi về SCSS (01) - Lồng các bộ chọn (Nesting)
2. Lý thuyết cốt lõi SCSS (02) - Tham chiếu bộ chọn cha (&) và xử lý chú thích
3. Lý thuyết cốt lõi SCSS (03) - Ứng dụng tham chiếu chọn cha (&)
4. Lý thuyết cốt lõi SCSS(04) – Tạo các bộ chọn CSS tiêu biểu trong SCSS
5. Lý thuyết cốt lõi SCSS(05) - Tham chiếu chọn cha (&) Lớp giả (Pseudo-class)
6. Lý thuyết cốt lõi SCSS(06) - Tham chiếu chọn cha(&) Bộ chọn thuộc tính
7. Lý thuyết cốt lõi SCSS(07) - Thoát khỏi lồng ghép bộ chọn cha @at-root
10. Lý thuyết cốt lõi SCSS (10-1) - Biến (Variables) 01
11. Lý thuyết cốt lõi SCSS (10-2) - Biến (Variables) 02
13. Lý thuyết cốt lõi SCSS (11-1) - Nhập tệp bên ngoài @import
※ Các video còn lại bạn có thể xem sau khi có nhu cầu học sâu hơn về SCSS trong tương lai.
▼ Nội dung các phần được thêm vào và toàn bộ video lý thuyết (06.07.2023)
Phần 4. Lý thuyết cốt lõi về SCSS (Essential Theory)
Lý thuyết cốt lõi SCSS(01) - Lồng chọn (Nesting)
Lý thuyết cốt lõi SCSS(02) - Tham chiếu chọn lọc cha (&) và Xử lý chú thích
Lý thuyết cốt lõi SCSS(03) - Ứng dụng tham chiếu chọn phần tử cha (&)
Lý thuyết cốt lõi SCSS(04) – Tạo các bộ chọn CSS tiêu biểu trong SCSS
Lý thuyết cốt lõi SCSS(05) - Tham chiếu chọn cha(&) Lớp giả (pseudo-class)
Lý thuyết cốt lõi SCSS(06) - Tham chiếu bộ chọn cha(&) Bộ chọn thuộc tính
Lý thuyết cốt lõi SCSS(07) - Thoát khỏi lồng nhóm bộ chọn cha @at-root
Lý thuyết cốt lõi SCSS(08) – Tự động tạo thuộc tính CSS bằng cách sử dụng tiền tố (prefix)
Lý thuyết cốt lõi SCSS(09) – Giảm bớt sự trùng lặp bộ chọn với giả lớp :is
Lý thuyết cốt lõi SCSS (10-1) - Biến (Variables) 01
Lý thuyết cốt lõi SCSS(10-2) - Biến (Variables) 02
Lý thuyết cốt lõi SCSS(10-3) - Phạm vi của biến (Variables) và khai báo biến CSS
Lý thuyết cốt lõi SCSS(11-1) - Nhập tệp bên ngoài @import
Lý thuyết cốt lõi SCSS (11-2) - Gọi các tệp đã được phân tách (Partial) bằng @import
Lý thuyết cốt lõi SCSS(12) - Toán tử (Operations), Xóa cửa sổ đầu ra
Lý thuyết cốt lõi SCSS(13-1) - Khai báo nhóm @mixin, sử dụng nhóm @include
Lý thuyết cốt lõi SCSS (13-2) - Ứng dụng @mixin và @include
Lý thuyết cốt lõi SCSS (13-3) - Thiết kế nút bấm sử dụng @mixin và @include
Lý thuyết cốt lõi SCSS (13-4) - Sử dụng tham số (đối số) của @mixin bằng @include
Lý thuyết cốt lõi SCSS(14) - @extend để kế thừa các thuộc tính của bộ chọn
Lý thuyết cốt lõi SCSS(15) - Bộ chọn Placeholder % sử dụng cùng với @extend
Lý thuyết cốt lõi SCSS(16) - Khai báo đa biến, hàm nội bộ (map-get)
Sự kiện đánh giá khóa học nhân dịp ra mắt😋
Chúng tôi sẽ cung cấp tài liệu PDF lý thuyết cốt lõi SCSS(SASS)+FLEX và các tệp ví dụ thực hành dành riêng cho những bạn viết đánh giá cho bài giảng này. Tài liệu PDF và các tệp được cung cấp sẽ là nguồn tham khảo hữu ích cho việc thực hiện dự án <SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma> cũng như cho công việc thực tế của bạn sau này.
Đánh giá khóa học nên là những cảm nhận thành thật của học viên sau khi xem bài giảng. Sau khi viết đánh giá, bạn hãy chụp màn hình lại và gửi vào email dưới đây, chúng tôi sẽ gửi [File lý thuyết cốt lõi và ví dụ vận dụng SCSS(SASS)+FLEX] qua email cho bạn.
Sự kiện đánh giá khóa học diễn ra trong thời gian có hạn, kéo dài 4 tuần trong giai đoạn giảm giá mở bán khóa học. ※ Chúng tôi đã quyết định tổ chức sự kiện đánh giá khóa học không giới hạn thời gian, vì vậy bạn có thể viết đánh giá bất cứ lúc nào.
■ Thời gian: 4 tuần (01/07/2023 ~ 28/07/2023) ■ Đối tượng: Tất cả những người viết đánh giá cho khóa học này ■ Email: webnlife@naver.com
🚩Tệp cung cấp
- Giáo trình lý thuyết cốt lõi SCSS(SASS) (PDF, 67 trang) và ví dụ ứng dụng bản hoàn thiện - Giáo trình lý thuyết cốt lõi FLEX (PDF, 36 trang) và ví dụ ứng dụng bản hoàn thiện
※ Các ví dụ sử dụng bản hoàn thiện là bản hoàn thiện bao gồm tất cả các ví dụ có trong giáo trình tương ứng. ※ Xem giới thiệu chi tiết về giáo trình lý thuyết cốt lõi SCSS(SASS)+FLEX và các tệp cung cấp: https://inf.run/qzdx ※ Không bao gồm giáo trình lý thuyết cốt lõi GRID và các ví dụ sử dụng. ※ Các tệp cung cấp sẽ được gửi trong vòng 24 giờ sau khi bạn gửi email xác nhận đã viết đánh giá khóa học.
Kỹ năng sử dụng SCSS(SASS) là ưu thế và cũng là yêu cầu bắt buộc 👍
Dù là trước đây hay hiện tại, đối với các công ty có quy mô, khi xem thông báo tuyển dụng Web Publisher và Frontend Developer, khả năng sử dụng SCSS(SASS) luôn được coi là 'ưu tiên'. Ưu tiên có nghĩa là không phải là yêu cầu bắt buộc, nhưng nếu bạn biết cách sử dụng thì sẽ được đánh giá cao hơn. Nói cách khác, điều này cũng có nghĩa là bạn sẽ có khả năng cạnh tranh cao hơn so với các ứng viên khác.
🔥 Với tư cách là một người làm nghề Web Publisher hoặc lập trình viên, khi nộp hồ sơ và phỏng vấn, chỉ nói suông rằng mình có khả năng sử dụng SCSS(SASS) là chưa đủ. Có rất nhiều ứng viên thực tế chỉ mới nghe qua hoặc làm thử SCSS(SASS) một chút nhưng khi phỏng vấn lại nói rằng mình biết làm. Mọi người thường không tin vào khả năng publishing hay khả năng lập trình chỉ qua lời nói. Tuy nhiên, nếu bạn thực sự cho họ thấy một dự án web responsive được tạo ra bằng SCSS(SASS), đó sẽ là cách tốt nhất để chứng minh năng lực sử dụng SCSS(SASS) của bạn, và đương nhiên bạn sẽ được ưu tiên hơn trong việc tuyển dụng.
Chỉ mới năm ngoái, hầu hết các tin tuyển dụng vẫn liệt kê khả năng sử dụng SCSS(SASS) như một điểm cộng ưu tiên đối với các Web Publisher. Đối với các nhà phát triển (Developer), trường hợp yêu cầu kỹ năng SCSS(SASS) không nhiều như vậy. Tuy nhiên, gần đây sau khi hoàn tất chuẩn bị mở khóa học và xem lại các tin tuyển dụng, tôi thường xuyên thấy khả năng sử dụng SCSS(SASS) được đưa vào yêu cầu bắt buộc đối với Web Publisher, hoặc là điểm cộng ưu tiên/yêu cầu bắt buộc đối với cả nhà phát triển. Đặc biệt, có khá nhiều nơi yêu cầu Web Publisher phải có thêm kỹ năng sử dụng Figma.
▼ Nội dung thông báo tuyển dụng thực tế gần đây cho vị trí Web Publisher, Web Developer được tìm kiếm trên JobKorea
Hãy tự tay tạo ra một trang web bài giảng giả định và nâng cao kỹ năng của bạn một cách chắc chắn.
💡Thông qua bài giảng [Dự án Web thực tế phản hồi với SCSS(SASS)+FLEX cùng Figma] , bạn có thể nâng cao kỹ năng lý thuyết cốt lõi và khả năng ứng dụng thực tế của SCSS(SASS), lý thuyết cốt lõi và khả năng ứng dụng thực tế của FLEX Layout, cũng như kỹ năng thiết kế và sản xuất bố cục phản hồi tương thích với PC, di động và máy tính bảng lên mức trung thượng cấp.
Coding Works sẽ thực hiện dự án xây dựng một trang web bài giảng trực tuyến giả định có tên là 'Beyond Insight' . Bạn có thể coi nó tương tự như Inflearn hoặc Class101. Đây là một dự án xây dựng trang web phản hồi (responsive) nhằm nâng cao kỹ năng từ trung cấp đến cao cấp, trong đó bạn sẽ lập trình nhiều trang và bố cục khác nhau từ trang chủ đến các trang phụ theo khái niệm dự án bằng SCSS (SASS), và tất cả các bố cục đều được xây dựng bằng FLEX Layout.
Quy trình sản xuất dự án website phản hồi hệ thống
Lý thuyết cốt lõi và khả năng ứng dụng thực tế của SCSS(SASS)
Lý thuyết cốt lõi về FLEX Layout và khả năng ứng dụng thực tế
Thiết kế và xây dựng bố cục đáp ứng (responsive layout) tương thích với PC, điện thoại di động và máy tính bảng
Lý thuyết cốt lõi và khả năng ứng dụng thực tế jQuery để sản xuất dự án web responsive
Khả năng thiết kế UI website bằng Figma (피그마)
Khả năng thiết kế cấu trúc HTML wireframe và đặt tên class một cách hệ thống
Học tập hoàn hảo các tương tác jQuery thiết yếu, cực kỳ cần thiết trong thực tế!
Cung cấp tất cả tài liệu chế tác (File thiết kế Figma, file mã nguồn publishing, tài liệu bài giảng PDF, bản hoàn thiện publishing)
Chỉ riêng việc có thể sử dụng SCSS(SASS) đã giúp bạn có lợi thế cạnh tranh tốt khi tìm việc hoặc chuyển việc trong lĩnh vực publisher. Tuy nhiên, tôi chắc chắn rằng nếu bạn sử dụng SCSS(SASS) để tạo ra một dự án website phản hồi tuyệt vời, thì năng lực và thành quả đó sẽ mang lại cho bạn lợi thế cạnh tranh lớn hơn bất kỳ ai khác. Tất nhiên, vì nội dung và khối lượng bài học gần đạt mức trung cao cấp nên sẽ không hề dễ dàng, nhưng nếu bạn theo sát lộ trình, tôi tin rằng bạn sẽ đạt được thành quả lớn hơn bất kỳ bài giảng nào khác của Coding Works.
Dự án web thích ứng được thực hiện trong khóa học này không chỉ đơn thuần là tạo ra trang chủ. Tổng cộng có 5 trang quan trọng nhất của toàn bộ website bao gồm: Trang Front, Trang giới thiệu khóa học, Trang danh mục chính, Trang đăng ký khóa học/Giỏ hàng và Trang đăng ký thành viên. Đây là khóa học tiến hành công việc xuất bản web thích ứng (responsive publishing), thay đổi bố cục cho tất cả các trang theo giao diện PC, Mobile và Tablet. Ngoài ra, bạn sẽ được học nhiều tương tác jQuery khác nhau và thực hiện nhiều loại modal đa dạng.
Thứ tự học tập của khóa học dự án web thích ứng 🙆♀️
Bước 01. Thiết kế UI layout PC cho website responsive trên Figma
Bước 02. Thiết kế cấu trúc HTML wireframe cùng với tên class trong Figma
Bước 03. Lập trình HTML bằng trình soạn thảo văn bản
Thứ tự 04. Lập trình SASS(SCSS) bằng trình soạn thảo văn bản cùng với các tác vụ tương tác jQuery
Bước 05. Publishing thay đổi bố cục PC sang bố cục di động (Mobile)
Bước 06. Publishing thay đổi bố cục PC sang bố cục máy tính bảng (Tablet)
Thứ tự 07. Công việc hoàn thiện cuối cùng cho việc xuất bản chi tiết tất cả các trang web
1) Thiết kế UI dự án web phản hồi thực tế SCSS(SASS)+FLEX bằng Figma
2) Thiết kế cấu trúc HTML wireframe cho dự án web phản hồi thực tế SCSS(SASS)+FLEX bằng Figma
3) Lập trình HTML bằng trình soạn thảo văn bản dựa trên cấu trúc wireframe HTML
4) Lập trình SCSS(SASS) bằng trình soạn thảo văn bản dựa trên cấu trúc wireframe HTML
5) Thực hiện thay đổi sang bố cục web phản hồi tương thích với di động
6) Công việc thay đổi sang bố cục web đáp ứng tương thích với máy tính bảng
7) Công việc tương tác jQuery cho tất cả các trang web và công việc hoàn thiện xuất bản chi tiết cuối cùng
▼ Công việc hoàn thiện chi tiết trên nhiều loại mô hình thiết bị thực tế
Xem trước bản hoàn thiện publishing & Định nghĩa tính năng 🙆♀️
Các trang web được tạo trong khóa học này bao gồm trang chủ, trang giới thiệu khóa học, trang chính của danh mục, trang giỏ hàng đăng ký khóa học và trang đăng ký thành viên. Đây là khóa học mà tất cả các trang đều được thực hiện xuất bản phản hồi (responsive publishing) để thay đổi theo bố cục PC, Mobile và Tablet. Ngoài ra, chúng ta cũng sẽ cùng nhau tạo ra nhiều loại modal đa dạng.
Nếu bạn xem video [Xem trước bản hoàn thiện & Định nghĩa tính năng] ở phần bên dưới, bạn sẽ thấy phần giải thích chi tiết về định nghĩa các tính năng xuất bản (publishing) và những gì sẽ được tạo ra trong khóa học này. Ngoài ra, bạn có thể xem mục lục nội dung bài học dưới dạng hình ảnh trong [Toàn bộ chương trình học].
▼ Dự án Web thực tế Responsive SCSS(SASS)+FLEX: Trang chủ (Front Page)
🚩 Trang chủ (Front Page)
Thiết kế UI bằng Figma và xây dựng cấu trúc wireframe HTML
Hoàn thiện toàn bộ quy trình xuất bản web với SCSS(SASS) và bố cục FLEX
Trang đầu tiên của trang web, thể hiện bản sắc của trang web đó cho người dùng.
Cách quản lý cấu trúc HTML phức tạp và tạo cấu trúc phân cấp được sắp xếp hợp lý (Clean Coding)
Phân chia điều kiện if cho script vận hành điều hướng (navigation) trên bố cục PC & Tablet và điều hướng trên Mobile
Sử dụng script để cố định Header ở phía trên khi cuộn chuột đến một giá trị nhất định
Hiển thị modal đăng ký mentor và sự kiện trên trang front
Tạo slider chính và slider mục bài giảng bằng Slick Slider
Thực hiện tạo component cho Header & Footer, những phần xuất hiện chung trên tất cả các trang, bằng jQuery
Sử dụng plugin đồng hồ đếm ngược
Chuyển đổi điều hướng của Footer thành dạng menu thả xuống (accordion) khi ở bố cục di động
Thêm biểu tượng phông chữ vào phần tử biểu mẫu tìm kiếm và sử dụng :focus ::placeholder
Sử dụng Unicode của font icon với giả lớp :before :after
Cách sử dụng hình ảnh SVG
Cách sử dụng thực tế của thuộc tính CSS Object-fit
Các phương thức tương tác jQuery thiết yếu (kiểm soát class, chọn phần tử, trình xử lý sự kiện, v.v.)
Cách sử dụng JavaScript inline thiết yếu
Cách tái sử dụng UI thẻ mục bài giảng dưới nhiều hình thức khác nhau (@at-root)
Cách sử dụng và phương pháp ứng dụng biểu tượng phông chữ (Bootstrap Icons)
Thay đổi bố cục phản hồi theo từng điểm ngắt (breakpoint) của Media Query (tối thiểu 1024, 768~1024, tối đa 767)
▼ Dự án Web phản hồi thực tế SCSS(SASS)+FLEX: Trang giới thiệu khóa học (Chi tiết lớp học)
🚩 Trang giới thiệu khóa học (Chi tiết lớp học)
Thiết kế UI bằng Figma và xây dựng cấu trúc Wireframe HTML
Hoàn thiện toàn bộ quy trình xuất bản web với SCSS(SASS) và bố cục FLEX
Trang giới thiệu khóa học, là trang có nhiều nội dung nhất nên cũng có nhiều sản phẩm publishing nhất.
Cố định thanh bên phải giới thiệu khóa học sau khi cuộn đến một khoảng nhất định
Cố định điều hướng phụ (sub-navigation) của nội dung chi tiết bài giảng sau khi cuộn đến một khoảng nhất định
Hiển thị modal chia sẻ sau khi nhấp vào nút chia sẻ ở thanh bên (sidebar)
Giới thiệu chương trình học jQuery Accordion
Câu hỏi thường gặp jQuery Accordion
Thiết kế CSS thanh biểu đồ số lượng sao đánh giá khóa học
Hàm màu tích hợp (built-in function)
Thay đổi bố cục phản hồi theo từng điểm ngắt (breakpoint) của Media Query (Tối thiểu 1024, 768~1024, Tối đa 767)
▼ Dự án Web Responsive thực tế với SCSS(SASS)+FLEX: Trang chủ danh mục (Category Main)
🚩 Trang chính danh mục (Category Main)
Thiết kế UI bằng Figma và xây dựng cấu trúc Wireframe HTML
Hoàn thiện toàn bộ quy trình xuất bản (publishing) với bố cục SCSS(SASS) và FLEX
Danh sách bài giảng lớp học Slick Slider
Thiết kế CSS cho phân trang
Thay đổi bố cục phản hồi theo từng điểm ngắt media query (tối thiểu 1024, 768~1024, tối đa 767)
▼ Dự án Web Responsive thực tế SCSS(SASS)+FLEX: Đăng ký khóa học Giỏ hàng (Take Course)
🚩 Giỏ hàng đăng ký khóa học (Take Course)
Thiết kế UI bằng Figma và xây dựng cấu trúc HTML Wireframe
Hoàn thiện toàn bộ quy trình xuất bản (publishing) bằng SCSS(SASS) và bố cục FLEX
Xóa từng mục và xóa tất cả trong giỏ hàng khóa học bằng cách sử dụng jQuery
Nhiều thuộc tính CSS3 đa dạng (accent-color)
Thay đổi bố cục phản hồi theo từng điểm ngắt (breakpoint) của Media Query (Tối thiểu 1024, 768~1024, tối đa 767)
▼ Dự án Web thực tế tương thích (Responsive) với SCSS(SASS)+FLEX: Trang đăng ký thành viên (Member Register)
🚩 Trang đăng ký thành viên (Member Register)
Thiết kế UI bằng Figma và xây dựng cấu trúc Wireframe HTML
Hoàn thiện toàn bộ quy trình xuất bản (publishing) với SCSS(SASS) và bố cục FLEX
Học chi tiết về các đặc điểm và thuộc tính của các thành phần biểu mẫu (Form) trong HTML
Sử dụng lớp giả cho các thành phần biểu mẫu (:focus ::placeholder)
Giả lớp :is giúp sắp xếp các bộ chọn trùng lặp một cách hiệu quả
Tạo hộp kiểm (checkbox) và nút chọn (radio button) đẹp mắt bằng tùy chỉnh checkbox
Script thiết lập hiển thị/ẩn mật khẩu
▼ Dự án Web thực tế Responsive SCSS(SASS)+FLEX: Modal đăng nhập
🚩 Modal đăng nhập
Thiết kế UI bằng Figma và xây dựng cấu trúc wireframe HTML
Hoàn thiện toàn bộ quá trình publishing với SCSS(SASS) và bố cục FLEX
Học tập chi tiết về các đặc điểm và thuộc tính của các thành phần HTML Form
Sử dụng lớp giả cho các thành phần biểu mẫu (:focus ::placeholder)
Giả lớp :is giúp sắp xếp các bộ chọn trùng lặp một cách hiệu quả
Tạo checkbox và radio button đẹp mắt bằng custom checkbox
Script thiết lập hiển thị/ẩn mật khẩu
Sử dụng @mixin và @include
🚩 Chia sẻ Modal, Modal xác nhận giỏ hàng(Modal)
Thiết kế UI bằng Figma và xây dựng cấu trúc HTML Wireframe
Thiết kế UI bằng Figma và xây dựng cấu trúc HTML Wireframe
Hoàn thiện toàn bộ quy trình xuất bản web với SCSS(SASS) và bố cục FLEX
Tạo hình khối bằng giả lớp (pseudo-class) :before và :after
Modal xác nhận giỏ hàngTự động đóng sau 4 giây bằng setTimeout
Cung cấp đa dạng tệp tin 🗂️
📝 [Dự án Web thực tế phản hồi SCSS(SASS)+FLEX với Figma] Tất cả các bản hoàn thiện
Trong Phần 7, tất cả các tệp nguồn để sản xuất bài giảng cùng với bản thiết kế hoàn thiện và bản hoàn thiện xuất bản (publishing) sẽ được cung cấp. Ngoài ra, tệp PPT giải thích các lý thuyết cốt lõi và các điểm quan trọng trong bài giảng cũng được cung cấp dưới dạng PDF.
[Tải xuống] Bản thiết kế (Beyond Insight)
[Tải xuống] Cấu trúc Wireframe HTML (Beyond Insight)
[Tải xuống] Công việc xuất bản (Beyond Insight)
[Tài liệu bài giảng PDF] Dự án Web phản hồi thực tế SCSS(SASS)+FLEX với Figma
📝 Video Cung cấp tài liệu giảng dạy PPT dạng PDF được sử dụng trong bài giảng
Cung cấp nhiều tài liệu tham khảo đa dạng cho công việc thiết kế và xuất bản (publishing)
[Giáo trình bài giảng] Dự án Web thực tế tương thích SCSS(SASS)+FLEX với Figma (Tổng cộng 39 trang)
Nguyên tắc cơ bản của SCSS(SASS)+FLEX Clean Coding🧽
[Dự án Web thích ứng thực tế SCSS(SASS)+FLEX với Figma] Trong khi theo học khóa học này, tôi tin rằng kỹ năng của bạn sẽ phát triển về nhiều mặt như khả năng thiết kế UI Figma, khả năng tạo HTML wireframe, và khả năng sử dụng SCSS(SASS) + FLEX Layout để xuất bản web. Mặc dù những phần này rất quan trọng, nhưng bạn sẽ được học điều quan trọng nhất là 'Tiêu chuẩn của Clean Coding để xuất bản web như một người có kinh nghiệm'. Tất cả việc xuất bản trong bài giảng đều được viết dựa trên những nguyên tắc này.
Đặc biệt, trong bài giảng lần này, tôi thường xuyên nhấn mạnh vào việc lập trình SCSS(SASS) phải được thực hiện tuần tự theo cấu trúc phân tầng. Đối với SCSS(SASS), cấu trúc phân tầng của các bộ chọn (selector) quan trọng hơn nhiều so với khi sử dụng CSS thông thường.
<Tiêu chuẩn của Clean Coding để xuất bản như một người có kinh nghiệm> là việc chèn các chú thích cần thiết vào đúng nơi, viết mã các bộ chọn CSS theo đúng thứ tự xuất hiện của HTML, và đối với các bộ chọn CSS chung, hãy sắp xếp chúng vào một nơi gọi là Common CSS để thuận tiện cho việc bảo trì sau này... Nếu bạn học được những nguyên tắc và thói quen lập trình này, chúng sẽ giúp ích rất nhiều cho bạn trong công việc thực tế.
Đặc biệt, khi xin việc, người phụ trách nhân sự hoặc người có chuyên môn tương đương sẽ xem sản phẩm publishing của ứng viên và kiểm tra mã nguồn (Source Code). Trong trường hợp này, chỉ cần nhìn qua mã nguồn là họ có thể đánh giá được kỹ năng cơ bản về publishing của ứng viên.
💡 Điểm hấp dẫn đặc biệt của bài giảng lần này là gì?
Bạn có thể trang bị khả năng thiết kế giao diện web phản hồi (Responsive Web UI) thông qua việc thực hành chế tác thực tế trên Figma.
Bạn sẽ được học cách lập kế hoạch wireframe HTML chi tiết để cải thiện đáng kể kỹ năng publishing.
Học các nguyên tắc cơ bản của Clean Coding để có thể lập trình như một chuyên gia dày dặn kinh nghiệm.
Giải thích chi tiết các khái niệm chuyên sâu, hướng dẫn cách tạo nhiều trang và bố cục khác nhau với lời giải thích dễ hiểu.
Giải thích tất cả mọi thứ mà học viên cần biết để publishing web phản hồi (responsive web).
Bạn sẽ được học cách hiểu sâu và khả năng vận dụng SCSS(SASS) cũng như FLEX.
Bạn sẽ được học phương pháp lập trình SCSS(SASS) một cách tuần tự và có hệ thống theo cấu trúc phân cấp.
Bạn sẽ được học về FLEX một cách chắc chắn thông qua việc hiểu và áp dụng bố cục FLEX trực tiếp vào thực tế.
Sở hữu dự án web phản hồi SCSS(SASS), portfolio tốt nhất để tìm việc và chuyển việc làm Publisher
Lưu ý trước khi học 📢
🌈 Môi trường thực hành (Trình chỉnh sửa văn bản)
Trình soạn thảo văn bản được thực hiện bằng Visual Studio Code.
Bạn có thể sử dụng các trình soạn thảo văn bản khác như Brackets, Sublime, v.v., nhưng trình soạn thảo đó phải hỗ trợ Live Sass Compiler dưới dạng tiện ích mở rộng (extension) thì bạn mới có thể theo kịp bài giảng.
Để lập trình SCSS(SASS), bạn nhất thiết phải sử dụng Live Sass Compiler, một tiện ích mở rộng của Visual Studio Code. Trong bài giảng này, hãy chắc chắn sử dụng Visual Studio Code để có thể sử dụng Live Sass Compiler.
Tải xuống tài liệu học tập
Tất cả tài liệu học tập có thể được tải xuống tại phần bên dưới. Tài liệu được cung cấp dưới dạng tệp nén theo từng thư mục, vì vậy sau khi tải xuống, bạn hãy giải nén và theo dõi bài giảng theo thứ tự.
💡 Cách sử dụng tệp tải xuống và nội dung thư mục
① Tài liệu cần thiết khi làm thiết kế và xuất bản ② Tài liệu cần thiết khi bắt đầu làm thiết kế ③ Tài liệu bản hoàn thiện xuất bản
💡 Trình soạn thảo văn bản cho công việc xuất bản <Visual Studio Code>
Khóa học <SCSS(SASS)+FLEX Dự án Web phản hồi thực tế với Figma> này là khóa học được thực hiện bằng Visual Studio Code. Visual Studio Code là một chương trình miễn phí không giới hạn sử dụng. Tất cả các video bài giảng đều được giải thích dựa trên Visual Studio Code.
Vui lòng xem video YouTube của Coding Works dưới đây để làm quen với cách sử dụng cơ bản trước khi bắt đầu học <Phần 3. Xuất bản chi tiết Web di động (HTML+CSS+JS)>.
Cách sử dụng và thiết lập môi trường Visual Studio Code (Xem video)
Cách sử dụng Emmet trong Visual Studio Code (Xem video)
Cài đặt và cách sử dụng các Extension cần thiết cho Visual Studio Code (Xem video)
Cách ngăn Full Reload khiến trang tự động cuộn lên trên khi chỉnh sửa CSS trong Visual Studio Code (Xem video)
✅ Video hướng dẫn cài đặt Live Sass Compiler Extension không có trên YouTube nhưng bạn nhất định phải cài đặt nó.
✅ Trước khi bắt đầu publishing, nhất định phải học cách cài đặt và sử dụng extension Live Sass Compiler ở section bên dưới.
Hỏi & Đáp 💬
Ngoài những câu hỏi dự kiến dưới đây, nếu bạn có bất kỳ thắc mắc nào khác, vui lòng để lại tại bảng hỏi đáp của cộng đồng khóa học này, tôi sẽ cố gắng hết sức để giải đáp cho bạn.
Hỏi: Tôi chưa từng học về SCSS(SASS) và FLEX, liệu tôi có thể theo kịp khóa học không?
🔊 Học trước về FLEX FLEX là một nội dung rất phổ biến, vì vậy nếu bạn tìm kiếm "Flex layout" hoặc "CSS Flex" trên YouTube, sẽ có rất nhiều video tóm tắt lý thuyết về Flex trong khoảng 20-30 phút. Chỉ cần xem 1-2 video như vậy và thực hành là đã đủ để học trước về Flex. Lý thuyết về Flex layout thực ra không nhiều như bạn nghĩ.
🔊 Học trước về SCSS(SASS) Để học trước về SCSS(SASS), bạn chỉ cần học Phần 4. Lý thuyết cốt lõi về SCSS (Essential Theory) có trong bài giảng là đã hoàn toàn đầy đủ.
Q. Cần có kiến thức nền tảng về xuất bản (publishing) ở mức độ nào?
Chỉ cần có kinh nghiệm sử dụng HTML+CSS cơ bản là bạn có thể theo kịp, đồng thời đạt được kết quả và sự cải thiện kỹ năng như mong đợi. Tuy nhiên, khóa học có thể gây áp lực đối với những bạn có kỹ năng CSS còn ở mức quá sơ cấp. Chỉ cần bạn có kỹ năng CSS ở mức độ nhất định là hoàn toàn có thể theo kịp.
Và đối với những người lần đầu tiếp cận SCSS(SASS), tôi đã chuẩn bị hơn 5 giờ học lý thuyết trong Phần 4. Lý thuyết cốt lõi về SCSS (Essential Theory). Vì vậy, sau khi học xong Phần 4, bạn hoàn toàn có thể theo kịp các Phần từ 5 đến 7 để hoàn thành dự án.
Q. Trong số các bài giảng của Coding Works đã có sẵn 2 bài về SCSS(SASS) rồi, vậy bài giảng này có gì khác biệt ạ?
Vâng. Trong số các bài giảng hiện có của Coding Works, có hai khóa học là <SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱> và <SCSS(SASS) FLEX GRID 핵심이론(PDF) 교재 및 활용예제>.
<SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma> là khóa học video, tập trung vào việc học các lý thuyết cốt lõi và ứng dụng thực tế của SCSS(SASS). Tuy nhiên, vì đây không phải là khóa học xây dựng toàn bộ trang web bằng SCSS(SASS) như khóa học lần này, nên độ khó sẽ ít áp lực hơn đối với học viên. Do đó, đây là khóa học phù hợp cho những người mới bắt đầu tiếp cận SCSS(SASS) để có trải nghiệm về SCSS(SASS) và tạo ra các ví dụ thực tế bằng SCSS(SASS).
Khóa học <Giáo trình Lý thuyết cốt lõi SCSS(SASS) FLEX GRID (PDF) và Ví dụ vận dụng> không phải là bài giảng video mà là khóa học cung cấp tệp giáo trình và ví dụ thực hành. Sẽ rất hữu ích nếu bạn lưu giữ nó để làm tài liệu tham khảo với tư cách là một người làm nghề Publisher.
Ngay cả khi bạn không học trước hai khóa học trên, việc tham gia khóa học Dự án Web phản hồi SCSS(SASS)+FLEX lần này cũng không thành vấn đề. Tuy nhiên, bạn cần phải có kỹ năng CSS ở một mức độ nhất định.
Q. Tôi chưa từng có kinh nghiệm sử dụng các chương trình đồ họa, liệu tôi có thể thiết kế bằng Figma được không?
Như đã đề cập trong video giới thiệu, Figma mang lại hiệu quả cực kỳ tốt so với nỗ lực bỏ ra. Chỉ cần bạn có thể sử dụng PowerPoint ở mức tối thiểu là đã đủ để theo kịp lớp học thiết kế Figma. Tuy nhiên, để tiếp thu bài học tốt hơn, hy vọng bạn sẽ xem video <[Đọc kỹ] Khóa học cơ bản về Figma cho dự án Web phản hồi thực tế SCSS(SASS)+FLEX (ft. Sử dụng màn hình kép)> và thực hiện học trước thông qua kênh YouTube đã được giới thiệu.
Q. Nội dung cốt lõi tạo nên sự khác biệt là gì?
Đây không phải là bài giảng thiết kế dành cho chuyên gia, mà là bài giảng thiết kế ở mức độ giúp một người hoàn toàn không có kiến thức nền tảng có thể sử dụng tốt Figma. Vì vậy, bài học thực hành thiết kế Figma trong <Phần 1. Thiết kế UI dự án Web thích ứng SCSS(SASS)+FLEX với Figma> ở mức độ dễ tiếp cận cho người mới bắt đầu hơn là dành cho chuyên gia. Tuy nhiên, bài học <Phần 2. HTML Wireframe dự án Web thích ứng SCSS(SASS)+FLEX với Figma> được giảng dạy theo phương pháp hệ thống và chắc chắn nhất để nâng cao kỹ năng Publishing, đúc kết từ kinh nghiệm của một giảng viên đã dạy Publishing trong thời gian dài. Và tôi tin rằng cốt lõi của khóa học này là được thiết kế để dẫn dắt người học từng bước tạo ra những sản phẩm chất lượng cao trong một công việc mới mẻ và khó khăn như Mobile Web Publishing.
Đặc biệt, vì Phần 4 xử lý các lý thuyết cốt lõi của SCSS (Essential Theory) trong hơn 5 giờ để thực hiện dự án web đáp ứng SCSS (SASS), nên bạn có thể học tập các lý thuyết cốt lõi của SCSS một cách hoàn hảo.
Tôi tin rằng bằng cách tạo cấu trúc HTML cho nhiều bố cục trang khác nhau và thực hành thiết kế web (publishing), bạn sẽ đạt được kỹ năng thiết kế web trình độ trung thượng cấp.
Q. Người không chuyên về thiết kế có thể theo học khóa học này không?
Hoàn toàn có thể. Tôi cũng tốt nghiệp chuyên ngành không liên quan gì đến thiết kế. Như đã đề cập trong video <[Đọc kỹ] Khóa học cơ bản về Figma cho dự án Web phản hồi thực tế SCSS(SASS)+FLEX> ở Phần 1, chỉ cần bạn sử dụng tốt PowerPoint là có thể học và sử dụng Figma mà không gặp bất kỳ trở ngại nào. Bản thân tôi cũng chỉ học Figma trong một thời gian ngắn để phục vụ việc giảng dạy nhưng vẫn có thể tạo ra những sản phẩm thiết kế chất lượng.
Q. Là một nhà thiết kế nên tôi đã thành thạo Figma rồi, vậy tôi có cần phải học phần thiết kế Figma ở Chương 1 không?
Như tôi đã đề cập trong video giới thiệu, tôi không phải là người đã sử dụng Figma lâu năm hay quá giỏi về nó. Vì vậy, nếu bạn là người tự tin với các thao tác trên Figma, bạn có thể bỏ qua <Section 1. SCSS(SASS)+FLEX 반응형 웹 프로젝트 UI 디자인 제작 with Figma> và bắt đầu học ngay từ <Section 2. SCSS(SASS)+FLEX 반응형 웹 프로젝트 HTML 와이어프레임 with Figma>.
Từ phần tạo cấu trúc HTML Wireframe ở Chương 2 trở đi không còn là lĩnh vực thiết kế mà là lĩnh vực bài giảng về Publishing.
Q. Tại sao phải học khóa học thiết kế dự án web phản hồi SCSS(SASS)+FLEX và hiệu quả kỳ vọng cụ thể là gì?
Thông qua khóa học [Dự án Web phản hồi thực tế SCSS(SASS)+FLEX với Figma], bạn có thể nâng cao lý thuyết cốt lõi và khả năng ứng dụng thực tế của SCSS(SASS), lý thuyết cốt lõi và khả năng ứng dụng thực tế của FLEX Layout, cũng như kỹ năng thiết kế và xây dựng bố cục phản hồi tương thích với PC, di động và máy tính bảng lên mức trung thượng cấp.
Hiệu quả kỳ vọng cụ thể thực tế sẽ khác nhau tùy vào mỗi người. Tuy nhiên, điều mà Coding Works có thể khẳng định chắc chắn là 'khả năng xây dựng cấu trúc HTML Wireframe sẽ được cải thiện đáng kể'. Thông qua việc tạo ra nhiều cấu trúc HTML Wireframe đa dạng, bạn sẽ được huấn luyện đầy đủ về cách sắp xếp các cấu trúc phân tầng HTML phức tạp một cách có hệ thống. Ngoài ra, khóa học cũng sẽ hướng dẫn chi tiết cách đặt tên và chia sẻ các Class name nhất quán trong quá trình cùng nhau thực hiện.
<Phần 2. HTML Wireframe cho dự án Web thích ứng SCSS(SASS)+FLEX với Figma> tạo ra nhiều cấu trúc HTML Wireframe đa dạng và được huấn luyện cho đến bước áp dụng xuất bản web thực tế trong <Phần 5~7. Xuất bản chi tiết dự án Web thích ứng SCSS(SASS)+FLEX>, vì vậy sau này bạn sẽ có thêm tự tin trong việc tạo ra hầu hết các bố cục UI web.
Q. Nội dung buổi học sẽ bao gồm đến cấp độ nào?
Dự án web đáp ứng SCSS(SASS)+FLEX có đặc thù là số lượng tệp và thư mục rất nhiều. Do đó, nội dung bài học sẽ được tiến hành khá nhanh với khối lượng kiến thức lớn. Mặc dù khái niệm về "mức độ nào" tùy thuộc vào tiêu chuẩn của mỗi người, nhưng nội dung khóa học này hướng tới việc hoàn thiện sản phẩm ở mức độ đủ để làm portfolio cá nhân cho một Publisher.
Khóa học dự án web phản hồi SCSS(SASS)+FLEX ở trình độ sơ trung cấp, nhưng bạn có thể coi nó gần với trình độ trung cấp hơn. Nói cách khác, nó bao hàm rất nhiều nội dung. Tôi nghĩ rằng mặc dù có thể gây áp lực cho người mới bắt đầu, nhưng sau khi hoàn thành khóa học, bạn sẽ cảm nhận được khả năng xuất bản (publishing) của mình đã trưởng thành đáng kể.
Q. Trong số các bài giảng của Coding Works, tôi đã theo học khóa <Mobile Web Publishing Portfolio with Figma> rồi ạ?
Nếu bạn đã hoàn thành khóa học Portfolio xuất bản Web di động với Figma, bạn không nhất thiết phải học nội dung [Phần 1. Thiết kế UI dự án Web phản hồi SCSS(SASS)+FLEX với Figma]. (Nếu có thể, tôi khuyên bạn nên thử thực hiện nó với tốc độ nhanh.)
[Phần 2. Wireframe HTML cho dự án web đáp ứng SCSS(SASS)+FLEX với Figma] Bạn có thể bắt đầu học từ phần này cũng được.
Q. Tổng thời gian của bài giảng là bao nhiêu?
Tổng thời lượng video bài giảng là hơn 41 giờ, được chuẩn bị với thời gian học tập đầy đủ để nghiên cứu chuyên sâu. Tỷ lệ tổng thể của khóa học bao gồm 15% công việc thiết kế Figma và 85% công việc xuất bản (publishing). Trong toàn bộ video, Phần 1 là công việc thiết kế UI trên Figma, và các phần còn lại là lĩnh vực học tập về xuất bản web phản hồi (responsive web publishing).
Phần 1. Thiết kế UI dự án Web thích ứng SCSS(SASS)+FLEX - 6 giờ 37 phút
Phần 2. Thiết kế HTML Wireframe cho dự án web thích ứng SCSS(SASS)+FLEX - 5 giờ 21 phút
Phần 3. Cách thiết lập và sử dụng Live Sass Compiler trong Visual Studio Code - 1 giờ 15 phút
Phần 4. Lý thuyết cốt lõi về SCSS (Essential Theory) - 5 giờ 9 phút
Phần 5. Dự án web thích ứng SCSS(SASS)+FLEX cho PC Layout - 15 giờ 44 phút
Phần 6. Dự án Web thích ứng SCSS(SASS)+FLEX cho Responsive Layout - 3 giờ 35 phút
Phần 7. [Hoàn tất cuối cùng] Dự án Web thích ứng SCSS(SASS)+FLEX - 2 giờ 53 phút
Q. Có lưu ý nào liên quan đến việc học (môi trường cần chuẩn bị, các lưu ý khác, v.v.) không?
Nội dung bài học rất nhiều và tiến độ diễn ra khá nhanh. Tuy nhiên, bài học không lướt qua mà không có giải thích đầy đủ, trái lại mọi thứ đều được giải thích rất chi tiết. Tôi tin rằng bạn sẽ theo kịp tốt. Tuy nhiên, tôi cực kỳ khuyến khích bạn nên trang bị môi trường màn hình kép thay vì học với một màn hình duy nhất. Vui lòng nhất định phải xem video [Đọc kỹ] Khóa học cơ bản Figma cho dự án web phản ứng thực tế SCSS(SASS)+FLEX (ft. Sử dụng màn hình kép) trong Phần 1 trước khi đăng ký khóa học.
Giới thiệu về người chia sẻ kiến thức ✒️
[Dự án Web thích ứng thực tế SCSS(SASS)+FLEX với Figma] khóa học được tạo bởi Coding Works, người đã và đang giảng dạy lý thuyết xuất bản, ứng dụng và xây dựng trang web danh mục cá nhân cho hơn 300 học viên trong các khóa học xuất bản do chính phủ tài trợ cho đến nay. Đặc biệt, đây là giảng viên chuyên về giảng dạy xuất bản trong nhiều năm, hướng dẫn hoàn hảo mọi quá trình chuẩn bị tìm việc làm cho người làm xuất bản từ A đến Z để hầu hết học viên có thể tìm được việc làm ngay sau khi kết thúc khóa học. Ngoài ra, thông qua các bài giảng liên quan đến xuất bản trên Inflearn, giảng viên cũng nhận được đánh giá là đã giúp ích rất nhiều cho các học viên trên Inflearn.
🙋🏻♂️ Nhất định phải đọc trước khi đặt câu hỏi~!!
Nếu bạn có bất kỳ thắc mắc nào trong quá trình học tập, hãy đặt câu hỏi nhé. Khi đặt câu hỏi, bạn cần đăng tải nội dung phần không hoạt động được, mã nguồn (code) và ảnh chụp màn hình kết quả trên trình duyệt. Đối với mã nguồn, bạn phải cung cấp đầy đủ cả mã HTML, CSS và JS thì tôi mới có thể đưa ra câu trả lời chính xác được.
Nếu bạn chỉ giải thích vấn đề bằng văn bản trong câu hỏi mà không có mã nguồn, tôi sẽ rất khó để đưa ra câu trả lời chính xác trừ khi đó là vấn đề cực kỳ đơn giản. Khi đó, tôi không còn cách nào khác là phải phản hồi lại rằng 'Vui lòng đăng mã HTML, CSS, JS và ảnh chụp màn hình trình duyệt~', và cuối cùng việc nhận được giải pháp sẽ trở nên phiền phức và mất thời gian hơn.
▲ Vui lòng kiểm tra trước phần Các câu hỏi thường gặp của cộng đồng bài giảng tương ứng~
⚡ Để học tập hiệu quả, nhất định hãy tham khảo kênh YouTube Coding Works Publishing nhé.
Vui lòng học song song với các video bài giảng lý thuyết trên kênh YouTube Coding Works Publishing. Tất nhiên không phải tất cả các video lý thuyết đều có trên kênh YouTube, nhưng hầu hết các video lý thuyết quan trọng đều có sẵn. Vì có rất nhiều video, nên cách tốt nhất để tìm video là tìm kiếm theo ví dụ bên dưới.
Khóa học [HTML+CSS+JS Portfolio thực chiến (Season 3)] được tạo bởi Coding Works, người đã và đang giảng dạy lý thuyết, ứng dụng và xây dựng trang web portfolio cá nhân cho hơn 300 học viên trong các khóa học xuất bản (publishing) do nhà nước tài trợ. Đặc biệt, đây là giảng viên chuyên về giảng dạy publishing trong nhiều năm, hướng dẫn hoàn hảo mọi quá trình chuẩn bị tìm việc cho vị trí publisher từ A đến Z để hầu hết học viên có thể đi làm ngay sau khi kết thúc khóa học. Ngoài ra, các bài giảng về publishing trên Inflearn cũng nhận được đánh giá là giúp ích rất nhiều cho các học viên tại đây.
Khuyến nghị cho những người này
Khóa học này dành cho ai?
Những người cần nắm vững lý thuyết cốt lõi và khả năng ứng dụng thực tiễn của SCSS(SASS)
Những người cần một portfolio dự án xây dựng trang web responsive (phản hồi) một cách hệ thống.
Những ai là nhà phát triển Frontend và muốn thấu hiểu bản chất cốt lõi của việc publishing.
Dành cho những ai cần một dự án web responsive cạnh tranh nhất với tư cách là một publisher.
Những người muốn tạo lợi thế cạnh tranh trong sơ yếu lý lịch bằng khả năng vận dụng SCSS(SASS)
■ [Hiện tại] Giảng viên Publishing & Front-end được nhà nước hỗ trợ kinh phí ■ [Hiện tại] Freelance Front-end Publisher ■ [Hiện tại] Vận hành kênh YouTube 'Coding Works' chuyên về HTML+CSS+JQUERY Publishing ■ Giảng viên Web Publishing tại Green Computer Academy ■ Giảng viên Web Publishing tại The Joeun Computer Academy ■ Giảng viên Web Publishing tại Ezen Computer Academy ■ Front-end Publisher, Giảng viên chuyên nghiệp về Front-end Publishing ■ Giảng dạy Portfolio thiết kế Web UI/UX ■ Giảng dạy lớp chứng chỉ thực hành Kỹ thuật viên Thiết kế Web ■ Thiết kế UI/UX và Publishing Front-end tại Easy & Edu
Đây là lần đầu tiên tôi phát triển front web nên rất lo lắng.
Học phí hơi khác so với các khóa học khác.
Tôi hơi lo lắng (hahaha)
Sự lựa chọn của tôi hóa ra là một ơn trời.
(Bạn thực sự giỏi giảng bài!!)
Tôi không có bất kỳ kinh nghiệm phát triển web nào.
Tôi nghĩ rằng chương trình chính đã phát triển nên được phục vụ trên web/di động.
Tôi cảm thấy cần phải chuẩn bị và học tập trước nên đã đăng ký tham gia lớp học và nghỉ phép khoảng một tuần.
Tôi lấy nó ra và lái nó. Vào ngày thứ 4, anh ấy bắt đầu nôn ói.
Dù sao thì vào ngày thứ 5, tôi đã học xong hết bài giảng.
Tôi đã thực hiện một số thử nghiệm với trang ASP.Net Core 7 Razor.
(Từ trang Udemy: Ứng dụng web ASP.NET Core
Sau khi nghe bài giảng về Trang sử dụng dao cạo trị giá 15.000 won~ haha)
Các kết quả kiểm tra được liên kết tốt với DB và thể hiện tốt.
Tôi rất hạnh phúc và trải nghiệm một thế giới mới.
Trước đây, nó bắt đầu với COBOL và Fortran, và bây giờ là C#, VB.NET và một số thứ khác.
Với công nghệ cũ(?) đã phát triển ứng dụng máy tính để bàn bằng cách sử dụng các công cụ phát triển,
Liệu tôi có thể thích ứng với môi trường phát triển phù hợp với xu hướng hiện tại không? Tôi nghĩ...
Lời giải thích chi tiết rất dễ hiểu.
Nhờ có bạn, nó đã cho tôi sức mạnh to lớn và cho tôi lòng can đảm.
SCSS / Figma (thanh toán trả phí) / JQuery / HTML
Lên cấp chỉ với 4 món trên và các bài giảng ví dụ mẫu!!
Tôi đã sử dụng Photoshop được gần 20 năm và nhờ đó,
Tôi không nghĩ tôi sẽ sử dụng nó. cười
Các chi đều dài.
Đây là lần đầu tiên tôi học xong một bài giảng dài 100%... haha
Cảm ơn những bài giảng tuyệt vời của thầy.
Tôi sẽ cầu nguyện cho bạn luôn được khỏe mạnh.
Một trong những người hướng dẫn tại Infron được coi là tiết kiệm chi phí nhất là Coding Works. Khóa học mới ra mắt gần đây hơi đắt vì là công nghệ mới nhất, nhưng nhìn vào nội dung hiện có, tôi rất ấn tượng với khối lượng khổng lồ với mức học phí rất thấp nên đã tìm hiểu về Coding Works và tham gia khóa học. Ngay cả khi bạn vào học viện ngoại tuyến, cũng khó có thể tìm được một lớp học có mật độ dày đặc như vậy. Nếu nhìn vào toàn bộ cấu trúc bài giảng thì thời gian giảng lên tới hơn 40 giờ nên nội dung lại rất chi tiết. Ngoài ra, bằng cách hợp nhất các công nghệ cấp trung đến nâng cao mới nhất của WebPubble, bạn có thể đạt được kết quả bao gồm các công nghệ tiên tiến thực tế thông qua các lớp học thực hành, thực hành. Trên hết, tôi rất ấn tượng bởi cách người hướng dẫn trả lời nhanh chóng. Tôi đã có câu hỏi vào Chủ nhật, vì vậy tôi đã để lại hai câu hỏi liên quan đến việc tham gia khóa học và họ đã trả lời ngay ngày hôm đó với số lượng lớn, thực hành chuyên sâu về công nghệ mới nhất, phản hồi nhanh chóng. từ người hướng dẫn, v.v. Tôi rất thích khóa học này. Không có lý do gì để không giới thiệu nó. Tôi thành thật nghĩ rằng các nhà phát triển front-end đã có các kỹ năng webpub cơ bản trước React View. Ngày nay, ranh giới giữa các ngành đang sụp đổ và việc thực hiện đa tác vụ là bắt buộc. , nên cần người biết làm mọi việc. Nếu bạn muốn có được một vị trí được trả lương cao, bạn cần có khả năng tạo ra những gì bạn có trong đầu ít nhất bằng việc triển khai trên màn hình. Tôi cũng khuyên bạn nên tự mình học khóa học này, ngay cả khi bạn đang có. đang nghiên cứu React hoặc View. Tôi chưa phải là người bướng bỉnh nhưng những lời giải thích rất tử tế và hay nên học rất thú vị ^^ Khối lượng lớn có nghĩa là người hướng dẫn có kinh nghiệm giảng dạy sâu sắc Ngay cả khi một người hướng dẫn có kinh nghiệm nông cạn dạy một lượng lớn thời gian giảng dạy, đó là điều đó. không thể được. Tôi đã trăm tuổi. Mặc dù tôi đang học VÀ, tôi chọn khóa học này với mục đích nâng cao kỹ năng của mình lên trình độ chuyên gia cũng như thực hiện màn hình.
Lớp học tuyệt vời nhất.....!
Tôi đã từng học qua rất nhiều bài giảng rồi, nhưng có lẽ chưa thấy ai hướng dẫn chi tiết mà lại dễ hiểu như thầy/cô cả. Nhờ vậy mà tôi đã học hỏi được thực sự rất nhiều điều.
Tôi thực sự đề xuất khóa học này cho những ai còn đang phân vân không biết có nên học hay không. Ngay cả khi bạn không có nền tảng cơ bản, thầy/cô cũng sẽ giải thích rất dễ hiểu và chi tiết, nên tôi tin rằng bạn sẽ tuyệt đối không hối hận đâu.