codecamp tools concept & design

`@todo`

[x] make codecamp tools concept & design
- @input :package: what have we built hackmd from #45
- @input :package: history content slides from #45
- @input :package: brief summary slide deck from #42
- @input :package: concept outline description from #46
- [ ] brainstorm UI/UX
- [x] iteration1 - create wireframes
  - @output :package: figma wireframe1 from comment
- [x] iteration2 - create wireframes
  - @output 📦 : figma wireframe 2 from comment
- [x] iteration3 - create wireframes
  - @output 📦 : figma wireframe 3 from comment
  - [x] iteration4 - create wireframes
  - @output 📦 : figma wireframe 4 from comment
  - [x] iteration5 - create wireframes
  - @output 📦 : figma wireframe 5 from comment
  - [x] iteration6 - create wireframes
  - @output 📦 : figma wireframe 6 from comment
  - [x] iteration7 - create wireframes
  - @output 📦 : figma wireframe 7 from comment
  - [x] iteration8 - create wireframes
  - @output 📦 : figma wireframe 8 from comment
- [x] iteration 9 - create wireframes
  - @output :package: figma wireframe 9 from comment
- [x] iteration 10 - create wireframes
  - @output :package: figma wireframe 10 from comment
- [x] iteration 11 - create wireframes
  - @output :package: figma wireframe 11 from comment
  - [x] iteration 12 - create wireframes
  - @output :package: figma wireframe 12 from comment
  - [x] iteration 13 - create wireframes
  - @output :package: figma wireframe 13 from comment
  - [x] iteration 14 - create Hi-Fi Designs
  - @output :package: figma wireframe 13 from comment
  - [x] iteration 15 - create Hi-Fi Designs
  - @output :package: figma wireframe 13 from comment
- [ ] create slides, wireframes and markdown files
- @output :question: codecamp viewer slides
- next #62
- @output :question: codecamp viewer linked markdown file per slide in "./slides/<slidename>.md"
- next #62
- @output :question: codecamp viewer wireframes
- next #62
- @output :question: codecamp generator slides
- next #62
- @output :question: codecamp generator linked markdown file per slide in "./slides/<slidename>.md"
- next #62
- @output :question: codecamp generator wireframes
- next #62

`@info`

! Important : Skip the design/implementation of Code Camp to keep things simple for now

worklog video 2022.03.01 : Aspects slides : How to create your Virtual Code Camp?

worklog 5 2022.07.06

done iteration1 - create wireframes - 3.34 hours
- @output :package: figma wireframe1

feedback 2022.07.13

here are two links you could check for details about codecamps:

the second part of my old comment https://github.com/wizardamigos/wizardamigos.github.io/issues/105#issuecomment-1174018830
the worklog from mimi here from the 3rd of april https://github.com/wizardamigos/wizardamigos.github.io/issues/88#issuecomment-1086771098
- you need to watch the whole thing - it doesnt start with codecamp information :-)
here is a little screencast where i try to explain it more, because you asked in your worklog :-)

example

I think what you found is a cool example of a little "code camp curriculum" What is important to keep in mind is that a teacher might select lessons, but it is not clear how many lessons and each lesson will have a few prerequisites, for example the data could look like:

{
 "lesson1": ["lesson2", "leeson5"],
 "lesson2": ["lesson3", "leeson5"],
 "lesson3": ["lesson4", "leeson6"],
 "lesson4": [],
 "lesson5": [],
 "lesson6": ["lesson7"],
 "lesson7": [],
}

The data would look more complex, but in essence there are 7 lessons in this code camp and for each we list the prerequisite lessons. We can write a program later on to draw the little curriculum skilltree automatically. It doesn't matter if there are 7 or 100 lessons. This is up to the teacher and the lessons they make.

when there are only a few lessons, it is easy to navigate, but it gets more difficult if there are a lot of lessons involved.

Also - we probably need to keep in mind, that a single lesson could have 0 or 2 prerequisite lessons, but it is also possible that a simple lesson will have 20 prerequisite lessons, which might be more difficult to visualize if we don't have a good strategy.

Lastly I would ask you to record a worklog video to explain your previous wireframes. You linked it above as an output and I opened it, but I don't really understand it well. It would be more important to know your thoughts around it so i can give proper feedback :-)

worklog 6 2022.07.18

@output :package: CODECAMP NOTE worklog 7 2022.07.18
- @output :package: figma wireframe1
- done iteration 2 - create wireframes - 2.31 hours

feedback 2-22.07.19

worklog 6 2022.07.18

