Les Recettes
Les Recettes is a responsive recipe website project created to present recipes in a clear, visual and easy-to-browse format. The project focuses on static page structure, visual presentation, content hierarchy and responsive layout.
Built with HTML and CSS, the website showcases recipe pages with ingredients, preparation details and visual content. It was designed as an early frontend project to practise semantic structure, styling, page composition and responsive behaviour across devices.
Technologies & Tools Used
Creative Tools
Frontend
Explore Les Recettes through the live preview. You can browse the public pages, view the recipe layouts and test the responsive behaviour across screen sizes.
View the full codebase on GitHub to explore the HTML structure, CSS styling, responsive layout decisions and static page organization.
Creation Process
To build Les Recettes, I combined visual preparation with basic frontend development. The goal was to create a clean recipe website with readable content, appealing visuals and responsive page layouts.
Logo & Visual Direction
Created the logo with Adobe Illustrator, aiming for a simple and friendly visual identity connected to cooking and homemade recipes.
Visual Assets
Prepared and adjusted images with Adobe Photoshop to support the visual atmosphere of the recipe pages.
HTML Structure
Built the page structure with HTML, organizing recipe content into clear sections such as titles, images, ingredients and preparation details.
CSS & Responsive Layout
Styled the website with CSS, using layout rules and responsive techniques to keep the pages readable and consistent on different screen sizes.
Features
Les Recettes includes simple but useful features for a static recipe website: recipe presentation, structured information, visual content and responsive pages.
Recipe Presentation
Recipes are presented with clear titles, images and organized content, making the pages easy to browse and understand.
Structured Recipe Information
Recipe pages include useful details such as ingredients, preparation steps and nutritional information where relevant.
Visual Layout
The project uses food imagery, spacing and visual hierarchy to create a pleasant browsing experience.
Responsive Interface
The layout adapts to different screen sizes, allowing visitors to view the recipe content on desktop, tablet and mobile devices.