Core 2 Interaction: Lab – Questionnaire

This is the questionnaire index file. Replace this content with your responses from the prompts listed on the Dropbox Paper document.

1. Describe your previous experiences with coding.

a. What classes have you already taken where you were exposed to HTML/CSS/JS?

-Last semester Core1 interaction was my first experience of coding. I was super nervous of learning coding because it was brand-new knowldge and subject.


b. What parts of the class resonated with you?

-I have trained HTML and CSS well I guess... Professor taught me how to develop web page, I’m excited to learn a more knowledge

c. What parts were most confusing?

-JS defnetly made me confused, I'm sure I'm still not clearly understanding. I got some sence how JS work but technique and skiil isn't enough.

2. How excited about learning code are you? Are you nervous about learning code? If so, why? What can I do in this class to help reduce this anxiety?

-To be honest I didn't think I would learn coding before I joined CD major. I'm feeling OK with HTML and CSS but I’m very worried about JS. My class we used p5.js which was much simpler but it was very stressful and difficult. I think this recording system will work for me.


3. How do you imagine coding fitting in with the rest of your design curriculum and career after college?

-I have realized how I rely on Internet services especially when we experience a Covid situation. Any demands can get through Apps or online shopping. I think coding can be applied whether I’m in any kind of industry. My interest is many directions right now so I’m hoping to be able to use my skill to aid those in some industry.


4. What text editor do you prefer to use?

-I have only used sublime textfrom last semester therefore I only know sublime text.


5. Have you used GitHub before? Do you know what it is? Describe your understanding of GitHub.

-No, I haven't. I really didn’t know what the github is. After I watched the lecture video I kind of understood how to transfer local files to the public. I have used Cyberduck which I guess is a similar tool.

6. Describe the relationship between HTML, CSS and JavaScript. Try using a unique analogy to describe this relationship (you can’t use the house analogy 😉). Bonus points for creative analogies.

-First of all, HTML is a fundamental structure. Think about HTML, CSS and Javascript as a face. As I mentioned HTML is principal, HTML is defined as the parts of the face like nose, eyes, and mouth etc. Second, CSS is a display property, in other words CSS can be make-up. It can change color, change font size and designate the position so the web page can get a visual image. Lastly, Javascript can represent facial expressions, just like anger, joy, grief and pleasure. Javascript creates the element of motion. We unintentionally see web pages all the time, but those three elements get involved with each other and create beautiful visual interaction.


7. Using each HTML 'heading' tag, list your favorite foods ranked by importance (remember, there’s 6 levels of heading tags).

Dumpling

Yakiniku (Japanese-style BBQ)

Crab

Sushi

Hotpot
Paella

8. Create an unordered list and link to some of your favorite graphic design or development related websites. Include a paragraph on each site describing why it is important to you.

Yuni Yoshida

Yuni Yoshida is Japanese graphic designer and her art piece is used for advertisements. Her work is pop but very creative also I really like how she creates visual information.


Insipation

This web site gave me many kinds of graphic design inspiration. It is not limited design, there are different types of design.


9. Insert an image of your choosing to the page. Make sure the image includes ALT text that describes the image.

hey i'm marble


10. Insert a video embed into the page (for example, a YouTube or Vimeo embed tag of a video of your choosing).


11. Nest the following series of HTML tags inside each other, where each represents a new level. Make sure to maintain proper indentation. 1.(main-section-div- p -span)

See the HTML o(^_^)o

12. Create an `ordered list` of the top 5 countries you’d like to visit. Within each country, create another `ordered list` of the top cities you’d like to visit in that country. Maintain proper indentation and make sure you nest your ordered lists properly.
  1. France
    1. Nice
    2. Cannes
  2. Italy
    1. Amalfi Coast
    2. Napoli
  3. Sweden
    1. Stockholm
  4. Norway
    1. Oslo
  5. Cuba
    1. Habana
13. Use `pre` tags to create a simple concrete poetry version of a Haiku or other poem you write. The poem should represent how you feel at this moment. * Hint: `pre` tags respect whitespace, you can add add lots of spaces and line breaks and they will show up like that when you view the web page.

    spring semester        has come
           
           my skill is still
           
                        in the dark
                        
                   wanna see the bright future 
           
                   
    
14. Write an HTML comment that is hidden from the browser, but displays in the code.

It' hidden in my page. o(^_^)o


15. Create an `unordered list` of at least 6 musical artists you like to listen to. Add a `class` to each list item that matches the genre of music of that artist.
16. Describe the difference between block, inline-block and inline elements.

-Display: block elements is a simple element that is in descending order and the elements are ordered vertically. In block element width, height, padding and margin can modulate, but text-align or vertical-align can’t be used. Display: inline elements are often used as part of a sentence and it stands in a line. However, inline elements can’t be assigned width, height and the upper and lower margin and text-align or vertical-align can apply. Display: inline-block elements are between block and inline elements. Otherwise the way of like is inline and the way of content is block also inline-block can assign padding, margin, width and height. Display: inline-block is focusing on only the good point.

17. Use CSS to style the musical genre classes you added in question 15. Give each genre a color and personality using CSS.
18. Use any CSS knowledge you currently have to style your questionnaire in a unique way. Make sure to update the font to something other than the default (use the `font-family` css property).

-Yes! I did!


19. In your JavaScript file, use the `console.log` function to write a message to the console. Tell me something interesting about yourself.

-It's in my JS file. o(^_^)o

20. Add a button to your HTML file and make it do something when clicked using JavaScript.