Responsive landing page using CSS Flex

Community feedback

• 

  Amir Hashemi•480

  @AmirhosseinHashemiPosted over 1 year ago

  Hello my friend

  congratulation for complete this challenge.

  I have some suggestion for you :

  • Try to use semantic tag to create your html code , like main , header, section and etc.
  • I didn't see img tag in your code . Try put your image on img tag.
  • About responsive try to use breaking point number for your media query .

  I write this comment in English because Persian is difficult here :)

  Happy coding

  Marked as helpful

  1

  ---

  

  Danial•10

  @DanialJ-DevPosted over 1 year ago

  @seyyeddev Thank you brother your review was helpful

  I didn't use img tag in HTML, instead I used background in CSS and I knew it was a bad idea XD

  Because I could use background-blend-mode to make the effect for the picture, do you have any idea how to make the effect when I use img tag in HTML?

  0

  

  Amir Hashemi•480

  @AmirhosseinHashemiPosted over 1 year ago

  @DanialJ-Dev

  Your welcome bro

  Usually I use an overlay for my img to create animation and effect on my image . In this case I create a div exactly after my image and apply my style on it. For example in this challenge I used this trick .

  Here you can see my :

  • result
  • code

  I hope you find this helpful.

  Marked as helpful

  1
• 

  Madan Sinha•300

  @lazy4gyanPosted over 1 year ago

  @DanialJ-Dev, congratulations on successfully completing the challenge.

  I would suggest, try to use semantic html instead of non-semantic html this practice will help you in better SEO, readability of code and greater accessibility.

  i.e replace <div >with <section>, wrap your main content with <main></main>.

  Marked as helpful

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

  ---

  • For this demonstration we use css Grid to center the component.

  body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  .container {
  margin: 150px auto;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Danial•10

  @DanialJ-DevPosted over 1 year ago

  @0xAbdulKhalid I did it and it worked perfectly THANKS :)

  0
• 

  _nehal💎•6,710

  @NehalSahu8055Posted over 1 year ago

  When i was a newbie i really struggle a lot making responsive designs

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  Few suggestions regarding design.

  • Use max-width instead of width for responsiveness.
  • <div class="container"> add `role="main"` to make it more accessible to screen readers for visually impaired person.

  <div class="container" role="main">

  • Don't give fix height to the container.

  • Use responsive units(rem, em, %) from next project. Explore respective use cases on google. link

  • Try to add accessibility features like aria, sr-only, title.

  aria : link

  .sr-only:link

  I hope you find this helpful.

  Happy coding😄

  Marked as helpful

  1

  ---

  

  Danial•10

  @DanialJ-DevPosted over 1 year ago

  @NehalSahu8055 Thank u for your helpful review

  Responsive designs are pain in the chest fr XD

  0