Frontend Mentor - Typemaster pre-launch landing page solution

This is a solution to the Typemaster pre-launch landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview

Screenshot

Links

GitHub Repo
Live Demo 🎉

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
Mobile-first workflow
React - JS library
Gatsby.js - React framework
Styled Components - For styles

What I learned

Gatsby Image

This plugin handles producing images in multiple sizes.

When you install the gatsby image plugn via npm install gatsby-plugin-image, you can import your image similar to a module and pass it to the src prop.

import PhoneAndKeyboardMobileImg from "../images/mobile/image-phone-and-keyboard.jpg"

const Image = () => <img src={PhoneAndKeyboardMobileImg} alt="" />

In order to appreciate this plugin, lets say the image above was 1024px wide. If you were to view this on your phone and without a wifi connection, loading this entire image is definitely not a good thing as it will eat into the client's data plan. This plugin will check the width of the viewport and load the appropriate size.

Image Filter

Not to be confused with the filter CSS property.

import styled from "styled-components"

const Container = styled.div`
  background: #5cab7d;

  img {
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
`

The above code will apply an orange overlay to its img child element.

Continued development

This project has made me interested in image optimization and learning how to prevent underfetching or overfetching data. Apparently a querying language called GraphQL fixes this issue. I will learn this language and use it as my backend for this frontend challenge by Frontend Mentor.

Useful resources

Image overlay - This gem of an article helped me with the orange overlay that you see image with the phone and keyboard.

benmort / gengreen-prelaunch