jegalli22/a1-jegalli22

The first assignment for CS4241

Assignment 1 - Hello World: Basic Deployment w/ Git, GitHub, Glitch

Jenna Galli https://a1-jegalli22.glitch.me/

This project contains an edited HTML page with scholarly information about me, and a simple node js server to run to webpage.

Assignment details:

1. Fork this repo and clone it to your computer, make changes locally on your computer, push the repo onto GitHub, and then import your GitHub repo into Glitch.
2. Edit index.html to show the following information about you:
   • your name and class at WPI (e.g. class of 2020) Note: Do not put any contact or personal information that you do not potentially want other people outside of this class to see.
   • your major(s) and minor(s)
   • previous computer science courses that you have taken at WPI
   • your experience with the following technologies and methods (none, some, a lot)
     • HTML
     • CSS
     • Java
     • JavaScript
     • Ruby
     • Python
     • unit testing
3. Complete technical and/or design achievements (see below).
4. Test your project to make sure that when someone goes to your main page, it displays correctly. You can do this locally by simply running node server.js from within the assignment directory.
5. Commit and push all your changes to GitHub.
6. Deploy your project to Glitch. You can do this by importing the repo from GitHub

Technical Achievements

• Styled page with CSS: Added rules for the body, h1, and h4.
• Java Script Animation: At the bottom of the page, an animation was added that displays a box moving from one corner of a container to another. I used code from this link https://www.w3schools.com/js/js_htmldom_animate.asp to create the animation. I changed the way in which the animation moves as well as the colors of the animation.
• Experimentation with other HTML tags: Added a button to launch the animation. Added a box chart to describe my experience level with each technology. I used code from this link https://www.w3schools.com/howto/howto_css_skill_bar.asp for the box chart. I first created a container which would be shown as a bar and then customized each skill to have it's own color filling up this bar to the appropriate precent level.

Design Achievements

• Color Palette: I used a specific color palette from color.adobe.com. Every color was used in my bar chart CSS code under each technology's class. To find an image of my color palette, check the associated files with this project.