Francis7575
@Francis7575All solutions
- Submitted 2 months ago
Space tourism multi-page website using Vue & TailwindCSS
- HTML
- CSS
- JS
I encountered a challenge with implementing smooth transitions when switching tabs in my project. Initially, the page content was shifting during the transition between tabs. After reviewing the Vue documentation, I read about the transition element and resolved the issue by adding the mode="out-in" attribute. This effectively fixed the page shifting problem during tab transitions.
- Submitted 3 months ago
Lizard, Spock, Rock, Paper, Scissors game
- HTML
- CSS
- JS
During this project, I enhanced my skills using Framer Motion for animations. I also implemented context for managing the app's functionality and utilized setTimeouts to adjust the timing and coordination of the animations.
- Submitted 5 months ago
Country api with theme switcher using React & Tailwind CSS
- HTML
- CSS
- JS
- API
During this challenge, I encountered an issue where LazyLoad was being applied universally, including during searches or when filtering countries by continent, rather than just on the main page. To resolve this, I implemented a boolean state in the parent component that managed the search, filter, and main components. By passing this state as a prop all the components filter and search bar and main component, I was able to conditionally apply LazyLoad only in the main page.
- Submitted 5 months ago
Todo app using React & Tailwind CSS
- HTML
- CSS
- JS
During this challenge, I faced a design issue where the position of the filters changed significantly across different screen sizes. To address this, I created two separate components one specifically for medium screens and another for larger screens, ensuring a responsive and consistent layout across devices.
- Submitted 6 months ago
Contact form using React & Tailwind CSS
- HTML
- CSS
- JS
During this challenge, I implemented the Zod library for enhanced form validation and management. I introduced various states to handle different functionalities within the form and integrated custom alert message after form submission. Additionally, I gained experience working with various input types, such as checkboxes and radio and added form validation to display error messages when the form is submitted incorrectly.
- Submitted 6 months ago
Bookmarking-landing-page using React & Tailwind CSS
- HTML
- CSS
- JS
During this challenge, I implemented an FAQ section with smooth transitions and utilized useState to be able to switch through different tabs. I enhanced my skills in creating a responsive home page layout using tailwindCSS and integrated form validation for a single input.
- Submitted 7 months ago
Officelite site using React & Tailwind CSS
- HTML
- CSS
- JS
During this challenge, I utilized react-router-dom for managing navigation between two distinct pages. I implemented the useState hook to manage the countdown timer and useEffect to update the countdown every second. Additionally, I passed the countdown data across different pages and used a boolean prop for applying different styles.
- Submitted 7 months ago
Single page portfolio using React & Tailwind
- HTML
- CSS
- JS
During this challenge, I advanced my CSS Grid skills, make the website fully responsive using tailwindCSS, and utilized useState to implement functional gallery navigation.
- Submitted 7 months ago
Social media dashboard using React & Tailwind
- HTML
- CSS
- JS
During this challenge, I implemented Dark Mode using useContext and designed a responsive layout with CSS Grid to ensure the app is accessible across all devices.
