Làm thế nào tôi có thể bắt đầu học phát triển web?


22

Tôi rất thích học phát triển web và đã học được một số điều cơ bản về HTML và CSS vài năm trước từ W3Schools, nhưng tôi chưa bao giờ học cách phát triển các trang web theo tiêu chuẩn ngày nay, tức là các trang web tự do mà không cần sử dụng bảng để quản lý thiết kế của trang web.

Một số tài nguyên tốt mà tôi có thể bắt đầu với là gì?


4
Tôi khuyên bạn nên tránh W3Schools như một công cụ học tập. Bạn có thể đọc lý do tại sao tại đây: meta.stackexchange.com/questions/87678/
Kẻ

1
Tôi sẽ đề nghị rằng nếu w3schools làm việc cho bạn, bạn sử dụng nó. Có một cơ hội một cái gì đó không hiệu quả, không ai hoàn hảo. Tôi đã báo cáo cho họ một số vấn đề trên một số trang mà tôi phát hiện ra lỗi. Rất nhiều người đã sửa chữa các kỹ năng tiếng Anh nguyên thủy của tôi trên chính trang web này. Tôi thậm chí đã tham gia một chút liiitle một số vấn đề từ năm w3C khi bản dự thảo mới được đưa ra. Không có ý định cố gắng "cấm" một trang web, nhưng để cải thiện nó.
Rafael

Câu trả lời:


12

Vườn Zen Zen

Kiểm tra CSS Zen Garden và xem qua các kết quả khác nhau. Chúng rất linh hoạt và cung cấp nhiều sự khác biệt so với cùng một mã nguồn. Bạn sẽ học được nhiều về các kỹ thuật CSS hiện đại. Ngay cả khi bạn không mổ xẻ chúng hoàn toàn, ít nhất bạn cũng sẽ tìm thấy rất nhiều cảm hứng và khả năng CSS chống lại HTML thông thường có thể truy cập. Điều tuyệt vời về CSS Zen Garden là ngữ nghĩa đối với phong cách. Nội dung không phải là phong cách nào. Mọi thứ bạn thấy các kiểu được thực hiện hoàn toàn bằng CSS, đó là cách thực hiện chính xác, bởi vì dữ liệu có thể được sử dụng bởi nhiều khách hàng khác nhau và chỉ tạo kiểu cho những người trực quan hóa nó.

Sách

Khi học từ sách, cuốn sách này có vẻ như là một CSS khởi đầu tốt : Hướng dẫn thiếu .

Internet

Tôi đọc Tạp chí Smashing trên internet cung cấp rất nhiều ví dụ và cách tiếp cận. Nó mở rộng các bài viết từ kinh doanh thiết kế đến các phương pháp tuyệt vời trong thiết kế web và như nhau.


25

Cách tốt nhất để học cách tạo các trang web và ứng dụng là thực sự làm điều đó , có nghĩa là bạn nên tạo các dự án và thực hiện nó mọi lúc. Video ngắn này truyền tải cảm xúc của một người mới và đưa ra một số lời khuyên tốt về chủ đề này.

Tôi cũng đã viết một số khuyến nghị khác cho những người quan tâm đến việc học phát triển web mà bạn nên đọc trước khi bắt đầu.

Tuy nhiên, giống như bạn không thể nói các ngôn ngữ mà bạn không biết bất kỳ từ nào, bạn cần hiểu rõ về những điều cơ bản trước khi bạn có thể xây dựng một dự án hữu ích. Dưới đây là một số tài nguyên để chọn một số điều cơ bản và trang web cho phép bạn tự khám phá.


Có những nơi tuyệt vời để học những điều cơ bản về phát triển web miễn phí. Bắt đầu ở đây, nhưng tách ra khỏi chúng để chơi xung quanh với những thứ chúng không trực tiếp dạy. Sau khi trải qua một vài lần, hãy thử tự mình thực hiện các trang web / dự án khác. Làm như vậy sẽ củng cố các khái niệm, dạy cho bạn chi tiết thực hiện và có khả năng cũng dạy cho bạn những điều bổ sung. Bạn chỉ đơn giản là không thể trở thành một nhà phát triển hoặc nhà thiết kế giỏi bằng cách chỉ đọc, bạn phải tạo !

