Caleb-Abuul / News-homepage

Frontend Mentor - News homepage solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

The challenge

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

Screenshot

Desktop

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• JavaScript

What I learned

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);
};

Continued development

Going forward I would learn to use more Grid in my layout, because they are easier to manipulate and customize.

Author

• Github - Caleb Abuul
• Website - Caleb
• Frontend Mentor - @Caleb-Abuul
• Twitter - @CalebAbuul
• LinkedIn - @Caleb Abuul

Acknowledgments

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