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
  • Useful resources
• Author
• Acknowledgments

Overview

This was a quite simple and basic design. Decided to try some new things out though, like implementing local fonts instead of using Google Fonts (which I've used for almost all interfaces I built.)

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

Links

• Solution URL: https://github.com/sodiqsanusi/news-homepage
• Live Site URL: https://sodiqsanusi.github.io/news-homepage/

My process

As usual, almost same workflow with slight differentiations:

1. Sketched out the HTML structure & a rough overview of the site on paper.
2. Wrote the HTML code following the rough sketch (had to make some slight changes with the semantics later on sha).
3. Started styling for mobile/small screen devices.
4. Worked on the mobile navigation panel, that was the only part of the site that needed some functionality actually.
5. Made the site responsive for large screen devices.
6. Used Lighthouse tool to check for possible improvements, then tweaked things using the gotten feedback.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

Might have said it earlier, but this was the first time I used self-hosted fonts on a project. It was surprisingly not difficult, will put up the links that particularly helped me in getting this to work below.

Continued development

• Getting more complex, and difficult designs to replicate.
• Building or being part of a team creating a live product.
• Will try reaching out to some companies for an internship, not just sure if they'll want to take a chance with a freshman undergrad, understandable if they don't actually.

Useful resources

• The Easy Way to Add Fonts to Your Website (Including Custom Fonts) - Pagecloud - This was very helpful, especially the "Webfont Generator" tool they shared in the article. Solid resource to use if you're new to using custom fonts and all.
• Reduce web font size - web.dev - First problem was implementing it, another was optimizing the usage of the custom fonts. Google Fonts CDNs take a lot of heavy lifting honestly, this was a quick and easily understandable read anyways, so all's good.

Author

• Frontend Mentor - @sodiqsanusi
• Twitter - @sodiqsanusi_

Acknowledgments

For calling you at odd hours, ranting about how I feel stunted in my development journey, 🤍.