-
HTML (HyperText Markup Language)
Basic Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
<header>, <footer>, <nav>, <section>, <article>, <aside>, <div>, <span>
-
CSS (Cascading Style Sheets)
Basic Syntax:
selector {
property: value;
}
Color & Background:
color: #333;
background-color: #f0f0f0;
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
-
JavaScript
Basic Syntax:
console.log("Hello, World!");
let name = "John"; // Block-scoped
const age = 30; // Immutable
var city = "New York"; // Function-scoped
Functions:
function greet() {
return "Hello!";
}
const greetArrow = () => "Hello!";
document.getElementById("myElement").innerText = "New Text";
document.querySelector("button").addEventListener("click", () => {
alert("Button clicked!");
});
-
React (JavaScript Library)
Basic Component:
import React from 'react';
function App() {
return <h1>Hello, World!</h1>;
}
export default App;
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
-
Vue.js (JavaScript Framework)
Basic Component:
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: "Hello, Vue!"
};
}
};
</script>
-
Angular (JavaScript Framework)
Basic Component:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>{{ title }}</h1>`
})
export class AppComponent {
title = 'Hello, Angular!';
}
-
SASS/SCSS (CSS Preprocessor)
Variables:
$primary-color: #333;
body {
color: $primary-color;
}
.nav {
ul {
list-style: none;
}
li {
display: inline-block;
}
}
-
TypeScript (Superset of JavaScript)
Basic Syntax:
let message: string = “Hello, TypeScript!”;
Interfaces:
interface User {
name: string;
age: number;
}
const user: User = {
name: "Alice",
age: 25
};
- Semantic HTML: Use semantic elements to improve accessibility.
- Modular CSS: Use BEM or utility-first CSS for organization.
- State Management: For larger applications, consider using state management libraries (e.g., Redux, Vuex).
- Code Splitting: Optimize loading times by splitting your code into smaller chunks.
Resources
- MDN Web Docs: Great for HTML, CSS, and JavaScript references.
- React Documentation: Official docs for React.
- Vue.js Guide: Comprehensive guide for Vue.js.
- Angular Docs: Official resources for Angular.
This provides a quick reference to key programming languages and concepts in UI development! Let me know if you need more details on any specific topic!
