Frontend Mentor - Blogr landing page solution

This is a solution to the Blogr landing page 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
  • Technology Used
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution: Frontend Mentor: Blogr landing page
• Live Site: https://blogr-d8j.pages.dev/

My process

Technology used

This project was built using the following frontend technologies and methodologies:

• Semantic HTML5 markup: To provide a clear and meaningful structure to the content.
• CSS custom properties: To efficiently manage and reuse style values throughout the project.
• CSS Grid: To create powerful and flexible layouts with precise control over placement and alignment.
• Flexbox: To create flexible and responsive layouts.
• JavaScript: To add interactivity and dynamic functionality to the project.
• Sass: To write CSS more efficiently with nested rules, variables, and mixins.
• Hyphen Delimiter: Incorporated to enhance the visual presentation and organization of elements, contributing to a more polished and user-friendly design.
• Mobile-first workflow: To ensure a better user experience on smaller screens and devices.

Useful resources

• MDN: isolation: This article helped me grasp the concept of maintaining stacking order for elements.
• MDN: Stacking context: This article clarified how elements interact with each other using the z-index property, making it easier to control their visual arrangement.

Author

This project was created by Fortune Iyoha. If you want to connect with me or view more of my projects, you can visit my Frontend Mentor profile or follow me on Twitter for updates and web development discussions.