@output package CODECAMP.docx

worklog 7 2022.07.18

@output package figma wireframe1

done iteration 2 - create wireframes - 2.31 hours

thx. agree with the above (just if you could update the .docx file to maybe hackmd so i can read it on my computer

old Codecamp/Logo + notification icon

curriculum
- courses (1,2,3,4,...)
- course details
notes
chats
events
schedules

next we dont need to focus on the "profile page" at the moment we will have something like the above for superWizard001 :-) But let's skip that for now.

But the upper parts seems to have a menu bar with 4-5 icons. i guess its:

schedule
events
notes
curriculum
chats
profile

The menu bar and all that should be move to the bottom. We have it like that on all other apps and components :-)

latest

:+1: for the notification bar on the bottom
now the menu has only
- events
- chats
- calendar
- workshops

I like it.

workshops is better than curriculum.
events is awesome and schedule should be a detail of an event
chats is great too
profile is missing. we dont design a profil page, but a little icon for the user to see who they are should still be there i think. that was good.

why does the top menu repeat in the sidebar?

Can we instead move the top and side bar menu bar on the bottom?

All of this needs to be "mobile first" :-) A user needs to be able to use it from mobile device.

can we do that in the net iteration of the wireframe?

The codecamp page is more an overview page

Also imagine that:

when the user clicks on his profile or avatar, their profile opens in a new website but we dont need to wireframe that now
when the user clicks on a specific workshop, it opens in a new website, but we don't need to design the workshop itself in the wireframe now

The rest of your questions, i can't yet answer well, because i first would need to see the changes above, but the wireframe to be mobile first :-)

One little idea for curriculum visualization using just emojis was:

🧲📂┬🗂️🔐./my-biology-codecamp/🔗
    │  ┌⚓📁─🗂️🗄️./somebodys-biology-codecamp/🔗
    │  ├🖇️🗄️./my-biology-codecamp/🔗
    ├📂┼📂🗄️./workshop-biology#13/🔗
    │  │  ┌⚓📁─🗂️🗄️./workshop-biology-math/📄package.json🔗
    │  │  ├📁─🗂️🗄️./workshop-biology-basics#12/📄package.json🔗
    │  ├📂┼📂📄./workshop.json🔗
    │  │  ├📁─🗂️🗄️./workshop-biology-advanced-DNA🔗
    │  │  └⚓📁─🗂️🗄️./workshop-biology-advanced-neurology#14🔗
    │  └📁─🗂️./lessons/🔗
    └📂─🗂️🗄️./workshop-chemistry#13/🔗

So to describe the above with words: Let's say you design the my-biology-codecamp codecamp. It contains only 2 workshops (biology & chemistry) When you expand the details of of the biology workshop you can see its part of the my-biology-codecamp but somebody else also included it in their codecamp ... then when you expand also the content of the biology workshop and there you can see a workshop.json file that shows this biology workshop has 2 prerequisite workshop about biology math and biology basics. and then it also shows that this biology workshop has 2 advanced workshops you can do after you finish this biology workshops and those are named advanced DNA and advanced neurology you can also see the current biology workshop has a lessons folder

...but those details and what they are about is anyway visible to the user when they open the workshop and it opens in a new browser tab anyway.

I know the above curriculum is very dense and not super pretty, but for mobile first and during wireframing, maybe it is a quick way to get started and then we can see how to make it nicer.

Looking forward for the next iteration wireframe that includes all your notes and stuff, cheers :+1: :-)

worklog 8 2022.07.21

done iteration 3 - create wireframes - 1.45 hours
- @output :package: figma wireframe

worklog 8 2022.07.21

@output package figma wireframe1

done iteration 2 - create wireframes - 1.45 hours

screen

So on this screen it shows a bottom menu :+1: But that menu has:

workshop
events
notifications
chat
profile

and in the middle of the screen it has again

events/schedule
chats
workshop/gigs
calendar

I think just having the menu on the bottom is enough.

timeline events/schedule & notifications/calendar is probably provided by helenphina soon
chat is probably easy, because we know how it looks
which leaves us with workshops/codecamp as the main task

Have you seen the previous diagram i did draw? i think we might need something like that?

