• HOME
  • QUESTIONNAIRE
  • INTERACTIVE STORY
  • REVERSE ENGINEERING



    1. DESCRIBE YOUR PREVIOUS EXPERIENCES WITH CODING. WHAT CLASSES HAVE YOU ALREADY TAKEN WHERE YOU WERE EXPOSED TO HTML/CSS/JS? WHAT PARTS OF THE CLASS RESONATED WITH YOU? WHAT PARTS WERE MOST CONFUSING?

      2. I dont have much experience with coding besides from the previous semester's interaction class. The class allowed me to expand my knowledge with coding but more importantly it helped me explore a variety of approaches I could take with code. I think I struggled the most with fully understanding how everything ties together especially when it comes to js.

    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?

      3. I'm honestly excited to learn about code as I feel I lack the foundational understanding of the subject. I think last semester I was thrown into this new world of coding without much guidance so I faced many struggles with naviagting how I could translate my ideas onto the screen. For this class I would appreciate being able to build a strong foundation with coding to build my confidence with each future projects.

    3. HOW DO YOU IMAGINE CODING FITTING IN WITH THE REST OF YOUR DESIGN CURRICULUM AND CAREER AFTER COLLEGE?

      4. I plan on utilizing code in my future projects as I strongly feel like its a flexible medium that can be applied to my own interests in design. I want to be able to build my own portfolios, websites, and overall be able to use it to elevate my own works in the future.

    4. WHAT TEXT EDITOR DO YOU PREFER TO USE?

      5. I've only used Visual Studio Code so I would say that its what I'm most comfortable with.

    5. HAVE YOU USED GITHUB BEFORE? DO YOU KNOW WHAT IT IS? DESCRIBE YOUR UNDERSTANDING OF GITHUB.

      6. Yes, I have used Github before although I would say my understanding of it is limited. I'm not too clear about the different types of functions on the site and I've faced problems with publishing my website and having it be an accesible, public link.

    6. DESCRIBE THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT. TRY USING A UNIQUE ANALOGY TO DESCRIBE THIS RELATIONSHIP. BONUS POINTS FOR CREATIVE ANALOGIES.

      7. If HTML, CSS, and JavaScript were ingredients in a cooking recipe, HTML would be the base – the flour that provides structure. CSS would be the seasoning and garnishes, enhancing the visual appeal and styling of the dish. JavaScript, on the other hand, would be the special edition flavors, altering flavors, and bringing the special experience to life.

    7. USING EACH HTML HEADING TAG, LIST YOUR FAVORITE FOODS RANKED BY IMPORTANCE (REMEMBER, THERE ARE SIX LEVELS OF HEADING TAGS, `H1` THROUGH `H6`).

      8. PAD SEE EW

      BOBA

      SUSHI

      CHICKEN TIKKA MASALA

      SANDWICHES
      TTEOKBOKI

    8. INSERT AN IMAGE (`IMG`) THAT BRINGS YOU JOY TO THE PAGE. MAKE SURE THE IMAGE INCLUDES `ALT TEXT` THAT DESCRIBES THE IMAGE.
      9. Moe
      This is a picture of my bird Moe taking a refreshing shower.

    9. CREATE AN UNORDERED LIST ( `UL` ) AND LINK TO SOME OF YOUR FAVORITE GRAPHIC DESIGN OR DEVELOPMENT RELATED WEBSITES. INCLUDE A PARAGRAPH ( `P` ) ON EACH SITE DESCRIBING WHY IT IS IMPORTANT TO YOU.
      • https://www.siteinspire.com/

        • I really enjoy how this website provides a list of sites where you can scroll through to gather inspiration from other designers. I find myself visiting often whenever I need to explore and imagine new ideas.

      • https://www.adultswim.com/etcetera/choir/

        • This is a website that I had fun with. I really enjoyed the level of detail in this silly, interactive game such as the movemment of the lips and the changing gradients of the background.

    10. INSERT A VIDEO EMBED INTO THE PAGE (FOR EXAMPLE, A YOUTUBE OR VIMEO EMBED TAG OF A VIDEO OF YOUR CHOOSING). YOU HAVE A FEW WAYS YOU CAN APPROACH THIS: LOOK INTO THE `IFRAME` TAG. HINT: IF USING A YOUTUBE OR VIMEO VIDEO, YOU CAN COPY THE EMBED CODE FROM EACH VIDEO’S PAGE. USE A `VIDEO` TAG, THOUGH FINDING THE URL OF A VIDEO CAN SOMETIMES BE TRICKY – DO YOU BEST TO DOWNLOAD, PLACE IT IN YOUR PROJECT FOLDER, THEN REFERENCE ITS FILE PATH
      11. Your browser does not support the video tag.
    11. NEST THE FOLLOWING SERIES OF HTML TAGS INSIDE EACH OTHER, WHERE EACH → REPRESENTS A NEW LEVEL. MAKE SURE TO MAINTAIN PROPER INDENTATION. `MAIN` → `SECTION` → `DIV` → `P` → `SPAN` NO NEED TO FILL THESE TAGS WITH ANY ACTUAL CONTENT

    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.

      13. Top 5 Countries

      1. Japan
        1. Kyoto
        2. Ine
      2. England
        1. London
        2. York
      3. Vietnam
        1. Quang Binh Province
      4. Greece
        1. Athens
        2. Mykonos
      5. Iceland
        1. Laugardalur


      6. USE `PRE` TAGS TO CREATE A SIMPLE [CONCRETE POETRY](HTTPS://EN.WIKIPEDIA.ORG/WIKI/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.

        7. STEPS PER DAY


        Step by step


        We walk


        In the light or the dark

        Through the frigid air


        We walk


        Waiting for the sun to kiss us with her warmth

        For her to graze us with her glare


        We walk


      7. >WRITE AN HTML COMMENT THAT IS HIDDEN FROM THE BROWSER, BUT DISPLAYS IN THE CODE.
        8. I'm hidden!!!
      8. 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.
        • Daniel Caesar
        • Djo
        • Daft Punk
      9. DESCRIBE THE DIFFERENCE BETWEEN BLOCK, INLINE-BLOCK AND INLINE ELEMENTS.

        10. Block elements start on a new line and are full width taking up the whole line, inline elements dont start on a new line and is not full width, and inline-block elements combine the elements of both inline and block elements having width, height, padding, and margins.

      10. USE CSS TO STYLE THE MUSICAL GENRE CLASSES YOU ADDED IN QUESTION 9. GIVE EACH GENRE A COLOR AND PERSONALITY USING CSS.
      11. 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).
      12. IN A `SCRIPT` TAG, USE THE CONSOLE.LOG FUNCTION TO WRITE A MESSAGE TO THE CONSOLE (CMD+OPT+U). TELL ME SOMETHING INTERESTING ABOUT YOURSELF.
      13. ADD A `BUTTON` TO YOUR HTML FILE AND MAKE IT DO SOMETHING WHEN CLICKED USING JAVASCRIPT