Tôi nhớ lúc bắt đầu học front-end. Tôi đã tìm khóa học lập trình được tất cả bài viết, tài nguyên, và bởi thế tôi đã bị quá vận chuyển, tôi không biết mình cần học gì và thậm chí cũng chẳng biết tính từ lúc đâu.

Bài viết này sẽ giúp bạn định hướng quá trình học front-end. Nó phân phối những tài nguyên mà tôi thấy hiệu quả trong giai đoạn học tập của mình, cùng mang các chú giải chi tiết.

Để giúp bạn ko bị quá chuyên chở, tôi chia bài chỉ dẫn này thành hai phần. Phần 1 nhắc tới thời kỳ lớn mạnh giao diện sở hữu HTML và CSS. Phần hai nói đến Javascript, những framework và các design pattern. Ví như bạn đã thạo HTML và CSS bạn mang thể chuyển tới phần 2, bài viết kể mọi thứ về Javascript.

HTML và CSS căn bản
Để khởi đầu, đọc những bài chỉ dẫn về HTML và CSS trên Mozilla Developer Network (MDN). MDN cung cấp từng chương một, giảng giải các định nghĩa quan trọng của HTML và CSS. Tuy nhiên, mỗi chương chỉ là nằm trong một trang, có những liên kết demo đến CodePen và JSFiddle.

Sau khi hoàn thành những bài chỉ dẫn trên, hãy tham dự khóa học Make a Website trên CodeAcademy. Bạn sẽ mất vài giờ để hoàn tất bài chỉ dẫn này, nó là một điểm khởi phải chăng đầu để xây dựng những website sở hữu HTML và CSS. Ví như muốn học thêm, Building web forms là 1 hướng khác trên CodeAcademy giúp bạn xây dựng và styling 1 web form.

Để tập tành sở hữu CSS, thử CSS Dinner. Đây là một game tương đối vui mang những thử thách về CSS. 1 Góc cạnh quan yếu khác của HTML và CSS là những layout. LearnLayout là 1 bài chỉ dẫn giúp bạn biết phương pháp tạo ra các layout với HTML và CSS.

tuy nhiên, hãy học những tiêu dùng Google Fonts mang bài chỉ dẫn Basics of Google Font API trên CSSTricks. Typography là nền tảng vun đắp các block của giao diện. Khi bạn với thời kì, tôi khuyến khích bạn đọc Professional Web Typography của Donny Trương một cuốn sách miễn phí. Nó dạy bạn mọi thứ mà 1 front-end developer cần biết về typography.

Trong thời kỳ học, đừng lo âu lập trình android về việc bạn phải nhớ quá nhiều thứ. Thay vào ấy, tụ họp vào việc hiểu phương pháp HTML và CSS khiến việc cùng nhau.

tập luyện HTML và CSS căn bản
hiện giờ bạn đã có hiểu biết căn bản về HTML và CSS, hãy khiến cho một vài thứ thú vị. Trong phần này mang 2 thí nghiệm đã được ngoài mặt để giúp bạn tập luyện việc xây dựng các giao diện và website. Tôi sử dụng trong khoảng "thí nghiệm" bởi vì trong giai đoạn thí nghiệm, bạn sẽ học được đông đảo trong khoảng thất bại và nó sẽ giúp bạn đi đến thành công.

thử nghiệm 1
Trong thí điểm trước hết, chúng ta sử dụng CodePen. CodePen là một sân chơi cho front-end nơi bạn với thể code HTML và CSS mà không cần lưu trữ những file trên máy tính. Nó cũng có live preview mẫu cập nhật giao diện ngay sau khi bạn code.

Bằng phương pháp dùng CodePen, bạn sẽ đạt được hai thứ. Trước nhất, là tập dượt kỹ năng HTML và CSS. Thứ hai, bạn đã tạo ra 1 bộ sưu tập những sản phẩm của mình. Chúng ta cũng tiêu dùng Dribbble, 1 trang web có nhiều ngoài mặt giúp đem lại cảm hứng cho bạn.

Hãy tậu trên Dribbble một ngoài mặt đủ thuần tuý để code trong một vài giờ. Tôi đã chọn lọc một vài bản thiết kế để cho bạn bắt đầu: 1, hai, 3, 4 và 5. Tôi chọn những kiểu dáng dành cho mobile, vì chúng ít phức tạp hơn so với những bề ngoài dành cho desktop. Ngoài ra, bạn cũng có thể chọn bất cứ kiểu dáng nào mà mình thích.

Sau lúc bạn đã chọn được 1 kiểu dáng, hãy thử code nó trên CodePen. Nếu bạn gặp khó khăn, hãy nhờ sự viện trợ trên StackOverflow. Một nguồn tập luyện bổ ích khác là các website như Medium, AirBnB, và Dropbox và dùng dev tool của trình duyệt y để xem cách thức layout và style của các trang web này. Bạn cũng có thể tham khảo một đôi pen trên CodePen.

