강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

Bài giảng front-end dành cho back-end của lập trình viên back-end - Căn bản

Chúng tôi sẽ cung cấp cho những người tìm việc đã tạo danh mục đầu tư với tư cách là nhà phát triển phụ trợ nhưng không có gì để hiển thị ngoài API, với kinh nghiệm tạo một dịch vụ web duy nhất bằng cách thêm giao diện người dùng.

(5.0) 20 đánh giá

252 học viên

  • foo
백엔드개발자
frontend
javascript
html
css
HTML/CSS
JavaScript
Bootstrap

Đánh giá từ những học viên đầu tiên

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

  • Phát triển front-end tài sản cho các nhà phát triển back-end

  • Khái niệm cơ bản về HTML, CSS, JavaScript

FE mà các nhà phát triển backend cần biết,
Chúng tôi sẽ nhanh chóng chỉ cho bạn những 'điểm chính thực sự'!

Lưu ý dành cho các nhà phát triển backend mới bắt đầu!
Bạn có đang gặp phải bất kỳ mối lo ngại nào sau đây không?

🤔

Tôi là một lập trình viên backend, nhưng tôi có thực sự cần biết về frontend không? Tôi hoàn toàn không có kiến thức cơ bản về lĩnh vực này...

😥

API được thiết kế tốt, nhưng tôi không biết cách viết mã giao diện sử dụng API .

🤨

Tôi đang chuẩn bị cho công việc lập trình viên backend và tôi nghĩ mình sẽ cần tạo ra một dịch vụ web có đầy đủ chức năng .

Vậy thì trong bài giảng này!

  • ✅ Khóa học được thiết kế để các nhà phát triển backend có thể nhanh chóng bắt đầu phát triển frontend.
  • ✅ Bạn sẽ học về front-end để có thể nhanh chóng triển khai chỉ mức chức năng cần thiết.

Ngay cả khi bạn chỉ biết cách viết mã FE đơn giản,
Nó sẽ giúp bạn tìm kiếm việc làm và sự nghiệp!

Sau một thời gian dài hướng dẫn và quan sát nhiều người tìm kiếm việc làm lập trình viên back-end, tôi nhận thấy nhiều người cảm thấy front-end quá khó để theo đuổi hoặc coi đó là một lĩnh vực không mấy quan trọng. Tuy nhiên, có một sự khác biệt rất lớn giữa việc xây dựng một dịch vụ API như một danh mục đầu tư và việc xây dựng một "dịch vụ web" duy nhất kết hợp back-end và front-end .

1️⃣

Tôi có thể tạo một dịch vụ web hoàn chỉnh bằng cách viết mã FE sử dụng máy chủ API mà tôi đã tạo.

2️⃣

Thiết kế API lấy khách hàng làm trung tâm cho phép phát triển phần phụ trợ tốt hơn .

3️⃣

Bạn sẽ có thể cộng tác tốt hơn và chặt chẽ hơn với các nhà phát triển front-end.

4️⃣

Sau khi gia nhập công ty, bạn có thể phát triển backend/frontend đồng thời và với tốc độ cao khi phát triển các hệ thống nội bộ.

Tôi đã lên kế hoạch cho bài giảng này với ý tưởng rằng bằng cách làm cho phần front-end dễ tiếp cận hơn, những người đang chuẩn bị đi làm hoặc thay đổi nghề nghiệp với tư cách là nhà phát triển back-end sẽ có thể tạo ra danh mục đầu tư hợp lý và hấp dẫn hơn .

Chúng tôi sẽ mang đến cho bạn trải nghiệm tạo dịch vụ web bằng cách bổ sung các khả năng front-end vào kỹ năng phát triển API của bạn!


Chỉ trong bài giảng này
Hãy xem xét các tính năng.

01
Động lực cũng ổn

Trước khi bắt đầu bài giảng, tôi sẽ giải thích lý do tại sao các nhà phát triển backend cần biết về frontend .

02
Chỉ những điểm chính, ngắn gọn

Chúng tôi chỉ đề cập đến nội dung cốt lõi cần thiết cho phát triển front-end và mạnh dạn loại bỏ nội dung không cần thiết .

03
Nội dung quan điểm thực tế

Tôi đã đưa vào bài giảng những điểm cần lưu ý khi phát triển front-end, dựa trên kinh nghiệm của tôi (cài đặt mã hóa, v.v.).

04
Hoàn hảo cho người mới bắt đầu

