inflearn logo

Các tính năng cốt lõi của CSS Flex & Grid học qua 13 ví dụ

Lý thuyết chỉ tập trung vào những điểm cốt lõi một cách nhanh chóng. Hãy học bằng mã nguồn thực tế thay vì chỉ đọc chữ! Làm quen với Flex và Grid một cách tự nhiên thông qua việc học lặp đi lặp lại! 😎 (Bài giảng trực tiếp từ tác giả cuốn Sách trắng tự học HTML5, Sách trắng tự học CSS3)

(4.9) 19 đánh giá

125 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

HTML/CSS
HTML/CSS
Flex
Flex
HTML/CSS
HTML/CSS
Flex
Flex

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

4.9

5.0

대랭

8% đã tham gia

Sẽ rất tốt nếu tiếp tục nghe sau khi nghe bài giảng cơ bản. Sẽ thật tuyệt nếu có mức độ khó tiếp theo để nghe sau khi nghe bài giảng này.

5.0

gangsugi

100% đã tham gia

Tôi biết nó ở một mức độ nào đó, nhưng tôi tự hỏi liệu mình có bỏ lỡ điều gì mà tôi không biết không, vì vậy tôi đã nghe nó và nó rất hữu ích. Lời giải được giải thích từng bước nên không hề nhàm chán và tôi rất thích nghe. Đó là một bài giảng hay ^^

5.0

이종운

100% đã tham gia

Các bài giảng khác nhàm chán và khó hiểu nên tôi đã nghĩ rất nhiều đến việc từ bỏ việc trở thành nhà phát triển web, nhưng nhờ có thầy, Cảm ơn bạn chúc bạn học vui vẻ

Bạn sẽ nhận được điều này sau khi học.

  • Bố cục CSS Flex

  • Bố cục CSS Grid

  • Cách viết CSS Media Query

  • Cách sử dụng Font Awesome & Google Web Fonts

CSS, giờ là lúc thực chiến!
Hãy kết thúc sự phức tạp của Flex & Grid chỉ trong một lần học.

Chủ đề bài giảng 📖

Nắm vững các kỹ năng cơ bản của các tính năng cốt lõi!

  • Tóm tắt nhanh gọn những lý thuyết cốt lõi về Flex và Grid - các tính năng chuyên dụng cho bố cục trong CSS!
  • Thông qua việc thực hành các ví dụ thực tế, bạn sẽ học được cách sử dụng Flex và Grid khi trực tiếp tạo bố cục!

Tại sao bạn nên tham gia khóa học này? 🚀

Tôi nắm vững lý thuyết nhưng không thể tạo ra sản phẩm như ý muốn 😥

Các tính năng của Flex và Grid có rất nhiều thuộc tính cần phải ghi nhớ, thậm chí chúng trông còn khá giống nhau nữa. Chính vì vậy, có rất nhiều người nói rằng dù khi nghe giảng hay nhìn vào thì hiểu các thuộc tính đó có chức năng gì, nhưng đến khi thực sự bắt tay vào làm thì lại không biết cách sử dụng Flex và Grid để tạo ra bố cục (layout) như mình mong muốn.

Đâu đó ở giữa ranh giới mơ hồ giữa kiến thức cơ bản và việc thực hiện dự án thực tế! Dành cho những ai đang loay hoay tại đó. Tôi nghĩ bài giảng này cực kỳ phù hợp với những người như vậy. Chỉ cần làm theo các ví dụ thực hành, bạn sẽ sớm nắm bắt được cách làm thôi.

Dạ? Tôi muốn trở thành nhà phát triển web mà?

Khi tư vấn cho những người bạn đang chuẩn bị xin việc, chuyển việc hoặc mới bắt đầu nhập môn lập trình, tôi thấy có khá nhiều bạn đang xem nhẹ phần 'thiết kế'. Tôi cũng nhận được rất nhiều câu hỏi rằng liệu lập trình viên không cần biết HTML, CSS có được không.

Tôi thường ví nhà phát triển giống như những người nông dân. Nếu việc phát triển là trồng táo, thì dịch vụ mà tôi phát triển chính là những quả táo sẽ bán cho người tiêu dùng, đúng không? Việc lập bố cục (layout) cũng giống như quá trình đóng gói táo vào hộp vậy. Nhà phát triển cũng cần phải có khả năng đóng gói sản phẩm của mình theo đúng ý đồ ít nhất là ở mức tối thiểu!


Đặc điểm của khóa học ✨

  • Từ A đến Z! Tóm tắt nhanh chóng các tính năng cốt lõi của Flex và Grid.
  • Thông qua các ví dụ thực hành, củng cố nền tảng của các tính năng cốt lõi.

Sau khi hoàn thành khóa học này 📜

Tôi có phải... học thuộc hết tất cả những thứ này không? 😱

Câu hỏi mà tôi nhận được nhiều nhất khi dạy về Flex và Grid chính là liệu có phải học thuộc lòng tất cả vô số các tính năng của chúng hay không. Sau khi học xong khóa học này, bạn sẽ hiểu rõ một điều rằng: để tạo ra những bố cục mà mình mong muốn bằng Flex và Grid, bạn không nhất thiết phải ghi nhớ hay sử dụng tất cả mọi tính năng của chúng!

