Home Page Cloning

Community feedback

• 

  Liz•80

  @Azulio123Posted about 2 years ago

  Hey Rym!

  Looks like you have got the basic outline, colours, and styling, now it is a matter of tweaking it to make the "new" or blue section the same height as the main picture and the main header rows.

  I think the main issue you are having with fitting it all together is you are using the mobile picture as the main image regardless of the viewport. This is a pretty easy fix because you are already using @media to change things up between viewports. Have the desktop image (which is rectangular) as your main image at the desktop breakpoint and reconfigure your boxes to fit the correct proportions on the page. Then set the mobile image as that main image when you get to the mobile breakpoint (I set it at 650px).

  Columns and rows can be pretty tricky, but if you have an hour to learn how Bootstrap works, it can make outlining more complex layouts like this a lot easier! The documentation for bootstrap is also really handy and I found out from completing this challenge (just yesterday, in fact) that you can tweak all the presets in Bootstrap if you aren't ecstatic with their preset colours, shapes, and "gutters" as they're called.

  I am learning Javascript now and think it's cool you incorporated it and got the hamburger menu on the mobile view. It doesn't quite work for me, but a bit of debugging should have that drawer menu functioning soon!

  I really hoped this help. There are far more knowledgeable people on here that might be able to give you more precise and useful feedback. ^__^'

  Marked as helpful

  1

  ---

  

  rymxoxo•60

  @rymxoxoPosted about 2 years ago

  @Azulio123 Hello Liz , Hello again, sorry for having replied a little late to your message, I was catching up with the deadlines at the university so that's why. Your post just gives me a positive vibe and once I finished reading your posts I felt like I had to do my best to find out more and learn. Thank you for your time and advice dear Liz. As you mentioned, the main one I was facing puts the new section or blue section at the same height as the main image and main header rows. I gave up finding a solution. I will try your advice and I will update my solution.

  1

  

  Oussama•0

  @osqd98Posted about 2 years ago

  @rymxoxo Hello Rym, i am working on it, when i finish it we can share our codes together

  0

  

  rymxoxo•60

  @rymxoxoPosted about 2 years ago

  @osqd98 Heyy , Sure

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Since this is your first challenge after completing "online course of html and css"... I suggest your start with the simple challenges first and and move up from there. That way you can learn how things work in a smaller scale.

  • There needs to be a main and aside element in your HTML code to improve semantics and accessibility.

  • The “images” in this component are purely decorative; They add no value. So their Alt Tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  https://www.w3.org/WAI/tutorials/images/

  • You are using the header element incorrectly. It should only wrapping the nav element.

  • The "new" articles need to be clickable, so the heading should be wrapped in an anchor tag.

  • Your "buttons" were created with the incorrect element. When the user clicks on the button they should be directed to a different part of you site. The Anchor Tag will achieve this.

  • Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

  https://web.dev/learn/design/

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🍂🦃

  Marked as helpful

  0

  ---

  

  rymxoxo•60

  @rymxoxoPosted about 2 years ago

  @vcarames Hello again, sorry for replying to your message a bit late, I was catching up with deadlines at university so that's why. First of all, I want to thank you both for your efforts and for the time you have sacrificed in order to advise me and give the right result to my work. I promise to try to fix the mentioned errors as soon as possible but I don't know if I can update my code or my solution, this is my first time here as I mentioned. But once I do, I'll let you know. Once again thank you .

  0
• 

  Deborah Robbiano•600

  @debriksPosted about 2 years ago

  This comment was deleted about 2 years ago

  0

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @debriks

  Wrapping all the elements inside a main element is semantically incorrect. The main element should only be wrapping the center content and the aside.

  So it should look something like this:

  <body>
     <header>
        <nav></nav>
     </header>
     <main>
        <div class="main-content"></div>
        <aside></aside>
     </main>
     <section></section>
  </body>
  

  1

  

  Deborah Robbiano•600

  @debriksPosted about 2 years ago

  @vcarames ah yes you’re correct! My bad. Just was trying to find an easy way to correct the margin problem but that’s not the way I did it.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @debriks

  You were correct on the using margin to horizontally align it. You can also use flex / grid.

  And on the use of the picture element.

  Marked as helpful

  1