DEV Community


Posted on

CTA Button: The Easy Button

Despite the fact that the task was to develop a simple CTA button - there is a lot that is involved when developing one on JavaScript. Within each process of the design, there are many considerations that need to be taken into account in order to come out with a successful end product. My team worked on a button that would be rendered and operate off a page on the web.

Through this task, we have come across some successes and obstacles. One of the easiest successes that we took as a team, was the fact that the design process for the button was straight forward and stream lined in an easy to do way. We simply started out on similar terms with the open-wc boilerplate that we had previously worked on. We also knew that the design template was going to be based off of Staple's infamous "That was easy" button. This allowed us to have an idea and sense of what we were aiming on creating as a team.

As mentioned, obstacles did come however. Initially when we first began the task, we did not have a grasp and understanding on how to properly make changes and edits to the styles that had already been built to the open-wc boilerplate in which we had started on. We thought that we would have to do things the old-fashioned way and make implementations of constructors in a certain manner, but using CSS was going to be enough for the styling of our application.

Overall, there are some key things that I could take away from this assignment from the get go. One of the primary takeaways was that the way the development process is for web components is drastically different from the processes we see being utilized within the Python and Java programming worlds. Identifying the many states and characteristics of the CTA button was something that required thinking beyond the keyboard. Extra time allows for the developers to consider the endless attributes and characteristics that can be added -- so ultimately time was also something I noted as a beneficial thing to have on your side.


Discussion (0)