Hi, Anastasiia!
Although I don't have access to the Code since the link is not working, I was able to take a look at the website itself and the Inspect tools for responsiveness, as well as a plug-in for accessibility (Silktide).
Responsiveness
- You did a great job with responsiveness on all screen sizes. I even tested on an iPhone 4 screen, and it still looked great.
Accessibility
-
Out of everything on this page, there are only 3 accessibility concerns that shows up based on WCAG 2.1 AA.
-
Missing H1: "Every page should have a clearly defined heading, known as a "H1" (Heading 1). A H1 is the main heading of the page. It helps accessibility by allowing uses to skip to the main content of the page. It helps all users identify what the page is about. It helps SEO by giving special emphasis to the topic of the page. It is not enough to simply include large text. Headings must be coded semantically as <h1> tags, like so:
<h1> Improve your front-end skills by building projects</h1>" - Silktide Accessibility Checker -
Text Contrast: "To comply with WCAG AA, the colour of text must sufficiently contrast with its background color, so that people with moderate visual impairments can read it. The contrast ratio must be at least 4.5:1 for body text, and 3:1 for large text. A much more demanding version of this check (1.4.6) exists for WCAG AAA. Ignoring an issue in this check will also ignore it in that check, and vice versa." - Silktide Accessibility Checker.
- The text color on the bottom of the page has a background of #D6E2F0. With the current text color, #68778D, the contrast ratio is 3.47:1/4.5:1. Making the text color a bit darker, like #535E6E would pass accessibility guidelines with a contrast ratio of 5.01:1. The WCAG Color Contrast Checker is a great tool to triple check your colors!
-
Missing alt text: "Images should specify appropriate alternative text, where appropriate. Alternative text is text that is used in place of an image if it cannot be seen. This is important for users who are blind or partially sighted, who may have the page read to them by a screen-reader. Without alternative text, they will not know what the image is, or what it is for." - Silktide Accessibility Checker.
- Instead of
<img src="./images/image-qr-code.png" />, you can write<img src="./images/image-qr-code.png" alt="QR Code with blue background" />
- Instead of
-
All in all, you did an awesome job. Hope this helps!
