강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Web Development

Cổng thông tin thực tế về SCSS(SASS)+GRID+FLEX

Bạn có thể học SCSS một cách có hệ thống từ cơ bản đến cách sử dụng. Để có thể xin việc làm nhà xuất bản, việc sử dụng SCSS (SASS) sẽ giúp bạn tăng khả năng cạnh tranh, do đó bạn cũng có thể có được kết quả thực tế về việc xuất bản portfolio sử dụng SCSS (SASS) + GRID + FLEX để chứng minh năng lực của mình. Đây là khóa học tập trung vào lý thuyết cốt lõi và ví dụ thực tế về SCSS (SASS) và bạn có thể học được các kỹ năng và bí quyết xuất bản SCSS (SASS) + GRID + FLEX để xin việc và làm việc thực tế.

(5.0) 22 đánh giá

441 học viên

  • codingworks
Sass
Flex
HTML/CSS

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • SCSS(SASS) lý thuyết cốt lõi và ví dụ ứng dụng sử dụng lý thuyết

  • Xuất bản danh mục thực tế sử dụng SCSS(SASS)+GRID+FLEX

  • Thiết kế phần portfolio trên trang web cá nhân

  • Sử dụng GRID và FLEX để tạo bố cục phản hồi

  • SCSS hoàn hảo về lý thuyết cốt lõi (Essential Theory)

Để phát triển các kỹ năng xuất bản độc đáo
Dự án xuất bản danh mục đầu tư thực tế của SCSS 💪

Tăng khả năng cạnh tranh việc làm của nhà xuất bản
Để cải thiện khả năng sử dụng SCSS (SASS)
Học tập có hệ thống và ví dụ thực tế

Nội dung tương tự, nhưng dễ hiểu hơn!
Chỉ những thứ cần thiết cho mục đích sử dụng thực tế!
Các bài giảng của Coding Works tạo nên sự khác biệt này.

Bạn có thể học SCSS (SASS) một cách có hệ thống từ cơ bản đến cách sử dụng. Vì khả năng sử dụng SCSS (SASS) làm tăng khả năng cạnh tranh của bạn khi xin việc làm nhà xuất bản, bạn cũng có thể có được kết quả xuất bản danh mục đầu tư thực tế bằng cách sử dụng SCSS (SASS) + GRID + FLEX để chứng minh khả năng của bạn.

Khả năng sử dụng SCSS (SASS) cũng là một lợi thế đối với những nhà xuất bản có kinh nghiệm.
Nếu bạn biết cách thực hiện, bạn sẽ ngay lập tức trở nên có tính cạnh tranh!!

📖 Bạn sẽ học được gì

Phần 1. Thiết lập và sử dụng Live Sass Compiler trong Visual Studio Code

Bạn sẽ học chi tiết cách thiết lập và sử dụng Live Sass Compiler trong Visual Studio Code để sử dụng SCSS (SASS). Ngoài ra, chúng tôi còn cung cấp hướng dẫn chi tiết về các lĩnh vực cần lưu ý trong quá trình cài đặt, để bạn có thể có nền tảng tìm hiểu về các lý thuyết chính, ví dụ về cách sử dụng các lý thuyết chính và xuất bản danh mục đầu tư thực tế sau này.

Mục 2. Lý thuyết cơ bản của SCSS

Bạn sẽ được học ngữ pháp cốt lõi của SCSS (SASS) một cách có hệ thống và chi tiết. Thay vì chỉ dạy lý thuyết ngữ pháp, bạn sẽ học cách áp dụng lý thuyết vào HTML và SCSS và xem cách lý thuyết này được biên dịch thành CSS, qua đó củng cố kiến ​​thức lý thuyết về SCSS của bạn.

Mục 3. Ví dụ về việc sử dụng lý thuyết cốt lõi SCSS

Chúng tôi giới thiệu các mẹo và lưu ý khi áp dụng lý thuyết trong khi thực hành cách thức và địa điểm áp dụng nội dung lý thuyết trong lý thuyết cốt lõi thông qua các ví dụ thực tế. Ngoài ra, bạn sẽ không chỉ học các lý thuyết cốt lõi của SCSS mà còn cả các thuộc tính mà bạn phải biết trong CSS.

Mục 4. Xuất bản danh mục đầu tư thực tế SCSS+GRID+FLEX

