8. Thiết kế giao diện websites

Translate this page:

  Niềm vui đơn giản mỗi ngày với mình là làm một cái gì đó sát với thực tế, hiểu được thêm những thứ xung quanh mình, bản chất của nó là gì, tại sao nó lại như vậy. Ngoài việc code web này ra với mình sửa điện trong nhà, sửa máy tính, mổ gà, nấu cơm... đều rất thú vị. Không như học một rổ lý thuyết ở trường nhưng không áp dụng được dùng làm gì, cảm giác rất nản. Hai năm đầu tại Bách Khoa vẫn đang học đại cương khá là chán. Rất nhiều bạn bè thậm chí các em nhỏ rất tài năng, trình độ thậm chí hơn cả những kỹ sư ra trường đang hiện hữu xung quanh mình, mình không thể thụ động đợi nhà trường nạp kiến thức cho mình với tâm trạng chán nản như vậy mãi được, mình phải tự mày mò học thôi. Học ở Bách Khoa có một cái hay là môi trường ở đây rất tốt: bạn bè ngoan, học giỏi, tạo một tâm lý cạnh tranh, 😊 và khả năng tự học. Không thể cứ để đời "lạc trôi" trong khi bạn bè, thế giới liên tục phát triển, rồi cuối cùng nhìn lại mình chả có gì nổi bật, chả có gì đặc biệt, mình nghĩ ra trường cũng thất nghiệp mà thôi, phí phạm quãng thời gian ngồi trên ghế nhà trường...

   Minimap các ngã rẽ của nghề lập trình viên:

    Điện tử-Viễn thông Bách Khoa học lập trình cho hệ thống nhúng (các vi mạch điện tử - Embedded Systems). Ở thời điểm hiện tại mình vẫn chưa được học lập trình nhúng thế nào, điều khiển các vi mạch ra sao. Đáng ra mình phải tự mày mò học nó chứ không nên đổ tại chưa được học =)) nhưng mình chưa thực sự tìm được nguồn cảm hứng nào đối với điện tử, có lẽ do đã sai ngay từ đầu khi chọn ngành, nhiều lúc mình cảm thấy rất thất vọng về bản thân, không biết mình sẽ đi đến đâu với một đống kiến thức khô khan không thể áp dụng này, nhưng tình cờ (có lẽ có duyên) mình thấy một số trò TROLL bạn khá hay viết trên nền tảng web ở trên mạng, và mình cũng thử tìm hiểu và code theo, và khi ra được sản phẩm cảm giác rất khác, nó không khô khan như khi học lý thuyết. Và dần dần cứ cuốn theo và thích lúc nào không hay.

   Bonus: Định hướng rõ hơn cho những bạn yêu thích phát triển Web:
   https://toidicodedao.com/2015/08/18/nhung-ki-nang-can-co-cua-mot-web-developer/

----------------------------------------------------------------------------------------------------------------------
   Hè này là cơ hội tốt để mình trang bị trước các kiến thức cho sau này. Hôm nay mình thử thiết kế giao diện một website, càng thực hành nhiều càng thấy mình vấp ở nhiều chỗ, và tìm cách giải quyết nó làm mình hiểu ra rất nhiều, chắc đó là cái hay mà mình nói ở trên.
   Mình sẽ lưu các sản phẩm của mình ở đây, coi như đó là một nhật ký hành trình chặng đường tự học để trở thành một web-developer.
    Liên kết dưới này là sản phẩm sáng nay của mình. (bài này tiến bộ hơn các bài trước 1 chút là mình đã cải thiện thêm khả năng responsive website-chế độ xem tương thích trên SmallTablet và điện thoại)
   http://jsbin.com/reniluqeja/1/edit?output
Trang web jsbin này là một trang hỗ trợ code trực tuyến, các bạn đừng ngại liên kết lạ mà sợ virus nhé. 😅😅
=======================================================================

21 tháng 7, 2017: Bài luyện tập tiếp theo: mình sẽ code giao diện trang chủ VnExpress International sử dụng HTML, CSS và 1 chút JavaScript, jQuery.

Mình vẫn sẽ để code ở trang jsbin.com để các bạn mới mày mò học Front-end giống mình có thể cùng vọoc nhé. (Ban đầu khá vất vả nhưng sau khi code được nửa trang thì mình đã hiểu ra nhiều thứ và làm việc cũng dễ dàng hơn, nên thời gian cũng không trâu bò như đã dự kiến trên video, mất tầm 4 ngày thôi.). Hãy mày mò nghịch đi, rất hay đó 😜
25 tháng 7, 2017:
            http://jsbin.com/qulupiqeno/edit?output
=======================================================================

PURE CSS3 (No JavaScript)

29 tháng 7, 2017: Add code chống sửa code trực tiếp trên jsbin.
     Demo giao diện website mới (Fullscreen Background Image Slideshow):
            http://jsbin.com/daxowap
     - Link dự phòng (trên codepen.io - một site luyện tập mới của mình):
          https://codepen.io/minhquanghust97/full/VzpMgx/

30 tháng 7, 2017: (Part 2 - Parallax Scrolling Effect)
           http://jsbin.com/pumamil
----------------------------------------------------------------------------------------------------------------------------
2 tháng 8, 2017: Xây dựng giao diện trang chủ Google:
           http://jsbin.com/takacex/edit?output

----------------------------------------------------------------------------------------------------------------------------
4 tháng 8, 2017:  Full-screen video intro:
          http://jsbin.com/jigipul 
          https://codepen.io/minhquanghust97/full/NvpzMm/
=======================================================================
11 tháng 8, 2017: Mấy hôm nay mình đang code website bán hàng, giờ đang bí phần xử lý giỏ hàng chán ngồi giải trí tí tiện thể làm cái video hướng dẫn nho nhỏ cho các ae ngắm gái (tập sửa video bằng cái phần mềm mới luôn =)). Video có tên "Hướng dẫn tải ảnh và video trên Instagram bằng trình duyệt không cần phần mềm" 😋


Cập nhật tháng 12, 2017: Instagram mới cập nhật thêm tính năng Stories cho phiên bản trên Web, anh em đồng "râm" lên máy tính mà xem cho nó "căng đét", cái Stories này chỉ tồn tại 24h thôi, nên để phục vụ cho anh em "lưu trữ" tài liệu học tập. Mình có up 1 video phiên bản cải tiến của video trước (chúng ta vẫn áp dụng cách cũ, tuy nhiên cần khéo léo hơn 1 chút) là có thể tải được ảnh và video về.


----------------------------------------------------------------------------------------------------------------------------
13 tháng 8, 2017: Tadaaa, mình đã quay trở lại sau nhiều ngày ngồi nghĩ hướng giải quyết các thao tác trên giỏ hàng bằng JavaScript, cuối cùng cũng cho ra được một sản phẩm tâm huyết được tạo bởi niềm đam mê, đốt không ít chất xám và thời gian... Các bạn thử trải nghiệm nó và cho mình nhận xét nhé 😜
               http://jsbin.com/wuteyez