Easy Bank UI with Bootstrap and vanila css

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. The layout in desktop and mobile is good, though transitioning from desktop to mobile, in the tablet size or some sort, there are huge white spaces, maybe toning it down could be really great.

  Davide already said great pointers, just going to add some as well

  • your usage of header could have been only containing the navbar and not the hero section. The hero section could have been inside and wrapped by a main tag. This will make a good structure, especially for screen reader user, if they navigate in the main landmark, it will read out your h1 tag. Right now, the header landmark and footer landmark are accessible, and your h1 is not really being read like it is intended.
  • for the hover state of the navbar, if you hover on it, the layout shifts a little up top. What you can do is that, add already the border-bottom but make its color to be transparent, and then on the :hover state, only transition the border-bottom-color. This way, it won't shake the container.
  • avoid using vh on the height like what you did in the text of the hero section. If you tinker the dev tools height, the text goes up and down, depending on the screen which is not ideal. Actually, you don't have to add a height on it, just let it in the flow of the content.
  • avoid multiple h1 tag. Other tags could have been h2. Use the h1 only on the hero section
  • on the Latest Articles section, those four, could have been wrapped inside article element, and then wrapping the whole in a a tag, since it is supposed to be a link that leads to an article a user can read.
  • on the footer element, the easybank logo's alt text should have been easybank because that is the company's name and is descriptive enough. Also it could have been wrapped inside a tag.
  • the social media icons should have been wrapped inside a tags since they are links. Also it should contain a aria-label with the text that depends on what social media it is. Example, `aria-label="facebook"

  Other than those, great job.

  Also addition. Mobile first workflow is really great to be honest. Now why right? For example, if we start in desktop first, then after a while, we are now going to code the mobile flow right, what we normally does it remove stylings, because a mobile layout is just really a one straight layout compare to desktop first.

  Now, if you think of it, why are we removing stylings? Why couldn't we just "add" stylings when we need to. Mobile first solves that. Because your default or base stylings, is for only mobile, a one straight layout. Then if we are transitioning to desktop, you are just adding stylings and it is more correct if you think of it right. One great thought about mobile first.

  Also, just use rem:>>>>

  Marked as helpful

  4

  ---

  

  Abdullah Chowdhury•135

  @AbdullahUCPosted over 3 years ago

  @pikamart You are great, your suggestions were awesome. I hope, I will try to utilize your suggestions in the next project. Thank you very much. Keep helping.

  Happy Programming!

  0
• 

  Davide•1,725

  @Da-vi-dePosted over 3 years ago

  Hi, it's a nice result for this challenge. That's weird, i tried on my mobile and it's perfect.

  • You started the desktop version and you have only a media query in which there's no font-size changes. To avoid any trouble i suggest you to start your projects from mobile version, also for font-size use rem unit it's best suited. If you don't know rem unit rember 1 rem = default root value (16px, unless you need to change it). Following mobile first approach makes everything easier, you can handle your project much better, especially font-size.

  Hope it helps a little, keep coding :-)

  Marked as helpful

  2

  ---

  

  Abdullah Chowdhury•135

  @AbdullahUCPosted over 3 years ago

  @Da-vi-de Yes, Now I got the point. So, I need to use rem instead of px.. Is it important to start with mobile version first? What is the benefit of this?

  Your Suggestion was awsome, I will try to make changes in my methods.. Thank you very much.. Keep helping.

  Happy Programming! :)

  1

  

  Davide•1,725

  @Da-vi-dePosted over 3 years ago

  Raymart perfectly answered your question about mobile first!

  • I add one more thing that i think is underrated but i went mental for it (in the past when i used to code desktop first), it's using those techniques (flexbox and grid) you need for building a responsive layout. Now, everything goes kind of ok when you work on small, mid-small projects, what happens when you will work on bigger ones? A disaster, if you use either flexbox or grid for the largest width, when you resize the page you need to change the behavior of those techniques and trust me it's really hard, the good thing is that you practice a lot the techniques but you end up taking ages to finish your project that it might be far from good! Mobile first instead helps you to understand better how things work and how they are related!

  Happy coding :-)

  Marked as helpful

  1

  

  Abdullah Chowdhury•135

  @AbdullahUCPosted over 3 years ago

  @Da-vi-de Yes, I see. I will try to implement these steps in the next challenge. Thank you very much. Keep helping!!

  0