web dev resources

ทรัพยากรการพัฒนาเว็บที่คุณต้องการ

Ismile Hossain
_{ติดตามฉันบน Twitter, LinkedIn}

---

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

---

สารบัญ

• แผนงานนักพัฒนา
• เอกสารและ Cheatsheets
• เครื่องมือออกแบบ
• เว็บทำงานอย่างไร?
• HTML และ CSS
• ความท้าทายหรือทักษะส่วนหน้า
• ฟอนต์และตัวอักษร
• สีและเครื่องมือ
• ทรัพยากรภาพ
• ภาพประกอบ
• ไอคอน
• เครื่องกำเนิดไฟฟ้า
• การเข้าถึงได้
• เครื่องวิเคราะห์ไซต์
• เทอร์มินัลสำหรับ Windows
• ออนไลน์ ide, editor
• จาวาสคริปต์
• node.js
• งูหลาม
• ตอบโต้
• APIs
• เครื่องมือนักพัฒนา
• แหล่งข้อมูลการเรียนรู้ออนไลน์
• ประวัติย่อ
• คนอื่น
• เว็บไซต์บล็อกนักพัฒนาซอฟต์แวร์
• ช่อง YouTube

ทรัพยากร

แผนงานนักพัฒนา

• ส่วนหน้า - แผนงานการพัฒนาส่วนหน้า
• แบ็กเอนด์ - แผนงานการพัฒนาแบ็กเอนด์
• React - REACE การพัฒนาแผนงาน
• Andriod - แผนงานการพัฒนา Android
• DevOps - แผนงาน DevOps

เอกสารและ Cheatsheets

• MDN Web Docs - เว็บไซต์ MDN Web Docs ให้ข้อมูลเกี่ยวกับเทคโนโลยีเว็บแบบเปิดรวมถึง HTML, CSS และ APIs สำหรับทั้งเว็บไซต์และแอพพลิเคชั่นเว็บแบบก้าวหน้า
• DEVDOCS - เบราว์เซอร์เอกสารฟรีออฟไลน์และฟรีสำหรับนักพัฒนา ค้นหาเอกสาร 100+ ในเว็บแอปเดียว
• Devhints - คอลเล็กชั่น Cheatsheets
• Flex - Malven - แผ่นตรวจจับภาพสำหรับเค้าโครง CSS Flex
• Grid - Malven - แผ่นกลโกงภาพสำหรับเค้าโครงกริด CSS
• CSS Grid Cheat Sheet - คู่มือภาพ CSS Grid ที่ดีที่สุดของคุณ
• Overapi - คอลเล็กชั่นแผ่นโกง
• Cheatsheets ที่ยอดเยี่ยม - Cheatsheets ที่ยอดเยี่ยมสำหรับภาษาการเขียนโปรแกรมยอดนิยมกรอบและเครื่องมือพัฒนา
• Gitsheet - Git Cheatsheet ที่ตายแล้ว
• HTML5 Doctor - นี่เป็นการอ้างอิงอย่างรวดเร็วขององค์ประกอบที่ใหม่หรือได้รับการนิยามใหม่ใน HTML5
• HTML5 Canvas Cheat Sheet - HTML5 Canvas Cheat Sheet
• Cheatography - แผ่นโกงการเขียนโปรแกรม
• CSS 3, Media Queries Cheat Sheet - CSS 3, Media Queries Cheat Sheet
• SEO Cheat Sheet - แผ่นโกง SEO ของนักพัฒนาเว็บ
• Bootstrap 5 Cheat Sheet - แผ่นโกง 5 ของ The Bootstrap 5

- เครื่องมือออกแบบ

• Figma - Figma ช่วยให้ทีมสร้างทดสอบและจัดส่งการออกแบบที่ดีขึ้นตั้งแต่ต้นจนจบ
• Adobe XD - แบ่งปันเรื่องราวของคุณด้วยการออกแบบที่ดูและรู้สึกเหมือนเป็นของจริง Wireframe, animate, ต้นแบบ, การทำงานร่วมกันและอื่น ๆ - มันอยู่ที่นี่ทั้งหมดในที่เดียว
• SKETCH - สร้าง, ต้นแบบ, ทำงานร่วมกันและนำความคิดของคุณมาสู่ชีวิตด้วยแพลตฟอร์มการออกแบบที่ใช้โดยคนมากกว่าหนึ่งล้านคนตั้งแต่ Freelancer ไปจนถึงทีมที่ใหญ่ที่สุดในโลก
• แปลก - สื่อสารด้วยสายตาด้วยความเร็วของความคิด - ผังงานทำงานร่วมกัน, wireframes, โน้ตเหนียวและแผนที่จิตใจ
• Undesign - คอลเลกชันของเครื่องมือและแหล่งข้อมูลการออกแบบฟรีสำหรับผู้ผลิตนักพัฒนาและนักออกแบบ
• Flyonui - ไลบรารีส่วนประกอบที่ง่ายที่สุดสำหรับ Tailwind CSS

เว็บทำงานอย่างไร?

• อินเทอร์เน็ตทำงานอย่างไรวิดีโอ - อินเทอร์เน็ตทำงานอย่างไร?
• อินเทอร์เน็ตทำงานอย่างไรวิดีโอสั้น ๆ - คำอธิบายสั้น ๆ เกี่ยวกับอินเทอร์เน็ตทำงานอย่างไร
• DNS - DNS ทำงานอย่างไร?
• HTTPS - HTTPS ทำงานอย่างไร?

