Chương 13-Bài 1. Kho sách, nguồn tài liệu tham khảo Lập trình web Frontend HTML CSS JS

Cheatsheet

• Cheatsheet HTML: The-Complete-HTML-Cheat-Sheet
• Cheatsheet CSS: CSS-3-Cheatsheet

Cách học nhanh một Ngôn ngữ lập trình X trong Y phút

Để học nhanh chóng cú pháp, các lệnh điều khiển, vòng lập của một ngôn ngữ, các bạn tham khảo trang web: https://learnxinyminutes.com/

• Học HTML: https://learnxinyminutes.com/docs/vi-vn/html-vi/
• Học CSS: https://learnxinyminutes.com/docs/css/
• Học Javascript: https://learnxinyminutes.com/docs/javascript/

Các nguồn viết tutorial hấp dẫn, đáng tin cậy, dễ hiểu

1. W3Schools: https://www.w3schools.com/
2. Trang học CSS Selector trực quan: https://nentang.vn/app/tools/css-truc-quan/
3. Bài viết hay về CSS Selector: https://code.tutsplus.com/vi/tutorials/the-30-css-selectors-you-must-memorize--net-16048
4. Công cụ học JQuery Selector trực quan: https://www.w3schools.com/jquery/trysel.asp
5. Học thêm về Selector: https://webplatform.github.io/docs/guides/advanced_selectors_guide/
6. Học về 3D CSS: https://rupl.github.io/unfold/
7. Tutorial Bootstrap: https://www.tutorialrepublic.com/faq/how-to-center-a-column-in-bootstrap.php
8. Cách sử dụng CSS before và CSS after pseudo class: https://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-elements-in-practice

Các template Admin Backend miễn phí

1. AdminLTE: https://adminlte.io/
2. CoreUI: https://coreui.io/
3. AdminBSB: https://gurayyarar.github.io/AdminBSBMaterialDesign/

Tìm kiếm ý tưởng để thiết kế trang web

Có thể Google Search hoặc vào trang mạng xã hội hình ảnh Pinterest.com để tìm kiếm

• Vào trang https://www.pinterest.com/
• Gõ từ khóa web layout hoặc mobile layout để tìm kiếm ý tưởng.

Tìm kiếm ý tưởng để thiết kế ảnh SVG

• Vào trang: https://www.svgator.com/blog/cool-svg-animation-examples-to-inspire/

Các trang Bài tập, Trắc nghiệm Kiến thức

1. W3School: https://www.w3schools.com/jquery/jquery_exercises.asp
2. Bài tập tổng hợp: https://practity.com/481-2/

Các trang lấy nguồn ảnh

1. Unsplash: https://unsplash.com/s/photos/stash
2. Undraw: https://undraw.co/illustrations
3. Illustrations: https://blush.design/
4. Tập hợp các nơi trang lấy hình ảnh hữu ích: https://dev.to/madza/16-places-to-find-illustrations-for-your-projects-h5n
5. Trang sử dụng nguồn hình ảnh đẹp: https://storyset.com/

Các trang lấy màu sắc

1. https://uigradients.com/
2. https://www.eggradients.com/
3. https://flatuicolors.com/

Một vài trang tham khảo cách học UI/UX:

1. Nguyên tắc thiết kế:
   1. https://idesign.vn/graphic-design/nhung-nguyen-tac-bo-tui-trong-thiet-ke-hoa-phan-1-45620.html
   2. https://idesign.vn/graphic-design/20-nguyen-tac-bo-tui-trong-thiet-ke-do-hoa-phan-2-46352.html
   3. https://idesign.vn/graphic-design/20-nguyen-tac-bo-tui-trong-thiet-ke-do-hoa-phan-3-48197.html
2. Hệ thống màu sắc của Google: https://material.io/design/color/the-color-system.html#color-theme-creation
3. Trang chuyên về UI/UX: https://dribbble.com/
4. Ví dụ Wireframe là gì? https://cacoo.com/blog/10-must-see-wireframe-examples-inspire-next-design/
5. Trang vẽ biểu đồ/lưu đồ/wireframe web:
   1. - http://draw.io/  (miễn phí, có thể tích hợp trong Google Drive)
   2. - https://www.lucidchart.com/ (tính phí)
6. Thư viện CSS tạo animate: https://animate.style/
7. Thư viện tạo hiệu ứng scroll: https://michalsnik.github.io/aos/
8. Các vị trí đặt quảng cáo: https://nentang.vn/app/cms/bai-viet/huong-dan/phong-cach-thiet-ke-web/cac-vi-tri-dat-quang-cao-tren-mot-trang-web/
9. Best UX for Data Table: https://medium.com/nextux/design-better-data-tables-4ecc99d23356
10. Best UX for Forms: https://medium.com/nextux/design-better-forms-96fadca0f49c
    1. Forms UX: https://medium.com/nextux/form-design-best-practices-9525c321d759
11. Guide for UX: https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
12. Masonry Grid: https://masonry.desandro.com/
13. Các loại Background Pattern: https://designcode.io/background-patterns
14. Kích cỡ chữ: https://github.com/seek-oss/capsize
15. Type Writer: https://github.com/tameemsafi/typewriterjs

UI:

1. https://uidesigndaily.com/

JavaScript

1. https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/

Các tài liệu tham khảo sưu tầm

CSS

• Trang web hướng dẫn cách tạo 1 component CSS chi tiết: https://ishadeed.com/article/comment-component/

LEARNING

• HTML reference: https://htmlreference.io/
• CSS reference: https://cssreference.io/
• FreeCodeCamp: https://www.freecodecamp.org/learn
• Flex Box tutorial: https://scrimba.com/learn/flexbox
• Full Stack JS Free course: https://www.theodinproject.com/paths/full-stack-javascript
• Learn to code by building project: https://enlight.nyc/

Icon

• iconoir: https://iconoir.com/
• heroicons: https://heroicons.com/
• feathericons: https://feathericons.com/
• phosphoricons: https://phosphoricons.com/

Illustrations

• illlustrations(open source kit): https://illlustrations.co/
• free illlustrations: https://freeillustrations.xyz/
• stubborn (free illlustrations generator): https://stubborn.fun/
• unDraw(free): https://undraw.co/
• 300 + free design resource: https://interfacer.xyz/

UI/UX

• Law of UI/UX(best practice): https://lawsofux.com/
• glassmorphism(CSS generator): https://glassmorphism.com/
• Lottie(tạo animation cho web, apps): https://lottiefiles.com/
• CSS Grid generator: https://cssgrid-generator.netlify.app/
• Layout components tailwind CSS: https://wickedblocks.dev/
• Wireframe: https://uiprint.co/
• Design Principle: https://principles.design/
• https://www.smashingmagazine.com/
• https://www.joshwcomeau.com/animation/3d-button/

Color

• FLAT UI: https://www.akshay.rocks/resources
• color hunt(color partern): https://colorhunt.co/

Youtube Channel

• The NET Ninja: https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg
• Programming With Mosh: https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA
• Traversy Media: https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA
• Dev Ed: https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q
• Web Dev Simplified: https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw
• DesignCourse: https://www.youtube.com/user/DesignCourse

Một số video tutorial các bạn nên học

• Tạo Movie APP: https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7
• Tạo ứng dụng chat với VUE: https://www.sitepoint.com/pusher-vue-real-time-chat-app/
• Tạo shopping cart: https://snipcart.com/blog/next-js-ecommerce-tutorial
• Trang web có những tutorial hay: https://tympanus.net/

Các bạn biết thêm nguồn tham khảo nào hay? Có thể chia sẻ thêm bên dưới nhé ^^~