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: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- JavaScript
Following Kevin Powell's tutorials on YouTube, I learnt how to style grid layouts in a way that is both interesting and easy. I used to like flexbox, but now that I've learnt about Grid layout from Kevin, I'm all in for Grid.
To see how you can add code snippets, see below:
<picture>
<source media="(min-width: 1440px)" srcset="assets/images/pic1.jpg" />
<source media="(max-width: 375px)" srcset="assets/images/pic2.jpg" />
<img src="altPic.jpg" alt="default image" />
</picture>
:root {
--primary-clr: hsl(0, 0%, 98%);
}
header {
background-color: var(--primary-clr);
}
const grabItem = (id) => {
document.getElementById(id);
};
Going forward I would learn to use more Grid in my layout, because they are easier to manipulate and customize.
- Github - Caleb Abuul
- Website - Caleb
- Frontend Mentor - @Caleb-Abuul
- Twitter - @CalebAbuul
- LinkedIn - @Caleb Abuul
A big thank you to Kevin Powell. He has been a great inspiration through his YouTube Channel. His solution for the Frontend Mentor Manage-landin-page project helped me got a hang of how to approach challenges on frontend mentor. He has tons of videos spanning several topics in CSS on YouTube. Please do well to check him out Kevin Powell