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.
This news homepage will be an excellent opportunity to practice your CSS Grid skills. There will be lots of tricky decisions to make and plenty of learning opportunities!
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: Find Solution here
- Live Site URL: Find live site URL here
My process began making all layout with HTML, then, working from top to bottom with styling for mobile layout. Next, I styled the desktop version, and finally, but not least important, I solved the mobile side menu with the animated hamburguer toggle. I used CSS Grid all the times, even if some parts where easier to work with Flexbox. The idea was to practice CSS Grid a lot. I lot of fun on it.
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
- React - JS library
- PicPick - Very useful tools for web development tasks, like measuring of pixels with a useful ruler for images and a very nice color picker.
- VS Code editor
I practiced a lot of CSS Grid laying out and styling with @media queries for mobile first and then for desktop. This was also a good practice for a React JS simple scripting project.
- PicPick - Very useful tools for web development tasks, like measuring of pixels with a useful ruler for images and a very nice color picker.
- LinkedIn - Gonzalo Manuel Núñez
- Frontend Mentor - @gnunez0101