OWTH

Trước khi bắt đầu vào việc học code thì mình sẽ bắt đầu với việc tìm hiểu cách để tạo web trước. Sau khi tra cứu một hồi thì mình rút ra một điều. Là nó khó :)))) không chỉ học mỗi HTML với CSS mà nếu muốn web có thể tương tác được thì còn phải học Javascript nữa 🥹 Vậy nên là sau đây, mình sẽ chia cấu trúc cơ bản của việc tạo web ra như sau:

Thực ra nói đến đây mình cũng không hiểu gì nên là mình đã đi tìm hiểu, thì đây là những gì mình tìm hiểu được:

1. Viết HTML

HTML là Hypertext Markup Language, nó không phải là một ngôn ngữ lập trình, mà là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo cấu trúc và nội dung web. Đúng như ý nghĩa của nó, HTML giống như một cái khung để định hình một trang web. Lấy ví dụ về việc xây nhà, thì HTML sẽ đảm nhận việc xây dựng cấu trúc cho ngôi nhà, tạo nên cái khung nhà hoàn chỉnh. (Trong giai đoạn mình viết bài này thì mình có biết được tin HTML đã trở thành một ngôn ngữ lập trình :)))) nhưng sau khi tra lại trên mạng thì mình thấy nó vẫn chưa được coi là một ngôn ngữ lập trình :)))) nói chung là vì mình cũng không rõ nên mình sẽ vẫn để HTML không phải là một ngôn ngữ lập trình).

2. Thiết kế trang web bằng CSS

CSS là Cascading-Style Sheet, tương tự như HTML, nó không phải là một ngôn ngữ lập trình, mà là ngôn ngữ thiết kế được dùng để tạo phong cách cho web. Nếu HTML đóng vai trò định dạng website thông qua việc tạo ra các tiêu đề, văn bản, thì CSS có nhiệm vụ tạo kiểu cho những tiêu đề văn bản đó bằng việc thay đổi màu chữ, font chữ… Tiếp tục với ví dụ xây nhà, HTML là khung nhà thì CSS sẽ thiết kế ngôi nhà đó theo phong cách riêng của chủ nhà, trang trí ngôi nhà bằng những màu sắc và nội thất khác nhau.

3. Tạo website
   1. Responsive website hoặc adaptive website
      • Responsive website: trang web đáp ứng, nghe có vẻ khó hiểu nhỉ :)))) theo mình hiểu đơn giản thì responsive sẽ giúp bố cục nội dung tự co giãn theo kích thước của trình duyệt. Chẳng hạn như bạn xem bằng trình duyệt trên máy tính và trình duyệt trên điện thoại. Trình duyệt trên máy tính đương nhiên sẽ to hơn so với trình duyệt trên điện thoại, và ngược lại. Khi bạn xem một trang web trên trình duyệt máy tính, nếu mà web đó không responsive thì khi bạn xem trang web đó trên điện thoại, web sẽ không thể hiện thị hết được toàn bộ thông tin. Còn ngược lại, nếu có responsive thì bất kể bạn dùng trình duyệt trên thiết bị nào, trang web đó sẽ tự động co giãn sao cho phù hợp với kích cỡ trình duyệt trên thiết bị đó.
      • Adaptive website: trang web thích ứng, cá nhân mình hiểu thì adaptive là tạo bố cục cố định cho các kích cỡ màn hình. Để so sánh thì responsive là tạo 1 lần là có thể dùng có mọi kích cỡ trình duyệt khác nhau, còn adaptive sẽ phải tạo ra các bố cục cố định cho từng kích cỡ màn hình khác nhau. Người dùng càng có nhiều kích cỡ màn hình thì càng có nhiều bố cục cố định để chuyên biệt cho từng kích cỡ khác nhau. Ví dụ như người dùng Iphone và người dùng Samsung sẽ có kích cỡ màn hình khác nhau, thì nhà thiết kế web sẽ phải tạo một bố cục dành riêng cho người dùng Iphone và một bố cục dành riêng cho người dùng Samsung.
   2. Static website hoặc dynamic website
      • Stactic website: trang web tĩnh, là trang web có nội dung không đổi. Có thể hiểu đơn giản trang web tĩnh chỉ là một văn bản, người dùng sẽ không thể tương tác hay thay đổi nội dung trên trang web đó.
      • Dynamic website: trang web động, là loại trang web có thể thay đổi được nội dung. Ngược lại với static website, dynamic website có thể cho người dùng tương tác, tạo và thay đổi nội dung hiện thị trên trang web đó.

Ở phần này thì mình sẽ sử dụng Figma để làm prototype cho web của mình. Nhưng trước đó thì mình sẽ phác thảo ra giấy trước.

Còn đây là prototype trên Figma.

