kebin20/easybank-landing-page

This landing page is designed for a fictional bank company called Easybank, and is built using Tailwind CSS and Vanilla JavaScript. The page has been developed with mobile-first design principles in mind, ensuring optimal user experience across all devices.

About me:

Hey there! I'm a web developer from New Zealand, living in Japan now! I'm always excited to dive into new technologies and keep up with the latest trends. Learning and growing is a huge passion of mine, and I'm constantly looking for ways to improve my skills. Let's build some awesome stuff together!

• 🔭 I’m currently working on an invoicing app project with Vue, Bootstrap & SCSS!

• 🌱 I’m currently learning Ruby and Vue

• 📝 See my blog posts to see my key learning takeaways! kebin20

• 📫 How to reach me [email protected] or 👇

Connect with me:

---

Languages and Tools:

---

Stats:

 

easybank-landing-page's Issues

Make nav "sticky"

• Make the nav component sticky so it stays there while you scroll
• #menu shouldn't need margin (absolutely positioned items don't obey margin)
  • Use top instead

"Why choose Easybank?" grid box-model issues

1. Shouldn't need to show/hide h3 tag

• This should be done with responsive design and changing the text size with media queries
• p-tag also shouldnt need mx-auto

2. You are setting the width of each container as 1/4, which is fine, but then creating the gaps between the content with margins. Use flex-gap for this instead.
3. Unneeded margin beneath image. Again, this is a pretty simple layout (image, title, description), and what you've got seems really complicated! All the vertical margins and text sizes could be done with media queries

"Latest Articles" box model issues

1. You're giving padding to each sub-child inside of the Article card. You should instead wrap the entire content part of the card in a div and set the padding once there.

• Also, use semantic HTML (ul, li, article tags and so on)

<ul>
  <li>
    <a href="...">
      <article>
        <img src="...">
        <div class="px-8 py-10"> <!-- Set the padding once here -->
          <p>Author name</p>
          <h4>Title</h4>
          <p>Description</p>
        </div>
      </article>
    </a>
  </li>
  ...
</ul>

2. You are creating problems for yourself by not wrapping parent containers with padding. If you wrapped the container with some horizontal padding, you wouldn't need to give padding to the title of the block here either. This is a similar issue to the other one, where I stated you should use flex-gap.

3. In general, you are using space (never seen this before btw) where I would just use gap