Chào mọi người, 1 tháng trôi qua và mình tiếp diễn quay lại viết bài Techkids rút cuộc của năm con gà. Bên cạnh đó sẽ chẳng phải bài viết về PHP nữa, lần này mình muốn san sẻ các điều mà sau 1 thời kì làm cho nhiều hơn về Frontend mình nhận thấy sẽ hữu ích giả dụ bạn mới bước vào các con phố khiến cho Frontend hay bạn đón nhận ý định học và đi sâu vào nó.
Frontend developer đại khái là làm cho gì?
Frondend dev là người sẽ xử lý các phần tương tác có các bạn một cách trực tiếp, vì thế mình hiểu đại khái công việc và kỹ năng cần thiết của dev sẽ tương đương và cần nâng cao theo những thứ mà khách hàng sở hữu thể nhận được.
Ví dụ:
Ở giao diện đăng nhập tài khoản, người dùng cần 2 ô input và 1 nút submit, khi đấy frontend dev sẽ chỉ cần kỹ năng căn bản HTML.
tuy nhiên, lúc giao diện đấy được đặt trong giao diện tổng của trang web, sở hữu header, navigation, footer,... Thì việc phải nắm được cả CSS là điều đương nhiên.
Và lúc bạn đăng nhập xong, việc trình chuẩn y không cần load lại mà quý khách đã mang thể đăng nhập thành công và truy cập vào nội dung bên trong thì lúc đấy việc xử lý dị đồng bộ bằng Javascript của bạn là thứ không thể thiếu.
do vậy dưới đây là các điều mình nhận thấy sẽ tốt hơn nếu bạn bắt đầu quan tâm đến chúng.
Túi của Frontend dev nên bỏ gì vào sớm?
ko phải nhắc học lập trình nhiều về tác dụng của của viết comment trong code. Khi viết code dài, việc phải đóng bớt những tag to là chuyện bình thường, tuy nhiên khi sở hữu comment thì mọi thứ trở thành tiện dụng hơn phổ biến đúng ko.
Bootstrap hay không Bootstrap?
framework nổi tiếng nhất về responsive. Độ thuận tiện khi tiêu dùng nó là điều đã được chứng minh ở mọi ngóc ngỏng trên toàn cầu, miễn xó ấy có dev đang ngồi. Tuy nhiên sở hữu bao giờ bạn gặp phải tình cảnh giả dụ Công trình ko sử dụng Bootstrap nữa thì không biết sẽ viết CSS như thế nào chưa? Việc học thành thạo Bootstrap là rất tích cực, bên cạnh đó hãy nỗ lực làm cho chủ kỹ năng CSS của mình ngay trong khoảng đầu. Đừng chỉ vào Bootstrap xem cách họ đặt tên cho class mà hãy F12 lên rồi xem họ đã làm nó như thế nào nhé.
ơn giản nhỉ, 3 dòng 😐 nhưng thực ra cũng không easy lắm đâu, nên nếu như muốn custom lại thì hãy thuần thục nó thật phải chăng.
một điều nữa, Bootstrap khá là nặng, và lúc khiến xong thì surprise... Trang của bạn chả khác gì trang của người khác 😃) Nên hãy sử dụng Bootstrap một cách thức đúng đắn nhất nhé, đừng để như hình ở trên thì lúc surprise tập 2 là bạn thôi việc rồi.
Semantic Markup
khi Bootstrap không còn ở trong túi bạn, thì việc làm cho quen sở hữu Semantic Markup sẽ giúp tuyến đường Frontend bớt hóc búa hơn.
Hãy thử Tìm hiểu BEM là gì và thử thay đổi bí quyết đặt tên class của mình theo quy tắc để xem nó mang xứng đáng được bạn sở hữu theo bên mình không nhé:
Tối ưu việc viết code HTML và CSS bằng cách sử dụng tag HTML hợp lý và đặt tên class CSS với ý tức là thói quen rẻ và ko khó để khiến quen và học nó nên hãy nỗ lực dùng từ sớm nhé.
Tham khảo =>>https://mindx.edu.vn/
Javascript HTML DOM
Việc học Javascript là điều đề nghị sở hữu 1 Frontend dev, để master nó và tăng trưởng lúc tiêu dùng mang những Framework thực sự là khó. Bên cạnh đó hãy phấn đấu đi từ căn bản nhất, đừng vội vàng quá mang JQuery hay những Framework khác. Và quan yếu đấy là hãy hiểu thật kỹ DOM, mọi thứ đi thật xa rồi cũng sẽ trở về DOM.
Đánh giá sự khác nhau giữa các trình duyệt
Hãy thử code của mình trên các trình ưng chuẩn khác nhau, vì chẳng phải người dùng nào cũng sở hữu Chrome hay Firefox để vừa làm cho vừa test như dev đúng ko. Một vài thuộc tính CSS như transition cần vendor prefixes để khiến cho việc trên rộng rãi trình duyệt y.
Extensions
một số extensions mà mình vẫn thường dùng ở trình phê chuẩn Chrome trong khoảng lúc mới học cho đến nay, code rẻ nhưng tốc độ hơn nữa thì cũng rẻ hơn chứ nhỉ.
lép xem 1 trang web đẹp, mang animation mượt mà, người làm Frontend rất tò mò liệu rằng trang web này đang tiêu dùng các kỹ thuật nào để làm cho được tương tự. Thì Wappalyzer đây chính là công cụ cho phép chúng ta biết được các kỹ thuật được sử dụng trong 1 trang web
Fontface Ninja là extension cho phép chúng ta biết dòng font được dùng ở bất kỳ 1 trang web nào đó. Dụng cụ hiển thị được name, size, line spacing và letter spacing của font.
Kết luận
Trên đây là các điều mà mình hoặc bạn bè gặp từ hồi mới học cho tới hiện tại mà mình chú ý tới, vững chắc vẫn còn đa dạng khuyết điểm hay sở hữu thể các bạn gặp mà đã kinh qua đa số rồi. Cám ơn những bạn đã theo dõi. Hẹn gặp lại ở 1 bài viết khác, với thể vẫn là Frontend
Frontend developer đại khái là làm cho gì?
Frondend dev là người sẽ xử lý các phần tương tác có các bạn một cách trực tiếp, vì thế mình hiểu đại khái công việc và kỹ năng cần thiết của dev sẽ tương đương và cần nâng cao theo những thứ mà khách hàng sở hữu thể nhận được.
Ví dụ:
Ở giao diện đăng nhập tài khoản, người dùng cần 2 ô input và 1 nút submit, khi đấy frontend dev sẽ chỉ cần kỹ năng căn bản HTML.
tuy nhiên, lúc giao diện đấy được đặt trong giao diện tổng của trang web, sở hữu header, navigation, footer,... Thì việc phải nắm được cả CSS là điều đương nhiên.
Và lúc bạn đăng nhập xong, việc trình chuẩn y không cần load lại mà quý khách đã mang thể đăng nhập thành công và truy cập vào nội dung bên trong thì lúc đấy việc xử lý dị đồng bộ bằng Javascript của bạn là thứ không thể thiếu.
do vậy dưới đây là các điều mình nhận thấy sẽ tốt hơn nếu bạn bắt đầu quan tâm đến chúng.
Túi của Frontend dev nên bỏ gì vào sớm?
ko phải nhắc học lập trình nhiều về tác dụng của của viết comment trong code. Khi viết code dài, việc phải đóng bớt những tag to là chuyện bình thường, tuy nhiên khi sở hữu comment thì mọi thứ trở thành tiện dụng hơn phổ biến đúng ko.
Bootstrap hay không Bootstrap?
framework nổi tiếng nhất về responsive. Độ thuận tiện khi tiêu dùng nó là điều đã được chứng minh ở mọi ngóc ngỏng trên toàn cầu, miễn xó ấy có dev đang ngồi. Tuy nhiên sở hữu bao giờ bạn gặp phải tình cảnh giả dụ Công trình ko sử dụng Bootstrap nữa thì không biết sẽ viết CSS như thế nào chưa? Việc học thành thạo Bootstrap là rất tích cực, bên cạnh đó hãy nỗ lực làm cho chủ kỹ năng CSS của mình ngay trong khoảng đầu. Đừng chỉ vào Bootstrap xem cách họ đặt tên cho class mà hãy F12 lên rồi xem họ đã làm nó như thế nào nhé.
ơn giản nhỉ, 3 dòng 😐 nhưng thực ra cũng không easy lắm đâu, nên nếu như muốn custom lại thì hãy thuần thục nó thật phải chăng.
một điều nữa, Bootstrap khá là nặng, và lúc khiến xong thì surprise... Trang của bạn chả khác gì trang của người khác 😃) Nên hãy sử dụng Bootstrap một cách thức đúng đắn nhất nhé, đừng để như hình ở trên thì lúc surprise tập 2 là bạn thôi việc rồi.
Semantic Markup
khi Bootstrap không còn ở trong túi bạn, thì việc làm cho quen sở hữu Semantic Markup sẽ giúp tuyến đường Frontend bớt hóc búa hơn.
Hãy thử Tìm hiểu BEM là gì và thử thay đổi bí quyết đặt tên class của mình theo quy tắc để xem nó mang xứng đáng được bạn sở hữu theo bên mình không nhé:
Tối ưu việc viết code HTML và CSS bằng cách sử dụng tag HTML hợp lý và đặt tên class CSS với ý tức là thói quen rẻ và ko khó để khiến quen và học nó nên hãy nỗ lực dùng từ sớm nhé.
Tham khảo =>>https://mindx.edu.vn/
Javascript HTML DOM
Việc học Javascript là điều đề nghị sở hữu 1 Frontend dev, để master nó và tăng trưởng lúc tiêu dùng mang những Framework thực sự là khó. Bên cạnh đó hãy phấn đấu đi từ căn bản nhất, đừng vội vàng quá mang JQuery hay những Framework khác. Và quan yếu đấy là hãy hiểu thật kỹ DOM, mọi thứ đi thật xa rồi cũng sẽ trở về DOM.
Đánh giá sự khác nhau giữa các trình duyệt
Hãy thử code của mình trên các trình ưng chuẩn khác nhau, vì chẳng phải người dùng nào cũng sở hữu Chrome hay Firefox để vừa làm cho vừa test như dev đúng ko. Một vài thuộc tính CSS như transition cần vendor prefixes để khiến cho việc trên rộng rãi trình duyệt y.
Extensions
một số extensions mà mình vẫn thường dùng ở trình phê chuẩn Chrome trong khoảng lúc mới học cho đến nay, code rẻ nhưng tốc độ hơn nữa thì cũng rẻ hơn chứ nhỉ.
lép xem 1 trang web đẹp, mang animation mượt mà, người làm Frontend rất tò mò liệu rằng trang web này đang tiêu dùng các kỹ thuật nào để làm cho được tương tự. Thì Wappalyzer đây chính là công cụ cho phép chúng ta biết được các kỹ thuật được sử dụng trong 1 trang web
Fontface Ninja là extension cho phép chúng ta biết dòng font được dùng ở bất kỳ 1 trang web nào đó. Dụng cụ hiển thị được name, size, line spacing và letter spacing của font.
Kết luận
Trên đây là các điều mà mình hoặc bạn bè gặp từ hồi mới học cho tới hiện tại mà mình chú ý tới, vững chắc vẫn còn đa dạng khuyết điểm hay sở hữu thể các bạn gặp mà đã kinh qua đa số rồi. Cám ơn những bạn đã theo dõi. Hẹn gặp lại ở 1 bài viết khác, với thể vẫn là Frontend