📌📂┬🗂️🏞️./my-biology-codecamp/🔗
    │  ┌⚓📁─🗂️🎋./somebodys-biology-codecamp/🔗
    │  ├🖇️🌱./my-biology-codecamp/🔗
    ├📂┼📂🗄️🌱./workshop-biology#13/🔗
    │  │  ┌⚓📁─🗂️🗄️📐./workshop-biology-math/📄package.json🔗
    │  │  ├📁─🗂️🗄️🌳./workshop-biology-basics#12/📄package.json🔗
    │  ├📂┼📂📄./workshop.json🔗
    │  │  ├📁─🗂️🗄️🔬./workshop-biology-advanced-DNA🔗
    │  │  └⚓📁─🗂️🗄️🧠./workshop-biology-advanced-neurology#14🔗
    │  └📁─🗂️./lessons/🔗
    └📂─🗂️🗄️⚗️./workshop-chemistry#13/🔗

This diagram is maybe not trivial to understand, but it is essentially a file system, with folders and sub folders for each workshop in the codecamp.

One file - the workshop.json file contains the list of "prerequisite workshops" for a particular workshop and a bunch of recommended workshops for when a user finishes the current one.

Maybe we have to brainstorm a bit about the details so you can better understand this structure, but it could help us visualize the "codecamp curriculum" on mobile or even in the terminal :-)

worklog 9 2022.07.23

done iteration 4 - create wireframes - 3.15 hours
- @output :package: figma wireframe

worklog 9 2022.07.23

@output package figma wireframe1

done iteration 3 - create wireframes - 3.15 hours

I collected some examples for how people use figma. Would be cool to have more of that and not the versions drawn on paper - if they help you to think about it, that is ok, but it would be cool to have everything in real figma wireframes.

see for example

Now we cant pay to learn certain new figma features sadly, but there are plenty of youtube videos which might help for some of the techniques, and there are a lot more on youtube. The ones below show nested compoennts but more importantly vector tools so maybe that makes things easier so drawing on paper is not necessary anymore.

Also regarding my previous feedback. You did not use or say much about the diagram with the emojis and also the bottom menu isn't yet how i hoped it would be.

first - bottom menu

So it would be cool to simplify the menu on the bottom to:

workshops
- with all the curriculum for the codecamp
timeline
- helenphina makes it and it has all of
- events/schedule & notifications/calendar
chat
profile

second - workshops section of codecamp

// 1. collapsed

📌📁─🗂️🏞️./my-biology-codecamp/🔗

// 2. expand codecamp
📌📂┬🗂️🏞️./my-biology-codecamp/🔗
    ├📁─🗂️🗄️🌱./workshop-biology#13/🔗
    └📁─🗂️🗄️⚗️./workshop-chemistry#13/🔗

// 3. expand biology workshop

📌📂┬🗂️🏞️./my-biology-codecamp/🔗
    ├📂┬🗂️🗄️🌱./workshop-biology#13/🔗
    │  ├📁─🗂️📄./workshop.json🔗
    │  └📁─🗂️./lessons/🔗
    └📁─🗂️🗄️⚗️./workshop-chemistry#13/🔗

// 4. check what are workshop prerequisites

📌📂┬🗂️🏞️./my-biology-codecamp/🔗
    ├📂┬🗂️🗄️🌱./workshop-biology#13/🔗
    │  │  ┌⚓📁─🗂️🗄️📐./workshop-biology-math/📄package.json🔗
    │  │  ├📁─🗂️🗄️🌳./workshop-biology-basics#12/📄package.json🔗
    │  ├📁┴📂📄./workshop.json🔗
    │  └📁─🗂️./lessons/🔗
    └📁─🗂️🗄️⚗️./workshop-chemistry#13/🔗

// 5. check which lessons are recommended after the biology workshop

📌📂┬🗂️🏞️./my-biology-codecamp/🔗
    ├📂┬🗂️🗄️🌱./workshop-biology#13/🔗
    │  │  ┌⚓📁─🗂️🗄️📐./workshop-biology-math/📄package.json🔗
    │  │  ├📁─🗂️🗄️🌳./workshop-biology-basics#12/📄package.json🔗
    │  ├📂┼📂📄./workshop.json🔗
    │  │  ├📁─🗂️🗄️🔬./workshop-biology-advanced-DNA🔗
    │  │  └⚓📁─🗂️🗄️🧠./workshop-biology-advanced-neurology#14🔗
    │  └📁─🗂️./lessons/🔗
    └📁─🗂️🗄️⚗️./workshop-chemistry#13/🔗

// 6. check which other code camps use the biology workshop