• Wireframe: ban đầu mình dựa trên cái des 4 để làm wireframe, làm xong thì thấy nó xấu vãi nên mình chuyển hướng sang cái khác :)))) và idea thì mình tham khảo từ một web học code mà mình cực thích đó là Codecademy, xin lỗi chứ mình ưng giao diện web này lắm luôn ý, nó đúng gu quá không chịu nổi. Và sau cái đống xoá đi làm lại đấy thì mình xong được cái wireframe khá ưng ý, mất liền 3 ngày vừa học lại des vừa làm trên Figma.

  

  

  

  

  

  

  

  

• Icons, pictures, components: mấy cái ảnh thì mình lấy bừa cái có sẵn, còn icons với components thì mình chủ yếu lấy từ community Figma, tại nó có mấy cái kit sẵn í, nhanh gọn lẹ 👍 10 điểm cho community Figma 💯

  

  Icon chọn bừa trên Iconify, trên này cho tải svg không mất phí. Còn Flaticon thì chỉ free png thôi, svg thì donate :))))

  

  Cái logo này thì mình lấy bừa trên canva :))))) tại mìnhh cũng không rành về việc des logo, chắc sau phải đi học một khoá des mới được 😅

  

  Hồi đầu nghĩ tên blog là mình đã kiểu nó sẽ liên quan đến tàu, với cả thấy clb bên trường nhiều người thích pixel art nên cũng đú đởn tự vẽ con tàu bằng pixel, xong đếch vẽ được 😀 tìm mạng thấy cái ảnh này đẹp mà toàn watermark nên cũng lọ mọ photoshop để hết đống watermaek đi mới được cái ảnh cũng oce như này :))))

  

  Cái ảnh này thì mình tự chế :))))) hồi xưa mình tải được mấy cái asset, nó tách riêng các bộ phận, với biểu cảm. Tự dưng một hôm mình nổi hứng thế là ngồi ghép vào xong giờ nó thành ava của mình luôn rồi :)))))

  

  Canva rất hân hạnh tài trợ bức ảnh này 👏👏 mình tính chụp bộ ảnh để làm cover cho blog, thì cái vé này là một đạo cụ, và mình cũng chưa đi chụp nên mình để nó tạm thành ảnh cover cho blog luôn.

  

• High fidelity: thề luôn làm cái này mệt nhất ạ 🙂 cái này là bản demo để làm bản chính thức luôn í, nên là có nhiều cái cần phải làm vl. Chọn màu, chọn ảnh, để cái nào cho hợp lí, kết nối như nào cho nó responsive, bla bla… Tóm lại là mệt và may là mình cũng tạm ưng thành quả chứ mình cũng hết nổi rồi 😀 Sau đây là thành quả hơn 1 tuần (chắc thế) của mình.

  

  

Sau khi xong prototype, đồng nghĩa với việc mình đã biết trang web của mình sẽ ra sao nên là mình sẽ tiếp tục với việc học và làm web.

1. HTML

   Mình đã chật vật hơn 4 ngày gì đó để vừa học vừa code HTML, nói thật thì xem người ta giảng thì cũng dễ hiểu đấy, cũng nghĩ là dễ này thì mình làm tí là xong, xong rồi cuối cùng là mân man ra mãi mới xong được 1 trang index (homepage của blog). Nhưng mà khổ cái nỗi là prototype một kiểu nhưng code ra lại một kiểu. Ở prototype có phần about me, contact ở homepage thì đến khi code vì mình code mãi nó vẫn như cứt nên mình đã bỏ con mẹ nó luôn, chờ một dịp không xa để update lại vì mình đéo còn sức nữa. Xong được trang homepage thì mình thấy là cũng đơn giản hơn vì hầu như cấu trúc của blog không thay đổi nhiều cho lắm, chỉ thêm bớt một chút ít thôi nên là copy paste rồi chỉnh sửa thêm thắt cho hợp lý là xong HTML của 2 trang blog và about me luôn.

2. CSS

   Mình thề đây là cái thứ khiến mình thức trắng liền hơn 1 tuần vì mình đéo hiểu tại sao nó lại như thế. Mình thề là trong suốt khoảng thời gian đi theo ngành này đến bây giờ thì đây là lần đầu tiên mình code câu nào mình chửi câu đó, bình thường mình đéo thế đâu, khó lắm mới chửi thôi. Đùa chứ mình ngồi vừa học vừa code mà nó cứ thế quái nào í, cáu đến cái mức độ mình code gần 300 dòng CSS (đéo hiểu sao lại nhiều thế) mình xoá hết mẹ đi mình quyết tâm làm lại từ đầu. Eo ơi, may ông trời tha cho đứa con khốn nạn đến cùng cực này, cuối cùng mình cũng hoàn thành CSS cho homepage (sau 3 hôm thức trắng sửa bằng được sao cho nó giống nhất có thể). Nói chung là cấu trúc tương tự nên cũng copy paste nốt các cái cơ bản, xong ngồi sửa chi tiết từng trang một thế là xong. Thì cũng gọi là tạm ổn, vì làm nữa thì cháy dl mất, nên là vẫn hẹn một ngày không xa để update sau.