Chỉ cần nắm vững các tính năng cốt lõi, bạn có thể tạo ra bố cục mình mong muốn một cách dễ dàng và đơn giản mà không cần phải viết quá nhiều mã!


Câu hỏi thường gặp Q&A 💬

Q. Người không chuyên cũng có thể nghe bài giảng này chứ?

A. Vâng! HTML và CSS thì ngay cả những bạn không chuyên, học sinh cấp 2 hay cấp 3 cũng đều có thể học một cách dễ dàng. Tuy nhiên, bạn cần phải nghe bài giảng cơ bản về HTML và CSS trước. Bài giảng cơ bản đang được cung cấp miễn phí tại kênh Youtube <Developer Lee Do-hae>!

Tất cả trong một về cú pháp cơ bản HTML5 & CSS3
Học kiến thức cơ bản về web một cách dễ dàng và nhanh chóng

Q. Tại sao lại tập trung thực hành chỉ những tính năng cốt lõi?

A. Dựa trên kết quả dạy dỗ rất nhiều học sinh (?), thay vì đưa ra từng ví dụ cho mỗi tính năng để dạy 10 tính năng, việc tập trung vào dưới 3 tính năng cốt lõi nhất định phải biết để thực sự làm chủ được chúng và cho học sinh học lặp đi lặp lại 3~4 ví dụ cho mỗi tính năng đó mang lại hiệu quả cao hơn rất nhiều! Thực sự là hiệu quả hơn rất nhiều. Vì mục tiêu của bài giảng này cũng tương tự như vậy, nên tôi đã xây dựng lớp học tập trung vào việc thực hành các tính năng cốt lõi để bạn có thể đưa ngay những gì mình đang nghĩ lên màn hình sau khi nghe giảng.

Q. Nội dung khóa học bao gồm đến cấp độ nào?

A. Nếu chia độ khó thành các mức nhập môn, cơ bản, trung cấp và cao cấp, thì đây là mức độ khó tương ứng với trình độ cơ bản.


Giới thiệu người chia sẻ kiến thức ✒️

Lee Do-hae

Tôi đang hoạt động với tư cách là một nhà phát triển full-stack và giảng viên lập trình.

  • Tác giả cuốn 『Sách tự học HTML5』
  • Tác giả của 『Sách tự học CSS3』
  • Tác giả cuốn 『Sách tự học Javascript』

Xem trước một chút các ví dụ thực hành 😎

Tác giả trực tiếp giảng dạy!
Hãy cùng xem qua các cuốn sách nhé.

Sách tự học HTML5 (nhấp vào)
Sách tự học CSS3 (Nhấp vào)

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

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

  • Những người vừa mới hoàn thành việc học ngữ pháp cơ bản HTML & CSS

  • Những ai muốn trải nghiệm các ví dụ thực hành Flex & Grid

  • Những người cần luyện tập bố cục (layout) trước khi viết portfolio.

  • Dành cho những ai muốn nắm vững Flex & Grid phức tạp chỉ trong một lần duy nhất

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

  • Ngữ pháp HTML cơ bản

  • Ngữ pháp CSS cơ bản

Xin chào
Đây là erumcoding

4,664

Học viên

179

Đánh giá

30

Trả lời

4.9

Xếp hạng

7

Các khóa học

ErumCoding

Cùng nhau lập trình ước mơ! 🚀

Thêm

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

Tất cả

50 bài giảng ∙ (3giờ 48phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

19 đánh giá

4.9

19 đánh giá

  • gangsugi5753님의 프로필 이미지
    gangsugi5753

    Đánh giá 23

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Tôi biết nó ở một mức độ nào đó, nhưng tôi tự hỏi liệu mình có bỏ lỡ điều gì mà tôi không biết không, vì vậy tôi đã nghe nó và nó rất hữu ích. Lời giải được giải thích từng bước nên không hề nhàm chán và tôi rất thích nghe. Đó là một bài giảng hay ^^

    • roykean19930688님의 프로필 이미지
      roykean19930688

      Đánh giá 35

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      Các bài giảng khác nhàm chán và khó hiểu nên tôi đã nghĩ rất nhiều đến việc từ bỏ việc trở thành nhà phát triển web, nhưng nhờ có thầy, Cảm ơn bạn chúc bạn học vui vẻ

      • kkkh07129094님의 프로필 이미지
        kkkh07129094

        Đánh giá 11

        Đánh giá trung bình 5.0

        5

        80% đã tham gia

        Dễ học css

        • coachmsoox2658님의 프로필 이미지
          coachmsoox2658

          Đánh giá 1

          Đánh giá trung bình 5.0

          5

          8% đã tham gia

          Sẽ rất tốt nếu tiếp tục nghe sau khi nghe bài giảng cơ bản. Sẽ thật tuyệt nếu có mức độ khó tiếp theo để nghe sau khi nghe bài giảng này.

          • zd님의 프로필 이미지
            zd

            Đánh giá 7

            Đánh giá trung bình 5.0

            5

            100% đã tham gia

            Tôi nghe rõ lắm.

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

            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!

            Giảm 25% cho thành viên mới

            536.620 ₫

            25%

            715.490 ₫