Đang thực hiện
Tên đăng nhập
Mật khẩu
 
Hoặc đăng nhập bằng:
Nhập lại mật khẩu

Trang chủ Tin tổng hợp
Tin tổng hợp

Thực hành 9 Dự án Web tĩnh với HTML / CSS qua video giúp nâng cao kỹ năng Frontend

Cập nhật: 19/09/2019 Lượt xem: 4287
Chúng ta có thể làm điều này bằng cách làm 9 dự án web tĩnh đơn giản dưới đây. Bạn sẽ bất ngờ về kỹ năng của mình khi hoàn thành 9 dự án Web HTML, CSS này đấy.
Một khi bạn đã nghiên cứu về lập trình Web, cách tốt nhất để tìm hiểu nó là tự tay xây dựng một số trang web, trước tiên là web tĩnh với HTML CSS.

Tuy nhiên, khi học HTML, CSS cơ bản bạn sẽ vẫn còn cảm thấy khó khăn để xây dựng nên một trang web tĩnh.

Chính vì vậy, lúc này điều bạn cần là có một số hướng dẫn lắp ghép từng bước và một ít thủ thuật, kinh nghiệm để dễ dàng hoàn thành được dự án web tĩnh từ đầu đến cuối, và cách tốt nhất là nhìn cách người ta làm và làm theo để rèn luyện kỹ năng cho bản thân mình.

Thực hành xây dựng 9 dự án Web tĩnh với HTML và CSS
 
Thực hành xây dựng 9 dự án Web tĩnh với HTML và CSS
 

Chúng ta có thể làm điều này bằng cách làm 9 dự án web tĩnh đơn giản dưới đây. Bạn sẽ bất ngờ về kỹ năng của mình khi hoàn thành 9 dự án Web HTML, CSS này đấy.
 

1. Làm dự án web tĩnh để làm quen với HTML5

Một trang web HTML5 thân thiện với thiết bị di động được xây dựng cho một một công ty thiết kế web hư cấu.

 

 

Thực hành dự án web tĩnh với HTML5

 

2. Dự án myTunes kết hợp kỹ năng HTML5 và CSS3


Trang web HTML5 thân thiện với thiết bị di động được cho dịch vụ Streaming. Đây là dựa trên mô hình trang web iTunes về bố cục và nội dung. Nó sử dụng HTML5, CSS3 và một chút jQuery. Trang web này được tạo hướng dẫn bởi video trên youtube của Traversy Media.

 

Thực hành dự án web tĩnh với HTML5 và CSS3
 

3. Thực hành dự Án website với hiệu ứng blur

 

Trang Landing Page thân thiện với thiết bị di động với hiệu ứng Blur. Được sử dụng hệ thống lưới, media queries, hiệu ứng chuyển tiếp.

 

 

Thực hành dự án web tĩnh với hiệu ứng blur
 

4. Thực hành Xây dựng một trang web Ảnh

 

Một trang web responsive dành cho những ai yêu thích nhiếp ảnh. Sử dụng phương pháp Mobile First để thực hiện và chỉ với ngôn ngữ HTML5 và CSS3.

 

 

Thực hành xây dựng một trang web tĩnh cho nhiếp ảnh
 

5. Thực hành xây dựng trang web với HTML5, CSS3 và sử dụng một chút Flexbox
 

Một trang Landing page nhỏ đơn giản chỉ với HTML5 và CSS3. Chúng ta sẽ học cách sử dụng một chút flexbox để dàn layout cho website.

Hãy làm theo video hướng dẫn để rèn luyện kỹ năng bạn nhé.

 



Thực hành xây dựng Website với HTML5, CSS3, Flexbox 

 

6. Làm lại trang đăng nhập của Pluralsight
 

Một bản trang đăng nhập của trang Pluralsight với HTML5 và CSS3. Chúng ta sẽ sử dụng một chút flexbox. Sử dụng Flexbox để tạo kiểu và Media Queries để tạo Responsive (Đây là cách responsive thuần nên các bạn cố gắng rèn luyện). Chi tiết hướng dẫn code từng bước trong youtube Traversy Media này.

 

 

Làm lại trang đăng nhập của Pluralsight

 

7. Xây dựng trang web với hiệu ứng Prallax

 

Việc triển khai một trang web Prallax với hiệu ứng cố định ảnh khi cuộn bằng HTML và CSS. Hiệu ứng Prallax khá thú vị và cũng có thư viện Prallax.js trên Github sẵn sàng cho bạn tải về. Tuy nhiên, trước tiên hãy cứ làm theo những hướng dẫn trong video đã.

 



Xây dựng trang web với hiệu ứng Prallax
 

8. Xây dựng trang web với Background Video Full màn hình

 

Chắc bạn đã từng thấy nhiều trang web chạy video làm nền rất là thú vị. Và thực hiện trang web tương tự như thế cũng chỉ với HTML và CSS mà thôi.

 

 

Xây dựng trang Web có Video làm Background Full màn hình

 

9. Xây dựng trang web Responsive với CSS Grid


Một website theo phong cách tiếp cận "Mobile First" sử dụng CSS Grid để bố trí layout. Chúng ta đang sử dụng kỹ thuật hiện đại bao gồm cả đơn vị tương đối, Media Queries và một chút Flex.
 



Xây dựng trang web Responsive với CSS GRID

 

Lời kết

 

HTML CSS rất là thú vị đúng không nào. Mình chắc chắn rằng nếu bạn làm theo hết 9 dự án HTML, CSS này, level lập của bạn sẽ khác biệt hẳn so với lúc bạn chỉ học những khái niệm, cú pháp thông thường.

Làm dự án còn giúp bạn có một cái nhìn khác về việc phân tích và lựa chọn giải pháp để thực hiện. Thậm chí kinh nghiệm sửa lỗi cũng tăng lên khá nhiều.

HTML, CSS là 2 thành phần cốt lõi, không thể thiếu của mảng Frontend. Nắm giữ được 2 ngôn ngữ này thì tìm kiếm việc làm hay tiếp tục theo đuổi sự nghiệp lập trình Frontend là không có gì xa vời cả.

Chúc bạn thành công!!!

Tư vấn viên 1: Nguyễn Thu Huyền
Tư vấn viên 2: Thu Huyền
Tuyển sinh lập trình viên quốc tế - MMS new vision
Khóa học C&B Excel - Trần Văn Hải