Knitting Pro course website is a mock website designed by Kevin Powell and given to students as a challenge in his Demystified CSS paid course.
Meant to be a CSS class project I took the chance to use SvelteKit and learn how I would handle CSS utility classes and styled components.
Using SvelteKit file based routing to pull data from a mock JSON response. Layouts and error defaults. Dynamic slug value to provide courses from each category. Header changes based on home/category.
The goal of the challenge was to code from a design that provided three resolution to follow. Creating responsive breakpoints and utility classes to meet specifications provided.
Building a design system using CSS utility classes and component styles. Component styles based on data set values. Responsive to display correct content for based on view port resolution.
How to use the new routing and layouts in SvelteKit. Using data-sets for dynamic styling components based on the value of the data. Passing url paramaters as props to get data from a JSON or request response.
Check out the code repo or view the active demo.