- HTML และ CSS

• FreeCodecamp - หลักสูตรฟรีเพื่อเรียนรู้การพัฒนาเว็บ
• Interneting เป็นเรื่องยาก - บทเรียนการพัฒนาเว็บที่เป็นมิตรสำหรับผู้เริ่มต้นที่สมบูรณ์
• เรียนรู้ที่จะเขียนโค้ด HTML & CSS - คู่มือครอบคลุมหัวข้อการออกแบบเว็บและการพัฒนาที่หลากหลายตั้งแต่ระดับเริ่มต้นจนถึงระดับทักษะขั้นสูง
• องค์ประกอบ HTML - องค์ประกอบ HTML อ้างอิงโดย MDN
• เอนทิตี HTML - การอ้างอิงเอนทิตี HTML โดย CSS -Tricks
• HTML Shark - การเคลื่อนไหวอย่างชาญฉลาดและเทคนิคสกปรกสำหรับการเข้ารหัสเว็บไซต์เอฟเฟกต์และองค์ประกอบใน HTML
• คุณสมบัติ CSS3 - การอ้างอิง CSS โดย MDN
• การอ้างอิง CSS - คู่มือภาพฟรีสำหรับ CSS
• CSS Layout - คอลเลกชันของเลย์เอาต์และลวดลายยอดนิยมที่ทำด้วย CSS
• โซลูชั่น CSS ที่ทันสมัย ​​- ซีรีส์ที่ตรวจสอบโซลูชั่น CSS ที่ทันสมัยสำหรับปัญหา
• CSS Diner - เกมสนุก ๆ ที่ช่วยให้คุณเรียนรู้และฝึกฝนตัวเลือก CSS
• Flexbox Froggy - เกมที่ช่วยให้คุณเรียนรู้ CSS Flex
• CSS Tricks - FlexBox - คู่มือที่สมบูรณ์สำหรับ FlexBox
• กริดโดยตัวอย่าง - ทุกสิ่งที่คุณต้องการเรียนรู้เค้าโครงกริด CSS
• Grid Garden - เกมสำหรับการเรียนรู้ CSS Grid
• CSS Tricks - คู่มือที่สมบูรณ์สำหรับกริด - คู่มือที่ครอบคลุมถึง CSS Grid โดยมุ่งเน้นไปที่การตั้งค่าทั้งหมดทั้งสำหรับคอนเทนเนอร์แม่กริดและองค์ประกอบของเด็กกริด
• เรียนรู้ CSS Grid - คู่มือที่ครอบคลุมเพื่อช่วยให้คุณเข้าใจและเรียนรู้เค้าโครง CSS Grid โดย Jonathan Suh
• ฉันสามารถใช้-ตารางรองรับเบราว์เซอร์ที่ทันสมัยเพื่อรองรับเทคโนโลยีเว็บส่วนหน้าบนเดสก์ท็อปและเว็บเบราว์เซอร์มือถือ
• เอฟเฟกต์ CSS - แอนิเมชั่น CSS
• ตัวอย่าง UI - ภาพเคลื่อนไหว CSS มากยิ่งขึ้น
• KeyFrames - สร้างภาพเคลื่อนไหว CSS @KeyFrame ที่ซับซ้อนหรือซับซ้อนด้วยตัวแก้ไข Timeline Visual
• Animista - เล่นกับคอลเลกชันของ ARISE TO THE CSS Animations
• BEM - แผ่นโกงการตั้งชื่อ BEM
• AutopRefixer - AutopRefixer เป็นปลั๊กอิน POSTCSS ซึ่งแยกวิเคราะห์ CSS ของคุณและเพิ่มคำนำหน้าผู้ขาย
• CSS Formatter - Formatter CSS ออนไลน์, CSS Beautifier
• ตัวยึดตำแหน่ง - วิธีใช้ตัวยึดตำแหน่งของเรา เพียงระบุขนาดภาพหลังจาก URL ของเราแล้วคุณจะได้ภาพตัวยึด
• DevProjects - ฝึกทักษะการเขียนโค้ดของคุณด้วยโครงการ HTML/CSS ฟรี โครงการแตกต่างกันไปจากระดับเริ่มต้นสู่ระดับสูง
• HTML Cheat Sheet - แผ่นโกง HTML ที่สมบูรณ์เพื่อช่วยคุณหลัก HTML
• CSS Cheat Sheet - แปรงทักษะ CSS ของคุณด้วยแผ่นโกงที่ครอบคลุมนี้
• คำถามสัมภาษณ์ HTML และ HTML5 - รายการคำถามสัมภาษณ์ HTML ที่สมบูรณ์เพื่อช่วยคุณสัมภาษณ์
• ReadyTools ตัวสร้างโครงสร้าง HTML - สร้างโครงสร้าง HTML ในไม่กี่วินาที ใช้ bootstrap หรือสไตล์/JavaScript ของคุณ
• เครื่องกำเนิดส่วนประกอบ ReadyTools - สร้างส่วนประกอบ HTML ได้อย่างง่ายดาย
• ปุ่ม ReadyTools ที่สร้างขึ้น - คัดลอกปุ่มแฟนซีด้วยคลิกเดียวและใช้บนเว็บไซต์ของคุณ
• ReadyTools HTML Minifier - บีบอัดไฟล์ HTML ของคุณสำหรับเวลาในการโหลดที่เร็วขึ้นและประสิทธิภาพที่ดีขึ้น
• HTMLREV - HTMLREV จัดเตรียมเทมเพลต HTML ฟรีสำหรับเว็บไซต์และหน้า Landing Pages