Kiến thức và kỹ năng thu được thông qua các lớp lý thuyết cốt lõi và sử dụng lý thuyết cốt lõi của SCSS sẽ được áp dụng vào kết quả xuất bản thực tế, qua đó củng cố lý thuyết và nâng cao kỹ năng ứng dụng vào công việc thực tế. Đặc biệt, tôi nghĩ rằng nếu bạn thể hiện danh mục đầu tư thực tế SCSS+GRID+FLEX của mình dưới dạng 'Danh mục đầu tư xuất bản SCSS (SASS)' trên trang chủ danh mục đầu tư cá nhân để xin việc làm xuất bản, khả năng cạnh tranh trong công việc của bạn sẽ tăng lên đáng kể.

Mục 5. Tải xuống phiên bản hoàn chỉnh và tài liệu học tập của sinh viên

Bạn có thể tải xuống tất cả các tệp đã hoàn thành được tạo trong các video về lý thuyết cốt lõi, sử dụng lý thuyết cốt lõi và xuất bản danh mục đầu tư thực tế. Trước khi bạn bắt đầu xem video lớp học, hãy tải xuống tệp nén, đặt thư mục đó vào thư mục gốc và theo dõi video. Và nếu có tài liệu tham khảo nào hữu ích cho sinh viên, tài liệu đó sẽ được cập nhật khi cần thiết.

  • [Phiên bản hoàn chỉnh] Lý thuyết cơ bản SCSS
  • [Phiên bản đầy đủ] Ví dụ về việc sử dụng các lý thuyết cốt lõi của SCSS
  • [Phiên bản hoàn thiện] SCSS+GRID+FLEX Xuất bản danh mục đầu tư thực tế
  • [Tham khảo] Các ký hiệu đặc biệt để xuất bản các biểu thức tiếng Anh (PDF)
  • [Tham khảo] Các ký hiệu đặc biệt để xuất bản các biểu thức tiếng Anh (PDF)

⚡ Tại sao? Bạn có cần khả năng sử dụng SCSS (SASS) không?

Ví dụ về bài đăng tuyển dụng của nhà xuất bản web mà bạn thấy ở trên là bài đăng tuyển dụng mà một công ty lớn vừa đăng trên một trang web tìm kiếm việc làm phổ biến. Phần trình độ chuyên môn là phần thiết yếu mà bạn cần phải có với tư cách là một nhà xuất bản web để có được việc làm. Tuy nhiên, nếu bạn nhìn vào chế độ ưu đãi, nó nói rằng những người có kinh nghiệm phát triển sử dụng SCSS sẽ được hưởng chế độ ưu đãi . Điều này có nghĩa là nếu bạn có kinh nghiệm phát triển bằng SCSS, bạn sẽ có khả năng cạnh tranh.

Chỉ vì đây là vị trí nghề nghiệp không có nghĩa là ứng viên mới không thể nộp đơn. Không có công ty X-Ly nào nói gì về việc nộp đơn. Quyết định sẽ được đưa ra bởi công ty mà bạn nộp đơn. Bạn có thể nghĩ, “Ồ, đây là một sản phẩm mới có hiệu quả về mặt chi phí.” Tất nhiên, ngay cả đối với những công ty không liệt kê SCSS là ưu tiên, việc ghi "có khả năng sử dụng SCSS (SASS)" trong phần kỹ năng trên trang chủ danh mục đầu tư cá nhân của ứng viên cũng có thể là một lợi thế cạnh tranh. Tuy nhiên , nếu bạn không chỉ có thể nói 'có khả năng SCSS(SASS)' mà còn học được SCSS(SASS) thực tế và chứng minh được kết quả xuất bản SCSS(SASS) chứng minh được kỹ năng của bạn, tôi chắc chắn rằng đó sẽ là một lợi thế cạnh tranh rất tốt cho bạn. việc làm và thay đổi công việc.

📖 Xem trước kết quả xuất bản danh mục đầu tư SCSS(SASS)+GRID+FLEX

▲ Trái tim hoạt hình sống động được sử dụng như một lớp học ảo

▲ Tạo logo Figma bằng GRID

▲ Điều hướng thả xuống theo kiểu Accordion (Chỉ SCSS, Không có JavaScript)

▲ Nội dung thả xuống theo kiểu Accordion (với SCSS+JQUERY)

