Serena Mower http://a1-serena-mower23.glitch.me

This project shows a use of HTML, CSS, and JavaScript to build a simple website. The website includes information about myself, and also describes my CS course history and experience with various CS technologies.

Technical Achievements

• Styled page with CSS: Added rules for the body, h1 through h3, p, li, a, table, th, and td. For the body, I set the background color #517D99 (what I labeled as color-dark-blue) and set the font to Courier Prime. For h1 through h3, I set the color #BAE4FF (what I labeled as color-light-blue). For p and li, I set the color to #EBC692 (what I labeled as color-light-brown). For a, I used in-line CSS to change the color to be #91C5E6 (what I labeled as color-middle-blue). For table, I set the border-collapse to collapse and the width to 100%. For th and td, I set the color to #EBC692 (what I labeled as color-light-brown), set the border to be 2 pixels wide, solid, and be the color #9E9486 (what I labeled as color-dark-brown), and set the padding to be 10px. All of this was fairly straightforward aside from the font (which I'll get to later), changing the link color (which I got help with from https://www.w3docs.com/snippets/css/how-to-change-link-colors-in-html.html), and the extra table styling (which I got help with from https://www.javatpoint.com/html-table).

• Experimented with other HTML tags: I added tags for both unordered and ordered lists, an image, a link, and a table. I had no issues adding the lists. I did have to play around a little with the sizing for the image (love my doggie but don't want her taking up the whole page), and the link I did a quick Google search (https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/) to figure out how to make it open in a new tab (because, well, I prefer it when that happens). The table was the newest tag I worked with and I found information from https://www.javatpoint.com/html-table helpful.

Design Achievements

• Created a color paletter using Adobe: I created a color palette using Adobe (https://color.adobe.com) and then labeled the colors using the roots thing in CSS (which I honestly picked up when messing around with the Elements tab of the Developer Tools of Chrome). Hardest part of this was choosing which colors I liked best!

• Used the Courier Prime font from Google Fonts: I used Courier Prime as the font for the primary copy text in my site. It was easy to pick a font for this, but I think I had the most trouble setting up the font to work. Although, I think that's because originally I was trying to use HTML to add the font instead of CSS. I finally figured it out with the help of https://www.wikihow.com/Use-Google-Fonts-in-CSS.