Cách học HTML và CSS nhanh

Khi nắm lấy cơ hội của cả cuộc đời, tôi đã thực hiện một sự thay đổi nghề nghiệp. tôi chuyển sang công nghệ. Chắc chắn, tôi đã chọn không làm việc trong ngành của mình. Ben đã nói nhiều hơn về nó trong bài báo của anh ấy về làm việc trong ngành bạn học

Tôi đã viết bài báo đầu tiên của mình để ghi lại hành trình của mình, vì vậy đây là nhiều hơn

Khi bắt đầu thực tập, tôi sẽ học thiết kế giao diện người dùng/Phát triển Front-End. Điều đó có nghĩa là học các công nghệ của web. Html/CSS/Javascript. Trong bài đăng này, tôi muốn chia sẻ những gì tôi đã học được cho đến nay

Trước tiên, tôi muốn chia sẻ một số điều độc đáo về nghề nghiệp trong kỹ thuật phần mềm/phát triển web hoặc bất kỳ lĩnh vực công nghệ nào. Trong lĩnh vực công nghệ này, bạn phải có khả năng

1. Dạy bản thân bất cứ điều gì. Cách để trở thành một lập trình viên hay người nói được nhiều thứ tiếng là có thể tự học bất cứ thứ gì- và cũng nhanh chóng

2. Làm theo chỉ dẫn. Kỹ năng này rất quan trọng vì hầu hết các tài liệu hướng dẫn (pdf, video) sẽ cung cấp cho bạn các hướng dẫn mà bạn phải có khả năng làm theo

Điều đó nói rằng, nếu bạn muốn tìm hiểu HTML/CSS, đây là cách dựa trên kinh nghiệm của tôi

Đầu tiên. có rất nhiều tài nguyên trên web để tìm hiểu những công nghệ này. Bạn sẽ tìm thấy cả tài nguyên trả phí và miễn phí. Lưu ý rằng miễn phí không nhất thiết có nghĩa là chúng không có giá trị. Nhưng dựa trên kinh nghiệm của tôi, tôi muốn giới thiệu các bước dưới đây

1. Kết thúc Codecademy. com khóa học về HTML/CSS. Khóa học của Codecademy là khóa học miễn phí. Nó giúp bạn bắt đầu học cách tạo các trang web của mình. Trong khóa học này, bạn sẽ làm quen với cú pháp và cách sử dụng HTML/CSS. Họ có một trình duyệt tích hợp trên trang web. Điều này giúp bạn thấy ngay kết quả công việc của mình. Tuy nhiên, một nhược điểm là trình duyệt codecademy không có nhiều chỗ để thử nghiệm. Hầu hết thời gian bạn phải viết mã theo hướng dẫn trong các câu hỏi. Nếu không, trình duyệt sẽ không chạy

2. Đọc sách của Jon Duckett. “HTML & CSS. Thiết kế và xây dựng trang web. “Cuốn sách này là một tuyệt vời. Rất giải thích. Nó lấp đầy lỗ hổng kiến ​​thức còn sót lại khi tôi tham gia khóa học Codecademy về HTML/CSS

3. Kết thúc khóa học giới thiệu về HTML/CSS của Udacity. Khóa học này là dope. Sau một thời gian tham gia khóa học codecademy, bạn sẽ rất muốn truyền kiến ​​thức của mình cho bạn. Bạn muốn thiết kế một cái gì đó. Bạn sẽ muốn thấy trí tưởng tượng của mình trở nên sống động trên màn hình. Khóa học này giúp bạn làm được điều đó. Nó trải qua quá trình thực sự thiết kế một trang web thay vì chỉ giới thiệu cú pháp. Khi kết thúc khóa học này, bạn sẽ xây dựng được một trang web đáp ứng

Giờ đây, khóa học Udacity này là khóa học giới thiệu về Nanodegree dành cho Nhà phát triển web giao diện người dùng của Udacity. Nếu bạn có đủ khả năng, bằng mọi cách, hãy mua khóa học này và hoàn thành nó

Tuy nhiên, tôi khuyên bạn nên tham gia một khóa học như khóa học của Codecademy về HTML/CSS trước khi tham gia khóa học của Udacity. Điều này là do nếu bạn tham gia khóa học của Udactity trước, bạn có thể không biết các thẻ được đề cập được sử dụng để làm gì