▲ Nút hộp kiểm CSS phát sáng (Biến, Chức năng màu)

▲ Thiết kế biểu mẫu đăng nhập (bộ chọn thuộc tính, biểu tượng phông chữ Google)

▲ Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách bài đăng trên blog) - Chế độ toàn màn hình

▲ Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách bài đăng trên blog) - Bố cục đáp ứng

▲ Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách thông tin dự án) - Mô hình toàn màn hình/Mô hình di động

▲ Bố cục phần danh mục đầu tư phản hồi GRID (Phong cách thông tin dự án) - Bố cục phản hồi

▲ Tạo một bản mô phỏng iPhone Mobile bằng SCSS

▲ Hiển thị kết quả web di động bằng Mobile Mockup (Nhiều chế độ xem)


💬 Các câu hỏi dự kiến ​​liên quan đến bài giảng và những điều cần đọc

H) Cần có trình độ lập trình web nào trước khi tham gia khóa học?

Đầu tiên, bạn cần có hiểu biết cơ bản về HTML+CSS . Ví dụ, nếu bạn không hiểu các thuộc tính float và position, bạn có thể sẽ thấy khó theo dõi. Khóa học này được thiết kế dành cho những người có kỹ năng xuất bản cơ bản. Xin lưu ý!

Ngoài ra, không cần có kiến ​​thức trước về jQuery hoặc JavaScript. Bạn không cần phải cảm thấy nặng nề vì nội dung chủ yếu nói về lý thuyết và cách sử dụng SCSS (SASS).

Q) Bạn sử dụng trình soạn thảo văn bản nào trong lớp?

Khóa học này được tạo bằng Visual Studio Code . Visual Studio Code là chương trình miễn phí và không có giới hạn sử dụng. Nếu bạn không sử dụng Visual Studio Code làm trình soạn thảo văn bản, chúng tôi khuyên bạn nên sử dụng nó càng nhiều càng tốt, vì cách sử dụng và cài đặt môi trường của Live Sass Compiler được giải thích dựa trên Visual Studio Code.

Tải xuống Visual Studio Code (nhấp vào)

※ Có những video chi tiết về cách sử dụng Visual Studio Code và các tiện ích mở rộng trên kênh YouTube Coding Works, vì vậy hãy nhớ xem các video liên quan nhé! Hãy đến và tự mình xem nhé.

  • Cách sử dụng và thiết lập Visual Studio Code
  • Cách sử dụng Emmet trong Visual Studio Code
  • Ngăn chặn Full Reload xuất hiện khi sửa đổi CSS trong Visual Studio Code
  • Cách cài đặt và sử dụng tiện ích mở rộng cần thiết của Visual Studio Code

🌏 Kênh YouTube của Coding Works Publishing - https://www.youtube.com/codingworks

H) Tôi có thể tải xuống toàn bộ ví dụ lý thuyết, toàn bộ ví dụ thực hành và tài liệu tham khảo ở đâu?

Thỉnh thoảng có những người hỏi trên diễn đàn Hỏi & Đáp rằng họ có thể tải xuống phiên bản hoàn chỉnh ở đâu. Tất cả các tệp hoàn chỉnh (html, css, js, tệp hình ảnh, v.v.) và tài liệu tham khảo được tạo từ các video lớp học có thể được tải xuống trong phần hiển thị bên dưới.

Q) Những hình ảnh được sử dụng trong sản phẩm mẫu có được bảo vệ bản quyền không?

Các hình ảnh được sử dụng trong ví dụ này không có bản quyền. Tôi đã tìm kiếm trên Pixabay và Freepik và sử dụng những hình ảnh tôi cần cho ví dụ. Đối với ví dụ video đầu tiên của bài giảng, sinh viên nên sử dụng hình ảnh đính kèm. Tuy nhiên, nếu bạn tải lên trang chủ danh mục đầu tư cá nhân của mình, vui lòng đảm bảo thay đổi hình ảnh trong Pixabay hoặc Freepik và tải lên. Pixabay / FreePik

H) Trình tự học các ví dụ có phải được học theo thứ tự từ đầu không?

