หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

การพัฒนาส่วนหน้า

สวัสดี

นี่คือที่เก็บโอเพนซอร์ซสำหรับทุกคนที่ต้องการเรียนรู้การพัฒนาส่วนหน้า


การพัฒนาส่วนหน้า


การพัฒนาเว็บ Front-end เป็นการฝึกการแปลงข้อมูลเป็นอินเทอร์เฟซกราฟิกผ่านการใช้ HTML, CSS และ JavaScript เพื่อให้ผู้ใช้สามารถดูและโต้ตอบกับข้อมูลนั้นได้

ตรวจสอบให้แน่ใจว่าได้แสดงการสนับสนุนของคุณโดย Star Mark & ​​แบ่งปันที่เก็บข้อมูล

รายการทรัพยากรที่มีประโยชน์สำหรับนักพัฒนาส่วนหน้า

สารบัญ

  • การพัฒนาส่วนหน้า
  • สวัสดี
  • รายการทรัพยากรที่มีประโยชน์สำหรับนักพัฒนาส่วนหน้า
    • สารบัญ
    • แผนงาน
    • มีประโยชน์
    • การเรียนรู้
    • A11y
    • ช่อง YouTube
    • บล็อก
      • การว่าจ้าง
    • พอดคาสต์
    • บรรณาธิการรหัส
      • ส่วนขยายรหัส Visual Studio
    • เครื่องมือ
    • เฟรมเวิร์ก CSS
    • ไอคอน
    • สี
    • การพิมพ์
    • แรงบันดาลใจในการออกแบบ
    • เฟรมเวิร์กแอนิเมชั่น
    • ทรัพยากรสต็อก
    • ตำแหน่งทางภูมิศาสตร์
    • APIs
    • การเยาะเย้ย
    • หนังสือ
    • ความท้าทาย / เกม
    • เครื่องมือฟรีสำหรับนักเรียน
    • วิดีโอ YouTube
    • การทดสอบ

แผนงาน

  • Roadmap-สำหรับแผนงานทีละขั้นตอนที่อธิบายไว้อย่างดีสำหรับนักพัฒนาส่วนหน้า

มีประโยชน์

  • BGJAR - เครื่องกำเนิดพื้นหลัง SVG ฟรีสำหรับเว็บไซต์บล็อกและแอพของคุณ
  • ตรวจสอบ - ตรวจสอบและแก้ไขข้อบกพร่องของเว็บแอพมือถือและเว็บไซต์ของคุณบนอุปกรณ์ iOS โดยตรงจาก Mac หรือ Windows

