ฉันสนใจที่จะเรียนรู้การพัฒนาเว็บและเรียนรู้พื้นฐานบางอย่างเกี่ยวกับ HTML และ CSS เมื่อไม่กี่ปีก่อนจาก W3Schools แต่ฉันไม่เคยเรียนรู้วิธีพัฒนาเว็บไซต์ที่มีมาตรฐานสูงในปัจจุบันเช่นเว็บไซต์ที่ไม่มีการใช้ตาราง เพื่อควบคุมการออกแบบของเว็บไซต์

ทรัพยากรที่ดีที่ฉันสามารถเริ่มต้นได้คืออะไร

CSS Zen Garden

ตรวจสอบCSS Zen Gardenและพลิกดูผลลัพธ์ที่หลากหลาย มันมีความหลากหลายและให้ความแตกต่างมากมายกับซอร์สโค้ดเดียวกัน คุณจะได้เรียนรู้มากมายเกี่ยวกับเทคนิค CSS ที่ทันสมัย แม้ว่าคุณจะไม่ได้แยกพวกเขาออกอย่างสมบูรณ์ แต่อย่างน้อยคุณจะได้รับแรงบันดาลใจและความสามารถ CSS จาก HTML ที่เข้าถึงได้ทั่วไป สิ่งที่ยอดเยี่ยมเกี่ยวกับ CSS Zen Garden คือความหมายตามสไตล์ เนื้อหาไม่ใช่สไตล์ แต่อย่างใด ทุกสิ่งที่คุณเห็นสไตล์ทำได้โดยใช้ CSS ล้วนๆซึ่งเป็นวิธีที่ถูกต้องในการทำมันเพราะลูกค้าสามารถใช้ข้อมูลได้หลายรูปแบบ

หนังสือ

เมื่อมันมาถึงการเรียนรู้จากหนังสือนี้มีลักษณะเหมือนเริ่มต้นที่ดีCSS: คู่มือการใช้งานที่ขาดหายไป

อินเทอร์เน็ต

ฉันอ่านนิตยสาร Smashingบนอินเทอร์เน็ตที่ให้ตัวอย่างและแนวทางมากมาย มันครอบคลุมบทความจากธุรกิจออกแบบไปจนถึงแนวทางที่ยอดเยี่ยมในการออกแบบเว็บและเหมือนกัน

วิธีที่ดีที่สุดในการเรียนรู้วิธีการสร้างเว็บไซต์และแอปพลิเคชันคือการทำมันจริงหมายถึงคุณควรสร้างโครงการและทำมันตลอดเวลา วิดีโอสั้น ๆ นี้สื่อถึงอารมณ์ของผู้มาใหม่และให้คำแนะนำที่ดีเกี่ยวกับเรื่องนี้

ฉันยังเขียนคำแนะนำอื่น ๆสำหรับผู้ที่สนใจในการเรียนรู้การพัฒนาเว็บที่คุณควรอ่านก่อนเริ่ม

อย่างไรก็ตามเช่นเดียวกับที่คุณไม่สามารถพูดภาษาที่คุณไม่รู้จักคำใด ๆ คุณจำเป็นต้องมีความเข้าใจพื้นฐานก่อนที่จะสร้างโครงการที่มีประโยชน์ ต่อไปนี้เป็นแหล่งข้อมูลเพื่อรับพื้นฐานและไซต์ที่ให้คุณสำรวจด้วยตัวเอง

มีสถานที่ที่ดีในการเรียนรู้พื้นฐานของการพัฒนาเว็บฟรี เริ่มที่นี่ แต่แยกออกจากพวกเขาเพื่อเล่นกับสิ่งที่พวกเขาไม่ได้สอนโดยตรง หลังจากผ่านไปสักสองสามลองสร้างไซต์ / โครงการอื่น ๆ ด้วยตัวเองตั้งแต่เริ่มต้น การทำเช่นนั้นจะช่วยเสริมแนวคิดสอนรายละเอียดการใช้งานให้คุณและมีแนวโน้มที่จะสอนสิ่งเพิ่มเติมให้คุณ คุณไม่สามารถเป็นนักพัฒนาหรือนักออกแบบที่ดีเพียงแค่อ่านเท่านั้นคุณต้องสร้าง !