Bạn không cần phải tuân theo thứ tự chính xác của các ví dụ. Bạn có thể nghiên cứu bất kỳ ví dụ nào bạn muốn ở bất kỳ phần nào bạn muốn. Các phần không được sắp xếp theo thứ tự từ dễ đến khó. Sự khác biệt duy nhất là loại ví dụ. Tuy nhiên, vì quá trình tạo nguyên mẫu trang web và trang web phản hồi thực sự đòi hỏi rất nhiều kiến ​​thức nên chúng tôi khuyên bạn nên bắt đầu bằng cách học toàn bộ.

Không cần thiết phải học video [Lý thuyết cốt lõi] Phần 2 và video [Lý thuyết cốt lõi] Phần 1 trước rồi mới chuyển sang tạo ví dụ thực tế. Nếu bạn đang đưa ra một ví dụ thực tế và nội dung từ ví dụ đó có trong video lý thuyết cơ bản, bạn nên xem lại để học tập. Vì không thể đưa tất cả các lý thuyết được sử dụng để tạo ra các ví dụ thực tế vào các lý thuyết cốt lõi, vui lòng nghiên cứu các ví dụ thực tế và các lý thuyết cốt lõi cùng nhau.

[TMI] Có rất nhiều lý thuyết bạn cần biết khi nghiên cứu về xuất bản và tạo ra các ví dụ thực tế. Tôi muốn sắp xếp tất cả các phần lý thuyết và làm một video, nhưng thực tế là rất khó, vì vậy hãy điền vào các phần còn thiếu bằng cách xem các video lý thuyết Phần 1 và Phần 2, các video lý thuyết trên kênh YouTube Coding Works và bằng cách tìm kiếm trên Google.

Q) Có video nào giải thích lý thuyết CSS trung cấp trong khi tạo ví dụ không?

Khóa học này không nhằm mục đích tạo ra các ví dụ xuất bản dành cho người mới bắt đầu. Đây là quá trình tạo ra một ví dụ xuất bản trung gian. Vì vậy, bạn nên có một số kiến ​​thức về lý thuyết CSS từ cơ bản đến trung cấp. Điều đó không có nghĩa là bạn nhất thiết phải biết rõ về nó. Lý thuyết CSS cơ bản và trung cấp được lặp lại liên tục trong khi tạo ví dụ. Và trên Kênh YouTube Publishing của Coding Works, có một danh sách phát có tên là [Intermediate Theory] CSS Intermediate Theory, trong đó có các video chi tiết về lý thuyết trung gian cần thiết để tạo ví dụ. Vì vậy, trong khi học khóa học hiện tại, bạn nên nghiên cứu lý thuyết trung gian cùng một lúc.

H) Tôi có thể hỏi ở đâu nếu không hiểu điều gì đó khi học?

Nếu bạn có bất kỳ câu hỏi nào, vui lòng đăng câu hỏi lên bảng tin [Hỏi & Đáp] và chúng tôi sẽ trả lời sớm nhất có thể, ngay cả khi có thể không phải ngay lập tức. Và hãy trả lời câu hỏi của bạn càng cụ thể càng tốt. Khi một câu hỏi không cụ thể, hiếm khi dễ dàng nhận được câu trả lời thỏa đáng. Vì vậy, khi bạn đặt câu hỏi, sẽ dễ dàng hơn nhiều để trả lời nếu bạn đính kèm ảnh chụp màn hình mã HTML, CSS và JQUERY bạn đang viết cùng với nội dung mà bạn tò mò .

⚡ Trước khi đặt câu hỏi, vui lòng kiểm tra mục ' Xem câu hỏi thường gặp ' của cộng đồng trước.

🙋🏻‍♂️ Trước khi bạn đặt câu hỏi! Hãy đọc nhé~!!

Nếu bạn có bất kỳ thắc mắc nào trong khi học, hãy hỏi. Khi đặt câu hỏi, bạn phải tải lên nội dung không hoạt động, mã và ảnh chụp màn hình kết quả của trình duyệt. Đối với mã, bạn phải tải lên tất cả mã HTML, CSS và JS để chúng tôi có thể đưa ra câu trả lời chính xác. Và khi bạn tải mã của mình lên, sẽ rất tiện lợi khi sử dụng tiện ích mở rộng Visual Studio Code Capture, CodeSnap . Để biết hướng dẫn về cách sử dụng Tiện ích mở rộng Visual Studio Code Capture, CodeSnap, vui lòng tham khảo blog Coding Works bên dưới.

■ Cách sử dụng CodeSnap, tiện ích mở rộng thu thập mã: https://www.inflearn.com/blogs/1672

