Submitted almost 2 years ago

Home Page Cloning

rymxoxo• 60

@rymxoxo

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

News homepage

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello everyone , This is my first time here and my first time doing this challenge after attending an online course of html and css . And in order to enhance my skills I took this challenge and this is the final result. To be honest , I m not happy 100% of it , because, I was not able to copy and to clone perfectly the design. I have found difficulties to do the job perfectly and since there is no solution provided to the challenge , I find my self here to communicate with you on my code . your remarks are welcome

Community feedback

Liz• 80

@Azulio123

Posted almost 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

rymxoxo• 60

@rymxoxo

Posted almost 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.

Oussama• 0

@osqd98

Posted almost 2 years ago

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

rymxoxo• 60

@rymxoxo

Posted almost 2 years ago

@osqd98 Heyy , Sure

バレンタイン 😈• 64,190

@VCarames

Posted almost 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

rymxoxo• 60

@rymxoxo

Posted almost 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 .

Deborah Robbiano• 600

@debriks

Posted almost 2 years ago

This comment was deleted almost 2 years ago

バレンタイン 😈• 64,190

@VCarames

Posted almost 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>

Deborah Robbiano• 600

@debriks

Posted almost 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.

バレンタイン 😈• 64,190

@VCarames

Posted almost 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

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord