Posts

Joanne Chuang Portfolio

Spring 2024

HTML, CSS

My website is my portfolio. I put the work I did in this class. The most challenging part of the project was when I tab one of the codes wrong all will be wrong, so I had to be careful to do coding.

Live site here: https://v5y8kf.csb.app/

Link to project: https://codesandbox.io/p/sandbox/mmp100-v5y8kf?file=%2Findex.html

Choose Wisely, Adventure Awaits

Spring 2024

HTML, CSS

My website is a choose your own adventure story where the “adventure” is survival. Will you survive or succumb to a grizzly death? Choose between Zombies, Vampires and Disease as the world ends. Which weapon will you use? I had some trouble with this project, especially after changing to codesandbox, but I think it looks nice. I think it’s safe to say I won’t be using HTML in my free time anytime soon.

Live site here: https://mqq7vl.csb.app/index.html

Link to project: https://codesandbox.io/p/sandbox/michaels-appocalyptic-adventure-forked-mqq7vl

Choose Your Own Adventure

Spring 2024

HTML, CSS

I chose to have my adventure include my dog; usually while I’m doing work for school she is never afraid to let me know that something is wrong or that she wants attention so what better way to include her in this project! The most challenging part of the project was just learning the language Professor Roberts was talking about during his videos; it took a whole lot of rewatching the videos for me to understand why we were adding <div’s, attributes, #containers, and .choices but as soon as it clicked I found I was about to use short cuts, copy and paste certain codes and the aesthetic information instead of writing out code after code. It seemed complicate and convoluted to do things this way at first but I realized these techniques were meant to keep things organized and simple. This was such an informative project and it became fun after things started rolling and fitting together, I believe this is something I’d like to learn a lot more about in the future.

Live Site Link: https://9v57y9.csb.app/

Link To Project: https://codesandbox.io/p/sandbox/css-basics-spring-2024-9v57y9

Choose your Own Adventure

Spring 2024

HTML,CSS

My website is about choosing if you would like to choose an adventure in a car or in an airplane. If you choose a car you will be given the option to fly it. Then if you click the airplane adventure you will be given the option to land it. After doing all that you will return to the main page.

Live site: https://l246tz.csb.app/index.html

Link to project : https://codesandbox.io/p/sandbox/webpage-l246tz?file=%2Findex.html

Choose Your Own Adventure: Walk to the Store

Spring 2024

HTML, CSS

My website is a choose your own adventure story for MMP 100 where the user clicks their way to the grocery store. Like with my animation project, I tried to focus on the mechanics of the website with my goal being that it ran smoothly. I enjoyed working on this project and all the challenges that came with learning from scratch how to build a simple website.

Live site: https://gnr6q4.csb.app

Link to project: https://codesandbox.io/p/sandbox/css-layout-gnr6q4

Image:

“pink roses” by srqpix is licensed under CC BY 2.0.

Our Adventure

Spring 2024

HTML, CSS

I really enjoyed my trip overseas this winter, and have always been told that traveling the world and experiencing the many wonders is a great escape. This website is a first step towards that, not only for me, but anyone else also interested touring the world, without the hassle of booking flights, tourist guides, hotels, and so on.

Live Site:

https://26p5jd.csb.app/

Link to project:

Code Sandbox

My adventure- Volcan Acatanengo in Guatemala

you know the feeling that you work so hard but in the end its worth it? this is my story.

Tap to read 🙂

Live site here: https://92sgf7.csb.app/index.html

link to the code: https://codesandbox.io/p/sandbox/happy-rhodes-92sgf7?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cluj3989100063b6hny7cecyh%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cluj3989000023b6hzssnhbht%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cluj3989000033b6hxumzfx23%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cluj3989000053b6h7viauzfa%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B51.10143649261317%252C48.89856350738683%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cluj3989000023b6hzssnhbht%2522%253A%257B%2522id%2522%253A%2522cluj3989000023b6hzssnhbht%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clujy4iqe00023b6g240vmfch%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FAcatanengo.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clukb5u1000023b6gm00f4wno%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A19%252C%2522startColumn%2522%253A61%252C%2522endLineNumber%2522%253A19%252C%2522endColumn%2522%253A61%257D%255D%252C%2522filepath%2522%253A%2522%252FStory.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cluljpifl00023b6gelqoj18w%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A24%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A24%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Ffeeling.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cluljt8u900023b6gg68yya8n%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A26%252C%2522startColumn%2522%253A39%252C%2522endLineNumber%2522%253A26%252C%2522endColumn%2522%253A39%257D%255D%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clukb5u1000023b6gm00f4wno%2522%257D%252C%2522cluj3989000053b6h7viauzfa%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cluj3989000043b6hljfqg6oe%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cluj3989000053b6h7viauzfa%2522%252C%2522activeTabId%2522%253A%2522cluj3989000043b6hljfqg6oe%2522%257D%252C%2522cluj3989000033b6hxumzfx23%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cluj3989000033b6hxumzfx23%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

MP100 | WEB DEVELOPMENT PROJECT STATEMENT

live site

https://worldpeace818818.github.io/

editor

https://github.com/worldpeace818818/worldpeace818818.github.io/blob/main/index.html

Chose your own adventure

Spring 2024

Html, CSS, GitHub 

I wanted to make a choose-your-own-adventure story with a horror theme, and I wanted it to be funny, too. I just thought about making a story that starts out very normal and boring and escalates to an absurd degree. You wake up in your hotel room and head out to get to the beach, but as you choose the elevator or stairs, you soon find out you are not where you thought you were. I had to think a lot about how to create a narrative within the pages and how to make that work in a web page format i had a lot of issues, especially linking pages to each other it took me a lot of time to figure it out. I had to watch a lot of YouTube videos to understand how to accomplish what I was trying to do.