3. Javascript

   Mình bắt đầu javascript khá là muộn, cách dl 5 ngày, mình mới bắt đầu học js, nhưng mình thấy không hiệu quả vì nếu để làm hết những gì mà mình muốn làm với cái blog của mình thì 4 ngày là không đủ, tại còn liên quan đến backend này nọ khá là lằng nhằng. Nên là sau khi học xong 1 khoá js trên youtube, mình quyết định xem cái chức năng nào là cần thiết và quan trọng nhất cho thời điểm hiện tại, thì mình chọn cái dropdown menu. Tất cả những cái khác như pagination hay là catagories mình đều để lại cho mình ở tương lai xử lí sau :)))) mặc dù có dropdown menu nhưng catagories không được thì mình cũng chịu :)))) cháy dl lắm rồi :))))). Sau đó thì mình bắt tay vào code dropdown menu. Nói chung là sau khi tìm hiểu này nọ thì cũng code được ngon nghẻ lắm :)))). Nói sơ qua về code dropdown menu thì mình chủ yếu dùng toggle(), addEventListener() và stopPropagation().

   • toggle(): toggle method, nó sẽ loại bỏ một token có sẵn trong danh sách và trả về giá trị false, và ngược lại , nếu token đấy chưa có trong danh sách thì token sẽ được thêm và và trả về giá trị là true.
   • addEventListener(): addEventListener method, thiết lập một hàm mà sẽ được gọi bất kì khi nào mà một sự kiện chỉ định được gửi đến mục tiêu.
   • stopPropagation(): ngăn chặn sự lan truyền của cùng một sự kiện được gọi.

4. Git/Github

   Git và Github có lẽ là 2 công cụ cực kì cần thiết đối với hầu hết các lập trình viên hiện nay khi mà nó có thể giúp chúng ta dễ dàng trong việc quản lý, lưu trữ và backup code cũ khi có lỗi và hơn hết nó còn tạo ra một môi trường làm việc nhóm cực kì hoàn hảo và tiện lợi. Hồi đầu mới theo đuổi cái ngành này, mình còn lơ mơ lắm, cũng kiểu biết là sẽ phải dùng git và github, nhưng chả bao giờ đụng đến cũng như học để hiểu sâu vì mình không có nhu cầu push code lên github. Nhưng đến lúc bắt tay vào làm dự án này, mình đã phải dành thời gian để học git để có thể push được code lên github. Trong quá trình thực hiện push code có khá nhiều lỗi xảy ra và mình cũng mất kha khá thời gian để tìm hiểu và sửa lại. Nhưng cũng may mắn khi mà sau vài lần push code thì mình cũng thành thạo hơn rồi nên là cũng không còn trục trặc gì mấy nữa. Tuy vậy thì để hiểu rõ hơn về git, các git command và github thì trong tương lai không xa mình sẽ có bài về nó (hứa sẽ làm 🫡 thề luôn).

5. Domain và Hosting

   Công đoạn cuối cùng để cái blog này hoạt động đó là mua domain và hosting. Lúc đầu mình tưởng mua domain thôi là xong rồi, cứ loay hoay mãi không hiểu làm sao để kết nối domain với code của mình, xong mãi mới biết là phải mua thêm cả hosting thì mới dùng được thế là mếu luôn :)))) vì tiền dự tính để mua không có đủ :))))) nhưng vì blog, thế là phải cắn răng xót ruột trích tiền dự phòng ra để mua 🥲. Mua xong rồi nhưng loay hoay mãi chả hiểu gì, thế là lại phải ngồi tìm hướng dẫn này nọ, xem xong thì cũng biết làm, thế là ra được thành quả là cái blog này đây 😌.

Đôi lời kết thúc bài viết này, như mình đã đề cập, OWTH là một dự án cá nhân, là blog cá nhân, là dự án đầu tiên của mình. Mình thấy còn khá nhiều bất cập, khá nhiều những thứ không hoàn chỉnh mặc dù mình đã cố gắng hết sức và hoàn thành trong thời hạn deadline. Để mà nói thì hiện tại OWTH chỉ dừng lại ở mức 75% - 80% hoàn thiện, còn rất nhiều những cải tiến mà mình muốn thêm vào, nhưng có lẽ phải hẹn ở một dịp khác thôi vậy. Đó là tất cả những gì mà mình có thể làm được ở hiện tại, và hứa với bản thân là sẽ có update thường xuyên 😇.