Tỷ lệ lý thuyết và thực hành xấp xỉ 4:6. Khóa học này được thiết kế cho người mới bắt đầu và các nhà phát triển mới vào nghề, những người chưa từng làm việc với phát triển front-end, hoặc đã thử nhưng không thể tạo ra giao diện người dùng như mong muốn.

Bạn có muốn tìm hiểu thêm không?

Tôi nhận thấy nhiều người chuẩn bị cho công việc backend thường thắc mắc: "Liệu các nhà phát triển backend có thực sự cần biết về frontend không?" Tuy nhiên, tôi tin rằng việc có một số kiến thức về frontend thực sự có ích cho các nhà phát triển backend.

Vì vậy, đối với những ai đang nghĩ như vậy, hãy để tôi giải thích lý do tại sao các nhà phát triển backend cần phải biết frontend .

Khi các nhà phát triển backend xây dựng frontend, họ thường phải quyết định nên sử dụng một công cụ mẫu như Thymeleaf hay một phương pháp khác. Sau đây, chúng tôi sẽ giải thích sự khác biệt giữa từng phương pháp và phương pháp được đề xuất của chúng tôi .

Bạn có nghĩ rằng công cụ dành cho nhà phát triển là lĩnh vực độc quyền của các nhà phát triển front-end không? Chúng tôi sẽ giải thích cách sử dụng các công cụ thiết yếu cho cả nhà phát triển front-end và back-end.

Chúng tôi sẽ trình bày những kiến thức cơ bản về HTML, những yếu tố thiết yếu cho việc xây dựng giao diện người dùng (UI), và các thẻ thường dùng . Mặc dù bạn sẽ không học hết mọi thẻ, nhưng một khi đã hiểu những thẻ phổ biến nhất, bạn sẽ có thể tự mình triển khai hầu hết các giao diện người dùng (UI) chỉ bằng những tìm kiếm đơn giản.

Nó được cấu trúc để giúp bạn nhanh chóng học ngữ pháp JavaScript dựa trên sự khác biệt giữa ngữ pháp JavaScript và Java.

Khóa học này bao gồm các nguyên tắc cơ bản về CSS cần thiết để tạo giao diện người dùng (UI) hấp dẫn. Khóa học cũng đề cập đến cú pháp bộ chọn thường dùng, rất cần thiết để điều khiển các phần tử HTML bằng CSS và JavaScript.

Tôi sẽ hướng dẫn bạn quy trình xác định giao diện người dùng (UI) bạn cần, cách tìm và áp dụng giao diện đó, kiểm tra các thuộc tính CSS tìm thấy thông qua các công cụ dành cho nhà phát triển, rồi phản ánh chúng vào mã nguồn của bạn. Bằng cách làm theo quy trình này, bạn sẽ có thể tìm và áp dụng ngay cả những thuộc tính UI mà bạn chưa từng thử trước đây.

Xây dựng một giao diện người dùng (UI) tốt ngay từ đầu có thể rất khó khăn, phải không? Hãy cùng khám phá cách tùy chỉnh UI của bạn bằng Bootstrap, một framework front-end được sử dụng rộng rãi.

Việc phát triển front-end đã trở nên dễ dàng hơn với sự ra đời của ChatGPT! Đây là điều tôi đã trải nghiệm trong quá trình làm việc của mình, vì vậy ngay cả những người mới bắt đầu phát triển front-end cũng sẽ thấy việc phát triển UI dễ dàng hơn với ChatGPT .

Tất nhiên, bạn cần có hiểu biết cơ bản về front-end để sử dụng ChatGPT. Khóa học này sẽ hướng dẫn bạn những kiến thức cơ bản. Sau đó, với kiến thức nền tảng đó, bạn có thể sử dụng ChatGPT để viết mã front-end một cách nhanh chóng và dễ dàng.

Foo(푸) Người tạo ra bài giảng này

Trong những năm gần đây, tôi nhận thấy những người chuẩn bị cho vị trí lập trình viên backend thông qua các khóa học bootcamp và các chương trình khác dường như chỉ tập trung vào phát triển backend mà bỏ bê phát triển frontend. Tất nhiên, vì họ hướng đến vị trí lập trình viên backend, nên backend đương nhiên quan trọng hơn.

Tuy nhiên, tôi tin rằng ngay cả các lập trình viên back-end cũng nên có khả năng phát triển ít nhất một phần front-end. Như tôi đã thảo luận trong các bài giảng của mình, việc có một lập trình viên back-end am hiểu về front-end mang lại rất nhiều lợi thế.