❤ Tin tức về việc đỗ kỳ thi publisher của sinh viên Coding Works


▲ Một sinh viên học với tôi trong khoảng 4 tháng rưỡi tại một khóa học xuất bản do nhà nước tài trợ đã nhận được tin nhắn KakaoTalk nói rằng anh ấy đã có việc làm.


▲ Tôi nhận được tin nhắn KakaoTalk về kết quả phỏng vấn dành cho học viên tham gia khóa học ngoại tuyến về cách tạo hồ sơ cá nhân tại Coding Works (ngày 24 tháng 4 năm 2023).

❤ Email được gửi bởi một sinh viên Coding Works sau khi nhận được việc làm tại một nhà xuất bản

 

Xin chào cô giáo :)

Thưa thầy, em là Kim O-jeong, một học viên đang theo học bài giảng của Inflearn.
Tôi là một sinh viên đã gửi email vào mùa hè này để xin lời khuyên về danh mục đầu tư cá nhân của mình.
Bạn còn nhớ không?😊😊

Không có gì khác hơn là,
Tôi gửi email này để thông báo với bạn rằng tôi đã thành công khi xin được việc tại một nhà xuất bản với danh mục đầu tư mà tôi nhận được từ bạn!

Thậm chí!!
Công ty đã liên hệ với tôi trước sau khi xem danh mục đầu tư mà tôi đăng trên Saramin, và tôi đã được phỏng vấn qua Zoom và trúng tuyển!
Công ty đã trả cho tôi mức lương mà tôi mong muốn, và tôi là một nhà xuất bản thực thụ, không làm công việc thiết kế hay phát triển! Tôi đã vào một công ty mà tôi chỉ có thể làm việc.

Đó là một công ty đang tìm kiếm một nhà xuất bản có kinh nghiệm, và họ đã liên hệ với tôi, một nhân viên mới, và hỏi lý do tại sao họ lại liên hệ với tôi.
Anh ấy nói rằng anh ấy đã xem qua danh mục đầu tư của nhiều người khác, nhưng anh ấy liên hệ với tôi vì "Định nghĩa chức năng" trong danh mục đầu tư của tôi đã thu hút sự chú ý của anh ấy.

Tôi nghĩ tất cả là nhờ vào bài giảng của giáo viên.
Nếu tôi không tham gia lớp học của giáo viên, hồ sơ của tôi sẽ chỉ ở mức trung bình, nhưng tôi đã có thể xin được việc làm thành công nhờ những lời khuyên tuyệt vời mà giáo viên đã chỉ cho tôi!

Mặc dù tôi chưa bao giờ thực sự gặp anh ấy,
Khi tạo danh mục đầu tư của mình, tôi đã dựa rất nhiều vào nó, tin tưởng nó và làm việc chăm chỉ trong khi xem các bài giảng của giáo viên!

Tôi cảm thấy kỹ năng của mình đã được cải thiện rất nhiều trong ba tháng tôi dành để nghe giảng và tạo hồ sơ năng lực, nhiều hơn so với những kỹ năng tôi đã xây dựng được khi học các lớp học dài tại học viện.

Tôi vô cùng mong muốn điều đó,
Tôi đã tin tưởng và làm theo lời thầy giáo nói và kết quả thực sự tốt.

Cảm ơn bạn rất nhiều!

Hãy cẩn thận với corona
Tôi hy vọng sẽ gặp lại bạn với một bài giảng tuyệt vời nữa :)


Xin chào thầy cô~ Em là học viên Inflearn OOO~ Em tìm ra địa chỉ email từ câu trả lời của một học viên khác..😊😊

Tôi chỉ muốn nói lời cảm ơn 😊😊

Tôi đã gặp khó khăn khi tham gia lớp học của bạn và nộp hồ sơ xin việc trong khoảng hai tuần nay...
Tôi đã vượt qua cuộc phỏng vấn tại một công ty và quyết định đến làm việc.. Cảm ơn bạn rất nhiều..😭😭