ฉันทำหลักสูตรล้มเหลวสำหรับนักออกแบบที่เรียนรู้การพัฒนาเว็บ

ลองดูสิ! พวกเขาเหมาะสำหรับผู้ชมที่ใช้การออกแบบ แต่นำไปใช้กับทุกคนที่เรียนรู้ พวกเขาสอนพื้นฐานในสไลด์ / โพสต์ / วิดีโอจากนั้นมอบหมายโครงการขนาดเล็กในตอนท้ายของแต่ละโครงการเพื่อสอนการพัฒนา Front-End ที่แท้จริงของโลก

• บทที่ 1 - สาเหตุและสิ่งที่อยู่เบื้องหลังการพัฒนาเว็บ
• บทที่ 2 - การเริ่มต้น HTML & CSS
• บทเรียน 3 - เริ่มต้น JavaScript (JS)

เว็บไซต์กวดวิชาที่ดีอื่น ๆ

• CodeAcademy - พื้นฐานความรู้ทั่วไปของหลายภาษา
• ซีรี่ส์ "การเรียนรู้เว็บ" ของ Mozilla - เริ่มต้นที่ระดับเริ่มต้นและสามารถแนะนำคุณในหัวข้อที่ซับซ้อนมากขึ้น สุดยอดทรัพยากรฉันแนะนำอย่างยิ่ง
• Udacity - คลาสการพัฒนาเว็บทั่วไป
• Tuts + - บทช่วยสอนในหัวข้อเฉพาะเพิ่มเติม
• KhanAcademy - ฉันไม่ได้ใช้มันเป็นการส่วนตัว แต่ดูเหมือนว่าจะดีขึ้นทุกวัน

อย่าใช้ W3Schoolsโดยทั่วไปจะล้าสมัยและเกิดข้อผิดพลาดได้ง่าย ให้ใช้เว็บไซต์บทแนะนำเช่นเดียวกับข้างต้นเพื่อเรียนรู้และใช้เว็บไซต์เอกสารด้านล่างเมื่อคุณกำลังมองหาบางสิ่งที่เฉพาะเจาะจง

เอกสาร

การดูเอกสารเกี่ยวกับคุณสมบัติห้องสมุดและสิ่งเหล่านี้มีความสำคัญต่อการเป็นนักพัฒนาเว็บไซต์ที่ดี ต่อไปนี้เป็นหนึ่งในเอกสารที่ดีที่สุดที่คุณสามารถใช้ได้:

• W3.org - เอกสารอย่างเป็นทางการสำหรับทุกสิ่งที่นำมาใช้โดยเว็บเบราว์เซอร์ การเรียนรู้ที่จะอ่านเอกสารเหล่านี้มีความสำคัญมาก! สิ่งนี้ไม่มีส่วนเกี่ยวข้องกับ W3Schools แต่อย่างใด
• Mozilla Docs - แหล่งข้อมูลบุคคลที่สามที่เชื่อถือได้มากจากผู้สร้าง FireFox ที่ทันสมัย
• WHATWG.org - คู่แข่งประเภทโอเพนซอร์ซกับ W3; เบราว์เซอร์บางตัวใช้คำแนะนำบางอย่างจากที่นี่มากกว่า W3 ในบางครั้ง
• DevDocs - ไม่เป็นทางการ แต่มีเอกสารภาษาจำนวนมากในเว็บไซต์เดียว ค่อนข้างสะดวก

ฟีดที่มีประโยชน์

• WebPlatformDaily - รายการข่าวที่เกี่ยวข้องกับทุกสิ่งที่เว็บอัพเดททุกวัน (ยกเว้นวันหยุดสุดสัปดาห์)
• SitePoint - บทความที่มีประโยชน์จริง ๆ ในสิ่งต่าง ๆ
• WebDesignerDepot - อยู่ด้านสแปม แต่บทความจริงของพวกเขาส่วนใหญ่นั้นดี
• Smashing Magazine - หัวข้อขั้นสูงเพิ่มเติม แต่ส่วนใหญ่อ่านดีทั้งหมด
• รายการนอกเหนือ - ความรู้ขั้นสูงอีกเล็กน้อยในรูปแบบบล็อก

