Skip to content
OverviewSolutions
13
Comments
44
Aram Nayebbandi
@devaramnye

All comments

  • Aram Nayebbandi•510
    @devaramnye

    Hey,

    I recommend you to have a deeper diver in media query and most of time its from flow more effective or easier to run down if you start with mobile first work flow.

    Marked as helpful
  • Aram Nayebbandi•510
    @devaramnye

    Hello,

    you can center your project by:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center  * To center the items of the flex container horizontally
  align-items: center * To center the items of the flex container vertically
}
    Marked as helpful
  • Aram Nayebbandi•510
    @devaramnye

    Hello,

    you can center your project by:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center  * To center the items of the flex container horizontally
  align-items: center * To center the items of the flex container vertically
}
    Marked as helpful
  • Aram Nayebbandi•510
    @devaramnye

    Hello,

    you can center your project by:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center  * To center the items of the flex container horizontally
  align-items: center * To center the items of the flex container vertically
}

    Keep up you work & happy coding!

    Marked as helpful
  • Aram Nayebbandi•510
    @devaramnye

    Hello there,

    I like your work and I have only one tip for future project's. This block of CSS code is to center your project horizontally & vertically. You did everything already correct in your media query by giving the .wrapper a display: grid & place-content:center but the only thing which is missing is the min-height: 100vh to full fill the requirement to center everything correctly.

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center  * To center the items of the flex container horizontally
  align-items: center * To center the items of the flex container vertically
}

    Keep up you work & happy coding!

    Marked as helpful
  • Aram Nayebbandi•510
    @devaramnye

    Hey,

    I like the way you used media query to sort the order of the grid-items to fit perfectly. You motivated me to re-think about my solution as I used only once media query in this project. Thanks for that impressive example!

    Have a good day & happy coding

  • Aram Nayebbandi•510
    @devaramnye

    Hey there,

    I would recommend you to read more about HTML5 landmarks. Its an important part of being able to create a good structure of your HTML document for readability approach. Therefore you didn't create a correct connection between your label & input element. Inside your label element the attribute for with the value of input should be similar to the attribute id of your input element. As example:

    <form>
  <label for="input">...</label>
  <input id="input" />...
</form>

    and I would suggest you to create a button with the <button> element instead of creating a div. Last but not least I recommend you to not fix your height in your CSS. It should be only used in rare situations and in my last 3 months journey it coursed more problems than fixing ones. The philosophy of a responsive layout should always be "CSS is responsive by its own" and we are coursing the problem of responsibility. The height of an container should always be in relationship with its content. (Just a tip of my road).

    Marked as helpful
  • Aram Nayebbandi•510
    @devaramnye

    Hey,

    this project looks amazing.

    A good approach is practicing HTML5 landmarks to get rid of the div element. It gives the HTML a better structure and a huge advantage for readability. Further your project should be centered in the middle of the screen which you can achieve by giving your body in CSS the properties of:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center  * To center the items of the flex container horizontally
  align-items: center * To center the items of the flex container vertically
}

    Keep up you work & happy coding!

  • Aram Nayebbandi•510
    @devaramnye

    Great work there,

    I recommend you getting rid of div's, instead use landmarks. As example you declared your first div inside your body with an attribute of class with the value of main. You could instead create a <main> landmark which contains the main content of your page. It give a better HTML structure / readability.

    And you missed this part:

    • View the optimal layout depending on their device's screen size

    You can reach the goal by working with media queries and for the image to be responsive, you can use the element picture to have an integrated media query inside your HTML for your image. This project has two different image sizes for depending device.

    You can find the information's of media queries and the element picture on the internet. And you need some more information's about responsibility, you can give yourself a little peek to kevin powells 21 day challange which is for free. It gives a huge knowledge area for your future work with CSS.

  • Aram Nayebbandi•510
    @devaramnye

    I recommend the free responsive course of kevin powell. Its a great 21 day challange and gifts you with alot of informations & knowledge

  • Aram Nayebbandi•510
    @devaramnye

    Good work there,

    I recommend to not aim for pixel perfect. The best approach currently is to follow the importance of semantic HTML markups & landmarks. As example in a HTML document there should be only one h1 element. The next heading continues with h2 h3 h4 and so forth.

    • a good approach is to get away of the div elements because HTML5 gifts us with useful landmarks like header, main, navbar, footer, aside etc. This helps us to structure our HTML for better readability.

    Go and check the landmarks to practice those stuffs. There are alot of infos to grab on the Internet and you wont regret 🌞

    Happy coding and good work! Keep going

    Marked as helpful
  • Aram Nayebbandi•510
    @devaramnye

    Very good work here,

    I just have one suggestion for you to center the whole stuff inside the body in the middle. You have to give your body the properties of:

    body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

    this will make your project look more similar to the previewed one. Happy coding and keep up your big work!

    Marked as helpful
  • Aram Nayebbandi•510
    @devaramnye

    Dude this homepage is amazing ... I love it !!!!

  • Aram Nayebbandi•510
    @devaramnye

    This project would give you a good practice in Grid, just as info. Flexbox is cool, but having the opportunity to use both in different cases is a good point. A specially if you have like in this project where you can build templates with two axis at once.

  • Aram Nayebbandi•510
    @devaramnye

    As there are two images, for mobile and desktop - I would recommend you to use <picture></picture> in your HTML document.

    Here you can read about the The picture element

  • Aram Nayebbandi•510
    @devaramnye

    I recommend to not use fixed width's as it loses responsiveness.

  • Aram Nayebbandi•510
    @devaramnye

    Well done tho,

    I like your design. Only thing I recommend is to give your body a margin for mobile device so it does not take the full size as on my device.

  • Aram Nayebbandi•510
    @devaramnye

    You can center your project for desktop device by selecting your body and giving those properties:

    body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
    Marked as helpful