Thực ra, tôi lo lắng vì tôi đã 32 tuổi. Tôi đã nộp rất nhiều hồ sơ xin việc nhưng không nhận được cuộc gọi nào.
Nhưng giám đốc nhân sự của công ty này lại nói rằng ông ấy không thích những người tốt nghiệp từ các học viện tư nhân 😊😊
Công ty mà tôi quyết định gia nhập khá nhỏ nhưng có nhiều nhà phát triển và thiết kế web.
Họ nói rằng họ sẽ đào tạo họ trong ba tháng và sau đó đưa họ vào thực hành.
Hơi xa và lương thì thấp nhưng mình sẽ cố gắng học hành chăm chỉ và cố gắng tăng lương~ 😊😊

Cảm ơn bạn rất nhiều vì mọi thứ. Thật tuyệt vời khi tôi có thể kiếm được việc làm bằng cách tham gia lớp học trực tuyến này và nhận được câu trả lời thỏa đáng cho những câu hỏi của mình.

Tôi sẽ tiếp tục học tập và nâng cao kỹ năng của mình bằng cách lắng nghe bài giảng của giáo viên. Cố lên~!

🙋🏻‍♂️ Trước khi bạn đặt câu hỏi! Hãy đọc nhé~!!

Nếu bạn có bất kỳ thắc mắc nào trong khi học, hãy hỏi. Khi đặt câu hỏi, bạn phải tải lên nội dung không hoạt động, mã và ảnh chụp màn hình kết quả của trình duyệt. Đối với mã, bạn phải tải lên tất cả mã HTML, CSS và JS để chúng tôi có thể đưa ra câu trả lời chính xác.

Nếu bạn chỉ mô tả vấn đề của mình bằng văn bản mà không đưa bất kỳ mã nào vào câu hỏi, sẽ rất khó để đưa ra câu trả lời chính xác, trừ khi vấn đề thực sự đơn giản. Sau đó, tôi không còn lựa chọn nào khác ngoài việc trả lời lại rằng 'Vui lòng tải lên mã HTML, CSS, JS và trình duyệt~', điều này gây ra nhiều phiền phức và mất nhiều thời gian hơn để tìm ra giải pháp.


▲ Vui lòng kiểm tra các câu hỏi thường gặp trong cộng đồng bài giảng có liên quan trước~

Không thể thiếu để học tập hiệu quả! Vui lòng tham khảo kênh YouTube của Coding Works Publishing.

Vui lòng xem video bài giảng lý thuyết trên kênh YouTube của Coding Works Publishing. Tất nhiên, không phải tất 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ó trên đó. Vì có rất nhiều video nên bạn nên tìm kiếm những video như ví dụ bên dưới.

Kênh YouTube của Coding Works Publishing: https://www.youtube.com/codingworks

📖 Chương trình giảng dạy

Phần 0. [Video giới thiệu] SCSS(SASS)+ GRID+FLEX Portfolio Practical Publishing

  • [Video giới thiệu bài giảng] Xuất bản danh mục đầu tư thực tế với SCSS, Flex và Grid
  • [Ghi chú sản xuất ví dụ thực tế] SCSS(SASS)+GRID+FLEX Xuất bản danh mục đầu tư thực tế

Phần 1. Thiết lập và sử dụng Live Sass Compiler trong Visual Studio Code

  • Tại sao sử dụng SCSS (SASS) và sự khác biệt giữa SASS và SCSS
  • Trình biên dịch và bộ xử lý CSS trước là gì?
  • Thiết lập và sử dụng Live Sass Compiler trong Visual Studio Code (1)
  • Thiết lập và sử dụng Live Sass Compiler trong Visual Studio Code (2)
  • Tài liệu tham khảo & Mẹo SCSS – Loại bỏ các dòng trống trong mã CSS đã biên dịch
  • Vô hiệu hóa việc tạo tệp bản đồ và Tiền tố nhà cung cấp trong cài đặt Trình biên dịch Live Sass

