Frontend Mentor - Easybank landing page solution

This is a solution to the Easybank 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
  • Built with
  • Features
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

Screenshot

Links

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

My process

Built with

• Astro
• Sass
• Semantic HTML5 markup

Features

• Multi-page website ('404' and 'Coming Soon' pages included)
• Dynamic blog system with Content Collections
• Structured Sass style system (view src/styles)
• Accessibility in mind
• and, of course, clean code structure

What I learned

I got introduced to Astro Content Collection when I was building the dynamic part of blog.

• Configuring the collections

const blogCollection = defineCollection({
  type: "content",
  schema: z.object({
    author: z.string().default("Anonymous"),
    title: z.string(),
    description: z.string(),
    image: z
      .object({
        src: z.string(),
        alt: z.string(),
      })
      .default({
        src: "https://placehold.co/1200x800/png?text=NO+IMAGE\\nAVAILABLE",
        alt: "No image found",
      }),
    publishDate: z.date(),
  }),
});

• Dynamically generating pages with [slug].astro

export async function getStaticPaths() {
  const blog = await getCollection("blog");

  return blog.map((entry) => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

• Creating a single token to manage all essential styles

styles/abstracts/_tokens.scss

// base
$base-font-family: var(--ff-primary);
$base-font-size: var(--fs-400);
$base-line-height: 1.5;
// ....

// layout
$container-max-width: 80rem;
$container-padding: var(--size-8);

$section-padding-block: var(--size-13);
// ....

// button
$button-default-border: 0;
$button-default-border-radius: 100vw;
$button-default-background: var(--clr-neutral-300);
$button-default-color: var(--clr-neutral-700);
// ....

Continued development

• Complete the landing page
  • Style system with Sass
  • Tricky mockup images layout
• Add custom '404' page
  • Design the page
• Add custom 'Coming Soon' page
  • Design the page
• Add 'About' page
  • Design the page
• Add 'Careers' page
  • Design the page
  • Make it dynamic
• Add 'Contact' page
  • Forms markup
  • Style system for forms
• Further customize the 'Coming Soon' page (optional)

Useful resources

• Astro Documentation - Tutorial and documentation
• StackOverflow - Always comes to the rescue
• Kevin Powell's YouTube channel - Great resource for learning CSS and Sass

Author

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

I am mostly active on CodePen building and learning stuff.

Acknowledgments

Thanks to Frontend Mentor, I was able to get inspirations and build this project.