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

Shannen Lin http://a1-sklin330.glitch.me

This project shows a basic page introducing myself. It contains an image of myself, a paragraph describing myself, a list of CS classes I have taken, and my experience with some technologies and methods.

Technical Achievements

• Styled page with CSS:

  1. Added rule to add margins to bottom of body tag
     • margin: 0 0 50px 0;
  2. Added rule to change font color of h1 tag
     • color: var(--dark-blue-color);
  3. Added rule to center align text of h2 tag
     • text-align: center;
  4. Added rule to set width of p tag
     • width: 60%;
  5. Added rule to change font of h3 tag
     • font-family: "Montserrat", sans-serif;

• Use other HTML tags:

  1. hr - added horizontal line
  2. img - added image of myself
  3. a - added links going to WPI website, ACM website, and WiCS website
  4. ul, li - added a bulleted list of my CS classes
  5. table - added a table which lists the technologies in the first column and my experience level in the second column
  6. br - added break between my cs class and technologies section

• Used classes for CSS styling:

  • main, section, etc.

Design Achievements

• Used font from Google Fonts:

  • Used the Rampart One font for my h1 tag

• Used all colors from created color palette:

  1. Used the pink color(#FF6EB3) as a background color for some of my sections
  2. Used the regular blue color(#36BDEB) as a background color for some of my sections
  3. Used the light blue color(#D6F3FC) as background of the top half of the page
  4. Used the dark blue color(#2E71FF) as the font color of the h1 tag
  5. Used the purple color(#A945EB) as the font color of the h2 tag

• Created adjacent boxes:

  • I used div to create different sections for my contents which I added colors to make different colored rectanges
  • I then set the display to inline-block so that they would appear right next to each other