DEV Community

Perry McLaughlin
Perry McLaughlin

Posted on

Building a Web Component

I am currently a student at Penn State taking IST 402 and as part of the class, we have 3 major projects. Our first project was creating a button. Now as part of the 2nd project, we are creating a card. I think we will be putting the button that we previously made, onto that card. Which I think will be really cool. We have started with some base code provided to us by our professor and it is just a basic card set up that looks like a learning tool.

Break Down

The card has multiple elements, these elements are emphasized icon, banner/header, scaffolding of card, and the whole card. These are going to be the different pieces that must be put in place to create an organized card that looks appealing. My group and I will have to tackle each of these pieces individually then bring them together as one. We are also going to have to choose which direction we want to go with splitting up the tasks as well as which order we achieve these tasks.

Possible Difficulties

I think the biggest difficulty will be my groups inexperience. None of us have a ton of experience working with JavaScript or HTML. We are going to have to do a lot of CSS styling and are learning as we go. I think the first project that we completed helped us get our feet wet with CSS styling so we will have to keep moving from there. I think we can really work through our difficulties by just being organized with our process and asking questions.

Manageable Pieces from Last Project

Like I said, thankfully my group and I have been able to learn a lot from creating a button in our previous assignment. We are able to look how we used CSS styling in our button and see which parts of that we could use as part of our card. We can also just use the basic formatting that we learned to use from our button. Not only layout of the button, but basic layout of coding in JavaScript and HTML. I was able to see the correct way to set up a project and that is something I will definitely be referring back to as I move forward with this project.

Current Repo:

Discussion (0)