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

• Screenshot
• The challenge
• Links
• Built with
• What I learned
• Continued development
• Author

Screenshot

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

Links

Live Site

Built with

• Semantic HTML5 markup
• SASS with CSS custom properties
• Flexbox
• Grid
• javascript

What I learned

In this project, I have enhanced my understanding of structuring web pages using CSS Grid. I thoroughly enjoyed tackling this challenge as it presented a slightly higher level of difficulty compared to my previous endeavors and also notice that i wrote less line of javascript in this project on the order once i do, qudos to me.

<aside>

  <article>
    <h1>this is the first time i am using the aside tag for a challenge</h1>
  </article>

</aside>

what i enjoyed most using nesting with SCSS

        &[type=number]::-webkit-inner-spin-button,&[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }

// add event listener to the button so it will toggle

menuButton.addEventListener('click', () => {
    header.classList.toggle('showHiddenItem')
})

Continued development

I aim to deepen my comprehension of utilizing JavaScript for DOM manipulation, refining my grasp of JavaScript syntax to enhance the appearance and functionality of a webpage's frontend.

Author

• Frontend Mentor - @Moderateemmaco
• Twitter - @heisemmaco-dev