im not sure of what i did with the media query and i didnt know how to make sure the size was appropriated for mobile devices. also, added a :hover in one of the anchor tags (cancel) to alter the opacity in active state (0.5 initial opacity to 1 in hover state)
tried to use flex hehe, feedback and comments on what else i need to work on are welcome~
Hello @tonsz, I hope this comment finds you well you have done marvelous work!! I saw the report that the website provides to you and the code, and I do you think about making some small changes to your code to fix the Accessibility issue : That issue means that you need to put the heading elements in numerical order (i.e. h1, h2, h3, h4...) why is that? because when people use screen readers the screen reader starts by reading the heading from h1 to h6 assuming that it contains important information about what is on the page so you just use them in order and you can change the size with CSS (i.e. h1 { font-size: 24px;} it makes the h1 looks more like h2) and that is it about the report edit this one on GitHub and wait two minutes and generate a new report. about the media query, you wrote it right 100% and I think it does its work perfectly as the website is totally responsive. about mobile devices, you can use chrome dev. tools to make sure that the size is appropriate (i.e. press F12 on the keyboard when you need to open chrome dev. tools and after that in its header there is an icon that looks like a mobile phone and a tablet click on it, it will show you what it will look like on mobile devices if you could not find the icon just after opening chrome dev. tools press Ctrl + Shift + M it does the same) and after all, you have done excellent work keep up the good work and do your best 💖.
Hello @mayanksetia13, I hope this comment finds you well you have done marvelous work!! I saw the report that the website provides to you and the code, and I suggest you make some changes to your code : 1- For the Accessibility Issues : a - Images must have alternate text => you must put an "alt" attribute in the image tag in the HTML file and put a descriptive line about what is in the photo to make it easier for people who use screen readers. b - Document should have one main landmark, All page content should be contained by landmarks => for these issues you just can change the first "div" tag that has the "class: main" to make it a "main" tag, why is that? this is called semantic HTML and you use it to make the HTML more comprehensible by better defining the different sections and layout of web pages. c - Page should contain a level-one heading => for the same reason of the screen readers when you use the heading element (i.e. h1, h2, h3 ...) you should use them in order so the first one in the page should be h1 and the second h2 and so on because screen readers when reading the screen starts with heading assuming that it contains important information about what is in the page so you just use them in order and you can change the size with CSS (i.e. h1 { font-size: 24px;} it makes the h1 looks more like h2). d - <ul> and <ol> must only directly contain <li>, or <template> elements => here you just need to nest the span element in the li element because in the ul element it is preferred not to put any thing in it except the li, script and template elements. After these edits, you will still have 3 issues with the HTML validations you can solve them by : a - Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections => here you just can use either the h2 element in the first li and change its size by CSS or just change section tag by div tag but I would prefer to use the first solution to use the order heading elements along with the semantic HTML it will make better SEO and Accessibility in your website. b - The element button must not appear as a descendant of the "a" element => I think you put the button element inside an anchor element to make it clickable you do not need to do it the button is already clickable and if have done it to make the mouse looks like a pointer you just need to make it with CSS (i.e. .class-name {Cursor: pointer;}) it will make the button looks like an anchor element without putting it inside an anchor element. I hope I helped you with this comment please try to apply those changes in your Github repo. and come back here and click the view report button and after that click generate new report button after 1 or 2 minutes from your changes to the code in Github. if any new issues have appeared I will happily help in solving them keep up the good work ❤.
