CSS Media Queries are a technique in CSS that allows a webpage layout to adapt to different screen sizes, resolutions, and device types. They are a core feature of Responsive Web Design.
@media (condition) {
/* CSS rules that apply only under this condition */
}1. Adjusting for different screen widths:
/* For screens with a maximum width of 600px (e.g., smartphones) */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}2. Detecting landscape vs. portrait orientation:
@media (orientation: landscape) {
body {
background-color: lightgreen;
}
}3. Styling for print output:
@media print {
body {
font-size: 12pt;
color: black;
background: none;
}
}✅ Mobile-first design: Optimizing websites for small screens first and then expanding for larger screens.
✅ Dark mode: Adjusting styles based on user preference (prefers-color-scheme).
✅ Retina displays: Using high-resolution images or specific styles for high pixel density screens (min-resolution: 2dppx).
Responsive Design is a web design approach that allows a website to automatically adjust to different screen sizes and devices. This ensures a seamless user experience across desktops, tablets, and smartphones without needing separate versions of the site.
Responsive Design is achieved using the following techniques:
1. Flexible Layouts
2. Media Queries (CSS)
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}→ This changes the background color for screens smaller than 768px.
3. Flexible Images and Media
img {
max-width: 100%;
height: auto;
}4. Mobile-First Approach
✅ Better user experience across all devices
✅ SEO advantages, as Google prioritizes mobile-friendly sites
✅ No need for separate mobile and desktop versions, reducing maintenance
✅ Higher conversion rates, since users can navigate the site easily
Responsive Design is now the standard in modern web development, ensuring optimal display and usability on all devices.
A Bearer Token is a type of access token used for authentication and authorization in web applications and APIs. The term "Bearer" means "holder," which implies that anyone in possession of the token can access protected resources—without additional verification.
Authorization: Bearer <token>.GET /protected-data HTTP/1.1
Host: api.example.com
Authorization: Bearer abcdef123456💡 Tip: To enhance security, use short-lived tokens and transmit them only over HTTPS.
The Model is the data and logic layer in the MVC architecture. It manages the application's data and ensures that it is correctly stored, retrieved, and processed.
✅ Data Management: Stores and handles data, often in a database.
✅ Business Logic: Contains rules and calculations (e.g., discount calculation for orders).
✅ Data Validation: Checks if input is correct (e.g., if an email address is valid).
✅ Database Communication: Performs CRUD operations (Create, Read, Update, Delete).
class BlogPost extends Model {
protected $fillable = ['title', 'content']; // Erlaubte Felder für Massenverarbeitung
// Beziehung: Ein Blogpost gehört zu einem Benutzer
public function user() {
return $this->belongsTo(User::class);
}
}🔹 fillable: Specifies which fields can be saved.
🔹 belongsTo(User::class): Indicates that each blog post belongs to a user.
✔ The Model handles all data and business logic of the application.
✔ It ensures a clear separation between data and presentation.
✔ Changes to the data structure only need to be made in the Model, not throughout the entire application.
A Controller is a key component in the Model-View-Controller (MVC) architecture. It acts as an intermediary between the user interface (View) and the business logic or data (Model).
Handling User Input
Processing the Request
Interacting with the Model
Updating the View
Suppose a user wants to create a new blog post:
class BlogController extends Controller {
public function store(Request $request) {
// Validierung der Benutzereingabe
$request->validate([
'title' => 'required|max:255',
'content' => 'required',
]);
// Neues Blog-Post-Model erstellen und speichern
BlogPost::create([
'title' => $request->input('title'),
'content' => $request->input('content'),
]);
// Weiterleitung zur Blog-Übersicht
return redirect()->route('blog.index')->with('success', 'Post erstellt!');
}
}✔ A controller manages the flow of an application and separates business logic from presentation.
✔ It ensures clean code structure, as each component (Model, View, Controller) has a specific responsibility.
✔ Modern frameworks like Laravel, Django, or ASP.NET often include built-in routing mechanisms that automatically direct requests to the appropriate controllers.
Model-View-Controller (MVC) is a software architecture pattern that divides an application into three main components:
✔ Better maintainability through a clear separation of concerns.
✔ Reusability of components.
✔ Easy testability since logic is separated from the interface.
✔ Flexibility, as different views can be used for the same model.
MVC is widely used in web and desktop applications, including:
Hot Module Replacement (HMR) is a web development technique that allows code changes to be applied instantly in a running application without requiring a full page reload. This significantly improves development productivity since the application's state (e.g., user input or UI state) is preserved.
HMR is used in modern build tools like Webpack, Vite, Parcel, or esbuild. The process works as follows:
✅ Faster development cycles – No need for full-page reloads.
✅ Preserved application state – Useful for React, Vue, and other SPA frameworks.
✅ Instant CSS updates – Style changes appear immediately.
✅ Improved DX (Developer Experience) – Reduces workflow interruptions.
If you're using Webpack, you can enable HMR like this:
if (module.hot) {
module.hot.accept('./module.js', function() {
console.log('Module updated!');
});
}This ensures that changes to module.js are applied without restarting the entire application.
The MERN Stack is a collection of JavaScript technologies commonly used to build modern, scalable, and dynamic web applications. The name is an acronym that represents the four main technologies in the stack:
MongoDB (M):
Express.js (E):
React.js (R):
Node.js (N):
The MERN Stack is particularly popular among startups and companies looking to build fast, interactive web applications.
The MEAN stack is a modern collection of JavaScript-based technologies used together to develop dynamic, scalable, and high-performance web applications. MEAN is an acronym representing the four main components of the stack:
M – MongoDB
E – Express.js
A – Angular
N – Node.js
The MEAN stack is often compared to the MERN stack, which uses React instead of Angular for the frontend. While Angular provides a complete solution, React allows more flexibility with its "bring-your-own-library" philosophy.
The LAMP stack is a collection of open-source software used together to develop dynamic websites and web applications. The acronym LAMP stands for the following components:
L – Linux
A – Apache
The LAMP stack is often compared to modern alternatives like the MEAN stack (MongoDB, Express.js, Angular, Node.js), but it remains popular due to its simplicity and reliability, especially for traditional web development projects.
Doctrine
