Danh sách bài viết theo tags #30dayschallengecode
#j2team_share #j2team_tutorial #WFH
Series thử thách 30Days thực chiến - 1/2 chặng đường
Dịch dã không biết ae DEV WFH sao r. Riêng mình thấy WFH tiện nhưng hơi tẻ nhạt quá.
Tiện đây mình xin chia sẻ lại 15 thử thách code giao diện với HTML CSS JS thuần, giúp ae luyện code vs giao lưu luôn.
**Update 10 thử thách gần nhất đến nay:**
Day 16: Tự thiết kế Animation trong 15 phút (8h Tối ngày 23/02/2022)
https://youtu.be/luI-NrSpm34
Day 15: Mock data là gì? Filter shop bán hàng siêu đơn giản
https://youtu.be/5T1SEvBqA-g
Day 14: Tự làm Carousel Animation, chẳng cần đến thư viện
https://youtu.be/fyAS7cFPJ7c
Day 13: Blob & base64 xử lý upload ảnh
https://youtu.be/SsoCQuwk-3Y
Day 12: Tư duy thiết kế slide range
https://youtu.be/b8AjydmGOpA
Day 11: Ứng dụng Animation thiết kế Notification
https://youtu.be/Z-SuiRYaPck
Day 10: Todolist kinh điển, dùng "this" cực dễ
https://youtu.be/iO7kgGgHr6w
Day 9: Hướng dẫn dùng API làm app thời tiết từ A-Z
https://youtu.be/ZKhOuR1UWh4
Day 8: Validate dữ liệu trong form
https://youtu.be/fRPCVBfD7hw
Day 7: Hiệu ứng gắn tags, chip
https://youtu.be/Cad_2CvAoQ8
P/S: Các bạn mới follow thử thách có thể theo dõi đầy đủ tại Playlist trên
https://www.youtube.com/channel/UCMfiIOjAzHZ9vyoqNdcPvNA
#30Dayschallengecode #30dayschallengecode_day7 #30dayschallengecode_day8
#30dayschallengecode_day9 #30dayschallengecode_day10 #30dayschallengecode_day11 #30dayschallengecode_day12
#30dayschallengecode_day13 #30dayschallengecode_day14 #30dayschallengecode_day15 #30dayschallengecode_day16
Thống kê:
#j2team_share #j2team_tutorial
**Series thử thách 30Days thực chiến - Day 1**
**Thiết kế Product Card trong 45'**
Bắt đầu chuỗi series các bạn hãy cùng mình tìm hiểu cách tạo ra một Product Card nhé:
**Youtube:** youtube.com/watch?v=3odtU8VL3Mc
**DEMO: **https://www.nodemy.vn/projects/html-css-js/product-card/
**Được sử dụng:** Các Product Card được thường được dùng trong các website thương mại điện tử, shop bán hàng cá nhân mang lại trải nghiệm người dùng khiến sản phẩm xịn sò qua đó kích thích nhu cầu mua của khách. Hãy cùng mình đi vào chi tiết sản phẩm
**Chi tiết thành phần và mục đích: **
*Container: (Khu vực nền tô điểm sp, phân khối giữa các card)*
*Ảnh Sản phẩm : (Điểm nổi bật nhất của card)*
*Thông tin chi tiết: (Show thông tin tổng quát một cách ngắn gọn)*
*Icon tiện ích: ( Lựa chọn tiện lợi, nhỏ, k làm thay đổi bố cục chính)*
*Khu vực Action: (Hiệu ứng kích thích hành động mua hàng)*
**Kiến thức sử dụng:**
* Layout
* Flex
* Tranform: rotate, translate, scale, transition
* :root variable
Mỗi ngày sẽ ra một video kèm phân tích về từng thử thách, mọi thắc mắc câu hỏi mọi người comment bên dưới sẽ đc đội nhóm bên mình hỗ trợ luôn nhé.
**Note: **Mọi người có thể tìm thông tin bài viết dễ dàng theo hashtag dưới đây
#30Dayschallengecode #30dayschallengecode_day1
Thống kê:
#j2team_share #j2team_tutorial #j2team_webdev
**Series thử thách 30Days thực chiến - Day 2**
Các bạn có công nhận rằng để giới thiệu bản thân, năng lực và kinh nghiệm thì việc có một **Profile Card** đẹp mắt chắc chắn sẽ lấy được điểm tốt với ng phỏng vấn đúng k nào, hãy cùng mình thiết kế **Profile Card **đẹp mắt mà vẫn show được thông tin chi tiết bản thân nhé:
**Youtube:** https://youtu.be/DkiLJzL6kv4
**DEMO: **https://www.nodemy.vn/projects/html-css-js/profile-card/
**Được sử dụng: **Profile Card dùng show năng lực, kinh nghiệm một cách tóm gọn về bản thân. Mỗi Profile Card sẽ có design riêng mang phong cách của mỗi người, gây ấn tượng tốt hơn so với hồ sơ văn bản truyền thống
**Chi tiết thành phần và mục đích:**
*Container: (Khu vực nền tô điểm cho nội dung chính,phân khối giữa các card)*
*Ảnh cá nhân: (Điểm nhấn chính, ban đầu kích thước nhỏ để hợp layout, có thể phóng to khi ng xem muốn zoom toàn ảnh)*
*Thông tin chi tiết: (Show thông tin tổng quát một cách ngắn gọn giới thiệu về bản thân, nghề nghiệp, các bạn có thể cho thêm ngày sinh, Trường ĐH ...)*
*Icon tiện ích: (Dễ dàng dẫn đến các trang mạng xã hội, mục đích Profile Card là overview thế nên các icon cần nhỏ gọn, muốn xem kinh nghiệm cũng như thông tin khác có thể dẫn đến Github, Youtube, Facebook. Các bạn cũng có thể thêm icon và dẫn link dự án đã làm)*
*Khu vực Action: (Hiệu ứng kích thích hành động kết nối)*
**Kiến thức sử dụng:**
* Layout, Flex
* Chèn Icon từ Boxicon
* Transform: rotate, translate, scale, transition
* Kinh nghiệm chuyển trạng thái ảnh từ tròn => vuông
**Lưu ý: **Rất nhiều bạn khi code k ăn transition, ở đây mình đã dùng opacity thay cho display:none để transition có hiệu ứng zoom out
Mỗi ngày sẽ ra một video kèm phân tích về từng thử thách, mọi thắc mắc câu hỏi mọi người comment bên dưới sẽ đc đội nhóm bên mình hỗ trợ luôn nhé.
**Note: **Mọi người có thể tìm thông tin bài viết dễ dàng theo hashtag dưới đây(30dayschallengecode_day… mỗi day hashtag sẽ tăng dần từ 1-30 nhé)
#30Dayschallengecode #30dayschallengecode_day2
Thống kê:
#j2team_share #j2team_tutorial #j2team_webdev**
Series thử thách 30Days thực chiến - Day 3**
Modal, Popup không còn quá xa lạ với ae. Sử dụng Modal, Popup để đẩy thông tin quảng cáo và thông báo người dùng truyền tải thông điệp ấn tượng hơn. Hãy cùng mình tìm hiểu cơ chế tạo modal popup trong thử thách 3 lần này:
**Youtube:** https://youtu.be/gyqMtCmHHUA
**DEMO: **https://www.nodemy.vn/projects/html-css-js/create-modal/
**Được sử dụng:** Mục đích của Modal Popup Material UI là thông báo với người dùng, mở form cho người dùng đăng ký, hiển thị banner quảng cáo marketing.
**Chi tiết thành phần và mục đích:**
*Lớp phủ overlay: Làm background thường được tối màu để nhấn mạnh nội dung chính popup *
*Popup: (Có 3 phần: Header, Body, Model Footer)*
* *Header: Thông tin popup*
* *Body: Nội dung chính của popup có thể ảnh hoặc form*
* *Footer: Khu vực action kêu gọi hành động*
**Kiến thức sử dụng:**
Layout, Flex : màu nền sử dụng rgba (kèm độ trong suốt)
Chèn Icon từ Boxicon
Transform: transition
Javascirpt: Dom selector, Gắn Event click để tắt bật popup
**Lưu ý: **Việc gắn sự kiện cả Div cha và Div con sẽ dẫn đến việc ấn click sẽ xảy ra hiện tượng click 1 Div sẽ gọi cả 2 event.
Có thể dùng trick như trong thử thách hoặc sử dụng Event.stopPropagation()
Mỗi ngày sẽ ra một video kèm phân tích về từng thử thách, mọi thắc mắc câu hỏi mọi người comment bên dưới sẽ đc đội nhóm bên mình hỗ trợ luôn nhé.
Note: Mọi người có thể tìm thông tin bài viết dễ dàng theo hashtag dưới đây
(30dayschallengecode_day… mỗi day hashtag sẽ tăng dần từ 1-30 nhé)
#30Dayschallengecode #30dayschallengecode_day3
Thống kê:
#j2team_share #j2team_tutorial #j2team_webdev
**Series thử thách 30Days thực chiến - Day 4 - Day 5**
Tăng tốc chinh phục 2 thử thách nào ae ơi:
## DAY 4: IMAGE GALLERY LÀ BỘ SƯU TẬP ĐỂ HIỂN THỊ HÌNH ẢNH CỦA BẠN TRÊN TRANG WEB. VIỆC ĐƯA NÓ VÀO TRANG WEB GIÚP LÀM NỔI BẬT CÁC SẢN PHẨM MỘT CÁCH SÁNG TẠO ĐỂ THU HÚT, GIỮ CHÂN KHÁCH HÀNG LÂU HƠN Ở TRANG CỦA BẠN.
**Youtube**: https://youtu.be/0Uhtzrsi-qE
**DEMO**: https://www.nodemy.vn/projects/html-css-js/image-gallery/
**Chi tiết thành phần và mục đích:**
Container: Phân layout
List ảnh : (Ban đầu để kích thước nhỏ phù hợp với layout và để có thể hiện thị hết 8 ảnh. Mỗi ảnh khi cover vào sẽ được zoom ra. Khi ấn vào từng ảnh sẽ bật lên, hiện toàn bộ ảnh đó)
Gallery: (Có lớp phủ để làm mở phần nền ảnh và làm nổi bật phần ảnh chính. Giúp người xem không bị rối mắt)
Control: Giống như carousel có thể slide chuyển tiếp ảnh
**Kiến thức sử dụng:**
css tạo hiệu ứng zoom từng ảnh
JS toggle class.
JS logic xử lý next và prev ảnh.
## DAY 5: SEARCH THÌ TRANG NÀO CŨNG CẦN PHẢI SEARCH, THANH SEARCH QUÁ DÀI THÌ LẠI MẤT KHÔNG GIAN, VẬY HÃY CÙNG TẠO RA MỘT SEARCH BOX VỚI UI/UX TIỆN LỢI CHO NGƯỜI DÙNG NHÉ.
**Youtube**: https://youtu.be/rpKjWpOiBSY
**DEMO**: https://www.nodemy.vn/projects/html-css-js/search-box/
**Chi tiết thành phần và mục đích:**
Input: Mặc định sẽ ẩn, sẽ tự động tăng width khi người dùng ấn vào button icon kinh lúp
Icon: Đại diện hiển thị cho search box, bắt sự kiện khi người dùng ấn sẽ toggle thay đổi kích thước của search box
**Kiến thức sử dụng:**
css transition width
css position absolute + relative
JS toggle class.
Mỗi ngày sẽ ra một video kèm phân tích về từng thử thách, mọi thắc mắc câu hỏi mọi người comment bên dưới sẽ đc đội nhóm bên mình hỗ trợ luôn nhé.
Note: Mọi người có thể tìm thông tin bài viết dễ dàng theo hashtag dưới đây(30dayschallengecode_day… mỗi day hashtag sẽ tăng dần từ 1-30 nhé)
#30Dayschallengecode #30dayschallengecode_day4 #30dayschallengecode_day5
Thống kê:
#j2team_share #j2team_tutorial #j2team_webdev
**Series thử thách 30Days thực chiến - Day 6**
Đến hẹn lại lên, sắp được một tuần rồi ae ơi. Thử thách hôm nay chủ đề chúng ta sẽ tìm hiểu về event trong keypress.
AE đến thử thách thứ mấy rồi, cùng cmt để xem tốc độ ra sao nhé :D
**Youtube**: https://youtu.be/p5ivn6UpjQk
**DEMO**: https://www.nodemy.vn/projects/html-css-js/detect-pressed-key/
**Được sử dụng: **Rất nhiều trong việc bắt tương tác từ người dùng.
Chúng ta có thể dùng event keypress bắt nút Enter, Escape tăng tiện ích của chức năng. Ngoài ra ae nào muốn chặn copy paste, typing debounce, làm game, keylogs ... Tất tần tật đều sử dụng được event keypress or keydown
**Kiến thức:** e.keyCode , e.which, e.location ...
Mỗi ngày sẽ ra một video kèm phân tích về từng thử thách, mọi thắc mắc câu hỏi mọi người comment bên dưới sẽ đc đội nhóm bên mình hỗ trợ luôn nhé.
**Note**: Mọi người có thể tìm thông tin bài viết dễ dàng theo hashtag dưới đây(30dayschallengecode_day… mỗi day hashtag sẽ tăng dần từ 1-30 nhé)
#30Dayschallengecode #30dayschallengecode_day6
Thống kê:
#j2team_share #j2team_webdev #j2team_tutorial
**SERIES LUYỆN CODE TAY TO CHO AE DEV**
Hầu hết ae DEV Newbie thường mới học kiến thức căn bản, chưa được tiếp xúc các vấn đề trong dự án để vận dụng code bao giờ. Đây cũng là vấn đề mà mình tin chắc các bạn DEV mới cũng đang bận tâm tìm kiếm giải pháp.
Hiểu Ae DEV mong muốn được luyện tập nâng cao kinh nghiệm code cũng như doanh nghiệp cần DEV làm được việc luôn.
Team dự án hi vọng group là nơi ae DEV có thể nâng cao kỹ năng code bản thân, giao lưu học hỏi, giải đáp vướng mắc cho ae DEV.
Chính thức ra mắt các series luyện code tay to hoàn toàn FREE về:
* HTML CSS JS
* Nodejs Express
* ReactJS
* Docker
Bắt đầu với thử thách đầu tiên series 30 Days HTML CSS JS, mỗi ngày luyện tập một usecase cụ thể thường xuyên được sử dụng trong các dự án thực tế.
Hiện tại mỗi ngày team dự án sẽ ra một video hướng dẫn vượt qua thử thách. Ae có vấn đề bugs, câu hỏi có thể đăng lên trực tiếp lên group nhờ các DEV lão làng giải đáp.
Với mỗi sản phẩm hoàn thành các bạn hãy share link git của các bạn, chụp ảnh kèm theo hashtag #30Dayschallengecode #Day1 ... để được support review code dễ nhất, đồng thời đánh dấu mốc quãng đường đã vượt qua
**Link github:**
https://github.com/namndwebdev/html-css-js-thuc-chien
**Youtube:**
https://www.youtube.com/watch?v=gVx72yLou2c&list=PLodO7Gi1F7R0zA8RkRHcDgnPduNBmjkb5
Với các bạn đã hoàn thành thử thách có thể inbox với mình để được review kiến thức và cơ hội kết nối với công việc với các doanh nghiệp.
Mọi ý tưởng đóng góp có thể để lại comment giúp team dự án có thể phát triển các series về sau CHẤT hơn.
Ae thấy hay hãy ủng hộ và chia sẻ đến với những người bạn xung quanh để team dự án thêm động lực phát triển nhé, cảm ơn mọi người.
Thống kê:
#j2team_share #j2team_tutorial
**Series thử thách 30Days thực chiến - Day 7**
Đã hơn 1 tuần trôi qua ae đã vượt qua thử thách thứ 7 chưa nhỉ.
Tuần này full video thử thách đến ngày 15 luôn nhé ae. Mọi người đón xem nhé
**Youtube**: https://youtu.be/Cad_2CvAoQ8
**DEMO**: https://www.nodemy.vn/projects/html-css-js/search-tags/
Được sử dụng: Search tags dùng để gắn thẻ phân loại các sản phẩm, bài viết một cách dễ dàng.
**Chi tiết thành phần và mục đích:**
Container: Nơi chứa tags list và input
Input: Nơi nhập tags mà người dùng muốn phân loại
Icon: Xoá tags
**Kiến thức sử dụng:**
Layout, Flex
Chèn Icon từ font-awesome
Event: Gắn sự kiện với addEventListener vs gắn sự kiện qua HTML
**Lưu ý**: Với các bài toán thêm DOM mới muốn DOM đó bắt sự kiện được chúng ta cần phần gắn sự kiến cho DOM vừa thêm. Một cách khác chúng ta có thể gắn sự kiện với attribute onclick trong template DOM vừa được thêm ( Cách thứ 2 sẽ đơn giản hơn, dễ làm hơn)
Mỗi ngày sẽ ra một video kèm phân tích về từng thử thách, mọi thắc mắc câu hỏi mọi người comment bên dưới sẽ đc đội nhóm bên mình hỗ trợ luôn nhé.
**Note**: Mọi người có thể tìm thông tin bài viết dễ dàng theo hashtag dưới đây(30dayschallengecode_day… mỗi day hashtag sẽ tăng dần từ 1-30 nhé)
#30Dayschallengecode #30dayschallengecode_day7
