Day 1: Thiết kế Product Card bắt mắt chưa đầy 1 giờ | 30 Days Thực chiến HTML CSS JS
👇 LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course MIỄN PHÍ 👇:
• Luyện tập 30 Projects thực chiến: • Day 1: Thiết kế Produc...
• HTML: • HTML căn bản cho người...
• CSS: • [CSS căn bản] | bài 1:...
• JS: • [Javascript căn bản] |...
• NodeJS: • NodeJS backend - Cơ ch...
• ExpressJS: • [ExpressJS] | Giới thi...
• ReactJS: • ReactJS căn bản, làm b...
Ngoài ra nếu bạn muốn học hiệu quả hơn, có kinh nghiệm đi làm ngay thì nên học tập tại:
• Học OFF (2 - 4 tháng): Nodemy.vn
Được đưa vào làm dự án, giảng viên hỗ trợ 1-1, trực tiếp hướng dẫn làm task. Đầu ra cam kết việc làm có lương ngay.
• Học ONLINE: class.nodemy.vn/
Video call, giải đáp trực tiếp, hỗ trợ 1-1, teamview review sửa code. Hướng dẫn code dự án thực tế.
❓Tại sao mình nói học OFF hoặc ONLINE qua class.nodemy.vn/ lại hiệu quả hơn ?
Vì khi bạn tham gia các chương trình đào tạo trên, bạn sẽ được giảng viên hỗ trợ trực tiếp. Đó là cách bạn lên kinh nghiệm nhanh nhất, học từ người đi trước.
Có người hướng dẫn bạn sẽ học tập trung kiến thức trọng tâm, kiến thức chuyên sâu, tránh sai lầm khi code. Những điều đó thôi cũng giúp bạn rút ngắn gần 1 năm so với tự học lập trình.
✪ Để học tập ONLINE qua youtube hiệu quả :
⚠️⚠️ ⚠️ Các bạn không nên quá phụ thuộc vào video. Video chỉ giúp các bạn hiểu kiến thức, để vận dụng thành thạo các bạn cần luyện tập nhiều và làm dự án thực tế, cần 1 người đi trước chỉ dẫn.
⭐ Nên tự code lại kiến thức đã học (tắt video đi code lại),
⭐ Làm bài tập cần pause video, tự nghĩ và làm bài tập trước, rồi mới xem đáp án
⭐ Xem hiểu hết video không có nghĩa là bạn đã biết code. Vì vậy các bạn đừng vội xem nhanh và nhiều video trong 1 ngày. Các bạn có thể thực hiện theo công thức bên dưới:
1. Xem video, khoảng 5 - 10 phút thì dừng lại để luyện tập
2. Tóm tắt những kiến thức trong 5-10 phút vừa xem theo cách bạn dễ nhớ
3. Tắt video, code lại những gì đã học trong video (không được mở video tham khảo, chỉ nhìn vào bản tóm tắt để làm, nếu không nhớ thì google search)
4. Tự lấy thêm ví dụ để kiểm chứng xem mình đã hiểu đúng về kiến thức chưa.
5. Nếu tự code được bằng chính khả năng của mình thì tiếp tục xem tiếp video.
☝️CHÚ Ý: Thường các video có dài hơn 30 phút đến 1 tiếng thì vẫn phải áp dụng 5 bước trên, mỗi lần xem video chỉ 10 phút rồi phải thực hành lại ngay.
❓ Nếu có bất kì thắc mắc nào về bài giảng có thể để lại comment, mình sẽ trả lời sớm nhất cho các bạn. Mọi người có thể cùng nhau học lập trình, tham gia group bên dưới:
Nodemy là một startup trường học công nghệ đào tạo chuyên sâu về Nodejs - Javascript, được nhóm admin NodeJs Việt Nam - cộng đồng Js lớn nhất Việt Nam thành lập.
✪ Follow Me :
• Fanpage: / nodemy.vn
• Website: www.edmforyou95.com
•Group học tập: / nodemy
•Website: nodemy.vn
✪ Cộng đồng:
• Nodejs Việt Nam: / congd...
• Diễn đàn: nodejs.vn
• Fanpage Nodejs Việt Nam: / nodejs.vn
✪ Các bạn có thể liên hệ trực tiếp với mình qua:
📞 08 666 33 805
🙋♂: / nam.nodemy
Пікірлер: 218
mình thấy rất nhiều channel lập trình tiếng việt có một điểm chung ở người hướng dẫn (mentor), đấy chính là họ quá focus vào code. theo quan điểm cá nhân của mình, thì nếu là với beginners, thì chúng ta nên vừa làm vừa giải thích, tức là bạn có thể css trực tiếp trên trình duyệt, sau đấy copy paste code vào VS code, như vậy nó sẽ trực quan hơn, đúng nghĩa của từ "thực chiến" cho beginners. comment của mình chỉ có ý đóng góp thôi, chứ ko có ý gì cả. dù sao cũng cảm ơn bạn đã làm video cho beginners. tất cả vì một cộng đồng lớn mạnh, giúp đỡ đàn em chúng ta. cheer :v 😁
@Nodemy
2 жыл бұрын
Cảm ơn bạn đã góp ý nhé :D
@hongsonnguyen8617
2 жыл бұрын
nói đúng rồi
@vunguyenviet191
Жыл бұрын
bạn nói hay quá
@thaotranthithu6417
9 ай бұрын
idol
@hoidanit
9 ай бұрын
ahihi :v@@thaotranthithu6417
Đã đăng ký ạ. Quá bổ ích cho người tự học ạ
rất thực tế luôn anh coi khoá anh trình độ css js lên lắm luôn
vid hay lắm anh oi, em học qua html css nay thêm vid của anh có nhiều kinh nghiệm
Mê quá anh ơi
Thanks bác, đã hoàn thành bài 1 sau hơn 1h làm theo bác, khá nhiều kiến thức bổ ích và mới!
@Nodemy
2 жыл бұрын
Cảm ơn bác, sắp tới xong series 30 ngày HTML CSS sẽ còn nhiều series hay ho hơn nữa, subcrible để nhận thông báo mới nhất nhé :))
Vô cùng cảm ơn anh đã làm ra những video như thế này, đây là 1 chuỗi video rất thực tế dành cho những người bắt đầu học lập trình, xin cảm ơn anh và chúc anh sức khỏe.
@Nodemy
2 жыл бұрын
Cảm ơn em, sắp tới xong series 30 ngày HTML CSS sẽ còn nhiều series hay ho hơn nữa, subcrible để nhận thông báo mới nhất nhé :))
hay quá anh ơi, cảm ơn anh rất nhiềuuuu
Đã đăng kí và bật thông báo. Rất thích video kiểu làm các thứ thực tế ntn, qua đó học sẽ hứng thú hơn. Tks b
@beeatechjs2928
2 жыл бұрын
Nếu bạn có thời gian, bạn có thể tham khảo khóa học cắt giao diện thực chiến trên kênh của mình nhé, cảm ơn! Cảm ơn bạn đã đọc.
Cái heart khi hover vào bị cái ảnh xoay đi lên che mất, nên cho .card__heart, .card__cart có z-index: 1 để khắc phục
tuyệt vời anh ơi
rất hay, cảm ơn anh và mong anh có thật nhiều sức khỏe để có thể ra những clip nhưng thế này giúp ae coder
@Nodemy
2 жыл бұрын
Cảm ơn em. Thấy hay thì đăng ký kênh với chia sẻ cho các anh em muốn biết nữa nhé :D
Rất hay và bổ ích. Cảm ơn các anh nhiều. Ủng hộ
@Nodemy
2 жыл бұрын
Cảm ơn em. Thấy hay thì đăng ký kênh với chia sẻ cho các anh em muốn biết nữa nhé :D
Rất hay cảm ơn anh
video của a hay quá
Quá hay anh Nam ơi !!!
@Nodemy
2 жыл бұрын
ok ae follow nhé, sắp tới còn nhiều cái hay hơn :D
45:15 e nghĩ a nên thêm z-index:2 để có thể di chuột dc vào cả 2 icon ạ!! còn lại e thấy video này rất tốt và có ích, mong a ra thêm nhiều video thực chiến chia sẻ kn như này hơn ạ=))
@annguyenthanh1468
2 жыл бұрын
đúng này, trc toi ngồi mò mãi sao hover vào cái heart nó k có pointer mới nhìn ra cái giày nó che mất :v
You are a legend, you helped a lot and you explained it really great!
@thanhatnguyen4295
Жыл бұрын
ok
em xem chỉ biết làm theo chứ chưa hiểu rõ,,, mong a làm các video sau vừa làm vừa giải thích cách dùng của nó để mn hiểu rõ hơn ạ
Mong nodemy ra nhiều series thực chiến hơn nữa ạ :
Rất hữu ích cho người mới bắt đầu ạ. Xin cảm ơn nhiều.
@Nodemy
2 жыл бұрын
Cảm ơn bạn. Thấy hay thì bạn nhớ đăng ký kênh với chia sẻ để nhận thông báo đầu tiên cho các video tiếp theo nhé bạn
Rất bổ ích cho người mới học, cảm ơn anh nhiều ạ
@Nodemy
2 жыл бұрын
Thấy hay thì follow kênh và chia sẻ cho các anh em nhé.
@taitranvananh1229
2 жыл бұрын
oke e
rất cảm ơn video của anh, chúc anh sức khỏe và thành công
@Nodemy
2 жыл бұрын
Cảm ơn em nhé. Thấy hay thì đăng ký kênh với chia sẻ ae cùng học hỏi và trao đổi nhé em
Rất hay và bổ ích, đối với sinh viên như mình thì rất cần những giải thích cơ bản về thao tác cũng như tìm lỗi khi làm như trong video. Respect !
@Nodemy
2 жыл бұрын
Cảm ơn bạn, Thấy anh nhớ đăng ký để nhận thông báo cho video mới nhất nhé
tuyệt quá anh zai
@Nodemy
2 жыл бұрын
Cảm ơn em. Thấy hay thì đăng ký kênh rồi chia sẻ cho anh nhé :D
thích xem a nam dạy nhất
@Nodemy
2 жыл бұрын
Cảm ơn em, nhớ follow và share cho các anh em biết với nhé.
Thề luôn Giảng chi tiết thật sự!
cảm ơn anh nhiều nha rất tốt cho sinh viên mới lập trình ạ
@Nodemy
2 жыл бұрын
Cảm ơn em, sắp tới xong series 30 ngày HTML CSS sẽ còn nhiều series hay ho hơn nữa, subcrible để nhận thông báo mới nhất nhé :))
tuyetj vời ,hihihi
video rất hay
@Nodemy
2 жыл бұрын
Cảm ơn em, sắp tới xong series 30 ngày HTML CSS sẽ còn nhiều series hay ho hơn nữa, subcrible để nhận thông báo mới nhất nhé :))
em cảm ơn nhiều!
video hay quá ạ, cảm ơn a nhiều
@Nodemy
2 жыл бұрын
Thanks em nhé, Chăm chỉ cày hết 30days này là lên tay ngay em nhé
hay qua anh, em moi fl roi do. mong anh ra nhieu kien thuc bo ich hon ^^
@Nodemy
2 жыл бұрын
Cảm ơn em. Thấy hay thì với chia sẻ cho các anh em muốn biết nữa nhé :D
cảm ơn thầy rất nhiều
Hehe chào anh nhé, bổ ích lắm ạ
@Nodemy
2 жыл бұрын
Thấy hay thì follow với các anh em khác nhé.
hayyy
Vô tình thấy video hay 🥳
@Nodemy
2 жыл бұрын
Cảm ơn bạn, thấy hay nhớ đăng ký kênh để ủng hộ đội ngũ ra nhiều video chủ đề mới nữa nhẽ bạn
Thank you for sharing this tutorial
hay qua
Tố chất sư phạm đấy bạn! Vua làm vua giải thích như này dễ hiểu
@Nodemy
2 жыл бұрын
Cảm ơn bạn nhé :D
Rất hay bác ạ
@Nodemy
2 жыл бұрын
Cảm ơn bác, thấy hay nhớ đăng ký kênh để ủng hộ mình ra nhiều video chủ đề mới nữa nhé bạn
anh dạy dễ hiểu và video em thấy hay lắm ạ😁😁
@Nodemy
Жыл бұрын
thank em nhé, subcrible kênh để đón chờ nhiều video hay hơn nữa nhé
Hay qua a oi
@Nodemy
2 жыл бұрын
ok em ơi , subcrible nhận video mới nhé :D
Cảm ơn bác nhiều !!
@Nodemy
2 жыл бұрын
Cảm ơn bác, sắp tới xong series 30 ngày HTML CSS sẽ còn nhiều series hay ho hơn nữa, subcrible để nhận thông báo mới nhất nhé :))
em cảm ơn anh rất nhiều, video rất hay
@Nodemy
2 жыл бұрын
Cảm ơn em, thấy hay nhớ đăng ký kênh để ủng hộ anh ra nhiều video chủ đề mới nữa nhẽ bạn
Nice
rất cảm ơn anh rất hay và chi tiết
@Nodemy
Жыл бұрын
sắp ra mắt thêm về reactjs nhé ae
xịn anh ạ. em đang thiêu thực chiến.
@Nodemy
2 жыл бұрын
Cảm ơn em, đăng ký kênh để khi nào a ra video mói sẽ có thông báo nhé.
bổ ích quá ạ
@Nodemy
2 жыл бұрын
Ok, anh thấy hay thì subcrible kênh nhé :3
Good
😍
hay ah
@Nodemy
2 жыл бұрын
Cảm ơn b, sắp tới xong series 30 ngày HTML CSS sẽ còn nhiều series hay ho hơn nữa, subcrible để nhận thông báo mới nhất nhé :))
bữa sau anh làm video nhớ phóng to chữ nha anh,em nhìn mà đâu mắt luôn ý
The first video I've found wNice tutorialch makes production seem accessible, thanks!
cảm ơn anh nhiều ạ
@Nodemy
2 жыл бұрын
Cảm ơn em, thấy hay nhớ đăng ký kênh để ủng hộ anh ra nhiều video chủ đề mới nữa nhẽ bạn
Thanks bạn
@Nodemy
2 жыл бұрын
Cảm ơn bạn, sắp tới xong series 30 ngày HTML CSS sẽ còn nhiều series hay ho hơn nữa, subcrible để nhận thông báo mới nhất nhé :))
Cảm ơn a rất nhiều
@Nodemy
2 жыл бұрын
Cảm ơn em, sắp tới xong series 30 ngày HTML CSS sẽ còn nhiều series hay ho hơn nữa, subcrible để nhận thông báo mới nhất nhé :))
@danhthanh6527
2 жыл бұрын
@@Nodemy dạ ok anh, em sẽ luôn theo dõi và ủng hộ anh
hay quá, để em học xong cơ bản em qua học với anh :v
@Nodemy
2 жыл бұрын
Cảm ơn em. Thấy hay thì đăng ký kênh với chia sẻ cho các anh em muốn biết nữa nhé :D
hay
@Nodemy
2 жыл бұрын
Cảm ơn b, sắp tới xong series 30 ngày HTML CSS sẽ còn nhiều series hay ho hơn nữa, subcrible để nhận thông báo mới nhất nhé :))
anh oi.. anh có thể làm cái hover mà khi di chuột vào thì cả tilte, prize, size, color, action đều transition cùng lúc được ko anh, vì em thấy nó transaction riêng đó ạ..
good good
@Nodemy
2 жыл бұрын
Thấy hay thì follow với các anh em khác nhé.
anh ơi cho em hỏi là khi e thêm phần margin cho phần card thì phần background trên phần card k có màu j cả ạ, mà e làm giống anh ạ
Cảm ơn video của a ạ , chúc a thành công trong cuộc sống nha , a có mở dạy lớp học FE hay BE k ạ
@Nodemy
2 жыл бұрын
Anh có em nhé. anh có lớp sắp khai giảng luôn. Em nhắn qua đây anh tư vấn kĩ hơn nhé facebook.com/nam.nodemy
bá quá
@Nodemy
2 жыл бұрын
Cảm ơn em. Thấy hay thì đăng ký kênh với chia sẻ cho các anh em muốn biết nữa nhé :D
anh dạy khá hay, mà em góp ý là a để font chữ to lên a nhé
@Nodemy
2 жыл бұрын
ok em ơi, anh cảm ơn em nhé, nhất định sẽ tăng size chữ :D
Cho em hỏi là tại sao khi mình linear vào thẻ body thì nó phủ màu cả trang nhưng kích thước của thẻ body thì không bao gồm phần thẻ card margin lên phía trên ạ
I hope you get what you're looking for!
Bạn ơi cho mình hỏi thêm là khi hover nhưng thả ở phần color, size, button thì nó bị giựt giựt chỗ này có cách fix nào hiệu quả không ạ
Có 1 lưu ý nho nhỏ là lần sau a có thê quay phần code cho chữ nó to hơn tý chứ nhìn thế này hơi nhỏ nha a :)) cảm ơn vì video
@Nodemy
2 жыл бұрын
Ok bạn, bên mình đã set up quay chữ to hơn rồi
a chia đôi màn hình chữ nhỏ quá em k thấy rõ a ơi,nhìn lâu mỏi mắt quá
Hi ad, cái link bài mẫu xem thế nào vậy. Thanks.
a ơi cho em hỏi: e muốn là khi mình click vào 1 img sau đó hiện ra product-card thì làm ntn ạ với lại có nhiều sản phẩm mà dùng nhiều product-card như vậy thì có vẻ không ổn. Anh chỉ e cách với ạ
e ngu cực chỗ frontend tks a nhìu.
@Nodemy
2 жыл бұрын
OK em nhé, subcrible nhé, nhiều video hay ho hơn nữa sắp ra mắt r
Lấy image chiếc giày đó ở đâu vậy ạ. Giúp em với >
anh lấy ảnh nền trong suốt ở đâu v ạ?
anh có thể gửi link cái ảnh và cái web gốc trên video để mình tự làm dc ko ạ
có cách nào để code trong vscode thành web riêng k a
Cho mình xin hỏi chút, trường hợp bên dưới card có phần tử khác thì phần size, color, action đẩy xuống dưới như video hướng dẫn thì nó có chiếm khoảng trống và đẩy phần tử bên dưới lệch xuống không ạ? Xin cảm ơn!
@Nodemy
2 жыл бұрын
Nếu bị đẩy xuống, thì nên cho .card thêm overflow hidden để tránh ảnh hướng đến cái khác,
@nguyenxuanquyet7645
2 жыл бұрын
@@Nodemy nhưng như vậy cái giày cũng bị ẩn ạ
để margin_top: 150px cho size thì khi hover vào vị trí đó nó cũng thực hiện, hover vào bên ngoài cái sản phẩm mà nó cũng thực hiện hành vi thì sai rồi anh ơi,
a ơi sao e làm 2 cái biểu tượng heart với cart nó ko vào ô đó mà nó nằm ở ngoài v a
And I recomnd starting with LMMS instead of spending 0 and not really know what your getting into. LMMS is free and I've been
anh ơi sao em bỏ ảnh vào làm theo anh mà ko hiện ảnh ạ
Đã sụp rai :v
@Nodemy
2 жыл бұрын
Sụp rai rồi thì chia sẻ cho mình với nhé :D
Cảm ơn anh rất nhiều, video rất hay, nhưng mà anh ơi, ảnh chiếc giày đấy anh cắt như thế nào vậy. Em thử dùng một ảnh khác thì bị lỗi luôn anh ạ. Mong a giải đáp :D
@Nodemy
2 жыл бұрын
ok em ơi, e vào trong group zalo zalo.me/g/yhdkef092 để được giải đáp nhé
cho mình hỏi chỗ hover mấy thẻ size, color ấy, tại sao lại phải dùng visibility: hidden khi mà dùng opacity thôi là đủ làm đc như file gốc rồi
@dochien1863
2 жыл бұрын
Opacity chỉ làm mờ đi thôi, thực tế nó vẫn nằm ở đấy
@Nodemy
2 жыл бұрын
Chúng t có thể dùng visibility : hidden cho chắc cú k bị bất kì click nào ảnh hưởng. Thường hidden sẽ kéo theo pointer-event: none .
@_PhanSiHoang
2 жыл бұрын
visibility : hidden - ẩn item, item bị ẩn ko thể click vào dc - không hoạt động khi kết hợp với thuộc tính transition. opacity: 0 - làm mờ item, làm mờ nên có thể bị click trúng - hoạt động với transition. kết hợp cả 2 để làm item có hiệu ứng ẩn hiện mượt
Group học tập phải đăng ký mới vào được à anh
@Nodemy
2 жыл бұрын
không phải đâu e vào thoải mái em nhé: zalo.me/g/yhdkef092
anh cho em hỏi các khoá học trên nodemy chỉ có tầm 20 bài 1 khoá như vậy hay chưa ra hết vậy anh
@CuongNguyen-yh9dh
2 жыл бұрын
team đăng bổ sung thêm nha bạn
@Nodemy
2 жыл бұрын
Sẽ bổ xung liên tục em nhé
Bạn nên cho thêm link download ảnh sử dụng trong video
@Nodemy
2 жыл бұрын
Thanks bạn đã góp ý
sao web vao k dc r anh oi
tưởng dành cho người mới học, mong bạn có thể bỏ thêm chút thời gian để giải thích các đoạn như thẻ con dùng absolute và thẻ cha dùng relative, tạo sao lại phải dừng như vậy và nó có tác dụng gì dc k ạ
@dunguyen4026
2 жыл бұрын
@ relarive là cố định nó trong phạm vi đó, absolute k thể tràn ra ngoài relative, là thèn con nó chỉ nằm trong thèn cha, nếu k có relative thì thèn con nó nằm bên ngoài thèn cha nha bạn
@tracoxanh
2 жыл бұрын
@@dunguyen4026 mình cảm ơn
@Nodemy
2 жыл бұрын
Cái này là kiến thức căn bản rồi em, về absolute vs relative em có thể tìm hiểu các khoá căn bản về css trên nodemy hoặc có thể tham gia khoá html css js bài bản được giảng viên hướng dẫn để hiểu rõ hơn em nhé.
a ơi cho e hỏi lỗi này sửa kiểu gì ạ :Bad CMake executable "". Is it installed or settings contain the correct path (cmake.cmakePath)?
@Nodemy
2 жыл бұрын
em gặp lỗi này ra sao em?
@Nodemy
2 жыл бұрын
e vào group này nhé, để đc giải đáp:zalo.me/g/yhdkef092
Anh nên cải thiện gõ phím. Xem rất khó chịu luôn
delete notes....and I literally don’t know what’s happening in the soft roll...tNice tutorials problem seems to be unresolvable...I have tried sooo
anh có thể gắn kèm link tài nguyên như img như trong video được k ạ??
@Nodemy
2 жыл бұрын
www.nodemy.vn/projects/html-css-js/product-card/Nike%20Zoom%20KD%2012.png đây em nhé
Mình từng làm bên a này rồi nè , thiết kế , tạo , mở w e b rất yên tâm cứ nhờ phây búc Moganit xong trong 1 nốt nhạc ❤❤❤️
em muốn đưa ảnh cá nhân vào thẻ đó và ảnh tự động căn chỉnh khi zoom màn hình thì phải làm như nào ạ em đag muốn tự làm 1 web cá nhân để xem ảnh video của mình
@Nodemy
2 жыл бұрын
Cảm ơn em, thấy hay nhớ đăng ký kênh để ủng hộ anh ra nhiều video chủ đề mới nữa nhẽ bạn
anh ơi cho em hỏi là làm xog cái này ròi có cách nào để lấy link cho người khác coi cái mình làm ra dược ko anh
@Nodemy
2 жыл бұрын
À có đấy em, em sử dụng git và github PAGE, lên youtube tìm hiểu thêm về git nhé
Cho em xin img chiếc giầy của anh được không ạ
Trời ơi, mình mất bao nhiêu thời gian công sức mà chả được cái gì có lần Nhờ phây búc Moganit ✨tạo cho 1 cái giờ dung khỏe re, biết ơn rất là nhiều luôn. ✨✨✨
chỗ .card_heart, .card_cart mk cho cursor: pointer rồi mà sao cái cart thì được bàn tay còn heart thì không được v nhỉ?
@Nodemy
2 жыл бұрын
Bạn check thử trong inspect xem đã chuẩn chưa nhé