Tôi đã thực hiện một khóa học sụp đổ cho các nhà thiết kế học phát triển web

Kiểm tra nó ra! Chúng được thiết kế cho đối tượng dựa trên thiết kế nhưng áp dụng cho bất kỳ ai học. Họ dạy những điều cơ bản trong các slide / bài đăng / video sau đó chỉ định một dự án nhỏ ở cuối mỗi bài để dạy phát triển front-end trong thế giới thực.


Các trang web hướng dẫn tốt khác

  • CodeAcademy - Khái niệm cơ bản về kiến ​​thức chung của một số ngôn ngữ.
  • - ri "Học web" của Mozilla - Điều này bắt đầu ở cấp độ bắt đầu và có thể hướng dẫn bạn vào một số chủ đề phức tạp hơn. Tài nguyên tuyệt vời, tôi đánh giá cao nó.
  • Udacity - Lớp phát triển web chung.
  • Tuts + - Hướng dẫn về các chủ đề cụ thể hơn.
  • KhanAcademy - Tôi đã không sử dụng nó cá nhân, nhưng nó dường như đang trở nên tốt hơn mỗi ngày.

Đừng sử dụng W3Schools , nó thường lỗi thời và rất dễ bị lỗi. Thay vào đó, hãy sử dụng một trang web hướng dẫn như những trang web trên để tìm hiểu và sử dụng một trong những trang web tài liệu dưới đây khi bạn đang tìm kiếm một cái gì đó cụ thể.


Tài liệu

Nhìn vào tài liệu cho các thuộc tính, thư viện, và như vậy là rất quan trọng để trở thành một nhà phát triển web tốt. Sau đây là một trong những tài liệu tốt nhất bạn có thể sử dụng:

  • W3.org - Tài liệu chính thức cho hầu hết mọi thứ được trình duyệt web triển khai. Học cách đọc những tài liệu này là rất quan trọng! Điều này không liên kết với W3Schools dưới bất kỳ hình thức nào.
  • Mozilla Docs - Tài nguyên bên thứ 3 rất đáng tin cậy từ những người tạo ra FireFox luôn cập nhật.
  • WHATWG.org - Một loại đối thủ cạnh tranh nguồn mở với W3; đôi khi một số trình duyệt thực hiện một số đề xuất nhất định từ đây qua W3.
  • DevDocs - Không chính thức, nhưng có rất nhiều tài liệu ngôn ngữ trên một trang web. Khá tiện lợi.

Thức ăn hữu ích

  • WebPl PlatformD Daily - Một danh sách các tin tức liên quan đến mọi thứ được cập nhật hàng ngày (trừ cuối tuần).
  • SitePoint - Bài viết thực sự hữu ích về những điều khác nhau.
  • WebDesignerDepot - Có thể là về mặt spam, nhưng hầu hết các bài viết thực tế của họ đều tốt.
  • Tạp chí Smashing - Chủ đề nâng cao hơn, nhưng chủ yếu là tất cả các bài đọc tốt.
  • Danh sách ngoài - Một chút kiến ​​thức nâng cao ở dạng blog.

Biên tập viên

Dự án nhỏ / chơi với mã

  • JSFiddle - Thực hiện các dự án nhỏ và theo dõi chúng.
  • CodePen - Nhìn vào hình tượng trưng mã của người khác và gửi của riêng bạn cho người khác xem.

Biên tập toàn văn


