Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp

🏆 Bạn sẽ học những nội dung như thế này.

🚀 Triển khai carousel xoay hình ảnh chính ở đầu trang theo xu hướng web, thanh điều hướng sticky-top thay đổi style và dính ở đầu trang khi cuộn, cùng với scrollspy tự động kích hoạt menu theo nội dung bằng cách viết trực tiếp code html, css, js

[[SPAN_1]]💻[[/SPAN_2]][[SPAN_2]]📱[[/SPAN_2]] Triển khai web responsive với kích thước nội dung và vị trí bố cục thay đổi trên desktop, tablet, smartphone bằng cách sử dụng @mediaquery

🎨 Triển khai nội dung với transition, animation của CSS3 giúp thay đổi kích thước hình ảnh hoặc màu sắc nút một cách tự nhiên khi di chuột, và layout thay đổi hình dạng theo kích thước thiết bị

👁‍🗨 Nội dung hiển thị trên desktop, tablet nhưng ẩn trên smartphone và nội dung hiển thị/ẩn khi nhấp vào nút toggle được triển khai trực tiếp bằng mã HTML, CSS, JS

🎬강의소개

Thay vì sử dụng các thiết kế và thành phần tương tự như nhau - điểm yếu lớn nhất của Bootstrap là tạo ra những trang web giống hệt nhau như đúc khuôn, chúng ta sẽ trực tiếp lập trình để tạo ra một trang web thực tế responsive duy nhất theo ý muốn của bạn.

Trong khóa học này, bạn có thể rèn luyện kỹ năng tạo ra những trang web responsive độc đáo và hoàn thiện thông qua việc thực hành xây dựng, sử dụng 100% phương pháp tạo cấu trúc bằng HTML thuần túy và tạo kiểu dáng bằng CSS để phát triển trang web responsive có bố cục thay đổi theo từng thiết bị.

Dành cho những người có kiến thức cơ bản về lý thuyết HTML/CSS/js để tạo thiết kế web, web responsive nhưng khóa học được thiết kế để ngay cả khi thiếu kiến thức cơ bản, bạn vẫn có thể xem lại bài giảng nhiều lần và thực hành theo, đồng thời có thể học cách sử dụng emmet - phương pháp tạo code HTML nhanh chóng bằng các phím tắt được sử dụng trong thực tế.

Không chỉ quan sát nội dung bài gi강 về thực hành制作 bằng mắt, mà thực sự làm theo và tự mình xây dựng từng thành phần web responsive, bạn sẽ không biết khi nào khả năng coding đã được cải thiện và một trang web responsive chất lượng cao được hoàn thành một cách tự nhiên.

Khi sử dụng các framework như Bootstrap, có nhược điểm là kết quả trang web có thể trở nên khá giống nhau do phải sử dụng các tên class có phong cách hạn chế của framework hoặc sử dụng các component đã được tạo sẵn. Để khắc phục điều này, bạn có thể thực hành chi tiết cách tạo ra trang web responsive độc đáo của riêng mình thông qua việc coding trực tiếp mà không cần sử dụng các framework như Bootstrap.

Sau khi hoàn thành khóa học, bạn sẽ cảm thấy việc tạo ra các trang web responsive - vốn từng nghĩ là khó khăn một cách mơ hồ - thực ra lại dễ dàng hơn suy nghĩ, và từ đó bạn sẽ có thể tạo ra những trang web responsive độc đáo của riêng mình một cách dễ dàng và đa dạng.

✨ Đặc điểm của khóa học này

📌 Học cách sử dụng @mediaquery của CSS để tạo layout responsive và thực hành lặp đi lặp lại.

📌 Phần biến đổi thành layout hoặc style mà developer mong muốn cũng được thực hành một cách lặp đi lặp lại.

📌 Để tự tay tạo ra các yếu tố phản ứng động, chúng ta sẽ sử dụng mã js để triển khai các thành phần carousel được sử dụng nhiều nhất trong thực tế và các thành phần có kiểu kích hoạt của menu điều hướng phía trên thay đổi khi cuộn.

📌 Thực hành các kỹ thuật animation được sử dụng nhiều trên các website thực tế để tạo ra web tương tác với các yếu tố thiết kế có animation khi di chuột qua các phần tử mong muốn.

[[SPAN_1]]📌[[/SPAN_2]][[SPAN_2]]Thực hành cách thêm thư viện bằng cách kết nối các plugin bên ngoài để dễ dàng sử dụng nhiều tính năng khác nhau trong mã code mà tôi đã tạo.[[/SPAN_2]]

😃 Tôi khuyến nghị cho những người như thế này

