This is a solution to the News homepage 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 interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Solution URL: Solution 🎉
- Live Site URL: Deployed on Onrender
- CSS custom properties
- Mobile-first workflow
- React - JS library
- Styled Components - For styles
I learned how to use the react-responsive library to render a different component based on screen size:
import React from 'react';
import { useMediaQuery } from 'react-responsive';
{/* Hidden content */}
const isMobile = useMediaQuery({query: ' (max-width: 425px)'});
return (
<div>
{isMobile ? <MobileComponent /> : <DesktopComponent />}
</div>
);
{/* Hidden content */}
If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.
- Frontend Mentor - @ElianaNeto
- Twitter - @eliana__neto
The task is to build out the project to the designs inside the /design
folder. You will find both a mobile and a desktop version of the design.
The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as font-size
, padding
and margin
.
If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can subscribe as a PRO member.
All the required assets for this project are in the /assets
folder. The images are already exported for the correct screen size and optimized.
There are also included variable and static font files for the required fonts for this project. You can choose to either link to Google Fonts or use the local font files to host the fonts yourself. Note that we've removed the static font files for the font weights that aren't needed for this project.
There is also a style-guide.md
file containing the information you'll need, such as color palette and fonts.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.