DEV Community

noellefajt
noellefajt

Posted on

Building web components

What to consider

When building a web component you have to take many things into consideration before the actual development begins. It is important to think about all the design aspects such as properties, states, its structure, how it will look, accessibility and security concerns and more. You want to really think through the design and functionality you want in your component. Determining these up front can also help mitigate the risk of scope creep later on. Once done with all the design considerations you can start to actually create the web component. It is very possible and likely that through designing, developing, and testing changes will have to be made to the original design.

Project Comp
My team and I are working on developing a card similar to the ones shown below.
Screen Shot 2021-10-10 at 5.20.33 PM

These cards are made up of 4 elements:

  • Scaffolding (the card itself)
  • Icon
  • Header/banner
  • Body

Expected difficulties and more manageable:
I think that deciding how we want to make the card interactive may be difficult. For example my team has discussed having the card change or flip when clicked on or hovered over. We also discussed having the icon, header, and body of our card switch if the user slides the card. I think determining exactly what we want to do without making it feel overwhelming to the user will be challenging. In addition, these are interactions that we have not worked with prior to this project. I also have limited experience with web components. Trying to figure out how everything works together has been challenging. Beginning with creating a button will definitely help with the creation of the card. The button project has allowed me to get more comfortable with css, HTML, and JS. It also has given me practice with web components and looking at other people’s code to get a better idea of how to do something.

Top comments (0)