การเรียนรู้

  • คำแนะนำที่สมบูรณ์สำหรับ FlexBox | CSS -TRICKS - คู่มือที่ครอบคลุมเกี่ยวกับเค้าโครง FlexBox
  • คำแนะนำที่สมบูรณ์เกี่ยวกับกริด | CSS -TRICKS - คู่มือที่ครอบคลุมเกี่ยวกับเค้าโครงกริด
  • ผู้ใช้ Power Line คำสั่ง - ซีรีย์วิดีโอสำหรับนักพัฒนาเว็บเกี่ยวกับการเรียนรู้เวิร์กโฟลว์บรรทัดคำสั่งที่ทันสมัยด้วย ZSH, Z และเครื่องมือที่เกี่ยวข้อง
  • CSS Grid - หลักสูตรวิดีโอที่สมบูรณ์เกี่ยวกับ CSS Grid
  • ดีที่สุดของ JS ไซต์เพื่อตรวจสอบ repos gitHub ที่ดีที่สุดสำหรับเฟรมเวิร์ก JS ที่คุณชื่นชอบ
  • Codecademy - ชุดของหลักสูตรแบบโต้ตอบที่สอนโลกถึงวิธีการเขียนโค้ด เสนอการสมัครสมาชิกฟรีและชำระเงินในหลากหลายภาษา
  • Codementor - เครื่องมือในการรับความช่วยเหลือจากนักพัฒนาที่มีประสบการณ์ในภาษาการเข้ารหัสต่าง ๆ ในการเรียนรู้ของคุณ
  • หัวข้อ Scaler - แพลตฟอร์มสำหรับเรียนรู้ภาษาการเขียนโปรแกรมเช่น HTML, Java, JavaScript, Python ฯลฯ
  • การพิชิตเค้าโครงที่ตอบสนอง - ทำโดย Kevin Powell (https://twitter.com/kevinjpowell) หลักสูตรนี้จะนำคุณผ่านทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อสร้างเลย์เอาต์ที่ตอบสนองได้ในหลักสูตร 21 วันที่ยอดเยี่ยมของเขา
  • Coursera - การเลือกหลักสูตรจากโรงเรียนที่มีชื่อเสียงอย่างมากเช่น Stanford และ Yale
  • CSS Almanac | CSS -TRICKS - คู่มืออ้างอิงอย่างรวดเร็วเกี่ยวกับคุณสมบัติหลายอย่างของ CSS
  • CSS Grid Playground - คู่มือภาพที่ดูแลโดยทีม Mozilla เพื่อช่วยให้คุณเรียนรู้คุณสมบัติเลย์เอาต์กริดของ CSS พร้อมตัวอย่างโค้ดและการสาธิตมากมาย
  • ทรัพยากรการออกแบบ - การออกแบบทรัพยากรจาก Skullface
  • dev.to - ที่โปรแกรมเมอร์แบ่งปันความคิดและช่วยเหลือซึ่งกันและกันเติบโต
  • DevProjects - ชุมชนฟรีประกอบด้วยโครงการที่ดูแลจากนักพัฒนาอาวุโสเพื่อช่วยคุณลดช่องว่างระหว่างทฤษฎีและการปฏิบัติ -
  • Dicoding Academy - ที่ซึ่งทุกคนสามารถเรียนรู้การเขียนโปรแกรมจากพื้นฐาน ( มีเฉพาะในบาฮาซาอินโดนีเซีย )
  • EDX - ชุดหลักสูตรระดับมหาวิทยาลัยจาก Harvard, MIT, Wharton และอีกมากมาย
  • Egghead - วิดีโอการสอนการพัฒนาเว็บในเซ็กเมนต์ "ขนาดกัด" มีสมาชิกทั้งฟรีและ "Pro" (จ่าย)
  • enboard | ทรัพยากรส่วนหน้า - ทรัพยากรที่จัดระเบียบเกี่ยวกับการพัฒนาส่วนหน้า
  • FlexBox - ยกระดับความรู้ FlexBox ของคุณ - หลักสูตรออนไลน์ที่เน้นซอมบี้เป็นศูนย์กลาง
  • FreeCodecamp - ทรัพยากรฟรีที่รวมโครงการโปรแกรมและการเตรียมการสัมภาษณ์สำหรับงานนักพัฒนา
  • Frontend Masters - วิดีโอสอนการพัฒนาเว็บจากผู้นำอุตสาหกรรม (อัปเดตบ่อยครั้ง) มีทั้งฟรี (จำกัด เวลา) และสมาชิกที่ชำระเงิน
  • Full Stack Open - หลักสูตรการพัฒนาเว็บสแต็คเต็มรูปแบบโดย University of Helsinski เรียนรู้ React, Redux, Node.js, MongoDB, GraphQL และ TypeScript ในครั้งเดียว! หลักสูตรนี้จะแนะนำให้คุณรู้จักกับการพัฒนาเว็บที่ใช้ JavaScript ที่ทันสมัย จุดสนใจหลักคือการสร้างแอปพลิเคชันหน้าเดียวด้วย ReactJs ที่ใช้ REST APIs ที่สร้างขึ้นด้วย Node.js.
  • Geeksforgeeks - พอร์ทัลวิทยาศาสตร์คอมพิวเตอร์สำหรับ geeks
  • Khan Academy - แพลตฟอร์มการเรียนรู้ออนไลน์สากลที่ให้บริการหลักสูตรที่สำคัญสำหรับนักพัฒนา
  • Learnanything - ค้นหาแผนที่ความคิดเชิงโต้ตอบเพื่อเรียนรู้อะไรก็ได้
  • เรียนรู้ JavaScript - เรียนรู้ JavaScript ในสภาพแวดล้อมแบบโต้ตอบ อ่านบทเรียนสั้น ๆ จดบันทึกและความท้าทายที่สมบูรณ์ในเบราว์เซอร์ของคุณโดยตรง
  • Mastering Markdown - ชุดมินิที่จะเปลี่ยนวิธีการเขียนเอกสาร
  • Mozilla Developer Network - ข้อมูลล่าสุดเกี่ยวกับ Open Web Technologies
  • บทเรียนการพัฒนาเว็บที่สมบูรณ์แบบ -llyty.dev แบบฝึกหัดการพัฒนาเว็บที่สมบูรณ์พร้อมตัวอย่างที่อธิบายไว้อย่างดีฟรี
  • Pluralsight - การฝึกอบรมนักพัฒนาออนไลน์ไม่ จำกัด จากผู้เชี่ยวชาญในอุตสาหกรรม
  • Saylor - โซลูชันการเรียนรู้ออนไลน์แบบเปิดกว้างที่เสนอโอกาสเครดิตวิทยาลัยสำหรับนักเรียน
  • Scrimba-การเรียนรู้ที่ใช้รหัส-สกรอรัฐมนตรีในหลากหลายภาษา
  • สก๊อต - หลักสูตรการพัฒนาเว็บมากมาย มีทั้งสมาชิกฟรีและ "พรีเมี่ยม" (จ่าย)
  • ค้นหาหลักสูตร - การเลือกหลักสูตรที่ได้รับความนิยมและแบบฝึกหัด
  • Sololearn- พอร์ทัลฟรีสำหรับการเรียนรู้การพัฒนาเว็บ
  • Team Treehouse - การเรียนรู้ด้วยตนเองในหลากหลายภาษาและวิชา
  • การสอน JavaScript ที่ทันสมัย ​​- ทุกอย่างเกี่ยวกับภาษา JavaScript
  • โครงการ Odin - หลักสูตรโอเพ่นซอร์สสำหรับการเรียนรู้การพัฒนาเว็บ
  • จุดสอน - บทเรียนสำหรับภาษาที่แตกต่างกันมากมายพร้อมตัวอย่างรหัสแบบโต้ตอบ
  • Udacity - เรียนรู้อะไรก็ได้ทางออนไลน์ - การเรียนรู้อย่างลึกซึ้งการเรียนรู้ของเครื่องภาษาส่วนหน้า
  • Udemy - ตลาดการเรียนรู้และการสอนออนไลน์
  • ดูและรหัส - โรงเรียนวิทยาศาสตร์คอมพิวเตอร์สำหรับนักเรียนที่ต้องการความเข้มงวดทางปัญญาและความลึก
  • W3School - ห้องสมุดอ้างอิงการพัฒนาเว็บ ครอบคลุม HTML, CSS, JavaScript (jQuery, Ajax และอื่น ๆ ) รวมถึงภาษาฝั่งเซิร์ฟเวอร์ รวมถึงคำอธิบายและตัวอย่างแบบโต้ตอบ
  • เว็บ API | MDN - ทุกอย่างที่ผู้เริ่มต้นต้องรู้เกี่ยวกับเว็บ API
  • การออกแบบเว็บใน 4 นาทีโดยผู้สร้าง Jeremy Thomas ของ Bulma CSS และ Marksheet.io
  • WESBOS - หลักสูตรฟรีและพรีเมี่ยมในการพัฒนาเว็บ
  • Web Dev Tricks - CSS, JS, รหัสแนวโน้ม jQuery ทั้งหมดของคุณพร้อมรหัสแหล่งที่มาในที่เดียว พันธมิตรที่มีประโยชน์ของคุณสำหรับการพัฒนาเว็บและการออกแบบที่ทันสมัยทุกประเภท
  • Web.dev - คำแนะนำและแหล่งข้อมูลสำหรับเว็บไซต์ Fast ที่ทันสมัยโดย Google Developers
  • เป็นนักพัฒนาเว็บส่วนหน้า - พัฒนาความสามารถด้วย HTML, CSS, JavaScript และ JQuery
  • WebGlossary.info - อภิธานศัพท์สำหรับการพัฒนาและออกแบบเว็บที่มีมากกว่า 3,500 รายการ (ตามสิงหาคม 2023)
  • ทักษะเว็บ - ภาพรวมภาพของทักษะที่เป็นประโยชน์ในการเรียนรู้ในฐานะนักพัฒนาเว็บ
  • App Brewery - ทั้งหมดในแพลตฟอร์มเดียวเพื่อครอบคลุมทักษะการพัฒนาเว็บของคุณ
  • Full Stack Open 2021 - หลักสูตรนี้ทำหน้าที่เป็นการแนะนำการพัฒนาเว็บแอปพลิเคชันที่ทันสมัยด้วย JavaScript
  • Devtools Tech - แพลตฟอร์มการเตรียมการสัมภาษณ์ฟรีสำหรับวิศวกรส่วนหน้าโดยมุ่งเน้นไปที่คำถามการเขียนโปรแกรมในโลกแห่งความเป็นจริงที่มีคุณภาพสูง

⬆กลับไปด้านบน

A11y

  • คู่มือสไตล์ A11y - คู่มือสไตล์การใช้ชีวิตหรือห้องสมุดรูปแบบที่สร้างขึ้นจากรูปแบบที่บันทึกไว้ของ KSS ... ด้วยการบิดเบือนการเข้าถึง
  • AX - ชุดเครื่องมือทดสอบการเข้าถึงการเข้าถึง
  • เครื่องวิเคราะห์ความคมชัดสี - CCA ช่วยให้คุณกำหนดความชัดเจนของข้อความและความคมชัดขององค์ประกอบภาพเช่นการควบคุมกราฟิกและตัวบ่งชี้ภาพ
  • DEQUE University - หลักสูตรออนไลน์บนเว็บและทักษะการเข้าถึงมือถือ
  • W3C Intro to Web Accessibility - กลยุทธ์มาตรฐานทรัพยากรเพื่อให้เว็บสามารถเข้าถึงได้สำหรับคนพิการ

⬆กลับไปด้านบน

ช่อง YouTube

  • APNA College- บทเรียนเกี่ยวกับ HTML, CSS, Bootstrap, JavaScript, Git, GitHub, SQL
  • Adrian Twarog- บทช่วยสอนเกี่ยวกับ HTML, CSS, Bootstrap, JavaScript, React, React
    พื้นเมือง, UI/UX และสิ่งที่ออกแบบเย็น
  • 1stwebdesigner - บทเรียนเกี่ยวกับ WordPress, PSD ถึง HTML
  • Brad Hussey - บทเรียนเกี่ยวกับ bootstrap, sass, jQuery, php, freelancing
  • เคล็ดลับ CSS - ช่อง YouTube ของบล็อกการออกแบบและพัฒนาเว็บที่รู้จักกันดีบล็อก CSS เคล็ดลับโดย Chris Coyier
  • บทเรียน CSS - บทเรียนในภาษาฮินดีโดย Husain Sir ครอบคลุมพื้นฐานทั้งหมดของ CSS
  • คู่มือ Coder - บทช่วยสอนเกี่ยวกับ HTML, CSS, JavaScript, Bootstrap
  • CodeVolution - บทเรียนเกี่ยวกับ React, Vue, Angular, MongoDB, JavaScript, Mean Stack, HTML, CSS
  • โปรแกรมเมอร์ที่ฉลาด - บทช่วยสอนเกี่ยวกับ React, MongoDB, JavaScript, Mern Stack, HTML, CSS, React Native
  • Derek Banas - บทช่วยสอนเกี่ยวกับ C#, Visual Basic, Django, Python, Nodejs, Angularjs, MongoDB, JQuery, JavaScript, CSS, Ruby on Rails, Java, Sqlite, Android, HTML, PHP
  • DevTips - บทเรียนเกี่ยวกับ HTML5, CSS, SASS, Bootstrap, Foundation, JQuery, Ruby on Rails, GitHub
  • DesignCourse - บทเรียนเกี่ยวกับการออกแบบ UI/UX หรือ HTML5, CSS, SASS, ห้องสมุดแอนิเมชั่น
  • Dennis Ivy - บทช่วยสอนเกี่ยวกับโครงการพัฒนาเว็บแบบเต็มรูปแบบ Django & Flask
  • Elzero Web School - ภาษาอาหรับเท่านั้น
  • FreeCodecamp - บทเรียนเกี่ยวกับ JQuery, JavaScript, React, Math, Science, Software Engineering, Open Source Software
  • ฟังก์ชั่นความสนุกสนานสนุก - บทช่วยสอนเกี่ยวกับ JavaScript, React, การเขียนโปรแกรมที่ใช้งานได้, GraphQl, Life ในฐานะนักพัฒนา
  • นักพัฒนา Google Chrome - การพูดคุยล่าสุดและยิ่งใหญ่ที่สุดเกี่ยวกับการพัฒนาเว็บที่ทันสมัยด้วยเคล็ดลับข้อมูลเชิงลึกและเทคนิคต่างๆเพื่อช่วยให้คุณยกระดับทักษะการพัฒนาเว็บของคุณ
  • Kevin Powell - บทเรียนเกี่ยวกับ HTML, CSS ช่วยให้เข้าใจ CSS ได้ดีขึ้นในวิธีง่ายๆ
  • LearnCode.academy - บทช่วยสอนเกี่ยวกับ HTML, CSS, JQuery, JavaScript, React JS / Redux, Node JS
  • Leveluptuts - บทช่วยสอนเกี่ยวกับ HTML, CSS, SASS, WordPress, Magento, Drupal, React, Meteor
  • Mackenzie Child - Design to Code Challenge - บทเรียนเกี่ยวกับ UI วิธีการออกแบบและรหัสหลายรูปแบบของเว็บไซต์
  • รถไฟเข้ารหัส - บทช่วยสอนเกี่ยวกับ JavaScript, โหนด, การเรียนรู้ของเครื่อง, เครือข่ายประสาท, อัลกอริทึม
  • นินจาสุทธิ - บทช่วยสอนเกี่ยวกับ HTML, CSS, jQuery, JavaScript, Git และ GitHub, Bootstrap, MangoDB, PSD ถึง WordPress, PSD ถึง HTML และอีกมากมาย
  • Thedigicraft - บทช่วยสอนเกี่ยวกับ HTML, CSS, JQuery, PHP, Ajax, Bootstrap, MySQL
  • THEWBOSTON - บทช่วยสอนเกี่ยวกับ ECMASCRIPT 6, React JS / REDUX, Django, Angular 2, Gulp, Git, Python, SEO, SASS, SCSS, คำราม, นักวาดภาพประกอบ, MongoDB, PHP, Java, Ruby
  • Traversy Media - บทช่วยสอนเกี่ยวกับ HTML, CSS, JQuery, PHP, Ajax, Bootstrap, MySQL, Ecmascript 6, ตอบสนอง JS / Redux, Django, Angular, Ionic, Gulp, Git, Python, Node JS, PHP
  • CodeWithHarry - บทเรียนเกี่ยวกับ HTML, CSS, JavaScript, Node JS, MongoDB และ Hosting
  • การเขียนโปรแกรมด้วย mosh - การสอนเกี่ยวกับ React, nodejs, python, javascript, angular, typescipt และ c#
  • Dev ed - เรียนรู้การพัฒนาเว็บการออกแบบเว็บการสร้างแบบจำลอง 3 มิติเครื่องมือเช่น Figma และอีกมากมาย
  • Web Dev Simplified - เรียนรู้การพัฒนาเว็บไซต์ด้วย HTML, JavaScript, CSS และกรอบอื่น ๆ ที่มีโครงการเดียวกันและอื่น ๆ
  • Mozilla Developer - วิดีโอที่ช่วยคุณในการทำงานในฐานะนักออกแบบเว็บไซต์นักพัฒนาเว็บหรือบุคคลที่เกี่ยวข้องกับการสร้างเว็บไซต์หรือเว็บแอพ
  • Academind - มีบางสิ่งที่จะเรียนรู้เสมอ ไม่ว่าคุณต้องการดูแบบฝึกหัดหรือไกด์เชิงมุม Vue.js เนื้อหาการพัฒนาส่วนหน้าหรือหัวข้อวิทยาศาสตร์ข้อมูลหรือสิ่งอื่นใด - คุณอาจถูกต้อง
  • บทเรียนโครงการ Sonny Sangha เกี่ยวกับ React, Redux, Next JS & React Native
  • WB Web Development - บทช่วยสอนเกี่ยวกับ HTML, CSS, Bootstrap, Sass, JavaScript, Git และ GitHub, MongoDB, NodeJS, ReactJS
  • บทช่วยสอนออนไลน์- เนื้อหาชั้นนำในการพัฒนาเว็บส่วนหน้า มีบทเรียนพิเศษเกี่ยวกับ HTML, CSS และ JavaScript พร้อมเอฟเฟกต์ที่น่าทึ่ง ต้องเยี่ยมชมสำหรับนักพัฒนาส่วนหน้าทั้งหมด
  • Akshay Saini- วิดีโอเกี่ยวกับเคล็ดลับการสัมภาษณ์ส่วนหน้าประสบการณ์การสัมภาษณ์และแนวคิดหลักของ JavaScript เป็นพิเศษ
  • วิดีโอเทคทูลส์เกี่ยวกับแนวคิดแนวหน้าขั้นสูงคำถามสัมภาษณ์และประสบการณ์และมุ่งเน้นไปที่แนวคิด JavaScript ขั้นสูงถึงขั้นสูง

⬆กลับไปด้านบน

บล็อก

  • 10 จำเป็นต้องทราบหลักสูตรแนวคิด JavaScript - จากพื้นฐานไปจนถึงแนวคิดจาวาสคริปต์ขั้นพื้นฐานที่อธิบายไว้ในวิธีง่ายๆที่นักพัฒนาจาวาสคริปต์ทุกคนต้องรู้
  • 100 วิธีที่จะสร้างสรรค์มากขึ้น - 100 วิธีที่จะสร้างสรรค์มากขึ้นจาก Shaunta Grimes
  • 2017 Design Roundup - คอลเลกชันของทรัพยากรการพัฒนาเว็บ Codrops ทั้งหมดสำหรับปี 2017
  • 50 สิ่งที่คุณ [อาจ] ลืมออกแบบ - เครื่องมือไฟฟ้า UX - สื่อกลาง - 50 สิ่งที่คุณอาจลืมออกแบบจาก Jon Moore
  • ACM Month of Code 2K17: การสร้าง Moodify - ACM เดือนของรหัส 2K17: การสร้าง Moodify จาก Ajay NS
  • คู่มือภาพประกอบสำหรับการตั้งค่าเว็บไซต์ของคุณโดยใช้ GitHub & CloudFlare - คู่มือภาพประกอบเพื่อตั้งค่าเว็บไซต์ของคุณโดยใช้ GitHub และ CloudFlare จาก Karan Thakkar
  • Brad Frost Blog - ผู้แต่งการออกแบบอะตอมระบบการออกแบบอาคารใน CSS & HTML
  • แบบอักษรฟรีที่ดีที่สุด - 70+ แบบอักษรฟรีที่ดีที่สุดสำหรับนักออกแบบ - ฟรีสำหรับการใช้งานเชิงพาณิชย์ในปี 2562
  • แอนิเมชั่น CSS เทียบกับเว็บแอนิเมชั่น API: กรณีศึกษา
  • เคล็ดลับ CSS - บทความประจำวันเกี่ยวกับ CSS, HTML, JavaScript และทุกสิ่งที่เกี่ยวข้องกับการออกแบบและพัฒนาเว็บ
  • คำคมการออกแบบและความคิดสร้างสรรค์ - 72 คำพูดเกี่ยวกับการออกแบบและความคิดสร้างสรรค์จาก Margaret Kelsey
  • การออกแบบทรัพยากร - รายการทรัพยากรสำหรับการทำงานและเรียนรู้เกี่ยวกับการออกแบบ
  • Design for Change - บทความเกี่ยวกับการออกแบบใหม่และการออกแบบที่ยั่งยืนโดย Viba Mohan
  • ผู้ลงทะเบียนโดเมน DNS และโฮสติ้ง - ทะเบียนโดเมน, DNS และโฮสติ้งจาก Kirby Kohlmorge
  • คู่มือผู้เริ่มต้นไปยัง Gatsby - Gatsby.js: วิธีการตั้งค่าและใช้เครื่องกำเนิดไซต์ React Static จาก Aman Mittal
  • ตัวอย่างของทุกสิ่งใน Ecmascript ในปี 2016,2017, 2018
  • บทเรียน Flavio Copes - บทช่วยสอนรายวันเกี่ยวกับ JavaScript และการพัฒนาเว็บโดย Flavio Copes
  • จาก URL ไปจนถึงการโต้ตอบ - คำอธิบายว่าเวิลด์ไวด์เว็บทำงานอย่างไร
  • Frontend Dogma - ข่าวและเครื่องมือสำหรับการพัฒนาส่วนหน้ามักจะอัปเดตวันละสองครั้ง
  • Frontend Weekly - บทความที่ดีที่สุดลิงก์และข่าวที่เกี่ยวข้องกับการพัฒนาส่วนหน้าจัดส่งสัปดาห์ละครั้งไปยังกล่องจดหมายของคุณ
  • วิธีที่ฉันเคลื่อนไหวโลโก้ Bitsofcode กับ CSS - บทความกระบวนการเกี่ยวกับภาพเคลื่อนไหว CSS ที่กำหนดเอง
  • ฟังก์ชั่น minmax () ทำงานอย่างไร - คำอธิบายของฟังก์ชัน CSS minmax () ซึ่งสามารถใช้สำหรับเค้าโครงกริด CSS
  • วิธีสร้างผลงานที่น่าประทับใจเมื่อคุณยังใหม่กับเทคโนโลยี - วิธีสร้างผลงานที่น่าประทับใจเมื่อคุณยังใหม่กับเทคโนโลยีจาก Randle Browning
  • วิธีการสร้างเครื่องกำเนิดใบเสนอราคาแบบสุ่มด้วย JavaScript และ HTML สำหรับผู้เริ่มต้นสัมบูรณ์ - วิธีการสร้างเครื่องกำเนิดใบเสนอราคาแบบสุ่มด้วย JavaScript และ HTML สำหรับผู้เริ่มต้นสัมบูรณ์จาก Sophanarith Sok
  • วิธีการสร้างองค์ประกอบ Vue ครั้งแรกของคุณ - การสอนโครงการเริ่มต้นเพื่อสร้างองค์ประกอบ Vue โดย Sarah Dayan
  • ลองใช้รหัสเครือข่ายประสาทตั้งแต่ต้น - ตอนที่ 1 - Typeme - Medium - Let's Code A Neural Network ตั้งแต่ต้นจาก Charles Fried
  • แรงบันดาลใจจากเครื่องเล่นเพลง - แรงบันดาลใจจากเครื่องเล่นเพลง 2017 จาก Muzli
  • รายการตรวจสอบส่วนหน้า - รายการที่ครบถ้วนสมบูรณ์ขององค์ประกอบทั้งหมดที่คุณต้องมี/ทดสอบก่อนที่จะเปิดตัวเว็บไซต์ของคุณเพื่อการผลิต
  • การสร้างและทำการตลาด chatbot เป็นอย่างไรเมื่อคุณอายุเพียง 14 ปี - มันเป็นอย่างไรที่จะสร้างและทำการตลาดแชทบ็อตเมื่อคุณอายุเพียง 14 ปีจากอเล็กซ์โจนส์
  • ข้อตกลงกับอัตรากำไรขั้นต้นที่ยุบได้คืออะไร? - คำอธิบายเกี่ยวกับคุณสมบัติการยุบของ CSS
  • รายการที่ได้รับการดูแลอย่างดีสำหรับรายการทรัพยากร UX สำหรับ UX โดย Fernandocomet
  • Airbnb Open Source - บทความด้านวิศวกรรมและข้อมูลวิทยาศาสตร์และโครงการโอเพ่นซอร์ส
  • ค่าใช้จ่ายของ JS - วิธีการส่งมอบ JavaScript อย่างมีประสิทธิภาพสำหรับประสบการณ์ผู้ใช้ที่มีค่าโดย Addy Osmani
  • CSS Scroll -Snap - การสอนเกี่ยวกับการเลื่อน CSS Scroll ซึ่งช่วยให้คุณสามารถล็อควิวพอร์ตหลังจากผู้ใช้เลื่อนเสร็จแล้ว
  • PRELOAD, PREFETCH และลำดับความสำคัญใน Chrome - บทความเกี่ยวกับวิธีการที่เว็บโหลดดั้งเดิมทำงานบนสแต็กใหม่ของ Chrome โดย Addy Osmani
  • เรียนรู้ Git ด้วยตัวคุณเอง - ภาษาจีนดั้งเดิม
  • IDEs สำหรับนักพัฒนาเว็บ - ปัจจัยที่ต้องพิจารณาเมื่อเลือก IDE สำหรับการพัฒนาเว็บและตัวอย่างของตัวเลือกที่ดี
  • APIs สภาพอากาศ 8 อันดับแรกสำหรับปี 2020 - APIs สภาพอากาศ 8 อันดับแรกสำหรับปี 2020 - API สภาพอากาศที่ดีที่สุดสำหรับนักพัฒนาซอฟต์แวร์
  • บทเรียนชุมชน Digital Ocean Community - คอลเล็กชั่นการสอนฟรีจากผู้เชี่ยวชาญ ทั้งหมดมีส่วนร่วมจากชุมชนมหาสมุทรดิจิตอล
  • ตอบสนองสำหรับผู้เริ่มต้น - คู่มือ react.js สำหรับนักพัฒนาส่วนหน้า - คู่มือ react.js สำหรับนักพัฒนาส่วนหน้า
  • Ultimate React Resources - บล็อกรวมถึงโพสต์บล็อก, e -books ฟรี, repos github พร้อมรายการที่ดูแล, การใช้งานจริงของ React.js ในโลกแห่งความเป็นจริงด้วยรหัสการทำงาน
  • การแนะนำให้รู้จักกับ CSS Grid - บล็อกเพื่อเรียนรู้พื้นฐานของ CSS Grid โดยการสร้างเลย์เอาต์ที่ซับซ้อนที่แตกต่างกัน
  • บล็อกของ Rado) - บล็อกโดยพิจารณาจากบทความเกี่ยวกับการพึ่งพาปฏิกิริยาและการใช้งาน GraphQL และอีกมากมาย!
  • Roblog - จุดหมายปลายทางไปสู่ทุกสิ่งที่เกี่ยวข้องกับเทคโนโลยี, JavaScript, Node.js และการพัฒนาเว็บ
  • บล็อก Monica Powell - บล็อกที่ยอดเยี่ยมเกี่ยวกับ JavaScript, React, Gatsby และ Git
  • Devtools Tech - ทรัพยากรที่มีคุณภาพสูงอย่างระมัดระวังสำหรับวิศวกรส่วนหน้า

