Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

Bước đầu làm quen với phát triển trang web cho người không chuyên #HTML, #CSS

Để trở thành một nhà phát triển web, bạn cần học rất nhiều kỹ năng. Trong số rất nhiều kỹ năng đó, chúng ta sẽ cùng tìm hiểu về HTML, CSS, những kiến thức cơ bản nhất trong việc tạo một trang web mà bạn cần học đầu tiên. Bạn sẽ học cách viết HTML, CSS, và cuối cùng là thực hiện một dự án tạo một trang web giống với trang web thực tế là Amazon. Và chúng ta sẽ tạo URL cho dự án đã tạo và triển khai nó.

2 học viên đang tham gia khóa học này

  • banana7468
웹개발
웹사이트개발
html
CSS
HTML/CSS
github-desktop

Dịch cái này sang tiếng Việt

  • Lý thuyết HTML để tạo các thành phần của trang web

  • Lý thuyết CSS để thiết kế các thành phần của trang web

  • Dự án lập trình bằng HTML/CSS

  • Quản lý code đã tạo trên trang web github bằng github-desktop

  • Tạo trang web đã xây dựng thành một địa chỉ như naver.com

Những bước đầu tiên trong phát triển trang web cho người không chuyên ( HTML , CSS )

Tôi muốn trở thành một nhà phát triển tạo ra các trang web... nhưng tôi không biết nên học gì trước??

1. Bước đầu tiên trong phát triển trang webHTML / CSS !

Để xây dựng một ngôi nhà, bạn cần quyết định những yếu tố nào sẽ có trong ngôi nhà và cách thiết kế ngôi nhà .

Tương tự với các trang web.

Để xây dựng một ngôi nhà gọi là trang web, bạn cần sử dụng HTML để quyết định những thành phần nào sẽ được đưa vào trang web.

Thiết kế phần tử đó bằng CSS .

Quyết định những thành phần nào sẽ có trong HTML và thiết kế những thành phần đó bằng CSS.

HTMLCSS là những ngôn ngữ cơ bản nhất để tạo ra các trang web nên chúng là ngôn ngữ máy tính đầu tiên mà các nhà phát triển trang web phải học .


Vì vậy, nếu bạn xem khảo sát của Stack Overflow về các nhà phát triển vào năm 2024, bạn sẽ thấy rằng HTML / CSS là ngôn ngữ máy tính phổ biến thứ hai, vì đây là ngôn ngữ cơ bản nhất để tạo ra một trang web!!

2. Khóa học này dành cho những người chưa có kinh nghiệm phát triển web.

Tôi giới thiệu điều này tới những người này!

Tôi không phải là chuyên gia và cũng chưa từng viết mã trước đây.

Tôi là một chuyên gia, nhưng đây là lần đầu tiên tôi phát triển một trang web.

Bài giảng HTML / CSS này dành cho những người chưa có kinh nghiệm phát triển trang web .

Vì vậy, bất kể chuyên ngành hay kinh nghiệm viết mã của bạn là gì, tôi đều giới thiệu khóa học này cho bất kỳ ai mới bắt đầu phát triển trang web.

Không cần người chơi phải có kiến ​​thức!!

3. Do đó, bài giảng có những đặc điểm sau:

- Bài giảng dễ hiểu

Tôi đã cố gắng giải thích một cách đơn giản nhất có thể . Bài giảng này dành cho những người không có kiến ​​thức về phát triển trang web , vì vậy tôi đã trình bày sao cho dễ hiểu ngay cả với học sinh tiểu học .

- Lặp lại nhiều

HTML / CSS là ngôn ngữ dễ học hơn so với các ngôn ngữ máy tính khác. Tuy nhiên, đối với những người lần đầu tiên thử viết mã, họ có thể cảm thấy lạ lẫm và có rất nhiều điều phải ghi nhớ.

Vì vậy, chúng ta lặp lại cùng một nội dung nhiều lần thông qua việc lặp lại nhiều lần trong bài giảng + quá trình ôn tập sau bài giảng .

- Tóm tắt bài giảng được cung cấp

Đối với những người gặp khó khăn trong việc tập trung vào bài giảng khi ghi chép hoặc bị căng thẳng vì phần tóm tắt , chúng tôi cung cấp bản tóm tắt bài giảng !! (tệp pdf)

Đối với những bạn đã học HTML / CSS trước đây, các bạn có thể bỏ qua phần này nếu bạn đã nắm rõ 100% nội dung sau khi đọc tóm tắt bài giảng!!

4. Sau khi tham dự bài giảng, bạn có thể tạo ra kết quả như thế này.

Sau khi hoàn thành bài giảng lý thuyết HTML và bài giảng lý thuyết CSS, sẽ có một dự án mã hóa bản sao !!