Trong khóa học Fullstack dành cho người không chuyên ngành, mỗi khóa học sẽ dạy những gì?

✔STEP01 | Bootcamp [HTML Starter] dành cho người không chuyên[Click để chuyển đến khóa học]

Ý nghĩa của HTML và cách viết mã cơ bản cũng như tạo layout

Phát triển web giống như việc tạo ra một cửa hàng trực tuyến mà ai cũng có thể đến. HTML là viết tắt của Hyper Text Markup Language, chúng ta sẽ học cách tạo ra khung cơ bản bằng cách sử dụng những thông tin chính tạo nên nội dung cốt lõi của trang web.

✔STEP02 | Bootcamp [CSS3 Web Tương tác Hiện đại] dành cho người không chuyên [Nhấp để chuyển đến khóa học này]

Ý nghĩa của CSS và cách viết mã cơ bản từ đầu đến việc áp dụng style mong muốn vào html để thiết kế web

CSS là viết tắt của Cascading Style Sheet, trong đó Cascading là từ có nghĩa là phân cấp, giống như thác nước. CSS đúng như tên gọi, nó chọn lọc theo cấu trúc phân cấp mối quan hệ cha-con của HTML để áp dụng màu sắc, hình dạng, hoạt ảnh theo phong cách mong muốn cho các phần tử mong muốn, tạo ra và áp dụng các sheet giúp thiết kế web không nhàm chán mà thú vị và đẹp mắt cho người dùng xem. Ngoài ra, cho đến khi có tự tin với CSS, bạn sẽ tích lũy kinh nghiệm tạo ra nhiều thiết kế web đa dạng thông qua việc lặp đi lặp lại việc coding HTML/CSS cho các thiết kế clone của các trang web thực tế khác nhau, thiết kế mobile, thiết kế web.

✔STEP03 | Bootcamp [Từ JS đến React] dành cho người không chuyên[Nhấp để chuyển đến khóa học này]

Làm quen với vanilla script và cú pháp JavaScript ES6, ứng dụng React

Bạn đã từng cảm thấy nản lòng khi học React chưa? Trong lớp học của thầy Kim, để học từng bước JavaScript - nền tảng của React, chúng ta sẽ bắt đầu từ vanilla script, cú pháp JavaScript ES6, jQuery và các cú pháp cơ bản khác thông qua nhiều ví dụ thực hành đa dạng để xây dựng nền tảng vững chắc cho script. Sau đó, thông qua việc hiểu và thực hành các cú pháp đa dạng của React, chúng ta sẽ triển khai bảng tin và chức năng thành viên sử dụng component, state, memoization, đồng thời học cú pháp TypeScript để tạo ra ví dụ thực hành ToDoList, v.v. Chúng tôi sẽ mở ra con đường đến với React mà không bỏ cuộc.

✔STEP04 | Bootcamp [Thiết kế Web Responsive] dành cho người không chuyên[Click để chuyển đến khóa học này]

Hiểu và sử dụng @media query để tạo responsive web, học và ứng dụng Bootstrap - framework giúp dễ dàng tạo responsive

Phân bổ hợp lý giữa lý thuyết và thực hành về cách sử dụng Bootstrap để phát triển trang web responsive có bố cục thay đổi theo thiết bị, hiểu các thành phần của Bootstrap và kiểm tra ngay lập tức thông qua thực hành, cuối cùng hoàn thành việc triển khai một trang web responsive thực tế.

Ngoài ra, dành cho những ai muốn tạo ra trang web responsive với phong cách cá nhân độc đáo thay vì sử dụng style có sẵn của Bootstrap, chúng ta sẽ thực hành tạo ra các layout đa dạng cho từng thiết bị bằng cách sử dụng thuần túy html/css/jQuery mà không dùng Bootstrap, và làm chủ kỹ năng này thông qua việc tạo trang web responsive của Hansot Dosirak.

✔STEP05-1 | Bootcamp [Cơ bản JAVA] dành cho người không chuyên [Nhấp để chuyển đến khóa học tương ứng]

Bắt đầu từ việc hiểu và thực hành các ngữ pháp cơ bản nhất để nắm vững ngữ pháp cơ bản và trung cấp của Java

Bạn sẽ học Java - ngôn ngữ cơ bản nhất của phát triển web backend, bắt đầu từ những cú pháp cơ bản nhất và dần dần tiến tới trình độ trung cấp. Thông qua các bài thực hành đa dạng, bạn sẽ tự nhiên có được khả năng tự mình lập trình những chương trình mong muốn.

✔STEP05-2 | Bootcamp [Từ cơ bản đến nâng cao JAVA] dành cho người không chuyên[Nhấp để chuyển đến khóa học tương ứng]

