https://github.com/cholis04/easybank-landing-page-master

This is my solution to the Easybank Landing Page challenge on Frontend Mentor.
https://github.com/cholis04/easybank-landing-page-master

accessibility frontend-web frontendmentor frontendmentor-challenge html5 landing-page parcel parcel-bundler sass typescript

Last synced: about 8 hours ago
JSON representation

This is my solution to the Easybank Landing Page challenge on Frontend Mentor.

• Host: GitHub
• URL: https://github.com/cholis04/easybank-landing-page-master
• Owner: cholis04
• Created: 2022-07-17T23:55:57.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-24T08:09:18.000Z (over 2 years ago)
• Last Synced: 2023-03-05T15:31:56.413Z (over 1 year ago)
• Topics: accessibility, frontend-web, frontendmentor, frontendmentor-challenge, html5, landing-page, parcel, parcel-bundler, sass, typescript
• Language: SCSS
• Homepage: https://easybank-landing-page-master-beta-six.vercel.app/
• Size: 1.57 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Easybank landing page solution

This is a solution to the [Easybank landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/easybank-landing-page-WaUhkoDN). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## Overview

### The Challenge

- [X] View the optimal layout for the site depending on their device's screen size

- [X] See hover states for all interactive elements on the page

### Screenshot

#### Desktop

![Easybank landing page (Desktop) - Intro](./screenshots/Screenshot-intro.png)

![Easybank landing page (Desktop) - Aside & Footer](./screenshots/Screenshot-aside-footer.png)

#### Tablet

![Easybank landing page (Tablet) - Feature](./screenshots/Screenshot-tablet-feature.png)

#### Mobile

![Easybank landing page (Mobile) - Open Menu](./screenshots/Screenshot-mobile-open-menu.png)

![Easybank landing page (Mobile) - Footer](./screenshots/Screenshot-mobile-footer.png)

### Links

- Live Site URL: [https://easybank-landing-page-master-beta-six.vercel.app/](https://easybank-landing-page-master-beta-six.vercel.app/)

- Repository URL: [https://github.com/cholis04/easybank-landing-page-master](https://github.com/cholis04/easybank-landing-page-master)

## My process

In this challenge, I want to focus on improving page layouts with good structure which will indirectly improve page accessibility.

### Built with

I'm just using a simple setup, but I need to make sure that my code runs correctly in all web browsers. Here's the technology I use:

- HTML5

- [Sass](https://sass-lang.com/) - (CSS preprocessor)

- [Typescript](https://www.typescriptlang.org/) - (JavaScript with syntax for types)

- [Parcel](https://parceljs.org/) - (Build tool for web)

From this technology, it allows me to develop simple sites written such as HTML, CSS and Javascript with minimal configuration thanks to Parcel which has taken care of it.

### What I Learned

1. Improved ability to specify tags on **page layout** for designs to be worked on.

2. Understand the use of semantic tags for **accessibility**.

### Useful resources

- [https://www.a11ymatters.com/pattern/mobile-nav/](https://www.a11ymatters.com/pattern/mobile-nav/)

- [https://www.w3.org/WAI/ARIA/apg/example-index/landmarks/HTML5.html](https://www.w3.org/WAI/ARIA/apg/example-index/landmarks/HTML5.html)

- [https://docs.emmet.io/cheat-sheet/](https://docs.emmet.io/cheat-sheet/)

## Author

- Website - [https://cholis04.github.io](https://cholis04.github.io)

- Frontend Mentor - [@cholis04](https://www.frontendmentor.io/profile/cholis04)

- Dribbble - [cholis04](https://dribbble.com/cholis04)

- Instagram - [@cholis04](https://instagram.com/cholis04)

- Codepen - [cholis04](https://codepen.io/cholis04)

## Acknowledgments

Many thanks to anyone who provided feedback.