Product Landing Page: Version 2

Can i get some suggestions and advice about the project and also how I could have improved it.
Link:-

1 Like

hi @preetirajak333

in my oppinion, there are to many @media query.
instead of styling each .image class 1- 3 with the same attribute value, why dont try assigned 1 class for all images. i.e: .prod-img . no offend

Okay thank you so much for your suggestion. Meant alot! :blush:

Hi @preetirajak333 ! I see a lot of improvements and your projects have started looking good . Congrats !

Now we will need to concentrate on how effectively we can develop layouts and also meet responsive needs.

I had lot of points to add ,so thought it is better if I show it to you in the code you have written. So rewrote the code with some best practices ,but kept the look and feel as the same. Apologies on stealing your project ! :slight_smile:

Few important points :

  1. Start leveraging the power of percentages for width of elements
  2. Avoid using label tags wrapper over input element.Labels are inline elements.
    3.Avoid using br tags to move to the next line or for space.Use margins.
    4.Use id for unique styles and class for common styles.
    5.Instead of assigning id for every element ,use descendant selector method. ex img inside a #id section can be selected as #section img{}
    6.Always have a track of where your div’s start and end.If its hard to track in codepen ,start using an IDE.I recommend VSCode.
    7.As we start using percentages and flex,you will realize how powerful they are in making the site responsive with minimal code. i.e : your media query will be very minimal . Mine is hardly 5 lines but still works for all devices.

Refer Code : https://codepen.io/Arvind_ts/full/JjGLBrZ

Responsive video :https://fluvid.com/videos/detail/4EjRF9p92CBm-BD5

Please spend some time going through the codepen I have shared and do a comparison with yours. And most important note is do not get overwhelmed or doubt your code.It will start making sense as you progress.

Hit me up if you have any questions or need some detailed explanations.Cheers !

3 Likes

Thank you so much for putting such great efforts. It is amazing to see that! And surely I’ll start implementing it. And will let you know if came across any doubts. Thanks once again. Have a great day! :smile:

1 Like

Hey! I liked your classic product landing page.

Here is my 3rd Project Product landing page.
Check it out :wink:

1 Like

Hey @ajayboro7277 Three things that I was able to quickly notice

  1. You need not refer # header # logo like this.Id selectors are meant to be unique meaning that there is only element in the html that has the id.So you can directly refer with that id eg: #logo alone should be enough,
    2.Add html{scroll-behavior:smooth;} to smoothen scrolling across .
    3.There is still work needed on the media query because as I scale down , a horizontal scroll bar is introduced meaning that You still need to effectively handle width of your wrraping containers to match the screen size.

Hit me up for any questions.Cheers and keep Coding !

1 Like

I appreciate your feedback.
I’ll update it ASAP!

Hey! I have updated the Landing Page
Check it out