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
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• 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

Screenshots

Links

• Solution URL: GitHub
• Live Site URL: Live Preview

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Grid and Flexbox
• Fluid typography

What I learned

Practiced variable fonts in CSS:

@font-face {
  font-family: "Inter";
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/Inter-VariableFont.ttf") format("truetype");
}

Refereshed my knowledge on CSS counters (especially the decimal-leading-zero value):

.popular-cards {
  counter-reset: title-counter;
}

.popular-card__title {
  counter-increment: title-counter;
}

.popular-card__title::before {
  content: counters(title-counter, ".", decimal-leading-zero) " ";
}

Continued development

If you have any suggestions on how I can improve my code, please do let me know! I'll always look forward to learning new things.

Useful resources

• CSS Counters (MDN) - Generating counters right in your CSS.
• Variable Fonts (Kevin Powell) - A guide on how to use variable fonts in CSS.

Author

• Website - Doston Nabotov
• Frontend Mentor - @dostonnabotov
• Twitter - @dostonnabotov

Acknowledgments

• MDN Web Docs - For providing such a great resource for web developers.
• Kevin Powell - For his amazing tutorials on CSS.