Frontend Mentor | easybank-landing-page-master coding challenge solution

Community feedback

tediko• 6,680

@tediko

Posted over 3 years ago

Hello, Jay! 👋

Nice to see you posting another challenge! Your page responds well and you put effort to create nice hovers. Kudos for menu hamburger animation 😅 There is not much, but what I can suggest is:

When your menu is open on mobile, disable scrolling on your site.
I believe you forgot to remove padding-right from .content-box:not(:last-child) on mobile and your last item is now missplaced a bit.
You thought about accessibility with focus states, but i think the outline for buttons is invisible and not intuitive i think it should catch in the eye after you focus them.
Lastly, since you are using Sass i would recommend you to take a look at Block, Element, Modifier methodology.

Good luck with that, have fun coding! 💪

Jay• 695

@Junjiequan

Posted over 3 years ago

@tediko

Thank you for the suggestions.

I've never thought about disable scrolling when the nav menu popup, thanks for mentioning me.

I also noticed :focus-visible from your lately posted solution, it was indeed the best solution to make cleaner focus effect for non-keyboard users(the majority!).

As for the BEM methodology, I think its really cool and good to know there is such a standard for name styling. I've tried once but I wasn't really sure that was for me. Nevertheless, I'm gonna give it another try for the next challenge, let see how it goes.

you too have fun coding ;)

Roc Tanweer• 2,500

@RocTanweer

Posted over 3 years ago

@a331998513 Hello 👋

Since there is no other way to contact you, so I am asking here...

How did you hosted multiple projects in the same repo?

I tried to understand, but I couldn't.

I thought you made an index.html in the root directory of the repo and navigated all the projects from that like a multi-page website but I couldn't find the index.html that represents yourname.github.io/projects

Help me

Jay• 695

@Junjiequan

Posted over 3 years ago

@RocTanweer hey,

I didn't make anything in the root except the theme(_config.yml) & readme.

When I start a new project, I just simply drag new design material folder into my vscode (connected to the projects repository) then create everything(.js .html .css etc) inside the folder.

In my case, https://a331998513.github.io/projects/ is the root and you don't need to create index.html to jump to the other folders inside the root.

you just simply add the folder name after the root url

https://a331998513.github.io/projects/ **FOLDER NAME**

Example https://a331998513.github.io/projects/easybank-landing-page-master

You don't even need to include /index.html at the end. coz by default it will display .github.io/blablabla/folder blabla/index.html

Jay• 695

@Junjiequan

Posted over 3 years ago

@RocTanweer

if you wonder how my readme looks like, here it is.

## Frontend Mentor challenge

| Projects-name | Repo-link |
| ------------- | ------------- |
| 1. [Promotional Event](https://a331998513.github.io/projects/pricebox/)  | [Repo](https://github.com/a331998513/projects/tree/main/pricebox)  |
| 2. [Feature Box](https://a331998513.github.io/projects/Featurebox/) | [Repo](https://github.com/a331998513/projects/tree/main/Featurebox)  |
| 3. [Base Apparel coming soon page](https://a331998513.github.io/projects/BeautyMain/index.html) | [Repo](https://github.com/a331998513/projects/tree/main/BeautyMain) |
| 4. [fylo-data-storage-component-master](https://a331998513.github.io/projects/fylo-data-storage-component-master/) | [Repo](https://github.com/a331998513/projects/tree/main/fylo-data-storage-component-master) |
| 5. [intro-component-with-signup-form-master](https://a331998513.github.io/projects/intro-component-with-signup-form-master/) | [Repo]

Roc Tanweer• 2,500

@RocTanweer

Posted over 3 years ago

@a331998513 how did you design the yourname.github.io/projects ? It's like a website which navigate through all the projects, that why I thought to have a index.html in the root...

I understand the part, how you navigate through the different projects but couldn't understand how you design yourname.github.io/projects

I am sorry to disturb to but I tried to do these stuff a month ago but couldn't, now I saw you so I am asking you 🙏

Roc Tanweer• 2,500

@RocTanweer

Posted over 3 years ago

@a331998513 or is it just rendering the readme.md file by default from GitHub pages?

Jay• 695

@Junjiequan

Posted over 3 years ago

@RocTanweer

Ah, I misunderstood you. 😅

Yes. readme is rendered by default. I didn't design that page, I just selected a theme.

You can find theme in Settings > GitHub Pages > Change theme

Roc Tanweer• 2,500

@RocTanweer

Posted over 3 years ago

@a331998513 Thank you

easybank-landing-page-master

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community