Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Development

Sách giáo khoa và ví dụ ứng dụng về lý thuyết cốt lõi của SCSS(SASS) FLEX GRID (PDF)

SCSS(SASS) FLEX GRID Core Theory (PDF) và các ví dụ ứng dụng là tài liệu PDF tóm tắt những lý thuyết cốt lõi về việc sử dụng SCSS(SASS), FLEX, GRID một cách dễ hiểu. Đối với những người muốn đạt trình độ xuất bản trung cấp trở lên, việc hiểu biết và khả năng sử dụng SCSS(SASS), FLEX, GRID là điều bắt buộc. Và tôi nghĩ rằng đây sẽ là lợi thế lớn trong việc xin việc và chuyển việc trong lĩnh vực xuất bản. Ngoài SCSS(SASS) FLEX GRID Core Theory (PDF), còn có bản hoàn chỉnh của các ví dụ ứng dụng lý thuyết (html, scss, css) được đính kèm riêng để bạn có thể tạo các ví dụ ứng dụng sử dụng lý thuyết sau khi học lý thuyết.

(4.5) 11 đánh giá

191 học viên

3시간 만에 완강할 수 있는 강의 ⏰
HTML/CSS
Sass
Flex

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

  • SCSS(SASS) - Lý thuyết cốt lõi bắt buộc

  • FLEX - Lý thuyết cốt lõi cần thiết

  • GRID - Lõi cốt lõi cần thiết

  • CSS(SASS) FLEX GRID lý thuyết cốt lõi (PDF) Ví dụ hoàn chỉnh sử dụng lý thuyết

Xuất bản web được nâng lên tầm cao mới!
Hãy cùng Coding Works tóm tắt những điểm chính.

SCSS(SASS) + FLEX + LƯỚI?

Có kỹ năng xuất bản ở trình độ trung cấp đến nâng cao
Bạn phải quen thuộc với SASS + FLEX + GRID.

💡 Đây là nội dung sách giáo khoa có thể tải xuống (PDF), không phải nội dung video.

  • Lý thuyết cốt lõi SCSS(SASS) (PDF) và ví dụ sử dụng
  • Lý thuyết cốt lõi FLEX (PDF) và Ví dụ sử dụng
  • Lý thuyết cốt lõi GRID (PDF) và các ví dụ sử dụng
  • Tải xuống sách giáo khoa PDF và các tệp ví dụ cho sách lý thuyết cốt lõi dành cho kỹ năng xuất bản trung cấp đến nâng cao
  • Sách giáo khoa PDF chất lượng cao có chất lượng tương đương với sách in

💡 Lý thuyết cốt lõi SCSS(SASS) FLEX GRID (PDF) Nội dung bài giảng

  • Lý thuyết cốt lõi của SCSS(SASS) (Biến, Lồng nhau, @minxin, Câu lệnh có điều kiện) - Trang 67
  • Lý thuyết cốt lõi FLEX (Thuộc tính sử dụng phần tử cha phần tử con) - Trang 36
  • Lý thuyết cốt lõi GRID (căn chỉnh, mẫu lưới, lặp lại, minmax) - 66 trang
  • Ví dụ thực tế về GRID (Bố cục Holly Grail, truy vấn phương tiện) - 19 trang
  • Ví dụ về sử dụng SCSS+FLEX+GRID Tệp HTML - 233
  • Tổng kích thước tệp tải xuống 27 MB

💡 Ưu điểm của sách giáo khoa SCSS(SASS) FLEX GRID Core Theory(PDF)

  • Vì chỉ có nội dung cốt lõi được tạo ở định dạng PDF nên việc học sẽ hiệu quả hơn nhiều so với sách giấy.
  • Có một số ít sách trên thị trường đề cập đến các lý thuyết SCSS (SASS), FLEX và GRID.
  • Vì Coding Works trực tiếp tạo ra tất cả các nguồn bài giảng nên chúng được giải thích theo cách dễ hiểu.


📚 Sách giáo khoa Lý thuyết cốt lõi SCSS(SASS) (PDF) Nội dung lớp học

Chương 01) Giới thiệu và cài đặt SCSS (SASS)

  • Tại sao sử dụng SCSS (SASS) và sự khác biệt giữa SASS và SCSS [Xem video]
  • Compile và CSS Preprocessor là gì? [Tham khảo video]
  • Thiết lập SCSS Live HTML Preview với Visual Studio Code [Video]
  • Cách sử dụng Live Sass Complier trong Visual Studio Code [Video]
  • Không tạo tệp bản đồ trong Trình biên dịch Live Sass của Visual Studio Code
  • Tránh các tiền tố nhà cung cấp trong trình biên dịch Live Sass của Visual Studio Code
  • Định dạng CSS theo 4 cách trong Live Sass Compiler
  • Xóa các dòng trống trong CSS đã biên dịch trong Live Sass Compiler

