Jason Knight
1 min readJul 11, 2022

--

Sadly for such a simple demo you're riddled with bad practices and non-semantic markup.

You've got a DIV doing H1's job, H1 doing H2's job, DIV.main for nothing, no NAV, what's clearly not part of the page headier inside the header tag -- aka stuff that belongs inside MAIN -- presentational image in the markup, no list for an obvious list, absolute positioningin doing fllex+flow's job like it's still 2008, pointless classes liek "Btn" when you've got a perfectly good parent to hook off of, and even with the translucent gradient sections like "watch video" don't meet accessibility minimums.

CErtainly not helping is the archaic X-UA rubbish that only exists to tell IE not to blakclist the page to compatibility mode, and your stylesheet LINK lacking media="screen" when said layout is trash for printl, and meaningless to speech / aural, braille, and search.

Remember the rule: if you see a rel="stylesheet" lacking media="" with a proper value, or set to media="all" you are in all likelihood looking at either ignorance, incompetence, or willfull ineptitude.

Ifnorance is forgivable. It's not even an insult, just means you don't know any better. You can fix ignorant. It's the other two you've got to watch out for, when people who shouild know better (framework and tutorial makers) do it, and everyone else just blindly copies that.

You're also doing yourself no favors with the pex metrics. and raster images. Again this isn't 2008.

--

--

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse

No responses yet