Hello. I’d like an assessment for my code written for the form styling basics skill test. I’d also be interested in any suggestions for further refinements you may have.
The link to my code is here: https://codepen.io/wruther/pen/YzBVgoM
And here’s the link to the skill test page: https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Styling_basics
Thank you.
Hello! I’d be happy to provide an assessment and suggestions for your form styling code.
HTML Structure: Your HTML structure looks clean and well-organized. Grouping form elements within a <ul> element is a unique approach and aids in keeping elements structured.
CSS Styling:
box-sizing: border-box; globally is a good practice, as it makes managing layouts more predictable.body is simple and effective, setting a nice base for font and color.input, select, button) have a consistent look and feel. The use of font-family: inherit; and font-size: 100%; helps maintain consistency with the overall document font.width: 315px; height: 300px;) can be limiting, especially for responsiveness. Consider using relative units like percentages or max-width for better responsiveness.li) is an innovative way to align labels and fields. Your use of grid-template-columns and column-gap is well-implemented.Responsive Design: There’s no specific mention or implementation of responsive design. Considering various screen sizes and adding media queries could be a beneficial enhancement.
Responsive Design: Implement media queries to ensure the form is responsive and looks good on all devices. You could start with a simple query that adjusts the width of the form on smaller screens.
Accessibility Enhancements:
for attribute.aria-labels where necessary for screen readers.Visual Feedback for Interactive Elements: Adding :hover, :focus, and :active states to buttons and input fields can improve user experience.
Font Fallback: While you’ve specified Helvetica Neue and Helvetica, consider adding a generic fallback such as sans-serif.
Consider Using REM for Font Sizes: Instead of using em, using rem for font sizes can provide more consistency across different elements.
Enhance Button Style: Your button styling is basic. You could add more interactive styles (like changing color or adding a shadow on hover) to make it more engaging.
Color Contrast: Ensure that the color contrast of text and background meets accessibility standards.
This is a strong start! With a few enhancements, particularly in responsive design and interactive feedback, your form will be even more user-friendly and visually appealing.
Thank you for your feedback. I was aiming to fulfill the basic requirements of the assessment, and decided initially not to bother with any enhancements. I figured there were ways to improve on it.
I have an observation and a question:
On #1, going through this course I found that I don’t much care for responsive design. That kind of added hassle will likely lead me to specialize in server-side programming, which I was more interested in to begin with. But it’s certainly worth it to learn client-side design first.
On #7, what exactly do you mean by “meets accessibility standards”? I try to come up with color schemes that are both visually appealing and make text easily readable. I’ve seen examples on the Web of lousy contrast where I could barely even see the text I’m trying to read. But I have no training in graphic design, and I don’t know what color combinations would be considered good or “accessible.”
Thank you again. I may come back to this, but for now I want to complete the advanced styling assessments first.