Trước khi học phát triển và lập trình web, tôi luôn luôn sợ hãi bất cứ khi nào tôi nhìn vào các trang web được thực hiện độc đáo. Tôi thích đọc các bài báo và web là nguồn thông tin đương đại chính của tôi. Do đó, tôi đã được tiếp xúc với rất nhiều trang tuyệt vời không chỉ trông tuyệt vời mà còn cung cấp các chức năng hợp lý cho người xem. Nó khuấy động trong tôi mong muốn một ngày nào đó cũng có thể trình bày thông tin cho thế giới theo cách khiến bất cứ ai nhìn vào họ.
Hình ảnh của Caleb Dow trên UnplashLà một người tạo nội dung, tôi bắt đầu bằng cách sử dụng blogger, viết về giáo dục tài chính và tinh thần kinh doanh. Với Blogger, trong những ngày đó, có rất nhiều thời gian có thể có về mặt tùy chỉnh một giao diện trang web. Tôi bắt đầu mày mò và tìm thấy các hướng dẫn đã dạy tôi cách điều chỉnh các tệp CSS của một chủ đề blogger. Đây là khi tôi nhận ra tôi cần phải học HTML và CSS. Tôi đã bắt đầu học cho đến khi cuối cùng chấp nhận thực tế rằng chỉnh sửa một vài dòng CSS không bao giờ có thể cho tôi quyền kiểm soát hoàn toàn về cách một trang web tôi tạo ra sẽ trông và hoạt động.
Bây giờ hơn năm năm sau, tôi đã biết cách tạo một trang web từ đầu và thậm chí đặt các chức năng cơ bản vào đó. Heck, bây giờ tôi thậm chí có thể mã hóa cả mặt trước và phụ trợ của một ứng dụng blog cơ bản và thậm chí xây dựng một ứng dụng sê-ri TV với ReactJS. Cho dù các kỹ năng của tôi tương đối tiến bộ đến đâu, tôi có thể từ chối thực tế rằng việc học HTML và CSS là nền tảng của tôi.
Tôi hiểu một người ngứa ngáy để bắt đầu với một ngôn ngữ lập trình thực sự như Ruby, JavaScript hoặc Python. Nhưng để xây dựng một cái gì đó hoàn chỉnh, ít nhất là đối với Web, một nhà phát triển nên có các kỹ năng HTML và CSS tốt. Tuy nhiên, một nhà phát triển web không cần phải là một chuyên gia trong họ.
Bạn có cần nhiều HTML/CSS để trở thành nhà phát triển không?
Ban đầu tôi nghĩ rằng sẽ lập một danh sách đầy đủ của tất cả các thẻ/thuộc tính/tính chất của HTML. Sau đó, tôi nhận ra rằng tôi chỉ có thể dẫn người đọc đến các tài nguyên hữu ích hơn. Sau đó, tôi chỉ đưa ra các đề xuất cấp cao để nhấn mạnh rằng các nhà phát triển web không cần phải có cấp độ năng lực của Bruce Lee để trở thành Ninja HTML/CSS. Để xây dựng một trang web, bạn chỉ cần sử dụng các thẻ HTML phổ biến như cho các tiêu đề [H2-H6], Links [], Images [], Danh sách không theo thứ tự [có bên trong], DIV và nhịp. Ngoài ra là các thẻ ngữ nghĩa HTML5 ,,,,, và. Có rất nhiều thẻ khác được yêu cầu trong một số tình huống nhất định nhưng tôi chỉ bao gồm các thẻ thường được sử dụng. Đối với CSS, bạn chỉ cần học cách tạo kiểu văn bản [thuộc tính phông chữ], liên kết [phần lớn trang trí văn bản], chiều điều chỉnh và vị trí của các yếu tố [chiều rộng, lề, đệm, float, vị trí] và nền kiểu [hình ảnh nền và hình nền và màu nền]. Chuyển đổi CSS và hoạt hình hiện nay cũng có mặt khắp nơi trong hầu hết các trang web, vì vậy có thể cần phải học chúng.headings [h2-h6], links [], images [], unordered lists [ with
Dưới đây là các liên kết đến các hướng dẫn đơn giản nhưng tuyệt vời để tìm hiểu HTML và CSS:
- Tìm hiểu HTML5
- Tìm hiểu CSS3
- Thiết kế web đáp ứng
Khung và thư viện cung cấp cho chúng tôi siêu cường CSS
Ngày nay, chúng tôi may mắn có được các công cụ, thư viện và khung để làm cho chúng tôi đơn giản và dễ dàng hơn để xây dựng đánh dấu và kiểu của một trang web. Trước đây rất khó khăn để hoàn thiện bố cục trang sử dụng các thuộc tính hoàn toàn nổi và các thuộc tính vị trí trong CSS. Nhưng bây giờ chúng tôi có FlexBox và CSS Grid. Có các kỹ năng cơ bản trong hai người đó sẽ cho phép một người tạo ra các trang web trông đáng kinh ngạc. Ngoài ra, chúng tôi có các thư viện như bootstrap, foundation và ngữ nghĩa-UI cung cấp kiểu dáng sẵn sàng. Chúng tôi chỉ cần liên kết đến các tệp CSS của họ [và thư viện JavaScript/jQuery], hiểu các hệ thống lớp và lưới của họ và, Voila, bạn có thể xây dựng các trang web tìm kiếm tuyệt vời.FlexBox and CSS Grid. Having basic skills in those two will already allow one to make incredible looking web pages. In addition to this we have libraries such as Bootstrap, Foundation and Semantic-UI that provide ready styling. We just need to link to their CSS files [and JavaScript/jQuery libraries], understand their class and grid systems and, voila, you can build awesome looking sites.
Tìm hiểu FlexBox và CSS Grid trong khi vui vẻ
- Flexbox Froggy - Học Flexbox thông qua một trò chơi
- Hướng dẫn Flexbox về Scrimba
- Grid Garden - Tìm hiểu lưới CSS thông qua một trò chơi
- Hướng dẫn lưới CSS về Scrimba
Than ôi, như thể những điều trên là không đủ, bây giờ chúng ta có bộ xử lý trước CSS [tức là, SASS, ít hơn]. Chúng giỏi trong việc gì? Nếu bạn đã thực hiện rất nhiều CSS trước đây, bạn sẽ đồng ý rằng mã CSS có thể trở nên lộn xộn và khó hiểu. Hậu quả của điều này là một cơn ác mộng của các phiên gỡ lỗi tìm kiếm một phần trong 700 dòng CSS của bạn là thủ phạm. Và những gì về những bộ chọn lặp đi lặp lại hoặc dự phòng làm cho CSS của bạn dài ở nơi đầu tiên? Tôi tin rằng một giá trị lớn nhất của bộ xử lý CSS đến từ cách giúp nhà phát triển tổ chức mã CSS của mình. Điều này giúp bạn dễ dàng quản lý một trang web với nhiều bộ chọn và thuộc tính. Bây giờ, nếu bạn bắt đầu phát triển web và bạn thực sự rất hiếm khi bắt đầu ‘thực sự lập trình, thì bạn sẽ rất vui khi biết rằng với các bộ xử lý trước CSS, nó gần như giống hệt như lập trình. Bạn sử dụng những thứ như biến, vòng lặp và chức năng như thể bạn đang làm việc trên JavaScript hoặc Ruby.
Hướng dẫn SASS trên YouTube - Nhấp vào liên kết này cho danh sách phát đầy đủHọc cách sử dụng các công cụ của nhà phát triển Chrome
Ai đó xây dựng một trang web không bao giờ nên bao giờ, và ý tôi là bao giờ, bỏ qua việc sử dụng công cụ tuyệt vời này. Firefox cũng có một nhưng tôi thấy Chrome, dễ sử dụng hơn. Với các công cụ của Chrome, bạn có thể dễ dàng kiểm tra các thuộc tính của trang web HTML và các thuộc tính CSS để sửa lỗi hoặc kiểm tra kiểu mới mà bạn muốn kết hợp với trang của mình mà không cần cam kết với mã thực tế.
Để làm chủ HTML/CSS Bắt đầu nhanh bằng cách nhân bản các trang web
Ai đó bắt đầu hành trình phát triển web của họ sẽ phải thân mật với HTML và CSS trong vài tuần [thậm chí vài tháng] trước khi họ có thể chuyển sang học lập trình thích hợp. Nhưng đó là cách tốt nhất để thực hành các trang web xây dựng? Câu trả lời ngắn gọn - Bản sao các trang web hiện có. Làm như vậy sẽ giúp bạn tiết kiệm thời gian và rắc rối khi tìm kiếm ý tưởng. Bạn sẽ có một sự tăng cường tự tin lớn khi bạn xây dựng ngay cả phần tiêu đề hoặc phần NAV của trang web mà bạn đang nhân bản.
Cách tốt nhất để học - với một đối tác mã hóa
Tôi bắt đầu học phát triển web và lập trình một mình. Trong khi bạn có thể tự học rất nhiều, làm việc với người khác vẫn tốt hơn. Sẽ có rất nhiều lần bạn sẽ bị mắc kẹt với các lỗi mà vì nhiều dòng mã bạn đã viết, bạn không thể định vị được. Một đôi mắt khác sẽ cứu bạn khỏi nỗi đau như vậy. Tôi có cần nói nó vui hơn không? Bản thân tôi hiện đang làm việc hàng ngày với một đối tác mã hóa, từ một nơi khác của thế giới. Chúng tôi đã nhân bản các trang chủ của các công ty nổi tiếng bao gồm Mint.com, Apple, Newsweek và Thenextweb. Chúng tôi đã học được rất nhiều trên đường đi. Kỷ luật và tính nhất quán rất quan trọng để trở thành một nhà phát triển web hoặc kỹ sư phần mềm có tay nghề cao. Có một đối tác trách nhiệm giúp xây dựng hai đặc điểm đó.
Tìm một cách có cấu trúc để học
Nếu bạn muốn trải qua một khóa đào tạo kỹ thuật phần mềm cường độ cao thì hãy truy cập microverse.org. Nếu nó lần đầu tiên bạn đăng ký mã hóa cho khóa học trước nơi bạn sẽ học [miễn phí] phát triển web và kỹ thuật phần mềm. Nếu bạn là người học nâng cao [bạn cảm thấy thoải mái với một số JavaScript hoặc bất kỳ ngôn ngữ lập trình nào khác] thì tôi sẽ giới thiệu chương trình theo dõi nhanh [bạn sẽ chỉ trả tiền khi bạn hoàn thành chương trình và tìm một công việc kỹ thuật phần mềm từ xa].
Theo dõi tôi trên Twitter | GitHub on Twitter | Github