web design

I made a variety of web projects throughout my Web Design I & II courses. In completing these projects, I learned HTML, CSS, and basic JavaScript, practicing my coding abilities and demonstrating my knowledge through various projects.

I coded my class projects using CodePen, an online code editor that enables previewing your code at any point in your process and creating projects that you can deploy as functional websites.

For this portfolio website, I coded everything in CodePen before transferring all of my files to GitHub, where my site repo lives.

My portfolio website is my largest and most involved web design project, as I wrote all of the content, designed the entire site layout, added interactivity, uploaded all files to a Git repository, purchased my personal website domain name, and deployed my site. Now I continue to maintain my site and update it as necessary.

In addition to this portfolio, I completed the following mini web projects:

• Designing a newspaper layout using CSS grid – I practiced the layout technique of CSS grid in this project, using grid-areas and nested grids to create this newspaper-like layout. I also love the Nancy Drew series, so that is what I chose for my content.
• Designing a card layout using CSS flexbox – I learned about CSS flexbox and implemented it in this fun information website about Oregon Coast tidal life. Flexbox is incredibly useful for making designs flexible—as the name suggests—and is a great starting point for responsive designs.
• Designing a soundboard using JS event listeners – I expanded my basic knowledge of JavaScript, creating objects, adding functions, and using template literals in my code to generate a soundboard for playing spooky sounds. In this project, I referenced the keycodes of my keyboard in the code to play a sound on keydown of the specific key.
• Designing a Google Doodle using JavaScript and GSAP to animate SVGs – I designed vector art in Figma and imported my design as code to my site. I then used GSAP to animate my SVGs and add some motion and whimsy to my design. I also added CSS custom properties and CSS functions, such as hsla() color values and CSS clamp() variable sizing, into my code. Can you spot all six of the animations in my doodle?

Building my knowledge of the web and coding languages has been a challenging and sometimes frustrating time commitment, but it has helped me to understand how and why websites work. It has also given me greater insights into other languages, such as XML, and the functionality of staging and production environments in web development. As a technical writer creating online help documentation, my web design knowledge helps me spot issues and enhance my relationships with developers.