DEV Community

JosephTJK
JosephTJK

Posted on • Updated on

Web Components: Progress

Progress Update

For this IST 402 project, we were assigned to create a Call To Action (CTA ) button that would work on every platform. Essentially every well-designed website on the internet has a CTA button to allow the users to interact and navigate to other pages or components. My partner and I leveraged the class discussions to explore the various ideas for the functionality of the button and learnt a lot.

Issues

We have created a lot of our Javascript code in VSCode. At first when developing this button we didn't understand how to change the button styles and functionality based on provided attributes. We started with plain HTML and CSS. Based on previous classes about web design with HTML and CSS, we thought we would have to make use of the constructor but found it easiest to style our button using pure CSS. We also needed to figure out conditional rendering for attributes like icon and link, which we tried to do originally using regular if statements but after doing some research on the lit element docs found a much easier inline way of computing these.

Successes

Learning about all of the different components that go into a CTA button has been a very informative experience. We were able to overcome Some hurdles that had proved to be difficult during the the project like implementing the icon, capturing all the essential button states, accessibility, linking the button to the external website, and resolving merge conflicts on GitHub.

Working in an open-source environment has been extremely beneficial in getting inspiration from our team mates, and for addressing issues with code in a timely manner. Overall, working on a web component for the first time has allowed me to learn a lot about the way websites function, and about the complexity that goes into creating something as simple as a button.

Top comments (0)