Mark-up HTML elements.Structure CSS style file.Global Custom properties.Compositional classes.Utility Classes.Block classes.Exceptions.Fix button SVG logo.Write media query for desktop version.
This my attempt on the Frontend Mentor challenge "Product Preview Card."
- Cube.css - I'm still coming to grips with this methodology. I've tried to empliment custom properties and utility classes, but still need more practice and research. I'm reading Andy Bell's blog and project sites.
- Mobile First - Getting the design done using a smaller viewport size seems to help with the larger ones. I'll try to start with a larger viewport in the future to see how that affects the workflow.
- Custom properties - I'm watching videos and reading about how these work in the broader context of a project. As I currently understand, they serve as a centeral location to tweek finished designs.
- Progressive enhancement - Working on this. It is supposedly built into CUBE.css, but I'm still reading and experimenting.
- Accessibility - A big weakness. I'm studying the docs refered to me by FEM reviewers, but currently using HTML semantic tags -- no ARIA attributes, yet. I plan to start emplementing more of them once I get a better handle on the basics of positioning and layout.
My strategy is to keep moving through the projects and not get stuck on some inane detail (which, based on previous experience, will trigger burn out.) Take notes, emplement them the best that I can, and keep logging the miles.
- Continue working on Flex and Grid. I'm still building my intuition with these CSS modules.
- Positioning is still a sticking point. I'm able to get things close, but not close enough to qualify as a direct match to the reference design/image.
- Accessibility - include ARIA attrs.
- CUBE.CSS and how to organize classes and properties in my style sheet.
Will add after submission.