📌📂┬🗂️🏞️./my-biology-codecamp/🔗
    │  ┌⚓📁─🗂️🎋./somebodys-biology-codecamp/🔗
    │  ├🖇️🌱./my-biology-codecamp/🔗
    ├📂┼📂🗄️🌱./workshop-biology#13/🔗
    │  │  ┌⚓📁─🗂️🗄️📐./workshop-biology-math/📄package.json🔗
    │  │  ├📁─🗂️🗄️🌳./workshop-biology-basics#12/📄package.json🔗
    │  ├📂┼📂📄./workshop.json🔗
    │  │  ├📁─🗂️🗄️🔬./workshop-biology-advanced-DNA🔗
    │  │  └⚓📁─🗂️🗄️🧠./workshop-biology-advanced-neurology#14🔗
    │  └📁─🗂️./lessons/🔗
    └📁─🗂️🗄️⚗️./workshop-chemistry#13/🔗

If you don't understand the diagram well and the description above, lets maybe discuss questions and details in the discord chat :slightly_smiling_face:

The issue in your new wireframe is, that the workshops are only disconnected categories or cards in a list. This should rarely or never be the case.

Also:

we don't need "popular workshops"
we don't need "all workshops" (it should always be all workshops
we don't really need a search bar, but if there will be one, it should be on the bottom, not on top
upcoming events should only show up when the user goes on the timeline tab

So yes, it should definitely be more like the one with lines that connect lessons you show at the end of the worklog video

But, as you can see above, maybe the entire thing could be like a file explorer ...not really, but at least similar. The diagram above is an example, but we can play with it and modify it. We can discuss it :-) The wireframe should become a lot more fine grained and also show "steps", ideally clickable.

figma clickable prototypes

There are again more videos that teach how to do clickable prototypes and we can't really pay for the learning time, but this would be helpful to show how exactly a user can navigate the codecamp

worklog 10 2022.07.27

done iteration 5 - create wireframes - 3.00 hours
- @output :package: figma wireframe

worklog 11 2022.07.29

done iteration 6 - create wireframes - 2.00 hours
- @output :package: figma wireframe

feedback 2022.07.30

For example, in order to show every "workshop" from the skill tree behind http://www.dungeonsanddevelopers.com/ we could do it like below.

Every number means it is a new slide and the user clicked to expand the skilltree.

The last number (21.) shows the entire codecamp fully expanded and it might still fit on one single mobile screen.

// 1.
📌📁─🗂️dungeons&developers-codecamp🔗
// 2.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
    └📁─🗂️HTML🔗
// 3.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
👉  └📂┬🗂️HTML🔗
       ├📁─🗂️CSS🔗
       ├📁─🗂️JavaScript🔗
       ├📁─🗂️ServerSide-Programming🔗
       └📁─🗂️SEO🔗
// 4.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
    └📂┬🗂️HTML🔗
👉     ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📁─🗂️Web-Design-Mastery🔗
       ├📁─🗂️JavaScript🔗
       ├📁─🗂️ServerSide-Programming🔗
       └📁─🗂️SEO🔗
// 5.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
👉     │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📁─🗂️JavaScript🔗
       ├📁─🗂️ServerSide-Programming🔗
       └📁─🗂️SEO🔗
// 6.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
👉     ├📂┬🗂️JavaScript🔗
       │  └📁─🗂️JS-Liraries-and-Frameworks🔗
       ├📁─🗂️ServerSide-Programming🔗
       └📁─🗂️SEO🔗
// 7.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
👉     │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📁─🗂️Frontend-Development-Mastery🔗
       ├📁─🗂️ServerSide-Programming🔗
       └📁─🗂️SEO🔗
// 8.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
👉     │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        ├───🗂️AJAX-and-APIs🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📁─🗂️ServerSide-Programming🔗
       └📁─🗂️SEO🔗
// 9.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        ├───🗂️AJAX-and-APIs🔗
       │        └───🖇️Web-Development-Mastery🔗
👉     ├📂┬🗂️ServerSide-Programming🔗
       │  └📂─🗂️Server-Side-Frameworks🔗
       └📁─🗂️SEO🔗
// 10.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
👉     │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📁─🗂️Server-Side-Development-Mastery🔗
       └📁─🗂️SEO🔗
// 11.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
👉     │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
       └📁─🗂️SEO🔗
 // 12.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
    └📂┬🗂️HTML🔗
       ├📁┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
👉     └📂┬🗂️SEO🔗
          └📁─🗂️Analytics🔗
// 13.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📁─🗂️Server-Administration🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
       └📂┬🗂️SEO🔗
👉        └📂┬🗂️Analytics🔗
             └───🖇️web-Development-Mastery🔗
