Skip to content projects

Knitting Pro

Dynamic components and pages
svelte
json
scss
html
Visual of the project Visual of the project

Overview

Knitting Pro Website hero section with a large image of Yarn and Navigation menus

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.

Highlight

  • Dynamic Routing1
  • Responsive CSS2
  • Components and Styles3

Dynamic

Showing dynamic components based on value and screen size

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.

Responsive

Multiple display sizes showing responsiveness of the layout

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.

Components

Showing components

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.

Learned

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.