Học viết mã luôn thú vị và vui vẻ đối với mọi người và khi bước chân vào thế giới lập trình, hầu hết mọi người đều bắt đầu với HTML và CSS, thứ dễ dàng nhất. Hành trình viết mã của mọi người mới bắt đầu ở giao diện người dùng đều bắt đầu với hai khối xây dựng cơ bản này và bạn cần phải sáng tạo khi thiết kế một ứng dụng đẹp mắt.
Ban đầu, những người mới bắt đầu thích tạo các nút, thêm liên kết, thêm hình ảnh, làm việc với bố cục và rất nhiều thứ hay ho trong thiết kế web nhưng khi thực hiện một dự án chỉ sử dụng HTML và CSS, họ gặp khó khăn và bối rối không biết nên làm gì. . Xét cho cùng, kiến thức của họ chỉ giới hạn ở HTML và CSS. Dù thế nào đi nữa sau khi học mọi thứ đến một lúc nào đó bạn sẽ nhận ra rằng làm một dự án rất quan trọng để thực hành các kỹ năng HTML và CSS. Bạn cần kiểm tra xem HTML và CSS phối hợp với nhau như thế nào để thiết kế một ứng dụng giao diện đẹp. Vì vậy, câu hỏi đặt ra là bạn có thể xây dựng một số dự án thân thiện với người mới bắt đầu để thực hành mọi thứ bạn đã học…Hãy thảo luận về điều đó.
1. Một trang Tribute
Trang web đơn giản nhất bạn có thể tạo khi mới bắt đầu là trang tưởng nhớ người mà bạn ngưỡng mộ trong đời. Nó chỉ yêu cầu kiến thức cơ bản về HTML và CSS. Tạo một trang web viết về người đó thêm hình ảnh của anh ấy / cô ấy. Trên đầu trang web, thêm hình ảnh và tên của người đó và bên dưới cung cấp bố cục cho các chi tiết còn lại. Bạn có thể sử dụng các đoạn văn, danh sách, liên kết, hình ảnh bằng CSS để tạo cho nó một cái nhìn gốc. Thêm màu nền và kiểu phông chữ phù hợp trên trang web của bạn. Hầu hết các phần bạn có thể tạo bằng HTML nhưng để trông đẹp hơn thì sử dụng một chút CSS. Nhận trợ giúp từ liên kết được cung cấp dưới đây.
- Trang Tribute của tôi
2. Trang web bao gồm biểu mẫu
Các biểu mẫu luôn là một phần thiết yếu của bất kỳ dự án nào và bạn sẽ làm việc với rất nhiều biểu mẫu trong hầu hết các ứng dụng, vậy tại sao bạn không thực hành nó sớm hơn và kiểm tra kiến thức của mình. Khi bạn đã quen thuộc với trường nhập liệu hoặc các thẻ cơ bản trong HTML để tạo biểu mẫu, hãy tạo một dự án bằng cách sử dụng tất cả các thẻ đó. Cách sử dụng trường văn bản, hộp kiểm, nút radio, ngày và các yếu tố quan trọng khác trong một biểu mẫu. Bạn sẽ học cách tạo cấu trúc phù hợp cho trang web trong khi tạo biểu mẫu. Kiến thức về HTML/HTML5 là đủ tốt nhưng bạn có thể sử dụng một chút CSS để làm cho dự án trông đẹp hơn. Nhận trợ giúp từ các liên kết được đưa ra dưới đây.
- Mẫu khảo sát
3. Trang web thị sai
Một trang web thị sai bao gồm các hình ảnh cố định trong nền mà bạn có thể giữ nguyên vị trí và bạn có thể cuộn xuống trang để xem các phần khác nhau của hình ảnh. Với kiến thức cơ bản về HTML và CSS, bạn có thể tạo hiệu ứng thị sai cho trang web. Sử dụng hiệu ứng thị sai trong thiết kế web thực sự phổ biến và nó mang lại giao diện đẹp mắt cho trang web. Hãy thử và chia toàn bộ trang thành ba đến bốn phần khác nhau. Đặt 3-4 hình nền, căn chỉnh văn bản cho các phần khác nhau, đặt lề và phần đệm, thêm vị trí nền và các thành phần và thuộc tính CSS khác để tạo hiệu ứng thị sai. Bạn có thể nhận trợ giúp từ liên kết dưới đây.
- Trang web thị sai
4. Trang đích
Trang đích là một dự án tốt khác mà bạn có thể thực hiện bằng cách sử dụng HTML và CSS nhưng nó yêu cầu kiến thức vững chắc về hai khối xây dựng này. Bạn sẽ sử dụng rất nhiều sáng tạo trong khi tạo trang đích. Bạn sẽ thực hành cách thêm chân trang và tiêu đề, tạo cột, căn chỉnh các mục, chia các phần và rất nhiều thứ. Bạn sẽ phải sử dụng CSS một cách cẩn thận, lưu ý rằng các phần tử khác nhau không trùng lặp với nhau. Bạn cũng sẽ quan tâm đến sự kết hợp màu sắc, phần đệm, lề, khoảng cách giữa các phần, đoạn văn và hộp. Sự kết hợp màu sắc phải phù hợp với nhau cho các phần hoặc nền khác nhau
5. Trang web nhà hàng
Thể hiện kiến thức vững chắc của bạn về HTML và CSS để tạo một trang web đẹp mắt cho một nhà hàng. Tạo bố cục cho nhà hàng sẽ phức tạp hơn một chút so với các ví dụ dự án trước. Bạn sẽ sắp xếp các mặt hàng thực phẩm và đồ uống khác nhau bằng cách sử dụng lưới bố cục CSS. Bạn sẽ thêm giá, hình ảnh và bạn cần tạo cho nó một giao diện đẹp mắt cũng như sử dụng sự kết hợp phù hợp giữa màu sắc, kiểu phông chữ và hình ảnh. Bạn có thể thêm thư viện hình ảnh cho các mặt hàng thực phẩm khác nhau, bạn cũng có thể thêm hình ảnh trượt để nhìn đẹp hơn. Thêm liên kết để chuyển hướng đến các trang nội bộ. Làm cho nó đáp ứng cài đặt chế độ xem, sử dụng truy vấn phương tiện và lưới. Bạn có thể nhận trợ giúp từ liên kết dưới đây.
- Trang web nhà hàng
6. Trang web sự kiện hoặc hội nghị
Bạn có thể tạo một trang tĩnh tổ chức sự kiện hoặc hội nghị. Những người quan tâm đến tham dự hội nghị tạo một nút đăng ký cho họ. Đề cập đến các liên kết khác nhau cho diễn giả, địa điểm và lịch trình ở trên cùng trong phần tiêu đề. Mô tả mục đích của hội nghị hoặc loại người có thể nhận được lợi ích từ hội nghị này. Thêm phần giới thiệu và hình ảnh của diễn giả, chi tiết địa điểm và mục đích chính của hội nghị trên trang web của bạn. Chia trang thành các phần, thêm đầu trang và chân trang hiển thị menu. Sử dụng màu nền thích hợp có thể kết hợp tốt với nhau cho các phần khác nhau. Chọn kiểu phông chữ gốc và màu phông chữ phù hợp với chủ đề của trang web của bạn. Nó yêu cầu kiến thức chuyên sâu về HTML/HTML5 và CSS. Bạn có thể nhận trợ giúp từ liên kết dưới đây.
- trang web sự kiện
7. Trang cửa hàng âm nhạc
Nếu bạn là người yêu âm nhạc, bạn có thể tạo một trang web cho nó. Nó yêu cầu kiến thức về HTML5/CSS3. Thêm một hình nền phù hợp mô tả mục đích hoặc nội dung của trang. Trong phần tiêu đề, thêm các menu khác nhau. Thêm các nút, liên kết, hình ảnh và một số mô tả về bộ sưu tập các bài hát có sẵn. Ở dưới cùng đề cập đến các liên kết để mua sắm, cửa hàng, nghề nghiệp hoặc chi tiết liên hệ. Bạn cũng có thể thêm các tính năng khác trên trang web của mình, chẳng hạn như tùy chọn dùng thử, thẻ quà tặng hoặc đăng ký. Làm cho nó đáp ứng cài đặt chế độ xem hoặc sử dụng truy vấn phương tiện và lưới. Bạn có thể nhận trợ giúp từ liên kết dưới đây.
- trang web sự kiện
8. trang web chụp ảnh
Nếu bạn có kiến thức chuyên sâu về HTML5 và CSS3, bạn có thể tạo trang web chụp ảnh đáp ứng một trang. Sử dụng flexbox và truy vấn phương tiện để đáp ứng. Thêm tên công ty với một hình ảnh [liên quan đến nhiếp ảnh] trên đầu [trang đích]. Bên dưới giới thiệu công việc của bạn khi thêm nhiều hình ảnh. Đề cập đến chi tiết liên hệ của nhiếp ảnh gia ở phía dưới [chân trang]. Thêm một nút để xem công việc của bạn. Nút này sẽ trực tiếp đưa bạn xuống phần hình ảnh. Bạn cần quan tâm đến lề, phần đệm, sự kết hợp màu sắc, cỡ chữ, kiểu chữ, kích thước hình ảnh và kiểu dáng của một nút. Bạn có thể nhận trợ giúp từ liên kết dưới đây.
- Thư viện hình ảnh
9. Danh mục đầu tư cá nhân
Với kiến thức về HTML5 và CSS3, bạn cũng có thể tạo danh mục đầu tư của mình. Giới thiệu các mẫu công việc và kỹ năng của bạn trong danh mục đầu tư với tên và hình ảnh của bạn. Bạn cũng có thể thêm CV của mình vào đó và lưu trữ danh mục đầu tư hoàn chỉnh của mình trên tài khoản GitHub. Trong phần tiêu đề của bạn, hãy đề cập đến một số menu như giới thiệu, liên hệ, công việc hoặc dịch vụ. Ở trên cùng, thêm một trong những hình ảnh của bạn và giới thiệu bản thân ở đó. Bên dưới thêm một số mẫu công việc và cuối cùng [chân trang] thêm thông tin liên hệ hoặc tài khoản mạng xã hội. Bạn có thể nhận trợ giúp từ các liên kết được cung cấp dưới đây.
- danh mục đầu tư đơn giản
- Thư viện danh mục đầu tư
10. Tài liệu kỹ thuật
Nếu bạn có một chút kiến thức về Javascript thì bạn có thể tạo một trang web tài liệu kỹ thuật. Nó đòi hỏi kiến thức về HTML, CSS và javascript cơ bản. Chia toàn bộ trang web thành hai phần. Phía bên trái tạo một menu với tất cả các chủ đề được liệt kê từ trên xuống dưới. Bên phải bạn cần đề cập đến tài liệu hoặc mô tả cho các chủ đề. Ý tưởng là khi bạn nhấp vào một trong các chủ đề ở phần bên trái, nó sẽ tải nội dung ở bên phải. Đối với nhấp chuột, bạn có thể sử dụng tùy chọn dấu trang javascript hoặc CSS. Bạn không cần phải làm cho nó quá cầu kỳ, chỉ cần tạo cho nó một cái nhìn đơn giản và bắt mắt, nó sẽ tốt cho tài liệu kỹ thuật. Bạn có thể nhận trợ giúp từ các liên kết được cung cấp dưới đây.
- Tài liệu kỹ thuật
Liên kết hữu ích. 10 mẹo để thiết kế web hiệu quả vào năm 2019
HTML là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách cấu trúc các trang web và ứng dụng web. Bạn có thể học HTML từ đầu bằng cách làm theo Hướng dẫn HTML và Ví dụ về HTML này
CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này