Thiết kế website
Học lập trình Web nên bắt đầu như thế nào?
Học lập trình web ngày càng được ưa chuộng trong thời đại Internet ngày nay. Tất cả các website mà chúng ta sử dụng, truy cập, mua hàng… là do các lập trình viên web tạo ra. Họ làm tất cả các công việc: từ thiết kế giao diện, màu sắc đến các khía cạnh kỹ thuật để giúp cho trang web có thể hoạt động bình thường trong trường hợp có nhiều người truy cập.
Bài viết dưới đây sẽ giới thiệu và tổng hợp các kiến thức từ cơ bản đến nâng cao mà một lập trình viên web cần phải biết.
Đồng thời bài viết này cũng giới thiệu các nguồn tài liệu giúp bạn có thể tự học lập trình web tại nhà.
I. Các kiến thức cơ bản cần biết trong Học lập trình web
1. HTML & CSS
HTML và CSS và 2 ngôn ngữ cơ bản nhất nên bắt đầu khi học lập trình web.
HTML dùng để tạo cấu trúc, nội dung, các thành phần của trang web. HTML có thể dùng để nhúng các ngôn ngữ lập trình khác vào trang web.
CSS giúp cho cấu trúc trang web trở nên đẹp và sinh động hơn. Các thư viện/framework CSS như Bootstrap giúp cho việc thiết kế web trở nên dễ dàng.
Các nguồn tài liệu học:
- Freecodecamp
- Codecademy’s HTML & CSScourse
- Mozilla: Learn Web Development
- W3School
- Web fundamentals by Google
- Specifics on CSS Specifity by CSS Tricks
- Learn CSS Layout
2. Javascript
Javascript là ngôn ngữ không thể thiếu trong học và làm lập trình Web.
Javascript là ngôn ngữ lập trình theo hướng sự kiện giúp tăng tính tương tác (sinh động) của trang web.
Các nguồn tài liệu học:
a. Học online:
b. Học qua sách:
Được giới thiệu bởi rất nhiều người. Sau khi hoàn thành cuốn sách thì bạn sẽ thành thạo sử dụng JavaScript.
- You Don’t Know JS (free online)
Sau khi hoàn thành cuốn sách Eloquent JavaScript, bạn có thể tiếp tục đọc cuốn You Don’t Know JS
Đây là 1 tập series các cuốn sách (free) được đề xuất bởi 1 số các lập trình viên kinh nghiệm. Với nội dung súc tích mô tả chính xác sự phức tạp của JavaScript. Đồng thời đề cập đến những sai lầm mà các lập trình viên có thể mắc phải do không thật sự hiểu rõ ngôn ngữ này.
Nếu bạn muốn trở thành chuyên gia về JavaScript thì không thể không đọc series sách nói trên.
- JS: The Right Way: Trang web tổng hợp các nguồn tài liệu, thông tin hữu ích liên quan đến JavaScript
- JSbooks: Tổng hợp các sách hay và miễn phí về JavaScript
3. Responsive Design
Các nguồn tài liệu học lập trình web responsive:
4. Chrome DevTools
Chrome là một trong những công cụ hữu ích khi học lập trình web.
Thông thạo cách sử dụng Chrome DevTools sẽ giúp ích cho bạn rất nhiều sau này.
Các nguồn tài liệu học:
5. Git (Version Control)
Git giúp bạn quản lý các thay đổi (phiên bản) của chương trình. Nếu gặp vấn đề với phiên bản mới bạn có thể quay trở lại thời điểm trước đó.
Các nguồn tài liệu học:
- Try Github: cấp độ cơ bản
- Atlassian’s Git training: cấp độ cao
- Scotch.io
- The Ultimate GIT 5 day challenge
- Get Started with Git and GitHub Right Now
- Command Line Essentials: Git Bash for Windows
- Git and GitHub – Step by Step for Beginners
- Git Started with GitHub
- Explore and Master DevTools by CodeSchool
- Learn Git by Codecademy
- Introduction to Linux Commands by Smashing Magazine
6. Back End (Nodejs)
Các nguồn tài liệu học lập trình web backend về Nodejs:
- W3school
- Nodeschool
- NodeJS tutorials by NodeSchool.io
- How I explained REST to my Wife
- Creating a Single Page Todo App with Node and Angular by Scotch.io (Node, ExpressJS, MongoDB, Angular, REST).
II. Kiến thức nâng cao
1. Tối ưu CSS
Lập trình CSS có thể dễ dàng trở nên rối rắm. Vì vậy có 1 vài phương pháp giúp bạn sắp xếp cấu trúc CSS trở nên khoa học và gọn gàng hơn.
- SMACSS: Scalable and Modular Architecture for CSS. A flexible guide to developing sites small and large.
- BEM: a methodology that helps you to achieve reusable components and code sharing in the front-end.
- Managing Mobile Performance Optimization
- High Performance Animation
2. Less / Sass
Less & Sass là các CSS transpilers cho phép bạn viết CSS linh hoạt và logic hơn. Thí dụ như bạn có thể kết hợp (nesting) nhiều CSS lại với nhau.
Có 2 CSS transpilers thông dụng nhất hiện nay là: Less và Sass. Sass thì thông dụng hơn tuy nhiên Less thì đơn giản hơn do không yêu cầu phải cài thêm Ruby.
Các nguồn tài liệu học:
- Freecodecamp
- Học Less: WinLess’s Online Less Compiler
- Học Sass: SassMeister
3. JavaScript Bundlers
JavaScript Bundlers giúp quản lý và gói gọn các files dependencies:
- Browserify: lets you require modules in the browser by bundling up all of your dependencies.
- Webpack: basically Browserify on steroids. Harder to configure and set up.
4. AngularJS
AngularJS là một framework mã nguồn mở được phát triển bởi Google. AngularJS giúp cho việc phát triển trang web và ứng dụng web trở nên dễ dàng hơn.
Các nguồn tài liệu học lập trình web sử dụng AngularJS:
- W3school
- AngularJS Fundamentalsfrom Egghead.io’s
- Build Your Own AngularJS
- Design Decisions in AngularJS by Google Developers (Intro to AngularJS)
- John Papa’s Angular Styleguide
5. ReactJS
ReactJS là thư viện mã nguồn mở chủ yếu dùng để xây dựng giao diện người dùng (User Interface – UI)
Các nguồn tài liệu học lập trình web sử dụng ReactJS:
- Freecodecamp
- W3school
- Learning React.js: Getting Started and Conceptsby Scotch.io
- React Fundamentals by Egghead.io
- Official ReactJS documentation
6. Design Patterns
Design patterns là các giải pháp sử dụng lại code mẫu để giải quyết các vấn đề thường gặp. Hiểu về design pattern sẽ giúp bạn nhanh chóng đọc hiểu code của người khác. Vì vậy sẽ giúp ích cho bạn trong sự nghiệp lập trình của mình.
Các nguồn tài liệu học:
- doFactory’s JavaScript Design Patterns: dễ hiểu
- Addy Osmani’s Learning JavaScript Design Patterns: đầy đủ hơn
7. Task Runners (Grunt & Gulp)
Grunt and Gulp là các task runners cho phép bạn tự động các công việc trong phát triển web. Thí dụ thông thường sau mỗi lần code bạn phải chạy lại các CSS compiler, refresh trình duyệt.
Tuy nhiên với task runner thì bạn có thể thấy được sự thay đổi trên web browser sau mỗi lần thay đổi code. Điều này làm rút ngắn quá trình phát triển web.
Hiện nay có 2 tast runners phổ biết nhất đó là Grunt và Gulp:
Các nguồn tài liệu học:
III. Lộ trình học Lập trình Web Front-end
Nguồn: https://github.com/kamranahmedse/developer-roadmap
IV. Kết luận
Libraries và Framework có thể trở nên lỗi thời, tuy nhiên các khái niệm cơ bản và kỹ năng giải quyết vấn đề thì không thay đổi.
Bạn lúc nào cũng có thể tham khảo các nguồn blog, cộng đồng lập trình viên như: Stack Overflow, Medium và Reddit để tìm kiếm các giải pháp, thông tin và quyết định libraries hoặc framework phù hợp với lời giải cho bài toán của bạn.
Sai lầm lớn nhất trong khi học lập trình web nói chung và javascript nói riêng đó là không thật sự nắm chắc cơ bản trước khi học sang các thư viện (libraries) và frameworks. Đây cũng là sai lầm nói chung trong việc học các ngôn ngữ lập trình khác.
V. Bonus: Một số tài nguyên hữu ích khác có thể giúp bạn trong quá trình tự học lập trình web
- Web Design in 4 minutes.: Một bài viết rất hay hướng dẫn bạn cách tạo trang web trong vòng 4 phút.
- Awwards: Tổng hợp các trang web đẹp
- How To Write Unmaintainable Code. Bài viết theo phong cách hài hước về cách làm sao để viết các dòng code xấu (unmaintainable code).
- Caniuse.com: Công cụ kiểm tra các tính năng của trang web được thiết kế có được hỗ trợ bởi trình duyệt hay không.
- Các công cụ soạn thảo HTML/CSS/JavaScript (editor online) thông dụng nhất hiện nay.
- YouMightNotNeedjQuery: Có thể bạn không cần đến jQuery. Việc không cần sử dụng jQuery có thể giúp trang web của bạn chạy nhanh hơn.
- NoSQL database systems mega comparison by Kristof Kovacs. Trang web so sánh các hệ thống cơ sở dữ liệu NoSQL như: MongoDB, Redis, CouchDB, Cassandra, ElasticSearch…
- XSS Game. Cross-site scripting (XSS) bugs là một trong những lỗ hổng thông dụng và nguy hiểm nhất trong ứng dụng Web. Sử dụng công cụ này giúp bạn tìm kiếm các lỗi XSS và cách ngăn chặn chúng
- Gravit.io: Ứng dụng thiết kế đồ họa miễn phí có thể dùng để thay thế cho Adobe Ilustrator
- Adobe Kuler: Công cụ web vô cùng hữu ích hỗ trợ bạn tìm kiếm các màu tương đồng được tự động tạo ra theo lý thuyết phối màu (color theory)
- Name that color: Công cụ web giúp bạn tự động tìm tên màu mà không phải mất thời gian đặt tên cho chúng.
*************
—————————————————————————————