Chương 02) Lý thuyết cốt lõi của SCSS

  • Bắt đầu với SCSS trong Visual Studio Code
  • Lồng ghép bộ chọn và bình luận
  • Lồng nhau - Tham chiếu đến bộ chọn cha (&)
  • Bộ chọn anh chị em trùng lặp
  • Lồng nhau - Bộ chọn đặc biệt tham chiếu đến phần tử cha
  • Lồng nhau - Thoát khỏi lồng nhau @at-root
  • Lồng nhau - Sử dụng thuộc tính viết tắt CSS
  • Sử dụng Biến
  • Nhập tệp bên ngoài bằng SCSS (@Import)
  • Sử dụng các phép toán trong SCSS - Toán tử số học, Toán tử so sánh, Toán tử logic
  • Khai báo tái sử dụng nhóm @mixin
  • Sử dụng @mixin, @include, các tham số, đối số được khai báo cho @mixin
  • @extend để lấy kiểu của bộ chọn
  • Bộ chọn giữ chỗ %
  • Khối @content để giảm trùng lặp mã khi sử dụng @mixin và @include
  • Câu lệnh điều kiện nếu
  • Nhiều câu lệnh điều kiện @if, @else if, @else
  • vòng lặp @for
  • Vòng lặp @each
  • Kiểu dữ liệu

Chương 03) Ví dụ sử dụng lý thuyết SCSS

  • Điều chỉnh phần đệm trên thiết bị di động bằng cách sử dụng câu lệnh điều kiện @if
  • Xuất ra một chuỗi trong lớp ảo sau khi sử dụng câu lệnh điều kiện @if
  • Sử dụng các bộ chọn CSS chính và các lớp giả chính
  • Liên kết reset.scss với @import
  • Định dạng văn bản bằng cách lồng nhau @mixin
  • @mixin Sử dụng một Mảng làm đối số và trả về đối số với @include
  • Tạo @mixin cho các hiệu ứng thường dùng và sử dụng lại chúng với @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 bằng cách sử dụng từ khóa lồng nhau của bộ chọn &

Trước khi học giáo trình SCSS (SASS) [Phải đọc]

Hãy chắc chắn kiểm tra những điều sau đây!

1) Sách giáo khoa PDF bài giảng SCSS (SASS) này không phải là lớp học được viết theo định dạng dòng lệnh như Ruby.
2) Tất cả quá trình thiết lập và thực hành đều sử dụng VS Code và tiện ích mở rộng Live Sass Compiler . Không có thông tin nào về cách cài đặt và cấu hình Ruby hoặc các lệnh.
3) Không bao gồm các chức năng và chức năng tích hợp.


📚 Sách giáo khoa Lý thuyết cốt lõi FLEX (PDF) Nội dung lớp học

Chương 01) Các thuộc tính được sử dụng trong phần tử cha

  • Hiển thị: flex
  • căn chỉnh nội dung
  • căn chỉnh các mục
  • hướng uốn cong
  • flex-bọc
  • căn chỉnh nội dung

Chương 02) Thuộc tính được sử dụng trong các phần tử con

  • flex-phát triển
  • co giãn
  • flex-cơ sở
  • uốn cong
  • đặt hàng
  • căn chỉnh bản thân
  • Thuộc tính lề được sử dụng bởi các phần tử con

Chương 03) Ví dụ ứng dụng Flex

  • Bố cục (1): Sử dụng tâm dọc và tâm ngang chồng lên nhau
  • Bố trí (2) - Sắp xếp theo chiều ngang các div lồng nhau thành phần cha và phần con
  • Bố cục (3) – Tạo điều hướng hàng đầu
  • Bố cục (4) – Bố cục đáp ứng thẻ ngữ nghĩa


📚 Sách giáo khoa Lý thuyết cốt lõi GRID (PDF) Nội dung lớp học

Chương 01) Lý thuyết cốt lõi của GRID – Các thuộc tính được sử dụng trong các phần tử cha (Container) (1)

  • [Phải đọc] Hiểu về lưới ngang, dọc và mẫu
  • hiển thị: lưới / hiển thị: lưới nội tuyến
  • lưới-mẫu-cột
  • lưới-mẫu-hàng
  • khoảng cách cột lưới / khoảng cách hàng lưới / khoảng cách lưới
  • [Phải đọc] Hiểu về các thuộc tính căn chỉnh lưới
  • biện minh cho các mục
  • căn chỉnh các mục
  • căn chỉnh nội dung
  • căn chỉnh nội dung

Chương 02) Lý thuyết cốt lõi của GRID – Thuộc tính được sử dụng trong các phần tử con (Mục lưới)

  • tự căn chỉnh / tự căn chỉnh
  • [Phải đọc] Các khái niệm cần thiết cho thuộc tính lưới (Số dòng)
  • lưới-cột-bắt đầu / lưới-cột-kết thúc / lưới-cột
  • lưới-hàng-bắt đầu / lưới-hàng-kết thúc / lưới-hàng lưới-cột + lưới-hàng
  • diện tích lưới
  • chỉ số z
  • hàng lưới
  • đặt hàng

