Blogr Landing Page with Javascript

Hi Brandon

I saw your message about needing some feedback on your projects. One thing to point out is that when you submit your project, you will be able to see solutions of the same project done by others. It is also important to set time and go through one or more solutions, just to feel and see how others managed to workout the same challenge. You can also make use of the Discord channel to post your challenge in the #finished-projects just to widen your audience. Having said that here is my feedback:

1. Well done for using semantic elements such as the mainand the footer, those are among the backbone of most sites.
2. I see that in your HTML, with images, where there is images for desktop and mobile , you have opted to list them . They are some techniques that are use to handle images which includes the Responsive Images 101, Part 6: Picture Element. Hiding the images using css, will work but it is not recommended
3. alt values are used by assistive technology to convey the message that is carried in an image. Hence alt values should be specific and descriptive. If the image is for decorative purposes , use an alt value which is empty. alt=""
4. as mentioned earlier , always use elements that are created for that specific purpose ahead of elements such as divs. I refer to the mobile version when the menu control is handled by an image. Interaction in this case should at least be handled by a button, click events should not be put on images or divs - it will require a lot more code to make it work for assistive technology.
5. include a modern css reset stylesheet like the one by Andy Bell.
6. Font-sizes should be written in rems but not in px, see the following article for a detailed explanation. why font-sizes should never be in px
7. make your css rules as simple as possible , avoid something like the following if possible .nav-elements ul li a