// 14.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
👉  ├📂┬🗂️Server-Administration🔗
    │  └📁─🗂️Deployment🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
       └📂┬🗂️SEO🔗
          └📂┬🗂️Analytics🔗
             └───🖇️web-Development-Mastery🔗
// 15.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📁─🗂️Database-Authoring🔗
    ├📂┬🗂️Server-Administration🔗
👉  │  └📂┬🗂️Deployment🔗
    │     └───🖇️web-Development-Mastery🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
       └📂┬🗂️SEO🔗
          └📂┬🗂️Analytics🔗
             └───🖇️web-Development-Mastery🔗
// 16.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
👉  ├📂┬🗂️Database-Authoring🔗
    │  └📁─🗂️Advanced-DB-Management🔗
    ├📂┬🗂️Server-Administration🔗
    │  └📂┬🗂️Deployment🔗
    │     └───🖇️web-Development-Mastery🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
       └📂┬🗂️SEO🔗
          └📂┬🗂️Analytics🔗
             └───🖇️web-Development-Mastery🔗
// 17.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📁─🗂️User-Discovery🔗
    ├📂┬🗂️Database-Authoring🔗
👉  │  └📂┬🗂️Advanced-DB-Management🔗
    │     └───🖇️web-Development-Mastery🔗
    ├📂┬🗂️Server-Administration🔗
    │  └📂┬🗂️Deployment🔗
    │     └───🖇️Server-Side-Development-Mastery🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
       └📂┬🗂️SEO🔗
          └📂┬🗂️Analytics🔗
             └───🖇️web-Development-Mastery🔗
// 18.
📌📂┬🗂️dungeons&developers-codecamp🔗
👉  ├📂┬🗂️User-Discovery🔗
    │  ├📁─🗂️Graphic-Design🔗
    │  └📁─🗂️Prototypes🔗
    ├📂┬🗂️Database-Authoring🔗
    │  └📂┬🗂️Advanced-DB-Management🔗
    │     └───🖇️web-Development-Mastery🔗
    ├📂┬🗂️Server-Administration🔗
    │  └📂┬🗂️Deployment🔗
    │     └───🖇️Server-Side-Development-Mastery🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
       └📂┬🗂️SEO🔗
          └📂┬🗂️Analytics🔗
             └───🖇️web-Development-Mastery🔗
// 19.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📂┬🗂️User-Discovery🔗
👉  │  ├📂┬🗂️Graphic-Design🔗
    │  │  ├───🗂️Graphic-Design-Tools🔗
    │  │  └📁─🗂️User-Experience-Design-Mastery🔗
    │  └📁─🗂️Prototypes🔗
    ├📂┬🗂️Database-Authoring🔗
    │  └📂┬🗂️Advanced-DB-Management🔗
    │     └───🖇️web-Development-Mastery🔗
    ├📂┬🗂️Server-Administration🔗
    │  └📂┬🗂️Deployment🔗
    │     └───🖇️Server-Side-Development-Mastery🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
       └📂┬🗂️SEO🔗
          └📂┬🗂️Analytics🔗
             └───🖇️web-Development-Mastery🔗
// 20.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📂┬🗂️User-Discovery🔗
    │  ├📂┬🗂️Graphic-Design🔗
    │  │  ├───🗂️Graphic-Design-Tools🔗
👉  │  │  └📂┬🗂️User-Experience-Design-Mastery🔗
    │  │     ├───🗂️User-Testing🔗
    │  │     └───🖇️web-Development-Mastery🔗
    │  └📁─🗂️Prototypes🔗
    ├📂┬🗂️Database-Authoring🔗
    │  └📂┬🗂️Advanced-DB-Management🔗
    │     └───🖇️web-Development-Mastery🔗
    ├📂┬🗂️Server-Administration🔗
    │  └📂┬🗂️Deployment🔗
    │     └───🖇️Server-Side-Development-Mastery🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
       └📂┬🗂️SEO🔗
          └📂┬🗂️Analytics🔗
             └───🖇️web-Development-Mastery🔗
// 21.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📂┬🗂️User-Discovery🔗
    │  ├📂┬🗂️Graphic-Design🔗
    │  │  ├───🗂️Graphic-Design-Tools🔗
    │  │  └📂┬🗂️User-Experience-Design-Mastery🔗
    │  │     ├───🗂️User-Testing🔗
    │  │     └───🖇️web-Development-Mastery🔗
