you can test it out here ☁️
built with the help of Claude, directed by a human who still did the thinking ;)
knowpy is an application to brush up on python skills in the era of AI. It contains 31 pages total (1. start, 2.-31. practice runs, 32. test score and resources). through each practice run, there is an optional 2 minute timer as well as a required 'submit' button to check your answers and move on to the next run. this app is hosted on Netlify as a demo and targeted to anyone who needs to refresh their python skills in one place without leetcode anxiety or endless google tabs.
Follow the 30/60/10 rule on every page
- main color - creamy silk #fffcf3
- code box / H1 - charcoal grey #191B1E
- least heirarchy text - burnt umber #34373A
- accents and tiny details - peach #E1B689
- light mode should follow color palette
- dark mode should follow color palette but switched
- icon for color mode should be an apple (software) style toggle switch
-
come to me for the complete design file before initially touching anything, it contains the spacing, specs, margins etc <-- essential
-
drop shadow for all components
- position: x 1 / y 11- blur: 19- spread: 0
- follow this code for any site cards
expand code
/* From Uiverse.io by Yaya12085 */
.task {
position: relative;
color: #2e2e2f;
cursor: move;
background-color: #fff;
padding: 1rem;
border-radius: 8px;
box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
margin-bottom: 1rem;
border: 3px dashed transparent;
max-width: 350px;
}
.task:hover {
box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
border-color: rgba(162, 179, 207, 0.2) !important;
}
.task p {
font-size: 15px;
margin: 1.2rem 0;
}
.tag {
border-radius: 100px;
padding: 4px 13px;
font-size: 12px;
color: #ffffff;
background-color: #1389eb;
}
.tags {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.options {
background: transparent;
border: 0;
color: #c4cad3;
font-size: 17px;
}
.options svg {
fill: #9fa4aa;
width: 20px;
}
.stats {
position: relative;
width: 100%;
color: #9fa4aa;
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.stats div {
margin-right: 1rem;
height: 20px;
display: flex;
align-items: center;
cursor: pointer;
}
.stats svg {
margin-right: 5px;
height: 100%;
stroke: #9fa4aa;
}
.viewer span {
height: 30px;
width: 30px;
background-color: rgb(28, 117, 219);
margin-right: -10px;
border-radius: 50%;
border: 1px solid #fff;
display: grid;
align-items: center;
text-align: center;
font-weight: bold;
color: #fff;
padding: 2px;
}
.viewer span svg {
stroke: #fff;
}
use ratio mathematics for scaling and spacing of fonts to ensure proper visual and processing heirarchy design. multiply or divide by 1.6 as needed to scale, if you are unsure run it by me first
for responsive fonts, use units such as: rem,em, vw, and calc()
- hero header / DotGothic16
- code body / Space Mono
responsive design breakpoints:
- mobile - 360px - 425px
- tablet - 768px - 1024px
- desktop - 1200px - 1440px
- large monitors - 1920px - 2500px
- follow all proper accessibility guidelines for web design before building and styling. go through structures/elements youve alreadyy designed and fix anything you've missed
- the knowpy app loading and response speed should be fast, double check instructions on code/libraries/frameworks under the Constraints section for clear build guidelines / (remind me near the finish so a test can be ran)
-
knowpy's first initial page should be a premium, minimal, enticing and cute introductory page with a brief overview of what the user should expect. include a cute gif snippet showcasing users real time action in the app (code being typed in a code block and passing a test etc).
- be sure to include how this app benefits the user with actual facts, any brief resources that back your statements, and directly talking to the targeted audience who would benefit (ie. coding newbies, test refreshers for data annotation/job positions, memory loss from the use of vibecoding etc.) -
initial overview page should have 'knowpy' in large font with a small/cute and solid color python logo acting as a period
-
remove the main box outline that contains the code block area/test questions/buttons and replace with:
- an outline stroke (.5) of the python logo - color must be alight grey/low opacity variation of #191B1E- this outline stroke of the python logo should be a new, creative container for the test items -
the last page (32.) should conclude a thorough analysis and breakdown of the users test score (large/centered H1 font) with additonal and beneficial cited/listed resources curated specifically to them to - free and trusted platforms that can help them further their education with python/coding in general. never just outright give the user answers, this app is to help them learn.
- remove all unnecessary UI / details
- never integrate obvious AI features (ex. purple gradients, AI verbiage, common AI symbols, etc.)
- all code must always be: - clean, easy to read/understand, consider time/space efficiency for speed/memory/scalability, secure, and use best practices.
- never use unnecessary comments in code
- code must never be bloated, always double check before you are finished
- never use gradiose and unecessary language in comments/documentation
- always use the most secure and up to date libraries and frameworks
- never use libraries and frameworks where it doesn't make sense
- all coding questions, tests, and model responses must be thouroughly researched and checked to ensure accuracy for users
- functionality/memory must never save/cache users inputs or selections unless it is for the same user on the same computer and browser :- ex. user one clicks on demo and completes any number of pages with their selections/inputs. Seperate user two clicks on demo, all memory/cache must be fresh for user two, and they should never see what any other user has stored/completed aside from the user themselves.
- a coding question/test must not let the user move forward onto the next question until the current question has passed all tests after user clicks/taps on the 'RUN & REVIEW' button.
- a disclaimer must be presented and acknowledged on the first page before the user can move forward to the app (do some research to accurately figure out how it should be worded and what should be included)disclaimer must briefly and accurately state that any given information and responses pertaining to answer accuracy within the app should be taken lightly and not as complete accurate information - but back up any test/response accuracy with cited sources that you've included in knowpy
- you must display any issue or warning messages to the user that may arise. Use full contrast as the text, body, box outline stroke(.5), and a 70% lighter variation of the same color as the box background fill to ensure proper contrast accessibility - red: issues, yellow: warnings, green: confirmations
- NEVER push code without consent, this includes anything to do with git regardless if you see .gitignore in the files. I will do entire check of design, codebase and security, and push myself or give you the go ahead
- before completion on anything within knowpy, you must do a complete and thorough evaluation of all code, information, resources, and any potentional bugs/security issues etc. before you submit to me for review, you must then give me a detailed and uniform list showing me that you have checked off instructions.
- remove all 'next' constraints on the test for the time being (I need to go through each page to see how it looks, including the final page), ill have you put it back after im done inspecting the overall design
- add a drop shadow to interactible UI and a hover for clickable links/buttons in a lighter variant color of #E1B689 (for accessibility best practices, users need to know that things are interactable and clickable etc)
- add the following effect to the timer componenets: - when the timer button is tapped/clicked, the timer numbers should turn red and the timer button should have a red fill that progressively empties from right to left in sync with the specified time left
- fix the text color heirarchy on pg 1. bottom box 'Before you start'. Titles should have dark/bold imortance, body text should be regular with about 70% opacity or the color #34373A which I listed above, and acknowledgements/notices within in the same box or area should signal the users attention. all of the text in this box is currently the same color and weight, UI/UX needs to be prioritized