Đây là dự án tạo ra một trang web tương tự như trang chủ của Amazon !!

Ngoài ra , hãy tạo một địa chỉ URL cho trang web đã hoàn thành để những người khác có thể truy cập.

( Các ví dụ dưới đây có chất lượng thấp hơn bài giảng thực tế)

Trang đăng nhập

  • Không gian nhập ID và mật khẩu

  • Nút Gửi thông tin

  • Hoạt hình thay đổi trạng thái

Trang chủ chính

  • Bố cục trang

  • Hoạt ảnh thay đổi trạng thái, hoạt ảnh chạy tự động


Trang sản phẩm chi tiết

  • Bố cục trang

  • Hoạt ảnh thay đổi trạng thái, hoạt ảnh chạy tự động

Các trang web phản hồi thay đổi tùy theo kích thước màn hình

  • Thay đổi bố cục của trang web tùy thuộc vào kích thước màn hình

  • Các trang cũng áp dụng cho điện thoại di động và máy tính bảng

5. Nội dung bài giảng

Tìm hiểu cách tạo trang web , quản lý mãtriển khai trang web dựa trên các lý thuyết cơ bản của HTML / CSS.

Mục tiêu cũngphát triển khả năng tìm kiếm và sử dụng thông tin bổ sung về HTML / CSS mà không cần sự trợ giúp của người khác .

Phần 2: Lý thuyết HTML (Miễn phí!!)

Tìm hiểu những kiến ​​thức cơ bản về HTML, quyết định những thành phần nào sẽ có trên một trang web.

  • Ngữ pháp HTML (thẻ, thuộc tính)

  • Cấu trúc cơ bản của HTML

Phần 3: CSS lý thuyết

Tìm hiểu những kiến ​​thức cơ bản về CSS , được sử dụng để thiết kế các thành phần được xác định trong HTML .

  • Cú pháp CSS (bộ chọn, thuộc tính)

  • Cấu hình bố cục (mô hình hộp, flex, vị trí, truy vấn phương tiện)

Phần 4: CSS Lý thuyết chuyên sâu

CSS lớn hơn HTML . Tìm hiểu về ngữ pháp bổ sung thường dùng và cách thêm hình ảnh động .

  • Cú pháp CSS bổ sung (bộ chọn, thuộc tính)

  • Tạo hoạt ảnh (chuyển tiếp, biến đổi, hoạt ảnh)

Phần 5: Quản lý mã bạn đã tạo , theo dõi các thay đổi

Khi tôi viết mã dài, tôi cảm thấy bối rối về quy trình tôi đã trải qua để viết mã đó. Ngoài ra, việc cộng tác viết code cũng trở nên khó khăn. Để thực hiện điều này , bạn sẽ học cách sử dụng GitHub để tạo không gian lưu trữ mã, quản lý mã theo dõi các thay đổi .

  • github , github-desktop , cam kết

Phần 6: Mã hóa bản sao Amazon

Hãy sử dụng mọi kiến ​​thức đã học để tạo một trang web tương tự như trang mua sắm ở nước ngoài Amazon .

  • Cách sắp xếp các tập tin , quy ước viết mã , cú pháp bổ sung

Phần 7: Triển khai Website , Tạo Địa chỉ

Với sự trợ giúp của github, bạn có thể tạo một dự án hoàn chỉnhphân phối cho người khác bằng cách tạo một địa chỉ trang web như naver.com hoặc google.com .

  • lưu trữ github , triển khai

Phần 8: Tạo một trang web đáp ứng

(Ban đầu tôi chỉ định viết đến Mục 7... nhưng tôi muốn bài giảng đầy đủ hơn) Hãy làm cho trang web của chúng ta hoạt động được ngay cả trên màn hình nhỏ như màn hình điện thoại di động.

  • Ẩn các thành phần trên màn hình nhỏ , thay đổi bố cục trang web

6. Lưu ý trước khi tham gia lớp học

Tài liệu học tập

  • Tóm tắt bài giảng được tải lên cho bài giảng 1 và 22.


Kiến thức và ghi chú của người chơi

  • Cung cấp mã được viết trong một dự án thực tế.

  • Video có phụ đề riêng. Vui lòng tắt phụ đề trên trang Inflearn

  • Tôi khuyên bạn nên đọc tóm tắt bài giảng một lần trước khi nghe bài giảng.

  • Bản quyền bài giảng và tóm tắt thuộc về "Banana Coder"

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

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

  • Người mới bắt đầu phát triển trang web

  • Nếu bạn không biết nên học gì đầu tiên khi phát triển trang web

  • Những bạn mới bắt đầu làm quen với ngôn ngữ máy tính

Xin chào
Đây là

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

Tất cả

77 bài giảng ∙ (12giờ 25phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

1.164.107 ₫

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!