Master the game one move at a time
This page explains how I applied WebDev1 concepts to build a more complex and responsive version of the Chess Strategy Guide website.
The site uses semantic elements such as <header>, <nav>,
<main>, <section>, <article> and
<footer>. This improves readability for both users and screen readers.
Flexbox and CSS Grid are used to create multi-column layouts that collapse into a single column on small screens. Tables are wrapped in a scrollable container so they remain usable on mobile devices.
The colour palette is inspired by a chessboard: dark backgrounds, light text and a gold accent colour. A single Google font is applied consistently to headings and body text to keep the design cohesive.
JavaScript is used to enhance usability rather than replace HTML and CSS. The script performs three key tasks:
These features make the site feel more interactive while still being accessible. All interactive controls are buttons with clear labels and keyboard support.
For the dynamic part of the assignment, I installed WordPress on my SCU cPanel account. I configured a small chess blog that matches the visual style of this static site.
The navigation bar on every static page includes a link to the WordPress blog so users can move smoothly between the static and dynamic parts of the website.
Building a public website involves more than just code. It also requires responsible behaviour around users, content and data.
The site follows accessibility principles such as clear headings, sufficient colour contrast, descriptive link text and alternative text for images. Interactive components can be reached with the keyboard. Also, ARIA attributes are used where necessary to improve screen reader support.
All written content is my own work. Images are being taken from free-to-use libraries with attribution when required. I avoid copying opening explanations from other websites.
The static site does not collect personal data. On WordPress I only enable the minimum necessary features and keep plugins updated to reduce security risks. If comments are enabled, I moderate them and avoid asking users for sensitive information.
Through this project I moved from building a simple static page to designing a small multi-page website with responsive layouts, interactivity and a connected CMS. Planning the wireframes first made it easier to structure each page around a clear purpose instead of adding content randomly.
I now feel more confident in separating concerns i.e HTML for structure, CSS for design and JavaScript for behaviour. Understanding accessibility and ethical issues has also changed how I think about real users, not just code.