Welcome to my course project landing page.

The following projects have been created as a way to explore front-end Web design and development.

Main course projects

My First Page

There were a few goals for the My First Page project. The first one was to get a feel for HTML and a little bit of internal CSS. Though we're not using interal CSS for any of our other projects, it was still good practice to combine HTML and CSS. The second goal was learning how to properly transfer out work from Dreamweaver into our class server so we can view it online.

What I learned the most in this first project was how HTML even worked. Before this project and even the class, I had no clue how online web pages operated. I knew how to Inspect Elements on a web page, but I didn't know what they meant at all. After this first project, I had a much better understanding how elements in a page like the title, paragraphs, and image frames worked.
Squint Studio Build-Along

For the Squint Studio Build Along, the goals and tasks increased a lot compared to our first project. The biggest accomplishments achieved in the Squint Photography Studio Build along was the external CSS file. We learned how to change colors, adjust spacing, and utilize CSS Selectors which can get a little complicated. My favorite part with this project were the CSS selctors and the adjustments we made because the page felt alive after that.

Helpful Resources for Web Design and Development

10 Examples of Design Decisions and How to Make Them

This article focuses on ten design decisions. Important choices like color pallete, visual hierarchy, and accessibility choices are listed. It's nice to know what design decisions need to be made, but this article takes it further and explains that these decisions are based off of experience, intution, imitation, and reference. Making smart choices starts with research, and is aided with data analytics. The article emphasizes the importance of testing early to make sure the site is how it's supposed to. One of my favorite parts of the article was learning about the importance of documenting processes that not only work, but also those that don't.

A Quick Guide to UI Design Fundamentals

The most important thing to learn from this resource is that UI design is more than making a website attractive. Its purpose is to communicate with users to be as efficient as possible. Every design choice should create a more clear and usable resource. This article also emphasizes the importance of hierarchy through things like typography, spacing, and color contrast. Good visual hierarchy helps users look through content quickly and know what step to take whether it's pressing a button or writing a request. Visual hierarchy can be aesthetically pleasing, but should be focused on how information is taken in. The last main point is the focus on accessibility and staying consistent. Good UI design takes into account color contrast, readability, and is inclusive. These things are important because they help users know how everything works and where to find the content they need. This relates directly with Week Two when we learned about the importance of inclusive and understandable designs.

What is digital accessibility, and why does it matter?

This article by web.dev teaches about the often forgotten importance of digital accesiblity. It then lists different disabilities and how web design helps the people with that disabilty. I learned that Keeping websites simple not only makes them easier to use, but also safer. Using intense transitions or visuals in a website can affect those with seizure disorder. Having something to warn users of intense transitions, or even not using intense transitions at all will help include those with sensitivity to those things. I also found it helpful that this article gave a list people who benefit from accessible web design besides those with disabilities. Some groups in this list included; temporarily disabled, partially disabled, non native speakers, and older people with declining senses.

Welcome to my course project landing page.

Main course projects

My First Page

Squint Studio Build-Along