การว่าจ้าง

  • สถานที่ที่ยอดเยี่ยมสองแห่งในการค้นพบความสามารถด้านเทคโนโลยีและวิธีดึงดูดพวกเขา - การจ้างความสามารถด้านเทคโนโลยีในปี 2020

    ⬆กลับไปด้านบน

พอดคาสต์

  • บล็อกการเข้ารหัส - พอดคาสต์การพัฒนาซอฟต์แวร์โดยทีมงานโปรแกรมเมอร์มืออาชีพ
  • Frontend Happy Hour - Front End ซอฟต์แวร์และพอดคาสต์การพัฒนาอาชีพโดยผู้ร่วมอภิปรายอุตสาหกรรม
  • JavaScript Jabber - พอดคาสต์สำหรับนักพัฒนา JavaScript เว็บไซต์ยังมีพอดคาสต์ที่เกี่ยวข้องกับการเขียนโปรแกรมอื่น ๆ อีกมากมาย
  • ไวยากรณ์ - พอดคาสต์การพัฒนาส่วนหน้าโดย Wes Bos และ Scott Tolinski จาก TUTS LEVEL UP TUT

⬆กลับไปด้านบน

บรรณาธิการรหัส

  • Atom - Atom เป็นตัวแก้ไขข้อความที่ทันสมัยเข้าถึงได้ แต่สามารถแฮ็กได้กับแกน - เครื่องมือที่คุณสามารถปรับแต่งให้ทำอะไรก็ได้ แต่ยังใช้อย่างมีประสิทธิภาพโดยไม่ต้องแตะไฟล์กำหนดค่า โอเพ่นซอร์ส | แพลตฟอร์มทั้งหมด

  • วงเล็บ - ด้วยเครื่องมือภาพที่เน้นและการสนับสนุน preprocessor วงเล็บเป็นตัวแก้ไขข้อความที่ทันสมัยที่ทำให้ง่ายต่อการออกแบบในเบราว์เซอร์ มันถูกสร้างขึ้นมาจากพื้นดินสำหรับนักออกแบบเว็บไซต์และนักพัฒนาส่วนหน้า โอเพ่นซอร์ส | แพลตฟอร์มทั้งหมด

  • Geany - Geany เป็นสภาพแวดล้อมการพัฒนาแบบบูรณาการขนาดเล็กและมีน้ำหนักเบา

  • Intellijidea - IDE สากลจาก Jetbrains มันมีรหัสการรวมรหัสการรวมและระบบควบคุมเวอร์ชัน (VCS)

  • Notepad ++ - Notepad ++ เป็นตัวแก้ไขซอร์สโค้ดฟรี (เช่นใน "ฟรีคำพูด" และใน "เบียร์ฟรี") ตัวแก้ไขซอร์สโค้ดและการเปลี่ยน Notepad ที่รองรับหลายภาษา Windows เท่านั้น -PyCharm -used โดยเฉพาะสำหรับภาษา Python, ให้การวิเคราะห์รหัส, ดีบักเกอร์กราฟิก, ผู้ทดสอบหน่วยแบบบูรณาการ, การรวมเข้ากับระบบควบคุมเวอร์ชันและรองรับการพัฒนาเว็บด้วย Django และวิทยาศาสตร์ข้อมูลกับ Anaconda แพลตฟอร์มทั้งหมด โอเพ่นซอร์ส

  • ข้อความประเสริฐ - ตัวแก้ไขข้อความที่ซับซ้อนสำหรับรหัสมาร์กอัปและร้อยแก้ว แพลตฟอร์มทั้งหมด

  • VIM - VIM เป็นตัวแก้ไขข้อความที่สามารถกำหนดค่าได้สูงสำหรับการสร้างและเปลี่ยนข้อความทุกประเภทอย่างมีประสิทธิภาพ มันรวมอยู่ใน "vi" กับระบบ UNIX ส่วนใหญ่และกับ Apple OS X

  • Visual Studio Code - การแก้ไขโค้ดนิยามใหม่ มันมีการเน้นไวยากรณ์และการเติมข้อความอัตโนมัติด้วย IntelliSense, คำสั่ง GIT ในตัว, ขยายได้และปรับแต่งได้ โอเพ่นซอร์ส | แพลตฟอร์มทั้งหมด

  • WebStorm - JavaScript IDE ที่ฉลาดที่สุด WebStorm เป็นสภาพแวดล้อมการพัฒนาแบบบูรณาการสำหรับ JavaScript และเทคโนโลยีที่เกี่ยวข้อง แพลตฟอร์มทั้งหมด

  • UltraEdit - UltraEdit เป็นตัวแก้ไข HTML และรหัสที่ทรงพลังสำหรับ Mac, Windows และ Linux มันมาพร้อมกับยูทิลิตี้การเปรียบเทียบไฟล์ในตัว, การเติมข้อความอัตโนมัติ, เค้าโครงขั้นสูง, มัลติแท็บ, ตัวแก้ไขแบบหลายบานและการเน้นไวยากรณ์สำหรับภาษาการเขียนโปรแกรมที่ได้รับความนิยมมากที่สุด

  • Nano - Gnu Nano เป็นตัวแก้ไขข้อความสำหรับระบบปฏิบัติการของ UNIX

  • Stackblitz - โปรแกรมแก้ไขรหัสที่ทรงพลังโอเพ่นซอร์สออนไลน์สำหรับ JavaScript Frameworks และห้องสมุดที่มีคุณสมบัติที่ยอดเยี่ยมบางอย่างเช่นการนำเข้า gitHub, เซิร์ฟเวอร์สดและการกระทำโดยตรงจากบรรณาธิการไปยัง GitHub!