- ความท้าทายหรือทักษะส่วนหน้า

• CodePen - สร้างแบ่งปันและเรียนรู้ JavaScript, CSS และ HTML ด้วยโปรแกรมแก้ไขรหัสออนไลน์ของเรา
• ผู้ให้คำปรึกษาด้านหน้า - พัฒนาทักษะส่วนหน้าของคุณโดยการสร้างโครงการจริง แก้ปัญหา HTML, CSS และ JavaScript ในโลกแห่งความเป็นจริงในขณะที่ทำงานด้านการออกแบบระดับมืออาชีพ
• รหัสที่ดี - เรียกดูความท้าทายในการเข้ารหัสด้านหน้าหลายสิบรายการพร้อมด้วยไฟล์ Adobe XD และ Styleguides
• Codier - สำรวจและพยายามท้าทายการเข้ารหัสส่วนหน้า
• CSSBATTLE - CSS Code -Golfing อยู่ที่นี่! ใช้ทักษะ CSS ของคุณเพื่อทำซ้ำเป้าหมายด้วยรหัสที่เล็กที่สุดเท่าที่จะเป็นไปได้ อย่าลังเลที่จะตรวจสอบเป้าหมายด้านล่างและนำทักษะ CSS ของคุณไปทดสอบ

- ฟอนต์และตัวอักษร

• Google Fonts-ทรัพยากร #1 สำหรับเว็บฟอนต์ฟรีและใช้งานง่าย
• FONTS Arena-แบบอักษรฟรีทางเลือกฟรีสำหรับแบบอักษรพรีเมี่ยมบทความที่ทำเพื่อการวิจัย
• Fontjoy - Fontjoy ช่วยให้นักออกแบบเลือกชุดค่าผสมที่ดีที่สุด ผสมและจับคู่แบบอักษรที่แตกต่างกันเพื่อการจับคู่ที่สมบูรณ์แบบ
• Fontpair - Font Pair ช่วยให้นักออกแบบจับคู่ Google Fonts เข้าด้วยกัน ชุดและคู่ของ Google Font ที่สวยงาม
• Font Playground - เล่นกับตัวแปรตัวแปร
• แบบอักษรอะไรก็ได้ - พิมพ์อะไรก็ได้เป็นเครื่องมือการพิมพ์ฟรีและยอดเยี่ยมในการสร้างและทดสอบชุดค่าผสมแบบอักษรสำหรับโครงการของคุณ

- สีและเครื่องมือ

• คูลเลอร์ - สร้างหรือเรียกดูชุดสีที่สวยงามสำหรับการออกแบบของคุณ
• 0to255 - เครื่องมือสีที่ทำให้ง่ายต่อการทำให้สีและสีเข้มขึ้น
• Colorbox - สร้างชุดสีที่น่าตื่นตาตื่นใจมาก
• Color X Color - เครื่องมือในการสร้างระบบสีที่เข้าถึงได้สำหรับ UIS
• สีและฟอนต์ - ค้นหาสีและชุดค่าตัวอักษรพร้อมที่จะคัดลอกวางในคลิกเดียว
• Colorspace - สร้างจานสีที่สวยงาม
• CSS GRADIent - เครื่องมือเครื่องกำเนิดไฟฟ้าไล่ระดับสี CSS ฟรี
• Uigradients - คอลเล็กชั่นการไล่ระดับสีที่สวยงามสำหรับนักออกแบบและนักพัฒนา
• picular - สีอะไรก็ได้
• สีได้ - เลือกสีแบบอักษรตามสีพื้นหลังของคุณ
• Happy Hues - สีที่ดูแลในบริบท
• BRANITION COLORS - คอลเลกชันที่ทำด้วยมือของพาเลทสีที่เหมาะที่สุดสำหรับการสร้างแบรนด์
• Color Picker - รับรหัสสีฟรีพร้อมชื่อสี Hex, RGB และ HSL
• จานสี - จานสีจัดหมวดหมู่ฟรีสำหรับโครงการของคุณ รับรหัส Hex และ RGB
• ตัวตรวจสอบสีความคมชัด - ตรวจสอบความคมชัดของสีได้อย่างง่ายดายเพื่อให้แน่ใจว่าการออกแบบของคุณสามารถเข้าถึงได้และดึงดูดสายตา
• เครื่องกำเนิดไฟฟ้าไล่ระดับสี - สร้างการไล่ระดับสีที่น่าทึ่งได้อย่างง่ายดาย

- ทรัพยากรภาพ

• Unsplash - รูปภาพและภาพถ่ายฟรี
• Pexels - ภาพถ่ายสต็อกฟรี
• Pixabay - ภาพหรือวิดีโอฟรี
• loading.io - สปินเนอร์ฟรีสำหรับโครงการของคุณ
• LotTiefiles - LotTiefiles เป็นชุดของภาพเคลื่อนไหวที่ออกแบบมาสำหรับ Lottie - Gone เป็นวันแห่งการดักฟังนักพัฒนาของคุณ
• removebg - ลบพื้นหลังภาพ
• ลบข้อมูลรูปภาพ - ลบข้อมูลส่วนบุคคลออกจากภาพถ่ายก่อนที่จะแชร์บนอินเทอร์เน็ต
• BEFUNKY-แพลตฟอร์มความคิดสร้างสรรค์ออนไลน์แบบออนไลน์ของ BEFUNKY มีทุกสิ่งที่คุณต้องการแก้ไขรูปภาพสร้างการออกแบบกราฟิกและสร้างภาพตัดปะภาพได้อย่างง่ายดาย

