News-Homepage

Hello!

About different images displaying on desktop and laptop, there is an actual element for that - picture element. You don't need to specially make it with style display none.

Picture element

But images must have an "alt" attribute. Thats what "alternate text" in your report means.

Also those <blockquote> elements should really be <section> elements, or <article> elements, not blockquote elements.

P.S. You have an unused <ul> element on lines 28 - 29. ;p

Just my 2 cents...

Hello there,

Great job taking on this challenge.

You said you had an issue creating a navbar for the mobile users right? I can give you a step-by-step guide that MIGHT help you if you're interested. Here's how it goes:

I would like to note that you'll need to use Javascript for this. And you don't need to be scared, it's easy.

just follow these steps and try it out and see if it works. If it doesn't you can always reply this thread.

step 1: get your hamburger menu ready. (you can get one from sites like fontawesome.com) placing the hamburger menu just below the nav menu items

step 2: by default most people use the display flex for nav items. I'm also assuming you used that or maybe you used the display inline-block; whichever way you just need to set all the items to a display: block; so each item stacks on top of the other. Something like this:

Home
New
Popular
Trending
Categories

Instead of:
Home New Popular Trending Categories

step 3: the container holding those elements should be given a background color and style it in such a way that it fills up the screen 100vh and width of 100% making sure that all the elements are centered as well. You could also give some margin-top to give space for the hamburger menu and the W logo as well. (make sure you've configured the mobile view section in your chrome dev console while styling all of this).

You can then give the hamburger menu's container or the menu itself depending on the way you want yours a position absolute. making sure that the hamburger menu is nested in some sort of container the nav elements are part of as well. Giving that container a position: relative; and the hamburger menu position: absolute; and styling it in such a way that it stays in the position as desired.

just a little note: at this point you should already give the class holding those nav elements a display: none; so it hides them and then the hamburger should have the CSS property of display: block; so it becomes visible.

In short what I mean is. you should have styled it in such a way that the nav menu are no longer visible and the hamburger is visible.

once you understand it up until this point, please let me know so I can update this thread. The javascript aspect remains from this point.

I know it can be quite confusing, please do let me know if there's any issue you want me to expatriate further.

Hey Deepak, great job on the final project! The navigation is just a flex container with justify-content: space-between and then adding some padding. On one side you have the logo and then on the other you have the contents of the nav. When you choose space-between when applying flex to a div element, it will automatically push the elements in the div apart which creates the desired effect :)

As for the contents of the nav itself, that's simply a ul element and 5 li elements. In order to get the desired effect as seen in the design, you would simply apply display: inline to the li elements which changes the elements from starting on a new one to starting immediately after the last element, so in this case, next to each other.

Then you just add margin-right: [VALUE HERE]px in order to give the li elements space. In order to make sure the last element doesn't have a margin (because it shouldn't as there isn't another element following it) you can do li:last-child { margin-right: 0 } and this will remove the margin on the last element so the added margin doesn't affect the proportions of the nav.

The way I learned this was by watching YouTube videos of websites being designed from scratch! Layout tutorials I find really useful and they can teach you best practices and conventions for designing popular layouts :)