บรรณาธิการ

โครงการขนาดเล็ก / เล่นกับรหัส

• JSFiddle - ทำโปรเจคเล็ก ๆ น้อย ๆ และติดตามพวกมัน
• CodePen - ดูดูรหัสของผู้อื่นและส่งของคุณเองเพื่อให้ผู้อื่นได้เห็น

เครื่องมือแก้ไขข้อความแบบเต็ม

• SublimeText
• อะตอม

เว็บไซต์ที่มีประโยชน์อื่น ๆ

• หน้าทรัพยากรของฉัน - รายการทรัพยากรที่ฉันได้รวบรวมตั้งแต่ช่วงเริ่มต้นจนถึงการออกแบบที่ตอบสนองต่อการวิเคราะห์วิธีการต่างๆในการเคลื่อนไหวในเว็บเบราว์เซอร์
• คู่มือนักพัฒนา Front-end - คอลเลกชันโพสต์ที่หลากหลาย แต่มีประโยชน์มากขึ้นครอบคลุมหัวข้อฟรอนต์เอนด์ที่หลากหลาย
• WebFieldManual - แหล่งข้อมูลที่เป็นประโยชน์มากมาย
• StackOverflow - หากคุณมีคำถามเฉพาะเกี่ยวกับการเขียนโปรแกรม StackOverflow จะไม่ตรงกันเพื่อช่วยคุณ
• LearnLayout - เรียนรู้พื้นฐานบางอย่างเกี่ยวกับการทำโครงร่างใน CSS
• การวางตำแหน่งในการออกแบบเว็บ - เป็นส่วนหนึ่งของหลักสูตรความผิดพลาดของฉันที่อาจมีประโยชน์มากที่สุด
• 30 ตัวเลือก CSS ที่คุณควรรู้ - ทำความรู้จักกับพวกเขาและช่วยคุณประหยัดเวลาในภายหลัง นอกจากนี้ยังมีเกมเล็ก ๆ ที่น่าสนใจเพื่อทดสอบความรู้เกี่ยวกับตัวเลือก CSS ของคุณ
• Codrops CSS Reference - หน้าอ้างอิงที่รัดกุมและเป็นประโยชน์
• CodeMentor and Thinkful - ไซต์ที่คุณสามารถจ่ายให้คำปรึกษาได้ 1 ต่อ 1

ค้นหาบล็อกส่วนตัวของนักพัฒนาเว็บและนักออกแบบที่คุณชอบ พวกเขามักจะมีเนื้อหาที่ยอดเยี่ยมและยอดเยี่ยม

ฉันได้เขียนคำแนะนำเกี่ยวกับการออกแบบ UIซึ่งอาจมีประโยชน์มาก ฉันเชื่อมโยงแหล่งข้อมูลที่ยอดเยี่ยมเพิ่มเติมเข้ามา

ฉันไม่สามารถความเครียดพอวิธีที่ดีที่สุดในการเรียนรู้คือการสร้างสิ่งที่ผลักดันข้อ จำกัด ของคุณและจะทำเช่นนั้นอย่างต่อเนื่อง

สำหรับรายการที่มีขนาดใหญ่ขึ้น (และอาจจะล้นหลาม) ของเว็บไซต์ที่มีประโยชน์เกี่ยวกับเว็บให้ชำระเงินWebDesignRepo !

สถานที่ที่ดีที่สุดสำหรับฉันเกี่ยวกับการเรียนรู้เกี่ยวกับการออกแบบเว็บ (โซลูชันเลย์เอาต์, การใช้งาน, กราฟิกและโซลูชันทางเทคนิค) คือ:

ดูเว็บไซต์ทั้งหมดของคนที่เขียนบทความในเว็บไซต์เหล่านั้น:

รายการนอกเหนือจาก
24ways.org

หรือเทคนิคเพิ่มเติมเกี่ยวกับการออกแบบรายการและhttp://css.maxdesign.com.au/index.htmลอยตัว