4. Tài nguyên này từ tài nguyên w3 là tuyệt vời. Nó chứa các bài tập kiểm tra kiến ​​thức của bạn về HTML/CSS. (http. //www. w3resource. com/html-css-bài tập/chỉ mục. php)

Cuối cùng, cách tốt nhất để học bất cứ điều gì là…thực hành, thực hành, thực hành. Thực hành tất cả những gì bạn đã học. Xây dựng một cái gì đó

Chúc mừng

P. S Nếu bạn biết một cách nhanh hơn hoặc tốt hơn để học HTML/CSS hoặc một tài nguyên học tập tuyệt vời, vui lòng chia sẻ trong phần nhận xét bên dưới

HTML là ngôn ngữ đánh dấu được sử dụng để cấu trúc và trình bày nội dung trên World Wide Web. Cùng với CSS và JavaScript, nó cho phép chúng tôi có các trang web đẹp và tương tác

Vì HTML là nền tảng của web nên nó cũng là ngôn ngữ cần thiết nhất cho bất kỳ con đường sự nghiệp phát triển web nào. Trong phần hướng dẫn nhanh này, tôi sẽ dạy bạn những kiến ​​thức cơ bản nhất về nó

Và khi bạn hoàn thành, tôi đã triển khai khóa học 14 phần miễn phí về HTML5 trên Scrimba. com — một nền tảng tương tác, nơi bạn có thể nhập mã của một chương trình truyền hình đang phát vào bất kỳ thời điểm nào

Bạn có thể xem bài giảng đầu tiên tại đây

Được rồi, trước khi chúng ta chuyển sang phần HTML, tôi muốn bắt đầu bằng cách cho bạn biết một chút về kiến ​​trúc của trang web. Điều này sẽ đặt vai trò của HTML vào quan điểm đối với chúng tôi

Kiến trúc web cơ bản

Khi bạn đã phát triển một trang web, bạn sẽ cần lưu trữ trang web đó trên một máy chủ để có thể truy cập trang web trên toàn thế giới. Tất cả các máy chủ đều có một địa chỉ IP (tôi. e 149. 56. 240. 169) mà bạn có thể coi là số điện thoại. Chúng tôi thường đặt một tên miền (i. e. viết kịch bản. com) qua địa chỉ IP đó, để dễ nhớ hơn

Khi bạn nhập tên miền đó vào trình duyệt, nó sẽ gọi cho máy chủ. Sau đó, máy chủ sẽ gửi một loạt các tệp HTML, CSS và JavaScript, như thế này

Trình duyệt của bạn bắt đầu bằng cách tải tệp HTML chính, trước khi tiếp tục với CSS và JavaScript. Các tệp này cho phép trình duyệt hiển thị một trang web đẹp và tương tác

Bây giờ chúng ta hãy xem xét kỹ hơn vai trò của ba ngôn ngữ này

HTML là gì?

Hãy tưởng tượng một trang web như một người. Chúng tôi sẽ sử dụng sự tương tự này để hiểu trang web của chúng tôi. HTML được mô tả tốt nhất là bộ xương

CSS là gì?

Tuy nhiên, chỉ một trang web HTML đơn giản trông khá xấu, vì vậy bạn sẽ cần tạo kiểu cho nó bằng CSS. Nó có thể được coi là da và quần áo của trang web

JavaScript là gì?

Khi bạn thành thạo CSS, bạn nên tiếp tục với JavaScript. Theo cách tương tự của chúng tôi, đây giống như bộ não và cơ bắp của trang web của chúng tôi

Viết tệp HTML đầu tiên của bạn

Để có thể viết HTML, bạn sẽ cần một tài liệu HTML, đây chỉ là một tài liệu có. phần mở rộng html. Không quan trọng bạn sử dụng trình soạn thảo văn bản nào, nhưng những trình soạn thảo văn bản phổ biến nhất hiện nay là Sublime Text, VS Code và Atom. Bạn cũng có thể sử dụng Scrimba làm trình chỉnh sửa trong trình duyệt

Hãy tạo một tệp mới và gọi nó là chỉ mục. html và viết Hello world! trong đó

Hello world!

Nếu chúng tôi kéo tệp này vào trình duyệt hoặc trỏ trình duyệt đến địa chỉ của tệp này, chúng tôi sẽ nhận được như sau

Nó trông như thế nào trong Scrimba khi bạn mở chỉ mục của chúng tôi. tệp html trong cửa sổ trình duyệt

Xin chúc mừng, bạn hiện đã tạo trang web đầu tiên của mình

Thẻ HTML đầu tiên của bạn

Tuy nhiên, chúng tôi chưa viết bất kỳ thẻ HTML nào. Để làm điều đó, hãy bọc văn bản Hello world! trong các thẻ <h1>, như thế này

Hello world!

<h1> đầu tiên là thẻ mở và thẻ thứ hai_______1_______0 là thẻ đóng. Như bạn có thể thấy, sự khác biệt chỉ là dấu gạch chéo ngược trong thẻ đóng. Điều này sẽ dẫn đến những điều sau đây trên trang

Bây giờ bạn đã nói với trình duyệt rằng bạn muốn văn bản Hello world! làm tiêu đề. Do đó, trình duyệt áp dụng một số kiểu dáng cho nó, về cơ bản là tăng kích thước của văn bản

Vì vậy, thật dễ dàng để bắt đầu viết HTML

Viết một tài liệu HTML phù hợp

Nhưng đây thực sự không phải là một tài liệu HTML hợp lệ, vì chúng phải tuân theo một cấu trúc được xác định rõ ràng. Với mục đích của hướng dẫn này, tôi chỉ đơn giản là trình bày ngắn gọn cho bạn và sau đó chúng ta sẽ tiếp tục với những nội dung thú vị

Đây là ví dụ về Hello world! của chúng ta sẽ như thế nào

          

Hello world!

Bạn không phải lo lắng về

Hello world!

3PE

Hello world!

4

Hello world!

5; . Hãy tiếp tục với điều đó

đoạn văn

Bên dưới thẻ h1, chúng tôi sẽ thêm một đoạn văn. Thẻ này thường được sử dụng cho các đoạn văn bản

________số 8_______

Đây là giao diện của nó

danh sách

Now let’s add a list. To do that, we need to add two different tags, <ul>

Hello world!

8d
  • . The former stands for unordered list and the latter stands for list item. We’ll need

    Hello world!

    9rap the
  •           

    Hello world!

    0gs inside the
      tag.

      • Eat
      • Sleep
      • Code

      Nếu bạn thay đổi <ul>

                

      Hello world!

      2n

      trường đầu vào

      Nhận đầu vào từ người dùng là một hoạt động quan trọng trên các trang web. Hãy thêm một trường đầu vào

      Cái nào sẽ thêm trường đầu vào ở cuối trang web của chúng tôi

      Bây giờ có hai khái niệm mới để tìm hiểu ở đây. thuộc tính và thẻ tự đóng. Cái đầu tiên, thuộc tính, cung cấp thông tin bổ sung về các phần tử HTML

      Trong trường hợp của chúng tôi, chúng tôi đang thêm hai thuộc tính. loại và giữ chỗ. Loại cho trình duyệt biết rằng đây phải là một trường văn bản. Ở đây, chúng tôi có thể đã chọn giữa một loạt các loại (đài, chọn, hộp kiểm, ngày tháng) sẽ biến nó thành các phần tử hoàn toàn khác

      Trình giữ chỗ đọc văn bản trợ giúp bên trong phần tử

      Cuối cùng, thẻ input cũng là phần tử tự đóng (hay còn gọi là phần tử void. ), nghĩa là nó không bao gồm thẻ mở và thẻ đóng mà chỉ có một thẻ tự đóng

      Bước tiếp theo

      Còn rất nhiều thứ để học trong HTML và nó không khó chút nào. Khóa học đầy đủ của tôi có thể được hoàn thành trong vòng chưa đầy một giờ và nó sẽ cung cấp cho bạn sự hiểu biết vững chắc về những điều cơ bản và cho phép bạn bắt đầu xây dựng các trang web thực sự

      Nếu bạn muốn ăn nhiều hơn, chúng tôi có một bữa ăn 14 món miễn phí
      trong khóa học Tìm hiểu HTML5 miễn phí của tôi tại Scrimba. com

      Hẹn gặp bạn ở đó. ?

      QUẢNG CÁO

      QUẢNG CÁO

      QUẢNG CÁO

      QUẢNG CÁO

      QUẢNG CÁO

      QUẢNG CÁO

      QUẢNG CÁO

      QUẢNG CÁO


      Nếu bài viết này hữu ích, hãy tweet nó

      Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

      Cách nhanh nhất để học CSS và HTML là gì?

      Bây giờ bạn đã quen thuộc với một số mục đích của HTML, hãy đi sâu vào những cách tốt nhất để tìm hiểu nó. .
      Tạo trang web. Tạo các trang web là một trong những cách tốt nhất để học HTML. .
      Xem Hướng dẫn HTML trực tuyến. .
      Tham gia khóa học Giới thiệu về HTML và CSS của Udacity

      Tôi có thể học HTML và CSS trong 10 ngày không?

      Bạn có thể mất 1-2 tuần để hoàn thành khóa học và khoảng một tháng thực hành để làm quen với HTML và CSS . Điều quan trọng là áp dụng các dự án học tập và xây dựng của bạn. Dự án đơn giản nhất bạn có thể tạo là trang web cá nhân của riêng bạn.

      Làm cách nào tôi có thể học HTML CSS Nhanh chóng và miễn phí?

      Học HTML bằng CodeCademy [ Khóa học tương tác miễn phí] . Trong khóa học Codecademy miễn phí này, bạn sẽ học tất cả các thẻ HTML phổ biến được sử dụng để cấu trúc các trang HTML, bộ khung của tất cả các trang web.

      Chúng ta có thể học HTML CSS trong 1 tuần không?

      May mắn thay, những kiến ​​thức cơ bản về HTML thực sự khá dễ nắm bắt đối với người học bình thường. Bạn có thể bắt đầu chọn HTML sau vài giờ. Bạn sẽ mất từ ​​một đến hai tuần để nắm được toàn bộ ý chính của HTML và khoảng một tháng thực hành để làm quen với ngôn ngữ này.