Xem thêm =>>https://mindx.edu.vn/blog/post/kinh-nghiem-hoc-lap-trinh

nếu như bản copy của bạn trông khác so có kiểu dáng gốc, đừng thoái chí. Hãy tiếp tục luyện tập có nhiều bản bề ngoài khác nhau và bạn sẽ nhận thấy rằng kỹ năng của bạn sẽ tiến bộ sau mỗi lần tập dượt.

giả dụ bạn không với một nền móng kiến thức về ngoại hình, sở hữu thể con mắt ngoại hình của bạn chưa được vững mạnh. Một front-end developer có con mắt ngoài mặt rẻ có thể xác định các ngoài mặt rẻ và tái tạo chúng một cách thức xuất sắc.

thí nghiệm 2
Hi vẳng thử nghiệm đầu tiên đã đem lại cho bạn sự tin lúc viết code HTML và CSS. Trong thử nghiệm 2, chúng ta sẽ xem xét một đôi website, sau đó code một vài thành phần của chúng.

phổ quát website sử dụng những CSS framework hoặc đặt tên những class CSS khó hiểu, làm bạn khó đọc source code. Đấy là lý do tại sao tôi chọn sẵn một đôi website được kiểu dáng tốt mang source code dễ đọc.

1 lần nữa, trọng điểm của thể nghiệm 2 chẳng phải là tái hiện phần lớn trang web. Mặc dầu điều đấy sở hữu thể không khó! Chọn một đôi thành phần quan trọng giống như navigation bar hoặc phần hero để code. Tôi đã cung ứng một vài gợi ý, nhưng bạn hoàn toàn mang thể chọn bất cứ thành phần nào mà mình thích. Để sao chép.

Bạn mang thể code thí điểm này trên CodePen hoặc trên máy tính. Giả dụ chọn lưu trữ trên máy tính, bạn mang thể chuyển vận Dự án mẫu này để khởi đầu hoặc tự tạo những file từ đầu. Tôi gợi ý bạn chọn 1 trình soạn thảo như Atom hoặc Sublime.

Bạn cũng cần nhớ rằng, có mọi website bạn luôn luôn mang thể xem code HTML và CSS. Chỉ cần click chuột phải trên trang hoặc trên một thành phần của trang, click inspect, 1 panel sẽ xuất hiện sở hữu code HTML bên trái và CSS bên phải. Khi bạn gặp vấn đề, hãy xử dụng tính năng inspect để so sánh code HTML và CSS của bạn có trang web mà bạn đang sao chép.

HTML và CSS Best Pracitces
tới đây bạn đã học được những kiến thức cơ bản về HTML và CSS. Bước tiếp theo là học những best practice. Best practices là tập hợp các quy tắc giúp cải thiện chất lượng code của ban.

Semantic Markup
1 best practices cho HTML và CSS là viết semantic markup. Với tức là sử dụng những thẻ HTML thích hợp và đặt tên các class CSS có ý nghĩa để truyền đạt ý nghĩa của cấu trúc.

những quy ước đặt tên class CSS
Best practice quan yếu tiếp theo là những quy ước đặt tên class CSS. Các quy ước đặt tên phải chăng, giống như semantic markup, giúp truyền tải ý nghĩa và tạo điều kiện cho code của chúng ta mang thể dự báo được, dễ đọc và dễ bảo trì. Bạn sở hữu thể đọc về các luật lệ đặt tên khác nhau trong bài viết OOCSS, ACSS, BEM, SMACSS: chúng là gì? Tôi nên sử dụng dòng nào?

đại quát, tôi gợi ý là bạn nên phấn đấu đặt tên thật thuần tuý theo cảm nhận của bạn. Theo thời kì, bạn sẽ khám phá ra những cái phải chăng nhất cho mình. Để xem bí quyết các tổ chức như Medium tiêu dùng những quy ước đặt tên như BEM, bạn có thể đọc bài viết này. Trong bài viết, bạn cũng sẽ học được rằng tạo lên một tập kết các quy ước hiệu quả là một thời kỳ lặp đi lặp lại.

liên tiếp học hỏi
trong khi HTML và CSS vẫn sẽ được sử dụng trong một thời kì dài, điều quan trọng là liên tiếp cập nhật kiến thức front-end.

Tổng kết
kỳ vọng, đến cuối bài viết này, bạn đã quen thuộc sở hữu HTML và CSS và mang một vài Dự án trong khoảng các thứ bạn đã học được. Cách thức thấp nhất để học front-end là vun đắp những Công trình và thí nghiệm. Nhớ rằng, mọi front-end developer đều bắt đầu từ một nơi nào đó. Và bắt đầu ngay từ hôm nay sẽ rẻ hơn tương lai.