Chia Sẻ Khóa Học Responsive Design Cho Beginner (Basic + ULTIMATE + PREMIUM) [Khóa 5639 A]
Khóa học về cách xây dựng trang web từ thiết kế bằng HTML, CSS và JS.
Bạn đã học những kiến thức cơ bản về HTML và CSS… giờ thì sao?
Chắc chắn rồi, bạn có thể làm theo hướng dẫn và tìm kiếm câu trả lời trên Google khá nhiều, nhưng ý nghĩ bắt đầu một dự án website hoàn toàn mới khiến bạn sợ hãi.
Bạn đang cố gắng hết sức để học từng chút một. Nhưng bạn cảm thấy mình bị mắc kẹt trong việc cố gắng sửa các lỗi CSS kỳ lạ thường xuyên hơn là viết code thành công.
Bạn thậm chí phải bắt đầu từ đâu?
Tưởng tượng…:
- ✓ Không phải chỉ ngồi nhìn chằm chằm vào VS Code editor trống rỗng của bạn mà còn biết cách bắt đầu tạo các file website của mình.
- ✓ Có khả năng dịch các file Figma design thành một front-end website đẹp mắt trên mọi thiết bị.
- ✓ Cảm thấy thoải mái khi sử dụng cả flexbox và grid, và biết khi nào nên sử dụng từng loại.
- ✓ Không phải viết spaghetti code, mà là tổ chức các CSS style của bạn bằng các CSS layer và thuộc tính tùy chỉnh theo cách hợp lý, ngay cả sau nhiều tuần hoặc nhiều tháng.
- ✓ Hiểu cách thức hoạt động của CSS, thậm chí cả một số phần kỳ quặc hơn (à , khó chịu hơn).
Nghe có vẻ tuyệt vời, nhưng làm sao để đạt được điều đó?
Khóa học này sẽ chỉ cho bạn cách tư duy như một web developer chuyên nghiệp.
Việc xem các hướng dẫn rất tuyệt vời, nhưng không giống như việc chứng kiến một chuyên gia xây dựng một website từ một thiết kế, từ đầu.
Trong khóa học này, tôi sẽ hướng dẫn bạn từng bước trong quy trình xây dựng một website từ đầu với HTML, CSS và JavaScript.
Tôi cũng sẽ giải thích lý do và cách tôi đưa ra quyết định trong suốt quá trình - điều mà hầu hết các hướng dẫn web dev khác đều thiếu. Hãy tưởng tượng việc này giống như có một senior developer hướng dẫn bạn xây dựng toàn bộ website - và được đặt câu hỏi cho họ trong suốt quá trình!
Tất nhiên, bạn có thể tự mình làm điều tương tự, nhưng tôi có thể giúp bạn tiết kiệm rất nhiều thời gian bằng cách hướng dẫn bạn phương pháp hiệu quả để xây dựng website.
Mục tiêu cuối cùng của tôi là giúp bạn đạt đến điểm mà bạn cảm thấy tự tin vào kỹ năng CSS của mình và thoải mái với khả năng nghiên cứu và giải quyết vấn đề - ngay cả đối với những điều bạn không biết rõ.
Khóa học này có gì ?
Khóa học này có định dạng hơi khác so với các khóa học khác mà bạn có thể đã thấy.
Thay vì tập trung mỗi bài học vào các thuộc tính hoặc chủ đề CSS khác nhau, toàn bộ khóa học sẽ hướng dẫn bạn xây dựng một website từ một Figma design và cách xử lý các vấn đề thường gặp trong quá trình thực hiện.
Khóa học Responsive Design cho Beginner thực chất bao gồm 2 khóa học: BASIC & ULTIMATE.
Khóa học BASIC kéo dài 22 giờ và bao gồm:
- ✓ 17 giờ nội dung giới thiệu: thiết lập VS Code, GitHub và cách sử dụng Figma.
- ✓ 5 giờ xây dựng một website cơ bản hơn, phù hợp cho người mới bắt đầu.
Khóa học ULTIMATE (10 giờ) sẽ tiếp tục mở rộng và chúng tôi sẽ xây dựng thêm các phần yêu cầu kỹ năng khó hơn, cũng như một animated hamburger menu bằng JavaScript.
Tại sao tôi lại định dạng khóa học theo cách này?
Qua nhiều năm làm việc trong lĩnh vực tiếp thị và quảng cáo, tôi nhận ra rằng một phần quan trọng của việc trở thành một web developer là khả năng giải quyết vấn đề và cách xây dựng X, Y và Z.
Sẽ không có khách hàng nào hỏi bạn về tất cả các giá trị có thể có của thuộc tính position trong CSS. Họ không quan tâm đến điều đó.
Điều họ quan tâm là liệu bạn có thể làm cho các thẻ đó thành 3 cột trên desktop và xếp chồng thành 1 cột trên mobile hay không. Hoặc đảm bảo hình ảnh sản phẩm của họ không bị vỡ hạt và kỳ lạ trên màn hình Retina.
Tham gia khóa học này sẽ cố gắng mô phỏng công việc của một web developer trong cuộc sống thực :
- ✓ Thiết lập workflow của bạn trong VS Code.
- ✓ Tổ chức các project file của bạn.
- ✓ Tạo một GitHub repository để theo dõi các thay đổi.
- ✓ Điều hướng một Figma design và diễn giải nó thành các CSS style.
- ✓ Sử dụng Google Fonts để tải các phông chữ tùy chỉnh.
- ✓ Xây dựng một website dễ truy cập, responsive với HTML, CSS và JavaScript.
- ✓ Khắc phục sự cố về style của bạn với các Firefox Developer Tool.
- ✓ Deploy website của bạn lên Netlify.
Được thôi, nhưng thực ra tôi sẽ học được gì?
Tôi cố tình thiết kế website và chương trình giảng dạy để giải quyết các design pattern và vấn đề CSS phổ biến nhất mà bạn sẽ gặp phải.
Một số chủ đề chúng tôi sẽ đề cập trong mỗi khóa học:
Khóa học Basic (22 giờ):
- ✓ Sử dụng các semantic HTML tag thích hợp.
- ✓ Viết các style hiệu quả với: class name được tổ chức, custom property và helper/utility class.
- ✓ CSS cascade.
- ✓ Normal flow với inline, inline-block & block element cùng những điểm kỳ lạ với chúng.
- ✓ Layout với flexbox & grid.
- ✓ Khi nào sử dụng các CSS unit như px, em, rem, ch, %, v.v.
- ✓ Các thuộc tính CSS tùy chỉnh cho color & font.
- ✓ Responsive image với srcset và DPR (Tỷ lệ điểm ảnh của thiết bị).
- ✓ SVG & inline SVG image.
- ✓ Animated hover effects với CSS transition.
- ✓ Linear-gradient() background.
- ✓ Thực hiện phép toán trong CSS với calc() function.
Khóa học Ultimate (10 giờ):
- ✓ Animated underline & background cho hover state.
- ✓ CSS grid template area và các named grid line.
- ✓ SVG shapes.
- ✓ Absolute positioning element.
- ✓ Sử dụng ::before & ::after pseudo-element.
- ✓ Styling form element.
- ✓ Xây dựng một hamburger menu animated, dễ truy cập với JS.
- ✓ Stacking contexts & z-index.
- ✓ Mapping out color theme với các thuộc tính CSS tùy chỉnh.
- ✓ Xây dựng một block grid với CSS grid, auto-fit, and minmax().
- ✓ Overlapping content với CSS grid và position absolute.
- ✓ Sizing image với object-fit và object-position.
- ✓ Thêm filter vào hình ảnh với mix-blend-mode.
Những gì bạn sẽ học:
- ✓ Học cách dịch các file Figma design thành các responsive front-end website.
- ✓ Nắm vững các module Sass, mixin, CSS custom property và các tính năng nâng cao.
- ✓ Hiểu khi nào và cách sử dụng cả flexbox và CSS grid một cách hiệu quả.
- ✓ Tổ chức các file SCSS và viết code sạch, dễ bảo trì.
- ✓ Xây dựng các website với semantic HTML phù hợp, responsive typography và animation.
- ✓ Deploy các website bằng các công cụ và quy trình phát triển hiện đại.
- ✓ Khắc phục các sự cố CSS bằng các browser developer tool.
Khóa học này dành cho ai?
- ✓ Các web developer mới bắt đầu biết kiến thức cơ bản về HTML và CSS.
- ✓ Các nhà phát triển tự học muốn cải thiện kỹ năng CSS của mình.
- ✓ Các developer gặp khó khăn khi xây dựng các dự án thực tế từ đầu.
- ✓ Các Back-end developer muốn cải thiện kỹ năng front-end.
- ✓ Bất kỳ ai muốn tìm hiểu các web development workflow chuyên nghiệp.
Mục lục chính:
Khóa 1: Basic Responsive Design cho Beginner:
- ✓ 01. Bắt đầu.
- ✓ 02. Giới thiệu về Sass và Responsive Design.
- ✓ 03. BASIC Website Setup.
- ✓ 04. Global Styles.
- ✓ 05. Top Navigation.
- ✓ 06. Hero.
- ✓ 07. 3-Column Features.
- ✓ 08. Full-width Feature.
- ✓ 09. Testimonial.
- ✓ 10. Full-width CTA.
- ✓ 11. Footer.
- ✓ 12. Deployment và hoàn thiện!
Khóa 2: ULTIMATE Responsive Design cho Beginner:
- ✓ 1. Giới thiệu và Setup.
- ✓ 2. Top Nav & Hamburger Menu.
- ✓ 3. Testimonial.
- ✓ 4. Blog Posts.
- ✓ 5. Compiling Sass với Vite JS.
Khóa 3: PREMIUM Responsive Design cho Beginner.