Frontend Mentor - CHALLENGE

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
  • Extra challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • 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 states for all interactive elements on the page

Extra challenge

As an extra challenge I will do the following things:

• Add a color theme switcher, with about five themes, that is persisted in localStorage.
• Add smooth animations for better interactivity on the hero, images and buttons.
• Make the page accessible according to WCAG 2.1 standards, things like color contrast, clear element focus and the correct screen reader contexts.

Screenshot

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• WCAG 2.1 best practices
• CSS Animations
• Vanilla JavaScript
• Tailwind CSS
• Astro - Astro Static Site Generator
• Frontend Mentor Challenge Starter - My own starter template for Frontend Mentor Challenges

What I learned

• How the <picture> element works. I've never used it before, but found a great use case for it in this challenge. I learned that you can use it to load different images depending on the screen size using the <source> tag and the srcset attribute. This is very useful for responsive images.

<picture>
  <source media="(min-width: 768px)" srcset="/image-header-desktop.jpg" />
  <img src="/image-header-mobile.jpg" alt="" />
</picture>

• How to build a Theme Switcher component with CSS variables. This was something I wanted to do for a long time now and this challenge was great for that, seeing as it has a nice orange theme going through the hero and the images. I used the localStorage API to persist the theme in the browser, so it will stay the same when you refresh the page. The styles are saved in Custom Properties, which are then used in the CSS. This way you can easily change the theme by changing the value of the Custom Property.

• How to change the color of the SVG as an image src with the filter property. This is something that has brought the Theme Switcher to the next level. I used the filter property to change the color of the SVGs in the Theme Switcher. This way I can use the same SVG for all the themes and just change the color. This is a great way to keep the SVGs small and not have to load multiple SVGs for each theme.

img,
svg {
  filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(210deg) brightness(100%) contrast(100%);
}

• How to make a magic sparkling text by following the tutorial by Hyperplexed. This was a lot of fun to do and I learned more about using JavaScript to create random animations.

Continued development

• It would be cool to add a Dark Mode to the Theme Switcher. It would require a bit of extra work and extra Custom Properties, but it would be a nice addition to the Theme Switcher.

Useful resources

Hyperplexed YouTube channel - This is where I learned how to make the magic sparkling text. There are more useful videos on this channel, so I recommend checking it out.

Author

• Personal Website
• Frontend Mentor Profile
• LinkedIn Profile
• Twitter Profile
• GitHub Repositories
• NPM Packages
• CodePen Creations