❤3
Important skills every self-taught developer should master:
💻 HTML, CSS & JavaScript — the foundation of web development
⚙️ Git & GitHub — track changes and collaborate effectively
🧠 Problem-solving — break down and debug complex issues
🗄️ Basic SQL — manage and query data efficiently
🧩 APIs — fetch and use data from external sources
🧱 Frameworks — like React, Flask, or Django to build faster
🧼 Clean Code — write readable, maintainable code
📦 Package Managers — like npm or pip for managing libraries
🚀 Deployment — host your projects for the world to see
Web Development Resources: https://whatsapp.com/channel/0029VaiSdWu4NVis9yNEE72z
💻 HTML, CSS & JavaScript — the foundation of web development
⚙️ Git & GitHub — track changes and collaborate effectively
🧠 Problem-solving — break down and debug complex issues
🗄️ Basic SQL — manage and query data efficiently
🧩 APIs — fetch and use data from external sources
🧱 Frameworks — like React, Flask, or Django to build faster
🧼 Clean Code — write readable, maintainable code
📦 Package Managers — like npm or pip for managing libraries
🚀 Deployment — host your projects for the world to see
Web Development Resources: https://whatsapp.com/channel/0029VaiSdWu4NVis9yNEE72z
❤5👍2🔥1
Moving Login Button Project (Troll Form 😂)
If the user enters an incorrect password, the "Login" button moves away!
<html>
<head>
<style>
.container {
text-align: center;
margin-top: 50px;
}
.btn {
position: relative;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<script>
function moveButton() {
let password = document.getElementById("password").value;
let button = document.getElementById("btn");
if (password !== "legend") {
let x = Math.random() * (window.innerWidth - 100);
let y = Math.random() * (window.innerHeight - 100);
button.style.position = "absolute";
button.style.left = x + "px";
button.style.top = y + "px";
}
}
</script>
</head>
<body>
<div class="container">
<h2>Enter Password</h2>
<input type="password" id="password" placeholder="Type something..." oninput="moveButton()">
<br><br>
<button id="btn" class="btn" onclick="alert('You got lucky!')">Login</button>
</div>
</body>
</html>
How It Works?
If the user types anything other than "legend", the login button starts running away from the cursor.
If the correct password is entered, the button stays in place.
Web Development Best Resources
ENJOY LEARNING 👍👍
#webdev
If the user enters an incorrect password, the "Login" button moves away!
<html>
<head>
<style>
.container {
text-align: center;
margin-top: 50px;
}
.btn {
position: relative;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<script>
function moveButton() {
let password = document.getElementById("password").value;
let button = document.getElementById("btn");
if (password !== "legend") {
let x = Math.random() * (window.innerWidth - 100);
let y = Math.random() * (window.innerHeight - 100);
button.style.position = "absolute";
button.style.left = x + "px";
button.style.top = y + "px";
}
}
</script>
</head>
<body>
<div class="container">
<h2>Enter Password</h2>
<input type="password" id="password" placeholder="Type something..." oninput="moveButton()">
<br><br>
<button id="btn" class="btn" onclick="alert('You got lucky!')">Login</button>
</div>
</body>
</html>
How It Works?
If the user types anything other than "legend", the login button starts running away from the cursor.
If the correct password is entered, the button stays in place.
Web Development Best Resources
ENJOY LEARNING 👍👍
#webdev
❤13👍9😁4🤩3🔥2👏1