Mục 2. Lý thuyết cơ bản của SCSS

  • Lý thuyết cốt lõi SCSS (01) - Lồng ghép bộ chọn
  • Lý thuyết cốt lõi SCSS (02) - Tham chiếu bộ chọn cha (&) và xử lý bình luận
  • Lý thuyết cốt lõi SCSS (03) - Ứng dụng của tham chiếu chọn lọc cha mẹ (&)
  • Lý thuyết cốt lõi của SCSS (04) – Tạo bộ chọn CSS đại diện trong SCSS
  • Lý thuyết cốt lõi SCSS (05) - Tài liệu tham khảo về bộ chọn phụ huynh (&) Lớp học ảo
  • 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 của SCSS (07) - Thoát khỏi Parent Selector Nesting @at-root
  • Lý thuyết cốt lõi SCSS (08) – Tự động tạo thuộc tính CSS bằng tiền tố
  • Lý thuyết cốt lõi của SCSS (09) – Giảm sự trùng lặp của bộ chọn với lớp ảo :is
  • Lý thuyết cốt lõi SCSS (10-1) - Biến 01
  • Lý thuyết cốt lõi SCSS (10-2) - Biến 02
  • Lý thuyết cốt lõi của SCSS (10-3) - Phạm vi biến 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) - Nhập một phần tệp bằng @import
  • Lý thuyết cốt lõi SCSS (12) - Toán tử, xóa cửa sổ đầu ra
  • Lý thuyết cốt lõi của 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) - Áp dụng @mixin và @include
  • Lý thuyết cốt lõi SCSS (13-3) - Thiết kế nút bằng @mixin và @include
  • Lý thuyết cốt lõi của SCSS (13-4) - Sử dụng tham số (đối số) của @mixin với @include
  • Lý thuyết cốt lõi SCSS (14) - @extend để lấy các thuộc tính của bộ chọn
  • Lý thuyết cốt lõi SCSS (15) - Trình chọn chỗ giữ chỗ % được sử dụng với @extend
  • Lý thuyết cốt lõi SCSS (16) - Khai báo nhiều biến, hàm dựng sẵn (map-get)

Mục 3. Ví dụ về việc sử dụng lý thuyết cốt lõi SCSS

  • Sử dụng các bộ chọn CSS chính và các lớp giả chính
  • Liên kết reset.css và normalize.css với @import
  • Định dạng văn bản bằng cách lồng nhau @mixin
  • Sử dụng mảng @mixin làm tham số và trả về đối số với @include
  • Tái sử dụng các hiệu ứng thường dùng với @mixin và @include
  • Tái sử dụng thiết kế CSS bằng cách sử dụng @extend để có được các thuộc tính CSS của bộ chọn cụ thể
  • Tổ chức các bộ chọn CSS thành các bộ chọn chuỗi với bộ chọn giữ chỗ (%)
  • Tạo nhiều Border Radii khác nhau bằng cách sử dụng các tham số trong @mixin
  • Tạo cấu trúc bố cục HTML nhất quán bằng cách tham chiếu đến các phần tử cha

