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.
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.
■ [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 디자인 및 퍼블리싱