Feedback Page
Technical Description
HTML Techniques Used:
- Employed form, fieldset, and legend tags to group form fields.
- Used input types like text, email, tel, date, file, checkbox, radio, and select.
- Included textarea for multi-line input and datalist for suggestions.
CSS Techniques Used:
- Grouped fields visually with margin, padding, and border-radius.
- Hover and focus styles applied to buttons for interactivity.
- Used :invalid and .error classes for custom validation styles.
Accessibility
Form fields have associated labels for screen readers.
Link to the validation page
Link to the page
Team Page
Technical Description
HTML Techniques Used:
- Used section, div class="card", and img for layout and interactivity.
- Each team member has a card with alt text and expandable detail area triggered on hover.
CSS Techniques Used:
- Cards styled using box-shadow, border-radius, and transition.
- Hover effects use transform: scale() and opacity for visual feedback.
- Flexbox used for responsive layout.
Accessibility
All interactive elements are keyboard navigable. All images and icons have descriptive alt attributes.
Link to the validation page
Link to the page
Content Page
Technical Description
HTML Techniques Used:
- Structured content using h2, p, ul, and a href="#id" for internal links.
- Added a “Go to Top” button using a href="#top" and CSS position: fixed.
CSS Techniques Used:
- Created content sections with background blocks, box shadows, and padding.
- Styled headings hierarchically and included responsive image styles with max-width: 100%.
Accessibility
Color contrast and focus outlines maintained throughout.
Link to the validation page
Link to the page
Challenges and Lessons Learned
Challenge 1: Making forms both aesthetic and fully valid without JavaScript.
Solution: Used advanced HTML5 validation and CSS-only styling for feedback.
Challenge 2: Making team cards expandable without JavaScript.
Solution: Used :hover and max-height transitions for a smooth effect.