⬆กลับไปด้านบน

ส่วนขยายรหัส Visual Studio

  • แท็กเปลี่ยนชื่ออัตโนมัติ - เมื่อคุณเปลี่ยนชื่อแท็ก HTML/XML หนึ่งแท็กจะเปลี่ยนชื่อแท็ก HTML/XML ที่จับคู่โดยอัตโนมัติ
  • ความคิดเห็นที่ดีกว่า - รหัสสีส่วนขยายนี้ความคิดเห็นประเภทต่างๆเพื่อให้ความสำคัญแตกต่างกันและโดดเด่นจากส่วนที่เหลือของรหัสของคุณ
  • Bracket Pair Colorizor - วงเล็บจับคู่สีเพื่อให้รหัสของคุณอ่านได้มากขึ้น - มีประโยชน์มาก
  • Code Checker - ตัวตรวจสอบการสะกดพื้นฐานที่ทำงานได้ดีกับรหัสแคมเคล
  • ES LINT - JavaScript Linter สำหรับการเน้นข้อผิดพลาดของรหัสและแนวทางปฏิบัติที่ดีที่สุด
  • การจัดรูปแบบสลับ - ส่วนขยายรหัส VS ที่ช่วยให้คุณสลับรูปแบบ (สวยกว่า, สวยงาม, ... ) เปิดและปิดด้วยการคลิกง่าย ๆ
  • ประวัติ GIT - ดูบันทึก GIT, ประวัติไฟล์, เปรียบเทียบสาขาหรือการกระทำ
  • GITLENS - เพิ่มความสามารถของ GIT ที่สร้างขึ้นในรหัสสตูดิโอ Visual - แสดงภาพการเขียนโค้ดได้อย่างรวดเร็วผ่านคำอธิบายประกอบการตำหนิ GIT และรหัสเลนส์นำทางและสำรวจ GIT ที่เก็บข้อมูลข้อมูลเชิงลึกที่มีค่าผ่านคำสั่งเปรียบเทียบที่ทรงพลังและอื่น ๆ อีกมากมาย
  • JS Snippets - ส่วนขยายนี้มีรหัสตัวอย่างสำหรับ JavaScript ในไวยากรณ์ ES6 สำหรับ VS Code Editor (รองรับทั้ง JavaScript และ TypeScript)
  • Live Server - เซิร์ฟเวอร์การพัฒนาอย่างรวดเร็วด้วยการโหลดเบราว์เซอร์สด
  • ชุดรูปแบบไอคอนวัสดุ - ชุดไอคอนชุดรูปแบบของ Google วัสดุ
  • PATH Intellisense - เมื่อคุณเริ่มพิมพ์เส้นทางในใบเสนอราคาคุณจะได้รับ IntelliSense สำหรับไดเรกทอรีและชื่อไฟล์
  • PEACOCK - เปลี่ยนสีพื้นที่ทำงานของพื้นที่ทำงานของคุณอย่างละเอียด เหมาะอย่างยิ่งเมื่อคุณมีอินสแตนซ์รหัส VS หลายตัวและคุณต้องการระบุอย่างรวดเร็วว่าคืออะไร
  • POLACODE - คุณรู้จักภาพหน้าจอรหัสแฟนซีที่คุณเห็นในบทความและทวีตหรือไม่? เป็นไปได้มากว่าพวกเขามาจากโพลาโคด ใช้งานง่ายสุด ๆ คัดลอกโค้ดลงในคลิปบอร์ดของคุณเปิดส่วนขยายวางรหัสและคลิกเพื่อบันทึกภาพของคุณ!
  • Prettier - จัดรูปแบบรหัสของคุณโดยอัตโนมัติเมื่อบันทึก
  • quokka.js - quokka.js เป็นเครื่องมือผลิตภาพนักพัฒนาสำหรับการสร้างต้นแบบ JavaScript / typeycript อย่างรวดเร็ว ค่ารันไทม์ได้รับการอัปเดตและแสดงใน IDE ของคุณถัดจากรหัสของคุณในขณะที่คุณพิมพ์
  • การตั้งค่าการซิงค์ - การตั้งค่าการซิงค์ส่วนขยายบันทึกการตั้งค่าของคุณปิดใน gitHub จากนั้นคุณสามารถโหลดไปยังรหัส VS เวอร์ชันใหม่ได้ด้วยคำสั่งเดียว