- ภาพประกอบ

• UNDRAW - เรียกดูเพื่อค้นหาภาพประกอบที่เหมาะสมกับความต้องการของคุณและคลิกเพื่อดาวน์โหลด
• Manypixels - ภาพประกอบฟรีเพื่อเพิ่มพลังให้กับโครงการของคุณ ใช้พวกเขาในวิธีการเชิงพาณิชย์หรือไม่ใช่เชิงพาณิชย์สำหรับหน้า Landing Page, บล็อกโพสต์, จดหมายข่าวอีเมล, กราฟิกโซเชียลมีเดียและอื่น ๆ
• Drawkit - ภาพประกอบเวกเตอร์ที่วาดด้วยมือและทรัพยากรไอคอนเหมาะสำหรับโครงการต่อไปของคุณ
• FreePik - ทรัพยากรกราฟิกฟรี
• ภาพประกอบ FIGMA - ภาพประกอบเวกเตอร์มากกว่า 5,000 ภาพที่คุณสามารถใช้ภายใน FIGMA ภาพประกอบ Figma ทั้งหมดอยู่ในรูปแบบ SVG & PNG และรวมถึงสไตล์เช่นแบน, เรียงราย, นามธรรมและอื่น ๆ
• ภาพประกอบเวกเตอร์ - ค้นหาภาพประกอบเวกเตอร์มากกว่า 5,000 ภาพและรูปแบบการออกแบบมากกว่า 70 แบบพร้อมตัวแก้ไขแบบรวมเพื่อปรับการออกแบบตามที่คุณต้องการ

- ไอคอน

• Ionicons - แพ็คไอคอนที่ได้รับใบอนุญาตและ MIT ที่ได้รับอนุญาตและ MIT
• Font Awesome - ไอคอนเวกเตอร์และโลโก้โซเชียล
• ไอคอนวัสดุ - ไอคอนวัสดุมีความน่ายินดีสัญลักษณ์ที่สร้างขึ้นอย่างสวยงามสำหรับการกระทำและรายการทั่วไป ดาวน์โหลดบนเดสก์ท็อปเพื่อใช้ในผลิตภัณฑ์ดิจิตอลของคุณสำหรับ Android, iOS และเว็บ
• ไอคอน - คอลเลกชันไอคอน
• ICONS8 - ดาวน์โหลดไอคอนฟรีใน PNG และ SVG
• Flaticon - ไอคอนเวกเตอร์ฟรีใน SVG, PSD, PNG, รูปแบบ EPS หรือเป็นแบบอักษรไอคอน
• ไอคอน TABLER - ไอคอน SVG ฟรีที่ปรับแต่งได้อย่างเต็มที่
• ICOFONT - ไอคอนฟรี 2100+ เพื่อเพิ่มการออกแบบที่สร้างสรรค์ของคุณ
• ไอคอนง่าย ๆ - ไอคอน SVG ฟรี 1463 สำหรับแบรนด์ยอดนิยม
• รับ emoji - ✂คัดลอกและ? วางอีโมจิ?.
• Ikonate - แพ็คไอคอนที่ปรับแต่งได้
• USEanimations - ไอคอนภาพเคลื่อนไหวฟรี
• 3DICONS - คอลเล็กชั่นไอคอน 3 มิติมากกว่า 5,000 ไอคอนและตัวละครที่มีความละเอียด 4K แต่ละไอคอนส่งมอบในจานสี 5 สีมุมมองด้านหน้าและมุมมอง
• Iconshock - ไอคอนแพ็คที่ใหญ่ที่สุดที่มีไอคอนมืออาชีพกว่า 2 ล้านไอคอนในชุดไอคอน +400 ที่มีรูปแบบการออกแบบมากกว่า 30 รูปแบบ: วัสดุ, แบน, 3D, สมจริง, iOS และอื่น ๆ

⚙เครื่องกำเนิดไฟฟ้า

