Muốn học lập trình web, biết phải học từ đâu?
Hứng thú với lập trình web và muốn trở thành một web developer? Trước tiên, bạn đã có một lựa chọn khá đúng đắn. Và khi bạn đọc bài viết này thì cũng có nghĩa bạn xài khá rành rọt internet. Nơi đấy đều là nguồn tuyệt vời để học lập trình.
Một lần nữa, tôi xin chúc mừng bạn vì những hành động tuyệt vời trên. Tuy thuộc vào background của bạn mà bản thân sẽ tự hỏi rằng không biết nên bắt đầu từ đâu để học lập trình web. Nếu bạn thử Google thì có lẽ sẽ cảm thấy khá choáng bởi hằng sa các loại ngôn ngữ lập trình cần phải học cũng như các framework và nguồn để học.
Nhưng đừng lo lắng, bởi không chỉ có mình bạn gặp vấn đề này. Google có thể là người bạn tốt nhất những cũng có thể là kẻ thù nguy hiểm nhất. Nó hoàn toàn phụ thuộc vào cách bạn sử dụng.
Những lời khuyên về lập trình web
Tôi khuyên các bạn khi muốn làm về web thì hãy xác định mục đích rõ ràng cuối cùng của bạn là gì. Bạn muốn thay đổi sự nghiệp. Hoặc là bạn có một ý tưởng cực độc cho app. Hay chỉ đơn giản là bạn muốn học cho vui.
Dù là gì đi nữa, quan trọng nhất bạn phải biết vì sao mình lại làm vậy. Sự hiểu biết này sẽ giúp bạn làm việc hiệu quả hơn. Nó cũng sẽ là động lực cho bạn để tiếp tục mỗi khi muốn từ bỏ. Hãy luôn nhớ rằng goal của bạn dù có khó đến mức nào thì nó vẫn có thể đạt được bằng sự cần cù và quyết tâm.
Cứ cho là bạn hoàn toàn mới và không biết gì về lập trình web luôn. Thế thì bạn nên suy nghĩ và đưa ra lựa chọn giữa Back-end và Front-end. Tôi sẽ giải thích sơ lược sự khác biệt giữa chúng.
Frontend – đây là những gì mà user sẽ nhìn thấy và tương tác với khi vào website. Nó hoàn toàn là về design, hiệu ứng bóng bẩy, layout và hình ảnh nhằm tạo ra trải nghiệm sử dụng cho khách hàng.
Thông thường frontend developer rất giỏi về sáng tạo hình ảnh, kĩ năng design giỏi và có đam mê với việc tạo ra trải nghiệm cho người dùng tốt nhất. Các công nghệ thường được sử dụng bởi frontend developer bao gồm HTML, CSS, jQuery và JavaScript.
Backend – Đây là phần về xử lí, lưu trữ và sử dụng Data. Nó là cách mà web và app hoạt động. Backend developer là những người giỏi giải quyết vấn đề, suy nghĩ logic và có sở thích với các tính năng của web và app. Lập trình Backend thường dùng tới PHP, Python, Golang, Java, Javascript và Ruby.
Trong trường hợp của tôi, ngày từ đầu đã biết chắc rằng mình không phù hợp với visual design của bên frontend. Có lẽ là nhờ vào việc tôi từng học về kỹ thuật và xây dựng nên việc ra quyết định khá dễ và rõ ràng. Tôi thuộc vào nhóm giải quyết vấn đề và vận hành hơn là làm đẹp cho sản phẩm.
Dù thế nào đi nữa, bạn có chọn Frontend hay Backend thì việc đầu tiên luôn là học về HTML và CSS. Bởi ít nhất bạn phải có được khả năng làm ra một website cơ bản.
Sau đó bạn nên chọn cho mình 1 editor yêu thích để code trên như VS Code hay Sublime Text. Sau đó chọn ngôn ngữ lập trình nào dễ học dễ làm vd như tôi chọn Php để lao vào vọc ngay, tải các tài liệu học lập trình web liên quan đến php để nắm căn bản. Sau khi nắm căn bản rồi chọn một framework trong các framework php mà viết trang web đầu tiên của mình.
Sau khi đã hoàn thành những khóa trên thì xin chúc mừng bạn đã thực sự bước chân vào thế giới của lập trình web rồi đấy!
Giờ là lúc thực hành, có thể sẽ rất khó khi bạn mới thử. Chúng ta có quá nhiều thứ để lo như học, làm, gia đình, v.v… nên thời gian không hề dư dả gì.
Thế nên sự kiên trì, nhất quán chính là chìa khóa thành công. Bạn sẽ biết nhiều hơn với mỗi giờ học code mỗi ngày hơn là học 7 giờ trong một ngày.
Con người là sinh vật của thói quen. Vì thế hãy biến việc viết code thành thói quen hàng ngày.
Hãy học code như bạn đang cố gắng trở thành người mạnh nhất thế giới.
Nếu bạn từng xem cuộc thi “Worlds Strongest Man”, thì việc học code cũng giống như kéo cái xe tải vậy. Nó cực kì khó khi mới bắt đầu, trông trả khác gì nhiệm vụ bất khả thi, và bạn thì chỉ có thể đi những bước nhỏ.
Nhưng khi chiếc xe bắt đầu lăn bánh thì nó cũng trở nên dễ hơn, và có khi bạn còn chạy như bay luôn.
Nếu bạn thích học bằng video thì YouTube chính là nguồn học chính cho bạn.
Những cộng đồng như freeCodeCamp cũng là nơi học cực kì tuyệt vời mà lại miễn phí. Và điều quan trọng nhất là nếu bạn biết cách thì việc trở thành một web developer giỏi mà không tốn một xu là điều có thể.
Bạn không cần phải giỏi HTML và CSS thì mới làm web được
Một điều mà tôi muốn nhấn mạnh rằng: bạn không phải giỏi về HTML và CSS mới làm được web hoặc học một ngôn ngữ khác.
Bạn không phải bỏ hàng tháng chỉ để học và học. Khi đã nắm được cơ bản rồi thì cứ “múc” và thực hành thôi.
Templates không phải là kẻ thù của bạn
Template thật sự khá hữu ích. Thật sự đấy. Mặc dù đúng là nó không giúp bạn tạo ra những trang web thật sự tuyệt vời nhưng ít ra nó cung cấp framework để bạn có thể làm ra những website đẹp và chuẩn. Tôi làm tại một công ty chuyên về product và templates luôn được sử dụng vào frontend của các sản phẩm. Điều đó có nghĩa là ta tiết kiếm được thời gian và tập trung vào tính năng của sản phẩm nhiều hơn.
Tuy vậy nếu bạn muốn trở thành một frontend developer đại tài thì sẽ phải cố gắng phát triển những kĩ năng tốt nhất,nhưng template thật sự khá hữu ích đấy.
Hiện nay, ứng dụng Web chiếm trên 50% khối lượng ứng dụng trên thế giới. Ngoài các ứng dụng Web thông thường thì ứng dụng di động cũng tương tác với ứng dụng Web, ứng dụng Desktop cũng tương tác với ứng dụng Web. Có thể nói ứng dụng Web có mặt ở khắp nơi và ngày càng phát triển. Hầu hết các ngôn ngữ lập trình phổ biến đều hỗ trợ ứng dụng Web như Java, C#, PHP, Python, Ruby …
Có nhiều cách để bắt đầu học lập trình, ví dụ như ở các trường thường dạy Pascal hoặc C trước, có nơi dạy Python trước v.v.. Tất nhiên, với cách nào mà bạn nỗ lực và theo đuổi đến cùng thì đều đi đến thành công. Trong bài viết này, chúng tôi trình bày một cách tiếp cận sát với thực tế hơn nhằm giúp các bạn sinh viên CNTT hay các bạn mới bắt đầu học lập trình yêu thích lập trình Web có thể dễ dàng nắm bắt và cách học vừa học vừa hành cũng thú vị hơn.
Quan sát kiến trúc ứng dụng để đề ra nội dung cần học
Trước tiên, chúng ta nhìn cái đích mà chúng ta muốn nhắm tới để từ đó hình dung ra cách học. Chúng ta quan sát kiến trúc ứng dụng Web động phổ biến hiện nay như sau:
Hình 1. Kiến trúc ứng dụng Web
Theo kiến trúc này và theo góc nhìn của người lập trình thì kiến trúc ứng dụng trên sẽ chia làm 3 phần Front End, Back End – App và Back End – Database.
1. Front End
Front End(Mặt trước) là phần giao diện giao tiếp với người sử dụng, nó sẽ hiển thị lên trình duyệt của người dùng. Để xây dựng tốt phần này bạn phải nắm vững các kiến thức kỹ năng xây dựng liên quan đến giao diện. Cụ thể ở đây bạn cần nắm:
- HTML(Hyper Text Markup Language): Ngôn ngữ đánh dấu siêu văn bản để tạo ra trang Web.
- CSS (Cascading Style Sheets): là ngôn ngữ dùng để định dạng các thành phần của trang Web.
- JavaScript: Ngôn ngữ lập trình xử lý trên giao diện nhằm tạo ra sự tương tác tốt hơn trên giao diện Web.
2. Back End – App
Back End (mặt sau) là phần xử lý nghiệp vụ (Business Logic), nó thường được đảm nhận bởi các ngôn ngữ lập trình như Java, C#, PHP, Python, Ruby…. Việc chọn sử dụng ngôn ngữ nào phụ thuộc vào sở thích và đặc thù của ứng dụng mà bạn sẽ xây dựng.
PHP, Python, Ruby: có đặc thù gọn nhẹ, dễ học, dễ sử dụng, chạy nhanh hơn. Nhưng không phù hợp với các ứng dụng có qui mô lớn, mức độ bảo mật phức tạp.
Java, C#: Nặng hơn, phù hợp với các ứng dụng lớn, có độ phức tạp cao.
3. Back End – Database
Database có thể được xem là phần Back End nhưng ở đây chúng tôi phân ra để dễ phân biệt. Database chịu trách nhiệm lưu trữ và truy xuất dữ liệu phát sinh từ ứng dụng. Để học về Database (chỉ xét CSDL quan hệ) bạn có thể chia làm 2 phần:
- Ngôn ngữ truy vấn dữ liệu: SQL (Structured Query Language)
- Hệ quản trị CSDL: MySQL, SQL Server, DB2, Oracle …
Kết luận
Tóm lại, để trở thành một lập trình viên trên các ứng dụng Web bạn cần có kỹ năng ở 3 phần Front End, Back End, Database. Cụ thể khuyến cáo thứ tự nghiên cứu như sau:
- – HTML, CSS
- – JavaScript
- – Database: MySQL, SQL Server, DB2, Oracle (nếu mới bắt đầu bạn nên chọn MySQL hoặc SQL Server để dễ tiếp cận hơn)
- – Back End: Bạn nên chọn một trong các ngôn ngữ Java, C#, PHP, Python, Ruby để trang bị kỹ năng này.
Trước tiên bạn cần nắm được các kiến thức và kỹ năng của các phần trên và kết hợp chúng để xây dựng ứng dụng và từ đó dần dần chuyên sâu chúng để trở thành một lập trình viên chuyên nghiệp.
Ngoài ra, những kiến thức chuyên sâu như thiết kế phần mềm, Application Framework.. cũng rất cần thiết cho các lập trình viên chuyên nghiệp.
Trong các bài tiếp theo chúng tôi sẽ tiếp tục đề cập cách tiếp cận các thành phần ở trên với hy vọng giúp các bạn có cái nhìn rõ hơn về lập trình ứng dụng Web.
1. HTML là gì?
HTML là chữ viết tắt của HyperText Markup Language, có nghĩa là ngôn ngữ đánh dấu siêu văn bản. Nó dùng để định dạng bố cục, các thuộc tính liên quan đến cách hiển thị của một đoạn text và được hiển thị trên một chương trình đặc biệc ta gọi là Browser. Hiện nay có khá nhiều Browser như Firefox, Chrome, Cốc Cốc, ...Tất cả Browser đều có điểm chung là giúp người dùng thao tác với website và nó đều có khả năng biên dịch những đoạn mã HTML, CSS và Javascript.
HTML là một định dạng đặc biệc của XML nên nó sẽ có thẻ mở và thẻ đóng với cú pháp như sau:
1 | <tagname></tagname> |
Ngoài ra mỗi thẻ HTML còn có một số thuộc tính riêng và danh sách các thuộc tính sẽ nằm bên trong thẻ mở như sau:
1 | <tagname pro1="value1" prop2="value2"></tagname> |
Như vậy HTML ra đời với mục đích thiết kế bố cục nội dung cho dữ liệu nói chung và cho giao diện website nói riêng.
2. Bổ cục HTML của một trang web
Như trên mình có giới thiệu HTML dùng để tạo nên bổ cục của giao diện website. Nó có rất nhiều thẻ khác nhau và mỗi thẻ sẽ có những nhiệm vụ nhất định. Vậy bạn có thắc mắc mắc cách chia các thẻ cho một trang web như thế nào không?
Thông thường bổ cục HTML của một website sẽ có dạng nhu sau:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html><html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html> |
Trong đó:
<!DOCTYPE html>là phần khai báo kiểu dữ liệu hiển thị làhtmlđể trình duyệt (Browser) biết.<html>và</html>là cặp thẻ nằm ngoài cùng và nó có nhiệm vụ là bao hết nội dung của trang web lại. Thẻ này là bát buộc.<head>và</head>là phần khai báo thông tin của trang web<title>và</title>nằm bên trong thẻ<head>và đây chính là khai báo tiêu đề cho trang web.<body>và</body>là thành phần quan trọng nhất, nó chứa nhưng đoạn mã HTML dùng để hiển thị trên website- Các thẻ còn lại nằm trong thẻ
<body>chính là các thẻ định dạng dữ liệu.
Như vậy trong một website chúng ta chia làm 2 phần chính:
- Phần 1: Là nhũng khai báo thông tin cho trang web và ta đặt nó trong thẻ
head. - Phần 2: Là phần hiển thị định dạng nội dung của trang web và ta đặt trong thẻ
body.
Và được diễn tả như hình sau:
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <title>Học lập trình html</title> </head> <body> <h1>Trang học lập trình</h1> <p>là một website học lập trình miễn phí</p> </body></html> |
3. Các vị trí thường thấy trong giao diện website
Thông thường giao diện của một trang web sẽ được chia thành các phần như sau:
- Header (cố định)
- Footer (cố định)
- Menu (cố định)
- Sidebar (cố định)
- Main Content (Mỗi trang khác nhau)
Như vậy trong các phần đó thì chỉ có phần content là sẽ thay đổi ở mỗi trang khác nhau, các phần còn lại thì sẽ không thay đổi. Ví dụ bạn vào trang chủ freetuts.net và trang freetuts.net/php thì sẽ thấy chỉ có phần nội dung ở giữa là thay đổi còn bên các phần header, footer, menu, sidebar là không thay đổi.
Để chia các vị trí như trên bằng thẻ HTML thì ta sẽ dùng thẻ div kết hợp với kiến thức trong serie học css để định dạng giao diện. Nếu bạn chưa biết thì hãy chờ các bài tiếp theo nhé.
4. Sử dụng gì để code HTML
HTML cũng chỉ là một file bình thường nên mọi editor đọc text đều có thể sư dụng để code như notepad, noted++, netbeans, sublime text, ... Tuy nhiên trong loạt serie này thì mình sử dụng netbeans để code.
5. Lời kết
Qua bài này mình đã giới thiệu xong các khái niệm căn bản của HTML, đồng thời bạn cũng biêt được các thành phần chính tạo nên một giao diện website, hẹn gặp lại các bạn trong các bài viết tiếp theo.
Resizing background images with background-size
<div class="tiledBackground">
</div>.tiledBackground {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: 150px;
width: 300px;
height: 300px;
border: 2px solid;
color: pink;
}You can also specify both the horizontal and vertical sizes of the image, like this:
background-size: 300px 150px;
The result looks like this:
Scaling an image up
On the other end of the spectrum, you can scale an image up in the background. Here we scale a 32x32 pixel favicon to 300x300 pixels:
.square2 {
background-image: url(favicon.png);
background-size: 300px;
width: 300px;
height: 300px;
border: 2px solid;
text-shadow: white 0px 0px 2px;
font-size: 16px;
}
As you can see, the CSS is actually essentially identical, save the name of the image file.
Special values: "contain" and "cover"
Besides <length> values, the background-size CSS property offers two special size values, contain and cover. Let's take a look at these.
contain
The contain value specifies that, regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container. Try resizing the example below to see this in action.
HTML
<div class="bgSizeContain">
<p>Try resizing this element!</p>
</div>CSS
.bgSizeContain {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: contain;
width: 160px;
height: 160px;
border: 2px solid;
color: pink;
resize: both;
overflow: scroll;
}Result
cover
The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. Try resizing the example below to see this in action.
HTML
<div class="bgSizeCover">
<p>Try resizing this element!</p>
</div>CSS
.bgSizeCover {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: cover;
width: 160px;
height: 160px;
border: 2px solid;
color: pink;
resize: both;
overflow: scroll;
}Result
background-size
background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space./* Keyword values */
background-size: cover;
background-size: contain;
/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* Global values */
background-size: inherit;
background-size: initial;
background-size: unset;
The background-size property is specified in one of the following ways:
- Using the keyword values
containorcover. - Using a width value only, in which case the height defaults to
auto. - Using both a width and a height value, in which case the first sets the width and the second sets the height. Each value can be a
<length>, a<percentage>, orauto.
To specify the size of multiple background images, separate the value for each one with a comma.
Values
contain- Scales the image as large as possible without cropping or stretching the image.
cover- Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
auto- Scales the background image in the corresponding direction such that its intrinsic proportions are maintained.
<length>- Stretches the image in the corresponding dimension to the specified length. Negative values are not allowed.
<percentage>- Stretches the image in the corresponding dimension to the specified percentage of the background positioning area. The background positioning area is determined by the value of
background-origin(by default, the padding box). However, if the background'sbackground-attachmentvalue isfixed, the positioning area is instead the entire viewport. Negative values are not allowed.
Intrinsic dimensions and proportions
The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:
- A bitmap image (such as JPG) always has intrinsic dimensions and proportions.
- A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.
- CSS
<gradient>s have no intrinsic dimensions or intrinsic proportions. - Background images created with the
element()function use the intrinsic dimensions and proportions of the generating element.
Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:
- If both components of
background-sizeare specified and are notauto: - The background image is rendered at the specified size.
- If the
background-sizeiscontainorcover: - While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.
- If the
background-sizeisautoorauto auto: - If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
- If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.
- If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if
containhad been specified instead. - If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.
- If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.
- If the
background-sizehas oneautocomponent and one non-autocomponent: - If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.
- If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.
Formal syntax
<bg-size>#where
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere
<length-percentage> = <length> | <percentage>
Examples
Please see Scaling background images for examples.
Notes
If you use a <gradient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%). Rendering of <gradient>s in such cases changed in Firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with the CSS3 background-size specification and with the CSS3 Image Values gradient specification.
.gradient-example {
width: 50px;
height: 100px;
background-image: linear-gradient(blue, red);
/* Not safe to use */
background-size: 25px;
background-size: 50%;
background-size: auto 50px;
background-size: auto 50%;
/* Safe to use */
background-size: 25px 50px;
background-size: 50% 50%;
}
Note that it's particularly not recommended to use a pixel dimension and an auto dimension with a <gradient>, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.
0 nhận xét:
Đăng nhận xét