A lot goes into building a web component, so it's important to plan beforehand. Thinking about each aspect of the component, as well as security, accessibility to those with disabilities, and stylization of it are all important to consider.
The Comp + Breakdown
For this assignment, we are working on information cards (shown below).
These cards are made up of 4 main elements:
- Banner
- Icon
- Header
- Body
Each one of these elements will be customizable, as shown in the image. The banner will go across the top of the card and will allow for color customization. This banner will server simply as a background for the icon and header. The icon will use an SVG, which makes it easily interchangeable. The icon will be placed on the left side of the banner. The header will be composed of a header and sub-header, placed on the banner next to the icon. The body will be placed under the banner.
Expected difficulties and What may be manageable
Coming into this class, I have never touched CSS or HTML. I've done the most basic use of JavaScript, and using NodeJS is a whole new beast that I am still getting used it.
So trying to learn then instantly apply what I've learned with little practice will be the hardest thing for me to overcome. Having the button project before this will help, as that provided me with some practice in those languages.
Top comments (0)