Base Apparel

Community feedback

• 

  Abdullah Nassif•405

  @AbNassifPosted over 3 years ago

  A little problem you might be facing with your code performance-wise is that you included both images (desktop sizing and mobile sizing) in the image container. Now as smart as that is(Seriously never thought about that one before), It could affect the site's speed in the long run as you're loading both images in the HTML.

  How to fix that: 1-CSS Approach(Easier and more effective): A good practice would be to not add an image inside the container, but add a background image to the image container itself with css, then change it with media queries(Media queries are essential for the responsivity of the website. This will teach you about it in 7 mins! https://www.youtube.com/watch?v=yU7jJ3NbPdA);

  2-Javascript approach(Good to know how powerful this language is when you want to learn it later on)

  Javascript can change the src of the image while listening to the viewport!

  Design Problems:

  1-To fix the image from overflowing from the page on the desktop, just add a height of 100vh( Means take 100% of the viewport no matter what device is used) and don't assign a width to it nor the parent. This will tell the image to apply width automatically with respect to the height of the image.

  2- Aligning content with fixed margins can only be used for certain cases, learn flexbox, It's super easy and it was created to align items in the easiest way imaginable across all devices(Flexbox with media query will drastically improve your design game)

  If I was you now, I would take a couple of days off of front-end mentor, learn about media queries(would honestly take you a couple of mins to understand how to use it), Then do a flexbox crash course created by "Travesty media". Then I would come back here and apply those concepts to see how much they make things easier.

  Other than that, great job, you seem to understand the fundamentals pretty well, Can't wait to see more of your work!

  Marked as helpful

  0

  ---

  

  Hemant Sirsat•105

  @hemantsirsatPosted over 3 years ago

  @AbNassif Thanks for the suggestions. I'll checkout the crash course you mentioned as well as the youtube video.

  1