Các trang web hữu ích khác

  • Trang Tài nguyên của tôi - Danh sách các tài nguyên tôi đã biên dịch, từ phần giới thiệu đến thiết kế đáp ứng đến phân tích các cách khác nhau để tạo hiệu ứng trong trình duyệt web.
  • Cẩm nang dành cho nhà phát triển front-end - Bộ sưu tập các bài đăng đa dạng nhưng hữu ích hơn bao gồm nhiều chủ đề front-end.
  • WebFieldManual - Một bộ sưu tập lớn các tài nguyên hữu ích.
  • StackOverflow - Nếu bạn có một câu hỏi liên quan đến lập trình cụ thể , StackOverflow không thể so sánh được để giúp bạn.
  • LearnLayout - Tìm hiểu một số điều cơ bản về cách bố trí trong CSS.
  • Định vị trong thiết kế web - Một phần của khóa học sự cố của tôi có lẽ là hữu ích nhất.
  • 30 bộ chọn CSS bạn nên biết - Tìm hiểu chúng và giúp bạn tiết kiệm thời gian sau này. Ngoài ra còn có một trò chơi nhỏ thú vị để kiểm tra kiến ​​thức về bộ chọn CSS của bạn.
  • Codrops CSS Reference - Một trang tham khảo ngắn gọn và hữu ích.
  • CodeMentorThinkful - Các trang web nơi bạn có thể trả tiền để được cố vấn 1 trên 1.

Tìm các blog cá nhân của nhà phát triển và nhà thiết kế web mà bạn thích. Họ thường có nội dung tuyệt vời, tuyệt vời.

Tôi cũng đã viết một đoạn giới thiệu về thiết kế UI có thể rất hữu ích. Tôi đã liên kết một số tài nguyên tuyệt vời bổ sung trong đó.


Tôi không thể nhấn mạnh đủ, cách tốt nhất để học là xây dựng những thứ đẩy giới hạn của bạn và làm như vậy liên tục .

Để biết danh sách các trang web hữu ích liên quan đến trang web lớn hơn (và có lẽ áp đảo), hãy kiểm tra WebDesignRepo !


1
Tôi sẽ thêm Lynda.com. Theo như các biên tập viên nếu bạn ở trên máy Mac, bạn nên tải BBEdit hoặc sử dụng trình soạn thảo phiên bản miễn phí.
DVᴀᴅᴇʀ

1
Tôi hoàn toàn đồng ý nhưng muốn nói thêm rằng tôi sẽ khuyên bạn nên tránh xa các khuôn khổ ngay từ đầu. Học cách bò trước khi bạn học cách đi bộ. Điều này sẽ cung cấp cho bạn một cơ sở tốt hơn, vững chắc hơn để tiếp tục hình thức học tập trong tương lai và sẽ giúp bạn tạo các trang web đẹp, có cấu trúc và ngữ nghĩa.
Mùa hè

@ JaneDoe1337 phụ thuộc vào người bạn hỏi. Đôi khi một khung dễ học hơn và hỗ trợ cho việc triển khai nhanh hơn. Ngoài ra, sau khi tìm hiểu những điều cơ bản của một khung công tác, bạn có thể quay lại và điều chỉnh tăng ca như bạn nên nếu khung được chấp nhận tốt và có các tùy chọn tốt hơn.
DVᴀᴅᴇʀ

@Darth_Vader đó là lý do tại sao tôi nói đó là lời khuyên của tôi;) Kinh nghiệm cá nhân của tôi là mọi người thường không quay lại và học những điều cơ bản, khiến họ thiếu kiến ​​thức ở một số phần nhất định.
Mùa hè

4

Những nơi tốt nhất cho tôi về việc học về thiết kế web (giải pháp bố trí, khả năng sử dụng, giải pháp đồ họa và kỹ thuật) là:

nhìn vào tất cả các trang web của những người đã viết bài trong các trang web đó:

Một danh sách ngoài
24ways.org

Hoặc một cái gì đó kỹ thuật hơn về thiết kế danh sách và nổi http://css.maxdesign.com.au/index.htm