⬆กลับไปด้านบน

เครื่องมือ

  • API Directory | ProgrammableWeb
  • Animista - CSS Animation Presets/Generator
  • Better Code Hub - ตรวจสอบ GitHub Codebase กับแนวทางวิศวกรรมซอฟต์แวร์และให้ข้อเสนอแนะ
  • เบราว์เซอร์ - การทดสอบข้ามเบราว์เซอร์แบบอินเทอร์แอคทีฟบนเครื่องเสมือนจริง
  • LAMBDATEST - เว็บไซต์ทดสอบและเว็บแอพบนเบราว์เซอร์และระบบปฏิบัติการ 2000+
  • BrowserStack - เว็บไซต์ทดสอบและแอพมือถือบนเบราว์เซอร์และอุปกรณ์มือถือที่แตกต่างกัน
  • ฉันสามารถใช้ ... - ตารางรองรับสำหรับ HTML5, CSS3 ฯลฯ บนเดสก์ท็อปและเบราว์เซอร์มือถือ
  • CheckBot - ส่วนขยายเบราว์เซอร์ที่ทดสอบเว็บไซต์สำหรับปัญหา SEO, ความเร็วและความปลอดภัย
  • CodePen - สภาพแวดล้อมการพัฒนาสังคมที่คุณสามารถเขียนโค้ดในเบราว์เซอร์และดูผลลัพธ์ที่คุณสร้าง
  • Codply - สนามเด็กเล่น HTML, CSS, JavaScript Editor สำหรับนักออกแบบและนักพัฒนาเพื่อเปรียบเทียบกรอบต้นแบบและการทดสอบกรอบส่วนหน้า
  • CodeSandBox - เครื่องมือ IDE และต้นแบบทันทีสำหรับการพัฒนาเว็บ
  • สร้างซอใหม่ - JSFIDDLE - ทดสอบ JS, CSS, HTML หรือ CoffeeScript ในโปรแกรมแก้ไขรหัสออนไลน์
  • Critical Path CSS Generator - โดย Jonas Ohlsson - ลดจำนวน CSS ที่เบราว์เซอร์ต้องผ่านเพื่อแสดงหน้าเว็บ
  • แอพ CrossBrowserTesting - บริการเว็บสำหรับเรียกใช้การทดสอบเว็บที่ใช้งานได้บนเว็บเบราว์เซอร์บนมือถือและเดสก์ท็อป
  • CSS Cheat Sheet - ใช้งานอ้างอิงหนึ่งหน้าได้ง่ายมากสำหรับตัวเลือก CSS และคุณสมบัติ นอกจากนี้ยังมีหมวดหมู่สำหรับ Flexbox และ Grid
  • CSS minifier - ลดไฟล์ CSS ของคุณ!
  • การอ้างอิง CSS - คู่มือภาพฟรีสำหรับ CSS
  • CSS Triggers - บอกคุณว่าอะไรได้รับการกระตุ้นเมื่อกลายพันธุ์คุณสมบัติ CSS ที่กำหนด
  • ตัวกรอง CSS - ตัวกรองตัวกรอง CSS แบบโต้ตอบ
  • Colorlisa - เครื่องกำเนิดจานสีตามศิลปินที่ยอดเยี่ยม
  • DirtyMarkup - เป็นระเบียบ HTML, CSS และรหัส JavaScript ของคุณ
  • ExtendsClass - จัดเตรียมเครื่องมือในการเพิ่มคุณสมบัติที่ใช้งานได้โดยตรงในเบราว์เซอร์
  • Favicon Generator - อัปโหลดรูปภาพและสร้าง favicon สำหรับเว็บไซต์ของคุณ
  • Favicon Generator สำหรับ IOS/Google Progressive Web App Manifest - เครื่องมือออนไลน์เพื่อทดสอบ Favicons บนแพลตฟอร์มที่แตกต่างกัน
  • สิ่งที่นักพัฒนาซอฟต์แวร์ฟรี - รายการสิ่งของฟรีสำหรับนักพัฒนาโดยนักพัฒนาซอฟต์แวร์ที่จะใช้ บริการบางอย่างฟรีตลอดไปหรือมีระดับฟรีอย่างน้อย 1 ปี
  • ฟรีสำหรับนักพัฒนา - เว็บไซต์นี้มีรายการทรัพยากรฟรีและชำระเงินจำนวนมากไม่เพียง แต่สำหรับนักพัฒนาส่วนหน้าเท่านั้น แต่ยังรวมถึงนักพัฒนาทุกประเภทด้วย
  • สร้าง Favicon ตามข้อความ - สร้าง favicon จากข้อความภาพหรืออิโมจิ
  • รับคลื่น - สร้างคลื่น SVG หลายประเภทสำหรับใช้ในการออกแบบเว็บ
  • GLITCH - GLITCH เป็นเหมือนการทำงานร่วมกันใน Google Docs - ผู้คนหลายคนสามารถทำงานในโครงการเดียวกันได้ในเวลาเดียวกัน
  • GRAPHIC GENERATOR - สร้างกราฟิกสำหรับแอปพลิเคชันส่วนหน้าทั่วไป
  • Google Analytics - บริการเว็บที่ติดตามและรายงานปริมาณการเข้าชมเว็บไซต์
  • Google APIS Explorer - เครื่องมือในการสำรวจ Google APIs ต่างๆ
  • คอนโซล JavaScript ในข้อความประเสริฐ - การสอนเพื่อทดสอบ JavaScript และดำเนินการผ่านระบบสร้างในข้อความประเสริฐ 3
  • jQuery mega cheat sheet - แผ่นโกงของ jQuery selectros, การจัดการ, กิจกรรมและอื่น ๆ ในรูปแบบ PDF
  • JS Bin - Pastebin สดสำหรับ HTML, CSS และ JS รวมถึงโปรเซสเซอร์ที่หลากหลาย
  • Lighthouse - โอเพ่นซอร์สเครื่องมืออัตโนมัติสำหรับการปรับปรุงคุณภาพของหน้าเว็บ
  • Modern JavaScript Cheat Sheet - นี่เป็นคอลเล็กชั่นที่ยอดเยี่ยมของเคล็ดลับและแนวคิด JavaScript โดย Manuel Beaudru ทำงานเป็นภาพรวมที่ดีของหลายสิ่งที่คุณต้องคุ้นเคยหากคุณเพิ่งเริ่มต้นกับ JavaScript และเฟรมเวิร์กอื่น ๆ ที่เกี่ยวข้อง
  • Node Package Manager (NPM) - Package Manager สำหรับ JavaScript
  • เส้นด้าย - ผู้จัดการแพ็คเกจสำหรับ JavaScript เช่น NPM
  • ResponsInator - ทำซ้ำว่าเว็บไซต์ตอบสนองจะดูอุปกรณ์ยอดนิยมอย่างไร
  • React Cheat Sheet - เว็บไซต์ที่ทำจากเอกสารยังเป็นแอพพลิเคชั่นเว็บแบบก้าวหน้าซึ่งหมายความว่าทำงานได้ดีแม้ในออฟไลน์ คุณสามารถค้นหาด้วยคำหลักหรือเลือกหนึ่งในตัวกรองที่กำหนดไว้ล่วงหน้า
  • ระบบกริดที่ตอบสนอง - สร้างกริดที่ยืดหยุ่นเพื่อสร้างเว็บไซต์ที่ตอบสนอง
  • Expression (Regex) Editor - ช่วยสร้างและตรวจสอบการแสดงออกปกติของคุณ
  • Sans Francisco - เครื่องมือสำหรับนักออกแบบ - คอลเลกชันเครื่องมือสำหรับนักออกแบบ
  • Screensizemap - การเปรียบเทียบขนาดหน้าจอในพิกเซลที่ไม่ขึ้นกับอุปกรณ์
  • Sizzy: เครื่องมือทดสอบเบราว์เซอร์ - เครื่องมือสำหรับการพัฒนาและทดสอบการออกแบบที่ตอบสนองต่ออุปกรณ์หลายเครื่องพร้อมกัน
  • Stack Overflow - ชุมชนออนไลน์สำหรับนักพัฒนาเพื่อถามคำถามและรับคำตอบ
  • บริการตรวจสอบมาร์กอัป W3C - ตรวจสอบความถูกต้องของมาร์กอัปของเอกสารเว็บใน HTML, XHTML, SMIL, MathML ฯลฯ
  • บริการตรวจสอบความถูกต้องของ W3C CSS - ตรวจสอบความถูกต้องของเอกสาร CSS และ XHTML พร้อมแผ่นสไตล์
  • Time Helper - ช่วยแปลง Millis เป็น DateTimes และในทางกลับกัน
  • Tinypng - PNG และ JPEG การบีบอัด/เพิ่มประสิทธิภาพ
  • รายการตรวจสอบนักพัฒนาเว็บ - รายการตรวจสอบหมวดหมู่สำหรับสิ่งที่ครอบคลุมในระหว่างการพัฒนาเว็บ
  • เครื่องมือแบบก้าวหน้าเพื่อเพิ่มประสิทธิภาพการทำงานของคุณบนเว็บ - รายการเครื่องมือที่สามารถใช้เพื่อปรับปรุงประสิทธิภาพของหน้า
  • Stackblitz - IDE ออนไลน์สำหรับโครงการเชิงมุมและปฏิกิริยาที่สามารถแชร์ผ่านลิงก์
  • บุรุษไปรษณีย์ (เครื่องมือสำหรับการทดสอบ API) - ไคลเอนต์ API เพื่อสร้างแบ่งปันทดสอบและเอกสาร API
  • Free Bootstrap 5 Cheat Sheet - เป็นรายการแบบโต้ตอบของคลาส Bootstrap 5 ตัวแปรและ Mixins
  • JSTON - เครื่องมือการจัดรูปแบบ JSON ที่เรียบง่ายและทรงพลังออนไลน์

