Mobile first- Clipboard landing page (html,css)

Looks great and responds really well 👍

One suggestion is that, try to set the alt text of the images that are purely decorative to alt="", so that assistive devices can ignore them.

Happy coding ✨

Hi

As well as Faris' suggestion, I see some problems in your html at the moment. All very easy to fix ☺

• logo alt needs to say the name of the product! Assistive tech users (and search engines) currently would not know what this site is called from alt="logo" and alt="f-logo"
• don't skip heading levels. There are no h2s at the moment. All headings except your h1 need to change level
• in the footer you have used 3 lists where you should only be using 1. Look into css column properties to do the layout on desktop.
• that list of links also needs wrapping in a nav element
• the social links need labels or screenreader text

Other than that, it looks like your desktop version needs the sizes and alignment adjusting to be like the design (I am viewing on mobile and looks fine on there)

Looking at the css I think you need to spend some time learning how to make styles more reusable. It is highly unusual to see padding adjusted on low level elements like paragraphs. Additionally by using nested element selectors instead of single classes, you are increasing specificity and making styles break if html has to change. (eg Changing heading levels in html means you need to change lots of lines of css, which you wouldn't have to do if styles were tied to a class)

It is clear from the number of media queries you're including that your approach to css is making it more difficult for yourself than it needs to be.

I recommend having a look at css experts writing to improve this area. Especially Andy Bell's site, Rachel Andrew, Heydon Pickering etc... That will help you.

Good luck