Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
Today, I took a small but meaningful step in my front-end development journey. I built a Twitter-style login page using only HTML and CSS, and then published the project to GitLab. In this blog post, I’ll walk you through the process — from building the UI to version controlling the code with Git.
? Why I Chose This Project
Recreating popular UI designs is a great way to improve your front-end skills. I decided to build a Twitter login page because:
I started by creating a basic HTML file with a login form. Here's a simplified version:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<h2>Log in to Twitter</h2>
<form>
<input type="text" placeholder="Phone, email, or username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Log In</button>
</form>
<a href="#">Forgot password?</a>
</div>
</body>
</html>
? Step 2: Styling with CSS
Next, I styled the form to look like Twitter's login page:
body {
font-family: Arial, sans-serif;
background-color: #e6ecf0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background: white;
padding: 30px;
border-radius: 10px;
width: 300px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input, button {
width: 100%;
padding: 10px;
margin: 10px 0;
}
button {
background-color: #1da1f2;
color: white;
border: none;
cursor: pointer;
}
?️ Step 3: Pushing to GitLab
Once I was happy with the design, I pushed the code to GitLab:
git init
git remote add origin
git add .
git commit -m "Initial commit: Twitter login page with HTML & CSS"
git push -u origin master
Final Output
The login page looks clean and is responsive enough for basic usage. Here’s a quick snapshot of what I created (or include a screenshot or GitLab repo link if possible).
? GitLab Repository
You can check out the full code on my GitLab repository:
? (replace with your actual link)
? What I Learned
? Why I Chose This Project
Recreating popular UI designs is a great way to improve your front-end skills. I decided to build a Twitter login page because:
- It has a clean, modern look.
- It's a simple interface with real-world relevance.
- It helped me practice layout techniques, form design, and styling.
- HTML5
- CSS3
- Git for version control
- GitLab for repository hosting
I started by creating a basic HTML file with a login form. Here's a simplified version:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<h2>Log in to Twitter</h2>
<form>
<input type="text" placeholder="Phone, email, or username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Log In</button>
</form>
<a href="#">Forgot password?</a>
</div>
</body>
</html>
? Step 2: Styling with CSS
Next, I styled the form to look like Twitter's login page:
body {
font-family: Arial, sans-serif;
background-color: #e6ecf0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background: white;
padding: 30px;
border-radius: 10px;
width: 300px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input, button {
width: 100%;
padding: 10px;
margin: 10px 0;
}
button {
background-color: #1da1f2;
color: white;
border: none;
cursor: pointer;
}
?️ Step 3: Pushing to GitLab
Once I was happy with the design, I pushed the code to GitLab:
git init
git remote add origin
git add .
git commit -m "Initial commit: Twitter login page with HTML & CSS"
git push -u origin master
Final OutputThe login page looks clean and is responsive enough for basic usage. Here’s a quick snapshot of what I created (or include a screenshot or GitLab repo link if possible).
? GitLab Repository
You can check out the full code on my GitLab repository:
? (replace with your actual link)
? What I Learned
- Writing clean HTML/CSS code
- Centering elements using Flexbox
- Creating responsive input forms
- Using Git and pushing to GitLab