Mục 4. Xuất bản danh mục đầu tư thực tế SCSS+GRID+FLEX

  • Trái tim sống động sử dụng lớp học ảo
  • Tạo logo Figma bằng GRID
  • Điều hướng thả xuống Accordion (Chỉ SCSS, Không có JavaScript) 01
  • Điều hướng thả xuống Accordion (Chỉ SCSS, Không có JavaScript) 02
  • Nội dung thả xuống Accordion (với SCSS+JQUERY)
  • Nút Google Checkbox CSS sáng bóng (Biến đổi, Chức năng màu) 01
  • Nút Google Icon Checkbox CSS sáng bóng (Biến đổi, Chức năng màu) 02
  • Thiết kế form đăng nhập (bộ chọn thuộc tính, biểu tượng phông chữ Google) 01
  • Thiết kế form đăng nhập (bộ chọn thuộc tính, biểu tượng phông chữ Google) 02
  • Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách bài đăng trên blog) 01
  • Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách bài đăng trên blog) 02
  • Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách bài đăng trên blog) 03
  • Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách bài đăng trên blog) 04
  • [Nhiệm vụ #01] Tạo các tệp riêng biệt cho Mixin và Biến và nhập chúng (Phong cách bài đăng trên blog)
  • Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách thông tin dự án) 01
  • Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách thông tin dự án) 02
  • Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách thông tin dự án) 03
  • Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách thông tin dự án) 04
  • Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách thông tin dự án) 05
  • [Nhiệm vụ #02] Tạo các tệp Mixin, Map-get và Reset riêng lẻ và nhập chúng (Phong cách thông tin dự án)
  • Bố cục phần danh mục đầu tư đáp ứng GRID (Phong cách thông tin dự án) – Toàn màn hình
  • Tạo một mô hình iPhone Mobile Mockup với SCSS 01
  • Tạo một iPhone Mobile Mockup với SCSS 02
  • Tạo một iPhone Mobile Mockup với SCSS 03
  • Hiển thị kết quả web di động bằng Mobile Mockup (Nhiều chế độ xem)

Mục 5. Tải xuống phiên bản hoàn chỉnh và tài liệu học tập của sinh viên

  • [Phiên bản hoàn chỉnh] Lý thuyết cơ bản SCSS
  • [Phiên bản đầy đủ] Ví dụ về việc sử dụng các lý thuyết cốt lõi của SCSS
  • [Phiên bản hoàn thiện] SCSS+GRID+FLEX Xuất bản danh mục đầu tư thực tế
  • [Tham khảo] Các ký hiệu đặc biệt để xuất bản các biểu thức tiếng Anh (PDF)
  • [Tham khảo] Tóm tắt về trò gian lận chính của Emmet (PDF)


⚡Giới thiệu và ứng dụng chương trình cố vấn Coding Works: https://inf.run/wfoh

Công trình mã hóa

■ [Hiện tại] Nhà xuất bản Front-end tự do
■ [Hiện tại] Đang vận hành kênh YouTube xuất bản HTML+CSS+JQUERY 'Coding Works'
■ Giảng viên xuất bản web của Học viện máy tính xanh
■ Jo Eun Computer Academy Giảng viên xuất bản web
■ Hiện là Giảng viên Xuất bản Web của Học viện Máy tính
■ Nhà xuất bản front-end, giảng viên chuyên gia xuất bản front-end
■ Bài giảng về danh mục thiết kế web UI/UX
■ Khóa học chứng nhận thực hành kỹ thuật viên thiết kế web
■ Thiết kế và xuất bản UI/UX Front-end Easy & Edu

🌏 Kênh YouTube của Coding Works Publishing - https://www.youtube.com/codingworks
🌏Blog xuất bản của Coding Works Inflearn - https://www.inflearn.com/users/@codingworks/blogs

Nhà xuất bản sản xuất trang chủ danh mục đầu tư cá nhân cần phỏng vấn và tuyển dụng, scss, sass, flex, grid, html, css, html/css, trang web, nhà xuất bản web, việc làm của nhà xuất bản, trang web, mã hóa, jquery, javascript, jquery, java Script, bố cục , web tương tác, web tương tác, thiết kế web, thiết kế web, danh mục đầu tư, xuất bản, web phản hồi, bài kiểm tra kỹ năng thiết kế web, bootstrap, khung css, khung

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những người muốn học SCSS (SASS) một cách có hệ thống từ cơ bản đến sử dụng

  • Những ai cần kết quả xuất bản portfolio SCSS(SASS)+GRID+FLEX

  • CSS theory muốn mở rộng khả năng sử dụng thông qua SCSS (SASS)

Cần biết trước khi bắt đầu?

  • Cơ sở HTML+CSS

Xin chào
Đây là

12,580

Học viên

739

Đánh giá

2,110

Trả lời

4.9

Xếp hạng

23

Các khóa học

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

Chương trình giảng dạy

Tất cả

74 bài giảng ∙ (20giờ 36phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

22 đánh giá

5.0

22 đánh giá

  • 인프런님의 프로필 이미지
    인프런

    Đánh giá 67

    Đánh giá trung bình 4.9

    5

    55% đã tham gia

    자세하게 알려주셔서 이해하기 쉽습니다.

    • 코딩웍스(Coding Works)
      Giảng viên

      재밌게 공부하신 듯해서 저도 뿌듯합니다. 수강평 감사드립니다.~!!

  • 서애옹님의 프로필 이미지
    서애옹

    Đánh giá 3

    Đánh giá trung bình 4.7

    5

    61% đã tham gia

  • jaeuishin님의 프로필 이미지
    jaeuishin

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    이해하기 쉽게 설명해 주세요. 너무도 생소한 부분이어서, 시작도 전에 도전이 쉽지 않았지만 들으면 들을 수록 나만의 포트폴리오는 제대로 작업해 보고 싶다는 생각이 듭니다.

  • 자몽님의 프로필 이미지
    자몽

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    scss기초를 배우기에 너무 좋은 수업이었습니다. 감사합니다.

  • 회룡포물수제비님의 프로필 이미지
    회룡포물수제비

    Đánh giá 8

    Đánh giá trung bình 5.0

    5

    95% đã tham gia

1.046.297 ₫

Khóa học khác của codingworks

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!