Project Page Case Study

two screenshots of the vela case study page one at medium width and one at large width next to each other

The Objective

To transform static images into accessible web content.

  • Tools:

    Figma, VScode, Github

  • Role:

    Frontend Development

  • Duration:

    Three weeks

Overview

This project is a web page designed using HTML and CSS. It is meant to give viewers a clear understanding of my previous case study by being responsive and accessible.

The Problem

The case study I made was constructed from static images, making it unresponsive and inaccessible for screen readers.

small black box that reads: Untitled Modal, dialog, link, Project module 1203837753 permalink, Project Module 0, region

Voiceover for my case study

Goals

A responsive web page that presents my case study HTML and CSS continued exploration

From Image to HTML

To begin translating the static images of my case study to a web format, I had to recreate the elements in HTML code.

a screenshot of the website

Figma Image

HTML code

HTML Code

CSS Challenges

Breaking out of a container

One challenge I faced was making an element within a container break out of its boundaries and reach the edge of the page.

The answer lay in negative margins.

A line of code that reads: margin: auto calc(50% - 50vw)

Positive margins push an element inside a container, so it would reason that negative margins will push an element outside of a container.

Responsive Design Issues

In trying to make the web page accessible, I designed the layout of the page to adapt to different screen sizes. Amidst the changing landscape, I ran into many issues in attempting to make my layout consistent.

Misaligned Elements

To implement the design of the quotes coming from the circles, the elements had to be positioned top-down. This caused an issue where the bottom description would move when the screen size changed.

two screenshots side by side with a transparent rectangle overlapping both images, showing that the images are misaligned

I resolved this by using absolute positioning to move the description outside the group, making it unable to be affected by the other elements

Absolutely not centered

To make images overlap, I often relied on position: absolute to move the element outside of the group, allowing it to be positioned independently. This method did not work when I needed an element centered vertically.

two lines of phone screens with a colored stripe behind each line. The phone screens are not centered with the colored stripes

To maintain consistency with varied screen sizes, I used relative units of measurement to position the absolute element. This did not adapt properly because when changing the screen size the shape of the page changed, resulting in the elements not being centered.

A grid gives good results.

same as the previous image but the line of phones screens is centered over the colored stripe.

A grid display allowed elements to overlap within the same row eliminating the need for absolute positioning and relative units of measurement.

Closing Thoughts

This project has expanded my understanding of coding and the creativity involved in coming up with solutions. When searching for answers on the internet, I found that there were many different possible solutions for the problem I had. Each person had taken a different approach to solving the problem. Although not all solutions were the most concise, they still worked. This helped me to understand that if you're creative enough, you can make anything work

I believe that as I continue to learn more about coding, I'll be able to come up with solutions that reflect a deep understanding of coding that are simple and elegant.

Looking Ahead

The next challenge I plan to take on is to make the page fully responsive by adapting it for mobile screens. In order to have the content comfortably on the page, I plan on adding interactivity with JavaScript. I will continue to expand my knowledge of coding to give my designs more freedom.

I am confident there will be many unexpected challenges ahead as I attempt to translate the page into mobile, but I am confident I can face the challenges and achieve success.