loading...
Cover image for Week 3: My First Project + New Series

Week 3: My First Project + New Series

saracunn profile image Sara Cunningham ・2 min read

After wrapping up the first couple of weeks in my virtual internship, I got a basic understanding of web components. Throughout that time, I created my first web component, which I illustrated in my first entry. Since writing that post, I added some details to my web component like social media icons using scalable vector graphics (SVG). Once I felt satisfied with the design, I published it to NPM so other developers can use my web component.

Below is what my updated web component looks like. You can see the added social media icons that is linked to a users respectable social media pages.

Alt Text

For more information here is the GitHub repo:

GitHub logo saracunn / bio-card

Basic webcomponent for a bio/profile card

<bio-card>

This webcomponent follows the open-wc recommendation.

Installation

npm i bio-card

Usage

<script type="module">
  import 'bio-card/bio-card.js';
</script>

<bio-card></bio-card>

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with es-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html




Now, as I am more familiar with web components and web development, I am eager to start working on a real project to directly impact HAXcms. The first assignment I have been given is to build a better left-hand menu. This is an in-depth project so I will be creating a separate series where I walk you through what I am doing such as learning about the problem, conducting research, creating mockups/wireframes, implementation stages, etc. I will still be regularly updating the “My Virtual Career” series, as well as writing in my new series. If you are interested in the user interface or user experience then I recommend checking that series out so you can follow along my journey from start to finish. I am excited to start this new task, so let’s work!

View my first post in my new series, "UX/UI Menu Fix"

Posted on by:

saracunn profile

Sara Cunningham

@saracunn

Senior in the College of Information Sciences & Technology at Penn State

Discussion

markdown guide