⬆กลับไปด้านบน

เฟรมเวิร์ก CSS

  • BOOTSTRAP - ออกแบบและปรับแต่งเว็บไซต์มือถือมือถือที่รับผิดชอบ
  • Bulma CSS - เฟรมเวิร์กโอเพนซอร์สแบบแยกส่วนตาม FlexBox
  • คาราเมล - กรอบเว็บไซต์ที่เรียบง่ายทันสมัยและตอบสนองได้
  • Cardinal - เฟรมเวิร์กแรกมือถือแบบแยกส่วนสำหรับประสิทธิภาพและความสามารถในการปรับขนาด
  • องค์ประกอบ CSS - ไลบรารีส่วนประกอบที่ใช้ VUE 2.0
  • Foundation CSS - ครอบครัวของกรอบการทำงานด้านหน้าที่ตอบสนองได้
  • Halfmoon - เฟรมเวิร์กส่วนหน้าที่ปรับแต่งได้และตอบสนองได้อย่างเต็มที่สำหรับการสร้างแดชบอร์ดและเครื่องมือ
  • JEET - ระบบกริดเศษส่วนสำหรับเขี้ยวและสไตลัส
  • น้อยลง - ระบบกริด CSS สำหรับการออกแบบเว็บไซต์ที่ปรับตัวได้
  • การออกแบบวัสดุ Lite - การใช้งานส่วนประกอบการออกแบบวัสดุในวานิลลา CSS, JS และ HTML
  • กำหนดรูปแบบ CSS - CSS Framework มีวัตถุประสงค์เพื่อให้ประสบการณ์ผู้ใช้รวมเป็นหนึ่งในผลิตภัณฑ์ทั้งหมดบนแพลตฟอร์มใด ๆ
  • MILLIGRAM - กรอบ CSS ที่เรียบง่าย
  • เรียบร้อย - กริดเขี้ยวที่มีน้ำหนักเบาและยืดหยุ่น
  • Petal CSS - Light CSS UI Framework ตามน้อยกว่า
  • CSS บริสุทธิ์ - ชุดของโมดูล CSS ขนาดเล็กที่ตอบสนองได้
  • Semantic UI - UI Framework ที่ออกแบบมาสำหรับการออกแบบและการออกแบบที่ตอบสนอง
  • Skeleton CSS - แผ่นหม้อต้มที่ง่ายและตอบสนองต่อการเริ่มต้นโครงการที่ตอบสนองใด ๆ
  • Spectre CSS - กรอบ CSS ที่มีน้ำหนักเบาตอบสนองและทันสมัยเพื่อการพัฒนาที่เร็วขึ้นและขยายได้
  • โดยปริยาย - เฟรมเวิร์กดั้งเดิม แต่น่าสนใจสำหรับผู้เริ่มต้นในการออกแบบกราฟิก
  • Tailwindcss - เฟรมเวิร์ก CSS ระดับต่ำที่ปรับแต่งได้สูง
  • UI Kit - เฟรมเวิร์กส่วนหน้าเบาและแบบแยกส่วนสำหรับเว็บอินเตอร์เฟส
  • USEMANTIC - ระบบกริดของเหลวขึ้นอยู่กับเปอร์เซ็นต์มากกว่าจำนวนคอลัมน์ที่กำหนดไว้
  • Vital CSS - กรอบ CSS ที่มีการรุกรานน้อยที่สุดสำหรับเว็บแอปพลิเคชันที่สร้างขึ้นด้วย Sass และ Slim

