L’intégration web : Coder un design en HTML et CSS (2024)
🔰 Niveau : Débutant / Intermédiaire

🌀 Apprenez à transformer une maquette réalisée par un designer en une page web interactive et responsive, en maîtrisant l’intégration HTML et CSS.

📗 Thèmes : HTML, CSS, intégration web, responsive design, développement web, GitHub Codespaces

Dans cette formation, vous serez guidé par Damien Bruyndonckx, développeur web et formateur certifié, à travers chaque étape du processus, depuis l’analyse de la maquette jusqu’à la finalisation de votre site. Vous apprendrez à structurer votre projet, coder des éléments complexes et adapter votre design pour tous types d’écrans.

Ce cours est intégré à GitHub Codespaces, un environnement de développement cloud qui vous permet de coder directement en ligne, sans avoir besoin de configurer votre machine locale. Vous pourrez ainsi pratiquer et apprendre à votre rythme, sur n’importe quel appareil, à tout moment.

📱👨‍💻 Flutter - Développer des applications avec Dart
Éditeur : ENI


👨‍💻 Ce livre sur Flutter s'adresse à tous ceux qui souhaitent explorer le développement d'applications mobiles multiplateformes avec Dart. Julien Trillard adopte une approche pratique, guidant les lecteurs à travers la création d'applications de A à Z, tout en proposant des démonstrations simples à reproduire. Que vous soyez débutant ou développeur confirmé, cet ouvrage vous aidera à maîtriser les fondamentaux de Flutter et à réaliser des projets concrets.

Figma intègre Claude Code : le code généré par IA devient un design modifiable

https://www.blogdumoderateur.com/figma-integre-claude-code/

Télécharge l'application pour ordinateur de CapCut pour obtenir des avantages GRATUITS
Profite d'avantages exclusifs sur les versions mobile, pour ordinateur et Web.
Il te suffit d'ouvrir le lien ci-dessous sur ton ordinateur pour l'installer. Tu peux alors commencer à en profiter tout de suite !
Télécharge CapCut pour ordinateur https://www.capcut.com/u/e30

import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Smile, LayoutGrid, Paperclip, Mic } from "lucide-react";

export default function ChatInputBar() {
const [message, setMessage] = useState("");

const handleSend = () => {
if (message.trim()) {
console.log("Message envoyé :", message);
setMessage("");
}
};

const handleKeyDown = (e) => {
if (e.key === "Enter") handleSend();
};

return (
<div className="flex items-center justify-center min-h-screen bg-[#a8c99a] px-4">

{/* Barre principale — pilule blanche */}
<div className="flex items-center gap-2 bg-white rounded-full px-3 py-2 w-full max-w-lg shadow-md">

{/* Avatar */}
<Avatar className="h-9 w-9 shrink-0">
<AvatarImage src="https://i.pravatar.cc/80?img=47" alt="avatar" />
<AvatarFallback>U</AvatarFallback>
</Avatar>

{/* Icône Emoji */}
<Button variant="ghost" size="icon" className="text-gray-400 hover:text-gray-600 shrink-0 h-8 w-8">
<Smile size={22} />
</Button>

{/* Champ texte */}
<Input
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Écrivez ici"
className="flex-1 border-none shadow-none focus-visible:ring-0 px-0 text-base placeholder:text-gray-300"
/>

{/* Icône Grille */}
<Button variant="ghost" size="icon" className="text-gray-400 hover:text-gray-600 shrink-0 h-8 w-8">
<LayoutGrid size={22} />
</Button>

{/* Icône Trombone */}
<Button variant="ghost" size="icon" className="text-gray-400 hover:text-gray-600 shrink-0 h-8 w-8">
<Paperclip size={22} />
</Button>

{/* Bouton Micro — bleu */}
<Button
size="icon"
onClick={handleSend}
className="bg-[#2AABEE] hover:bg-[#1a9bde] text-white rounded-full h-10 w-10 shrink-0 shadow-md"
>
<Mic size={20} />
</Button>

</div>
</div>
);
}

Voici la barre de chat avec shadcn/ui !
Les composants shadcn/ui utilisés :
Input → champ texte sans bordure visible
Button → icônes avec variant="ghost" et size="icon"
Avatar + AvatarImage + AvatarFallback → photo de profil ronde

Installation rapide :
npx shadcn@latest init
npx shadcn@latest add input button avatar
npm install lucide-react

Ensuite tu importes et utilises <ChatInputBar /> directement dans ton app.