• Lorem Ipsum - Lorem Ipsum Generator
• Realfavicongenerator - Favicon Generator
• Favicon Maker - ฟรีผู้ผลิต Favicon
• Meta Tags - Meta Tags Generator ดูตัวอย่างว่าหน้าเว็บของคุณจะดูบน Google, Facebook, Twitter และอีกมากมาย!
• CLIPPY - CSS CLIP -PATH MAKER
• ฉันเกลียด Regex - ฉันเกลียด Regex เป็นแผ่นโกง Regex ที่อธิบายการแสดงออกที่ใช้กันทั่วไปเพื่อให้คุณเข้าใจ
• Regex101 - เครื่องทดสอบ Regex ออนไลน์
• PYREXP - เครื่องทดสอบ Visual Regex ออนไลน์
• เครื่องมือโค้ดเว็บ - สร้าง HTML5, CSS3, Microdata, JSON -LD, การ์ด Twitter, กราฟเปิดและอีกมากมาย!
• คาร์บอน - สร้างและแบ่งปันภาพที่สวยงามของแหล่งที่มาของคุณ
• CSS Grid Generator - ออกแบบเลย์เอาต์เว็บอย่างรวดเร็วและรับรหัส HTML และ CSS เรียนรู้ CSS Grid ด้วยสายตาและสร้างเค้าโครงเว็บด้วยเครื่องกำเนิดไฟฟ้ากริด CSS แบบโต้ตอบของเรา
• CSS Scroll Shadows - ปรับการควบคุม (?) และดู CSS Scroll Shadows เปลี่ยนไป
• CSS Shadow Generator - สร้างเงาที่ราบรื่น
• Haikei - สร้างสินทรัพย์การออกแบบ SVG ที่ไม่ซ้ำกัน
• แปลง - แปลง | ตัวแปลงเว็บ Polyglot
• Perflink | JS Benchmarks - มาตรฐานประสิทธิภาพ JavaScript คุณสามารถแชร์ผ่าน URL
• OptimizeImages - เพิ่มประสิทธิภาพรูปภาพออนไลน์ด้วยเครื่องมือฟรีบีบอัดและแปลงรูปภาพในรูปแบบ PNG, JPEG, SVG, AVIF, WEBP และ GIF และแม้แต่รับแท็ก HTML รูปภาพสำหรับการใช้งานที่ถูกต้อง
• ReadyTools HTML และ CSS Generator - สร้างรหัส HTML และ CSS ได้อย่างง่ายดายด้วยรหัส ReadyTools Code Hub ปรับปรุงรูปลักษณ์ของเว็บไซต์ของคุณโดยการคัดลอกปุ่มที่สร้างขึ้น

- การเข้าถึงได้

• บล็อกการเข้าถึง - ปานกลาง - แนวทางที่ง่ายต่อการใช้งานเพื่อออกแบบเว็บที่เข้าถึงได้ง่ายขึ้น
• บล็อกการเข้าถึง - Dev - 13 วิธีในการเพิ่มระดับการเข้าถึงเว็บไซต์ของคุณ
• accessibility Cheatsheet - แนวทางปฏิบัติในการออกแบบสากลเพื่อให้ทุกคนสามารถเข้าถึงเว็บไซต์/WebApp ของคุณได้

- เครื่องวิเคราะห์ไซต์

• web.dev - ดูว่าเว็บไซต์ของคุณทำงานได้ดีเพียงใด จากนั้นรับเคล็ดลับในการปรับปรุงประสบการณ์การใช้งานของคุณ
• Lighthouse Metrics - Lighthouse Metrics ให้ข้อมูลเชิงลึกที่ง่ายสำหรับประสิทธิภาพของเว็บไซต์ของคุณ

- เทอร์มินัลสำหรับ Windows

• เทอร์มินัล Windows
• ความคล่องแคล่ว
• ไฮเปอร์
• cmder

ออนไลน์ ide, editor

• repl.it
• รหัสและกล่อง
• codepen
• JS bin
• jsfiddle
• gorormide
• บิตสัมภาษณ์
• codilink

⚡ JavaScript

• FreeCodecamp - ทรัพยากรฟรีที่ดีที่สุดในการเรียนรู้ JavaScript แบบโต้ตอบ
• Codecademy - หลักสูตรฟรีเพื่อเรียนรู้ JavaScript แบบโต้ตอบ
• JavaScript.info - การสอน JavaScript สมัยใหม่
• JavaScripture - JavaScripture.com เป็นพื้นที่ทดสอบและการอ้างอิงสำหรับ JavaScript API ทั้งหมด
• JavaScript ที่มีคารมคมคาย - นี่คือหนังสือเกี่ยวกับ JavaScript การเขียนโปรแกรมและสิ่งมหัศจรรย์ของดิจิตอล คุณสามารถอ่านออนไลน์ได้ที่นี่
• JavaScript30 - 30 วัน Vanilla JS Coding Challenge สร้าง 30 สิ่งใน 30 วันด้วย 30 บทเรียน
• JavaScript ทำงานอย่างไร
• การอ้างอิง JavaScript โดย MDN
• การอ้างอิงเหตุการณ์ JavaScript
• JavaScript Tutorial - เรียนรู้แนวคิดที่สำคัญใน JavaScript เช่นตัวดำเนินการลูปฟังก์ชั่นโอ๊ะโอและอีกมากมาย
• การอ้างอิงการจัดการ DOM
• รูปแบบการออกแบบ JavaScript
• regexone - เรียนรู้การแสดงออกปกติด้วยแบบฝึกหัดแบบโต้ตอบที่เรียบง่าย
• Scaler - ทรัพยากรฟรีที่ดีที่สุดในการเรียนรู้ JavaScript โดย Top Geeks
• JavaScript Cheat Sheet- แผ่นโกง JavaScript ที่สมบูรณ์เพื่อช่วยให้คุณหลัก JavaScript
• คำถามสัมภาษณ์ JavaScript - รายการคำถามสัมภาษณ์ JavaScript ชั้นนำที่สมบูรณ์เพื่อช่วยคุณสัมภาษณ์

⚡ nodejs