⬆กลับไปด้านบน

ไอคอน

  • Brandicons - ไอคอนเครื่องกำเนิดและผู้ชม
  • ไอคอนแบน - ฐานข้อมูลของไอคอนฟรีใน PNG, SVG, EPS, PSD และรูปแบบ BASE64
  • Font Awesome - ชุดไอคอนโอเพ่นซอร์สและชุดเครื่องมือที่มีสไตล์ที่สอดคล้องกัน
  • Glyphicon - ไอคอนสำหรับใช้กับ bootstrap, กรอบ CSS อื่น ๆ และโครงการเว็บใด ๆ
  • ไอคอนการออกแบบวัสดุของ Google - ภาพรวมของไอคอนวัสดุและวิธีการรวมเข้ากับโครงการ
  • ICOMOON - ICON FONT GENERATOR และ ICON COLLECTION
  • ICONGRAM - ชุดไอคอนแพ็คจากแหล่งต่าง ๆ
  • ICONSVG - ไอคอนที่ปรับแต่งได้อย่างรวดเร็วสำหรับโครงการของคุณ
  • ICONS8 - แพ็คไอคอนที่มีสไตล์และปรับแต่งได้อย่างสม่ำเสมอ
  • Ionicons - ไอคอนโอเพนซอร์สใน SVG และ Webfont
  • MAPICONS - ICON FONT สำหรับใช้กับ Google MAPS API และ Google Places API โดยใช้เครื่องหมาย SVG และฉลากไอคอน
  • การออกแบบวัสดุที่เป็นสัญลักษณ์แบบอักษร - ชุดไอคอนการออกแบบวัสดุเต็มรูปแบบสำหรับ SVGs ง่าย ๆ บนเว็บไซต์หรือเดสก์ท็อป
  • MFGLABS -ICONSET - ไอคอนของ MFG Lab ตั้งไว้สำหรับใช้ในเว็บฟอนต์และ CSS
  • MICON - Windows Font และ CSS Toolkit
  • โครงการคำนาม - คอลเลกชันไอคอนที่ครอบคลุม
  • Octicons - คอลเลกชันของไอคอนของ GitHub สำหรับโครงการ
  • Open Iconic ชุดไอคอนฟรีและเปิด - ไอคอนโอเพนซอร์ซในรูปแบบ SVG, Webfont และ Raster
  • OpenWebicons - WebFont สำหรับไอคอนเวกเตอร์ที่ปรับขนาดได้และโลโก้
  • ไอคอน Reacticons -SVG Icons ของแพ็คไอคอนยอดนิยม
  • Remixicon - ระบบไอคอนสไตล์โอเพนซอร์ส
  • shape.so - คอลเลกชันที่ปรับแต่งได้ของไอคอนและภาพเคลื่อนไหว
  • Stackicons - ไอคอนที่ปรับแต่งได้สำหรับแบรนด์โซเชียล
  • Typicons-ไอคอนเวกเตอร์ที่ใช้งานได้ฟรีที่ฝังอยู่ในเว็บฟอนท์
  • ไอคอนสภาพอากาศ - ไอคอนธีมสภาพอากาศและ CSS
  • Zocial ชุดปุ่ม CSS3 - สร้างปุ่มโซเชียลโดยใช้ CSS และการแสดงไอคอนโซเชียลเป็นแบบอักษร

⬆กลับไปด้านบน

สี

  • Adobe Color - Color Wheel, The Extract ธีม, แยกการไล่ระดับสี, เครื่องมือการเข้าถึงและอื่น ๆ
  • รหัสสี bada55 - แปลงคำ Leet เป็นสี hex css
  • Branition Colors - คอลเลกชันที่ทำด้วยมือของจานสีที่เหมาะที่สุดสำหรับการสร้างแบรนด์
  • Color Hunt - คอลเล็กชันเปิดของจานสีที่สวยงาม
  • ทฤษฎีสีโดย Natalya Shelburne - ทฤษฎีสีที่ใช้งานได้จริงสำหรับผู้ที่รหัส: การสอนเกี่ยวกับการใช้สีกับตัวอย่าง
  • วงล้อสี | โทนสี - Adobe Color CC - วงล้อสีแบบโต้ตอบที่มีกฎสีที่แตกต่างกัน (การปรับเป็นไปได้)
  • Colordesigner Tools - จุดประสงค์หลักของเครื่องมือนี้คือการช่วยในการสร้างจานสีและสร้างโทนสีและเฉดสีตาม เพียงแค่เลือกสีและแอพก็เหลือ คุณสามารถใช้สีที่เลือกไว้ล่วงหน้าหรือตัวเลือกสีเพื่อควบคุมมากขึ้น ตรวจสอบเครื่องมืออื่น ๆ ที่นี่
  • Colormind - Bootstrap - Colormind เป็นเครื่องกำเนิดรูปแบบสีที่ใช้การเรียนรู้อย่างลึกซึ้งเพื่อใช้ pallete สีโดยอัตโนมัติกับเว็บไซต์สดโดยอัตโนมัติ
  • Coolors- ผู้สร้างโครงการสีเร็วสุด ๆ ที่มีฟังก์ชันมากมาย
  • การไล่ระดับสี CSS - รายการไซต์ที่ดูแลเพื่อสำรวจการไล่ระดับสีและจานสี
  • ตัวเลือกสีข้อมูล - สร้างจานสีที่มีสีเท่ากัน มีประโยชน์สำหรับการสร้างภาพข้อมูล
  • การออกแบบสี - คู่มือที่สมบูรณ์ในการออกแบบสี (บทความเกี่ยวกับสื่อกลาง)
  • สี UI แบน - ตัวเลือกสีสำหรับการออกแบบแบน
  • ตัวเลือกสีภาพ - ตัวเลือกสีภาพและเครื่องกำเนิดจานสี
  • LOL Colors - แรงบันดาลใจจานสีที่ได้รับการดูแล
  • จานสี - เครื่องกำเนิดจานสีสำหรับการออกแบบวัสดุ
  • Palettable - Interactive color picker: creates a color scheme based on your preferences and palettes on the Internet
  • Paletton - The Color Scheme Designer - Advanced tool for creating color schemes
  • Picular - Google, but for colors - Primary color generator using Google's image search.
  • Pigment - Palette Generator - Generate color palettes based on lighting and pigment.
  • UI Gradients - Scroll through or pick from beautiful gradients, download JPG and copy CSS Code
  • W3school Color Picker - Find the perfect color from the color wheel, easy control
  • UI Color Picker - Best colors in few selected shades to choose from very helpful for quickly choosing and adding color to design. ![ฟรี]

⬆ back to top

การพิมพ์

  • A Crash Course in Typography: The Basics of Type - First article of a series on Typography
  • Circular Font Combinations | Free Alternatives | Typewolf - A great resource for everything related to Typography
  • Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs. - Clean web-tool on How to pair Google Fonts
  • Fontspiration - An iOS app for creating custom typographic designs
  • Fontsquirrel - A resource for FREE, hand-picked, high-quality, commercial-use fonts
  • Google Fonts - A catalog of free & open source fonts, great details and font pair suggestions
  • Just My Type - A collection of font pairings
  • Table of Contents | The Elements of Typographic Style Applied to the Web - A practical guide to web typography
  • Typekit - "Quality fonts from the world's best foundries"
  • Typography Terms - An infographic on Typography Terms + explanations

⬆ back to top

แรงบันดาลใจในการออกแบบ

  • Admire The Web - Admire the Web is where we showcase the very best in website design inspiration - carefully curated and organised to keep you inspired.
  • Awwwards - The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
  • Dribble - Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
  • Site Inspire - siteInspire is a showcase of the finest web and interactive design.
  • Web design Inspiration - Find inspiration for your next web design project. We help web designers, digital agencies and entrepreneurs to be inspired. Everyday, our team of experts hand picks the best new web designs from all over the world.
  • Behance - Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things
  • Pinterest - Pinterest has a host of design inspirations in a variety of forms and styles.
  • Pixpa - Pixpa features some nice modern designs and inspirations for web designers and photographers.
  • Lapa Ninja - Lapa Ninja is a gallery featuring the best 4127 landing page examples, free books for designers and free UI kits from around the web.
  • Landings - Find the best landing pages for your design inspiration based on your preference.

