Welcome to my Code the Dream Preworkportfolio — a structured journey through drawing, animation, and interactive programming using JavaScript and p5.js. This repo captures my learning, coding practice, and reflections as I complete the Intro to JS curriculum on Khan Academy
Each section is organized into folders by topic, with working sketches in sketch.js, supporting files, and journal entries. I've treated this project like a real developer would: with version control, clean structure, and thoughtful commit messages.
## 🗂️ Folder Structure
| Section | Folder Name | Description |
| ------- | ---------------------------- | ------------------------------------- |
| 01 | `01_drawing_basics` | Circles, coordinates, simple shapes |
| 02 | `02_coloring` | Using fill, stroke, RGB, HSL |
| 03 | `03_variables` | Storing values, reusability |
| 04 | `04_animation_basics` | Movement, `draw()`, `frameRate()` |
| 05 | `05_interactive_programs` | Mouse input, tracking, interactions |
| 06 | `06_resizing_with_variables` | Expressions and proportions |
| 07 | `07_text_and_strings` | Fonts, text placement, tracking text |
| 08 | `08_functions` | Custom functions, parameters, returns |
| 09 | `09_logic_and_if_statements` | If/else, conditionals, boolean logic |
| 10 | `10_looping` | While loops, for loops, repetition |
| 11 | `11_arrays` | Storing multiple values |
| 12 | `12_objects` | Key-value pairs, object use cases |
| 13 | `13_object_oriented_design` | Object types, methods, inheritance |
> Each folder contains working p5.js sketches, broken into:
> index.html – main canvas file
> sketch.js – code for the lesson
> style.css – optional styling##
Current Project: Simple Frog Face Sketch
🔹 Location: 01_drawing_basics/JustStart/
This was my first creative project using ellipse(x, y, w, h). I built a simple frog face by layering ellipses with custom positions. I ran into some beginner errors (like missing semicolons), but I fixed them and learned how the coordinate system really works.
🔹 Personal Learning Goals
🔹 Technologies
🔹 License
This is part of my personal learning journey and shared as a public repo to reflect my commitment and growth as a developer in the Code the Dream program.
GitHub: qoryhanisagal: https://github.com/qoryhanisagal
🔹 Entry 01: Programming Basics (June 18, 2025)
🔹 Entry 02: Drawing Basics (June 18, 2025)
🔹 Entry 03 : Snowman ( June 19, 2025)
🔹 Entry 4: Futuristic Robot (June 20, 2025)
🔹 Entry 5: Steps 8 & 9: Title Labels + Red & Gold Buttons
🔹 Entry 6: Sunny Snowy Day – Coloring the Sky and Scene
🔹 Entry 7 Final Breakfast Plate