/blogr-landing-page

Solution to the Blogr landing page challenge on Frontend Mentor.

Primary LanguageTypeScript

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.

UPDATE!

This project was updated to improve performance and to demonstrate my skills and main tech stack better. SCSS is replaced with WindiCSS and Next.js is used on top of React.

PageSpeed Insights Benchmark

Benchmark done under Slow 4G throttling and Moto 4G Emulation with 4x CPU slowdown.

Old (Desktop) New (Desktop) Old (Mobile) New (Mobile)
First Contentful Pain 0.8 s 0.5 s 2.6 s 2.0 s
Speed Index 0.8 s 0.5 s 2.6 s 2.0 s
Largest Contentful Paint 0.8 s 0.5 s 2.6 s 2.3 s
Time to Interactive 0.8 s 0.5 s 2.6 s 2.0 s
Total Blocking Time 0 ms 0 ms 0 ms 0 ms
Cumulative Layout Shift 0.016 0.002 0.029 0.003
Average improvement 37.5% faster ~20.2% faster

Table of contents

Overview

The challenge

Users should be able to:

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

Screenshots

Click the images to view them larger!

Desktop View Mobile View

Links

https://blogr-zebs.vercel.app/

My process

Built with

  • React - JS library

  • SCSS - CSS compiler

  • Vercel - Web hosting

  • Responsive design fit for every device using Flexbox and percentage unit

  • Modular CSS with BEM

  • Semantic HTML5 markup

  • Mobile-first workflow

What I learned

  • Better understanding of client side rendering, especially how React handles it.
  • Recognizing how a website’s layout divides and relationships between the components within the layout.
  • Using the above understanding to form a good idea on the CSS structure.
  • How to create a smooth, responsive accordion style mobile menu.
  • Semantics of the section and article tag, in a sense that it expects a header tag in it.
  • How React handles image import.

Continued development

While my project files are organized accordingly, it can be improved to be more scalable and support bigger projects, and I’ll just need more experience with those to improve. I also need those experiences to be quicker at recognizing website structure and building components accordingly. I ended up with a good understanding of the structure and on how to separate responsibilities of each component, but it had to go through a handful of changes to get there.

Animation, grid display and SCSS functions are still foreign to me, and learning them should help increase the efficiency and scalability of my workflow more than it already is. I should also try to learn some CSS frameworks so I don’t waste time reinventing the wheel. Finally, a server side render tech seems to be helpful to improve site load time.

Author