DEV Community

Cover image for Week 3: My First Project + New Series
Sara Cunningham
Sara Cunningham

Posted on

Week 3: My First Project + New Series

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


This webcomponent follows the open-wc recommendation.


npm i bio-card
Enter fullscreen mode Exit fullscreen mode


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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"

Top comments (0)