This is a solution to the Blogr landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: GitHub Repo
- Live Site URL: Blogr Landing Page
- Semantic JSX markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Tailwind Css - For styles
- React - JS library
- I implemented my very first custom react hook to renders components conditionally based on the viewport width.
import { useState, useEffect } from "react";
export default function useWindowSize() {
const [windowSize, setWindowSize] = useState({ width: window.innerWidth });
useEffect(() => {
const handleResize = () => {
setWindowSize({ width: window.innerWidth });
};
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return windowSize;
}
- Gemini - This AI helped me finally understand how to conditionally render components in react based on the viewport width. I'd recommend it to anyone still learning this concept.
- Website - Developer Raph
- Frontend Mentor - CosMo578
- Twitter - Developer Raphael
Google bard helped me in implementing the logic for my custom hook. I acknowledge the developers of the bard project.