Với hơn 100 videos trong khoá học evondev sẽ dạy các bạn đi từ kiến thức cơ bản nhất cho đến nâng cao thông qua các videos kèm bài tập mỗi chương. Ngoài ra evondev còn chia sẻ thêm cho các bạn những kiến thức liên quan bổ sung như cách tư duy, định hướng, phân tích giao diện, cách dùng phần mềm code hiệu quả, cách cải thiện mắt thẩm mỹ UI UX…Từ đó các bạn có thể tự tay code các giao diện từ A-Z với kiến thức về HTML CSS đã học mà không cần phải dùng bất kỳ thư viện nào.
Nội dung bài viết
Khóa học tự học thiết kế website hiệu quả với khoá học HTML CSS từ cơ bản tới nâng cao cho người mới
Bạn sẽ nhận được
- Nắm vững chắc các kiến thức cơ bản về HTML, các thẻ trong HTML – HTML5, cách đặt tên theo chuẩn BEM, học cách sử dụng Class Id và các attributes khác của HTML một cách chỉn chu từ đầu
- Học về tư duy, định hướng học, cách tự học tốt, cách luyện tập cho mau lên trình
- Nắm vững kiến thức về dàn giao diện với Flexbox thông qua ví dụ thực tế
- Học được cách phân tích thiết kế cho đến khi hoàn thiện giao diện
- Sử dụng thẻ HTML đúng đắn, lúc nào dùng thẻ này lúc nào dùng thẻ kia
- Hiểu về Responsive để xử lý giao diện ở nhiều loại màn hình một cách tốt nhất có thể
- Học, tìm hiểu và sử dụng SASS toàn tập để viết function, mixins, sử dụng biến, lồng code để hỗ trợ cho việc code CSS một cách nhanh nhất
- Biết thêm các công cụ, tiện ích, các trang web bổ ích hay hỗ trợ công việc một cách tốt nhất để nâng cao hiệu suất làm việc
- Nắm vững CSS Selectors và Combinators để làm chủ các bộ chọn trong CSS
- Và rất nhiều điều, kiến thức bổ ích khác đang chờ đợi các bạn
Nội dung học tập khóa học tự học thiết kế website hiệu quả với khoá học HTML CSS từ cơ bản tới nâng cao cho người mới
Đăng ký khóa học tại đây:
Chương 1: Kiến thức HTML cần nắm vững
- Bài 1: Giới thiệu khoá học
- Bài 2: Thiết lập code editor cơ bản
- Bài 3: Cấu trúc một file HTML cơ bản như thế nào?
- Bài 4: Các thẻ HTML cơ bản nên biết (phần 1)
- Bài 5: Các thẻ HTML cơ bản nên biết (phần 2)
- Bài 6: Thẻ Inline và thẻ Block khác nhau như thế nào?
- Bài 7: Sự khác nhau giữa Class và Id
- Bài 8: BEM là gì ? Tìm hiểu về BEM toàn tập
- Bài 9: Thực hành phân tích giao diện cơ bản với BEM
- Bài 10: Bài tập chương 1
- Bài 11: Giải bài tập chương 1
- Bài 12: Nắm vững Emmet cơ bản trong VSCode
Chương 2: Kiến thức CSS cơ bản phần 1
- Bài 13: CSS reset là gì ? Tại sao phải dùng reset CSS?
- Bài 14: Cấu trúc của 1 đoạn code trong CSS như thế nào?
- Bài 15: Tìm hiểu thuộc tính color, các giá trị về màu sắc cần nắm vững
- Bài 16: Nắm vững kiến thức về kích thước trong CSS
- Bài 17: Làm hình nền với các thuộc tính về background
- Bài 18: Các đơn vị trong css nên biết
- Bài 19: Đơn vị em và rem khác nhau như thế nào?
- Bài 20: Thuộc tính về border cơ bản
- Bài 21: Nắm rõ thuộc tính margin
- Bài 22: Hiểu về thuộc tính padding
- Bài 23: Tìm hiểu về box-sizing trong CSS
- Bài 24: Tìm hiểu thuộc tính display
- Bài 25: Các thuộc tính liên quan tới Font cơ bản
- Bài 26: Các thuộc tính liên quan tới chữ bạn cần biết
- Bài 27: Tìm hiểu thuộc tính cho hình ảnh
- Bài 28: Pseudo là gì ? Các pseudo cơ bản người mới học nên biết
- Bài 29: Bài tập chương 2 (Phần 1)
- Bài 30: Bài tập chương 2 (phần 2)
Chương 3: Kiến thức CSS cơ bản phần 2
- Bài 31: Cách làm hình nền gradient, chữ gradient trong CSS
- Bài 32: Hiển thị 2 hình nền với background-image
- Bài 33: caniuse là gì ? Và tại sao bạn nên biết
- Bài 34: Sự khác nhau giữa 3 thuộc tính opacity: 0, display:none, visibility:hidden
- Bài 35: Tìm hiểu về shadow trong CSS
- Bài 36: Sử dụng biến trong CSS như thế nào?
- Bài 37: Hiểu rõ về độ ưu tiên trong CSS, xác định độ ưu tiên trong CSS đơn giản với VSCode
- Bài 38: Nắm vững kiến thức về child selectors
- Bài 39: Nắm vững kiến thức về type selectors
- Bài 40: Thành thạo combinators trong CSS
- Bài 41: Tìm hiểu thêm các selectors nâng cao
- Bài 42: Nắm vững thuộc tính transition cơ bản
- Bài 43: Bài tập chương 3
Chương 4: Kiến thức CSS nâng cao
- Bài 44: Thuộc tính transform để làm gì ? Tìm hiểu các giá trị hay dùng của transform
- Bài 45: Tìm hiểu thuộc tính position relative
- Bài 46: Master thuộc tính position absolute
- Bài 47: Hiểu rõ position fixed hoạt động
- Bài 48: Thực hành với thuộc tính position #1
- Bài 49: Thực hành với thuộc tính position #2
- Bài 50: Thực hành với thuộc tính position #3
- Bài 51: Thực hành với thuộc tính position #4
- Bài 52: Hiểu và nắm tốt pseudo :before vs :after khó nhằn trong CSS
- Bài 53: Thực hành với pseudo before và after #1
- Bài 54: Thực hành với pseudo before và after #2
- Bài 55: Thực hành với pseudo before và after #3
- Bài 56: Thực hành với pseudo before và after #4
- Bài 57: Tại sao before và after quan trong và lưu ý khi làm với việc với thuộc tính transform
- Bài 58: Animation là gì ? Tìm hiểu và nắm kiến thức về animation cơ bản
- Bài 59: Thực hành với animation #1
- Bài 60: Thực hành với animation #2
Chương 5: Flexbox toàn tập
- Bài 61: Flexbox là gì ? Giới thiệu về Flexbox
- Bài 62: Flexbox toàn tập #1
- Bài 63: Flexbox toàn tập #2
- Bài 64: Flexbox toàn tập #3
- Bài 65: Các thủ thuật chia layout hay mà bạn nên biết khi dùng flexbox
- Bài 66: Cách vẽ tam giác bằng CSS và cách nó hoạt động
- Bài 67: Sass là gì ? Giới thiệu và cài đặt
- Bài 68: Tìm hiểu và nắm cơ bản kiến thức về Sass cho người mới
- Bài 69: Các lỗi hay gặp khi cài đặt Sass và cách khắc phục
- Bài 70: Thực hành code giao diện Dropdown #1
- Bài 71: Thực hành code giao diện Dropdown #2
- Bài 72: Thực hành code giao diện Dropdown #3
- Bài 73: Thực hành code giao diện đơn giản số 1 với flexbox #1
- Bài 74: Thực hành code giao diện đơn giản số 1 với flexbox #2
- Bài 75: Thực hành code giao diện đơn giản số 1 với flexbox #3
- Bài 76: Responsive là gì ? Giới thiệu về Responsive toàn tập
- Bài 77: Thực hành code giao diện đơn giản số 1 sử dụng responsive
- Bài 78: Thực hành code giao diện đơn giản số 2
- Bài 79: Thực hành code giao diện đơn giản số 3
- Bài 80: Tìm hiểu thêm các thuộc tính khác của flexbox
- Bài 81: Thực hành code giao diện nâng cao phần 1
- Bài 82: Thực hành code giao diện nâng cao phần 2
- Bài 83: Thực hành code giao diện nâng cao phần 3
- Bài 84: Thực hành code giao diện nâng cao phần cuối
Chương 6: Các thẻ HTML về Form, Table
- Bài 85: Tìm hiểu các thẻ về Form phần 1
- Bài 86: Tìm hiểu các thẻ về Form phần 2
- Bài 87: Hướng dẫn cách làm custom checkbox
- Bài 88: Hướng dẫn cách làm custom radio
- Bài 89: Hướng dẫn cách làm custom input file
- Bài 90: Hướng dẫn cách làm custom checkbox toggle
- Bài 91: Hướng dẫn code hiệu ứng cho input, textarea, button
- Bài 92: Thực hành code giao diện form tổng hợp phần 1
- Bài 93: Thực hành code giao diện form tổng hợp phần 2
- Bài 94: Thực hành code giao diện form tổng hợp phần 3
- Bài 95: Thực hành code giao diện form tổng hợp phần cuối
- Bài 96: Tìm hiểu các thẻ về bảng
- Bài 97: Hướng dẫn code giao diện bảng phần 1
- Bài 98: Hướng dẫn code giao diện bảng phần 2
- Bài 99: Hướng dẫn làm responsive cho bảng
Chương 7: Các kiến thức bổ sung
- Bài 100: Tìm thiết kế ở đâu để tập luyện kỹ năng HTML CSS ?
- Bài 101: Chia sẻ các từ tiếng Anh hay gặp khi đặt tên với BEM
- Bài 102: Code siêu nhanh với VSCode Custom Snippets
- Bài 103: Làm sao cải thiện con mắt thẩm mỹ
- Bài 104: Một số kênh youtube hay về HTML CSS
- Bài 105: Một số tài khoản Instagram hay mà các bạn nên theo dõi
- Bài 106: Các extensions bổ ích mà bạn nên dùng
- Bài 107: Chia sẻ kinh nghiệm làm sao code tốt hơn
- Bài 108: Các thuật ngữ trong ngành web mà bạn nên biết
- Bài 109: Codepen là gì ? Và vì sao bạn nên biết
- Bài 110: Các kỹ năng khác nên có cho một Developer
- Bài 111: Tìm hiểu thêm vài kiến thức về CSS khác
- Bài 112: Làm sao để tuỳ biến giao diện cho WordPress với CSS cơ bản
- Bài 113: Vẽ vời với sức mạnh của thuộc tính box-shadow
- Bài 114: Hướng dẫn làm hình nền chéo với transform skew
- Bài 115: Xử lý hình nền phức tạp hơn với thuộc tính clip-path
- Bài 116: Tìm hiểu cách làm gradient cho border
- Bài 117: Phân tích một Animation đường tròn hoạt động
- Bài 118: Tìm hiểu backdrop-filter và cách làm responsive cho video theo tỉ lệ 16:9
- Bài 119: Lời cám ơn, chia sẻ cuối khoá, spoil sản phẩm sắp tới cực chất
Q&A thông tin khoá học
Tôi có được hỗ trợ khi học không ?
Tối muốn người dạy hỗ trợ 1-1 có được không ?
Học xong khoá này thì tôi có thể làm được gì ?
Tôi muốn học cắt giao diện chỉn chu từ a-z thì nên học ở đâu ?
Thông tin thêm về HTML và CSS
CSS là gì?
CSS là viết tắt của Cascading Style Sheets. Đây là một ngôn style sheet được sử dụng để mô tả giao diện và định dạng của một tài liệu viết bằng ngôn ngữ đánh dấu (markup). Nó cung cấp một tính năng bổ sung cho HTML. Nó thường được sử dụng với HTML để thay đổi phong cách của trang web và giao diện người dùng. Nó cũng có thể được sử dụng với bất kỳ loại tài liệu XML nào bao gồm cả XML đơn giản, SVG và XUL.
HTML là gì?
HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, vâng vâng.
Kinh nghiệm học html css?
Thời đầu mới học lập trình web muốn tiết kiệm tiền nên tôi cũng lên google để tìm kiếm các chia sẻ miễn phí ở Việt Nam và cả nước trên thế giới.
Với thời gian đầu nắm được những kiến thức mới cảm thấy vô cùng phấn khích tuy nhiên sau một khoảng thời gian khá dài tự tìm hiểu tôi nhận ra những tài liệu về lý thuyết các thẻ html, các thuộc tính thì nhiều nhưng về việc áp dụng nó, phối hợp nó để tạo ra các sản phẩm thực tế nó rất hiếm.
Tài liệu học html css tiếng anh
Nếu bạn có khả năng tiếng anh thì tôi giới thiệu bạn 2 website tôi thường hay đọc ở giai đoạn đầu nó khá chuẩn, bạn có thể đọc để nắm kiến thức nền tảng đó là w3schools.com , freecodecamp.org .
Cách học trên những website này khá đơn giản mình đọc để hiểu cấu trúc thẻ và thử chạy code để xem tác dụng thẻ và cách định nghĩa thẻ.
Học kỹ năng tạo ra sản phẩm và đi kiếm tiền
Việc để biết mặt thẻ html và các thuộc tính Css rời rạc nó chưa đủ. Điều quan trọng hơn bạn cần biết cách phối hợp nó lại tạo ra các website hoàn chỉnh bằng html css từ một bản thiết kế photoshop có sẵn.
Đây cũng là kỹ năng mà bạn sẽ áp dụng sau này khi đi làm ở các công ty với vị trí chuyển psd thành html css. Chính vì vậy ở bước này bạn cần học để có thê tạo ra cho mình những sản phẩm demo chất lượng. Một mặt nó giúp mình gắn kết các kiến thức, mặt khác nó là sản phẩm giúp bạn chứng minh năng lực sau này khi đi tuyển dụng kiếm việc làm.
Vậy câu hỏi đặt ra: Học cách tạo ra sản phẩm bằng cách nào?
Bạn có thể tìm kiếm các bài chia sẻ sâu hơn để tạo ra các chức năng website như : Layout website, menu website…
Những nội dung này sẽ giúp bạn có được những kinh nghiệm để tạo ra những chức năng trên website của mình từng bước một và bạn cũng có thể tìm nó miễn phí qua google và youtube.
Tuy nhiên nó có nhược điểm mất rất nhiều thời gian và mọi thứ không chuẩn bị bạn đọc nhiều tài liệu khác nhau các cách viết khác nhau dẫn đến mình không biết thế nào để code chuẩn.
Vậy cách học tối ưu là gì?
Đối với bản thân tôi chỉ sau khá nhiều năm đi làm tôi mới hoàn thiện được kỹ năng xây dựng giao diện website của mình. Với hàng trăm dự án qua tay mình mới khám phá ra rất nhiều thứ hay ho từ học xây dựng giao diện website với html css mang lại.
Đây cũng là một mảng rất quan trọng trong website nhưng rất nhiều người cảm thấy nó khó và bỏ qua nó và chịu cảnh tạo ra những website có giao diện rất xấu, cấu trúc code html css thì rất lộn xộn không hệ thống.
Lời khuyên giành cho bạn nếu bạn tìm được cho mình một người đã có kinh nghiệm đi làm thực tế mình giao lưu và học hỏi từ họ là tốt nhất. Thay vì mình bỏ thời gian tự học mò mẫm mất thời gian bạn có thể học theo lộ trình và nắm được kinh nghiệm thực tế.