• การสอน Node.js - Node.js Crash Course Cutorial โดย Net Ninja
• หนังสือโหนดของ Mixu - หนังสือเกี่ยวกับการใช้ Node.js.
• Node JS - Node.js เอกสารต้นฉบับ
• 30 วันของโหนด - 30 วันของโหนด, ชุดการสอน Node.js
• NodeBestPractices - รายการแนวปฏิบัติที่ดีที่สุดสำหรับการสร้างแอพโหนด สำคัญสำหรับโครงการขนาดใหญ่
• The Node Way - ปรัชญาทั้งหมดของ Node.js แนวทางปฏิบัติที่ดีที่สุดของ A0ND หลักการชี้นำมีอยู่สำหรับการเขียนโมดูลที่สามารถบำรุงรักษาได้แอปพลิเคชันที่ปรับขนาดได้และรหัสที่น่าอ่านจริง ๆ
• คุณไม่รู้จัก node.js
• NodeJS ที่ยอดเยี่ยม - แพ็คเกจและทรัพยากรที่น่ายินดี
• เคล็ดลับการรักษาความปลอดภัย Express.js - คุณสามารถบันทึกและรักษาความปลอดภัยแอปของคุณได้อย่างไร
• คำถามสัมภาษณ์ Node.js - รายการคำถามสัมภาษณ์ Top Node.js ที่สมบูรณ์เพื่อช่วยคุณสัมภาษณ์

⚡ Python

• เรียนรู้การเขียนโปรแกรม Python - เว็บไซต์นี้มีวัสดุและแบบฝึกหัดสำหรับภาษาการเขียนโปรแกรม Python 3
• PY4E - Python สำหรับทุกคน
• ดำดิ่งลงไปใน Python 3 - ดำดิ่งลงไปใน Python 3 ครอบคลุม Python 3 และความแตกต่างจาก Python 2. เมื่อเทียบกับการดำน้ำเป็น Python มันมีการแก้ไขประมาณ 20% และวัสดุใหม่ 80% หนังสือเล่มนี้เสร็จสมบูรณ์แล้ว
• Codecademy - หลักสูตรฟรีเพื่อเรียนรู้ Python แบบโต้ตอบ
• Programiz Pro-เสนอเส้นทางการเรียนรู้ที่ดูแลสำหรับผู้เริ่มต้น Python ที่ให้บริการหลักสูตรเชิงลึกที่มีโครงสร้างด้วยแบบทดสอบแบบโต้ตอบความท้าทายในการเขียนโค้ดและโครงการโลกแห่งความจริง
• Programiz - เรียนรู้การเขียนโปรแกรม Python
• Python ที่ยอดเยี่ยม - รายการที่คัดสรรมาอย่างดีของเฟรมเวิร์ก Python ที่ยอดเยี่ยมห้องสมุดซอฟต์แวร์และทรัพยากร
• Flask Tutorial - The Flask Mega Tutorial โดย Miguel Grinberg
• หัวข้อ Scaler - ทรัพยากรฟรีเพื่อเรียนรู้ Python โดย Top Geeks
• คำถามสัมภาษณ์ Python - รายการคำถามสัมภาษณ์ Python ชั้นนำที่สมบูรณ์เพื่อช่วยคุณสัมภาษณ์
• Python Cheat Sheet- แผ่นโกงที่ครอบคลุมเพื่อช่วยให้คุณมาสเตอร์ Python
• Python Tutorial - Python Tutorial: คู่มือที่ครอบคลุมสำหรับผู้เริ่มต้น
• ทักษะนักพัฒนา Python - เพิ่มอาชีพเทคโนโลยีของคุณด้วยทักษะนักพัฒนา Python กว่า 20+ ที่คุณต้องการในปี 2567

⚡ตอบสนอง

• React - เอกสารเว็บไซต์อย่างเป็นทางการการสอน
• Codecademy - หลักสูตร Codecademy ฟรี
• FreeCodecamp - Resourse การพัฒนาเว็บฟรีซึ่งคุณสามารถเรียนรู้ React ได้
• React Tutorial - React Tutorial - พื้นฐาน, ตะขอ, บริบท API, เราเตอร์ React, Hooks ที่กำหนดเองโดยการเขียนโค้ด
• React Beach Resort - React Beach Resort Project โดยการเขียนรหัส
• Awesome React - ชุดของสิ่งที่ยอดเยี่ยมเกี่ยวกับระบบนิเวศปฏิกิริยา
• ไอคอน React - รวมไอคอนยอดนิยมในโครงการ React ของคุณได้อย่างง่ายดายด้วย React -ICONS
• ตอบคำถามสัมภาษณ์ - รายการคำถามบทสัมภาษณ์ที่ตอบสนองสูงสุดเพื่อช่วยคุณสัมภาษณ์
• 100+ React Redux คำถามสัมภาษณ์และคำตอบ (2023)-การรวบรวมคำถามและคำตอบของ React Redux

- APIs

• Public APIs - รายการรวมของ Public Public และ Open REST ฟรีมากกว่า 1,000 รายการสำหรับนักพัฒนา
• JSONPLACHOLDER - ฟรีใช้ API REST ออนไลน์ปลอมสำหรับการทดสอบและการสร้างต้นแบบ
• OpenWeather- API Weather API ที่เรียบง่ายและรวดเร็วและฟรีจาก OpenWeatherMap คุณสามารถเข้าถึงข้อมูลสภาพอากาศในปัจจุบันการคาดการณ์รายชั่วโมง 5 และ 16 วัน
• Swapi - The Star Wars API
• คำพูด REST API - พวกเขากล่าวว่ามีมากกว่า 1 ล้านคำพูดในฐานข้อมูลฐานข้อมูลที่ใหญ่ที่สุดในโลก และคำพูด API ให้วิธีที่ง่ายในการเข้าถึงข้อมูล
• Rapid API - API Rapid API เป็นหนึ่งในชุดเครื่องมือ API ที่ใหญ่ที่สุดซึ่งมี API ฟรีจำนวนมากพร้อมกับ documnetation ของพวกเขาส่วนที่เรียกว่า Rapid API Learn ซึ่งมีคำแนะนำและบทช่วยสอนเกี่ยวกับการใช้และการสร้าง API

