CSS Cơ Bản đến Nâng Cao - Làm Chủ Giao Diện Web Chuyên Nghiệp

Tìm hiểu về CSS, cách liên kết với HTML và những khái niệm cơ bản

• Giới thiệu về CSS và vai trò trong web development

  Tìm hiểu về CSS, lịch sử phát triển và tầm quan trọng trong thiết kế web
• Cách liên kết CSS với HTML (Inline, Internal, External)

  Học các cách khác nhau để áp dụng CSS vào HTML và best practices
• CSS Selectors - Class, ID, Element

  Hiểu về các loại selector cơ bản để chọn và styling HTML elements
• CSS Properties cơ bản - Color, Font, Text

  Học cách thay đổi màu sắc, font chữ và định dạng text
• CSS Units - px, em, rem, %, vh, vw

  Học về css units - px, em, rem, %, vh, vw
• CSS Comments và Best Practices

  Học về css comments và best practices
• DevTools - Inspect và Debug CSS

  Học về devtools - inspect và debug css
• Bài tập thực hành: Styling văn bản cơ bản

  Học về bài tập thực hành: styling văn bản cơ bản

Hiểu về Box Model, Margin, Padding, Border và các kỹ thuật layout

• CSS Box Model - Margin, Border, Padding, Content

  Học về css box model - margin, border, padding, content
• Width, Height và Box-sizing

  Học về width, height và box-sizing
• Display Property - Block, Inline, Inline-block

  Học về display property - block, inline, inline-block
• CSS Position - Static, Relative, Absolute, Fixed

  Học về css position - static, relative, absolute, fixed
• Float và Clear (Legacy Layout)

  Học về float và clear (legacy layout)
• Z-index và Stacking Context

  Học về z-index và stacking context
• Overflow và Visibility

  Học về overflow và visibility
• Background Properties - Color, Image, Position

  Học về background properties - color, image, position
• Bài tập thực hành: Tạo layout cơ bản với Position

  Học về bài tập thực hành: tạo layout cơ bản với position

Làm chủ CSS Flexbox và Grid - công cụ layout hiện đại

• Giới thiệu về Flexbox và khi nào sử dụng

  Học về giới thiệu về flexbox và khi nào sử dụng
• Flex Container Properties - display, direction, wrap

  Học về flex container properties - display, direction, wrap
• Flex Item Properties - grow, shrink, basis

  Học về flex item properties - grow, shrink, basis
• Justify-content và Align-items

  Học về justify-content và align-items
• CSS Grid - Giới thiệu và Grid Container

  Học về css grid - giới thiệu và grid container
• Grid Template - Rows, Columns, Areas

  Học về grid template - rows, columns, areas
• Grid Item Placement và Grid Lines

  Học về grid item placement và grid lines
• Responsive Layout với Flexbox và Grid

  Học về responsive layout với flexbox và grid
• Bài tập thực hành: Website layout với Grid và Flexbox

  Học về bài tập thực hành: website layout với grid và flexbox

Thiết kế responsive, mobile-first và tối ưu cho mọi thiết bị

• Mobile-first Design và Viewport Meta Tag

  Học về mobile-first design và viewport meta tag
• Media Queries - Breakpoints và Syntax

  Học về media queries - breakpoints và syntax
• Responsive Images và Picture Element

  Học về responsive images và picture element
• Responsive Typography với clamp() và vw units

  Học về responsive typography với clamp() và vw units
• Container Queries (CSS mới nhất)

  Học về container queries (css mới nhất)
• Testing Responsive Design

  Học về testing responsive design
• Performance và Optimization

  Học về performance và optimization
• Bài tập thực hành: Responsive Landing Page

  Học về bài tập thực hành: responsive landing page

CSS Animations, Variables, Preprocessors và kỹ thuật nâng cao

• CSS Transitions - Property, Duration, Timing-function

  Học về css transitions - property, duration, timing-function
• CSS Animations và Keyframes

  Học về css animations và keyframes
• Transform 2D và 3D

  Học về transform 2d và 3d
• CSS Variables (Custom Properties)

  Học về css variables (custom properties)
• CSS Functions - calc(), min(), max(), clamp()

  Học về css functions - calc(), min(), max(), clamp()
• Pseudo-classes và Pseudo-elements nâng cao

  Học về pseudo-classes và pseudo-elements nâng cao
• CSS Grid và Flexbox nâng cao

  Học về css grid và flexbox nâng cao
• CSS Architecture - BEM, OOCSS, SMACSS

  Học về css architecture - bem, oocss, smacss
• Sass/SCSS Introduction

  Học về sass/scss introduction
• Project cuối khóa: Portfolio Website hoàn chỉnh

  Học về project cuối khóa: portfolio website hoàn chỉnh