Hiểu và thực hành từ cơ bản đến ngữ pháp nâng cao của Java

Collection Framework của Java là một thư viện nội bộ tích hợp sẵn các lớp lưu trữ đúng như tên gọi collection - thu thập, tức là lưu trữ. Bằng cách học các cú pháp đa dạng có thể nhóm và quản lý, lưu trữ các kiểu dữ liệu khác nhau ở một nơi, và thực hành các ví dụ đa dạng từ cơ bản đến nâng cao của Java, chúng ta sẽ tạo nền tảng vững chắc cho việc phát triển web backend.

✔STEP05-3 | Bootcamp [Oracle SQL] dành cho người không chuyên[Nhấp để chuyển đến khóa học tương ứng]

Hiểu biết và thực hành về Database

Tạo bảng cơ sở dữ liệu (DB) và thực hành CRUD để đọc, ghi, sửa đổi, xóa dữ liệu trong db, qua đó học và thực hành cú pháp SQL để chuẩn bị sử dụng db khi đăng ký thành viên, đăng nhập hoặc viết bài trên diễn đàn.

✔STEP06 | Bootcamp [Từ JSP đến SpringBoot] dành cho người không chuyên [Click để chuyển đến khóa học này]

Từ JSP đến Spring Boot

Bạn có từng trải qua việc học Spring Boot - framework được sử dụng nhiều nhất trong thực tế hiện nay - rồi cảm thấy nản lòng không?

Trong lớp học của thầy Kim, để hiểu hoàn hảo Spring Boot, chúng ta sẽ bắt đầu học từ cú pháp cơ bản nhất là JSP, trực tiếp cảm nhận sự tiến hóa của cú pháp backend từ thế hệ trước đến thế hệ hiện tại, tự nhiên nắm vững các khái niệm và cách sử dụng, đồng thời hiểu được nguyên lý hoạt động của Spring Boot - framework tự động triển khai backend cho phát triển web.

Nắm vững hoàn toàn các kiến thức cơ bản để tạo portfolio thông qua việc thực hành các khái niệm cơ bản và ứng dụng của ORM, JPA, entity, hiểu biết về Spring Security và triển khai chức năng thành viên sử dụng security, thực hành junit test và cách sử dụng h2 console, từ đó sử dụng Spring Boot để xây dựng website thực tế có chức năng thành viên và bảng tin, cho đến việc hợp tác qua GitHub.

✔STEP07 | Xây dựng dịch vụ web cho triển khai thực tế [Từ hosting đến AWS]

[Nhấp để chuyển đến khóa học tương ứng]

Hoàn thiện dịch vụ web với hosting và triển khai AWS

Bạn có từng trải qua cảm giác bức bối khi dự án mình phát triển chỉ chạy được trong máy tính của mình mà không thể triển khai thành dịch vụ thực tế không?

Trong lớp học của thầy Kim, chúng ta không chỉ dừng lại ở việc viết code đơn thuần, mà sẽ học từng bước từ web hosting sử dụng Dothome cho đến triển khai dự án trên GIT, AWS EC2 - toàn bộ quy trình một cách chi tiết.

Kết nối tên miền, tải lên FTP, triển khai thông qua GitHub, đóng gói jar, cấu hình máy chủ, chỉ định đường dẫn tải lên hình ảnh, thực thi không gián đoạn bằng nohup - bạn có thể nắm vững quy trình triển khai cần thiết trong thực tế.

Thông qua quá trình này, tôi sẽ tích lũy kinh nghiệm thực sự công bố website mình tạo ra với thế giới, đồng thời có được sự tự tin như một developer và năng lực vận hành dịch vụ thực tế.

#java #java #hỗtrợquốcgia #bootcamp #springboot #springboot #frontend #backend #fullstack #fullstackdeveloper #jsp #react #react #frontend #backend #fullstack #html #css #css3 #bàigiảngcoding #lớphọccoding #cơbảncoding #họcviệncoding #họccoding #javascript #javascript #giảngdạyonlinecoding #giáodụccoding #interactive #interactiveweb #spring #spring #developer #tuyểndụngdeveloper #aws #db #cơsởdữliệu #jdbc #oracle #oracle #sql #jpa #thread #threads #thread #serialization #deserialization #kếthừa #đathái #method #overloading #overriding #class #phéptoán #eclipse #eclipse #domtree #jquery #plugin #object #thựchànhobject #tạoobject #object #object #modalwindow #modal #modal #es6 #documentobjectmodel #js #javascripttutorial #javascriptexamples #interactiveweb #interactive #tạonavigation #gnb #position #weblayout #layout #form #formtag #emmet #emmet #TDD

Những lưu ý trước khi học