- เครื่องมือนักพัฒนา

• บุรุษไปรษณีย์ - บุรุษไปรษณีย์ทำให้การพัฒนา API เป็นเรื่องง่าย ลดความซับซ้อนของแต่ละขั้นตอนของการสร้าง API และปรับปรุงการทำงานร่วมกันเพื่อให้คุณสามารถสร้าง API ที่ดีขึ้น - เร็ว
• Insomnia - ไคลเอนต์ API โอเพ่นซอร์สชั้นนำและแพลตฟอร์มการออกแบบ API ร่วมกันสำหรับ GraphQL และ REST
• เซิร์ฟเวอร์ JSON - รับ API REST ปลอมเต็มรูปแบบที่มีการเข้ารหัสเป็นศูนย์ในเวลาน้อยกว่า 30 วินาที (อย่างจริงจัง) สร้างขึ้นด้วย <3 สำหรับนักพัฒนาส่วนหน้าที่ต้องการแบ็คเอนด์อย่างรวดเร็วสำหรับการสร้างต้นแบบและการเยาะเย้ย
• JSONING - เยาะเย้ย REST API ทันทีจากวัตถุ JSON สำหรับการทดสอบและการสร้างต้นแบบ
• NPM Trends - แพ็คเกจ NPM ใดที่คุณควรใช้? เปรียบเทียบสถิติดาวน์โหลดแพ็คเกจ NPM เมื่อเวลาผ่านไป เทรนด์สปอตเลือกผู้ชนะ
• BundlePhobia - ค้นหาค่าใช้จ่ายในการเพิ่มแพ็คเกจ NPM ลงในชุดของคุณ

แหล่งข้อมูลการเรียนรู้ออนไลน์

• FreeCodecamp - เรียนรู้ที่จะเขียนรหัสที่บ้าน สร้างโครงการ รับการรับรอง
• W3Schools - เว็บไซต์นักพัฒนาเว็บที่ใหญ่ที่สุดในโลก การอ้างอิงแบบฝึกหัดตัวอย่างแบบฝึกหัดใบรับรอง
• Codecademy - เรียนรู้ทักษะทางเทคนิคที่คุณต้องการสำหรับงานที่คุณต้องการ ในฐานะผู้นำในการศึกษาออนไลน์และการเรียนรู้ที่จะเขียนโค้ด
• Real Python - เรียนรู้ Python Online: Python Tutorials สำหรับนักพัฒนาทุกระดับทักษะหนังสือ Python และหลักสูตรข่าว Python ตัวอย่างรหัสบทความและอื่น ๆ
• การศึกษาคืนนี้ - สถานที่ที่ดีที่สุดในการเรียนรู้วิชาวิศวกรรมเช่น Core Java, C ++, DBMS, โครงสร้างข้อมูล ฯลฯ ผ่านบทช่วยสอนง่าย ๆ ที่เขียนด้วยมือการทดสอบบทเรียนวิดีโอ
• Programiz - เรียนรู้ที่จะเขียนโค้ดใน Python, C/C ++, Java และภาษาการเขียนโปรแกรมยอดนิยมอื่น ๆ ด้วยการสอนที่ง่ายต่อการติดตามตัวอย่างคอมไพเลอร์ออนไลน์และการอ้างอิง
• Bold Coder - สถานที่ที่ดีที่สุดในการเรียนรู้การเขียนโปรแกรม Java ด้วยแบบฝึกหัดออนไลน์ตัวอย่างและคำถามสัมภาษณ์
• ข้อมูล JavaScript - บทช่วยสอน JavaScript ที่ทันสมัย
• การสอนบรรทัดคำสั่ง - การสอนคำสั่ง UNIX พื้นฐาน
• ลอง Git - ชุดความท้าทายแบบโต้ตอบเพื่อเรียนรู้และทดลองกับ Git
• หัวข้อ Scaler - ทำความเข้าใจว่าการเขียนโปรแกรมทำงานอย่างไรเรียนรู้ Python, Java, โครงสร้างข้อมูล, C/C ++ และภาษาการเขียนโปรแกรมยอดนิยมอื่น ๆ พร้อมบทเรียนและโปรแกรมตัวอย่างที่ง่ายต่อการติดตาม
• บทสัมภาษณ์ - ยกระดับทักษะการเขียนโปรแกรมของคุณด้วยคู่มือที่ครอบคลุมของเราที่มีคำถามสัมภาษณ์ปัญหาการฝึกฝนการเข้ารหัสความท้าทายและมากขึ้น
• บล็อก Scaler - นำทางอาชีพด้านเทคโนโลยีด้วยบทความแผนงานที่ครอบคลุมนำทางผู้ที่ต้องการเทคโนโลยีจากระดับเริ่มต้นสู่ระดับผู้เชี่ยวชาญในอุตสาหกรรมเทคโนโลยีที่มีการพัฒนาตลอดเวลา
• PerfectBugreport.io - รายการตรวจสอบที่เรียบง่ายของรายการสำคัญที่จะรวมไว้ในรายงานข้อผิดพลาด

