Tạo một trang đăng nhập Facebook có thể là một dự án thực tế và hấp dẫn cho các nhà phát triển web mới bởi vì Facebook là một nền tảng mạng xã hội phổ biến. Bằng cách tái tạo trang đăng nhập Facebook, bạn có thể học được những kỹ năng quý giá trong thiết kế giao diện người dùng mà mọi người đã quen thuộc.

Trong bài viết này, tôi sẽ hướng dẫn bạn cách tạo một trang đăng nhập Facebook đáp ứng chỉ bằng HTML và CSS. Dự án này thân thiện với người mới học, cho phép bạn có được kinh nghiệm thực tế với hai ngôn ngữ và kiểu dáng quan trọng này.

Các bước để tạo trang đăng nhập Facebook bằng HTML & CSS

Để tạo trang đăng nhập Facebook bằng HTML và CSS, làm theo các hướng dẫn từng bước sau:

1. Tạo một thư mục. Bạn có thể đặt tên thư mục này tùy ý và bên trong thư mục này, tạo các tệp đã đề cập.
2. Tạo một tệp index.html. Tên tệp phải là index và phần mở rộng là .html.
3. Tạo một tệp style.css. Tên tệp phải là style và phần mở rộng là .css.

Để bắt đầu, thêm mã HTML sau vào tệp index.html: Mã này bao gồm các thành phần khác nhau như tiêu đề cho trang đăng nhập, đoạn văn bản, một biểu mẫu, trường nhập liệu, nút và các liên kết. Tôi cũng đã bao gồm tính năng kiểm tra hợp lệ mặc định của biểu mẫu bằng cách sử dụng thuộc tính required.

facebook
Kết nối với bạn bè và thế giới xung quanh bạn trên Facebook.

Tiếp theo, thêm mã CSS sau vào tệp style.css để tạo hình dáng giống trang đăng nhập Facebook. Mã này bao gồm các kiểu dáng khác nhau cho các thành phần như màu sắc, nền và viền. Bạn có thể tùy chỉnh các kiểu dáng này theo ý thích của bạn.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}

.flex {
display: flex;
align-items: center;
}

.container {
padding: 0 15px;
min-height: 100vh;
justify-content: center;
background: #f0f2f5;
}

.facebook-page {
justify-content: space-between;
max-width: 1000px;
width: 100%;
}

.facebook-page .text {
margin-bottom: 90px;
}

.facebook-page h1 {
color: #1877f2;
font-size: 4rem;
margin-bottom: 10px;
}

.facebook-page p {
font-size: 1.75rem;
white-space: nowrap;
}

form {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}

form input {
height: 55px;
width: 100%;
border: 1px solid #ccc;
border-radius: 6px;
margin-bottom: 15px;
font-size: 1rem;
padding: 0 14px;
}

form input:focus {
outline: none;
border-color: #1877f2;
}

::placeholder {
color: #777;
font-size: 1.063rem;
}

.link {
display: flex;
flex-direction: column;
text-align: center;
gap: 15px;
}

.link .login {
border: none;
outline: none;
cursor: pointer;
background: #1877f2;
padding: 15px 0;
border-radius: 6px;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
transition: 0.2s ease;
}

.link .login:hover {
background: #0d65d9;
}

form a {
text-decoration: none;
}

.link .forgot {
color: #1877f2;
font-size: 0.875rem;
}

.link .forgot:hover {
text-decoration: underline;
}

hr {
border: none;
height: 1px;
background-color: #ccc;
margin-bottom: 20px;
margin-top: 20px;
}

.button {
margin-top: 25px;
text-align: center;
margin-bottom: 20px;
}

.button a {
padding: 15px 20px;
background: #42b72a;
border-radius: 6px;
color: #fff;
font-size: 1.063rem;
font-weight: 600;
transition: 0.2s ease;
}

.button a:hover {
background: #3ba626;
}

@media (max-width: 900px) {
.facebook-page {
flex-direction: column;
text-align: center;
}

.facebook-page .text {
margin-bottom: 30px;
}
}

@media (max-width: 460px) {
.facebook-page h1 {
font-size: 3.5rem;
}

.facebook-page p {
font-size: 1.3rem;
}

form {
padding: 15px;
}
}

Kết luận và lời cuối

Tóm lại, việc tạo trang đăng nhập Facebook có thể là một dự án hữu ích cho những người mới bắt đầu trong phát triển web. Tôi hy vọng rằng bằng cách làm theo các bước đã được trình bày trong bài viết này, bạn sẽ có thể tạo được một trang đăng nhập Facebook đáp ứng bằng HTML và CSS.

Nếu bạn muốn nâng cao kỹ năng của mình, bạn có thể khám phá các thiết kế biểu mẫu đăng nhập khác dành cho người mới học khác trên trang web này. Các biểu mẫu này là cơ hội tuyệt vời để rèn kỹ năng HTML và CSS của bạn.

Nếu bạn gặp bất kỳ vấn đề nào trong quá trình tạo trang đăng nhập Facebook của mình, bạn có thể tải xuống miễn phí các tệp mã nguồn cho dự án trang đăng nhập Facebook này bằng cách nhấp vào nút Tải xuống. Bạn cũng có thể xem phiên bản trực tiếp của dự án bằng cách nhấp vào nút Xem trực tiếp.