This project is a personal project, a basic responsive landing page that implements CSS Grids and Animations for the Image Gallery, as well as HTML Class Manipulations for a Dark Mode theme.
- HTML5: For structuring the content and layout of the web pages.
- CSS3: For styling the web pages, including layout design, responsive design techniques, and animations.
- JavaScript: For adding interactivity to the web pages, specifically for the theme toggle feature.
- Responsive Design: The website is fully responsive, ensuring a seamless user experience across devices of various sizes, from desktops to mobile phones.
- Dark Mode/Light Mode Toggle: An interactive button allows users to switch between dark and light themes, enhancing accessibility and user preference.
- Interactive Gallery: The embroidery gallery utilizes CSS grid for layout and includes hover effects for image scaling, offering an engaging way to view embroidery projects.
-
Mobile-First Design: The development process started with designing for mobile devices first, then scaling up to larger screens, ensuring optimal usability and performance on mobile devices.
-
CSS Best Practices: Employed methodologies such as the use of custom properties (variables), media queries for responsive design, and transitions for smooth animations.
-
Semantic HTML: Used semantic HTML tags to structure the content meaningfully, improving SEO and accessibility.
-
JavaScript Event Handling: Implemented event listeners for interactive elements, such as the theme toggle button, to enhance the user experience through dynamic content changes.
- The HTML file structures the content and includes meta tags for responsiveness and SEO.
- The CSS is embedded within the HTML file for simplicity, focusing on responsive design, theming, and animations.
- JavaScript is used to add functionality to the theme toggle button, allowing users to switch between dark and light modes.
- Responsive Images: Ensured images scale appropriately using CSS, providing a fluid experience in the gallery section.
- Theme Consistency: Implemented a JavaScript toggle function to switch themes while maintaining user preferences across page reloads (conceptual solution, actual implementation may require local storage or cookies).
- Separation of Concerns: Refactor the project to separate HTML, CSS, and JavaScript into distinct files for better maintainability.
- Accessibility Enhancements: Improve accessibility by adding aria-labels and role attributes where applicable.
- Performance Optimization: Optimize images and leverage caching strategies for improved loading times.
- Developer: Gracie
- Inspiration: Embroidery art and crafting communities.
- GitHub: gracemorganmaxwell
Thank you for visiting my Embroidery Hobby project!