U of M Weightlifting Website
Problem Statement
Design a website on any topic from scratch using HTML/CSS/JavaScript, with at least 3 pages, with CSS media queries for mobile, tablet, and desktop screen sizes for each page, with the site passing tests from accessibility validators such as aXe DevTools and WAVE.
How might I design a website that is aesthetically pleasing, while also adhering to basic accessibility concepts?
Central Question
Tools
-
Visual Studio Code
-
CSS/HTML/JavaScript
-
Github
-
Consistency in design language (formatting, placement of content within the page, fonts, colors, etc.) makes your job a lot easier so that you don’t have to spend unnecessary time coming up with new design ideas.
-
Unfortunately, what looks best in terms of aesthetic appeal on a website isn’t always necessarily accessible. For example, I embedded a YouTube video on the main page of the website to add some extra flair to the home page, but it raised a bunch of errors on both the accessibility validators I used, so I had to change it to an image hyperlink that led to the corresponding video instead.
-
Additionally, I had to constantly experiment with different font sizes, padding/border/margins, grid/flex layouts, and more for each of the three screen sizes for each page, in order to maintain consistency in visual appeal.