คุณต้องรู้ว่าเว็บมาตรฐานคืออะไร แหล่งที่มาอย่างเป็นทางการคือ: World Wide Web Consortium (w3c) เป็นเรื่องยากเล็กน้อยที่จะเรียนรู้จากที่นั่นเพราะมันเป็นเรื่องเทคนิคสูง เกี่ยวกับมาตรฐาน สิ่งที่มีประโยชน์ที่สุดคือตัวตรวจสอบความถูกต้องของรหัส HTML ของคุณ

วิธีที่ดีที่สุดวิธีหนึ่งคือการดูที่ซอร์สโค้ดของเว็บไซต์ที่ดีและสัดส่วนของสิ่งต่าง ๆ ที่สอดคล้องกันเช่นเดียวกับการเรียนรู้เทคนิค: http://www.cssbeauty.com/

และดูที่เว็บไซต์ของนักออกแบบเว็บไซต์ที่ดีและสิ่งที่พวกเขาทำ:

เจสันซานตามาเรีย
ดัสตินเคอร์ติส
โจชัวเดวิส
เดวิดเดแซนโดร
http://www.thinkingforaliving.org/
ฯลฯ ...

และบุ๊กมาร์กแสนอร่อยของฉัน (มีหลายสิ่งหลายอย่างคุณต้องขุดมันและอ่านสิ่งที่คุณไม่ต้องการ) http://www.delicious.com/Littlemad/webdesign

ก่อนที่คุณจะเริ่มเรียนรู้กรอบเหล่านั้นทั้งหมด ...

ฉันต้องการเปลี่ยนเส้นทางความสนใจของคุณไปยังส่วนการออกแบบของการออกแบบเว็บ

แน่นอนว่าคุณสามารถสร้างเว็บไซต์ได้อย่างง่ายดายด้วย Bootstrap หรือกรอบอื่น ๆ แต่นั่นไม่ใช่การออกแบบ กรอบสามารถเป็นพื้นฐาน แต่ถ้าคุณไม่ใส่สปินของคุณเองคุณจะได้รับพื้นเว็บไซต์ที่เป็นเช่นเดียวกับเว็บไซต์อื่น ๆ ทั้งหมดออกมี

นั่นเป็นเหตุผลที่ฉันแนะนำให้คุณเรียนรู้พื้นฐานการออกแบบและลองใช้สิ่งเหล่านี้ด้วยตัวคุณเอง

คุณสร้างเว็บไซต์ที่สวยงามด้วยตัวเองได้อย่างไร

ตอนนี้เป็นคำถามที่คุ้มค่ากับหนังสือ แต่ต่อไปนี้เป็นตัวชี้ไม่กี่:

1. อ่านเกี่ยวกับหลักการพื้นฐานของการออกแบบ นี้ไพรเมอร์ 7 ขั้นตอนในการออกแบบเว็บจะช่วยให้คุณเริ่มต้น นอกจากนี้บทความเกี่ยวกับ Smashing Magazine ชุดนี้
2. สังเกตการออกแบบของคนอื่น พวกเขาใช้หลักการพื้นฐานอะไรและอย่างไร แต่อย่าเพิ่งสังเกตทราบสังเกตของคุณ
3. การออกแบบที่มีเป้าหมายทางธุรกิจในใจ มีการออกแบบเว็บไซต์เพื่อช่วยให้ธุรกิจบรรลุเป้าหมายและเพื่อช่วยให้ผู้ใช้บรรลุเป้าหมายของตนเอง เมื่อเป้าหมายทั้ง 2 มาบรรจบกันทุกคนก็มีความสุข ดังนั้นเป้าหมายนั้นควรเป็นจุดเริ่มต้นของคุณเสมอ คุณควรตัดสินใจในการออกแบบแต่ละครั้งตามเป้าหมายนี้ - การเลือกแบบอักษรการเลือกสีการจัดวางและอื่น ๆ
4. ตรวจสอบให้แน่ใจว่ามีความสามัคคีตลอดการออกแบบของคุณ โดยทั่วไปหมายถึงความกลมกลืนระหว่างข้อความที่คุณต้องการส่งสีแบบอักษรอารมณ์ของเว็บไซต์และแบรนด์ เริ่มฝังความสามัคคีในการออกแบบของคุณโดยใช้เครื่องชั่งแบบแยกส่วนเพื่อเป็นแนวทางในการตัดสินใจปรับขนาดของคุณ mini-series นี้อธิบายเพิ่มเติมเกี่ยวกับความกลมกลืนและการใช้งานเครื่องชั่งแบบแยกส่วน
5. อ่านบทแนะนำเกี่ยวกับวิชาการพิมพ์ที่น่าทึ่งนี้: Typical Practical Typography ของ Butterickหรืออย่างน้อยก็ข้อสรุปนี้

