Quangkhoi1228 | Knowledge base
  • Về trang chủ
  • Lời nói đầu
  • Nhập môn lập trình web
    • Giáo trình
    • Class 01: Hello HTML!!!
    • Class 02: HTML: Comment, Text formatting, Attribute, Link
    • Class 03: HTML: Style, Inline/Block element, Image
    • Class 04: HTML: List, Table, Responsive
    • Class 05: Hello CSS!!!
    • Class 06: CSS: Flexbox, Layout
    • Class 07: Hello Javascript!!!
    • Class 08: JS: Operator, Expression, For/While Loop, Function
    • Class 09: JS: Search Function
    • Project 1: Layout Structure
    • Project 2: Search Function
    • Project 3: MVP
    • Review "Lập trình Frontend Website"
  • Lập trình Frontend Website
    • Class 01: Ôn tập HTML
    • Class 02: Thảo luận HTML
    • Class 03: Ôn tập CSS
    • Class 04: Chrome dev tools, CSS Box Model
    • Class 05: CSS: Position, Đơn vị đo
    • Class 06: CSS: hiệu ứng, responsive
    • Class 07: Thảo luận CSS
    • Class 08: Ôn tập JS
    • Class 09: JS: Mảng, Đối tượng, Biến tham chiếu và tham trị
    • Class 10: JS: Class, Pair programming
    • Class 11: JS: DOM, UI Rendering
  • Lập trình ReactJS
    • Class 01: Giới thiệu ReactJS
    • Class 01: Tạo dự án ReactJS mới
    • Class 02: ReactJS Component
    • Class 02: Import/Export component
    • Class 03: useState hook
    • Class 04: Project 1: UI cơ bản
    • Class 05: Render có điều kiện và danh sách
    • Class 06: useEffect hook
    • Class 07: Project 2: Xử lý user logic
    • Class 08: Project 3: Hoàn thiện dashboard
    • Class 09: Form và dữ liệu người dùng
    • Class 10: UseRef và thao tác với DOM
    • Class 11: Project 4: Xử lý form data
    • Class 12: Project 5: Hoàn thiện form data
    • Class 13: useMemo và useCallback
    • Class 14: Custom Hook
    • Class 15: Project 6: Hoàn thiện project
    • Class 16: Ôn tập
  • Lập trình NestJS
    • Class 01: Giới thiệu NestJS & Cài đặt dự án
    • Class 02: Routing, Controller và Dependency Injection
    • Class 03: Service và Data Validation
    • Class 04: Kết nối Database với TypeORM
    • Class 05: Quan hệ trong Database (OneToMany, ManyToOne) với TypeORM
    • Class 06: Middleware, Interceptor, Guard
    • Class 07: Authentication – JWT
    • Class 08: Authorization – Phân quyền
    • Class 09: File Upload & Configuration
    • Class 10: Giới thiệu WebSocket
    • Class 11: Project 1
    • Class 12: Project 2
    • Class 13: Project 3
    • Class 14: Project 4
    • Class 15: Project 5
    • Class 16: Project 6
  • Lập trình Java cơ bản
    • Class 01: Khai giảng
    • Class 02: Hello Java
    • Class 03: Biến và kiểu dữ liệu
    • Class 04: Toán tử và biểu thức
    • Class 05: Câu lệnh điều kiện
    • Class 06: Review 1
    • Class 07: Vòng lặp For
    • Class 08: Vòng lặp While / Do-while
    • Class 09: Java Method
    • Class 10: Review 2
    • Class 11: Java User Input
    • Class 12: Java File
    • Class 13: Final Exam 1
    • Class 14: Final Exam 2
    • Review "Lập trình OOP với Java"
  • Lập trình OOP với Java
    • Class 01: Hello OOP
    • Class 02: Class Attribute và Method
    • Class 03: Constructor, Modifier và Package
    • Class 04: Review 1
    • Class 05: Tính kế thừa và đa hình
    • Class 06: Tính trừu tượng và đóng gói
    • Class 07: Review 2
    • Class 08: Final Exam 1
    • Class 09: Final Exam 2
    • Review "CTDL và Giải thuật với Java"
  • CTDL và Giải thuật với Java
    • Class 01: Hello Data Structure
  • HTML
    • Cài đặt công cụ cơ bản
    • HTML là gì?
    • Phần tử HTML
    • Cấu trúc file HTML cơ bản
    • Comment trong HTML
    • Format văn bản trong HTML
    • Thuộc tính HTML
    • Liên kết(link) trong HTML
    • Project: Professional Email
    • HTML Style
    • Phần tử Inline và Block
    • HTML Image
    • HTML List
    • HTML Table
    • Head trong HTML
    • HTML Responsive
    • Project: Online Cover Letter
  • CSS
    • Giới thiệu CSS
    • CSS Selector
    • Thêm CSS vào trang
    • Comment trong CSS
    • Màu sắc trong CSS
    • CSS Background
    • CSS Border
    • CSS Spacing
    • CSS Flexbox
    • HTML Layout
    • Chrome dev tools
    • CSS Box Model
    • CSS Position
    • Đơn vị đo trong CSS
    • CSS Pseudo-classes
    • CSS Responsive
  • JavaScript
    • Giới thiệu Javascript
    • Thêm JS vào trang
    • Các hàm có sẵn
    • Biến và kiểu dữ liệu
    • JS Mảng
    • JS Đối tượng
    • JS Biến Tham Chiếu và Tham Trị
    • Toán tử và biểu thức
    • Câu lệnh điều kiện
    • Vòng lặp For / While
    • Hàm (Function)
    • Chức năng tìm kiếm với JS và DOM
    • JS Class
    • JS DOM
    • JS Dom Rendering
  • Java
    • Giới thiệu Java
    • Chương trình Hello world
    • Phân biệt JVM, JRE, JDK
    • Java Comment
    • Biến trong Java
    • Kiểu dữ liệu trong Java
    • Java Array
    • Toán tử trong Java
    • Biễu thức trong Java
    • Java If-else
    • Java Switch
    • Vòng lặp For trong Java
    • Vòng lặp While trong Java
    • Vòng lặp Do-while trong Java
    • Java Method
    • Java OOP
    • Java Class và Object
    • Java Class attribute
    • Java Class method
    • Java Constructor
    • Java Modifier
    • Java Package
    • Java Tính kế thừa
    • Java Tính đa hình
    • Java Tính trừu tượng
    • Java Tính đóng gói
    • Java User Input
    • Java File
  • Soft skills
    • Pair Programming
  • Web design and wireframe
  • NextJS
    • Tạo dự án NextJS mới
  • NestJS
    • Giới thiệu NestJS
    • NestJS controller
    • NestJS module
  • Git
    • Setup SSH key với GitHub
  • Bash
    • Giới thiệu Bash/Shell Script
  • Wordpress
    • Thêm custom routes
    • Deploy with ubuntu
  • Deployment
    • SSH server, đổi password và add SSH key
    • Tạo user mới và add SSH key
    • Page
  • GitBook
    • Custom domain with CloudFlare
  • Hướng dẫn khác
    • Gitbook custom domain with Cloudflare
    • Cấu hình OpenVPN
    • Cấu hình và lấy SSH key
    • Công cụ lập trình
      • Visual Studio Code
      • Cài đặt IntelliJ IDEA
    • Đường dẫn file trong HTML
    • CI/CD github action
  • Project: CV online
Powered by GitBook
On this page
  • Đi nhanh
  • Nội dung
  • Bài tập
  1. Nhập môn lập trình web

Class 06: CSS: Flexbox, Layout

PreviousClass 05: Hello CSS!!!NextClass 07: Hello Javascript!!!

Last updated 1 year ago

Đi nhanh

Nội dung

Bài tập

  1. Hoàn thiện game CSS Froggy:

Màu sắc trong CSS
CSS Background
CSS Border
CSS Spacing
CSS Flexbox
HTML Layout
https://flexboxfroggy.com/