Chương 03) Lý thuyết cốt lõi của GRID – Thuộc tính phần tử cha + Thuộc tính phần tử con

  • grid-template-areas và grid-area #01
  • grid-template-areas và grid-area và grid-row
  • grid-template-areas và grid-area #02
  • grid-template-areas và grid-area #03, #04, #05
  • Đặt 9 .items vào phần tử cha #01 – Áp dụng bố cục hàng loạt
  • Đặt 9 .items vào phần tử cha #02 – Áp dụng bố cục hàng loạt
  • Đặt 9 .items vào phần tử cha #03 – Áp dụng bố cục hàng loạt
  • Đặt 9 .items vào phần tử cha #04 – Áp dụng bố cục riêng lẻ
  • Đặt 9 .items vào phần tử cha #05 – Áp dụng bố cục riêng lẻ
  • lưới-mẫu-cột, lưới-mẫu-khu vực, lưới-khu vực

Chương 04) Lý thuyết cốt lõi của GRID – Các thuộc tính được sử dụng trong các phần tử cha (Container) (2)

  • lặp lại(đếm, kích thước)
  • minmax(tối thiểu, tối đa)
  • min-content tự động điều chỉnh chiều rộng tối thiểu
  • Lặp lại, minmax, trùng lặp nội dung min
  • Nếu tự động điền, tự động điều chỉnh không được sử dụng
  • Nếu bạn sử dụng tự động điền
  • Sự khác biệt giữa tự động điền và tự động điều chỉnh
  • lưới-tự-động-chảy



💬 Phải đọc trước khi học sách giáo khoa PDF

H. Chỉ có video hướng dẫn cài đặt SCSS dưới dạng nội dung video thôi phải không?

Bài giảng này là nội dung của cuốn sách xe tăng (PDF) . Việc cài đặt Live Sass Compiler trong Visual Studio Code được giải thích chi tiết trong phần Lý thuyết cốt lõi của SCSS, nhưng vì đây là phần chưa quen nên tôi đã tạo video này để giúp bạn hiểu rõ hơn. Mục đích của cuốn sách và video này là đảm bảo bạn thiết lập nó, vì nếu bạn không cài đặt Live Sass Compiler trong Visual Studio Code, bạn sẽ không thể tiếp tục với phần nội dung còn lại.

H. Sách giáo khoa Lý thuyết Flex Core và sách giáo khoa Lý thuyết Grid Core có nằm trong các bài giảng khác nhau không?

Đúng. Sách giáo khoa Lý thuyết Flex Core và sách giáo khoa Lý thuyết Grid Core được cung cấp cho sinh viên học khóa học có liên quan. Bài giảng Lý thuyết cốt lõi SCSS(SASS) FLEX GRID (PDF) này được thiết kế dành cho những người chỉ muốn học qua sách giáo khoa lý thuyết cốt lõi thay vì qua video. Đối với những ai đã học bài giảng Flex và Grid, sách giáo khoa tương ứng sẽ được bao gồm, vì vậy hãy nhớ học bài giảng Lý thuyết cốt lõi FLEX GRID của SCSS (SASS) (PDF)! Xin lưu ý .


❤ 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 thời gian nghe giảng của giáo viên 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

👨🏼‍🏫 Giới thiệu người chia sẻ kiến ​​thức

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 Inflearn của Coding Works - https://www.inflearn.com/users/@codingworks/blogs

scss, sass, flex, grid, html, css, html/css, website, nhà xuất bản web, việc làm của nhà xuất bản, website, mã hóa, mã hóa, jquery, javascript, jquery, javascript, bố cục, web tương tác, web tương tác, thiết kế web, web thiết kế, danh mục đầu tư, xuất bản, web đáp ứng, bài kiểm tra thực hành kỹ thuật viên 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 cần học lý thuyết cốt lõi về SCSS(SASS) FLEX GRID

  • Dành cho những người muốn xuất bản ở mức trung bình đến cao

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

  • Cơ bản về HTML+CSS Publishing

Xin chào
Đây là

12,421

Học viên

724

Đánh giá

2,093

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ả

13 bài giảng ∙ (1giờ 15phú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ả

11 đánh giá

4.5

11 đánh giá

  • ggamjige8888님의 프로필 이미지
    ggamjige8888

    Đánh giá 13

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

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

      수강평 감사드립니다

  • system님의 프로필 이미지
    system

    Đánh giá 20

    Đánh giá trung bình 4.8

    5

    100% đã tham gia

  • 안정은님의 프로필 이미지
    안정은

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

  • 호누룰루님의 프로필 이미지
    호누룰루

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    좋은 강의 감사합니다 도움이 되었어요

  • 투티니ෆ님의 프로필 이미지
    투티니ෆ

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    46% đã tham gia

    정말 재밌고 유익합니다! 다른 강의들 다 듣고 마지막에 듣는데, 이 강의도 완전히 습득해서 잘 취직이 되었으면 좋겠습니다 ㅎ

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!