Bạn phải biết các tiêu chuẩn web là gì. Nguồn chính thức là: World Wide Web Consortium (w3c) Có một chút khó khăn để học hỏi từ đó bởi vì nó mang tính kỹ thuật cao, nhưng thật tốt khi kiểm tra nó khi bạn muốn biết cách mọi thứ hoạt động trên web và tại sao về các tiêu chuẩn. điều hữu ích nhất đó là Trình xác thực mã HTML của bạn.

Một cách tốt nhất là có một cái nhìn tốt về mã nguồn của các trang web tốt và tự nhiên tỷ lệ của những thứ được căn chỉnh giống như những thứ đó để tìm hiểu các thủ thuật: http://www.cssbeauty.com/

Và nhìn vào trang web của các nhà thiết kế web giỏi và những gì họ đang làm:

Jason Santa Maria
Dustin Curtis
Joshua Davis
David DeSandro
http://www.thinkingforaliving.org/
vv ...

và dấu trang Delicious của tôi (có nhiều thứ khác nhau, bạn phải tìm hiểu chúng và đọc lướt những thứ bạn không cần) http://www.delicy.com/Littlemad/webdesign


3

Trước khi bạn bắt đầu học tất cả các khung đó ...

Tôi muốn chuyển hướng sự chú ý của bạn đối với phần thiết kế của thiết kế web.

Tất nhiên, bạn có thể dễ dàng xây dựng một trang web với Bootstrap hoặc một số khung công tác khác. Nhưng đó không phải là thiết kế. Một khung có thể là một cơ sở, nhưng nếu bạn không đặt vòng quay của riêng mình, về cơ bản bạn sẽ có được một trang web giống như tất cả các trang web khác ngoài đó .

Đó là lý do tại sao tôi khuyên bạn nên tìm hiểu những điều cơ bản về thiết kế và cố gắng tự mình áp dụng những điều đó.

Làm thế nào để bạn làm cho các trang web (đẹp) trên của riêng bạn?

Bây giờ đó là một câu hỏi đáng giá một cuốn sách, nhưng đây là một vài gợi ý:

  1. Đọc về các nguyên tắc cơ bản của thiết kế . Điều này 7 bước trong thiết kế web sẽ giúp bạn bắt đầu. Ngoài ra, loạt bài viết trên Tạp chí Smashing .
  2. Quan sát thiết kế của người khác. Những nguyên tắc cơ bản nào họ đã sử dụng và làm thế nào? Nhưng đừng chỉ quan sát, lưu ý những quan sát của bạn .
  3. Thiết kế với mục tiêu kinh doanh trong tâm trí . Một thiết kế web tồn tại để giúp doanh nghiệp hiện thực hóa mục tiêu của mình và giúp người dùng đạt được mục tiêu của riêng họ. Khi 2 mục tiêu hội tụ, mọi người đều vui vẻ. Vì vậy, mục tiêu đó nên là điểm khởi đầu của bạn, luôn luôn. Bạn nên căn cứ vào từng quyết định thiết kế mà bạn đưa ra cho mục tiêu này là lựa chọn phông chữ, lựa chọn màu sắc, bố cục, v.v.
  4. Hãy chắc chắn rằng có sự hài hòa trong suốt thiết kế của bạn. Nói chung, điều này có nghĩa là sự hài hòa giữa thông điệp bạn muốn gửi, màu sắc, phông chữ, tâm trạng của trang web và thương hiệu. Bắt đầu nhúng sự hài hòa trong các thiết kế của bạn bằng cách sử dụng thang đo mô-đun để hướng dẫn các quyết định định cỡ của bạn. Sê-ri nhỏ này giải thích thêm về sự hài hòa và sử dụng quy mô mô-đun.
  5. Đọc phần giới thiệu tuyệt vời này về kiểu chữ : Kiểu chữ thực tế của Butterick hoặc, ít nhất, bản tóm tắt này của nó

Cố gắng thiết kế từ đầu

Bây giờ, khi bạn đọc xong tất cả những điều này và bạn biết HTML và CSS, bạn sẽ có thể thực hiện thiết kế rất đơn giản của riêng bạn.

Cố gắng thiết kế một trang duy nhất chỉ bằng văn bản, màu đen và trắng .