Vì vậy, thông qua khóa học này, tôi hy vọng sẽ giúp các lập trình viên backend, những người còn hoàn toàn mới, nhanh chóng nắm bắt được những khái niệm frontend cơ bản cần thiết cho việc phát triển backend. Tôi hy vọng khóa học này sẽ giúp các lập trình viên backend có được những kỹ năng phát triển frontend cơ bản, hữu ích cho công việc và cuộc sống của họ. 😄


Hỏi & Đáp 💬

H. Tại sao các nhà phát triển backend nên học frontend?

Mặc dù điều này có thể mang tính chủ quan, nhưng có một số lý do. Thứ nhất, không phải tất cả lập trình viên backend đều làm việc với lập trình viên frontend. Thứ hai, việc phát triển UI cho phép bạn hiểu cách người dùng tương tác với dịch vụ của mình, từ đó tạo ra các API tốt hơn. Thứ ba, đối với người tìm việc, thành thạo frontend là một lợi thế cho cả việc chuẩn bị hồ sơ năng lực và phỏng vấn. Thứ tư, chỉ những người hiểu biết về frontend mới có thể tự mình tạo ra một dịch vụ web. Thứ năm, việc quan sát dữ liệu được trao đổi giữa backend và frontend, hành vi của header và các khía cạnh khác sẽ giúp bạn hiểu rõ hơn về HTTP.

Chúng tôi đã giới thiệu sơ lược về khóa học "Tại sao Lập trình viên Backend cần biết về Frontend" ở phần đầu chương trình học. Vui lòng tham khảo nội dung để biết thêm chi tiết.

H. Bạn bao quát phần front-end đến mức nào?

Như đã nêu trong chương trình học, bạn sẽ nhanh chóng và dễ dàng học những kiến thức cơ bản về HTML, JavaScript và CSS, sau đó phát triển giao diện người dùng (UI) cho một dự án API đơn giản. Mặc dù khóa học bao gồm các kỹ năng phát triển cần thiết, nhưng không đề cập đến nhiều chủ đề. Tuy nhiên, khóa học vẫn đề cập đến các nguyên tắc cốt lõi, giúp bạn có thể tự học thêm và tạo giao diện người dùng cho dự án API của riêng mình.

H. Trình độ học viên nào phù hợp với khóa học này?

Kinh nghiệm xây dựng máy chủ API backend được khuyến khích. Mặc dù hướng dẫn này tập trung vào Java, nhưng kinh nghiệm phát triển máy chủ API bằng JSON cũng sẽ hữu ích khi học phát triển frontend.

📢 Vui lòng kiểm tra trước khi tham gia lớp học

  • Khóa đào tạo sẽ được tiến hành dựa trên môi trường Windows 10, Intellij Community 2023.2 và Google Chrome.
  • Mã ví dụ có thể được tìm thấy trên GitHub .
  • Khóa học này lý tưởng cho những người có kinh nghiệm tạo máy chủ API phụ trợ.
  • Nếu bạn có bất kỳ thắc mắc nào trong quá trình học, vui lòng để lại câu hỏi. Tôi sẽ cập nhật thông tin nếu cần thiết.
  • Một số ví dụ và nội dung được sử dụng trong bài giảng này có trong cuốn sách giới thiệu của tôi về phát triển phần mềm, dự kiến xuất bản vào nửa cuối năm 2023. Bài giảng này sẽ mở rộng nội dung trong cuốn sách.

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

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

  • Những người muốn thêm giao diện người dùng vào máy chủ API mà họ đã tạo và biến nó thành một dịch vụ duy nhất

  • Những người không biết gì về phát triển front-end như HTML, CSS và JavaScript

Cần biết trước khi bắt đầu?

  • Kinh nghiệm phát triển máy chủ API, ngay cả khi nó đơn giản

Xin chào
Đây là

5,279

Học viên

229

Đánh giá

105

Trả lời

4.9

Xếp hạng

9

Các khóa học

안녕하세요.

멘토링을 하면서 주니어 개발자들이 어려워 하는 개념들에 대해 어떻게 하면 쉽게 전달할 수 있을지에 대해서 많은 고민을 하고 있는 푸(Foo)라고 합니다.

잘 부탁 드리겠습니다.


이력

  • 2019. 08 ~ 현재 : 카카오 자바 백엔드 개발자

  • 2021. 08 ~ 현재 : programmers 백엔드 데브코스 멘토

  • 2021. 12 ~ 현재 : F-Lab 자바 백엔드 멘토

 

  • 이것이 취업을 위한 백엔드 개발이다 with 자바(링크)

 

