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

DUE: Monday, August 30th by 11:59 AM (before the start of class!)

README

Bryan Lima https://a1-bplima.glitch.me

This project shows a little bit of information about myself including my name, major, school, and previous computer science experience through school and work. I learned how to use HTML, CSS, and JavaScript together as well as refereshed myself on how to use Git/GitHub.

Technical Achievements

• Styled page with CSS: Added the following rules for following selectors:

  • body: background-image
  • h1: font-family, background-color, color
  • h2: font-family, color
  • p: font-family, color, font-size
  • li: font-family, color
  • ul: font-family, color, text-align
  • .headshot-placement: margin-left, margin-right, float: left
  • .linkedin-placement: margin-bottom, margin-left, margin-right, float, display
  • .github-placement: margin-bottom, margin-left, margin-right, float, display
  • .email-placement: margin-bottom, margin-left, margin-right, float, display
  • .flag-popup: display, text-align, width, height, margin-left, margin-right, margin-bottom

• JavaScript Animation: Added a button that displays an image and changes the button's color when clicked.

• Experiemented with HTML Tags: Included the following HTML Tags:

  • link: For the Azeret Mono Extra-light 200 font from Google Fonts
  • style For CSS styling
  • script: For the JavaScript image popup animation
  • img: For the headshot image, Brazilian flag gif, and LinkedIn, GitHub, and email buttons
  • button: To create the button for the JavaScript animation
  • a: To link the LinkedIn, GitHub, and email buttons
  • li: For list of CS courses and past internship experience
  • br /: To fix spacing on website

Design Achievements

• Created my own color pallette and implemented the colors into my website: An image of the color pallette can be found on the repo. The following five color codes were used across the website: #FS2300, #FF9137, #63E2E6, #FFEB73, and #0BF52F.
• Used the Azeret Mono Extra-light 200 from Google Fonts: I used Azeret Mono Extra-light 200 as the font for all the text on my website.

Challenges

• LinkedIn, GitHub, and email icons placement: I couldn't figure out how to get those icons to permanently stay in place. Everytime you click the button and the flag pops up, everything below it moves down. In order to figure out the spacing I had to use a bunch of br / tags.