Tại sao chỉ nhắn tin? Bởi vì văn bản là phương tiện được sử dụng nhiều nhất để truyền tải một thông điệp trên web. Do đó, nó là nền tảng cho bạn, với tư cách là một nhà thiết kế web, để có thể làm cho văn bản trở nên đẹp và dễ đọc.

Tại sao đen trắng? Bởi vì chọn màu sắc là một con thú khác. Thực hiện các bước nhỏ sẽ khiến bạn cảm thấy hạnh phúc về tiến trình bạn đang đạt được và sẽ giúp bạn học nhanh hơn.

Áp dụng các nguyên tắc thiết kế cơ bản mà bạn đã học + sử dụng các quan sát về thiết kế của người khác + suy nghĩ về mục tiêu của trang đó + kích thước văn bản bằng thang đo mô-đun.


"Tôi muốn chuyển hướng sự chú ý của bạn về phần thiết kế của thiết kế web" Ôi trời, bao nhiêu sự khôn ngoan trong tình cảm này! Không có đủ khuôn mặt hạnh phúc trên trang web này cho việc này: o)
Rafael

1

Cách tốt nhất để học là làm cho mọi thứ vì vậy hãy tạo cho mình một trang web.

Đọc tiêu chuẩn , alistapart , tutsplus .

Nếu bạn cần một cái nhìn cuốn sách tại SitePoint 's - HTML Utopia: Thiết kế Without Bàn Sử dụng CSS .

Một số suy nghĩ về csszengardenW3Schools .


Nghe có vẻ giống các khái niệm, nhưng có vẻ như những gì muốn là ngữ nghĩa và từng bước thực sự đơn giản.
dkuntz2

0

Thành thật mà nói, tôi sẽ bắt đầu bằng cách học cách phát triển các trang web WordPress. Có, tôi có thể mã hóa một trang web bằng HTML, CSS, PHP, ... nhưng tôi có thể kết hợp một trang web WordPress nhanh hơn và sau đó tùy chỉnh khi tôi cần.

Nếu bạn đang muốn bắt đầu chỉ học các tiêu chuẩn ngày nay thì tôi sẽ giới thiệu http://nettuts.com/ . Nó cũng sẽ có lợi để có được thành viên cao cấp và có quyền truy cập vào một số hướng dẫn tuyệt vời. Nếu đi từ PSD sang HTML là điều bạn quan tâm, họ sẽ đề cập đến điều đó.

Nettuts là một phần của Envato. Envato có một số trang web hướng dẫn bao gồm phát triển web, wordpress, vectơ, chỉnh sửa ảnh và video và nhiều hơn nữa. Đó là một nơi tuyệt vời để bắt đầu.

Chỉ 2 xu của tôi.


2
"Thành thật mà nói, tôi sẽ bắt đầu bằng cách học cách phát triển các trang web WordPress. Vâng, tôi có thể mã hóa một trang web bằng HTML, CSS, PHP ..." Chắc chắn bạn sẽ cần phải làm việc với cả CSS và HTML để phát triển trang web WordPress?
e100

Tôi không đồng ý, OP sẽ có xu hướng tìm hiểu các quy tắc và những điều cơ bản tập trung vào wordpress. Một kiến ​​thức cơ bản, sạch sẽ về ngôn ngữ sẽ giúp bạn tiến xa hơn trong thời gian dài, khi cố gắng học các ngôn ngữ khác hoặc giải quyết vấn đề.
Mùa hè


-3

Có rất nhiều trang web với hàng tấn hướng dẫn. Tuy nhiên, nền tảng tốt nhất để tìm hiểu webdesign là http://teamtreehouse.com/ . Hy vọng nó giúp! Nik


2
Trong khi về mặt lý thuyết có thể trả lời câu hỏi, sẽ tốt hơn nếu bạn có thể bao gồm một vài từ về lý do tại sao trang web cụ thể này tốt hơn những trang khác ...
Farray
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.