⬆ back to top

Animation Frameworks

  • Animate CSS - Choose, try out and get the CSS-Code for different animation types (over 70)
  • Anime JS - It's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.
  • Bounce JS - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code
  • Magic Animations - Showcase of different animations with link to GitHub repo
  • MO JS - The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way.
  • Particles JS - A lightweight JavaScript library for creating particles.
  • Typed JS - A JavaScript typing animation library with a great documentation on GitHub
  • Wow JS - JavaScript library: Reveal CSS animation as you scroll down a page

⬆ back to top

Stock Resources

  • Burst - Free, high-resolution images. All our pictures are free to download for personal and commercial use.
  • Canva - 8,000+ free templates and thousands of free photos
  • Free stock images and Videos - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free.
  • Gratisography - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions.
  • Humaaans - Library of editable people illustrations. Free for both commercial and personal use.
  • I'd Pin That! - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. I'd Pin That is more than just a source for free images — it is an image editor! Use the tools provided here to add your own text and edit the images right on the site.
  • Illlustrations - 120+ Awesome free illustrations made by the artist vijay verma on a 100 days challenge.
  • MakerBook - The best free resources for creatives - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools).
  • Morguefile - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, they're all completely free. The website does ask that you credit the photographer when possible.
  • Open Doodles - A Free Set of Open-Source Illustrations.
  • The Open Photo Project - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing.
  • Pexels - Exclusively stock photos of high quality, great feature: Filter photos by color.
  • Picalls - Free photos and wallpapers licensed under the Creative Commons CC0 license.
  • Pixabay - In addition to photos, Pixabay offers video, vectors and illustrations.
  • Pikwizard - Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images. No attribution required
  • Public Domain Archive - “a public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images.
  • StockSnap.io - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license.
  • The Stocks - Another awesome directory sharing sites for resources, loading directly on the webpage
  • UnDraw - "MIT licensed illustrations for every project you can imagine and create
  • UnSplash - "Beautiful, Free Photos" & themed collections of photos
  • 3D Bay - "Free, 3D Illustrations" A collection of High-quality 3D Illustration resources
  • Design Stripe - "Create beautiful illustrations, no design skills needed

⬆ back to top

Geolocation

  • Geocomplete-location autocomplete - An advanced jQuery plugin that wraps the Google Maps APIs Geocoding and Places Autocomplete services into a dropdown for an input-form.
  • Google maps API | Google - Google Map APIs including documentation & learning resources - extensive
  • Google maps API | Traversy - Great YouTube tutorial on using the Google Maps APIs
  • OpenCage Geocoder - Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API
  • GeoJS - Free to use API for geolocation lookup by IP address

⬆ back to top

APIs

  • Alexa API | Codecademy - Learn to develop a custom Amazon Alexa skill that respond to the user's voice with custom messages.
  • Abstract APIs - Free utility API's for compressing images, creating user avatars, validating emails, and more
  • jsonplaceholder - Fake Online REST API for Testing and Prototyping
  • A list of public APIs
  • Lorem Picsum - Easy to use and customize placeholder photos
  • OpenWeatherMap - Weather API with free and paid licenses
  • Random famous quotes | Rapid APIs - Gets a random quote in JSON format.
  • TMDB API - API Service for those who are interested in displaying data/images about different movies, TV Shows or actors in their application.
  • Unsplash Source - API to retrieve random images from Unsplash.com
  • Web APIs | MDN
  • News API - Locate articles and breaking news headlines from news sources and blogs across the web with our JSON API.
  • Spotify API - Spotify's Web API allows you to find music and podcasts, manage your Spotify collection, control audio playing, and do a variety of other things.

⬆ back to top

Mockups

  • Am I Responsive - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot.
  • Figma - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas
  • Adobe XD - One of the best tool for UI/UX Design, Wireframe, animate, prototype, collaborate, and more
  • Magic Mockups - Place your product in realistic environment! Free real-life product/app mockup generator. Laptop, Phone, Tablet, Imac.
  • Rotato 3D Mockup Generator - Make video 3D mockups and images. No experience required. Unlimited renders. MacOS.
  • The MockUp Club - Website that offers free downloads of design mockups (mostly Photoshop format).
  • MockupsJar - Build mockups with screenshots of your application or web Design for free to share with customers and clients
  • MockUPhone - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks!
  • Multi Device Website Mockup Generator - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser.
  • Wireframe.cc - Great tool for sketching out ideas and layouts, super minimalistic

⬆ back to top

หนังสือ

  • Ebook Foundation-free programing books: GitHub Repository - A directory of free learning resources, categorized by language
  • HTML Basics - A workshop covering the basics of HTML (free pdf/18 pages)
  • HTML5 for Masterminds, 2nd Edition - A complete course from Beginner to Mastermind
  • HTML5 Pocket Reference (Pocket Reference (O'Reilly) - A comprehensive compact reference for HTML 5
  • HTML Tutorialspoint - A thorough tutorial on HTML (free pdf/486 pages)
  • Learn How To Code In HTML5 and CSS3 - A free e-book about making websites in HTML5 and CSS for absolute beginners
  • Responsive Web Design with HTML5 and CSS3 - A comprehensive book about making RWD
  • You don't know JS - Book series diving deep into the core mechanisms of the JavaScript language.
  • Guide to Git and Github - A beginner friendly guide to using git and working with Github.
  • Introduction to HTTP - Introduction to HTTP, the stateless protocol underlying all of the web.
  • Introduction to the Command Line - A short and beginner friendly introduction to the command line, covering common commands that will make you immediately productive.
  • HTML & CSS Books ![Free]
  • Web Design Playground, Second Edition - Modern HTML, CSS, and web design standards.Paid
  • Build a Frontend Web Framework (From Scratch) - Learn how a frontend web framework works by coding your own.Paid

⬆ back to top

Challenges / Games

  • Ace Front End - Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution.
  • Codepen Challenges - Each month has a theme and every week there is a new challenge prompt that you can use to build a project online using HTML, CSS and JavaScript. The best projects are featured on Codepen's homepage.
  • Codewars - Improve your skills by training with others on real code challenges.
  • CSS Battle - CSSBattle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate Targets in smallest possible CSS code and battle it out to get to the top of the leaderboard.
  • CSS Diner - It's a fun game to learn and practice CSS selectors.
  • CSS Zen Garden - A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
  • Dev Challenges - Made by Thu Nghiem. devChallenges.io is a community driven platform for anyone who wants to solve practical tasks. It has some tricky and curated challenges.
  • Flexbox Defense - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels.
  • Flexbox Froggy - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels.
  • Front End Mentor - Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 192,401 developers building projects, reviewing code, and helping each other get better.
  • Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout.
  • Hackerrank - Practice coding, prepare for interviews, and solve interview style coding challenges.
  • JavaScript30 - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.
  • Leetcode - Coding problems to solve in a range of categories and difficulties
  • Project Euler - Challenging computer science and mathematical problems.
  • 100DaysOfCode - Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day.
  • Devtools Tech - Devtools Tech is a free platform for Frontend Engineers to practice high quality real world programming interview questions, follow curated learning paths, read blogs, and track progress across various frontend domains.

⬆ back to top

Free Tools For Students

  • JetBrains Student License : Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.
  • Student Developer Pack : The best developer tools, free for students via @githubeducation

⬆ back to top

YouTube Videos

  • Flexbox in 20 minutes - Quick crash-course on the CSS Flexbox model.
  • SVGs can do that ? - Sarah Drasner's talk on nontypical pratical uses of SVGs.
  • CSS Grid Tutorial - Use CSS grid to structure and position websites with ease.
  • Git and GitHub for Beginners - Crash Course - Ad-free tutorial by freeCodeCamp.
  • 12HR Coding Bootcamp 2021! - Complete frontend bootcamp!

⬆ back to top

Testing

  • Jest - JavaScript testing framework
  • Mocha - JavaScript testing framework
  • Karma - JavaScript test runner
  • Istanbul - JavaScript test coverage tool
  • TestCafe - Node.js end-to-end testing
  • Cypress - JavaScript end-to-end testing framework
  • Puppeteer - Google's Chrome automation tool for E2E testing.
  • Playwright - Microsoft's browser automation tool for E2E testing.
  • Sinon.JS - Standalone test spies, stubs and mocks for JavaScript
  • Chai - Assertation library for JavaScript testing
  • PactumJS - REST API Testing Tool used to automate e2e, integration, contract & component (or service level) tests
  • Vitest - Vitest is a blazing fast unit test framework powered by Vite

⬆ back to top

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด