About Us
We provide awesome services to awesome people!
Our Services
- Web Development
- SEO Optimization
- UI/UX Design
Front-end development focuses on building the visual and interactive elements of a website or application that users see and interact with. It combines HTML, CSS, and JavaScript to create user-friendly and responsive interfaces. Here's a guide to understanding front-end basics, with examples, "formulas," and specific scenarios.
JavaScript (JS): Adds interactivity, animations, and dynamic content.
Front-End Tools and Libraries:
Version Control: Git, GitHub.
Key Concepts:
```html
We provide awesome services to awesome people!
```
```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; }
header { background: 333; color: fff; padding: 10px 20px; }
header h1 { margin: 0; }
nav a { color: fff; text-decoration: none; margin-right: 15px; }
nav a:hover { text-decoration: underline; }
footer { text-align: center; padding: 10px; background: eee; } ```
```javascript // Simple click event document.addEventListener("DOMContentLoaded", () => { const navLinks = document.querySelectorAll("nav a");
navLinks.forEach(link => {
link.addEventListener("click", event => {
event.preventDefault();
alert(You clicked on ${link.textContent});
});
});
});
```
To center an element both vertically and horizontally:
css
.parent {
display: flex;
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
height: 100vh; /* Full viewport height */
}
A basic CSS grid layout:
css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three equal columns */
gap: 20px;
}
.item {
background: f4f4f4;
padding: 20px;
text-align: center;
}
Fetch data from an API and display it dynamically:
javascript
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(posts => {
const postContainer = document.getElementById("posts");
posts.slice(0, 5).forEach(post => {
const postElement = document.createElement("div");
postElement.innerHTML = `<h3>${post.title}</h3><p>${post.body}</p>`;
postContainer.appendChild(postElement);
});
});
```html
css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: 222;
color: fff;
padding: 10px 20px;
}
.menu a {
color: fff;
margin: 0 10px;
text-decoration: none;
}
.menu a:hover {
text-decoration: underline;
}
```
```html
css
.hidden {
display: none;
}
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background: fff;
padding: 20px;
border-radius: 5px;
text-align: center;
}
javascript
document.getElementById("openModal").addEventListener("click", () => {
document.getElementById("modal").classList.remove("hidden");
});
document.getElementById("closeModal").addEventListener("click", () => {
document.getElementById("modal").classList.add("hidden");
});
```
html
<button id="toggleDarkMode">Toggle Dark Mode</button>
css
body {
background: fff;
color: 000;
transition: all 0.3s;
}
body.dark-mode {
background: 000;
color: fff;
}
javascript
document.getElementById("toggleDarkMode").addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
});
Frontend Practice: Build and refine UI skills with real-world projects.
FreeCodeCamp: Hands-on coding tutorials for front-end development.