- ประวัติย่อ

• RESUMEGENIUS - ผู้สร้างเรซูเม่ออนไลน์เพียงแห่งเดียวที่จะสัมภาษณ์ที่คุณสัมภาษณ์ สร้างประวัติย่อระดับมืออาชีพในไม่กี่นาทีดาวน์โหลดและพิมพ์
• Resume.io - ผู้ผลิตประวัติย่อออนไลน์ฟรีช่วยให้คุณสร้างประวัติย่อที่สมบูรณ์แบบในไม่กี่นาที มาดูกันว่าการเขียนประวัติย่อมืออาชีพและสมัครงานวันนี้เป็นเรื่องง่ายแค่ไหน!
• กลับมาทำงานตอนนี้ - ใช้เวลาเพียงไม่กี่นาที ผู้ผลิตประวัติย่อออนไลน์ไม่ควรใช้เวลานาน-และตัวสร้างประวัติย่อที่ใช้ฟรีของเราไม่ได้
• Canva - ด้วยตัวสร้างประวัติย่อฟรีของ Canva การสมัครงานในฝันของคุณนั้นง่ายและรวดเร็ว เลือกจากฟรีหลายร้อย
• Novoresume - สร้างประวัติย่อที่สมบูรณ์แบบในปี 2020 และรับงานในฝันของคุณโดยใช้ Resume Builder ฟรี เลือกเทมเพลต ปรับแต่งมัน
• RX -Resume - สร้างประวัติย่อของคุณได้อย่างง่ายดาย
• Overleaf - Overleaf เป็นตัวแก้ไขยางพาราซึ่งสามารถใช้ในการสร้างประวัติย่อที่เป็นมิตร
• Resume Worded - Resume Worded สามารถใช้เพื่อตรวจสอบว่าประวัติย่อของคุณเป็นมิตรหรือไม่
• Open Resume - Open Resume เป็นตัวสร้างเรซูเม่โอเพนซอร์สและตัวแยกวิเคราะห์

- คนอื่น

• Mailsac - บริการกล่องจดหมายการทดสอบอีเมลแบบใช้แล้วทิ้ง
• อีเมลที่ไม่มีตัวตน - Ethereal เป็นบริการ SMTP ปลอมส่วนใหญ่มุ่งเป้าไปที่ผู้ใช้ NodeMailer (แต่ไม่ จำกัด เพียง)
• รหัสสถานะ HTTP - ไดเรกทอรีรหัสสถานะ HTTP พร้อมคำจำกัดความรายละเอียดและการอ้างอิงรหัสที่เป็นประโยชน์
• เล่นกับ Docker - สนามเด็กเล่นที่เรียบง่ายโต้ตอบและสนุกเพื่อเรียนรู้ Docker
• Tiny Helpers - ชุดเครื่องมือออนไลน์ที่มีวัตถุประสงค์เดี่ยวฟรีสำหรับนักพัฒนาเว็บ
• ฟรีสำหรับนักพัฒนา - นี่คือรายการซอฟต์แวร์และข้อเสนออื่น ๆ ที่มีระดับฟรีสำหรับนักพัฒนา
• DEV Resources - DEV Resources มีทุกอย่างสำหรับการเดินทางของนักพัฒนาของคุณทั้งหมดนำเสนอในรายการที่รวบรวมไว้
• Themeselection-การเลือกคุณภาพสูงการออกแบบที่ทันสมัย, เทมเพลตแดชบอร์ดผู้ดูแลระบบฟรีและใช้งานง่าย, ธีม HTML และชุด UI เพื่อสร้างแอปพลิเคชันของคุณได้เร็วขึ้น
• TSHIRTDESIGNS - สร้างเสื้อยืดและเครื่องแต่งกายของคุณเองด้วยตัวสร้าง Mockup ฟรีนี้

- เว็บไซต์บล็อกนักพัฒนาซอฟต์แวร์

• Dev - เครือข่ายโซเชียลที่สร้างสรรค์และครอบคลุม โอเพ่นซอร์สและโปร่งใสอย่างรุนแรง
• Medium - Medium เป็นแพลตฟอร์มแบบเปิดที่ผู้อ่านพบการคิดแบบไดนามิกและที่ซึ่งผู้เชี่ยวชาญและเสียงที่ยังไม่ได้ค้นพบสามารถแบ่งปันการเขียนของพวกเขาในหัวข้อใดก็ได้
• Hacker News - รับข่าวล่าสุดจาก Hacker News!
• Hacker Noon - Hacker Noon สะท้อนให้เห็นถึงอุตสาหกรรมเทคโนโลยีด้วยเรื่องราวและความคิดเห็นที่ไม่ได้รับการคัดเลือกโดยผู้เชี่ยวชาญด้านเทคโนโลยีจริง
• FreeCodecamp News - ฟรีรหัสชุมชนรหัสชุมชน
• นิตยสาร Smashing - นิตยสาร Smashing - สำหรับนักออกแบบเว็บไซต์และนักพัฒนา
• Hashnode - Hashnode เป็นแพลตฟอร์มการสร้างเนื้อหาฟรีและชุมชนที่ให้คุณเผยแพร่บทความในโดเมนของคุณเอง

ช่อง YouTube

• นินจาสุทธิ
• สื่อทราเวอรี่
• freecodecamp.org
• การเขียนรหัส
• เฟอร์
• LearnCode.academy
• Wes Bos
• การเข้ารหัส