👉  │  └📂┬🗂️Prototypes🔗
    │     └───🖇️User-Experience-Design-Mastery🔗
    ├📂┬🗂️Database-Authoring🔗
    │  └📂┬🗂️Advanced-DB-Management🔗
    │     └───🖇️web-Development-Mastery🔗
    ├📂┬🗂️Server-Administration🔗
    │  └📂┬🗂️Deployment🔗
    │     └───🖇️Server-Side-Development-Mastery🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
       └📂┬🗂️SEO🔗
          └📂┬🗂️Analytics🔗
             └───🖇️web-Development-Mastery🔗

worklog 12 2022.07.29

done iteration 7 - create wireframes - 1.20 hours
- @output :package: figma wireframe

worklog 13 2022.08.08

done iteration 8 - create wireframes - 3.40 hours
- @output :package: figma wireframe

worklog 14 2022.08.09

done iteration 9 - create wireframes - 3.00 hours
- @output :package: figma wireframe

feedback 2022.08.10

worklog 14 2022.08.09

done iteration 9 - create wireframes - 3.00 hours

@output package figma wireframe

worklog 15 2022.08.12

done iteration 10 - create wireframes - 2.30 hours
- @output :package: figma wireframe

worklog 15 2022.08.12

done iteration 10 - create wireframes - 2.30 hours

@output package figma wireframe

hmm, I saw the video, but i didn't imagine it like that. It is true, that in your video there is no space to expand some workshops, but the layout could change when things expand.

In your video you say there is no space for "server programming" to expand. But see below - things just move out of the way to make enough space for it to expand.

This is not possible in the top to bottom layout, because every entry has a title and that title can be long, so you have to create a lot of space ...but in the left to right layout below, every title only needs as much space as the height of the letters, which is very little, so it is easier.

task: can you please try to fit in every workshop that is listed in dungeon and developers website (see below) and if they don't fit on one screen, can you make it draggable or scrollable and how that would look like?

I think once we have that we are done and can make a high fidelity design

// 21.
📌📂┬🗂️dungeons&developers-codecamp🔗
    ├📂┬🗂️User-Discovery🔗
    │  ├📂┬🗂️Graphic-Design🔗
    │  │  ├───🗂️Graphic-Design-Tools🔗
    │  │  └📂┬🗂️User-Experience-Design-Mastery🔗
    │  │     ├───🗂️User-Testing🔗
    │  │     └───🖇️web-Development-Mastery🔗
👉  │  └📂┬🗂️Prototypes🔗
    │     └───🖇️User-Experience-Design-Mastery🔗
    ├📂┬🗂️Database-Authoring🔗
    │  └📂┬🗂️Advanced-DB-Management🔗
    │     └───🖇️web-Development-Mastery🔗
    ├📂┬🗂️Server-Administration🔗
    │  └📂┬🗂️Deployment🔗
    │     └───🖇️Server-Side-Development-Mastery🔗
    └📂┬🗂️HTML🔗
       ├📂┬🗂️CSS🔗
       │  ├───🗂️CSS-Tools🔗
       │  └📂┬🗂️Web-Design-Mastery🔗
       │     ├───🗂️jQuery-Effects🔗
       │     └───🗂️Web-Development-Mastery🔗
       ├📂┬🗂️JavaScript🔗
       │  └📂┬🗂️JS-Liraries-and-Frameworks🔗
       │     └📂┬🗂️Frontend-Development-Mastery🔗
       │        └───🖇️Web-Development-Mastery🔗
       ├📂┬🗂️ServerSide-Programming🔗
       │  └📂┬🗂️Server-Side-Frameworks🔗
       │     └📂┬🗂️Server-Side-Development-Mastery🔗
       │        ├───🗂️User-Authentication-and-Authorization🔗
       │        ├───🖇️AJAX-and-APIs🔗
       │        └───🖇️web-Development-Mastery🔗
       └📂┬🗂️SEO🔗
          └📂┬🗂️Analytics🔗
             └───🖇️web-Development-Mastery🔗

worklog 16 2022.08.17

done iteration 11 - create wireframes - 2.30 hours
- @output :package: figma wireframe

worklog 17 2022.08.19

done iteration 12 - create wireframes - 4.00 hours
- @output :package: figma wireframe

worklog 18 2022.08.22

done iteration 13 - create wireframes - 3.00 hours
- @output :package: figma wireframe

worklog 19 2022.08.25

done iteration 14 -HI-FI designs - 3.00 hours
- @output :package: figma wireframe

worklog 20 2022.08.29

done iteration 15 -HI-FI designs - 2.30 hours
- @output :package: figma wireframe

wizardamigos / wizardamigos.github.io