Ezra Werlinich https://a1-ewerlinich.glitch.me
This project shows the basic of use HTML, CSS, and JS to create a website.
- Styled page with CSS:
- Image (wally): Centered it and set the margins the anchor
- Anchor (wallyLink): Set link to a wiki page, along with making it open in a new tab
- Headings (1, 2, & 3): Changed sizes, fonts, and colors
- Document body: center aligned all text and set margins, and also set a pleasant background color from my palette
- Unordered lists (li & ul): center aligned the lists while having the actual list items left aligned in the center
- Other HTML tags:
- Added an anchor (a) tag that directs to a wikipedia page. It is also set to open in a new tab when clicked, instead of the current tab
- Added an image (img) tag that displays a gif
- Added a button (button) that activates the image and anchor when pressed
- Added breaks (br) to separate text
- Added a third heading (h3) for better displaying and customization
- Used the Comic Neue from Google Fonts: I used Comic Neue as the font for the primary copy text in my site. I also added multiple variants, such as bold, italic, light, etc. for optimal customization
- Used a color palette from Adobe Color: Created a color palette that is color-blind accessible for use in my site, and displayed all of the colors throughout the site. I included an image of the color wheel in the images folder for reference
- Created script for activating image, text, and anchor: All three are set to display="none" and given IDs in the html at first load. When the button is clicked, it finds them and sets their display to block to make them appear, but turns the div "wow" invisible. It also changes the button's text to say from "Enjoy ;)" to "Wow!". When the button is clicked again, it makes the div fade in and then fade out with custom scripts in the JS in the header.