기타 이력 및 타 플랫폼 강의들은 아래 GitHub 링크에서 확인할 수 있습니다.

GitHub - https://github.com/lleellee0

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

Tất cả

28 bài giảng ∙ (5giờ 19phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

20 đánh giá

5.0

20 đánh giá

  • 동해물과백두산이마르고닳도록님의 프로필 이미지
    동해물과백두산이마르고닳도록

    Đánh giá 503

    Đánh giá trung bình 5.0

    5

    32% đã tham gia

    프론트엔드 지식 외에도, 백엔드 개발자가 어떤 방식으로 화면 개발을 해나가면 좋을지에 대해 의견을 말씀해주셔서 좋았습니다. 특히, 화면을 직접 만들어 본 경험이 있는 백엔드 개발자일수록 더 좋은 API 스펙을 설계할 수 있다는 의견에 많이 공감 되었습니다. 실습 역시 VSCode 가 아닌 IntelliJ 를 이용하는 등 세심하게 배려해주신 부분들 덕분에 무난하게 따라가며 배울 수 있었습니다. 이전에도 Foo 님께 여러모로 도움 받았는데, 이번에도 좋은 내용으로 강의를 준비해주셔서 감사합니다. 감사히 잘 먹겠습니다 :D

    • 이준형(Foo)
      Giảng viên

      ㅎㅎㅎ haero77님 강의에 대한 디테일한 수강평 감사합니다! 앞으로도 좋은 강의로 보답하겠습니다. (_ _)

  • 이승욱님의 프로필 이미지
    이승욱

    Đánh giá 34

    Đánh giá trung bình 4.8

    4

    96% đã tham gia

    잘들었습니다 감사합니다!

    • 이준형(Foo)
      Giảng viên

      이승욱님 수강평 남겨주셔서 감사합니다! :)

  • 따뜻한 당나귀님의 프로필 이미지
    따뜻한 당나귀

    Đánh giá 12

    Đánh giá trung bình 5.0

    5

    71% đã tham gia

    안녕하세요. 강의 너무 잘 듣고 있습니다. 프론트엔드에서는 지식이 전무해서 곤란했는데 덕분에 많은 도움이 되었습니다. 다름이 아니라 이번에 강의를 통해서 api 를 활용한 간단한 프로젝트를 만들어 보았는데 뭔가 하면 할수록 java script 의 api(json)를 능숙히 다루고 싶어지더라구요. 그래서 혹시 어떤 기술을 배우면 좋을지 한번 여쭈어보고 싶습니다. 감사합니다.

    • 이준형(Foo)
      Giảng viên

      따뜻한 당나귀님 수강평 남겨주셔서 감사합니다. 강의가 도움이 된 것 같아서 다행이네요. :) 질문주신 내용은 결국 프론트엔드를 어떤걸로 해보면 좋을지에 대한 질문인 것 같은데요, 여러가지 프론트엔드 프레임워크가 있지만 가장 무난한 선택은 리액트를 하는걸 추천드립니다. 레퍼런스도 찾기 쉽고 필요하면 하이브리드 앱으로 만들기도 쉬워서요~ 저도 회사에서 내부 운영툴은 만들때 UI로 리액트를 주로 사용하고 있습니다. 궁금하신 내용에 대한 답변이 됐을까요? 또 궁금한 내용 있으면 질문 남겨주세요. 감사합니다.

  • uugold님의 프로필 이미지
    uugold

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    • 이준형(Foo)
      Giảng viên

      uugold 님 수강평 남겨주셔서 감사합니다. (_ _)

  • youngji jang님의 프로필 이미지
    youngji jang

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    32% đã tham gia

    혼자서 하나의 서비스를 구축해보고싶어서 간단한 프론트 강의 찾다가 수강하게 되었습니다. 군더더기 없고 깔끔합니다. 백엔드 개발자로서 헷갈렸던 프론트 개념도 집고 넘어갈 수 있어서 좋았어요. 추천합니다.

    • 이준형(Foo)
      Giảng viên

      youngji jang님 수강해주셔서 감사합니다 ㅎㅎ 프론트엔드가 포함된 서비스 잘 만들어보셨으면 좋겠네요!

567.990 ₫

Khóa học khác của foo

Hãy khám phá các khóa học khác của giảng viên!

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!