ลองออกแบบตั้งแต่เริ่มต้น

ตอนนี้เมื่อคุณอ่านเกี่ยวกับสิ่งเหล่านี้เสร็จแล้วและคุณรู้จัก HTML และ CSS คุณจะสามารถออกแบบเรียบง่ายของคุณเองได้

พยายามที่จะออกแบบหน้าเดียวที่มีข้อความเพียงในสีดำและสีขาว

ทำไมต้องเป็นข้อความ เพราะข้อความเป็นสื่อที่ใช้มากที่สุดในการถ่ายทอดข้อความบนเว็บ ดังนั้นจึงเป็นพื้นฐานสำหรับคุณในฐานะนักออกแบบเว็บไซต์ที่จะทำให้ข้อความดูดีและมีความสุขที่ได้อ่าน

ทำไมต้องขาวดำ เพราะการเลือกสีเป็นอีกสัตว์ร้าย การทำตามขั้นตอนเล็ก ๆ จะทำให้คุณรู้สึกมีความสุขกับความก้าวหน้าที่คุณทำและจะช่วยให้คุณเรียนรู้ได้เร็วขึ้น

ใช้หลักการออกแบบพื้นฐานที่คุณเรียนรู้ + ใช้การสังเกตการออกแบบของคนอื่น + คิดเกี่ยวกับเป้าหมายของหน้านั้น + ปรับขนาดของข้อความโดยใช้สเกลโมดูลาร์

วิธีที่ดีที่สุดในการเรียนรู้คือการทำสิ่งต่าง ๆ เพื่อสร้างเว็บไซต์ให้ตัวเอง

อ่านมาตรฐาน , alistapart , tutsplus

หากคุณต้องการดูหนังสือที่SitePoint 's - HTML ยูโทเปีย: การออกแบบโดยไม่มีตารางการใช้ CSS

ความคิดบางอย่างเกี่ยวกับcsszengardenและW3Schools

สุจริตฉันจะเริ่มต้นด้วยการเรียนรู้วิธีการพัฒนาเว็บไซต์ WordPress ใช่ฉันสามารถเขียนโค้ดเว็บไซต์โดยใช้ HTML, CSS, PHP, ... แต่ฉันสามารถรวบรวมเว็บไซต์ WordPress ได้เร็วขึ้นแล้วปรับแต่งตามที่ฉันต้องการ

หากคุณกำลังมองหาที่จะเริ่มต้นเพียงการเรียนรู้มาตรฐานของวันนี้แล้วฉันจะแนะนำhttp://nettuts.com/ นอกจากนี้ยังจะเป็นประโยชน์ในการรับสมาชิกพรีเมี่ยมและเข้าถึงบทเรียนที่ยอดเยี่ยม ถ้าคุณเปลี่ยนจาก PSD เป็น HTML เป็นสิ่งที่คุณสนใจ

Nettuts เป็นส่วนหนึ่งของ Envato Envato มีเว็บไซต์การสอนหลายอย่างที่ครอบคลุมการพัฒนาเว็บเวิร์ดเพรสเวกเตอร์การแก้ไขภาพถ่ายและวิดีโอและอีกมากมาย มันเป็นจุดเริ่มต้นที่ดี

แค่ 2 เซ็นต์ของฉัน

สำหรับผู้เริ่มต้นใช้งาน Photoshop บนการออกแบบเว็บฉันขอแนะนำเว็บไซต์นี้http://psdvibe.com/

มีเว็บไซต์จำนวนมากที่มีบทเรียนมากมาย อย่างไรก็ตามแพลตฟอร์มที่ดีที่สุดที่จะเรียนรู้ Webdesign เป็นhttp://teamtreehouse.com/ หวังว่ามันจะช่วย! Nik