An informative hotel website created with only vanilla HTML and CSS showcasing consistent theming along three pages of the website and the use of "flexbox" in CSS to manipulate the look and responsiveness of the page.
Project 2 for the week of April 24-28, 2023, in the Brainnest Frontend Development Industry Training scope.
- Font: Roboto
- Not necessarily mobile-responsive.
https://jo-sean.github.io/spaFrontEndWebsite/
- HTML5 & CSS3
- Canva - for logo design, page design samples matching specifications (can be found in img/design folder) and photos
- Visual Studio Code
This checklist was created from https://web.dev/accessible/ and accessibility features applicable to this project were used as follows:
-
Logical tab order: Arrangement of elements in the DOM should be in logical order (moving from left to right, from the top to the bottom of the page while moving focus with keyboard (TAB - SHIFT+TAB))
-
Semantic HTML for easy keyboard use: Interactive parts should not be defined with non-interactive elements (div, span, etc.), semantic HTML elements should be used for easy keyboard support (a, button, input, textarea, etc.)
-
Links vs buttons:
If clicking will perform action ON PAGE -> button should be used
If clicking will NAVIGATE to a new page -> link (<a>) should be used
-
Use semantically rich HTML elements
-
Use headings: h1-h6 elements should be used to outline the page
-
Use landmarks: HTML5 elements such as main, nav, and aside should be usedd to aid navigation
-
Bypass repetitive content: skip links can be used to bypass repetitive navigation in the site header
-
Labels and text alternatives: Labels and text alternatives should be used for accessible names
-
Accessible responsive design: The viewport meta tag should be used and users should be allowed to zoom (not mobile-responsive for this project).
-
Content ordering/reordering: The visual order of an element should not be changed with CSS. The order in the source should be changed rather than CSS.