sheleoni / koto-burger Goto Github PK

And layout in one element called "hamburger", so that user can selectively hover on the top, middle, or bottom section.

• split into 3 images
• stack 3 images on top of each other

Hint:
Reverse stacking order of sibling DOM elements: https://stackoverflow.com/questions/27788107/reversing-default-z-index-for-children-in-an-html-element
Stacking order: https://jsfiddle.net/ek41mobd/1/
Using the n-th child to determine z-index: https://stackoverflow.com/questions/2345132/reversing-z-index-based-from-page-render-order?noredirect=1&lq=1

Use Vue 3

Vue 3: create-vue
https://github.com/vuejs/create-vue

Difference between Vue 2 CLI and Vue 3 setup:
https://github.com/vuejs/create-vue
https://cli.vuejs.org/guide/creating-a-project.html

Add .txt file to include a few examples of
Japanese→English IT vocabulary
e.g.
変数 → variable
定数 → constant
関数 → function

Prepare a .txt file to contain the sample sentences displayed in below:

褒め言葉
Thanks a lot for your effort / That’s great! / Nice! / Thanks! I can see that...

指摘
instead of A, I want B
I think there is a misunderstanding (you did X/ right now it looks like this, but I wanted Y)
Logic mistakes: After I click X, it should show Y. Right now, when I click X, it shows Z. This behavior is incorrect.
It’s supposed to be...
The circled portion / area should look like XX
The icon should be black / white/ transparent instead.

フォロー(締切、clarify、thank again)
please let me know if you don’t understand,
please let me know if you need any help 
please let me know how long it will take
please let me know your estimate time
how long do you think this will take you?

• Name of project (where it came from)
• Who is it for
• future directions

From: https://northwestmediacollective.com/blog/best-image-size-for-websites/

The size of your images varies depending on where you want them on your website. The optimal file size for images on a website is no more than 200 KB, and for full-screen background images, between 1500 pixels to 2500 pixels wide, and for most other images a max-width of 800 pixels. Keeping images between these perimeters will ensure they load properly on computers and mobile screens.

Create a visual structure as such:

• use CSS grids
• don't bother with frameworks now, just use pure HTML

Add .txt file to include a few examples of
Japanese→English IT sentences
e.g.
手が空いていますか？ → Are you free? / Are you available?
XからYに変更してください。 → Please change X to Y.
...とういう意味ですか？ → Do you mean this?
後で連絡します。 → I will get back to you later.
Xに忙しいので、後で連絡します。 → I'm busy with X, so I will get back to you later.

• ideas for later issues: Categorise sentence types (e.g. by situation: buy time, prompt, clarify/ misunderstanding)

Reference: